/* ============================================================
   Travel & Grow, Parallelseite
   Designsystem: Schwarz / Weiss / ein Rot, Newsreader + Schibsted Grotesk
   Signatur: das x der Formel (Wissen x Netzwerk x ...) als Motiv

   FARBWELTEN (Wunsch Maurice, Sprachnachrichten 15.09. und 16.09.2026):
   Die Seite ist bewusst schwarzweiss gehalten, damit die Farbe allein aus
   den Fotos kommt. Am 16.09. hat Maurice nachgeschaerft: schwarzer Grund,
   weisse Schrift, rote Akzente, Gold als Alternative. Deshalb gibt es
   mehrere Farbwelten, gewaehlt ueber html[data-stil] (die Liste steht in
   scripts/generate.py, FARBWELTEN). Alle dunklen Welten tragen zusaetzlich
   html[data-grund="dunkel"] und teilen sich dieselbe Grundpalette; eine
   einzelne Welt aendert dann meist nur ihren Akzent.
   :root enthaelt Weiss mit Rot und dient als Rueckfall.
   Die Variablennamen sind absichtlich unveraendert geblieben (--papier ist
   die Grundflaeche, --ink die Schrift, --bronze der Akzent), damit keine
   der Regeln angefasst werden musste.
   ============================================================ */

:root{
  --papier:#FFFFFF;        /* Grundflaeche, reines Weiss statt Papierton */
  --papier-tief:#F2F1EF;   /* abgesetzte Flaechen, ein Hauch Grau */
  --karte:#FFFFFF;
  --ink:#0B0B0B;           /* Schrift und schwarze Flaechen */
  --tiefe:#0B0B0B;         /* dunkle Sektionen: echtes Schwarz */
  --tiefe-text:#F4F4F4;
  --bronze:#D21E26;        /* DER Akzent: Rot auf Hell, Kontrast 5,3:1 */
  --bronze-hell:#FF4D42;   /* derselbe Akzent auf Schwarz, Kontrast 6,0:1 */
  --stein:#6E6E6E;
  --linie:#E3E1DD;
  --linie-dunkel:#2B2B2B;
  --text-weich:#2E2E2E;
  --dunkel-hell:#FFFFFF;   /* Ueberschriften in dunklen Sektionen */
  --dunkel-prosa:#D6D6D6;
  --dunkel-weich:#9B9B9B;
  --dunkel-leise:#7A7A7A;
  --karte-dunkel:#171717;
  --kopf-grund:rgba(255,255,255,.92);
  --bild-schleier-oben:rgba(0,0,0,.04);
  --bild-schleier-unten:rgba(0,0,0,.42);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --grotesk:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --breite:1200px;
}

/* Die bisherige Farbwelt, zum Vergleichen weiter abrufbar */
html[data-stil="papier"]{
  --papier:#F7F4EE;
  --papier-tief:#EFE9DD;
  --karte:#FCFAF5;
  --ink:#191714;
  --tiefe:#141821;
  --tiefe-text:#EDE8DE;
  --bronze:#9A6A32;
  --bronze-hell:#C08A4B;
  --stein:#767061;
  --linie:#DCD5C6;
  --linie-dunkel:#2A2F3A;
  --text-weich:#3B372F;
  --dunkel-hell:#F4EFE5;
  --dunkel-prosa:#C9CDD6;
  --dunkel-weich:#8E96A6;
  --dunkel-leise:#6C7382;
  --karte-dunkel:#1B2029;
  --kopf-grund:rgba(247,244,238,.92);
  --bild-schleier-oben:rgba(20,24,33,.04);
  --bild-schleier-unten:rgba(20,24,33,.42);
}

/* Dunkle Grundpalette, gilt fuer alle dunklen Welten (Wunsch Maurice 16.09.2026).
   Kontraste auf #0B0B0B: Schrift 18:1, --text-weich 13:1, --stein 7:1. */
html[data-grund="dunkel"]{
  color-scheme:dark;
  --papier:#0B0B0B;        /* Grundflaeche Schwarz */
  --papier-tief:#141414;   /* abgesetzte Flaechen */
  --karte:#121212;
  --ink:#F5F5F5;           /* Schrift Weiss, nicht ganz rein, blendet weniger */
  --tiefe:#000000;         /* dunkle Sektionen: noch eine Stufe tiefer */
  --tiefe-text:#F5F5F5;
  --stein:#9C9C9C;
  --linie:#262626;
  --linie-dunkel:#262626;
  --text-weich:#D4D4D4;
  --dunkel-hell:#FFFFFF;
  --dunkel-prosa:#D4D4D4;
  --dunkel-weich:#9C9C9C;
  --dunkel-leise:#767676;
  --karte-dunkel:#141414;
  --kopf-grund:rgba(11,11,11,.9);
  --bild-schleier-oben:rgba(0,0,0,.06);
  --bild-schleier-unten:rgba(0,0,0,.5);
}
/* Rot: Ferrari-Rot (Rosso Corsa), Vorschlag Carina 17.09.2026, Maurice: "so finde ich die Farben viel geiler".
   Auf Schwarz 3,6:1, also gut fuer Ueberschriften, Zahlen, Linien und Flaechen. Wo Schrift AUF dem Rot
   steht, ist sie deshalb weiss statt schwarz (5,1:1), siehe Regeln weiter unten. */
html[data-stil="schwarz-rot"]{--bronze:#D40000;--bronze-hell:#D40000}
/* Das hellere Rot, das Maurice am 16./17.09. auf dem Schirm hatte, zum direkten Vergleich
   daneben stehen gelassen. Vor der Uebergabe soll er sagen, welches der beiden es sein soll. */
html[data-stil="schwarz-signalrot"]{--bronze:#FF3B30;--bronze-hell:#FF3B30}
/* Gold: gedeckt, eher Champagner als Messing (8,5:1) */
html[data-stil="schwarz-gold"]{--bronze:#C9A45C;--bronze-hell:#D4B06A}
/* Orange: Sonnenuntergang, Aufbruch (7,6:1) */
html[data-stil="schwarz-orange"]{--bronze:#FF7A2E;--bronze-hell:#FF7A2E}
/* Ganz ohne Farbe: betont wird nur ueber Kursiv und Weiss, die Fotos sind die einzige Farbe */
html[data-stil="schwarz-pur"]{--bronze:#FFFFFF;--bronze-hell:#FFFFFF}
/* Anthrazit: warmes Dunkelgrau statt Schwarz, weicher zu lesen, Champagner als Akzent */
html[data-stil="anthrazit-champagner"]{
  --papier:#1C1B19;
  --papier-tief:#242320;
  --karte:#22211E;
  --ink:#F3EFE7;
  --tiefe:#131210;
  --tiefe-text:#F3EFE7;
  --stein:#A39C8F;
  --linie:#35332E;
  --linie-dunkel:#2C2A26;
  --text-weich:#D6D0C4;
  --dunkel-hell:#FAF6EE;
  --dunkel-prosa:#D6D0C4;
  --dunkel-weich:#A39C8F;
  --dunkel-leise:#7D776C;
  --karte-dunkel:#1D1C19;
  --kopf-grund:rgba(28,27,25,.9);
  --bronze:#D9BC8C;
  --bronze-hell:#E2C89C;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--ink);font-family:var(--grotesk);font-size:1.05rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
ul,ol{list-style-position:inside}
::selection{background:var(--bronze);color:var(--papier)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

.zeile{max-width:var(--breite);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.prosa{max-width:44rem;color:var(--text-weich)}
.prosa p+p{margin-top:1.05rem}
.prosa strong{color:var(--ink)}

/* --- Entwurfs-Banner (fliegt zum Livegang raus) --- */
.entwurf{background:var(--ink);color:var(--dunkel-weich);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.55rem 1rem}
.entwurf b{color:var(--bronze-hell);font-weight:600}

/* --- Kopf --- */
.kopf{position:sticky;top:0;z-index:50;background:var(--kopf-grund);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}
.marke{font-family:var(--serif);font-size:1.3rem;font-weight:500;text-decoration:none;white-space:nowrap}
.marke em{font-style:italic;color:var(--bronze)}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink);opacity:.82;transition:color .2s,opacity .2s}
.nav-links a:hover{opacity:1;color:var(--bronze)}
.nav-links a.aktiv{opacity:1;border-bottom:2px solid var(--bronze);padding-bottom:2px}
.nav-knopf{display:none;background:none;border:1px solid var(--ink);padding:.5rem .85rem;font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.menue{position:fixed;inset:0;background:var(--papier);z-index:100;display:none;flex-direction:column;padding:1.5rem clamp(1.25rem,4vw,2.5rem)}
.menue.offen{display:flex}
.menue-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.menue nav a{display:block;font-family:var(--serif);font-size:1.9rem;text-decoration:none;padding-block:.85rem;border-bottom:1px solid var(--linie)}
.menue nav a:hover{color:var(--bronze)}
.menue .knopf{margin-top:2rem;text-align:center}

/* --- Knoepfe und Links --- */
.knopf{display:inline-block;background:var(--ink);color:var(--papier);text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.02em;padding:.95rem 1.7rem;border:1px solid var(--ink);border-radius:2px;transition:background .25s,border-color .25s;cursor:pointer}
.knopf:hover{background:var(--bronze);border-color:var(--bronze);color:var(--papier)}
.knopf-leise{background:transparent;color:var(--ink)}
.knopf-leise:hover{background:var(--ink);border-color:var(--ink);color:var(--papier)}
.knopf-klein{padding:.6rem 1.1rem;font-size:.85rem}
.sektion-dunkel .knopf{background:var(--papier);color:var(--ink);border-color:var(--papier)}
.sektion-dunkel .knopf:hover{background:var(--bronze-hell);border-color:var(--bronze-hell);color:var(--ink)}
.sektion-dunkel .knopf-leise{background:transparent;color:var(--tiefe-text);border-color:var(--tiefe-text)}
.textlink{display:inline-block;font-weight:600;font-size:.98rem;text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:2px;color:var(--ink);transition:color .2s}
.textlink::after{content:" \2192";color:var(--bronze)}
.textlink:hover{color:var(--bronze)}
.sektion-dunkel .textlink{color:var(--tiefe-text)}
.cta-reihe{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2.4rem}
.sektion-schluss{margin-top:2.8rem}

/* --- Typografie --- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em}
.kicker{display:flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--stein);margin-bottom:1.5rem}
.kicker::before{content:"\00D7";color:var(--bronze);font-family:var(--serif);font-size:1.05rem;font-weight:400;letter-spacing:0}
.sektion-titel{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:24ch;margin-bottom:1.3rem}
.seiten-titel{font-size:clamp(2.3rem,6vw,4.6rem);max-width:20ch;margin-bottom:1.5rem}
.gross-zeile{font-family:var(--serif);font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.3;max-width:30ch}
.gross-zeile em,.merkzeile em{font-style:italic;color:var(--bronze)}

/* --- Sektionen --- */
.sektion{padding-block:clamp(3.2rem,6.5vw,5.5rem)}
.sektion-zart{background:var(--papier-tief)}
.sektion-dunkel{background:var(--tiefe);color:var(--tiefe-text)}
.sektion-dunkel .kicker{color:var(--dunkel-weich)}
.sektion-dunkel h1,.sektion-dunkel h2,.sektion-dunkel h3{color:var(--dunkel-hell)}
.sektion-dunkel .prosa{color:var(--dunkel-prosa)}
.sektion-knapp{padding-block:clamp(2.4rem,4.5vw,3.6rem)}

/* --- Hero --- */
.hero{padding-block:clamp(2.8rem,5vw,4.5rem) clamp(3.5rem,8vw,6rem)}
.hero-titel{font-size:clamp(2.7rem,8vw,6.2rem);line-height:1.02;max-width:16ch}
.hero-titel em{font-style:italic;color:var(--bronze)}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:46rem;margin-top:2rem;color:var(--text-weich)}
.hero-vertrauen{margin-top:1.7rem;font-size:.9rem;color:var(--stein);max-width:40rem}
.formel{margin-top:clamp(3rem,7vw,5.5rem);padding-top:1.4rem;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stein)}
.formel .x{color:var(--bronze);font-family:var(--serif);font-weight:400;letter-spacing:0}
@keyframes auftauchen{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lade>*{animation:auftauchen .8s cubic-bezier(.2,.6,.2,1) both}
.lade>*:nth-child(2){animation-delay:.12s}
.lade>*:nth-child(3){animation-delay:.24s}
.lade>*:nth-child(4){animation-delay:.36s}
.lade>*:nth-child(5){animation-delay:.48s}
.lade>*:nth-child(6){animation-delay:.6s}

/* --- Stakkato (Da geht noch mehr) --- */
.stakkato{margin-top:2.2rem}
.stakkato span{display:block;font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.32}
.stakkato .betont{color:var(--bronze);font-style:italic}

/* --- Experience-Karten --- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem;margin-top:2.6rem}
.karte{position:relative;background:var(--karte);border:1px solid var(--linie);display:flex;flex-direction:column;transition:border-color .25s}
.karte:hover{border-color:var(--bronze)}
.karte-bild{aspect-ratio:3/2;border-bottom:1px solid var(--linie)}
.karte-inhalt{padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.karte-land{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stein);font-weight:700}
.karte-datum{font-family:var(--serif);font-size:1.65rem;line-height:1.15}
.pillen{display:flex;flex-wrap:wrap;gap:.45rem}
.pille{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--linie);padding:.26rem .6rem;color:#5D584E;background:var(--papier)}
.karte-fuss{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:.7rem;border-top:1px solid var(--linie)}
.preis{font-weight:700;font-size:1.05rem}
.preis small{display:block;font-weight:400;color:var(--stein);font-size:.75rem;letter-spacing:.04em}
.status{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:.34rem .6rem;white-space:nowrap}
.status-buchbar{border:1px solid var(--ink);color:var(--ink)}
.status-wenige{background:var(--bronze);color:var(--papier)}
.status-warteliste{background:var(--papier-tief);color:#5D584E;border:1px solid var(--linie)}
.status-ausgebucht{color:var(--stein);border:1px solid var(--linie)}
.karte-cta{margin-top:1rem}
.beispiel-marke{position:absolute;top:.85rem;left:.85rem;z-index:2;background:var(--papier);border:1px solid var(--bronze);color:var(--bronze);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.27rem .55rem}
.karte-geist{border-style:dashed;justify-content:center;align-items:flex-start;padding:2rem 1.5rem;gap:1rem;background:transparent}
.karte-geist h3{font-size:1.4rem;max-width:16ch}
.karte-geist p{font-size:.95rem;color:var(--text-weich)}

/* --- Foto-Platzhalter (Art-Direction-Rahmen) --- */
.foto-slot{background:var(--papier-tief);border:1px solid var(--linie);display:grid;place-content:center;gap:.5rem;text-align:center;padding:1.5rem;color:var(--stein)}
.foto-slot .zeichen{font-family:var(--serif);color:var(--bronze);font-size:1.4rem;line-height:1}
.foto-slot p{font-family:var(--serif);font-style:italic;font-size:.92rem;max-width:30ch;line-height:1.5}
.foto-hoch{aspect-ratio:4/5}
.foto-quer{aspect-ratio:16/9}
.foto-mittel{aspect-ratio:4/3}
.sektion-dunkel .foto-slot{background:var(--karte-dunkel);border-color:var(--linie-dunkel);color:#8E96A6}

/* --- Saeulen und Themen-Raster --- */
.raster-linien{display:grid;gap:1rem;margin-top:2.6rem}
.saeulen{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.themen{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.zelle{background:var(--karte);border:1px solid var(--linie);padding:1.7rem}
.zelle h3{font-family:var(--grotesk);font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem;line-height:1.4}
.zelle h3 .x{color:var(--bronze);font-family:var(--serif);font-weight:400;margin-right:.45rem}
.zelle p{font-size:.97rem;color:var(--text-weich)}

/* --- Begegnungspaare (Signatur) --- */
.paare{margin-block:3rem 2.4rem}
.paar-label{font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--stein);margin-bottom:.9rem;min-height:1.2em}
.paar{font-family:var(--serif);font-size:clamp(1.8rem,4.8vw,3.6rem);line-height:1.12;min-height:2.4em;transition:opacity .45s ease}
.paar .x{color:var(--bronze);font-style:italic;padding-inline:.3em}
.paar.wechsel,.paar-label.wechsel{opacity:0}
.paar-label{transition:opacity .45s ease}

/* --- Begegnungs-Karten --- */
.begegnungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;margin-top:2.4rem}
.begegnung{background:var(--karte);border:1px solid var(--linie);padding:1.6rem;font-family:var(--serif);font-size:1.12rem;line-height:1.5}
.begegnung::before{content:"\00D7";display:block;color:var(--bronze);margin-bottom:.7rem;font-size:1.2rem}

/* --- Ticker --- */
.ticker{overflow:hidden;border-block:1px solid var(--linie);padding-block:.95rem;margin-top:3rem}
.ticker-spur{display:flex;gap:2.6rem;white-space:nowrap;width:max-content;animation:lauf 55s linear infinite;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stein)}
.ticker-spur .x{color:var(--bronze);font-family:var(--serif);font-weight:400}
@keyframes lauf{to{transform:translateX(-50%)}}
.sektion-dunkel .ticker{border-color:var(--linie-dunkel)}

/* --- Tagesablauf --- */
.tag-liste{margin-top:2.6rem;border-top:1px solid var(--linie);max-width:56rem}
.tag-punkt{display:grid;grid-template-columns:5.2rem 1fr auto;gap:1rem;align-items:baseline;padding-block:1.05rem;border-bottom:1px solid var(--linie)}
.tag-zeit{font-weight:700;font-size:.92rem;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.tag-was{font-family:var(--serif);font-size:1.22rem}
.tag-art{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .55rem;justify-self:end;white-space:nowrap}
.art-f{background:var(--bronze);color:var(--papier)}
.art-p{border:1px solid var(--ink);color:var(--ink)}
.art-n{background:var(--papier-tief);color:#5D584E;border:1px solid var(--linie)}
.art-a{border:1px solid var(--stein);color:var(--stein)}
.legende{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1.6rem;font-size:.82rem;color:var(--stein);align-items:center}
.legende .tag-art{justify-self:auto}
.fussnote{margin-top:1.5rem;font-size:.88rem;color:var(--stein);max-width:44rem}

/* --- Zahlen --- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.4rem 2rem;margin-top:3.2rem}
.zahl b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.05;color:var(--bronze-hell);font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:.4rem;font-size:.85rem;color:var(--dunkel-weich);letter-spacing:.03em}

/* --- Zitate / Geschichten --- */
.zitate{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2.6rem}
.zitat{position:relative;background:var(--karte);border:1px solid var(--linie);padding:1.9rem;display:flex;flex-direction:column;gap:1.3rem}
.zitat .beispiel-marke{position:static;width:max-content;order:-1}
.zitat p{font-family:var(--serif);font-size:1.18rem;line-height:1.45}
.zitat footer{display:flex;gap:.9rem;align-items:center;font-size:.85rem;color:var(--stein);margin-top:auto;border-left:2px solid var(--bronze);padding-left:.9rem;line-height:1.5}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--papier-tief);border:1px solid var(--linie);display:grid;place-items:center;font-family:var(--serif);color:var(--bronze);flex-shrink:0}
.ergebnis-band{margin-top:3.4rem;display:grid;gap:.65rem;max-width:52rem}
.ergebnis-band p{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,2rem);line-height:1.3}
.ergebnis-band .wurde{color:var(--bronze);font-style:italic}

/* --- Momente-Liste (Komfortzone) --- */
.momente{margin-top:2.4rem;border-top:1px solid var(--linie);max-width:46rem;list-style:none}
.momente li{padding-block:.95rem;border-bottom:1px solid var(--linie);font-family:var(--serif);font-size:1.15rem;line-height:1.45}
.momente li::before{content:"\00D7";color:var(--bronze);margin-right:.75rem}
.merkzeile{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.2;margin-top:2.4rem;max-width:26ch}

/* --- FAQ --- */
.faq{margin-top:2.2rem;border-top:1px solid var(--linie);max-width:52rem}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding-block:1.15rem;font-family:var(--serif);font-size:1.18rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);color:var(--bronze);font-size:1.5rem;line-height:1;transition:transform .25s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .antwort{padding:0 0 1.5rem;max-width:44rem;color:var(--text-weich)}
.faq .antwort p+p{margin-top:.8rem}

/* --- Hinweis-Kaesten --- */
.hinweis{margin-top:2.4rem;border:1px solid var(--linie);border-left:3px solid var(--bronze);background:var(--karte);padding:1.4rem 1.6rem;max-width:52rem;font-size:.95rem;color:var(--text-weich)}
.hinweis b{color:var(--ink)}
.sektion-dunkel .hinweis{background:var(--karte-dunkel);border-color:var(--linie-dunkel);border-left-color:var(--bronze-hell);color:var(--dunkel-prosa)}
.sektion-dunkel .hinweis b{color:var(--tiefe-text)}

/* --- Preis-Karte (Detailseite) --- */
.preis-karte{border:1px solid var(--linie);background:var(--karte);padding:2rem;max-width:30rem}
.preis-karte .betrag{font-family:var(--serif);font-size:2.6rem;line-height:1.1}
.preis-karte .betrag small{font-size:1rem;color:var(--stein);display:block;font-family:var(--grotesk)}
.preis-karte ul{list-style:none;margin-block:1.3rem;font-size:.95rem;color:var(--text-weich)}
.preis-karte li{padding-block:.4rem;border-bottom:1px solid var(--linie)}
.preis-flex{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-start;margin-top:2.5rem}
.preis-flex .hinweis{margin-top:0;flex:1;min-width:280px}

/* --- Listen-Doppel (Leistungen) --- */
.doppel{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;margin-top:2.4rem;max-width:56rem}
.doppel .block{border:1px solid var(--linie);background:var(--karte);padding:1.6rem}
.doppel h3{font-family:var(--grotesk);font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.doppel ul{list-style:none}
.doppel li{padding-block:.45rem;border-bottom:1px solid var(--linie);font-size:.97rem}
.doppel li:last-child{border-bottom:none}

/* --- Stationen (Maurice) --- */
.stationen{margin-top:2rem;list-style:none;max-width:34rem}
.stationen li{padding-block:.7rem;border-bottom:1px solid var(--linie);font-size:1.02rem}
.stationen li::before{content:"\00D7";color:var(--bronze);margin-right:.7rem;font-family:var(--serif)}
.zitat-modul{margin-top:3rem;padding-left:1.6rem;border-left:3px solid var(--bronze);font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);font-style:italic;line-height:1.4;max-width:38rem;color:var(--text-weich)}

/* --- Zweispalter --- */
.zweispalt{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:900px){.zweispalt{grid-template-columns:1fr}}

/* --- Fuss --- */
.fuss{background:var(--tiefe);color:var(--dunkel-weich);padding-block:4rem 2.5rem;font-size:.92rem}
.fuss a{color:var(--dunkel-prosa);text-decoration:none}
.fuss a:hover{color:var(--bronze-hell)}
.fuss-raster{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
@media(max-width:760px){.fuss-raster{grid-template-columns:1fr}}
.fuss .marke{color:var(--dunkel-hell);font-size:1.4rem}
.fuss-claim{margin-top:1.1rem;font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:var(--dunkel-prosa);max-width:24rem}
.fuss h4{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dunkel-weich);margin-bottom:1rem}
.fuss ul{list-style:none}
.fuss li{padding-block:.3rem}
.fuss-hinweis{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie-dunkel);font-size:.8rem;max-width:64rem;color:var(--dunkel-weich);line-height:1.6}
.fuss-unten{margin-top:1.5rem;font-size:.8rem;color:var(--dunkel-leise)}

/* --- Sticky-Leiste mobil --- */
.leiste{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--ink);color:var(--papier);display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.1rem;transform:translateY(110%);transition:transform .35s ease}
.leiste.sichtbar{transform:none}
.leiste .leiste-text{font-family:var(--serif);font-size:.98rem}
.leiste .leiste-text small{display:block;font-family:var(--grotesk);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dunkel-weich)}
.leiste .knopf{background:var(--papier);color:var(--ink);border-color:var(--papier);padding:.6rem 1.1rem;font-size:.85rem;white-space:nowrap}

/* --- Einblenden beim Scrollen --- */
/* Einblenden beim Scrollen. WICHTIG: Der unsichtbare Startzustand wird erst gesetzt,
   wenn das Skript laeuft (es setzt .js auf <html>). Ohne JavaScript bleibt alles
   sichtbar, sonst waere die Seite fuer jeden mit Skript-Blocker leer. */
.js .zeige{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .zeige.da{opacity:1;transform:none}

/* --- Zugangsseite --- */
.zugang-buehne{min-height:100dvh;display:grid;align-items:center;padding-block:3rem}
.zugang-karte{max-width:26rem;width:100%;text-align:center}
.zugang-karte h1{font-size:1.9rem;margin-block:1.2rem .6rem}
.zugang-karte p{color:var(--text-weich);font-size:.97rem}
.zugang-feld{margin-top:2.2rem;display:flex;gap:.7rem}
.zugang-feld input{width:10rem;text-align:center;font-family:var(--serif);font-size:1.6rem;letter-spacing:.45em;padding:.7rem .5rem .7rem .95rem;border:1px solid var(--linie);background:var(--karte);color:var(--ink);border-radius:2px}
.zugang-feld input:focus{outline:2px solid var(--bronze);outline-offset:2px;border-color:var(--bronze)}
.zugang-fehler{margin-top:1rem;color:var(--bronze);font-size:.9rem;min-height:1.3em}

/* --- Mobil --- */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-knopf{display:block}
  .kopf .knopf{display:none}
  .leiste{display:flex}
  body{padding-bottom:0}
  .tag-punkt{grid-template-columns:3.8rem 1fr}
  .tag-art{grid-column:2;justify-self:start;margin-top:.2rem}
  .fuss{padding-bottom:6rem}
}

/* --- Reduzierte Bewegung --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .zeige{opacity:1;transform:none;transition:none}
  .lade>*{animation:none}
  .ticker-spur{animation:none;white-space:normal;width:auto;flex-wrap:wrap}
  .paar,.paar-label{transition:none}
  .leiste{transition:none}
}

/* --- Druck --- */
@media print{.entwurf,.kopf,.leiste,.fuss{display:none}}

/* --- Echte Bilder (Nachtrag Echtdaten-Einbau) --- */
img.karte-bild{object-fit:cover;width:100%}
img.karte-bild-katalog{object-fit:contain;background:var(--papier-tief);padding:.6rem}
.foto-echt{display:block;width:100%;border:1px solid var(--linie);object-fit:cover}
.foto-echt.foto-hoch,.foto-echt.foto-quer,.foto-echt.foto-mittel{height:auto}
.bild-zeile{font-size:.82rem;color:var(--stein);font-family:var(--serif);font-style:italic;margin-top:.6rem}
.video-rahmen{position:relative;aspect-ratio:16/9;border:1px solid var(--linie);background:#0B0B0A;margin-top:2.4rem;max-width:56rem}
.video-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.zitat .video-rahmen{margin-top:0;border:none;aspect-ratio:16/10}

/* --- Berufe-Zeile (statisch, letztes Wort: Schichtarbeiter) --- */
.berufe-zeile{margin-top:3rem;padding-block:1.4rem;border-block:1px solid var(--linie);font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.8;color:var(--text-weich)}
.berufe-zeile .x{color:var(--bronze);font-style:italic;padding-inline:.3em}
.berufe-zeile b{font-weight:500;color:var(--ink)}

/* --- Momente-Mosaik --- */
.momente-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-top:2.6rem}
.momente-raster img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--linie);display:block}

/* --- Tagesprogramme (echte Masterminds, neutral ohne Kategorien) --- */
.programm{margin-top:2.4rem;border-top:1px solid var(--linie);max-width:52rem}
.programm details{border-bottom:1px solid var(--linie)}
.programm summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding-block:1.1rem;font-family:var(--serif);font-size:1.18rem}
.programm summary::-webkit-details-marker{display:none}
.programm summary::after{content:"+";font-family:var(--serif);color:var(--bronze);font-size:1.5rem;line-height:1;transition:transform .25s;flex-shrink:0}
.programm details[open] summary::after{transform:rotate(45deg)}
.programm-punkt{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-block:.5rem;font-size:.98rem;color:var(--text-weich)}
.programm-punkt b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-size:.88rem;letter-spacing:.02em}
.programm .tag-inhalt{padding-bottom:1.3rem}
@media(max-width:600px){.programm-punkt{grid-template-columns:6.4rem 1fr;gap:.7rem}}

/* --- Status-Ergaenzung --- */
.status-angekuendigt{background:var(--papier-tief);color:#5D584E;border:1px solid var(--linie)}

/* --- Zahlen-Fussnote --- */
.zahl-fussnote{margin-top:1.6rem;font-size:.82rem;color:var(--dunkel-weich);max-width:44rem}
.zahl-fussnote a{color:var(--dunkel-prosa)}

/* --- Wortchor-Link (Instagram, Nachtrag) --- */
.wortchor-link{position:relative;display:block;text-decoration:none}
.wortchor-link .foto-echt{aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.wortchor-gross{max-width:20rem;margin-top:0}
.wortchor-gross .foto-echt{aspect-ratio:9/16}
.wortchor-abspielen{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);background:rgba(23,22,20,.82);color:var(--papier);font-family:var(--grotesk);font-weight:600;font-size:.9rem;letter-spacing:.06em;padding:.75rem 1.4rem;border:1px solid rgba(247,244,238,.4);white-space:nowrap}
.wortchor-link:hover .wortchor-abspielen{background:var(--bronze)}

/* --- Archiv-Karten: einheitliche Katalog-Optik mit Logo-Overlay --- */
.archiv-bild{position:relative;overflow:hidden}
.archiv-bild .archiv-foto{width:100%;height:100%;object-fit:cover;display:block}
.archiv-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bild-schleier-oben) 40%,var(--bild-schleier-unten));pointer-events:none}
.archiv-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;max-width:130px;height:auto;z-index:2;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));pointer-events:none}

.wortchor-reihe{margin-top:2.8rem;align-items:center}
.wortchor-reihe .wortchor-gross{margin-inline:auto}

/* --- Video erst nach Klick laden --- */
.video-lade{position:relative;display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0B0B0A}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.video-lade:hover .wortchor-abspielen{background:var(--bronze)}

.zugang-inhalt{max-width:var(--breite)}
.zugang-inhalt .hero-titel{margin-top:1.2rem}
.zugang-feld input::placeholder{letter-spacing:.1em;font-size:1rem;font-family:var(--grotesk);color:var(--stein)}

/* --- Bild-Offensive (Maurice-Feedback 23.08.): Collage, Baender, Themen-Bilder --- */
.hero-oben{align-items:center}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hero-collage img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--linie);display:block}
.hero-collage img:nth-child(2){transform:translateY(1.2rem)}
.hero-collage img:nth-child(3){transform:translateY(-1.2rem)}
@media(max-width:900px){.hero-collage img:nth-child(2),.hero-collage img:nth-child(3){transform:none}.hero-collage{margin-top:1rem}}
.band-momente{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:2.8rem}
.band-momente img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--linie);display:block}
@media(max-width:700px){.band-momente{grid-template-columns:repeat(2,1fr)}}
.freunde-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;margin-top:2.8rem}
.freunde-band img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linie);display:block}
.zelle-bild{padding:0;display:flex;flex-direction:column}
.zelle-bild img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-bottom:1px solid var(--linie)}
.zelle-bild .zelle-text{padding:1.5rem}

/* ============================================================
   Umsetzung Maurice-Abgleich (24.08.2026)
   ============================================================ */

/* --- Zahlenleiste direkt unter dem Hero --- */
.zahlenleiste{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.6rem;border-top:1px solid var(--linie)}
.zahlenleiste b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.05;color:var(--bronze);font-variant-numeric:tabular-nums}
.zahlenleiste span{display:block;margin-top:.25rem;font-size:.82rem;color:var(--stein);letter-spacing:.03em;line-height:1.35}
@media(max-width:700px){.zahlenleiste{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* --- Nutzen-Raster (sechs Nutzen) --- */
.nutzen{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* --- Werte-Block --- */
.werte{margin-top:2.6rem;display:grid;gap:.9rem;max-width:52rem}
.werte p{font-size:1.02rem;color:var(--text-weich);padding-left:1rem;border-left:2px solid var(--linie)}
.werte b{color:var(--ink)}

/* --- Erfolgsgeschichten als Wischer --- */
.wischer{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,340px);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.2rem;margin-top:2.6rem;scrollbar-width:thin}
.wischer-karte{scroll-snap-align:start;background:var(--karte);border:1px solid var(--linie);display:flex;flex-direction:column}
.wischer-karte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--linie);display:block}
.wischer-text{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.wischer-text h3{font-size:1.28rem;line-height:1.25}
.wischer-text p:last-child{font-size:.97rem;color:var(--text-weich)}

/* --- Preis-Gegenüberstellung mit verpixeltem Anbieter --- */
.preis-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem;max-width:52rem}
@media(max-width:700px){.preis-vergleich{grid-template-columns:1fr}}
.preis-fremd,.preis-wir{border:1px solid var(--linie);padding:1.8rem;display:flex;flex-direction:column;gap:.4rem}
.preis-fremd{background:var(--papier-tief);color:var(--stein)}
.preis-wir{background:var(--ink);color:var(--papier);border-color:var(--ink)}
.preis-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.preis-verpixelt{font-family:var(--serif);font-size:1.5rem;filter:blur(6px);user-select:none;margin-block:.3rem}
.preis-summe{font-family:var(--serif);font-size:1.7rem;line-height:1.15}
.preis-summe.gross{font-size:clamp(2rem,4vw,2.8rem);color:var(--bronze-hell)}
.preis-dauer{font-size:.92rem;opacity:.85}

/* --- Film-Galerie --- */
.filme-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:2.6rem}
.film .video-rahmen{margin-top:0;max-width:none;aspect-ratio:16/10}
.film figcaption{margin-top:.7rem;font-size:.88rem;color:var(--stein);font-family:var(--serif);font-style:italic}

/* --- Hero-Raster: Bilder oben rechts (Desktop) und direkt nach der Headline (mobil) --- */
.hero-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.8rem,3.5vw,3rem);row-gap:1rem;align-items:start}
.hero-raster .hero-kicker{grid-column:1;grid-row:1;margin-bottom:.9rem}
.hero-raster .hero-kopf{grid-column:1;grid-row:2}
.hero-raster .hero-collage{grid-column:2;grid-row:2 / span 2;align-self:stretch;height:100%;grid-template-rows:1fr 1fr}
.hero-raster .hero-collage img{aspect-ratio:auto;height:100%;transform:none}
.hero-raster .hero-aktion{grid-column:1;grid-row:3;align-self:start}
.hero-raster .hero-titel{font-size:clamp(2.4rem,5vw,4.6rem);max-width:14ch}
.hero-raster .hero-sub{margin-top:1.5rem}
.hero-raster .cta-reihe{margin-top:0}
@media(max-width:900px){
  .hero-raster{grid-template-columns:1fr;row-gap:1.3rem}
  .hero-raster .hero-kopf{display:contents}
  .hero-raster .hero-kicker,.hero-raster .hero-titel,.hero-raster .hero-sub,.hero-raster .hero-aktion,.hero-raster .hero-collage{grid-column:1;grid-row:auto}
  .hero-raster .hero-kicker{order:1;margin-bottom:0}
  .hero-raster .hero-titel{order:2}
  .hero-raster .hero-collage{order:3;height:auto;grid-template-rows:auto auto}
  .hero-raster .hero-collage img{aspect-ratio:1;height:auto}
  .hero-raster .hero-sub{order:4;margin-top:0}
  .hero-raster .hero-aktion{order:5}

}
/* Flache Fenster: weniger Luft, damit die Bilder ohne Scrollen sichtbar sind */
@media(min-width:900px) and (max-height:950px){
  .hero{padding-block:2.2rem clamp(2rem,5vh,3.5rem)}
  .hero-raster .hero-titel{font-size:clamp(2.2rem,4vw,3.6rem)}
}

/* --- Nutzen-Karten mit Bild: mobil kompakter, damit sechs Karten tragbar bleiben --- */
.nutzen .zelle-bild img{aspect-ratio:16/10}
@media(max-width:900px){
  .nutzen{grid-template-columns:1fr}
  .nutzen .zelle-bild img{aspect-ratio:16/9}
  .nutzen .zelle-bild .zelle-text{padding:1.2rem 1.4rem 1.4rem}
}

/* --- Bewegtes Bild im Hero: langsame Ueberblendung mit sanftem Zoom --- */
.hero-film{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--linie);background:var(--papier-tief)}
.hero-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero-film img.an{opacity:1;animation:filmzoom 6s ease-out forwards}
@keyframes filmzoom{from{transform:scale(1.0)}to{transform:scale(1.07)}}
@media(max-width:900px){.hero-film{aspect-ratio:16/9;margin-block:1.2rem 0}}
@media (prefers-reduced-motion: reduce){
  .hero-film img.an{animation:none}
  .hero-film img{transition:none}
}

.formate-film{margin-top:2rem;max-width:34rem}
@media(max-width:900px){.formate-film{margin-top:1.4rem;max-width:none}}

.hero-raster .cta-reihe{gap:.8rem}
@media(min-width:901px){
  .hero-raster .hero-aktion .knopf{padding-inline:1.2rem;font-size:.9rem}
  .hero-raster .hero-aktion .cta-reihe{flex-wrap:nowrap}
}

.hero-band .bild-zeile{margin-top:.7rem}
@media(max-width:900px){.hero-raster .hero-aktion .cta-reihe{margin-top:0}}

/* --- Kacheln: einzeln wechselnd, neues Bild wischt herein, sichtbare Bilder driften --- */
.hero-collage .kachel{position:relative;overflow:hidden;border:1px solid var(--linie);background:var(--papier-tief);height:100%}
.hero-collage .kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;aspect-ratio:auto;will-change:transform,clip-path}
.hero-collage .kachel img.an{opacity:1;animation:kacheldrift 16s linear forwards}
.hero-collage .kachel img.rein-unten{z-index:3;animation:kacheldrift 16s linear forwards, wisch-unten .55s cubic-bezier(.65,0,.25,1)}
.hero-collage .kachel img.rein-oben{z-index:3;animation:kacheldrift 16s linear forwards, wisch-oben .55s cubic-bezier(.65,0,.25,1)}
.hero-collage .kachel img.rein-links{z-index:3;animation:kacheldrift 16s linear forwards, wisch-links .55s cubic-bezier(.65,0,.25,1)}
.hero-collage .kachel img.rein-rechts{z-index:3;animation:kacheldrift 16s linear forwards, wisch-rechts .55s cubic-bezier(.65,0,.25,1)}
@keyframes kacheldrift{from{transform:scale(1.01)}to{transform:scale(1.13)}}
@keyframes wisch-unten{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wisch-oben{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wisch-links{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wisch-rechts{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:900px){
  .hero-raster .hero-collage .kachel{aspect-ratio:1;height:auto}
}
@media (prefers-reduced-motion: reduce){
  .hero-collage .kachel img.an,
  .hero-collage .kachel img[class*="rein-"]{animation:none}
}

/* Zwei gleichfarbige Sektionen hintereinander: nicht doppelt Luft --- */
.sektion-zart + .sektion-zart,.sektion:not([class*="zart"]):not([class*="dunkel"]) + .sektion:not([class*="zart"]):not([class*="dunkel"]){padding-top:clamp(1.2rem,2.5vw,2.2rem)}
/* Bild in seinem natuerlichen Format --- */
.foto-voll{aspect-ratio:auto;height:auto}

/* --- Zitat-Wischer --- */
.stimmen-wischer{grid-auto-columns:minmax(280px,330px)}
.stimme{scroll-snap-align:start;background:var(--karte);border:1px solid var(--linie);padding:1.7rem;display:flex;flex-direction:column;gap:1.2rem}
.stimme-text{font-family:var(--serif);font-size:1.06rem;line-height:1.5;color:var(--ink)}
.stimme footer{margin-top:auto;border-left:2px solid var(--bronze);padding-left:.85rem;display:grid;gap:.15rem}
.stimme-name{font-weight:600;font-size:.92rem}
.stimme-meta{font-size:.82rem;color:var(--stein)}

/* Abspiel-Knopf bei den Filmen mittig statt am unteren Rand */
.film .wortchor-abspielen{bottom:auto;top:50%;transform:translate(-50%,-50%)}
.film .video-rahmen{aspect-ratio:16/9}

/* --- Momente-Galerie mit Großansicht --- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:2.6rem}
.galerie-kachel{padding:0;border:1px solid var(--linie);background:var(--papier-tief);cursor:zoom-in;overflow:hidden;display:block}
.galerie-kachel img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s ease}
.galerie-kachel:hover img{transform:scale(1.06)}
@media(max-width:600px){.galerie{grid-template-columns:repeat(3,1fr);gap:.4rem}}

.lichtkasten{position:fixed;inset:0;z-index:200;background:rgba(15,14,12,.94);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lichtkasten[hidden]{display:none}
.lichtkasten figure{max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.lichtkasten img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid rgba(247,244,238,.18)}
.lichtkasten figcaption{color:var(--dunkel-prosa);font-family:var(--serif);font-style:italic;font-size:.95rem;text-align:center}
.licht-zu{position:absolute;top:1.2rem;right:1.2rem;background:none;border:1px solid rgba(247,244,238,.45);color:var(--papier);font:inherit;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .9rem;cursor:pointer}
.licht-zu:hover{background:var(--bronze);border-color:var(--bronze)}
.licht-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--papier);font-size:3rem;line-height:1;padding:.5rem 1rem;cursor:pointer;opacity:.75}
.licht-nav:hover{opacity:1;color:var(--bronze-hell)}
.licht-vor{left:.5rem}
.licht-nach{right:.5rem}
@media(max-width:600px){.licht-nav{font-size:2.2rem;padding:.3rem .5rem}}

/* Zwei Buchcover nebeneinander (Maurice-Seite, Wunsch Maurice 31.08.2026) */
.buecher{display:flex;gap:1.2rem;align-items:flex-start}
.buecher figure{margin:0;flex:1 1 0}
.buecher .foto-echt{aspect-ratio:auto;height:auto;object-fit:contain}
.buecher figcaption{font-size:.82rem;color:var(--stein);font-family:var(--serif);font-style:italic;margin-top:.6rem}
@media (max-width:640px){.buecher{gap:.8rem}}

/* Urheberzeile im Fuss (Wunsch Luca 11.09.2026, gehoert dauerhaft dorthin
   und wird spaeter NICHT ueber einen Redaktionsbereich aenderbar sein) */
.fuss-urheber{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fuss-urheber:hover{color:var(--bronze-hell)}

/* Hochkant-Video (Zusammenschnitt vom Handy) */
.video-rahmen.video-hoch{aspect-ratio:auto;max-width:360px;margin:0 auto;background:#000;border-radius:10px;overflow:hidden}
.video-rahmen.video-hoch video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}

/* --- Akzent in dunklen Flaechen ---
   Das dunkle Rot traegt auf Schwarz zu wenig. In allen dunklen Flaechen steht
   deshalb ueberall dieselbe Variable, nur mit dem hellen Wert belegt. Damit
   stimmen Textlinks, Trennstriche und das x-Motiv, ohne eine Regel zu doppeln. */
.sektion-dunkel,.fuss,.lichtkasten{--bronze:var(--bronze-hell)}

/* --- Dunkle Welten: Stellen, an denen Schrift- und Grundfarbe als Flaeche dienen ---
   In den hellen Welten ist --ink Schwarz und damit gut als dunkles Band. In den
   dunklen Welten waere dasselbe Band weiss. Diese Regeln halten Baender, Knoepfe
   in dunklen Sektionen und kleine Etiketten dort lesbar. */
html[data-grund="dunkel"] .entwurf{background:var(--papier-tief);border-bottom:1px solid var(--linie)}
html[data-grund="dunkel"] .leiste{background:var(--papier-tief);color:var(--ink);border-top:1px solid var(--linie)}
html[data-grund="dunkel"] .leiste .knopf{background:var(--ink);color:var(--papier);border-color:var(--ink)}
html[data-grund="dunkel"] .sektion-dunkel .knopf{background:var(--ink);color:var(--papier);border-color:var(--ink)}
html[data-grund="dunkel"] .sektion-dunkel .knopf:hover{background:var(--bronze-hell);border-color:var(--bronze-hell);color:var(--papier)}
html[data-grund="dunkel"] .sektion-dunkel .knopf-leise{background:transparent;color:var(--tiefe-text);border-color:var(--tiefe-text)}
html[data-grund="dunkel"] .sektion-dunkel,
html[data-grund="dunkel"] .fuss{border-top:1px solid var(--linie)}
html[data-grund="dunkel"] .preis-wir{background:var(--karte);color:var(--ink);border:1px solid var(--bronze)}
html[data-grund="dunkel"] .pille,
html[data-grund="dunkel"] .status-warteliste,
html[data-grund="dunkel"] .status-angekuendigt,
html[data-grund="dunkel"] .art-n{color:var(--text-weich)}
html[data-grund="dunkel"] .wortchor-abspielen,
html[data-grund="dunkel"] .licht-zu,
html[data-grund="dunkel"] .licht-nav{color:#F5F5F5}
/* Ferrari-Rot ist zu dunkel fuer schwarze Schrift darauf: dort weiss */
html[data-stil="schwarz-rot"] .knopf:hover,
html[data-stil="schwarz-rot"] .sektion-dunkel .knopf:hover,
html[data-stil="schwarz-rot"] .status-wenige,
html[data-stil="schwarz-rot"] .art-f{color:#FFFFFF}
html[data-stil="schwarz-rot"] ::selection{color:#FFFFFF}
/* Ohne Farbakzent traegt ein weisser Hover-Grund keinen Unterschied mehr, also dezent absetzen */
html[data-stil="schwarz-pur"] .knopf:hover{background:#D9D9D9;border-color:#D9D9D9}

/* --- Farbwelt-Schalter: Vergleichshilfe, faellt zum Livegang weg ---
   Bewusst in allen Welten gleich dunkel, damit er nicht mit der Seite verwechselt wird. */
.stilschalter{position:fixed;left:1rem;bottom:1rem;z-index:80;font-family:var(--grotesk);color:#D4D4D4}
.stil-auf{display:flex;align-items:center;gap:.55rem;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:#141414;color:#D4D4D4;border:1px solid #3A3A3A;padding:.5rem .8rem .5rem .55rem;border-radius:999px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:.9;transition:opacity .2s}
.stil-auf:hover,.stil-auf[aria-expanded="true"]{opacity:1;border-color:#6A6A6A}
.stil-muster{display:inline-block;width:1.05rem;height:1.05rem;border-radius:50%;flex-shrink:0;border:1px solid #5A5A5A;background:linear-gradient(135deg,var(--g,var(--papier)) 50%,var(--a,var(--bronze)) 50%)}
.stil-liste{position:absolute;left:0;bottom:calc(100% + .5rem);min-width:15.5rem;background:#141414;border:1px solid #3A3A3A;border-radius:6px;padding:.45rem;box-shadow:0 12px 40px rgba(0,0,0,.45);display:grid;gap:.1rem}
.stil-liste[hidden]{display:none}
.stil-gruppe{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A8A8A;padding:.55rem .6rem .3rem}
.stil-liste button{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;font:inherit;font-size:.85rem;font-weight:500;background:none;color:#E6E6E6;border:1px solid transparent;border-radius:4px;padding:.5rem .6rem;cursor:pointer}
.stil-liste button:hover{background:#1F1F1F}
.stil-liste button.an{border-color:#6A6A6A;background:#1F1F1F;color:#FFFFFF}
.stil-liste button.an::after{content:"\2713";margin-left:auto;font-size:.8rem;color:#FFFFFF}
@media (max-width:900px){.stilschalter{left:.6rem;bottom:4.9rem}}
@media print{.stilschalter{display:none}}