/* Fit mit Marius – Seite v3 (24.10.2026). Richtung „pinned poster“ (tasteskill): ein Rahmen bleibt, sein Inhalt wechselt.
   Idee: Der 45-Minuten-Ring des Signets wird zur Uhr des Scroll-Films. Tokens aus brand/brand.json (tools/build_site.py).
   Mobil zuerst. Keine Fremd-Ressourcen. Bewegung nur transform/opacity/clip-path, alles mit Ruhe-Fassung. */
@font-face{font-family:'Big Shoulders';src:url('/assets/fonts/BigShoulders-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/InstrumentSans-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/InstrumentSans-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

:root{
  --grund:#ECEEEA;--flaeche:#FFFFFF;--text:#13202D;--text-2:#4A5663;
  --akzent:#C9281B;--akzent-2:#24578F;--linie:#C7CDD1;
  --d-grund:#13202D;--d-flaeche:#1D2C3B;--d-text:#ECEEEA;--d-text-2:#A3AFBB;
  --d-akzent:#FF6B5B;--d-akzent-2:#8DB4E2;--d-linie:#33465A;
  --anzeige:'Big Shoulders',Impact,'Arial Narrow',sans-serif;--lese:'Instrument Sans',system-ui,sans-serif;
  /* fünf Stufen: Monument (je Element in vw), Überschrift, groß, Text, klein */
  --t-h2:clamp(44px,5.6vw,88px);--t-gross:clamp(20px,2vw,28px);--t-text:18px;--t-klein:15px;
  --rand:20px;--kopf:58px;--max:1536px;
  --raus:cubic-bezier(.23,1,.32,1);--drin:cubic-bezier(.77,0,.175,1)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font:400 var(--t-text)/1.55 var(--lese);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--akzent-2);outline-offset:3px}
h1,h2,h3{font-family:var(--anzeige);font-weight:700;line-height:.9;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
button,a,[role=button]{touch-action:manipulation}
button{font:inherit;color:inherit;user-select:none;-webkit-user-select:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--text);color:var(--grund);padding:10px 14px;z-index:20}
.skip:focus{left:8px}

/* Knöpfe: flach, eckig, eine Farbe. Druck-Feedback sofort (Emil: scale .97, 160 ms ease-out). */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;background:var(--akzent);color:#FFFFFF;
  font:700 var(--t-text)/1 var(--lese);text-decoration:none;border:0;cursor:pointer;transition:transform 160ms var(--raus),background-color 160ms ease}
.btn:active{transform:scale(.97)}
.leise{background:none;border:0;padding:8px 0;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#A31F14}
  a:hover{color:var(--akzent-2)}
  .btn:hover,.folgen-link:hover{color:#FFFFFF}
}

/* Kopf: Wortmarke, drei Links, eine Aktion. Auf der Startseite liegt er über der Film-Bühne und scrollt weg. */
.top{position:relative;z-index:6}
.start .top{position:absolute;top:0;left:0;right:0}
.top-in{display:flex;align-items:center;gap:28px;min-height:var(--kopf)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 28px/1 var(--anzeige);margin-right:auto}
.brand img{width:34px;height:34px}
.top-nav{display:none;gap:26px}
.top-nav a,.top-ig{font-weight:700;font-size:var(--t-klein);text-decoration:none;padding:8px 0}
.top-ig{border-bottom:3px solid var(--akzent)}
@media (hover:hover) and (pointer:fine){.brand:hover{color:var(--text)}.top-nav a:hover,.top-ig:hover{color:var(--akzent-2)}}

/* ---------------------------------------------------------------- Film: Ruhe-Fassung (ohne JS, reduzierte Bewegung, Datensparen) */
.film{position:relative;background:var(--grund)}
.film-buehne{padding:calc(var(--kopf) + 8px) var(--rand) 56px;max-width:var(--max);margin:0 auto;display:grid;gap:22px}
.film-titel{font-size:15.4vw;line-height:.86;text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap;order:1}
.film-intro{order:2;display:grid;gap:18px;justify-items:start}
.film-satz{margin:0;font-size:18px;font-weight:700;line-height:1.4;max-width:30ch}
.film-bild{order:3;position:relative;background:var(--d-grund);overflow:hidden}
.film-poster img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.film-canvas{display:none}
.film-ki{position:absolute;left:10px;top:10px;margin:0;background:var(--d-grund);color:var(--d-text);font-size:var(--t-klein);font-weight:700;line-height:1.3;padding:7px 10px;max-width:calc(100% - 20px)}
.film-stationen{order:4;list-style:none;margin:8px 0 0;padding:0;display:grid;gap:26px}
.station-zahl{font:700 var(--t-h2)/.9 var(--anzeige);margin:0 0 8px;letter-spacing:-.005em}
.film-station p:last-child{margin:0;max-width:34ch}
.film-uhr{display:none}

/* ---------------------------------------------------------------- Film live: sticky Bühne, Canvas, Fenster wächst (site.js) */
.film-an .film[data-film]{height:440svh}
.film-an .film[data-film] .film-buehne{position:sticky;top:0;height:100svh;max-width:none;padding:0;display:block;overflow:hidden}
.film-an .film[data-film] .film-bild{position:absolute;inset:0;clip-path:inset(calc(15.4vw * .86 + var(--kopf) + 22px) 16px 196px 16px)}
.film-an .film[data-film] .film-rahmen,.film-an .film[data-film] .film-poster,.film-an .film[data-film] .film-poster img,.film-an .film[data-film] .film-canvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.film-an .film[data-film] .film-rahmen{will-change:transform}
.film-an .film[data-film] .film-poster img{object-position:50% 40%}
.film-an .film[data-film] .film-canvas{display:block;opacity:0;transition:opacity 200ms ease}
.film-an .film[data-film] .film-canvas.da{opacity:1}
.film-an .film[data-film] .film-ki{left:0;top:0;will-change:transform;max-width:calc(100% - 112px)}
.film-an .film[data-film] .film-titel{position:absolute;left:var(--rand);right:var(--rand);top:calc(var(--kopf) + 6px);z-index:3}
.film-an .film[data-film] .film-intro{position:absolute;left:var(--rand);right:var(--rand);bottom:20px;z-index:3;gap:14px}
.film-an .film[data-film] .film-satz{font-size:18px}
.film-an .film[data-film] .film-stationen{position:absolute;inset:auto 0 0 0;margin:0;display:block;z-index:4}
.film-an .film[data-film] .film-station{position:absolute;left:12px;right:12px;bottom:12px;background:var(--grund);padding:20px 20px 18px;opacity:0;visibility:hidden}
.film-an .film[data-film] .film-station .station-zahl{font-size:var(--t-h2)}
.film-an .film[data-film] .film-station p:last-child{font-size:var(--t-klein);line-height:1.45}
.film-an .film[data-film] .film-uhr{display:block;position:absolute;right:14px;top:14px;width:46px;height:46px;z-index:4;opacity:0}
.film-uhr .uhr-spur{fill:none;stroke:rgba(236,238,234,.36);stroke-width:9}
.film-uhr .uhr-bogen{fill:none;stroke:var(--akzent);stroke-width:9;stroke-dasharray:75 75;stroke-dashoffset:75}
.film-uhr .uhr-m{fill:var(--d-text)}

/* ---------------------------------------------------------------- Themen: die Tafel auf Stahl */
.themen{background:var(--d-grund);color:var(--d-text);padding:96px 0 104px}
.themen :focus-visible{outline-color:var(--d-akzent-2)}
.themen-kopf h2{font-size:var(--t-h2)}
.themen-kopf p{margin:18px 0 0;max-width:46ch;font-size:18px}
.tafel{width:100%;border-collapse:collapse;margin-top:28px;font-variant-numeric:tabular-nums}
.tafel tbody{display:block}
.tafel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"thema zahl" "worum quelle";column-gap:16px;padding:9px 0}
.tafel td{padding:0}
.tafel td:nth-child(1){grid-area:thema;font-size:var(--t-text);font-weight:700;line-height:1.25}
.tafel td:nth-child(2){grid-area:worum;font-size:var(--t-klein);color:var(--d-text-2)}
.tafel td:nth-child(3){grid-area:quelle;font-size:var(--t-klein);text-align:right}
.tafel td.zahl{grid-area:zahl;font:700 28px/1.1 var(--anzeige);text-align:right;white-space:nowrap}
.tafel td a{color:var(--d-text);text-decoration-color:var(--d-akzent-2)}
.tafel .gruppe{display:block;padding:40px 0 8px}
.tafel .gruppe th{display:block;text-align:left;font:700 28px/1.2 var(--lese);color:var(--d-akzent)}
@media (hover:hover) and (pointer:fine){.tafel td a:hover{color:var(--d-akzent-2)}}

/* ---------------------------------------------------------------- Zahlen-Deck (Handy, < 720 px): 1 Themen-Leiste · 2 Wischkarten im Look
   der Posts · 3 Steuerung im Daumenbereich. Wischen = natives Scroll-Snap (kein Scroll-Jacking); ohne JS bleiben Leiste (Anker) + Wischen. */
:root{--w-grund:#F3EEE7;--w-text:#13202D;--w-text-2:#5C534A;--w-akzent-2:#2D6A43;
  --b-grund:#24578F;--b-text:#ECEEEA;--b-text-2:#C9D6E6;--b-linie:#3A6CA3}
.tafel{display:none}
.deck{margin-top:32px}
.deck-chips{display:flex;flex-wrap:wrap;gap:8px}
.deck-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--d-linie);color:var(--d-text-2);
  font:700 15px/1 var(--lese);text-decoration:none;transition:transform 160ms var(--raus),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.deck-chip-n{font-size:13px;opacity:.7;font-variant-numeric:tabular-nums}
.deck-chip[aria-current="true"]{background:var(--d-text);border-color:var(--d-text);color:var(--d-grund)}
.deck-chip:active{transform:scale(.97)}
.deck-karten{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;margin:16px calc(var(--rand) * -1) 0;padding:0 var(--rand);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);overscroll-behavior-x:contain;scrollbar-width:none}
.deck-karten::-webkit-scrollbar{display:none}
.deck-karten:focus-visible{outline-offset:-3px}
.karte{--k-akzent:currentColor;position:relative;overflow:hidden;isolation:isolate;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;
  min-height:min(350px,58svh);padding:22px 20px 18px;scroll-margin-top:calc(var(--kopf) + 120px)}
.karte-zahl{--k-gr:104px;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin:0;
  font:700 var(--k-gr)/.84 var(--anzeige);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.karte-zahl.l{--k-gr:80px}
.karte-zahl.m{--k-gr:58px}
.karte-zahl.s{--k-gr:48px}
.karte-wert{white-space:nowrap}
.karte-einheit{font-size:.4em;line-height:1;color:var(--k-akzent)}
.karte-thema{margin:auto 0 0;padding-top:24px;font:700 22px/1.2 var(--lese);letter-spacing:0}
.karte-worum{margin:4px 0 0;font-size:16px;line-height:1.4;color:var(--k-leise,inherit)}
.karte-quelle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;margin-top:20px;padding:0 14px;border:1.5px solid currentColor;
  font:700 15px/1.2 var(--lese);text-decoration:none;transition:transform 160ms var(--raus)}
.karte-quelle::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-top:2.2px solid currentColor;border-right:2.2px solid currentColor;transform:rotate(45deg)}
.karte-quelle:active{transform:scale(.97)}
/* Looks wie auf den Posts (brand/LOOK.md): Küche, Trainingsheft, Farbblock, Nachtschicht, Logbuch */
.look-kueche{--k-akzent:var(--w-akzent-2);--k-leise:var(--w-text-2);background:var(--w-grund);color:var(--w-text)}
.look-heft{--k-akzent:var(--b-grund);--k-leise:var(--text-2);color:var(--text);background:#FFFFFF;padding-left:36px}
.look-heft::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--akzent);z-index:-1}
.look-block{--k-akzent:#FFFFFF;--k-leise:var(--b-text-2);background:var(--b-grund);color:var(--b-text)}
.look-block::after{content:"";position:absolute;right:-74px;top:-74px;width:230px;height:230px;border:18px solid var(--b-linie);border-radius:50%;z-index:-1}
.look-nacht{--k-akzent:var(--d-akzent);--k-leise:var(--d-text-2);background:var(--d-flaeche);color:var(--d-text)}
.look-nacht::after{content:"";position:absolute;right:-64px;top:-64px;width:160px;height:160px;border:4px solid var(--d-akzent);border-radius:50%;clip-path:inset(50% 50% 0 0);z-index:-1}
.look-logbuch{--k-akzent:var(--akzent);--k-leise:var(--text-2);color:var(--text);background:var(--grund);border-top:6px solid var(--akzent)}
.deck-steuer{display:none}
.js .deck-steuer{display:flex;align-items:center;gap:14px;margin-top:16px}
.deck-pfeil{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--d-linie);background:none;color:var(--d-text);cursor:pointer;
  transition:transform 160ms var(--raus),opacity 200ms ease}
.deck-pfeil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4}
.deck-pfeil:active{transform:scale(.95)}
.deck-pfeil:disabled{opacity:.3;cursor:default}
.deck-mitte{flex:1;min-width:0}
.deck-balken{display:flex;gap:2px}
.deck-seg{display:contents}
.deck-balken i{flex:1;height:4px;background:var(--d-linie);transition:background-color 200ms ease}
.deck-seg + .deck-seg i:first-child{margin-left:6px}
.deck-balken i.ist-vorbei{background:var(--d-text-2)}
.deck-balken i.ist-jetzt{background:var(--d-akzent)}
.deck-zaehler{margin:9px 0 0;text-align:center;font:700 14px/1 var(--lese);color:var(--d-text-2);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.deck-chip:hover{border-color:var(--d-text-2);color:var(--d-text)}.deck-pfeil:not(:disabled):hover{border-color:var(--d-text)}}

/* Der eine lebendige Teil: 15-Sekunden-Test mit dem Ring als Uhr */
.test{display:grid;gap:30px;margin-top:72px;background:var(--d-flaeche);padding:28px 20px}
.test h3{font-size:var(--t-h2);line-height:.95}
.test-text p{margin:14px 0 0;max-width:44ch;font-size:18px}
.test-text .test-quelle{font-size:var(--t-klein);color:var(--d-text-2)}
.test-text .test-quelle a{color:var(--d-text)}
.test-uhr{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.test-uhr[hidden]{display:none}
.test-ring{position:relative;width:168px;height:168px}
.test-ring svg{width:100%;height:100%;display:block}
.ring-spur{fill:none;stroke:var(--d-linie);stroke-width:8}
.ring-lauf{fill:none;stroke:var(--d-akzent);stroke-width:8;stroke-dasharray:100 100;stroke-dashoffset:100}
.test-uhr[data-phase=laeuft] .ring-lauf{stroke-dashoffset:0;transition:stroke-dashoffset 15s linear}
.test-uhr[data-phase=zaehlen] .ring-lauf{stroke-dashoffset:0}
.ring-zahl{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center}
.ring-wert{font:700 var(--t-h2)/1 var(--anzeige);font-variant-numeric:tabular-nums}
.ring-einheit{font-size:var(--t-klein);font-weight:700;color:var(--d-text-2)}
.test-steuer .btn{background:var(--d-akzent);color:var(--d-grund)}
.test-zaehler{display:none}
.test-uhr[data-phase=zaehlen] .test-start{display:none}
.test-uhr[data-phase=zaehlen] .test-zaehler{display:block}
.test-frage{margin:0 0 10px;font-weight:700}
.zaehler{display:flex;align-items:center;gap:12px}
.knopf{width:52px;height:52px;border:0;background:var(--d-grund);color:var(--d-text);font:700 28px/1 var(--lese);cursor:pointer;transition:transform 140ms var(--raus)}
.knopf:active{transform:scale(.94)}
.zaehler-wert{min-width:3ch;text-align:center;font:700 44px/1 var(--anzeige);font-variant-numeric:tabular-nums}
.test-ergebnis{margin:12px 0 4px;font-size:17px;max-width:36ch}
.test-neu{color:var(--d-text)}
@media (hover:hover) and (pointer:fine){.knopf:hover{background:var(--akzent-2)}.test-steuer .btn:hover{background:#FF8577;color:var(--d-grund)}}

/* ---------------------------------------------------------------- Über mich: Überschrift bleibt stehen, Porträts ziehen vorbei */
.ueber{position:relative;padding:0 0 72px}
.ueber-pin{position:sticky;top:0;z-index:2;background:var(--grund);padding:14px var(--rand) 12px;pointer-events:none}
.ueber-titel{font-size:15.4vw;line-height:.86;text-transform:uppercase;white-space:nowrap;letter-spacing:-.005em}
.ueber-titel .br-gross{display:none}
.personen{list-style:none;margin:0;padding:24px var(--rand) 0;position:relative;z-index:1}
.person{width:72%;margin-top:48px}
.person:first-child{margin-top:12px}
.ueber .person:first-child{margin-top:12px}
.person.p1{margin-left:auto}
.person figure{margin:0}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--d-grund)}
.person figcaption{margin-top:12px}
.person strong{display:block;font-size:18px;line-height:1.3}
.person span{display:block;font-size:var(--t-klein);color:var(--text-2)}
.person p{margin:8px 0 0;font-size:var(--t-text);max-width:34ch}
.ueber-ki{margin:10px 0 0;font:400 var(--t-klein)/1.4 var(--lese);color:var(--text-2);letter-spacing:0;text-transform:none;white-space:normal}

/* ---------------------------------------------------------------- Posts: Kacheln mit Etikett */
.posts{background:var(--grund);padding:88px 0 104px}
.posts-kopf h2{font-size:var(--t-h2)}
.posts-kopf p{margin:18px 0 0;max-width:46ch;font-size:18px}
.kacheln{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kachel figure{margin:0;height:100%;display:flex;flex-direction:column}
.kachel img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--flaeche)}
.kachel figcaption{flex:1;background:var(--flaeche);padding:12px 12px 14px}
.kachel strong{display:block;font-size:var(--t-klein);line-height:1.3}
.kachel span{display:block;font-size:var(--t-klein);line-height:1.35;color:var(--text-2);margin-top:2px}
.kachel .ki-hinweis{color:var(--text);font-weight:700;margin-top:6px}

/* ---------------------------------------------------------------- So entsteht ein Post: ein Verb je Bild */
.ablauf{background:var(--d-grund);color:var(--d-text)}
.verb{position:relative;height:100svh;min-height:560px;overflow:hidden}
.verb-bild{position:absolute;inset:0;overflow:hidden;background:var(--d-flaeche)}
.verb-bild picture{position:absolute;left:0;right:0;top:-6%;height:112%;will-change:transform}
.verb-bild img{width:100%;height:100%;object-fit:cover;filter:brightness(.66)}
.verb-text{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.verb-wort{font-size:15.4vw;line-height:.86;text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap;text-align:center}
.verb-satz{position:absolute;left:var(--rand);right:var(--rand);bottom:20px;margin:0;background:rgba(19,32,45,.86);padding:14px 16px;font-size:var(--t-text)}

/* ---------------------------------------------------------------- Folgen: das ganze Band ist der Link */
.folgen{background:var(--akzent)}
.folgen-link{display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;min-height:46svh;padding:20px var(--rand) 18px;color:var(--grund);
  text-decoration:none;background:var(--akzent);max-width:none}
.folgen-satz{font-size:18px;font-weight:700;max-width:30ch;line-height:1.4}
.folgen-pfeil{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:square}
.folgen-wort{grid-column:1 / -1;align-self:end;font-size:32vw;line-height:.8;padding-top:.14em;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:-.02em}
.folgen-link:focus-visible{outline:4px solid var(--text);outline-offset:-8px}
.folgen-link:active .folgen-wort{transform:scale(.99)}
.folgen-wort{transition:transform 160ms var(--raus);transform-origin:0 100%}
@media (hover:hover) and (pointer:fine){.folgen-link:hover{background:var(--grund);color:var(--akzent)}}
.folgen-link:focus-visible{background:var(--grund);color:var(--akzent)}

/* ---------------------------------------------------------------- Fuß: eine ruhige Zeile */
.bottom{padding:72px 0 28px}
.bottom-in{display:grid;gap:10px;font-size:var(--t-klein)}
.bottom p{margin:0}
.bottom-ki{color:var(--text)}
.bottom nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.bottom nav a{color:var(--text);font-weight:700}
.bottom-fein{color:var(--text-2)}

/* ---------------------------------------------------------------- Rechtsseiten (Inhalt unverändert, Look angeglichen) */
.legal{padding:40px 0 72px}
.narrow{max-width:800px}
.legal h1{font-size:clamp(40px,9vw,80px)}
.legal h2{font-size:32px;margin:40px 0 10px}
.legal .lead{font-size:18px;color:var(--text-2);margin:16px 0 26px}
.legal p,.legal li{max-width:42em}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin:6px 0}
.legal hr{border:0;height:8px;background:var(--flaeche);margin:48px 0 0}
.card{background:var(--flaeche);padding:6px 22px}
.card.accent{border-left:8px solid var(--akzent)}
.kw{font-weight:700;background:var(--text);color:var(--grund);padding:1px 7px}
.actions{margin-top:28px}

/* ---------------------------------------------------------------- Auftritt der Teile (site.js setzt .warte nur unterhalb des Bildschirms) */
@media (prefers-reduced-motion:no-preference){
  .warte{opacity:0;transform:translateY(24px)}
  .auf,.auf-kind{transition:opacity 520ms var(--raus),transform 720ms var(--raus)}
}

/* ---------------------------------------------------------------- Tablet und Desktop */
@media (min-width:720px){
  :root{--rand:32px;--kopf:68px}
  .top-nav{display:flex}
  .film-titel{font-size:10.4vw}
  .film-buehne{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .film-titel{grid-column:1 / -1}
  .film-intro{grid-column:1 / 5;align-self:start}
  .film-bild{grid-column:5 / -1;grid-row:span 2}
  .film-poster img{aspect-ratio:16/9}
  .film-stationen{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .themen{padding:160px 0 160px}
  .themen-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .themen-kopf h2{grid-column:1 / 8}
  .themen-kopf p{grid-column:8 / -1;margin:0}
  .tafel{display:table;margin-top:40px}
  .deck{display:none}
  .tafel tr{display:grid;grid-template-columns:33% 33% minmax(0,1fr) auto;grid-template-areas:none;column-gap:0;padding:0;font-size:var(--t-gross);line-height:1.5}
  .tafel td:nth-child(n){grid-area:auto;font:400 var(--t-gross)/1.5 var(--lese);color:var(--d-text);text-align:left}
  .tafel td.zahl{text-align:right;font-weight:400}
  .tafel td:nth-child(-n+3){padding-right:20px}
  .tafel .gruppe{padding:72px 0 20px}
  .tafel tbody:first-of-type .gruppe{padding-top:48px}
  .test{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:120px;padding:48px 40px}
  .test-text{grid-column:1 / 7}
  .test-uhr{grid-column:7 / -1;grid-template-columns:auto 1fr;gap:36px}
  .test-ring{width:220px;height:220px}
  .person{width:58%}
  .kacheln{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .posts{padding:160px 0 160px}
  .posts-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .posts-kopf h2{grid-column:1 / 8}
  .posts-kopf p{grid-column:8 / -1;margin:0}
  .kacheln{margin-top:56px}
  .verb-satz{right:auto;bottom:32px;max-width:44ch;padding:18px 22px}
  .verb-wort{font-size:min(16vw,300px)}
  .folgen-link{min-height:60svh;padding:28px var(--rand) 24px}
  .folgen-satz{font-size:var(--t-gross);line-height:1.3;max-width:28ch}
  .folgen-pfeil{width:48px;height:48px}
  .folgen-wort{font-size:min(34.4vw,640px)}
  .bottom{padding:30svh 0 30px}
  .bottom-in{grid-template-columns:1fr auto 1fr;align-items:end;gap:24px}
  .bottom-fein{text-align:right}
}
/* Film live im Querformat: Fenster mittig (46 % breit), Titel oben, Satz links unten, Knopf rechts unten */
@media (orientation:landscape) and (min-width:720px){
  .film-an .film[data-film] .film-bild{clip-path:inset(calc(10.4vw * .86 + var(--kopf) + 26px) 27vw 0 27vw)}
  .film-an .film[data-film] .film-rahmen{transform:translateY(calc(10.4vw * .86 + var(--kopf) + 26px))}
  .film-an .film[data-film] .film-ki{max-width:none}
  .film-an .film[data-film] .film-titel{text-align:center;top:calc(var(--kopf) + 4px)}
  .film-an .film[data-film] .film-intro{bottom:32px;display:flex;justify-content:space-between;align-items:flex-end}
  .film-an .film[data-film] .film-satz{font-size:18px;max-width:24ch}
  .film-an .film[data-film] .film-station{left:var(--rand);right:auto;bottom:32px;width:min(460px,32vw);padding:28px 30px 26px}
  .film-an .film[data-film] .film-station .station-zahl{font-size:var(--t-h2)}
  .film-an .film[data-film] .film-station p:last-child{font-size:18px}
  .film-an .film[data-film] .film-uhr{right:var(--rand);top:calc(var(--kopf) + 8px);width:88px;height:88px}
}
@media (min-width:1100px){
  .ueber{padding-bottom:0}
  .ueber-pin{height:100svh;display:grid;place-items:center;background:none;padding:0}
  .ueber-titel{font-size:10.4vw;line-height:.84;text-align:center}
  .ueber-titel .br-gross{display:inline}
  .personen{margin-top:-100svh;padding:58svh var(--rand) 8svh;max-width:none}
  .person{width:29vw;margin-top:10svh}
  .person.p1{margin-top:-30svh}
  .person:first-child{margin-top:0}
  .person.p0{margin-left:3vw}
  .person.p1{margin-left:auto;margin-right:3vw}
  .person strong{font-size:var(--t-text)}
  .person p{max-width:32ch}
  .ueber-ki{margin-top:22px;text-align:center;max-width:30ch}
  .ueber-pin{place-content:start center;padding-top:26svh}
  /* Verben: zwei Hälften (Bild randabfallend, Seiten im Wechsel), zum Schluss die Halle als Vollbild */
  .verb.links,.verb.rechts{display:grid;grid-template-columns:1fr 1fr}
  .verb.links .verb-bild,.verb.rechts .verb-bild{position:relative;inset:auto;grid-row:1}
  .verb.rechts .verb-bild{grid-column:2}
  .verb.links .verb-bild{grid-column:1}
  .verb.links .verb-bild img,.verb.rechts .verb-bild img{filter:none}
  .verb.links .verb-text,.verb.rechts .verb-text{position:static;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--rand)}
  .verb.rechts .verb-text{grid-column:1}
  .verb.links .verb-text{grid-column:2;padding-left:64px}
  .verb.links .verb-wort,.verb.rechts .verb-wort{font-size:7.4vw;text-align:left}
  .verb.links .verb-satz,.verb.rechts .verb-satz{position:static;background:none;padding:0;margin-top:32px;font-size:var(--t-gross);line-height:1.35;max-width:26ch}
  .verb.voll .verb-text{place-items:center start;padding:0 var(--rand)}
  .verb.voll .verb-wort{font-size:10.4vw;text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}