/* s05c · nur Abweichungen; die Regeln der Familie .s05 stehen in s05a.css.
   Nachsätze (2. und 3.): die Folgerung des Blocks in Lead-Größe, Inter halbfett, hell.
   Medientafel: das Foto-Fenster in voller Höhe (.s05c-gross) und der Formatfächer (.s05c-faecher) liegen in derselben Rasterzelle der Bühne
   und blenden gegeneinander (0,6 s). Der Fächer trägt hidden, solange er nicht dran ist (nur Block 3): kein Decoder im Verborgenen.
   Fächer (Fixrunde 2, 11.10.): eine Komposition auf Nacht, senkrecht zentriert, links und rechts gleicher Rand --r4. Oben das Kernbild 16:9
   über die Fächerbreite, darunter die Gabel (--s05c-gabel, hier laufen die Haarlinien) und die Formatreihe 16:9 · 1:1 · 9:16 in gleicher Höhe
   (--s05c-reihe): so hoch, dass die drei nebeneinander in die Breite passen (Breitensumme = 3,3403 × Höhe) und die Reihe noch unter dem
   Kernbild Platz hat; space-between macht die beiden Abstände gleich. Drei sichtbar verschiedene Zuschnitte desselben Motivs (vorher
   1:1 · 4:5 · 9:16, die wie drei gleiche Thumbnails wirkten). In Block 2 bleibt das große Foto-Fenster stehen.
   Die Fenster öffnen wie ein Vorhang (Klasse ab3 an .s05-kette; der Fächer wird mit Block 3 sichtbar, die Animation startet dann). */
.s05c .s05-nach{font-weight:500;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.01em;color:var(--hell-text);max-width:24em;text-wrap:balance}

.s05c .s05c-gross{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
/* 1. Kampagnenmaterial (s05c-2): Lage 0 % zeigt bei 44 vw × 100 vh die linken 49 % des Bildes, die goldene Rosette beginnt bei 46,5 % und
   ragte als Sichel herein; Zoom 1,08 von der linken Kante aus lässt die linken 45 % sehen, Stoffmuster und Markisenfotos bleiben (zweiter
   Durchgang 11.10.). .s05-bild trägt nur Deckkraft-Übergänge, der Zoom kollidiert mit nichts. */
.s05c .s05c-gross > img[data-von="1"]{transform:scale(1.08);transform-origin:0 50%}
.s05c .s05c-gross.an{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s 0s}
html:not(.js) .s05c .s05c-gross{opacity:1;visibility:visible}

.s05c .s05c-faecher{grid-column:1;grid-row:1;position:relative;display:grid;grid-template-rows:auto var(--s05c-gabel) var(--s05c-reihe);align-content:center;padding-inline:var(--r4);opacity:0;transition:opacity .6s var(--ease);
  --s05c-gabel:clamp(56px,7vh,96px);--s05c-pad:clamp(32px,5vh,64px);--s05c-breit:calc(var(--medium-b) - 2 * var(--r4));
  --s05c-reihe:min(calc(100vh - var(--s05c-breit) * 9 / 16 - var(--s05c-gabel) - var(--s05c-pad)),calc((var(--s05c-breit) - 2 * var(--r4)) / 3.3403))}
.s05c .s05c-faecher.an{opacity:1}
.s05c .s05c-f169{grid-row:1;width:100%;aspect-ratio:16/9}
.s05c .s05c-aeste{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.s05c .s05c-aeste .s05c-spitze{fill:var(--gold-hell);stroke:none;opacity:0;transition:opacity .3s var(--ease) var(--verz,0s)}
.s05c .s05c-aeste .s05c-spitze.an{opacity:1}
.s05c .s05c-aeste .s05c-spitze:not(.an){transition:none}
.js:not(.ruhig) .s05c-aeste .zieht.an{stroke-dashoffset:0}
.js:not(.ruhig) .s05c-aeste .zieht:not(.an){transition:none}
.s05c .s05c-reihe{grid-row:3;display:flex;justify-content:space-between;align-items:flex-start;height:var(--s05c-reihe)}
.s05c .s05c-format{flex:none}
.s05c .s05c-f169k{height:100%;aspect-ratio:16/9}
.s05c .s05c-f11{height:100%;aspect-ratio:1}
.s05c .s05c-f916{height:100%;aspect-ratio:9/16}
.js:not(.ruhig) .s05c .s05c-format{clip-path:inset(0 0 0 100%)}
/* Block 3: Kernbild und die drei Formate öffnen versetzt, danach ziehen die Haarlinien mit Pfeilspitzen vom Kernbild zu den Varianten (s05c.js) */
.js:not(.ruhig) .s05c .ab3 .s05c-f169{animation:vorhang .7s var(--ease-weich) .1s both}
.js:not(.ruhig) .s05c .ab3 .s05c-f169k{animation:vorhang .7s var(--ease-weich) .4s both}
.js:not(.ruhig) .s05c .ab3 .s05c-f11{animation:vorhang .7s var(--ease-weich) .5s both}
.js:not(.ruhig) .s05c .ab3 .s05c-f916{animation:vorhang .7s var(--ease-weich) .6s both}
html:not(.js) .s05c .s05c-faecher{display:none}