/* Fels der Rettung / Скала спасения — Gestaltung.
   Übersetzt aus quellen/03 Kempinski Design-DNA.md (Abschnitt 7, Regeln 1–18). Jede Zahl hier ist dort gemessen;
   bewusste Abweichungen tragen den Vermerk "Abweichung". Quelle der Datei: werkzeug/quelle/site.css — nie in site/ ändern. */

/* ───────── Schriften: Cormorant (Titel) und Jost (alles andere), je lateinisch · latin-ext · kyrillisch ───────── */
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/cormorant-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Ersatzschriften mit angeglichener Breite, bis die Dateien da sind (gemessen mit fontTools gegen Liberation Serif/Sans,
   die mit Times New Roman/Arial maßgleich sind: Cormorant 94–97 %, Jost 94,5–96,6 %). */
@font-face{font-family:"Cormorant Ersatz";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:96%;ascent-override:96%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Jost Ersatz";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:95.5%;ascent-override:112%;descent-override:39%;line-gap-override:0%}

:root{
  --weiss:#FFFFFF;--elfenbein:#F8F6F0;--blau:#02102A;--stein:#B5A191;--stein-text:#927862;--grau:#999FAA;--dunkel:#191919;--linie:#D9DBDF;
  --serif:"Cormorant","Cormorant Ersatz",serif;--sans:"Jost","Jost Ersatz",sans-serif;
  --weich:cubic-bezier(.4,0,.2,1);
  --kopf:80px;
  --rand:20px;          /* Regel 12: am Handy 20–24 px (Abweichung: Vorbild 12 px) */
  --luft:64px;          /* Regel 11 */
  --akk-rand:0px;       /* Bild-Akkordeon: am Handy randlos, ab 1024 je 80 px (K1 Nr. 2) */
  --an:0;               /* Bild-Band wächst nur am Desktop */
}
@media (min-width:600px){:root{--rand:32px}}
@media (min-width:1024px){:root{--rand:64px;--luft:128px;--akk-rand:80px;--an:1}}
@media (min-width:1366px){:root{--rand:144px}}
@media (min-width:1920px){:root{--rand:max(227px,calc((100vw - 1466px)/2));--luft:200px;--akk-rand:max(80px,calc((100vw - 1760px)/2))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--weiss);color:var(--blau);font:400 16px/24px var(--sans);letter-spacing:.02em;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Zeichen stehen auf Bruchteilen eines Pixels statt auf ganzen: sonst reißen gesperrte Versalien auf („ПРИЙТ И“, „КОНТАКТ Ы“) */
  text-rendering:geometricPrecision}
@media (min-width:1024px){body{font-size:18px;line-height:26px}}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg{display:block}
img,video{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;text-rendering:inherit;background:none;border:0;padding:0;border-radius:0;cursor:pointer}
/* Fokusring: Farbe nach der Fläche, auf der er steht – Nachtblau auf Weiß und Elfenbein (18,9:1), Weiß auf Film, Bild-Band,
   Sprachwahl, Bildern und Fußzeile. (Stein hielt nur 1,8–2,5:1; Nacharbeit 09.10.2026.) */
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.film :focus-visible,.wahl :focus-visible,.band :focus-visible,.paar-bild :focus-visible,.fuss :focus-visible,
.kopf:not(.fest):not(.offen) :focus-visible,.recht-teil:not([open]) summary:focus-visible{outline-color:var(--weiss)}
html:not(.js) .kopf :focus-visible{outline-color:var(--blau)}
[id]{scroll-margin-top:var(--kopf)}
/* Sprungziele aus Menü und Kopfzeile: die weißen Sektionen und der Kontakt-Block bekommen 48 px Luft unter der Kopfzeile
   (die Elfenbein-Sektionen bringen ihren Innenabstand mit, das Bild-Band beginnt bündig) */
.sektion:not(.elfenbein):not(.band),#kontakt{scroll-margin-top:calc(var(--kopf) + 48px)}
[hidden]{display:none!important}
.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-80px;z-index:70;background:var(--weiss);color:var(--blau);padding:12px 20px;border:1px solid var(--stein)}
.sprung:focus{top:12px}

/* ───────── Titel (Regeln 4–6): Cormorant 400 ab 60 px mit −0,03em, 500 bis 50 px und auf Bildern mit +0,01em ───────── */
.t{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;letter-spacing:.01em;text-wrap:balance}
.t-sektion{font-size:38px;line-height:42px}
.t-liste{font-size:36px;line-height:39px}
.t-quer{font-size:38px;line-height:42px}
.t-hoch{font-size:28px;line-height:30px;letter-spacing:.02em}
.t-karte{font-size:38px;line-height:42px}
/* Kachel-Titel: unter 390 px Breite mit dem Fenster kleiner, damit lange Wörter (Frauenfrühstück) nicht im Wort brechen */
.t-kachel{font-size:min(20px,5.12vw);line-height:1.1}
@media (min-width:768px){.t-kachel{font-size:22px;line-height:24px}}      /* drei Spalten zu je rund 220 px */
@media (min-width:1024px){
  .t-sektion{font-size:60px;line-height:60px;font-weight:400;letter-spacing:-.03em}
  .bild-text .t-sektion{font-weight:500;letter-spacing:.01em}
  .t-liste{font-size:50px;line-height:52px}
  .t-quer{font-size:52px;line-height:52px;font-weight:400;letter-spacing:0}
  .t-hoch{font-size:38px;line-height:41px;letter-spacing:.01em}
  .t-karte{font-size:38px;line-height:41px}
  .t-kachel{font-size:28px;line-height:30px}
}
@media (min-width:1920px){
  .t-sektion{font-size:80px;line-height:80px}
  .t-liste{font-size:64px;line-height:64px;font-weight:400;letter-spacing:-.03em}
  .t-hoch,.t-karte{font-size:48px;line-height:52px}
}
/* Versalien nur für Knöpfe und Überzeilen (Regel 8) */
.versal{font:500 16px/22px var(--sans);letter-spacing:.07em;text-transform:uppercase}

/* ───────── Knöpfe (Regel 18) ───────── */
/* inline-block statt flex: in einem Flex-Behälter fiele das Leerzeichen vor einem lang-Einsprengsel weg („в Instagram“) */
.knopf{display:inline-block;min-height:48px;padding:12px 28px;border:1px solid var(--stein);background:transparent;color:var(--blau);font:500 16px/22px var(--sans);letter-spacing:.07em;text-transform:uppercase;text-align:center}
.knopf--gross{min-height:56px;padding:16px 28px}
.knopf--hell{color:var(--weiss)}
.knopf--text{border-color:transparent}
@media (hover:hover){
  .knopf:hover{background:var(--stein);color:var(--weiss)}
  .knopf--text:hover{background:transparent;color:inherit}
}

/* ───────── Platzhalter der Vorschau ───────── */
.vorlage,.platz{border-bottom:1px dotted var(--stein);cursor:help}
.platz{color:var(--stein-text)}
.ohne-marken .vorlage{border-bottom:0;cursor:auto}
.ohne-marken [data-nur-vorlage]{display:none!important}
.vorschau{position:fixed;left:12px;bottom:12px;z-index:60;display:flex;align-items:center;background:var(--weiss);color:var(--blau);border:1px solid var(--stein);font:400 13px/18px var(--sans);letter-spacing:.02em}
.vorschau.weicht,.menue-offen .vorschau{visibility:hidden}
.vorschau-text{padding:0 4px 0 14px}
.vorschau button{min-height:44px;min-width:44px;padding:0 12px;font-size:13px;line-height:18px}
.vorschau-schalter{text-decoration:underline;text-decoration-color:var(--stein);text-underline-offset:4px}
.vorschau-zu svg{margin:auto}
/* am Handy klein unten links: zweizeilig und schmal, damit sie weder den Pfeil in der Mitte noch den Pausenknopf rechts berührt */
@media (max-width:767px){.vorschau{left:8px;bottom:8px}.vorschau-text{display:none}.vorschau .vorschau-schalter{width:min-content;padding:0 2px 0 10px;font-size:12px;line-height:14px;text-align:left}}

/* ───────── Kopfzeile (Regel 17) ───────── */
/* Innenrand 12 px; unten 16, damit die Mitte der Bedienelemente wie bei K1 auf 38 px liegt (Knöpfe y = 14, Höhe 48) */
.kopf{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--kopf);padding:12px 12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;color:var(--weiss);background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.105) 54.69%,rgba(0,0,0,0))}
.kopf.fest,.kopf.offen,html:not(.js) .kopf{background:var(--weiss);color:var(--blau)}
.kopf-links{display:flex;align-items:center;gap:24px}
.kopf-rechts{display:flex;align-items:center;justify-content:flex-end;gap:32px;padding-right:16px}
.striche{position:relative;width:72px;height:48px;flex:none}
.striche i{position:absolute;left:16px;width:40px;height:4px;background:currentColor}
.striche i:first-child{top:16px}
.striche i:last-child{top:28px}
.kopf.fest .striche,.kopf.offen .striche,html:not(.js) .striche{color:var(--dunkel)}
.kopf.offen .striche i:first-child{top:22px;transform:rotate(45deg)}
.kopf.offen .striche i:last-child{top:22px;transform:rotate(-45deg)}
/* Logo: quadratische Zeichnung mit Rand (Zeichnung = 84 % der Höhe). 72 px Bild = rund 60 px sichtbare Höhe, am Handy
   62 px = rund 52 px (K1: 52 px; Abweichung nach Toms Auftrag, damit der Adler zu erkennen ist). Die Kopfzeile bleibt 80 px. */
.kopf-logo{display:block;height:72px;margin:-10px 0}
.kopf-logo img{height:72px;width:auto}
@media (max-width:1023px){.kopf-logo{height:62px;margin:-5px 0}.kopf-logo img{height:62px}}
.logo-b{display:none}
.kopf.fest .logo-w,.kopf.offen .logo-w,html:not(.js) .logo-w{display:none}
.kopf.fest .logo-b,.kopf.offen .logo-b,html:not(.js) .logo-b{display:block}
.kopf .knopf{padding:12px;color:inherit}
.kopf.fest .knopf--rahmen,.kopf.offen .knopf--rahmen,html:not(.js) .knopf--rahmen{background:var(--stein);color:var(--weiss)}
@media (hover:hover){.kopf.fest .knopf--rahmen:hover,.kopf.offen .knopf--rahmen:hover{opacity:.8}}
.kurz{display:none}
/* Ohne Skript (auch nach der Notfall-Uhr): Menüknopf und Pausenknöpfe täten nichts – sie fallen weg. */
html:not(.js) .striche,html:not(.js) .pause{display:none}
/* Sprachwahl im Kopf: Klappliste wie K1 (weiß, 1 px Stein, aktiver Eintrag in Stein) */
.sprache{position:relative}
.sprache summary{display:flex;align-items:center;gap:8px;height:50px;padding:0 16px;font:400 18px/30px var(--sans);letter-spacing:.02em;cursor:pointer;list-style:none}
.sprache summary::-webkit-details-marker{display:none}
.sprache[open] summary svg{transform:rotate(180deg)}
.sprache ul{position:absolute;left:0;top:50px;min-width:84px;background:var(--weiss);border:1px solid var(--stein);color:var(--blau)}
.sprache li a,.sprache li span{display:block;padding:9px 20px;font:400 18px/30px var(--sans);letter-spacing:.02em}
.sprache li [aria-current]{color:var(--stein);font-weight:600}
@media (max-width:1023px){
  .kopf .sprache,.kopf .knopf--text{display:none}
  /* ohne Skript lässt sich das Menü nicht öffnen: die Klappliste (natives details) bleibt als einziger Weg zur anderen Sprache */
  html:not(.js) .kopf .sprache{display:block}
  .kopf-rechts{padding-right:0}
  .lang{display:none}.kurz{display:inline}
  .kopf .knopf{padding:12px 16px}
  /* am Handy bleibt der Knopf auch auf Weiß ein Rahmenknopf (stm-m390-02.png) */
  .kopf.fest .knopf--rahmen,.kopf.offen .knopf--rahmen,html:not(.js) .knopf--rahmen{background:transparent;color:inherit}
}

/* Menü: weiße Vollfläche unter der Kopfzeile (DNA 5.1) */
.menue{position:fixed;left:0;right:0;top:var(--kopf);bottom:0;z-index:49;background:var(--weiss);color:var(--blau);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:14px var(--rand) 24px;--raster:60px}
.menue-oben{display:grid;gap:40px}
.menue-haupt a{display:block;padding:calc((var(--raster) - 43.5px)/2) 0;font:500 40px/43.5px var(--serif);letter-spacing:.015em;font-variant-numeric:lining-nums}
.menue-seite .versal{color:var(--stein-text);font-size:16px;line-height:24px;margin-bottom:16px}
.menue-seite p{font-size:18px;line-height:26px}
/* Sprachwechsel: am Handy die erste Zeile des offenen Menüs (die Vorlage zeigt „DE“ oben), damit er in jedem Fenster ohne
   Scrollen zu sehen ist – unter den sieben Hauptpunkten lag er mit Browserleisten unter dem Falz */
.menue-sprache{display:flex;gap:8px;margin:-4px 0 -12px -12px}
.menue-sprache a,.menue-sprache span{display:inline-block;padding:9px 12px;font-size:18px;line-height:26px}
.menue-sprache [aria-current]{color:var(--stein);font-weight:600}
.menue-unten{margin-top:auto;padding-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;color:var(--grau)}
.menue-recht{display:flex;flex-wrap:wrap;gap:0 36px}
.menue-recht a{display:inline-block;padding:9px 0;font-size:18px;line-height:26px}
.menue-zeichen{display:flex;gap:8px;color:var(--stein)}
.menue-zeichen a{display:grid;place-items:center;width:44px;height:44px}
/* Handy: die Blöcke rücken enger (24 statt 40 px), damit auch im russischen Menü – dort brauchen die zwei Rechts-Links die ganze
   Zeile, die Zeichen stehen darunter – bei 844 px Höhe alles über dem unteren Rand bleibt. Das Raster der Hauptpunkte (60 px) bleibt. */
@media (max-width:1023px){
  .menue-oben{gap:24px}
  .menue-seite .versal{margin-bottom:12px}
  .menue-unten{padding-top:20px;row-gap:0}
}
@media (min-width:1024px){
  .menue{padding:74px var(--rand) 40px;--raster:clamp(50px,7.9vh,71px)}
  /* Seitenspalte 19,5 % (K1: x = 1071 bei 1440), aber nie schmaler als ihre längste Zeile, und einzeilig: bei 1024 und 1366 px
     war sie 200–210 px breit und die Hausnummer stand allein in der zweiten Zeile */
  .menue-oben{grid-template-columns:minmax(0,1fr) minmax(max-content,19.5%);gap:64px}
  .menue-seite{padding-top:13px}
  .menue-seite p{white-space:nowrap}
  .menue-sprache{display:none}
  .menue-recht{padding-left:8px}
}
@media (min-width:1920px){.menue-haupt a{font-size:56px;line-height:55.7px;--raster:clamp(60px,8vh,84px)}}
@media (hover:hover){.menue-recht a:hover,.menue-zeichen a:hover{color:var(--blau)}}

/* ───────── Erster Blick (Regeln 1–3) ───────── */
.film{position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden;color:var(--weiss);background:var(--dunkel);
  /* Breite des Titel-Schriftzugs (T1: 440 px am Desktop, 180 px am Handy). Dritte Grenze: das mittlere Fenster des
     Dreier-Films (ein Drittel der Filmbreite = max(100vw, 177,78vh)/3) minus 2 × 32 px – bei 1280 px Breite 363 px,
     bei 1366 px 391 px, ab 1440 px unverändert 440 px; vorher ragte der Schriftzug dort über die Nähte. */
  --w:min(clamp(180px,46vw,440px),72vh,calc(max(100vw,177.78vh)/3 - 64px))}
.film-bild,.film-dunkel{position:absolute;left:0;top:0;width:100%;height:100%}
.film-bild img,.film-bild video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center}
.film-bild video{opacity:0;transition:opacity .6s var(--weich)}
.film-bild video.laeuft{opacity:1}
/* Abdunklung: 30 % #191919 (DNA); je Bildplatz darf der Generator --ab höher setzen, wenn die Schrift sonst nicht lesbar ist
   (gemessen von werkzeug/kontrast.py, Werte in inhalt/abdunklung.json) */
.film-dunkel{background:var(--dunkel);opacity:var(--ab,.3)}
.film-inhalt{position:absolute;left:0;right:0;top:48%;transform:translateY(-50%);padding:0 var(--rand);text-align:center}
/* Titelmitte 48 % (Regel 3) in jedem Fenster. Der Querfilm zeigt im mittleren Fenster das Taufpaar; seit der Nacharbeit
   (09.10.2026, werkzeug/film.py see()) liegt seine Wasserlinie bei rund 32 % der Filmhöhe statt bei 38,9 % – der Titel muss
   dem Paar nicht mehr nach unten ausweichen (vorher bis 53 %). */
/* Titel-Schriftzug im Aufbau von „SEIZE / THE / MOMENT“ (T1, 440×220 bei 1440 und 1920, 180×80 am Handy):
   Versalien, große hängende Anfangsversalie, kleine Mittelzeile, eng gestapelt. --sz-em setzt der Generator
   (Breite der längsten Zeile in em, aus den Schriftdateien gerechnet), so trifft jede Sprache dieselbe Breite. */
.schriftzug{margin:0 auto;width:max-content;max-width:100%;font-family:var(--serif);font-weight:500;font-size:calc(var(--w)/var(--sz-em,4.6));line-height:1;letter-spacing:.01em;text-transform:uppercase;font-variant-numeric:lining-nums;white-space:nowrap}
.sz-z{display:block;line-height:.74}
.sz-i{font-size:1.3em;line-height:0;vertical-align:-.144em}
.sz-m{font-size:.56em;line-height:.84}
.sz-zwei .sz-z+.sz-z{margin-top:.2em}
/* Ausgleich einzelner Versal-Paare, für die die Schrift kein Kerning mitbringt (kyrillisch К–А, А–Л …): der Generator
   setzt --k je Zeichen (werkzeug/bauen.py, SCHRIFTZUG_AUSGLEICH) und rechnet die Breite mit */
.sz-k{letter-spacing:calc(.01em + var(--k,0em))}
.film-zeile{position:absolute;left:var(--rand);right:var(--rand);top:100%;margin-top:16px;font:400 18px/24px var(--sans);letter-spacing:.025em}
.film-pfeil{position:absolute;left:50%;bottom:0;width:76px;height:76px;margin-left:-38px;display:grid;place-items:center;animation:wippen 1.5s infinite}
@keyframes wippen{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
/* Pausenknopf: Kreis 1 px Weiß 30 % wie die Kreise bei K1/K2 */
.pause{position:absolute;right:12px;bottom:16px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:var(--weiss);display:grid;place-items:center}
.pause .z-start{display:none}
.pause[aria-pressed="true"] .z-start{display:block}
.pause[aria-pressed="true"] .z-halt{display:none}
@media (hover:hover){.pause:hover{border-color:var(--weiss)}}
@media (min-width:1024px){
  .film-zeile{font-size:22px;line-height:32px;margin-top:18px}
  .film-pfeil{bottom:20px}
  .pause{right:28px;bottom:36px}
}

/* Sprachwahl-Seite: aus denselben Bausteinen (Film, Logo groß, eine Zeile in der Titelschrift mit beiden Namen, zwei Zeilen
   Jost, zwei Rahmenknöpfe 56 px). Der dreizeilige Schriftzug steht hier nicht: er würde eine Sprache bevorzugen. */
.wahl{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--weiss);background:var(--dunkel)}
/* Sprachwahl ist die Schwelle, nicht der erste Blick: der Film liegt weich und dunkler dahinter, damit Logo und Namen
   nicht auf dem Taufpaar stehen. Der klare Film kommt nach der Wahl. (Hauptsitzung, 09.10.2026) */
.wahl .film-bild{filter:blur(14px);transform:scale(1.08)}
.wahl .film-dunkel{opacity:.5}
.wahl-inhalt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px var(--rand)}
.wahl-logo{width:clamp(150px,31vh,240px);height:auto}
.wahl-name{margin-top:clamp(8px,2vh,20px);font-size:38px;line-height:42px}
.wahl-name>span[lang]{white-space:nowrap}
@media (max-width:767px){.wahl-name>span[lang]{display:block}.wahl-punkt{display:none}}      /* am Handy zweizeilig: je Name eine Zeile */
.wahl-zeile{margin-top:clamp(12px,2.4vh,24px);font:400 18px/26px var(--sans);letter-spacing:.025em}
.wahl-zeile>span{display:block}
.wahl-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:clamp(24px,5vh,48px)}
.wahl-knoepfe .knopf{min-width:148px}
/* unter 360 px passen zwei Knöpfe mit 148 px nicht nebeneinander und stapelten sich (Deutsch über Русский – genau die
   Bevorzugung, die diese Seite vermeiden soll): dort teilen sie sich die Zeile. In sehr niedrigen Fenstern ist das Logo kleiner,
   damit beide Knöpfe ohne Scrollen zu sehen sind. */
@media (max-width:359px){.wahl-knoepfe{flex-wrap:nowrap;gap:12px;width:100%}.wahl-knoepfe .knopf{min-width:0;flex:1 1 0;padding:16px 8px}}
@media (max-height:520px){.wahl-logo{width:110px}}
@media (min-width:1024px){.wahl-zeile{font-size:22px;line-height:32px}.wahl-knoepfe{gap:24px}.wahl-knoepfe .knopf{min-width:200px}}
/* 44 px erst ab 1920: bei 1440 ist das mittlere Fenster des Films 533 px breit, die Zeile misst mit 38 px 522 px und bleibt darin */
@media (min-width:1920px){.wahl-name{font-size:44px;line-height:48px}}

/* ───────── Aufbau der Scroll-Fahrt (Regeln 11–16) ───────── */
.sektion{margin-top:var(--luft)}
.innen{padding-left:var(--rand);padding-right:var(--rand)}
.elfenbein{background:var(--elfenbein);margin-top:0;padding-top:48px;padding-bottom:24px}
.film+.elfenbein{margin-top:0}
.sektion+.elfenbein{margin-top:var(--luft)}
@media (min-width:1024px){.elfenbein{padding-top:80px;padding-bottom:64px}}
.einleitung{text-align:center;padding-left:var(--rand);padding-right:var(--rand)}
.einleitung p{max-width:720px;margin:12px auto 0;text-wrap:balance}         /* Abweichung (Regel 7): Vorbild 1408 px breit; mittige Zeilen ausgeglichen (kein einzelnes Wort in der letzten Zeile) */
.mitte{text-align:center}
/* Bibelvers: typografischer Block ohne Bild auf Elfenbein – der Einleitungs-Baustein (K1 Nr. 2). Vers als Titel, höchstens
   900 px breit, darunter die Stelle in Jost. Innenabstand 80/64 px wie jede farbige Sektion (Regel 11), am Handy 48/40. */
.wort{padding-bottom:40px}
.wort h2{max-width:900px;margin-left:auto;margin-right:auto}
@media (min-width:1024px){.wort{padding-bottom:64px}}
/* Einblenden nur für Titel-Text-Blöcke (Regel 15); ohne Skript sichtbar */
.js [data-ein]{opacity:0;transform:translateY(32px);transition:opacity .7s var(--weich),transform .7s var(--weich)}
.js [data-ein].da{opacity:1;transform:none}

/* Bild-Akkordeon (K1 Nr. 2, C2) */
.akk{display:flex;flex-direction:column;margin:48px var(--akk-rand) 0}
.akk-karte{position:relative;display:block;height:375px;overflow:hidden;background:rgba(0,0,0,.24);color:var(--weiss)}
.akk-karte picture,.akk-karte img,.akk-karte .bild-fehlt{position:absolute;left:0;top:0;width:100%;height:100%}
.akk-karte img{object-fit:cover}
.akk-karte::after,.dunkel::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--dunkel);opacity:var(--ab,.3)}
.akk-text{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 20px;text-align:center}
/* Fokus auf einer Bildkarte: der Umriss läge unter dem Bild (0 sichtbare Pixel) – deshalb ein Rahmen über dem Bild, 4 px
   eingerückt, 2 px Weiß; gilt in jeder Breite, auch im Stapel am Handy */
.akk-karte:focus-visible,.karte:focus-visible{outline:0}
.akk-karte:focus-visible::before,.karte:focus-visible .karte-bild::before{content:"";position:absolute;z-index:2;left:4px;top:4px;right:4px;bottom:4px;border:2px solid var(--weiss);pointer-events:none}
.akk-text p{margin-top:12px;font-size:17px;line-height:23px;letter-spacing:.025em;text-wrap:balance}
@media (min-width:1024px){
  .akk{flex-direction:row;height:70vh;min-height:420px;margin-top:64px}
  .akk-karte{height:100%;width:33.3334%;flex:none;transition:width 1.5s ease}
  .akk-karte picture,.akk-karte .bild-fehlt{left:-15%;width:130%}
  /* der Text hält die Ruhebreite der Karte: beim Aufziehen bricht nichts um (im Vorbild wird er ebenso beschnitten) */
  .akk-text{left:50%;right:auto;width:calc((100vw - 2*var(--akk-rand))/3);margin-left:calc((100vw - 2*var(--akk-rand))/-6);padding:0 12px}   /* 12 statt 20: „Unter der Woche“ bleibt bei 1024 px einzeilig */
}
@media (min-width:1024px) and (hover:hover){
  .akk:hover .akk-karte{width:21.4%}
  .akk .akk-karte:hover{width:57.2%}
}
@media (min-width:1024px){
  .akk:focus-within .akk-karte{width:21.4%}
  .akk .akk-karte:focus-visible{width:57.2%}
}

/* Text-Bild-Paar (Regel 13) */
.paar{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.paar-bild{position:relative;overflow:hidden;background:var(--elfenbein)}
.paar-bild picture,.paar-bild img,.paar-bild video,.paar-bild .bild-fehlt{position:absolute;left:0;top:0;width:100%;height:100%}
.paar-bild img,.paar-bild video{object-fit:cover}
.paar-bild video{opacity:0;transition:opacity .6s var(--weich)}
.paar-bild video.laeuft{opacity:1}
.paar--hoch .paar-bild{aspect-ratio:3/4}
.paar--quer .paar-bild{aspect-ratio:576/412}
.paar-text p{margin-top:32px}
.paar-text .knopf{margin-top:40px}
.paar--quer .paar-text .knopf{margin-top:32px}
.paar-text .pflicht{margin-top:16px}
/* neutrale Anlaufstelle für akute Not: kleine Zeile unter dem Pflichtsatz, Nummern als tel:-Links */
.paar-text .notfall{margin-top:12px;font-size:15px;line-height:22px}
.notfall a{text-decoration:underline;text-decoration-color:var(--stein);text-underline-offset:4px}
/* Tippziele 44 px hoch, ohne dass sich der Zeilenfall ändert (Innenabstand und Gegenrand heben sich auf) */
.notfall a{display:inline-block;padding:22px 11px 0;margin:-22px -11px 0}
/* Die erste Nummer wächst nach oben, jede weitere nach unten: stehen sie in zwei Zeilen untereinander (deutsch am Handy),
   überlappten sich sonst die zwei Tippflächen, und die untere Hälfte von „0800 111 0 111“ wählte die 112 (Gegenprobe 09.10.2026) */
.notfall a~a{padding:0 11px 22px;margin:0 -11px -22px}
.spalten a{display:inline-block;padding:11px 6px;margin:-11px -6px}
@media (min-width:1024px){.paar-text .notfall{font-size:16px;line-height:24px}}
.fakten{margin-top:24px}
.fakten li+li{margin-top:8px}
@media (max-width:1023px){.paar-bild{order:-1}.paar--hoch .paar-bild{max-width:560px;width:100%;margin:0 auto}}
@media (min-width:1024px){
  .paar--hoch{grid-template-columns:minmax(0,528fr) minmax(0,560fr);gap:64px}
  .paar--hoch.paar--spiegel{grid-template-columns:minmax(0,560fr) minmax(0,528fr)}
  .paar--quer{grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:10%}
}
/* Das Vorbild hält das Bild am Desktop fest auf 560 × 745 (Klasse lg:w-[560px] lg:min-w-[560px]; gemessen bei 1440 und 1920)
   und den Absatz auf 538 px (quellen/kempinski/messung/start-umriss-d1920.json). Gilt ab 1440 px, nicht erst ab 1920
   (Gegenprobe 09.10.2026): dazwischen wuchs das Bild sonst bis 807 × 1075 bei 1919 px – höher als das Fenster, Zeilen bis
   86 Zeichen – und sprang bei 1920 auf 560 zurück. Bei 1440 px ergibt die Regel dieselben Maße wie die darüber (528 / 64 / 560). */
@media (min-width:1440px){
  .paar--hoch{grid-template-columns:minmax(0,618px) 560px;justify-content:space-between}
  .paar--hoch.paar--spiegel{grid-template-columns:560px minmax(0,618px)}
  .paar--hoch .paar-text p,.paar--hoch .fakten{max-width:538px}
}
.stationen{margin-top:32px}
.stationen li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.stationen li+li{margin-top:24px}
.jahr{font:500 28px/30px var(--serif);letter-spacing:.01em;font-variant-numeric:lining-nums}
@media (min-width:600px){.stationen li{grid-template-columns:7.5rem minmax(0,1fr);gap:16px;align-items:baseline}}

/* Karten-Schieber (K2): nativ waagrecht, beginnt am Inhaltsrand, läuft rechts aus dem Bild */
.schieber{display:flex;gap:16px;margin-top:40px;padding:0 var(--rand);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 var(--rand);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.schieber::-webkit-scrollbar{display:none}
.schieber.zieht{scroll-snap-type:none;cursor:grabbing;user-select:none}
/* Karte 311 × 416 (K2 am Handy). Unter 390 px Breite wird sie mit dem Fenster schmaler, damit rechts immer rund 43 px der
   nächsten Karte hereinlugen (bei 360 px waren es 13 px, bei 320 px war die Karte breiter als das Fenster); Form bleibt 311:416 */
.karte{position:relative;flex:0 0 min(311px,calc(100vw - var(--rand) - 59px));min-width:0;scroll-snap-align:start}
.karte-bild{position:relative;aspect-ratio:311/416;overflow:hidden;background:var(--elfenbein);color:var(--weiss)}
.karte-bild picture,.karte-bild img,.karte-bild .bild-fehlt{position:absolute;left:0;top:0;width:100%;height:100%}
.karte-bild img{object-fit:cover;-webkit-user-drag:none;user-select:none}
.karte-kopf{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 24px;text-align:center}
.karte-kopf .versal{margin-top:12px}
.karte-text{margin-top:16px;font-size:16px;line-height:24px}
.karte-kopf .karte-text{display:none;margin-top:20px;font-size:17px;line-height:23px;letter-spacing:.025em}
.linie{position:relative;height:1px;margin:23px 32px 0 var(--rand);background:var(--linie)}
.linie i{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--stein);transform-origin:0 50%;transform:scaleX(.36)}
@media (min-width:768px){.karte{flex-basis:382px}.karte-bild{aspect-ratio:auto;height:510px}}
@media (min-width:1024px){.schieber{margin-top:60px}}
@media (min-width:1920px){.schieber{gap:30px}.karte{flex-basis:454px}.karte-bild{height:604px}}
/* Mit Maus: Text erscheint auf der Karte (Abdunklung 30 → 72 %, ohne Übergang wie C3). Ohne Maus: Text steht immer unter dem Bild. */
@media (hover:hover) and (min-width:768px){
  .schieber{cursor:grab}
  /* die Kopie unter dem Bild bleibt für Vorleser da (die sichtbare auf dem Bild trägt aria-hidden) – versteckt wie .vh */
  .karte>.karte-text{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .karte:hover .dunkel::after,.karte:focus .dunkel::after,.karte:focus-within .dunkel::after{opacity:.72}
  .karte:hover .karte-kopf .karte-text,.karte:focus .karte-kopf .karte-text,.karte:focus-within .karte-kopf .karte-text{display:block}
}

/* Bild-Band (Regel 16): 90 vh, wächst von eingerückt (80/48 px) auf randlos */
.band{position:relative;height:90vh;min-height:480px;--e:0}
.js .band{--e:1}
.band-flaeche{position:absolute;left:calc(80px*var(--e)*var(--an));right:calc(80px*var(--e)*var(--an));top:calc(48px*var(--e)*var(--an));bottom:calc(48px*var(--e)*var(--an));overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--dunkel);color:var(--weiss);text-align:center;transition:left .5s var(--weich),right .5s var(--weich),top .5s var(--weich),bottom .5s var(--weich)}
.band-flaeche picture,.band-flaeche img,.band-flaeche .bild-fehlt{position:absolute;left:0;top:0;width:100%;height:100%}
.band-flaeche img{object-fit:cover}
/* Handy im Hochformat (bis 599 px Breite): der Generator liefert dort die Hochkant-Fassung des Bildes; ihr Fokus steht in --fh.
   Vorher galt sie nur bis zum Seitenverhältnis 2:3 – ein iPhone SE mit Browserleisten (375 × 553) bekam den Quer-Ausschnitt,
   und das Bild wechselte, sobald die Leisten ausblendeten. Tabletts bleiben beim Quer-Ausschnitt. */
@media (orientation:portrait) and (max-width:599px){.band-flaeche img{object-position:var(--fh,50% 50%)!important}.band-flaeche.dunkel::after{opacity:var(--abh,var(--ab,.3))}}
.bild-text{position:relative;z-index:1;padding:0 var(--rand);max-width:100%}
.band .bild-text p{max-width:520px;margin:16px auto 0;font-size:16px;line-height:22px;letter-spacing:.025em;text-wrap:balance}   /* kein einzelnes Wort in der letzten Zeile */
.band .bild-text .knopf{margin-top:32px}
@media (min-width:1024px){.band .bild-text p{font-size:17px;line-height:24px}.band .bild-text{padding:0 144px}}
@media (min-width:1920px){.band .bild-text p{font-size:19px;line-height:26px}}

/* Kachelraster (K1 Nr. 4): 3 Spalten, Lücke 24/40, Kachel 368×360. Abweichung am Handy: zweispaltig (9 Kacheln einspaltig = 3300 px) */
.raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.kachel{position:relative;aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--elfenbein);color:var(--weiss);text-align:center}
.kachel picture,.kachel img,.kachel .bild-fehlt{position:absolute;left:0;top:0;width:100%;height:100%}
.kachel img{object-fit:cover}
.kachel-text{position:relative;z-index:1;padding:0 8px;min-width:0;max-width:100%}
/* Unterzeile am Handy 12,5–14 px (vorher 11,2–13 px, die einzige Schrift unter 14 px); lange Zeilen dürfen zweizeilig laufen */
.kachel-text .versal{margin-top:8px;font-size:clamp(12.5px,3.9vw,14px);line-height:18px;text-wrap:balance}
.raster-knopf{margin-top:48px;text-align:center}
@media (min-width:768px){
  .raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .kachel{aspect-ratio:368/360}
  .kachel-text{padding:0 24px}
  .kachel-text .versal{margin-top:12px;font-size:16px;line-height:22px}
}
/* zweispaltig bleibt bei ungerader Zahl eine Kachel allein: sie nimmt dann die ganze Zeile (2:1), statt eine Lücke zu lassen */
@media (max-width:767px){.kachel:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2/1}}
@media (min-width:1024px){.raster{margin-top:80px}.raster-knopf{margin-top:64px}}
@media (min-width:1366px){.kachel{aspect-ratio:auto;height:360px}}
@media (min-width:1920px){.raster{gap:40px}}

/* Besuch: Einleitungsblock + drei Spalten */
.spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:48px;text-align:center}
.spalten p{margin-top:8px;text-wrap:balance}
.spalten h3+p{margin-top:16px}
.besuch-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:48px}
/* am Handy stehen die zwei Knöpfe übereinander: dann gleich breit (vorher 190 und 300 px) und bei 320 px einzeilig */
@media (max-width:599px){.besuch-knoepfe .knopf{width:100%;max-width:300px;padding:12px 16px}}
@media (min-width:1024px){.spalten{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;margin-top:64px}.besuch-knoepfe{gap:24px;margin-top:64px}}

/* ───────── Schrift auf Personenbildern: unten (bewusste Abweichung, Toms Entscheidung vom 08.10.2026) ─────────
   Kempinski setzt Titel und Zeile mittig auf Karten und Kacheln – auf Hotelbildern ohne Gesichter. Hier zeigen die Bilder
   Menschen: in Akkordeon-Karten, Schieber-Karten und Kacheln sitzt der Textblock im unteren Drittel, waagrecht weiter mittig,
   Abstand zum unteren Rand 28–36 px (Handy 20–24). Bild-Band und erster Blick bleiben mittig wie beim Vorbild.
   EIN Schalter: html[data-schrift="unten"] (Standard) gegen html[data-schrift="mitte"] (= die Regeln oben, wie Kempinski);
   gesetzt in werkzeug/bauen.py, Zeile SCHRIFT_AUF_BILDERN. */
[data-schrift="unten"] .akk-text{top:auto;bottom:24px;transform:none}
[data-schrift="unten"] .karte-kopf{top:auto;bottom:24px;transform:none;display:flex;flex-direction:column}
/* Schieber-Karte überfahren: der Text erscheint ÜBER dem Titelblock – Titel und Zeile bleiben stehen, nichts springt */
[data-schrift="unten"] .karte-kopf .karte-text{order:-1;margin:0 0 20px}
[data-schrift="unten"] .kachel{align-items:flex-end}
[data-schrift="unten"] .kachel-text{padding-bottom:20px}
@media (min-width:768px){
  [data-schrift="unten"] .karte-kopf{bottom:32px}
  [data-schrift="unten"] .kachel-text{padding-bottom:28px}
}
@media (min-width:1024px){[data-schrift="unten"] .akk-text{bottom:36px}}

/* Bild fehlt: Fläche „Dein Bild“ */
.bild-fehlt{display:grid;place-items:center;background:var(--elfenbein);color:var(--stein-text);border:1px dotted var(--stein);font:500 16px/22px var(--sans);letter-spacing:.07em;text-transform:uppercase}

/* ───────── Fußzeile (DNA 5.3) ───────── */
.fuss{position:relative;background:var(--blau);color:var(--weiss);padding:24px var(--rand) 24px}
.fuss-oben{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
/* Handy: Spalte 1 so breit wie ihr längster Punkt, Spalte 2 nimmt den Rest – „Predigten auf YouTube“ und „Hoffnung für alle e.V.“
   bleiben so ab 360 px einzeilig; darunter brechen sie ausgeglichen um (balance) statt mit einem einzelnen Wort */
.fuss-links{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;margin:0 -12px}
.fuss-links a{display:inline-block;padding:11px 12px;font-size:17px;line-height:22px;letter-spacing:.015em;text-wrap:balance}
.fuss-satz{font-size:16px;line-height:24px}
.fuss-zeile{display:block;margin-top:20px;padding:6px 0 14px;border-bottom:2px solid var(--weiss);font:500 26px/28px var(--serif);letter-spacing:.01em;font-variant-numeric:lining-nums}
.kreise{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.kreis{display:grid;place-items:center;width:50px;height:50px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:var(--stein)}
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:48px;padding-right:56px}
.fuss-recht{display:flex;flex-wrap:wrap;gap:0 28px;color:var(--grau)}
.fuss-recht a{display:inline-block;padding:13px 0;font-size:16px;line-height:18px}
.fuss-c{font-size:16px;line-height:21px;letter-spacing:.025em;text-wrap:balance}
.nach-oben{position:absolute;right:8px;bottom:22px;display:grid;place-items:center;width:48px;height:48px;color:var(--stein)}
@media (hover:hover){
  .kreis:hover{border-color:var(--weiss)}
  .fuss-recht a:hover{color:var(--weiss)}
  .fuss-links a:hover{text-decoration:underline;text-decoration-color:var(--stein);text-decoration-thickness:1px;text-underline-offset:6px}
}
@media (min-width:1024px){
  /* unten 23 statt 32 px: die Schlusszeile ist als Tippziel 44 px hoch (K1: 26 px), die Schrift steht so auf derselben Höhe */
  .fuss{padding:48px var(--rand) 23px}
  .fuss-oben{grid-template-columns:minmax(0,586fr) minmax(0,566fr);gap:0;min-height:219px}
  .fuss-rechts{order:2}
  /* Spalte 1 wie K1 201 px; Spalte 2 darf breiter laufen, damit lange russische Punkte nicht umbrechen */
  .fuss-links{grid-template-columns:201px minmax(0,1fr);gap:0;align-content:start;margin:-11px 0 0}
  .fuss-satz{font-size:18px;line-height:28px;max-width:440px}
  .fuss-zeile{margin-top:26px;padding:10px 0 13px;font-size:32px;line-height:36px}
  .fuss-unten{margin-top:80px;padding-right:0}
  .fuss-recht a{padding:9px 0;font-size:18px;line-height:26px}
  .fuss-c{margin-left:auto;margin-right:auto;font-size:18px;letter-spacing:.03em}
  .nach-oben{right:40px;bottom:24px}
}
@media (max-width:1023px){.fuss-rechts{order:-1}}
@media (min-width:1920px){.fuss{padding:80px var(--rand) 27px}.fuss-c{font-size:20px;letter-spacing:.04em}}

/* ───────── Rechtsseiten ───────── */
.recht{max-width:calc(760px + 2*var(--rand));margin:0 auto;padding:calc(var(--kopf) + 64px) var(--rand) var(--luft)}
.recht h1{font:500 38px/42px var(--serif);letter-spacing:.01em}
.recht h2{margin-top:40px;font:500 28px/30px var(--serif);letter-spacing:.01em;font-variant-numeric:lining-nums}
.recht h3{margin-top:28px;font:500 18px/26px var(--sans)}
.recht p,.recht ul,.recht ol{margin-top:16px}
.recht ul{list-style:disc;padding-left:1.2em}
.recht ol{list-style:decimal;padding-left:1.4em}
.recht li+li{margin-top:8px}
.recht a{text-decoration:underline;text-decoration-color:var(--stein);text-underline-offset:4px}
.recht .kasten{margin-bottom:40px;padding:8px 24px 24px;background:var(--elfenbein);border:1px dotted var(--stein);font-size:16px;line-height:24px}
.recht .massgeblich{margin:16px 0 0;color:var(--stein-text)}
.recht .zurueck{margin-top:48px}
.recht .zurueck a{text-decoration:none}
@media (min-width:1024px){.recht h1{font-size:60px;line-height:60px;font-weight:400;letter-spacing:-.03em}.recht{padding-top:calc(var(--kopf) + 80px)}}
.recht-teil{background:var(--blau);color:var(--weiss);padding:0 var(--rand)}
.recht-teil summary{display:flex;align-items:center;min-height:48px;cursor:pointer;color:var(--grau)}
.recht-teil[open]{background:var(--weiss);color:var(--blau);padding-bottom:64px}
.recht-teil .recht{padding:24px 0 0}

/* ───────── Ruhe und Druck ───────── */
@media (prefers-reduced-motion:reduce){
  .film-pfeil{animation:none}
  .js [data-ein]{opacity:1;transform:none;transition:none}
  .akk-karte,.band-flaeche,.film-bild video,.paar-bild video{transition:none}
  :root{--an:0}
}
@media print{
  .kopf,.vorschau,.pause,.film-pfeil,.nach-oben{display:none!important}
  .js [data-ein]{opacity:1!important;transform:none!important}
  .film{height:auto;min-height:0;padding:80px 0}
  .film-inhalt{position:static;transform:none}
  .film-zeile{position:static}
}