/* Ermeth Fundament, Marke «Klartext» (5. Oktober 2026, Entscheid brand/07-umsetzung/entscheid.md).
   Schriften, Markentokens, Aliase der bisherigen Tokens, Basis, Shell, Komponenten, Bewegung, Stopp-Block.
   Vertrag für alle Seiten: docs/design-system-2026-10-05-klartext.md. Quelle der Werte: brand/03-markenpaket/system/tokens.css,
   elemente.md, komponenten.css, typografie.md und motion/motion.md. Hero und Film: dist/hero.css (Film, Poster, Abtönung unverändert). */

/* ---------------------------------------------------------------- Schriften (OFL 1.1, Lizenz in /assets/fonts/<familie>/LICENSE.txt)
   Newsreader variabel mit den Achsen opsz 6–72 und wght 200–800: Titel setzen sich mit font-optical-sizing:auto in ihrer optischen Grösse.
   Schibsted Grotesk variabel mit wght 400–900. Kursive statisch, nur bei Bedarf geladen. Manrope nur noch für Demo-Miniaturen. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader/latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader/latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/newsreader/latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/newsreader/latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url('/assets/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}

/* ---------------------------------------------------------------- Markentokens (wörtlich aus brand/03-markenpaket/system/tokens.css) */
:root{
 /* Farben */
 --nacht:#0b1620;--nacht-2:#1a2a37;--linie-dunkel:#2f3f4c;--tinte:#13202b;--grau:#5a636c;--linie-kraeftig:#78818a;--nebel:#b7c1cb;--linie:#d6d3cd;--stein:#eceae6;--kreide:#f6f5f2;--papier:#ffffff;
 --holz:#d39a5f;--holz-kraeftig:#b8621f;
 --erfolg:#17704a;--erfolg-dunkel:#7fd6a2;--erfolg-flaeche:#e6f4ec;--warnung:#f2c230;--warnung-flaeche:#fdf3cc;--fehler:#a8173a;--fehler-dunkel:#ff8fa3;--fehler-flaeche:#fbe9ec;--muster:#2d4fae;--muster-dunkel:#a9bcf7;--muster-flaeche:#eaeefb;
 /* Schriften */
 --serif:Newsreader, Georgia, 'Times New Roman', serif;
 --sans:'Schibsted Grotesk', Arial, 'Helvetica Neue', sans-serif;
 /* Typo-Skala: fliessend zwischen Mobil (390) und Desktop (1440) */
 --fs-display:clamp(44px, 27.66px + 4.19vw, 88px); --lh-display:1.02; --ls-display:-0.028em; --fw-display:500; --ff-display:var(--serif);
 --fs-h1:clamp(36px, 28.57px + 1.9vw, 56px); --lh-h1:1.06; --ls-h1:-0.022em; --fw-h1:500; --ff-h1:var(--serif);
 --fs-h2:clamp(30px, 26.29px + 0.95vw, 40px); --lh-h2:1.12; --ls-h2:-0.018em; --fw-h2:500; --ff-h2:var(--serif);
 --fs-h3:clamp(20px, 19.26px + 0.19vw, 22px); --lh-h3:1.3; --ls-h3:-0.01em; --fw-h3:600; --ff-h3:var(--sans);
 --fs-zitat:clamp(24px, 21.77px + 0.57vw, 30px); --lh-zitat:1.3; --ls-zitat:-0.01em; --fw-zitat:400; --ff-zitat:var(--serif);
 --fs-lead:clamp(19px, 17.89px + 0.29vw, 22px); --lh-lead:1.5; --ls-lead:-0.005em; --fw-lead:400; --ff-lead:var(--sans);
 --fs-text:clamp(17px, 16.63px + 0.1vw, 18px); --lh-text:1.6; --ls-text:0em; --fw-text:400; --ff-text:var(--sans);
 --fs-text-klein:16px; --lh-text-klein:1.55; --ls-text-klein:0em; --fw-text-klein:400; --ff-text-klein:var(--sans);
 --fs-navigation:16px; --lh-navigation:1.25; --ls-navigation:0em; --fw-navigation:500; --ff-navigation:var(--sans);
 --fs-menue:22px; --lh-menue:1.3; --ls-menue:-0.005em; --fw-menue:500; --ff-menue:var(--sans);
 --fs-knopf:16px; --lh-knopf:1.25; --ls-knopf:0em; --fw-knopf:600; --ff-knopf:var(--sans);
 --fs-feld-label:16px; --lh-feld-label:1.4; --ls-feld-label:0em; --fw-feld-label:500; --ff-feld-label:var(--sans);
 --fs-feld-eingabe:17px; --lh-feld-eingabe:1.4; --ls-feld-eingabe:0em; --fw-feld-eingabe:400; --ff-feld-eingabe:var(--sans);
 --fs-tabelle:16px; --lh-tabelle:1.45; --ls-tabelle:0em; --fw-tabelle:400; --ff-tabelle:var(--sans);
 --fs-tabelle-kopf:15px; --lh-tabelle-kopf:1.4; --ls-tabelle-kopf:0.005em; --fw-tabelle-kopf:500; --ff-tabelle-kopf:var(--sans);
 --fs-status:15px; --lh-status:1.4; --ls-status:0em; --fw-status:500; --ff-status:var(--sans);
 --fs-meta:14px; --lh-meta:1.45; --ls-meta:0.005em; --fw-meta:400; --ff-meta:var(--sans);
 --fs-meta-min:13px; --lh-meta-min:1.4; --ls-meta-min:0.01em; --fw-meta-min:500; --ff-meta-min:var(--sans);
 /* Abstände (4er-Basis) */
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;
 /* Raster */
 --raster-rand:clamp(20px, 3.66px + 4.19vw, 64px); --raster-steg:clamp(16px, 13.03px + 0.76vw, 24px); --inhalt-max:1312px; --lesebreite:68ch;
 /* Radien und Linien */
 --radius-0:0px;--radius-feld:2px;--radius-geraet:14px;
 --linie-haar:1px;--linie-kontur:1.5px;--linie-betont:2px;--linie-fokus:2px;--linie-ablauf:2px;
 /* Bewegung (motion/motion.md) */
 --dauer-kurz:140ms;--dauer-mittel:240ms;--dauer-linie:480ms;--dauer-auftritt:640ms;--dauer-signatur:1600ms;--dauer-staffel:60ms;--dauer-inszenierung:720ms;
 --kurve-praezise:cubic-bezier(0.2, 0.7, 0, 1);--kurve-linie:cubic-bezier(0.65, 0, 0.35, 1);--kurve-austritt:cubic-bezier(0.4, 0, 1, 1);--kurve-linear:linear;
 --weg-kurz:8px;--weg-seite:24px;--staffel-max:6;

 /* Grundfarben je Grund (komponenten.css). Auf dunklem Grund überschreibt die Klasse .auf-dunkel (und Footer, .band-dark, Film) diese Rollen. */
 --text-1:var(--tinte);--text-2:var(--grau);--q-voll:var(--holz-kraeftig);--q-offen:var(--grau);--feldrand:var(--linie-kraeftig);--linie-ton:var(--linie);--fokus-ring:var(--tinte);--fokus-halo:var(--papier);--grund:var(--papier);

 /* Aliase der bisherigen Tokens (docs/design-system-2026-10-04.md): alle Seiten-CSS tragen damit sofort die neue Marke.
    Blau gibt es in der Marke nicht mehr: --blue zeigt auf Tinte (Text, Linien, Fokus), Formakzente nehmen --q-voll. */
 --ink:var(--tinte);--ink-2:var(--tinte);--muted:var(--grau);--muted-2:var(--grau);--line:var(--linie);--line-strong:var(--linie-kraeftig);
 --paper:var(--papier);--soft:var(--kreide);--night:var(--nacht);--night-2:var(--nacht-2);--night-text:var(--papier);--night-muted:var(--nebel);
 --blue:var(--tinte);--blue-dark:var(--nacht);--blue-soft:var(--stein);--ok:var(--erfolg);--warn:var(--tinte);--bad:var(--fehler);--focus:var(--tinte);
 --font:var(--sans);--font-display:var(--serif);
 --section:clamp(64px, 46px + 3.4vw, 96px);--section-tight:clamp(48px, 38px + 2.4vw, 72px);--row:clamp(24px, 20px + 1vw, 32px);--wrap:var(--inhalt-max);
 --radius-s:var(--radius-feld);--radius-l:var(--radius-geraet);
 --shadow-1:0 0 0 1px var(--linie);--shadow-2:0 0 0 1px var(--linie),0 30px 60px -36px rgba(11,22,32,.45);
 --ease:var(--kurve-praezise);--dur-fast:var(--dauer-mittel);--dur-slow:var(--dauer-auftritt);
 --header-h:80px;
}
@media (prefers-reduced-motion:reduce){:root{--dauer-kurz:0ms;--dauer-mittel:0ms;--dauer-linie:0ms;--dauer-auftritt:0ms;--dauer-signatur:0ms;--dauer-staffel:0ms;--dauer-inszenierung:0ms}}
html.motion-paused{--dauer-kurz:0ms;--dauer-mittel:0ms;--dauer-linie:0ms;--dauer-auftritt:0ms;--dauer-signatur:0ms;--dauer-staffel:0ms;--dauer-inszenierung:0ms}

/* Dunkler Grund: Nacht, Footer, dunkles Band, Film, Kopfzeile über dem Film, geöffnetes Menü. */
.auf-dunkel,.band-dark,.site-footer,.cinema-hero,.home-page .site-header:not(.scrolled),body.menu-open .site-header{--text-1:var(--papier);--text-2:var(--nebel);--q-voll:var(--holz);--q-offen:var(--nebel);--feldrand:var(--nebel);--linie-ton:var(--linie-dunkel);--fokus-ring:var(--papier);--fokus-halo:var(--nacht);--focus:var(--papier);--grund:var(--nacht)}

/* ---------------------------------------------------------------- Basis */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:var(--fw-text) var(--fs-text)/var(--lh-text) var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;font-synthesis:none}
body.menu-open{overflow:hidden}
img,video,svg{max-width:100%}
img,video{height:auto}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0 0 .5em;color:inherit;text-wrap:balance;hyphens:manual}
h1{font:var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:var(--ls-h1);font-optical-sizing:auto}
h2{font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:var(--ls-h2);font-optical-sizing:auto}
h3{font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3)}
h4{font:600 var(--fs-text)/1.4 var(--sans);letter-spacing:0}
h1 em,h2 em,h3 em{font-style:normal}
p,ul,ol,figure,dl,blockquote{margin:0 0 1em}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
strong,b{font-weight:600}
small{font-size:var(--fs-meta);line-height:var(--lh-meta)}
hr{border:0;border-top:1px solid var(--linie-ton);margin:0}
table{font-variant-numeric:tabular-nums}
/* Fokus: Ring plus Halo, auf Papier, Nacht und Film gleich sicher sichtbar; ohne Übergang. */
:focus-visible{outline:var(--linie-fokus) solid var(--fokus-ring);outline-offset:2px;box-shadow:0 0 0 2px var(--fokus-halo)}
::selection{background:var(--stein);color:var(--tinte)}
.skip-link{position:fixed;top:-120px;left:16px;z-index:100;padding:14px 18px;background:var(--papier);color:var(--tinte);font:600 16px/1 var(--sans);box-shadow:0 0 0 1.5px var(--tinte)}
.skip-link:focus{top:12px}
.sr-only,.nur-vorlesen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Startseite: R2-Variablen aus launch-home.css zeigen auf die Markentokens. */
body.clean-home{--r2-ink:var(--tinte);--r2-muted:var(--grau);--r2-line:var(--linie);--r2-accent:var(--tinte);--r2-accent-dark:var(--nacht);--r2-night:var(--nacht)}

/* ---------------------------------------------------------------- Typografie-Klassen */
.display{font:var(--fw-display) var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:var(--ls-display);font-optical-sizing:auto;text-wrap:balance}
.h1{font:var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:var(--ls-h1)}
.h2{font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:var(--ls-h2)}
.h3{font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3)}
.lead{font:var(--fw-lead) var(--fs-lead)/var(--lh-lead) var(--sans);letter-spacing:var(--ls-lead);color:var(--text-1);max-width:34em}
.kicker{margin:0 0 var(--space-4);font:500 var(--fs-text-klein)/1.45 var(--sans);color:var(--text-2)}
.meta{font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2)}
.text-small{font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans)}
.zitat,blockquote.zitat p{font:italic var(--fw-zitat) var(--fs-zitat)/var(--lh-zitat) var(--serif);letter-spacing:var(--ls-zitat)}
.zahl,.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.prose{max-width:var(--lesebreite)}
.prose p,.prose li{color:var(--text-1)}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.6em}
.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor;background:linear-gradient(var(--q-voll),var(--q-voll)) left bottom/0% 2px no-repeat;background-clip:content-box;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
.prose a:hover{background-size:100% 2px;text-decoration-color:transparent}

/* ---------------------------------------------------------------- Raster und Abschnitte */
.wrap{width:calc(100% - 2 * var(--raster-rand));max-width:var(--inhalt-max);margin:0 auto}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg)}
.section{padding:var(--section) 0}
.section.is-tight{padding:var(--section-tight) 0}
.section.is-soft{background:var(--kreide)}
.section.is-stone{background:var(--stein)}
/* Abschnittskopf: Titel über Spalten 1 bis 5, Einleitung ab Spalte 7, oben bündig (elemente.md §5). */
.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-4);align-items:start;margin-bottom:var(--space-7)}
.section-head>:first-child{grid-column:1/span 5}
.section-head>.lead,.section-head>:nth-child(2){grid-column:7/-1;margin:0;padding-top:.3em;max-width:36em}
.section-head h2{margin:0}
.section-head .kicker{margin-bottom:var(--space-3)}

/* ---------------------------------------------------------------- Seitenkopf: Zeilen steigen einmal beim Laden aus der Grundlinie (CSS, ohne Skript) */
.page-head{padding:clamp(48px, 30px + 4.6vw, 96px) 0 clamp(32px, 22px + 2.6vw, 64px)}
.page-head h1{margin:0 0 var(--space-5);max-width:16em}
.page-head .lead{margin:0}
.page-head .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.page-head .line>span{display:block}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-6)}
html.js .page-head .kicker{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 40ms both}
html.js .page-head .line>span{animation:ph-steigen var(--dauer-auftritt) var(--kurve-praezise) 100ms both}
html.js .page-head .line:nth-child(2)>span{animation-delay:160ms}
html.js .page-head .line:nth-child(3)>span{animation-delay:220ms}
html.js .page-head .line:nth-child(n+4)>span{animation-delay:280ms}
html.js .page-head .lead{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 340ms both}
html.js .page-actions{animation:ph-auf var(--dauer-auftritt) var(--kurve-praezise) 420ms both}
@keyframes ph-steigen{from{transform:translateY(108%)}to{transform:none}}
@keyframes ph-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- Kopfzeile: Papier mit Haarlinie ab .scrolled; über dem Film transparent (hero.css) */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--papier);color:var(--tinte);border-bottom:1px solid transparent;transition:background-color var(--dauer-mittel) linear,color var(--dauer-mittel) linear,border-color var(--dauer-mittel) linear}
.site-header.scrolled{border-bottom-color:var(--linie)}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);height:100%}
.logo{display:inline-flex;align-items:center;flex:none;min-height:44px;color:inherit}
.logo .logo-mark{display:block;width:156px;height:auto;overflow:visible}
.logo .logo-q{fill:var(--q-voll);transition:fill var(--dauer-mittel) linear}
.site-nav ul{display:flex;align-items:center;gap:clamp(24px, 1.2vw + 12px, 36px);list-style:none;margin:0;padding:0}
.site-nav a:not(.button){position:relative;display:inline-flex;align-items:center;min-height:44px;font:var(--fw-navigation) var(--fs-navigation)/var(--lh-navigation) var(--sans);color:inherit}
.site-nav a:not(.button)::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:var(--linie-betont);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise)}
.site-nav a:not(.button):hover::after,.site-nav a[aria-current=page]:not(.button)::after{transform:scaleX(1)}
.site-nav-cta{margin-left:var(--space-2)}
/* Kopfknopf ist sekundär (ein Primärknopf pro Ansicht, elemente.md §7). Selektor mit html, damit er die alten Regeln in hero.css schlägt. */
html .site-nav .button,html .home-page .site-header:not(.scrolled) .site-nav .button{min-height:44px;padding:0 20px;background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--feldrand);border:0}
html .site-nav .button:hover,html .home-page .site-header:not(.scrolled) .site-nav .button:hover{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--text-1)}
html .site-nav .button::after{left:20px;right:20px;bottom:10px;background:var(--q-voll)}
html .site-nav .button:focus-visible{box-shadow:inset 0 0 0 1.5px var(--text-1),0 0 0 2px var(--fokus-halo)}
.nav-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 12px;box-shadow:inset 0 0 0 1.5px var(--feldrand);font:500 16px/1 var(--sans);color:inherit}
.nav-toggle-icon{position:relative;width:18px;height:12px}
.nav-toggle-icon::before,.nav-toggle-icon::after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dauer-mittel) var(--kurve-praezise),top var(--dauer-mittel) var(--kurve-praezise)}
.nav-toggle-icon::before{top:2px}
.nav-toggle-icon::after{top:8.5px}
.nav-toggle[aria-expanded=true] .nav-toggle-icon::before{top:5.25px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle-icon::after{top:5.25px;transform:rotate(-45deg)}
/* Geöffnetes Menü: Kopfzeile und Fläche in Nacht (body.menu-open schlägt hero.css). */
body.menu-open .site-header,body.menu-open.home-page .site-header{background:var(--nacht);color:var(--papier);border-bottom-color:var(--linie-dunkel)}
/* Sprachumschalter (englische Fassung, 5. Oktober 2026, docs/i18n.md): dezenter Textlink nach dem Knopf, Sekundärfarbe des Grunds,
   gleiche Navigationslinie beim Überfahren. Neben Navigation und Knopf braucht er ab 920 px Platz; darunter steht er im Menü (siehe max-width:919px). */
.site-nav .site-nav-lang a:not(.button){font-weight:400;color:var(--text-2);transition:color var(--dauer-kurz) linear}
.site-nav .site-nav-lang a:not(.button):hover{color:var(--text-1)}
/* Über dem Film (Kopfzeile transparent, Menü zu): Papier wie die Navigationslinks. Nebel erreichte auf dem Poster, das bei reduzierter
   Bewegung stehen bleibt, an der hellsten Stelle hinter dem Wort nur 4.31:1; Papier 7.86:1 (Poster) bis 12.3:1 (Filmbilder), gemessen 5. Oktober 2026. */
body:not(.menu-open).home-page .site-header:not(.scrolled) .site-nav .site-nav-lang a:not(.button){color:var(--text-1)}

/* ---------------------------------------------------------------- Fusszeile (Nacht) */
.site-footer{background:var(--nacht);color:var(--papier);padding:var(--space-9) 0 var(--space-6)}
.footer-invite{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4) var(--space-7);padding-bottom:var(--space-8);margin-bottom:var(--space-8);border-bottom:1px solid var(--linie-dunkel)}
.footer-invite h2{margin:0;font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:var(--ls-h2);color:var(--papier)}
.footer-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--raster-steg);row-gap:var(--space-7)}
.footer-brand{grid-column:1/span 4;display:grid;gap:var(--space-5);align-content:start}
.footer-brand .logo img{display:block;width:280px;height:auto}
.footer-brand p{margin:0;max-width:24em;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--nebel)}
.footer-col{grid-column:span 3;display:grid;gap:var(--space-4);align-content:start;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans)}
.footer-col.is-narrow{grid-column:span 2}
.footer-title{margin:0 0 var(--space-1);font:600 16px/1.4 var(--sans);letter-spacing:0;color:var(--papier)}
.footer-col p{margin:0;color:var(--nebel)}
.footer-col p strong{font-weight:500;color:var(--papier)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer-col a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--papier);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,var(--papier) 45%,transparent);transition:text-decoration-color var(--dauer-kurz) linear}
.footer-col ul a{margin:0;padding:8px 0}
.footer-col a:hover{text-decoration-color:var(--holz);text-decoration-thickness:2px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--linie-dunkel)}
.footer-bottom p{margin:0;font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--nebel)}

/* Pausenknopf «Bewegung pausieren» (motion.md, Barrierefreiheit): sichtbar, Zeichen zwei Balken oder Dreieck, aria-pressed. */
.pause{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;color:var(--text-2);font:500 16px/1.2 var(--sans);white-space:nowrap;cursor:pointer}
.pause::before{content:'';flex:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pause[aria-pressed=true]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.pause:hover{color:var(--text-1)}

/* ---------------------------------------------------------------- Zeilenlisten: Auftakt 1,5 px Tinte, Trenner 1 px Linie (elemente.md §4) */
.rows{list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1)}
.rows>li{margin:0}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:var(--space-3) var(--space-7);align-items:start;padding:var(--row) 0;border-bottom:1px solid var(--linie-ton);color:inherit}
.row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--linie-betont);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-linie) var(--kurve-linie)}
a.row:hover::after,a.row:focus-visible::after{transform:scaleX(1)}
a.row:focus-visible{outline-offset:4px}
.row-title{margin:0;font:600 clamp(20px, 18.5px + .38vw, 24px)/1.3 var(--sans);letter-spacing:-.01em}
.row-text{margin:0;font:400 var(--fs-text-klein)/var(--lh-text-klein) var(--sans);color:var(--text-1);max-width:32em}
.row-meta{margin:0;padding-top:.25em;font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2);text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- Knöpfe und Textlinks (elemente.md §7)
   48 px hoch, eckig, 24 px Innenabstand. Überfahren: unter dem Wort zieht eine 2-px-Linie von links auf (Geste der Ablauflinie).
   Drücken: 1 px nach unten. Primär auf hell Tinte, auf dunkel Holz mit Nacht-Text. Ohne Pfeile, ohne Versalien. */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border:0;border-radius:var(--radius-0);background:var(--tinte);color:var(--papier);font:var(--fw-knopf) var(--fs-knopf)/var(--lh-knopf) var(--sans);text-align:center;text-decoration:none;cursor:pointer;isolation:isolate;transition:box-shadow var(--dauer-kurz) linear,background-color var(--dauer-kurz) linear}
.button::after{content:'';position:absolute;left:24px;right:24px;bottom:11px;height:var(--linie-betont);background:var(--holz);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise);pointer-events:none}
.button:hover{color:var(--papier)}
.button:hover::after{transform:scaleX(1)}
.button:active{transform:translateY(1px)}
.button.is-secondary{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--feldrand)}
.button.is-secondary::after{background:var(--q-voll)}
.button.is-secondary:hover{color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--text-1)}
.button.is-secondary:focus-visible{box-shadow:inset 0 0 0 1.5px var(--text-1),0 0 0 2px var(--fokus-halo)}
.button.is-ghost{min-height:44px;padding:0 2px;background:transparent;color:var(--text-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.button.is-ghost::after{left:2px;right:2px;bottom:8px}
.button.is-light,.button.is-wood,:is(.auf-dunkel,.band-dark,.site-footer,.cinema-hero) .button:not(.is-secondary):not(.is-ghost){background:var(--holz);color:var(--nacht)}
.button.is-light::after,.button.is-wood::after,:is(.auf-dunkel,.band-dark,.site-footer,.cinema-hero) .button:not(.is-secondary):not(.is-ghost)::after{background:var(--nacht)}
.button.is-light:hover,.button.is-wood:hover,:is(.auf-dunkel,.band-dark,.site-footer,.cinema-hero) .button:not(.is-secondary):not(.is-ghost):hover{color:var(--nacht)}
.button.is-block{width:100%}
.button:disabled,.button[aria-disabled=true]{opacity:.45;cursor:default;transform:none}
.button:disabled::after,.button[aria-disabled=true]::after{display:none}
/* Textlink: 1 px Unterstreichung, beim Überfahren zieht die Ablauflinie (2 px Holz) von links darüber, auch über Zeilenumbrüche.
   Senkrechter Innenabstand vergrössert die Trefferfläche auf 44 px, ohne die Zeile zu verschieben. */
.text-link{display:inline;padding:12px 0;color:var(--text-1);font:600 var(--fs-text-klein)/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor;background:linear-gradient(var(--q-voll),var(--q-voll)) left bottom/0% 2px no-repeat;background-clip:content-box;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
.text-link:hover{background-size:100% 2px;text-decoration-color:transparent}
.text-link.is-large{font-size:var(--fs-lead);font-weight:500}

/* ---------------------------------------------------------------- Bildschirm (Gerätebild, Radius 14 px, elemente.md §4) */
.screen{display:block;background:var(--papier);color:var(--tinte);border-radius:var(--radius-geraet);box-shadow:var(--shadow-2);overflow:hidden}

/* ---------------------------------------------------------------- Akkordeon: Pluszeichen verliert den senkrechten Strich, Linie unter der offenen Frage */
.folds{border-top:var(--linie-kontur) solid var(--text-1)}
details.fold{border-bottom:1px solid var(--linie-ton)}
.fold>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:var(--space-4);min-height:64px;padding:var(--space-4) 0;font:600 clamp(18px, 17px + .25vw, 20px)/1.35 var(--sans);letter-spacing:-.005em;color:var(--text-1)}
.fold>summary::after{content:'';width:24px;height:24px;background:linear-gradient(currentColor,currentColor) center/16px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 16px no-repeat;transition:background-size var(--dauer-mittel) var(--kurve-praezise)}
.fold[open]>summary::after{background-size:16px 2px,2px 0}
.fold>summary::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--linie-ablauf);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-linie) var(--kurve-linie)}
.fold[open]>summary::before{transform:scaleX(1)}
.fold>summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.fold-body{padding:var(--space-4) 44px var(--space-5) 0;color:var(--text-1);max-width:62ch}
.fold-body>:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- Formulare: Rand 1,5 px Linie kräftig, Fokus 2 px Tinte, Fehler 2 px Fehler */
.field{display:grid;gap:var(--space-2);margin-bottom:var(--space-5);font:var(--fw-feld-label) var(--fs-feld-label)/var(--lh-feld-label) var(--sans);color:var(--text-1)}
.field :is(input:not([type=checkbox]):not([type=radio]),select,textarea),.input{width:100%;min-height:48px;padding:11px 14px;border:0;border-radius:var(--radius-feld);background:var(--papier);color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--feldrand);font:var(--fw-feld-eingabe) var(--fs-feld-eingabe)/var(--lh-feld-eingabe) var(--sans);transition:box-shadow var(--dauer-kurz) linear}
.field :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{box-shadow:inset 0 0 0 1.5px var(--tinte)}
.field :is(input,select,textarea):focus-visible{outline:var(--linie-fokus) solid var(--fokus-ring);outline-offset:2px;box-shadow:inset 0 0 0 2px var(--tinte),0 0 0 2px var(--fokus-halo)}
.field textarea{resize:vertical;min-height:144px}
.field ::placeholder{color:var(--grau);opacity:1}
.field :is(input,select,textarea):user-invalid,.field :is(input,select,textarea)[aria-invalid=true],.field.is-invalid :is(input,select,textarea){box-shadow:inset 0 0 0 2px var(--fehler)}
.field-help{margin:0;font:400 var(--fs-text-klein)/1.45 var(--sans);color:var(--text-2)}
.field-error{display:flex;align-items:flex-start;gap:8px;margin:0;font:500 var(--fs-text-klein)/1.4 var(--sans);color:var(--fehler)}
.field-error::before{content:'';flex:none;width:16px;height:16px;margin-top:2px;background:linear-gradient(var(--papier),var(--papier)) center/8px 2px no-repeat,var(--fehler);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.field.is-check{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3);font:400 var(--fs-text-klein)/1.5 var(--sans)}
.field.is-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--tinte)}
:is(.auf-dunkel,.band-dark,.site-footer) .field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){box-shadow:inset 0 0 0 1.5px var(--nebel)}

/* Meldungen (elemente.md §8): Fläche im Signalton, oben 2 px Linie. .status[role=status] ist die Formular-Statuszeile (#form-status). */
.meldung,.status[role=status]{display:block;margin:0;padding:16px 18px 18px;border-top:2px solid var(--m-ton,var(--tinte));background:var(--m-flaeche,var(--kreide));color:var(--tinte);font:400 var(--fs-text-klein)/1.55 var(--sans);overflow-wrap:anywhere}
.meldung strong{display:block;font:600 17px/1.35 var(--sans);color:var(--m-titel,var(--tinte))}
.meldung p{margin:0}
.meldung[data-art=erfolg],.meldung[data-state=success],.status[role=status][data-state=success]{--m-ton:var(--erfolg);--m-flaeche:var(--erfolg-flaeche);--m-titel:var(--erfolg)}
.meldung[data-art=warnung]{--m-ton:var(--tinte);--m-flaeche:var(--warnung-flaeche)}
.meldung[data-art=fehler],.meldung[data-state=error],.status[role=status][data-state=error]{--m-ton:var(--fehler);--m-flaeche:var(--fehler-flaeche);--m-titel:var(--fehler)}
.status[role=status][data-state=success]{color:var(--erfolg)}
.status[role=status][data-state=error]{color:var(--fehler)}

/* ---------------------------------------------------------------- Statusquadrat (elemente.md §1): Kontur = offen, Holzkontur = aktueller Schritt, gefüllt = erledigt.
   Immer mit Wort; das Quadrat ist aria-hidden. Füllung läuft von links ein (motion.md), Endzustand steht im CSS. */
.status{display:inline-flex;align-items:baseline;gap:.6em;margin:0;font:var(--fw-status) var(--fs-status)/var(--lh-status) var(--sans);color:var(--text-1)}
.status-mark{position:relative;flex:none;display:inline-block;width:.62em;height:.62em;box-shadow:inset 0 0 0 1.5px var(--q-offen);background:linear-gradient(var(--q-voll),var(--q-voll)) left center/0% 100% no-repeat}
.status.is-current .status-mark,.status[data-status=aktuell] .status-mark{box-shadow:inset 0 0 0 2px var(--q-voll)}
.status.is-done .status-mark,.status[data-status=erledigt] .status-mark{box-shadow:inset 0 0 0 2px var(--q-voll);background-size:100% 100%}
.status-word{color:var(--text-2);font-weight:400}
.status.is-current .status-word,.status[data-status=aktuell] .status-word{color:var(--text-1);font-weight:500}
/* Stand-Vermerk (§3): «Stand 5. Oktober 2026, geprüft», gefüllt nur bei geprüft. */
.stand{display:inline-flex;align-items:baseline;gap:.6em;margin:0;font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--text-2)}
.stand::before{content:'';flex:none;width:.64em;height:.64em;box-shadow:inset 0 0 0 1.5px var(--q-offen)}
.stand.is-done::before,.stand[data-status=erledigt]::before{background:var(--q-voll);box-shadow:none}

/* ---------------------------------------------------------------- Ablaufleiste (§2): Kennenlernen, Gespräch, Offerte. <ol class="ablauf" aria-label="…">, genau ein li[aria-current=step].
   Quadrat 12 px über Name und Zustand; zwischen den Stufen eine Haarlinie, über erledigter Strecke die Ablauflinie 2 px in Holz (.ab-linie). */
.ablauf{--ab-luecke:16px;display:grid;grid-template-columns:repeat(var(--ab-stufen,3),minmax(min-content,1fr));column-gap:12px;list-style:none;margin:0;padding:0;font-family:var(--sans)}
.ablauf>li{position:relative;display:grid;align-content:start;gap:4px;padding-top:24px;min-width:0}
.ablauf>li::before{content:'';position:absolute;top:5px;left:0;width:12px;height:12px;box-shadow:inset 0 0 0 1.5px var(--q-offen);background:linear-gradient(var(--q-voll),var(--q-voll)) left center/0% 100% no-repeat}
.ablauf>li::after{content:'';position:absolute;top:10.5px;left:calc(12px + var(--ab-luecke));right:var(--ab-luecke);height:1px;background:var(--q-offen);opacity:.55}
.ablauf>li:last-child::after,.ablauf>li:last-child>.ab-linie{display:none}
.ablauf .ab-linie{position:absolute;top:10px;left:calc(12px + var(--ab-luecke));right:var(--ab-luecke);height:var(--linie-ablauf);background:var(--q-voll);transform:scaleX(0);transform-origin:left center;z-index:1}
.ablauf>li:is(.is-done,[data-status=erledigt])::before{box-shadow:inset 0 0 0 2px var(--q-voll);background-size:100% 100%}
.ablauf>li:is(.is-done,[data-status=erledigt])>.ab-linie{transform:scaleX(1)}
.ablauf>li:is(.is-done,[data-status=erledigt]):not(:has(>.ab-linie)):not(:last-child)::after{height:var(--linie-ablauf);top:10px;background:var(--q-voll);opacity:1}
.ablauf>li[aria-current=step]::before{box-shadow:inset 0 0 0 2px var(--q-voll)}
.ablauf .ab-name{font:500 17px/1.3 var(--sans);color:var(--text-1)}
.ablauf>li[aria-current=step] .ab-name{font-weight:600}
.ablauf .ab-zustand{font:400 var(--fs-meta)/var(--lh-meta) var(--sans);color:var(--text-2)}
.ablauf>li[aria-current=step] .ab-zustand{color:var(--text-1)}
.ablauf.is-large>li{padding-top:34px;gap:6px}
.ablauf.is-large>li::before{top:3px;width:18px;height:18px}
.ablauf.is-large>li::after{top:11.5px;left:calc(18px + 20px);right:20px}
.ablauf.is-large .ab-linie{top:11px;left:calc(18px + 20px);right:20px}
.ablauf.is-large .ab-name{font-size:22px;letter-spacing:-.01em}
.ablauf.is-large .ab-zustand{font-size:15px}
.ablauf.is-large>li[aria-current=step]::before{box-shadow:inset 0 0 0 2.5px var(--q-voll)}
/* Senkrecht: immer (.is-vertical) oder unter 520 px (.is-vertical-mobile, im Paket .ist-senkrecht-mobil). Die Linie läuft nach unten. */
.ablauf.is-vertical{grid-template-columns:1fr;gap:0}
.ablauf.is-vertical>li{padding:0 0 22px 30px}
.ablauf.is-vertical>li::after{top:23px;bottom:6px;left:5.5px;right:auto;width:1px;height:auto}
.ablauf.is-vertical .ab-linie{top:23px;bottom:6px;left:5px;right:auto;width:var(--linie-ablauf);height:auto;transform:scaleY(0);transform-origin:center top}
.ablauf.is-vertical>li:is(.is-done,[data-status=erledigt])>.ab-linie{transform:scaleY(1)}
.ablauf.is-vertical>li:is(.is-done,[data-status=erledigt]):not(:has(>.ab-linie)):not(:last-child)::after{top:23px;left:5px;width:var(--linie-ablauf);height:auto}
@media (max-width:520px){
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil){grid-template-columns:1fr;gap:0}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li{padding:0 0 22px 30px}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li::after{top:23px;bottom:6px;left:5.5px;right:auto;width:1px;height:auto}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil) .ab-linie{top:23px;bottom:6px;left:5px;right:auto;width:var(--linie-ablauf);height:auto;transform:scaleY(0);transform-origin:center top}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li:is(.is-done,[data-status=erledigt])>.ab-linie{transform:scaleY(1)}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li:is(.is-done,[data-status=erledigt]):not(:has(>.ab-linie)):not(:last-child)::after{top:23px;left:5px;width:var(--linie-ablauf);height:auto}
 .ablauf:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li:last-child{padding-bottom:0}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:0 0 20px 34px}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li::before{top:4px}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li::after{top:30px;bottom:6px;left:8.5px}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil) .ab-linie{top:30px;bottom:6px;left:8px}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil) .ab-name{font-size:19px}
 .ablauf.is-large:is(.is-vertical-mobile,.ist-senkrecht-mobil)>li:is(.is-done,[data-status=erledigt]):not(:has(>.ab-linie)):not(:last-child)::after{top:30px;left:8px}
}
.ablauf.is-large.is-vertical>li{padding-left:34px}
.ablauf.is-large.is-vertical>li::after{top:30px;left:8.5px}
.ablauf.is-large.is-vertical .ab-linie{top:30px;left:8px}

/* Produktkette (§2a): was Ermeth baut. Ohne Statusquadrat, ohne Holz; Nummern, weil es eine echte Abfolge ist. */
.kette{--kette-glieder:3;display:grid;grid-template-columns:repeat(var(--kette-glieder),minmax(0,1fr));column-gap:var(--raster-steg);list-style:none;margin:0;padding:0;border-top:var(--linie-kontur) solid var(--text-1);counter-reset:glied;font-family:var(--sans)}
.kette>li{display:grid;align-content:start;gap:6px;padding-top:16px;min-width:0;counter-increment:glied}
.kette>li::before{content:counter(glied);font:500 var(--fs-meta)/var(--lh-meta) var(--sans);color:var(--text-2);font-variant-numeric:tabular-nums}
.kette .k-name{font:600 17px/1.3 var(--sans);color:var(--text-1)}
.kette .k-text{font:400 16px/1.5 var(--sans);color:var(--text-2)}

/* Filmknopf (elemente.md §7): Kontur-Quadrat mit Dreieck, nie ein gefülltes Quadrat neben Abspielen. */
.filmknopf{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0;background:none;border:0;color:var(--text-1);font:var(--fw-knopf) var(--fs-knopf)/1.3 var(--sans);text-align:left;cursor:pointer}
.filmknopf .fk-zeichen{display:grid;place-items:center;width:52px;height:52px;flex:none;box-shadow:inset 0 0 0 1.5px currentColor;transition:box-shadow var(--dauer-mittel) var(--kurve-praezise)}
.filmknopf .fk-zeichen::before{content:'';margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.filmknopf:hover .fk-zeichen{box-shadow:inset 0 0 0 2px var(--q-voll)}
.filmknopf .fk-text{display:grid;gap:2px}
.filmknopf .fk-unter{font:400 var(--fs-meta)/var(--lh-meta) var(--sans);color:var(--text-2)}

/* Muster-Kennzeichnung (elemente.md §8): Schraffur in Kobalt und das Wort, nie in der Markenfarbe. */
.schraffur{background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 7px)}
.muster-etikett{display:inline-flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;background:var(--muster-flaeche);color:var(--muster);font:600 var(--fs-meta)/1.2 var(--sans)}
.muster-etikett::before{content:'';width:26px;height:12px;flex:none;background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 5px);box-shadow:inset 0 0 0 1.5px var(--muster)}
.muster-rahmen{position:relative;padding:44px 0 0;box-shadow:inset 0 0 0 1.5px var(--muster)}
.muster-rahmen::before{content:'';position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 7px)}
.muster-rahmen>.muster-etikett{position:absolute;top:14px;left:14px}
:is(.auf-dunkel,.band-dark) .muster-etikett{background:transparent;color:var(--muster-dunkel)}

/* Tabelle mit Zahlenspalten */
.tabelle{width:100%;border-collapse:collapse;font:var(--fw-tabelle) var(--fs-tabelle)/var(--lh-tabelle) var(--sans);color:var(--text-1)}
.tabelle th{padding:10px 16px 10px 0;text-align:left;font:var(--fw-tabelle-kopf) var(--fs-tabelle-kopf)/var(--lh-tabelle-kopf) var(--sans);color:var(--text-2);border-bottom:var(--linie-kontur) solid var(--text-1)}
.tabelle td{padding:12px 16px 12px 0;border-bottom:1px solid var(--linie-ton);vertical-align:baseline}
.tabelle .zahl{text-align:right}
.tabelle :is(th,td):last-child{padding-right:0}

/* ---------------------------------------------------------------- Dialog: Radius 14 px, Hintergrund Nacht 62 % */
.dialog{width:min(640px, calc(100vw - 32px));max-height:90dvh;padding:0;border:0;border-radius:var(--radius-geraet);background:var(--papier);color:var(--tinte);box-shadow:0 40px 80px -40px rgba(11,22,32,.6)}
.dialog::backdrop{background:rgba(11,22,32,.62)}
.dialog-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:18px 20px 18px 24px;border-bottom:1px solid var(--linie)}
.dialog-head :is(h2,h3){margin:0;font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
.dialog-close{position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--tinte);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow var(--dauer-kurz) linear}
.dialog-close::before,.dialog-close::after{content:'';position:absolute;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.dialog-close::after{transform:rotate(-45deg)}
.dialog-close:hover{box-shadow:inset 0 0 0 1.5px var(--linie-kraeftig)}
.dialog-body{padding:var(--space-5);color:var(--tinte)}
.dialog-body>:last-child{margin-bottom:0}
.dialog-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);padding:0 var(--space-5) var(--space-5)}

/* ---------------------------------------------------------------- Dunkle Fläche */
.band-dark{background:var(--nacht);color:var(--papier)}
.band-dark :is(h2,h3,h4,strong){color:var(--papier)}
.band-dark :is(p,li,.lead,.kicker,.row-text,.row-meta){color:var(--nebel)}
.band-dark .lead{color:var(--papier)}
.band-dark .prose :is(p,li){color:var(--nebel)}

/* ---------------------------------------------------------------- Reveals (einmal beim ersten Sichtbarwerden, nie scrollgebunden).
   site.js setzt .is-waiting nur auf Elemente, die beim Laden unter dem Bildschirm liegen, und danach .is-in.
   Ohne Skript, bei Pause und bei reduzierter Bewegung steht alles sofort. */
:is([data-reveal],[data-r2-reveal]).is-waiting,[data-reveal-group]>.is-waiting{opacity:0;transform:translateY(14px)}
.draw-line{display:block;height:var(--linie-kontur);background:var(--text-1);transform:scaleX(1);transform-origin:left center}
.draw-line.is-waiting{transform:scaleX(0)}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
 .footer-brand{grid-column:1/-1}
 .footer-col,.footer-col.is-narrow{grid-column:span 4}
}
@media (max-width:900px){
 .section-head>:first-child,.section-head>.lead,.section-head>:nth-child(2){grid-column:1/-1}
 .section-head>.lead,.section-head>:nth-child(2){padding-top:0}
 .section-head{margin-bottom:var(--space-6)}
}
/* Menü statt Navigation bis 919 px (Korrektur 5. Oktober 2026, brand/08-englisch/pruefbericht.md Befund 3). Navigation, Knopf und
   Sprachumschalter brauchen in einer Zeile 815 px Kopfzeile (gemessen, Deutsch; Englisch 807 px); das reicht erst ab 920 px Fensterbreite.
   Zwischen 801 und 919 px (iPad im Hochformat: 810, 820, 834 px) stand der Umschalter sonst nur in der Fusszeile. Jetzt klappt die
   Navigation dort wie auf dem Telefon in das Menü, mit dem Umschalter unter dem Knopf. Kopfzeilenhöhe und Wortmarke wechseln weiter bei 800 px. */
@media (max-width:919px){
 .nav-toggle{display:inline-flex}
 html.js .site-nav{display:none}
 html.js .site-nav.is-open{display:flex;flex-direction:column;position:fixed;inset:var(--header-h) 0 0 0;z-index:49;padding:var(--space-5) var(--raster-rand) var(--space-6);background:var(--nacht);color:var(--papier);overflow:auto;overscroll-behavior:contain;--text-1:var(--papier);--text-2:var(--nebel);--q-voll:var(--holz);--q-offen:var(--nebel);--feldrand:var(--nebel);--fokus-ring:var(--papier);--fokus-halo:var(--nacht)}
 .site-nav.is-open ul{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--linie-dunkel)}
 .site-nav.is-open li{border-bottom:1px solid var(--linie-dunkel)}
 .site-nav.is-open a:not(.button){width:100%;min-height:64px;font:var(--fw-menue) var(--fs-menue)/var(--lh-menue) var(--sans);letter-spacing:var(--ls-menue)}
 .site-nav.is-open a:not(.button)::after{bottom:14px;right:auto;width:2.5em}
 .site-nav.is-open .site-nav-cta{border:0;margin:var(--space-6) 0 0}
 html .site-nav.is-open .button{width:100%;min-height:52px;background:var(--holz);color:var(--nacht);box-shadow:none;font-size:17px}
 html .site-nav.is-open .button::after{background:var(--nacht);left:24px;right:24px;bottom:14px}
 html:not(.js) .site-header{height:auto}
 html:not(.js) .site-bar{flex-wrap:wrap;padding:12px 0}
 html:not(.js) .site-nav{width:100%}
 html:not(.js) .site-nav ul{flex-wrap:wrap;gap:4px 18px}
 html:not(.js) .nav-toggle{display:none}
 /* Sprachumschalter im geöffneten Menü: unter dem Knopf, ohne Trennlinie, in Text- statt Menügrösse. */
 .site-nav.is-open .site-nav-lang{border:0;margin:var(--space-3) 0 0}
 .site-nav.is-open .site-nav-lang a:not(.button){width:auto;min-height:48px;font:400 var(--fs-text-klein)/1.4 var(--sans);letter-spacing:0}
 .site-nav.is-open .site-nav-lang a:not(.button)::after{bottom:10px;width:auto;right:0}
}
@media (max-width:800px){
 :root{--header-h:64px}
 .logo .logo-mark{width:132px}
 .row{grid-template-columns:1fr;gap:var(--space-2)}
 .row-meta{text-align:left;padding-top:0;white-space:normal}
 .fold-body{padding-right:0}
 .site-footer{padding-top:var(--space-8)}
 .footer-invite{padding-bottom:var(--space-7);margin-bottom:var(--space-7)}
}
@media (max-width:640px){
 .footer-col,.footer-col.is-narrow{grid-column:1/-1}
 .footer-cols{row-gap:var(--space-6)}
 .footer-bottom{flex-direction:column;align-items:flex-start;margin-top:var(--space-7)}
 .footer-brand .logo img{width:240px}
 .page-actions{flex-direction:column;align-items:stretch}
 .page-actions .button{width:100%}
 .page-actions .text-link{align-self:flex-start}
 .kette{grid-template-columns:1fr}
 .kette>li{padding:14px 0 16px;border-bottom:1px solid var(--linie-ton)}
 .dialog-head,.dialog-body{padding:var(--space-4)}
 .dialog-foot{padding:0 var(--space-4) var(--space-4)}
}
@media (max-width:390px){
 .page-head h1{overflow-wrap:anywhere}
}

/* ---------------------------------------------------------------- Druck */
@media print{
 .site-header,.nav-toggle,.skip-link,.footer-invite,.all-motion,.pause,dialog{display:none!important}
 body{background:#fff;color:#000;font-size:11pt}
 .site-footer,.band-dark{background:#fff;color:#000;--text-1:#000;--text-2:#333}
 .site-footer :is(p,a,strong,h2),.band-dark :is(p,li,h2,h3){color:#000}
 .footer-brand .logo img{filter:invert(1)}
 [data-reveal],[data-r2-reveal],[data-reveal-group]>*,.page-head .kicker,.page-head .lead,.page-actions{opacity:1!important;transform:none!important}
 .page-head .line>span,.draw-line{transform:none!important;animation:none!important}
 a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}

/* ---------------------------------------------------------------- Stopp-Block: Systemeinstellung und «Bewegung pausieren» halten alles an und zeigen Endzustände.
   Animationen fallen weg (nicht nur Dauer 0), damit document.getAnimations() nach der Pause leer ist. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html{scroll-behavior:auto}
 :is([data-reveal],[data-r2-reveal]).is-waiting,[data-reveal-group]>.is-waiting{opacity:1;transform:none}
 .draw-line.is-waiting{transform:none}
 .button:active{transform:none}
}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition:none!important}
html.motion-paused{scroll-behavior:auto}
html.motion-paused :is([data-reveal],[data-r2-reveal]).is-waiting,html.motion-paused [data-reveal-group]>.is-waiting{opacity:1;transform:none}
html.motion-paused .draw-line.is-waiting{transform:none}