/* youbooth Marketingseite.
   Warmes Papier, grosse Typo, Amber als Flaeche, Haarlinien statt Kartenteppich.
   Keine Fremdaufrufe, Schriften vom System, kein JavaScript: die Bedienelemente
   laufen ueber versteckte Radio-Eingaben und Geschwister-Selektoren. Faellt CSS
   aus, steht jeder Abschnitt sichtbar untereinander. */
/* Die Hausschriften liegen auf dem eigenen Server — keine Fremdaufrufe.
   Schibsted Grotesk und IBM Plex Mono stehen unter der SIL Open Font
   License 1.1; die Lizenztexte liegen in assets/schrift/. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-500.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;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-400.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: 500;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-500.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: 700;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-700.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: 800;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-800-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-800.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;
}
:root{
/* Showroom bei Nacht: dunkler Grund, Amber als einziges Licht. Die alten
   Namen bleiben, damit jede Komponente mitzieht — papier ist jetzt der
   dunkle Grund, tinte die helle Schrift. */
--papier:#0A0A0C;--papier2:#101014;--karte:#131316;--tinte:#F5F2EC;--tinte2:#C7C2B8;--tinte3:#8F897E;
--linie:#26262A;--linie2:#3A3A40;--amber:#F2B23E;--amber2:#FFD27A;--amber-tinte:#F2B23E;
--gruen:#7AD6A8;--nacht:#0A0A0C;
--sans:"Schibsted Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--amber-tinte)}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.06}
h1{font-size:clamp(40px,7.2vw,104px);line-height:.96;letter-spacing:-.045em}
h2{font-size:clamp(28px,4.2vw,46px)}
h3{font-size:20px;letter-spacing:-.012em;line-height:1.3}
h4{font-size:15px;font-weight:700;letter-spacing:0;line-height:1.4}
p{margin:0}
img{max-width:100%}
.wrap{max-width:1152px;margin:0 auto;padding:0 24px}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ikon{width:22px;height:22px;stroke:var(--amber-tinte);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.ikon.hell{stroke:var(--amber)}

/* ---------- Kopf ---------- */
.streifen{background:var(--nacht);color:rgba(250,247,242,.62)}
.streifen .wrap{min-height:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.streifen b{color:var(--amber);font-weight:700}
.streifen .rechts{margin-left:auto;color:rgba(250,247,242,.5)}
/* Unter 480 px brach die Zeile in vier Zeilen und nahm rund 100 der 844 px,
   bevor Logo und Menue kamen (gemessen auf 390 px). Sie steht in der
   Fusszeile jeder Seite noch einmal. */
@media (max-width:480px){.streifen{display:none}}
.kopf{position:sticky;top:0;z-index:30;background:rgba(10,10,12,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.kopf .wrap{min-height:74px;display:flex;align-items:center;gap:clamp(16px,3vw,34px)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.04em;flex:none}
.logo:hover{color:inherit}
nav.haupt{display:flex;gap:clamp(14px,2vw,26px);align-self:stretch;align-items:center;flex-wrap:wrap}
nav.haupt a{position:relative;font-size:14.5px;font-weight:600;color:var(--tinte2);align-self:stretch;display:flex;align-items:center}
nav.haupt a:hover{color:var(--tinte)}
nav.haupt a.an{color:var(--tinte);font-weight:700}
nav.haupt a.an::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--amber)}
/* Untermenues im Kopf. Ohne Skript: beim Zeigen (:hover) und beim
   Tastaturfokus (:focus-within) klappt die Gruppe auf. Die Links sind auch
   zu, wenn die Gruppe geschlossen ist, im Quelltext vorhanden — Suchmaschinen
   und Vorleseprogramme finden sie, ohne dass jemand zeigen muss.

   Der Gruppenname ist selbst ein Link auf die Uebersichtsseite: wer nur
   tippt statt zu zeigen, landet nicht im Nichts. */
nav.haupt .gruppe{position:relative;align-self:stretch;display:flex;align-items:center}
nav.haupt .gruppe>a{gap:6px}
nav.haupt .gruppe>a b{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;display:inline-block;opacity:.6}
nav.haupt .gruppe.an>a{color:var(--tinte);font-weight:700}
nav.haupt .gruppe.an>a::after{content:"";position:absolute;left:0;right:14px;bottom:-1px;height:3px;background:var(--amber)}
nav.haupt .unter{position:absolute;top:100%;left:-14px;min-width:230px;background:var(--papier2);
  border:1px solid var(--linie);border-radius:0 0 14px 14px;border-top:0;padding:8px;
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
nav.haupt .gruppe:hover .unter,nav.haupt .gruppe:focus-within .unter{opacity:1;visibility:visible;transform:none}
nav.haupt .unter a{padding:10px 12px;border-radius:9px;font-size:14.5px;font-weight:600;align-self:auto;display:block}
nav.haupt .unter a:hover{background:var(--karte);color:var(--tinte)}
nav.haupt .unter a.an{color:var(--amber)}
nav.haupt .unter a.an::after{display:none}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Klappmenue fuer schmale Fenster — <details> braucht kein Skript */
.menue{display:none;margin-left:auto}
.menue summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:9px 0}
.menue summary::-webkit-details-marker{display:none}
.menue summary i{width:20px;height:2px;background:var(--tinte);position:relative;display:block}
.menue summary i::before,.menue summary i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--tinte)}
.menue summary i::before{top:-6px}.menue summary i::after{top:6px}
.menue .liste{position:absolute;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--linie);padding:8px 24px 20px;display:flex;flex-direction:column;gap:2px;/* Sechsundzwanzig Links sind hoeher als jedes Handy. Die Liste scrollt in sich, statt sich ueber die halbe Seite zu legen. */max-height:calc(100vh - 74px);overflow-y:auto;overscroll-behavior:contain}
.menue .liste b.gr{display:block;padding:14px 0 4px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte3);font-weight:800}
.menue .liste b.gr:first-child{padding-top:6px}
.menue .liste a{padding:11px 0;font-weight:600;border-bottom:1px solid var(--linie)}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border-radius:12px;background:var(--amber);color:#141210;font-weight:800;font-size:15px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.knopf:hover{background:var(--amber2);color:#141210}
.knopf.hell{background:transparent;color:var(--tinte);border:1.5px solid rgba(245,242,236,.28)}
.knopf.hell:hover{background:rgba(245,242,236,.07);color:var(--tinte)}
.knopf.amber{background:var(--amber);color:#141210}
.knopf.amber:hover{background:var(--amber2);color:#141210}
/* Der dunkle Knopf lebt nur noch auf Amber-Flaechen. */
.knopf.nachtknopf{background:#0A0A0C;color:#F5F2EC}
.knopf.nachtknopf:hover{background:#1A1A1E;color:#F5F2EC}
.knopf.geist{background:transparent;color:#FAF7F2;border:1px solid rgba(250,247,242,.28)}
.knopf.geist:hover{background:rgba(250,247,242,.08);color:#FAF7F2}
.knopf.gross{min-height:54px;padding:0 28px;font-size:16.5px}

/* ---------- Abschnitte ---------- */
section{padding:clamp(56px,7vw,96px) 0}
section.eng{padding:clamp(44px,5vw,68px) 0}
section.kopfnah{padding-top:clamp(40px,5vw,72px)}
.dunkel{background:var(--nacht);color:#FAF7F2}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#FAF7F2}
.dunkel p{color:rgba(250,247,242,.68)}
.papier2{background:var(--papier2)}
.marke-zeile{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.marke-zeile .strich{height:1px;flex:1;min-width:40px;background:var(--linie2)}
.dunkel .marke-zeile .strich{background:rgba(250,247,242,.16)}
.kicker{color:var(--amber-tinte);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.dunkel .kicker{color:var(--amber)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--tinte2);max-width:58ch}
.dunkel .lead{color:rgba(250,247,242,.72)}
.zitat{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.28;letter-spacing:-.015em;font-weight:400}

/* ---------- Held ---------- */
.held{position:relative;background:var(--nacht);color:#FAF7F2;padding:clamp(48px,6vw,80px) 0 clamp(86px,8vw,120px);overflow:hidden}
/* Der Lichtschein ist der Blitz der Box im dunklen Saal — Produktbild,
   kein Farbverlauf um seiner selbst willen. Er liegt hinter dem Inhalt. */
.held::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 620px at 74% 44%,rgba(242,178,62,.20),transparent 62%),radial-gradient(700px 520px at 6% 108%,rgba(242,178,62,.07),transparent 60%)}
.held .wrap{position:relative}
.held .obenzeile{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.held .obenzeile .strich{height:1px;flex:1;min-width:30px;background:rgba(250,247,242,.16)}
.held .unten{display:grid;grid-template-columns:1fr minmax(320px,596px);gap:clamp(28px,4vw,56px);align-items:end;margin-top:44px}
.held .links{display:flex;flex-direction:column;gap:26px}
.held .lead{color:rgba(250,247,242,.72);max-width:44ch}
.held .cta{display:flex;gap:10px;flex-wrap:wrap}
.held .notiz{font-size:13.5px;color:rgba(250,247,242,.5);line-height:1.5}
.geraetplatz{position:relative}
.geraet{border-radius:14px;background:#000;aspect-ratio:16/10;overflow:hidden;position:relative;z-index:2;border:1px solid rgba(250,247,242,.14);box-shadow:0 40px 90px -34px rgba(0,0,0,.95)}
/* Zwei gedruckte Streifen daneben: das Ergebnis liegt neben dem Geraet,
   nicht nur in der Ueberschrift. Sie tragen keine erfundenen Fotos,
   sondern getoente Flaechen wie die Vorlagen-Vorschau. */
.streifenpaar{position:absolute;inset:0;z-index:1;pointer-events:none}
.streifenpaar .streifenbild{position:absolute;width:112px;background:#FBF8F2;border-radius:6px;padding:8px 8px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 26px 60px -18px rgba(0,0,0,.75)}
.streifenpaar .streifenbild i{display:block;height:58px;border-radius:3px}
.streifenpaar .streifenbild b{font-family:var(--mono);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,236,.55);text-align:center;font-weight:500}
/* Beide Streifen schauen UNTER dem Geraet hervor — links darf nichts in
   die Textspalte ragen, sonst steht das Bild vor dem Satz. */
.streifenpaar .links{left:-38px;bottom:4px;transform:rotate(-7deg)}
.streifenpaar .rechts{right:-30px;bottom:-26px;transform:rotate(6deg)}
@media (max-width:980px){.streifenpaar{display:none}}
/* Die Booth ist fuer einen Fotobox-Vollbildschirm gebaut: bei Fenstergroesse
   waeren Schrift und Knopf riesig. Darum zeichnet sie in Boxgroesse (1440
   Punkte breit) und wird auf die Fensterbreite verkleinert — so sieht man den
   echten Bildschirm, nur aus Entfernung. cqw misst die Breite des Rahmens. */
.geraet iframe{width:1490px;height:931px;border:0;display:block;
transform:scale(.4);transform-origin:top left}
/* Einspaltig ist der Rahmen breiter als 596 Punkte — dort zeichnet die Booth
   wieder in ihrer eigenen Groesse. */
@media (max-width:980px){.geraet iframe{width:100%;height:100%;transform:none}}
.geraet img{width:100%;height:100%;border:0;display:block;object-fit:cover}
/* Das Etikett sitzt IM Bild oben links, wie an der laufenden Box. */
.geraet .livemarke{position:absolute;top:14px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border-radius:999px;background:rgba(11,11,13,.72);font-family:var(--mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.86);pointer-events:none}
.geraet .livemarke i{width:7px;height:7px;border-radius:50%;background:#E8746A;flex:none}
/* Die Selbstpruefung schwebt an der Ecke — sie zeigt, was die Box ohnehin meldet. */
.pruefkarte{position:absolute;right:-22px;top:-26px;z-index:4;display:flex;flex-direction:column;gap:7px;
padding:14px 16px;border-radius:12px;background:rgba(19,19,22,.94);border:1px solid rgba(250,247,242,.14);
box-shadow:0 24px 50px -18px rgba(0,0,0,.8);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pruefkarte span{display:flex;justify-content:space-between;gap:22px}
.pruefkarte b{font-weight:400;color:rgba(250,247,242,.55)}
.pruefkarte i{font-style:normal}
.pruefkarte .gut{color:#7AD6A8}.pruefkarte .wartet{color:var(--amber)}
@media (max-width:860px){.pruefkarte{display:none}}

/* ---------- Beweiszeile im Held ---------- */
/* Eine schmale Zeile statt einer eigenen Flaeche: die Zahlen sind Beleg,
   nicht Werbung. Sie stehen am Fuss der dunklen Buehne. */
.beweis{margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid rgba(250,247,242,.14);
display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.62)}
.beweis i{width:3px;height:3px;border-radius:50%;background:rgba(250,247,242,.28);display:block}
.beweis .hell{color:var(--amber);margin-left:auto}
@media (max-width:760px){.beweis .hell{margin-left:0}}

/* ---------- Zahlenband ---------- */
.zahlen{background:var(--amber);color:#141210}
.zahlen .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px;padding-top:40px;padding-bottom:40px}
.zahl b{display:block;font-size:clamp(38px,4.4vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1}
.zahl span{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,12,.66);line-height:1.5}

/* ---------- Zweispalter und Strichlisten ---------- */
.spalter{display:grid;grid-template-columns:296px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.spalter .merk{display:flex;flex-direction:column;gap:18px}
.spalter .merk p{font-size:15px;color:var(--tinte3);line-height:1.55}
.dunkel .spalter .merk p{color:rgba(250,247,242,.5)}
.striche{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px)}
.striche.eins{grid-template-columns:1fr}
.strich-eintrag{display:grid;grid-template-columns:22px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--linie)}
.strich-eintrag.ohne{grid-template-columns:1fr}
.dunkel .strich-eintrag{border-top-color:rgba(250,247,242,.14)}
.strich-eintrag p{font-size:15px;color:var(--tinte2);line-height:1.55;margin-top:6px}
.dunkel .strich-eintrag p{color:rgba(250,247,242,.6)}
.strich-eintrag code{font-family:var(--mono);font-size:13.5px}

/* ---------- Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
.schritt{padding:26px 0;border-top:1px solid rgba(250,247,242,.16)}
.schritt .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--amber);display:block;margin-bottom:14px}
.schritt p{font-size:14.5px;color:rgba(250,247,242,.6);margin-top:8px;line-height:1.55}
.schritt code{font-family:var(--mono);font-size:12.5px;color:#FAF7F2}

/* ---------- Kennzahlen ---------- */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 24px;margin-top:48px}
.kennzahlen > div{padding:26px 0;border-top:2px solid var(--linie2)}
.kennzahlen > div:first-child{border-top-color:var(--tinte)}
.kennzahlen b{display:block;font-size:clamp(40px,4.8vw,56px);font-weight:800;letter-spacing:-.045em;line-height:1}
.kennzahlen strong{display:block;margin-top:12px;font-size:15px;font-weight:700}
.kennzahlen p{font-size:14px;color:var(--tinte3);margin-top:5px;line-height:1.5}

/* ---------- Wahl: versteckte Radios steuern Schiene und Tafeln ---------- */
.wahl{position:relative}
.wahl > input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.wahl > input:focus-visible + input,.wahl > input:focus-visible{outline:0}
.rail{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.rail label{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--linie);font-size:15px;font-weight:600;color:var(--tinte2);cursor:pointer;transition:transform .12s,color .12s}
.rail label:hover{color:var(--tinte);transform:translateX(5px)}
.rail label .balken{width:4px;height:20px;border-radius:2px;background:var(--linie2);flex:none;transition:background .16s}
.rail label .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinte3);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linie2);background:var(--karte);font-size:14px;font-weight:600;color:var(--tinte2);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.chips label:hover{border-color:var(--tinte3)}
.segmente{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--papier2);border:1px solid var(--linie);flex-wrap:wrap}
.segmente label{min-height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--tinte2);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.segmente label:hover{color:var(--tinte)}
.segmente .n{font-family:var(--mono);font-size:10.5px;opacity:.6}
.tafeln > *{display:none}

/* ---------- Tafeln ---------- */
.tafel{background:var(--karte);border:1px solid var(--linie);border-radius:4px}
.gtafel{padding:clamp(22px,3vw,30px);flex-direction:column;gap:22px}
.gtafel .oben{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gtafel .oben h3{font-size:clamp(21px,2.4vw,26px)}
.gtafel .reiter{display:flex;flex-wrap:wrap;gap:6px}
.gtafel .reiter span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte3);border:1px solid var(--linie);border-radius:3px;padding:3px 8px}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 32px}
.karten h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-tinte);margin-bottom:10px}
.karten ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.karten li{font-size:14px;color:var(--tinte2);line-height:1.4;display:flex;gap:9px}
.karten li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--linie2);flex:none;margin-top:7px}
.mtafel{padding:clamp(22px,3vw,28px);flex-direction:column;gap:16px;min-height:300px}
.mtafel h3{font-size:clamp(24px,3vw,32px)}
.mtafel p{font-size:16px;color:var(--tinte2);line-height:1.55}
.mtafel .nr{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-tinte)}
.skizze{margin-top:auto;background:var(--papier2);border-radius:3px;padding:12px;display:grid;gap:6px;height:132px}
.skizze i{display:block;background:var(--linie2);border-radius:2px}

/* ---------- Aufklapper ---------- */
.aufklapp{border-top:1px solid var(--linie)}
.aufklapp details{border-bottom:1px solid var(--linie)}
.aufklapp summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;padding:22px 0;font-size:clamp(17px,2vw,20px);font-weight:700;letter-spacing:-.018em;line-height:1.3}
.aufklapp summary::-webkit-details-marker{display:none}
.aufklapp summary .zeichen{margin-left:auto;font-family:var(--mono);font-size:22px;color:var(--amber-tinte);line-height:1.1;flex:none}
.aufklapp details[open] summary .zeichen::before{content:"–"}
.aufklapp summary .zeichen::before{content:"+"}
.aufklapp .art{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte3);margin-bottom:8px;font-weight:600}
.aufklapp .antwort{padding:0 clamp(0px,6vw,60px) 26px 0;font-size:15.5px;color:var(--tinte2);line-height:1.65}
.aufklapp .antwort code{font-family:var(--mono);font-size:14px;background:var(--papier2);padding:2px 7px;border-radius:3px;color:var(--tinte)}

/* ---------- Wertepaare ---------- */
.paare{display:flex;flex-direction:column;margin:0}
.paar{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid var(--linie);font-size:14.5px;align-items:baseline}
.paar:first-child{border-top:0}
.paar dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte3)}
.paar dd{margin:0}
/* Kein nowrap: in der schmalen zweiten Spalte lief der Standardwert sonst rechts
   aus dem Kasten und wurde vom uebergeordneten overflow abgeschnitten. */
.paar .sub,.tiefe .sub{font-family:var(--mono);font-size:11.5px;color:var(--tinte3);margin-left:10px;overflow-wrap:anywhere}

/* ---------- Welt-Vorschau ---------- */
.weltwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.weltwahl label{border-radius:5px;padding:16px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--linie);cursor:pointer;transition:transform .16s,box-shadow .16s}
.weltwahl label:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(11,11,13,.5)}
.weltwahl label b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.weltwahl .punkte{display:flex;gap:5px}
.weltwahl .punkte i{width:20px;height:6px;border-radius:3px;display:block}
.weltwahl .wo{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;display:block;margin-top:2px}
/* Kein display hier: das setzt die Wahl-Regel weiter unten. Sonst
   ueberschriebe diese spaetere Regel das Ausblenden der Tafeln. */
.buehne{flex-direction:column;gap:14px}
.buehne .unterreihe{display:grid;grid-template-columns:minmax(150px,196px) minmax(200px,300px);gap:14px;align-items:start}
.bschirm{position:relative;overflow:hidden;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;aspect-ratio:16/10}
.bschirm .tint{position:absolute;inset:0;pointer-events:none}
.bschirm .tint i{position:absolute;border-radius:50%;filter:blur(34px)}
.bschirm > *{position:relative}
.bkopf{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.bkopf .rechts{margin-left:auto}
.bmitte{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;justify-content:center;flex:1}
.bring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:800;letter-spacing:-.04em}
.bwort{font-size:30px;font-weight:800;letter-spacing:-.03em}
.bbalken{width:170px;height:8px;border-radius:4px;overflow:hidden}
.bbalken i{display:block;height:100%;width:64%;border-radius:4px}
.btitel{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.03em}
.bfuss{display:flex;align-items:center;gap:12px}
.bknopf{min-height:38px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;font-weight:700;font-size:14px}
.battract{display:flex;gap:6px;margin-left:auto}
.battract i{width:34px;height:24px;border-radius:3px;display:block}
.blatt{border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 28px -18px rgba(11,11,13,.55)}
.blatt .bilder{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.blatt .bilder i{display:block;aspect-ratio:4/3;border-radius:2px}
.blatt .zeile{display:flex;align-items:center;gap:8px}
.blatt .zeile b{font-size:11px;font-weight:800;letter-spacing:-.01em}
.blatt .qr{width:22px;height:22px;margin-left:auto;border-radius:2px}
.gal{border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.gal .leiste{padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.gal .leiste i{width:16px;height:5px;border-radius:3px;display:block}
.gal .raster{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 8px 8px}
.gal .raster i{display:block;aspect-ratio:4/3;border-radius:2px}
.vorschau-titel{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte3);margin-bottom:10px;display:block}

/* ---------- Druckvorlagen ---------- */
.blattraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.blattkarte{border:0;background:none;padding:0}
.blattkarte summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:9px}
.blattkarte summary::-webkit-details-marker{display:none}
.blattzelle{height:150px;display:flex;align-items:center;justify-content:center}
.blattbuehne{position:relative;display:block;height:150px;width:auto;max-width:100%;container-type:size;border-radius:3px;overflow:hidden;box-shadow:0 10px 22px -16px rgba(11,11,13,.55);border:1px solid var(--linie);transition:box-shadow .16s}
.blattkarte summary:hover .blattbuehne{box-shadow:0 18px 32px -18px rgba(11,11,13,.6)}
.blattkarte .bez{font-size:13.5px;font-weight:700;line-height:1.3}
.blattkarte .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte3)}
.blattkarte .tiefe{padding:14px 0 4px;border-top:1px solid var(--linie);margin-top:10px}
.blattkarte .tiefe p{font-size:14px;color:var(--tinte2);line-height:1.5;margin-bottom:10px}

/* ---------- Vergleichsliste ---------- */
.listenrahmen{border:1px solid var(--linie);border-radius:4px;background:var(--karte);overflow:hidden}
/* An den Rahmen gebunden: .zeile heisst auch die Fusszeile im Druckblatt. */
.listenkopf,.listenrahmen .zeile{display:grid;grid-template-columns:1fr 180px 180px 132px;gap:20px;padding:0 22px;align-items:center}
.listenkopf{min-height:44px;background:var(--papier);border-bottom:1px solid var(--linie);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte3)}
.listenkoerper{max-height:640px;overflow-y:auto}
.listenrahmen .zeile{min-height:56px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--linie)}
.listenrahmen .zeile:hover{background:#FCFAF6}
.listenrahmen .zeile .haupt{font-size:15px;font-weight:600;line-height:1.35}
.listenrahmen .zeile .gruppe{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte3);margin-top:4px;display:block}
.listenrahmen .zeile .fremd{font-size:14px;color:var(--tinte2)}
/* 4,11 auf dem dunklen Kartengrund — knapp unter dem Massstab, und
   das auf 875 Zellen der Vergleichstabelle. Gemessen mit diesem Ton: 5,3. */
.listenrahmen .zeile .fremd.leer{color:#8F897E}
.stand{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;white-space:nowrap}
.stand i{width:7px;height:7px;border-radius:50%;display:block;flex:none}
.stand.ab{color:var(--gruen)}.stand.ab i{background:var(--gruen)}
.stand.nur{color:var(--amber-tinte)}.stand.nur i{background:var(--amber)}
.steuerung{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- Preise ---------- */
.plaene{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:48px}
.plan{border:1px solid var(--linie);border-radius:5px;background:var(--karte);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
/* Die mittlere Kachel traegt die Wahl: dunkel, hoeher, mit Lichtschein —
   sie steht im Entwurf als einzige aus der Reihe heraus. */
.plan.haupt{background:var(--nacht);border-color:var(--nacht);color:#FAF7F2;
padding:36px 32px;position:relative;overflow:hidden}
.plan.haupt::before{content:"";position:absolute;inset:0;
background:radial-gradient(340px 240px at 85% 0%,rgba(242,178,62,.2),transparent 60%)}
.plan.haupt>*{position:relative}
.plan.haupt h3,.plan.haupt .betrag{color:#FAF7F2}
.plan.haupt .betrag small,.plan.haupt p{color:rgba(250,247,242,.62)}
.plan.haupt ul{color:rgba(250,247,242,.78)}
.plan.haupt .knopf{background:var(--amber);color:var(--tinte)}
.plan.haupt .knopf:hover{background:var(--amber2);color:var(--tinte)}
.plan .oben{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan .oben h3{font-size:22px}
.plan .fahne{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--amber);color:var(--tinte);padding:4px 9px;border-radius:3px;font-weight:700}
.plan .betrag{font-size:clamp(40px,4.4vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1}
.plan .betrag small{font-size:15px;font-weight:500;color:var(--tinte3);letter-spacing:0;margin-left:8px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--tinte2)}
.plan li{display:flex;gap:10px;line-height:1.45}
.plan li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;margin-top:8px}
.plan .knopf{margin-top:auto}

/* ---------- Kleinteile ---------- */
.merkkasten{background:rgba(242,178,62,.08);border:1px solid rgba(242,178,62,.35);border-radius:14px;padding:18px 22px;font-size:14.5px;line-height:1.6;color:var(--tinte2)}
.merkkasten .titel{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.code{font-family:var(--mono);font-size:13px;line-height:1.75;background:var(--nacht);color:#F4EFE6;padding:16px 18px;border-radius:4px;white-space:pre;overflow-x:auto;display:block;margin:0}
.prosa{max-width:70ch;display:flex;flex-direction:column;gap:16px;font-size:16px}
.prosa h2{margin-top:24px}
.prosa ul{padding-left:20px;margin:0;display:flex;flex-direction:column;gap:6px}
.prosa code{font-family:var(--mono);font-size:14px}
form.kontakt{display:grid;gap:12px;max-width:560px}
form.kontakt label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
form.kontakt input,form.kontakt textarea,form.kontakt select{font:inherit;padding:12px 13px;border-radius:4px;border:1px solid var(--linie2);background:#fff;color:var(--tinte)}
form.kontakt textarea{min-height:130px}
.schluss{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.schluss h2{max-width:20ch}
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(28px,4vw,56px);margin-top:44px}
.rolle{padding:28px 0 0;border-top:2px solid rgba(250,247,242,.7)}
.rolle.zweit{border-top-color:rgba(250,247,242,.22)}
.rolle .art{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:12px}
.rolle h3{font-size:clamp(21px,2.4vw,26px);margin-bottom:12px}
.rolle p{font-size:15.5px;line-height:1.6}
.rolle code{font-family:var(--mono);font-size:14px;color:#FAF7F2;background:rgba(250,247,242,.1);padding:2px 7px;border-radius:3px}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);color:rgba(250,247,242,.6);padding:64px 0 0}
.fussgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:40px;padding-bottom:48px}
.fuss h4{color:#FAF7F2;margin-bottom:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.fuss a:hover{color:var(--amber)}
.fuss .satz{font-size:14.5px;line-height:1.6;max-width:34ch;margin-top:16px;color:rgba(250,247,242,.55)}
.fussleiste{border-top:1px solid rgba(250,247,242,.14);padding:22px 0;display:flex;gap:16px;flex-wrap:wrap;color:rgba(250,247,242,.5)}
.fussleiste .rechts{margin-left:auto}

/* ---------- Schmale Fenster ---------- */
@media (max-width:980px){
  .held .unten{grid-template-columns:1fr}
  .spalter{grid-template-columns:1fr}
  .buehne .unterreihe{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .striche{grid-template-columns:1fr}
  /* Schmal bleiben Bezeichnung und Stand; die beiden Fremdspalten fallen weg. */
  .listenkopf,.listenrahmen .zeile{grid-template-columns:1fr auto;gap:12px}
  .listenkopf span:nth-child(2),.listenkopf span:nth-child(3),
  .listenrahmen .zeile > span:nth-child(2),.listenrahmen .zeile > span:nth-child(3){display:none}
}
@media (max-width:620px){
  .buehne .unterreihe{grid-template-columns:1fr}
}
@media (max-width:760px){
  nav.haupt,.kopf .rechts{display:none}
  .menue{display:block}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- Anordnungen der Wahl-Bloecke ---------- */
.wahl.forscher{display:grid;grid-template-columns:312px 1fr;gap:clamp(24px,3vw,40px);align-items:start;margin-top:44px}
.wahl.moduswahl{display:grid;grid-template-columns:1fr minmax(280px,392px);gap:clamp(24px,4vw,48px);align-items:start;margin-top:40px}
.wahl.waehler{display:grid;grid-template-columns:minmax(0,464px) 1fr;gap:clamp(24px,4vw,48px);align-items:start;margin-top:48px}
.wahl.assistent{display:grid;grid-template-columns:340px 1fr;gap:clamp(24px,4vw,48px);align-items:start;margin-top:48px}
.wahl.hilfeteil{display:grid;grid-template-columns:266px 1fr;gap:clamp(24px,5vw,64px);align-items:start;margin-top:48px}
.wahl.langs{display:flex;flex-direction:column;gap:20px}
@media (max-width:980px){.wahl.forscher,.wahl.moduswahl,.wahl.waehler,.wahl.assistent,.wahl.hilfeteil{grid-template-columns:1fr}}
.katrail{display:flex;flex-direction:column;gap:4px}
.katrail label{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 14px;border-radius:3px;font-size:15px;font-weight:600;color:var(--tinte2);cursor:pointer}
.katrail label:hover{background:var(--papier2);color:var(--tinte)}
.katrail label .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;opacity:.6}
/* ---------- Welche Wahl welche Tafel zeigt ---------- */
/* Eine Regel je Stelle: die N-te Eingabe zeigt die N-te Tafel und hebt die
   N-te Marke hervor. Ohne CSS steht alles sichtbar untereinander. */
.wahl > input:nth-of-type(1):checked ~ .tafeln > *:nth-child(1),
.wahl > input:nth-of-type(2):checked ~ .tafeln > *:nth-child(2),
.wahl > input:nth-of-type(3):checked ~ .tafeln > *:nth-child(3),
.wahl > input:nth-of-type(4):checked ~ .tafeln > *:nth-child(4),
.wahl > input:nth-of-type(5):checked ~ .tafeln > *:nth-child(5),
.wahl > input:nth-of-type(6):checked ~ .tafeln > *:nth-child(6),
.wahl > input:nth-of-type(7):checked ~ .tafeln > *:nth-child(7),
.wahl > input:nth-of-type(8):checked ~ .tafeln > *:nth-child(8),
.wahl > input:nth-of-type(9):checked ~ .tafeln > *:nth-child(9),
.wahl > input:nth-of-type(10):checked ~ .tafeln > *:nth-child(10),
.wahl > input:nth-of-type(11):checked ~ .tafeln > *:nth-child(11),
.wahl > input:nth-of-type(12):checked ~ .tafeln > *:nth-child(12),
.wahl > input:nth-of-type(13):checked ~ .tafeln > *:nth-child(13),
.wahl > input:nth-of-type(14):checked ~ .tafeln > *:nth-child(14),
.wahl > input:nth-of-type(15):checked ~ .tafeln > *:nth-child(15),
.wahl > input:nth-of-type(16):checked ~ .tafeln > *:nth-child(16),
.wahl > input:nth-of-type(17):checked ~ .tafeln > *:nth-child(17),
.wahl > input:nth-of-type(18):checked ~ .tafeln > *:nth-child(18),
.wahl > input:nth-of-type(19):checked ~ .tafeln > *:nth-child(19),
.wahl > input:nth-of-type(20):checked ~ .tafeln > *:nth-child(20),
.wahl > input:nth-of-type(21):checked ~ .tafeln > *:nth-child(21),
.wahl > input:nth-of-type(22):checked ~ .tafeln > *:nth-child(22),
.wahl > input:nth-of-type(23):checked ~ .tafeln > *:nth-child(23),
.wahl > input:nth-of-type(24):checked ~ .tafeln > *:nth-child(24),
.wahl > input:nth-of-type(25):checked ~ .tafeln > *:nth-child(25),
.wahl > input:nth-of-type(26):checked ~ .tafeln > *:nth-child(26),
.wahl > input:nth-of-type(27):checked ~ .tafeln > *:nth-child(27),
.wahl > input:nth-of-type(28):checked ~ .tafeln > *:nth-child(28),
.wahl > input:nth-of-type(29):checked ~ .tafeln > *:nth-child(29),
.wahl > input:nth-of-type(30):checked ~ .tafeln > *:nth-child(30),
.wahl > input:nth-of-type(31):checked ~ .tafeln > *:nth-child(31){display:flex}

.wahl > input:nth-of-type(1):checked ~ .rail > label:nth-of-type(1),
.wahl > input:nth-of-type(2):checked ~ .rail > label:nth-of-type(2),
.wahl > input:nth-of-type(3):checked ~ .rail > label:nth-of-type(3),
.wahl > input:nth-of-type(4):checked ~ .rail > label:nth-of-type(4),
.wahl > input:nth-of-type(5):checked ~ .rail > label:nth-of-type(5),
.wahl > input:nth-of-type(6):checked ~ .rail > label:nth-of-type(6),
.wahl > input:nth-of-type(7):checked ~ .rail > label:nth-of-type(7),
.wahl > input:nth-of-type(8):checked ~ .rail > label:nth-of-type(8),
.wahl > input:nth-of-type(9):checked ~ .rail > label:nth-of-type(9),
.wahl > input:nth-of-type(10):checked ~ .rail > label:nth-of-type(10),
.wahl > input:nth-of-type(11):checked ~ .rail > label:nth-of-type(11),
.wahl > input:nth-of-type(12):checked ~ .rail > label:nth-of-type(12),
.wahl > input:nth-of-type(13):checked ~ .rail > label:nth-of-type(13),
.wahl > input:nth-of-type(14):checked ~ .rail > label:nth-of-type(14),
.wahl > input:nth-of-type(15):checked ~ .rail > label:nth-of-type(15),
.wahl > input:nth-of-type(16):checked ~ .rail > label:nth-of-type(16),
.wahl > input:nth-of-type(17):checked ~ .rail > label:nth-of-type(17),
.wahl > input:nth-of-type(18):checked ~ .rail > label:nth-of-type(18),
.wahl > input:nth-of-type(19):checked ~ .rail > label:nth-of-type(19),
.wahl > input:nth-of-type(20):checked ~ .rail > label:nth-of-type(20),
.wahl > input:nth-of-type(21):checked ~ .rail > label:nth-of-type(21),
.wahl > input:nth-of-type(22):checked ~ .rail > label:nth-of-type(22),
.wahl > input:nth-of-type(23):checked ~ .rail > label:nth-of-type(23),
.wahl > input:nth-of-type(24):checked ~ .rail > label:nth-of-type(24),
.wahl > input:nth-of-type(25):checked ~ .rail > label:nth-of-type(25),
.wahl > input:nth-of-type(26):checked ~ .rail > label:nth-of-type(26),
.wahl > input:nth-of-type(27):checked ~ .rail > label:nth-of-type(27),
.wahl > input:nth-of-type(28):checked ~ .rail > label:nth-of-type(28),
.wahl > input:nth-of-type(29):checked ~ .rail > label:nth-of-type(29),
.wahl > input:nth-of-type(30):checked ~ .rail > label:nth-of-type(30),
.wahl > input:nth-of-type(31):checked ~ .rail > label:nth-of-type(31){color:var(--tinte);font-weight:800}
.wahl > input:nth-of-type(1):checked ~ .rail > label:nth-of-type(1) .balken,
.wahl > input:nth-of-type(2):checked ~ .rail > label:nth-of-type(2) .balken,
.wahl > input:nth-of-type(3):checked ~ .rail > label:nth-of-type(3) .balken,
.wahl > input:nth-of-type(4):checked ~ .rail > label:nth-of-type(4) .balken,
.wahl > input:nth-of-type(5):checked ~ .rail > label:nth-of-type(5) .balken,
.wahl > input:nth-of-type(6):checked ~ .rail > label:nth-of-type(6) .balken,
.wahl > input:nth-of-type(7):checked ~ .rail > label:nth-of-type(7) .balken,
.wahl > input:nth-of-type(8):checked ~ .rail > label:nth-of-type(8) .balken,
.wahl > input:nth-of-type(9):checked ~ .rail > label:nth-of-type(9) .balken,
.wahl > input:nth-of-type(10):checked ~ .rail > label:nth-of-type(10) .balken,
.wahl > input:nth-of-type(11):checked ~ .rail > label:nth-of-type(11) .balken,
.wahl > input:nth-of-type(12):checked ~ .rail > label:nth-of-type(12) .balken,
.wahl > input:nth-of-type(13):checked ~ .rail > label:nth-of-type(13) .balken,
.wahl > input:nth-of-type(14):checked ~ .rail > label:nth-of-type(14) .balken,
.wahl > input:nth-of-type(15):checked ~ .rail > label:nth-of-type(15) .balken,
.wahl > input:nth-of-type(16):checked ~ .rail > label:nth-of-type(16) .balken,
.wahl > input:nth-of-type(17):checked ~ .rail > label:nth-of-type(17) .balken,
.wahl > input:nth-of-type(18):checked ~ .rail > label:nth-of-type(18) .balken,
.wahl > input:nth-of-type(19):checked ~ .rail > label:nth-of-type(19) .balken,
.wahl > input:nth-of-type(20):checked ~ .rail > label:nth-of-type(20) .balken,
.wahl > input:nth-of-type(21):checked ~ .rail > label:nth-of-type(21) .balken,
.wahl > input:nth-of-type(22):checked ~ .rail > label:nth-of-type(22) .balken,
.wahl > input:nth-of-type(23):checked ~ .rail > label:nth-of-type(23) .balken,
.wahl > input:nth-of-type(24):checked ~ .rail > label:nth-of-type(24) .balken,
.wahl > input:nth-of-type(25):checked ~ .rail > label:nth-of-type(25) .balken,
.wahl > input:nth-of-type(26):checked ~ .rail > label:nth-of-type(26) .balken,
.wahl > input:nth-of-type(27):checked ~ .rail > label:nth-of-type(27) .balken,
.wahl > input:nth-of-type(28):checked ~ .rail > label:nth-of-type(28) .balken,
.wahl > input:nth-of-type(29):checked ~ .rail > label:nth-of-type(29) .balken,
.wahl > input:nth-of-type(30):checked ~ .rail > label:nth-of-type(30) .balken,
.wahl > input:nth-of-type(31):checked ~ .rail > label:nth-of-type(31) .balken{background:var(--amber)}

.wahl > input:nth-of-type(1):checked ~ .chips > label:nth-of-type(1),
.wahl > input:nth-of-type(2):checked ~ .chips > label:nth-of-type(2),
.wahl > input:nth-of-type(3):checked ~ .chips > label:nth-of-type(3),
.wahl > input:nth-of-type(4):checked ~ .chips > label:nth-of-type(4),
.wahl > input:nth-of-type(5):checked ~ .chips > label:nth-of-type(5),
.wahl > input:nth-of-type(6):checked ~ .chips > label:nth-of-type(6),
.wahl > input:nth-of-type(7):checked ~ .chips > label:nth-of-type(7),
.wahl > input:nth-of-type(8):checked ~ .chips > label:nth-of-type(8),
.wahl > input:nth-of-type(9):checked ~ .chips > label:nth-of-type(9),
.wahl > input:nth-of-type(10):checked ~ .chips > label:nth-of-type(10),
.wahl > input:nth-of-type(11):checked ~ .chips > label:nth-of-type(11),
.wahl > input:nth-of-type(12):checked ~ .chips > label:nth-of-type(12),
.wahl > input:nth-of-type(13):checked ~ .chips > label:nth-of-type(13),
.wahl > input:nth-of-type(14):checked ~ .chips > label:nth-of-type(14),
.wahl > input:nth-of-type(15):checked ~ .chips > label:nth-of-type(15),
.wahl > input:nth-of-type(16):checked ~ .chips > label:nth-of-type(16),
.wahl > input:nth-of-type(17):checked ~ .chips > label:nth-of-type(17),
.wahl > input:nth-of-type(18):checked ~ .chips > label:nth-of-type(18),
.wahl > input:nth-of-type(19):checked ~ .chips > label:nth-of-type(19),
.wahl > input:nth-of-type(20):checked ~ .chips > label:nth-of-type(20),
.wahl > input:nth-of-type(21):checked ~ .chips > label:nth-of-type(21),
.wahl > input:nth-of-type(22):checked ~ .chips > label:nth-of-type(22),
.wahl > input:nth-of-type(23):checked ~ .chips > label:nth-of-type(23),
.wahl > input:nth-of-type(24):checked ~ .chips > label:nth-of-type(24),
.wahl > input:nth-of-type(25):checked ~ .chips > label:nth-of-type(25),
.wahl > input:nth-of-type(26):checked ~ .chips > label:nth-of-type(26),
.wahl > input:nth-of-type(27):checked ~ .chips > label:nth-of-type(27),
.wahl > input:nth-of-type(28):checked ~ .chips > label:nth-of-type(28),
.wahl > input:nth-of-type(29):checked ~ .chips > label:nth-of-type(29),
.wahl > input:nth-of-type(30):checked ~ .chips > label:nth-of-type(30),
.wahl > input:nth-of-type(31):checked ~ .chips > label:nth-of-type(31){background:var(--amber);border-color:var(--amber);color:#141210}
.wahl > input:nth-of-type(1):checked ~ .weltwahl > label:nth-of-type(1),
.wahl > input:nth-of-type(2):checked ~ .weltwahl > label:nth-of-type(2),
.wahl > input:nth-of-type(3):checked ~ .weltwahl > label:nth-of-type(3),
.wahl > input:nth-of-type(4):checked ~ .weltwahl > label:nth-of-type(4),
.wahl > input:nth-of-type(5):checked ~ .weltwahl > label:nth-of-type(5),
.wahl > input:nth-of-type(6):checked ~ .weltwahl > label:nth-of-type(6),
.wahl > input:nth-of-type(7):checked ~ .weltwahl > label:nth-of-type(7),
.wahl > input:nth-of-type(8):checked ~ .weltwahl > label:nth-of-type(8),
.wahl > input:nth-of-type(9):checked ~ .weltwahl > label:nth-of-type(9),
.wahl > input:nth-of-type(10):checked ~ .weltwahl > label:nth-of-type(10),
.wahl > input:nth-of-type(11):checked ~ .weltwahl > label:nth-of-type(11),
.wahl > input:nth-of-type(12):checked ~ .weltwahl > label:nth-of-type(12),
.wahl > input:nth-of-type(13):checked ~ .weltwahl > label:nth-of-type(13),
.wahl > input:nth-of-type(14):checked ~ .weltwahl > label:nth-of-type(14),
.wahl > input:nth-of-type(15):checked ~ .weltwahl > label:nth-of-type(15),
.wahl > input:nth-of-type(16):checked ~ .weltwahl > label:nth-of-type(16),
.wahl > input:nth-of-type(17):checked ~ .weltwahl > label:nth-of-type(17),
.wahl > input:nth-of-type(18):checked ~ .weltwahl > label:nth-of-type(18),
.wahl > input:nth-of-type(19):checked ~ .weltwahl > label:nth-of-type(19),
.wahl > input:nth-of-type(20):checked ~ .weltwahl > label:nth-of-type(20),
.wahl > input:nth-of-type(21):checked ~ .weltwahl > label:nth-of-type(21),
.wahl > input:nth-of-type(22):checked ~ .weltwahl > label:nth-of-type(22),
.wahl > input:nth-of-type(23):checked ~ .weltwahl > label:nth-of-type(23),
.wahl > input:nth-of-type(24):checked ~ .weltwahl > label:nth-of-type(24),
.wahl > input:nth-of-type(25):checked ~ .weltwahl > label:nth-of-type(25),
.wahl > input:nth-of-type(26):checked ~ .weltwahl > label:nth-of-type(26),
.wahl > input:nth-of-type(27):checked ~ .weltwahl > label:nth-of-type(27),
.wahl > input:nth-of-type(28):checked ~ .weltwahl > label:nth-of-type(28),
.wahl > input:nth-of-type(29):checked ~ .weltwahl > label:nth-of-type(29),
.wahl > input:nth-of-type(30):checked ~ .weltwahl > label:nth-of-type(30),
.wahl > input:nth-of-type(31):checked ~ .weltwahl > label:nth-of-type(31){border-color:var(--tinte);box-shadow:0 0 0 2px var(--tinte)}

.wahl > input:nth-of-type(1):checked ~ .segmente > label:nth-of-type(1),
.wahl > input:nth-of-type(2):checked ~ .segmente > label:nth-of-type(2),
.wahl > input:nth-of-type(3):checked ~ .segmente > label:nth-of-type(3),
.wahl > input:nth-of-type(4):checked ~ .segmente > label:nth-of-type(4),
.wahl > input:nth-of-type(5):checked ~ .segmente > label:nth-of-type(5),
.wahl > input:nth-of-type(6):checked ~ .segmente > label:nth-of-type(6),
.wahl > input:nth-of-type(7):checked ~ .segmente > label:nth-of-type(7),
.wahl > input:nth-of-type(8):checked ~ .segmente > label:nth-of-type(8),
.wahl > input:nth-of-type(9):checked ~ .segmente > label:nth-of-type(9),
.wahl > input:nth-of-type(10):checked ~ .segmente > label:nth-of-type(10),
.wahl > input:nth-of-type(11):checked ~ .segmente > label:nth-of-type(11),
.wahl > input:nth-of-type(12):checked ~ .segmente > label:nth-of-type(12),
.wahl > input:nth-of-type(13):checked ~ .segmente > label:nth-of-type(13),
.wahl > input:nth-of-type(14):checked ~ .segmente > label:nth-of-type(14),
.wahl > input:nth-of-type(15):checked ~ .segmente > label:nth-of-type(15),
.wahl > input:nth-of-type(16):checked ~ .segmente > label:nth-of-type(16),
.wahl > input:nth-of-type(17):checked ~ .segmente > label:nth-of-type(17),
.wahl > input:nth-of-type(18):checked ~ .segmente > label:nth-of-type(18),
.wahl > input:nth-of-type(19):checked ~ .segmente > label:nth-of-type(19),
.wahl > input:nth-of-type(20):checked ~ .segmente > label:nth-of-type(20),
.wahl > input:nth-of-type(21):checked ~ .segmente > label:nth-of-type(21),
.wahl > input:nth-of-type(22):checked ~ .segmente > label:nth-of-type(22),
.wahl > input:nth-of-type(23):checked ~ .segmente > label:nth-of-type(23),
.wahl > input:nth-of-type(24):checked ~ .segmente > label:nth-of-type(24),
.wahl > input:nth-of-type(25):checked ~ .segmente > label:nth-of-type(25),
.wahl > input:nth-of-type(26):checked ~ .segmente > label:nth-of-type(26),
.wahl > input:nth-of-type(27):checked ~ .segmente > label:nth-of-type(27),
.wahl > input:nth-of-type(28):checked ~ .segmente > label:nth-of-type(28),
.wahl > input:nth-of-type(29):checked ~ .segmente > label:nth-of-type(29),
.wahl > input:nth-of-type(30):checked ~ .segmente > label:nth-of-type(30),
.wahl > input:nth-of-type(31):checked ~ .segmente > label:nth-of-type(31){background:var(--tinte);color:#fff}

.wahl > input:nth-of-type(1):checked ~ .katrail > label:nth-of-type(1),
.wahl > input:nth-of-type(2):checked ~ .katrail > label:nth-of-type(2),
.wahl > input:nth-of-type(3):checked ~ .katrail > label:nth-of-type(3),
.wahl > input:nth-of-type(4):checked ~ .katrail > label:nth-of-type(4),
.wahl > input:nth-of-type(5):checked ~ .katrail > label:nth-of-type(5),
.wahl > input:nth-of-type(6):checked ~ .katrail > label:nth-of-type(6),
.wahl > input:nth-of-type(7):checked ~ .katrail > label:nth-of-type(7),
.wahl > input:nth-of-type(8):checked ~ .katrail > label:nth-of-type(8),
.wahl > input:nth-of-type(9):checked ~ .katrail > label:nth-of-type(9),
.wahl > input:nth-of-type(10):checked ~ .katrail > label:nth-of-type(10),
.wahl > input:nth-of-type(11):checked ~ .katrail > label:nth-of-type(11),
.wahl > input:nth-of-type(12):checked ~ .katrail > label:nth-of-type(12),
.wahl > input:nth-of-type(13):checked ~ .katrail > label:nth-of-type(13),
.wahl > input:nth-of-type(14):checked ~ .katrail > label:nth-of-type(14),
.wahl > input:nth-of-type(15):checked ~ .katrail > label:nth-of-type(15),
.wahl > input:nth-of-type(16):checked ~ .katrail > label:nth-of-type(16),
.wahl > input:nth-of-type(17):checked ~ .katrail > label:nth-of-type(17),
.wahl > input:nth-of-type(18):checked ~ .katrail > label:nth-of-type(18),
.wahl > input:nth-of-type(19):checked ~ .katrail > label:nth-of-type(19),
.wahl > input:nth-of-type(20):checked ~ .katrail > label:nth-of-type(20),
.wahl > input:nth-of-type(21):checked ~ .katrail > label:nth-of-type(21),
.wahl > input:nth-of-type(22):checked ~ .katrail > label:nth-of-type(22),
.wahl > input:nth-of-type(23):checked ~ .katrail > label:nth-of-type(23),
.wahl > input:nth-of-type(24):checked ~ .katrail > label:nth-of-type(24),
.wahl > input:nth-of-type(25):checked ~ .katrail > label:nth-of-type(25),
.wahl > input:nth-of-type(26):checked ~ .katrail > label:nth-of-type(26),
.wahl > input:nth-of-type(27):checked ~ .katrail > label:nth-of-type(27),
.wahl > input:nth-of-type(28):checked ~ .katrail > label:nth-of-type(28),
.wahl > input:nth-of-type(29):checked ~ .katrail > label:nth-of-type(29),
.wahl > input:nth-of-type(30):checked ~ .katrail > label:nth-of-type(30),
.wahl > input:nth-of-type(31):checked ~ .katrail > label:nth-of-type(31){background:var(--tinte);color:#fff}
/* ---------- Filter der Vergleichsliste und der Hilfe ---------- */
#f-nur:checked ~ .listenrahmen .zeile:not(.nur){display:none}
#f-dslr:checked ~ .listenrahmen .zeile:not(.hat-dslr){display:none}
#f-breeze:checked ~ .listenrahmen .zeile:not(.hat-breeze){display:none}
#h-kopplung:checked ~ .aufklapp details:not(.k-kopplung){display:none}
#h-druck:checked ~ .aufklapp details:not(.k-druck){display:none}
#h-netz:checked ~ .aufklapp details:not(.k-netz){display:none}
#h-kamera:checked ~ .aufklapp details:not(.k-kamera){display:none}
#h-box:checked ~ .aufklapp details:not(.k-box){display:none}
#h-galerie:checked ~ .aufklapp details:not(.k-galerie){display:none}

/* ---------- Der Abend: Zeitleiste ---------- */
.zeitreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.zeitkarte{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px}
.zeitkarte .zeit{font-family:var(--mono);font-size:19px;color:var(--amber-tinte);font-weight:600}
.zeitkarte .marke{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte3)}
.zeitkarte h3{font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
.zeitkarte p{font-size:13.5px;line-height:1.55;color:var(--tinte3)}
.zeitkarte.dunkel{background:var(--nacht);border-color:var(--nacht)}
.zeitkarte.dunkel .zeit{color:var(--amber)}
.zeitkarte.dunkel .marke{color:rgba(250,247,242,.45)}
.zeitkarte.dunkel h3{color:#FAF7F2}
.zeitkarte.dunkel p{color:rgba(250,247,242,.62)}

/* ---------- Drei Buehnen ---------- */
.buehnen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.buehne3{display:flex;flex-direction:column;gap:12px;background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:28px;min-height:260px;color:inherit}
.buehne3:hover{border-color:var(--linie2);color:inherit}
.buehne3 h3{font-size:clamp(19px,1.9vw,23px);line-height:1.2;letter-spacing:-.015em}
.buehne3 p{font-size:14px;line-height:1.55;color:var(--tinte3)}
.buehne3 .weiter{margin-top:auto;font-weight:700;font-size:14px;color:var(--amber-tinte)}
.buehne3.dunkel{background:var(--nacht);border-color:var(--nacht)}
.buehne3.dunkel h3{color:#FAF7F2}
.buehne3.dunkel p{color:rgba(250,247,242,.62)}
.buehne3.dunkel .kicker,.buehne3.dunkel .weiter{color:var(--amber)}

/* ---------- Weltband ---------- */
.weltband{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.weltband a{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:120px;border-radius:14px;border:1px solid var(--linie);padding:14px 16px}
.weltband a:hover{border-color:var(--linie2)}
.weltband b{font-size:16px;letter-spacing:-.01em}
.weltband span{font-size:11.5px;opacity:.66;line-height:1.4}

/* ---------- Riesenzahlen (Datenblatt) ---------- */
.riesen{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:40px}
.riesen>div{display:flex;flex-direction:column;gap:6px;padding:6px 26px 2px 0;border-right:1px solid rgba(250,247,242,.14)}
.riesen>div+div{padding-left:26px}
.riesen>div:last-child{border-right:0}
.riesen b{font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#FAF7F2}
.riesen>div:first-child b{color:var(--amber)}
.riesen span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.5);line-height:1.5}

/* ---------- Chips ---------- */
.chipreihe{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linie2);font-size:13px;color:var(--tinte2)}
.chip.an{background:var(--amber);border-color:var(--amber);color:#141210;font-weight:700}

/* ---------- Ablaufband (Die Box) ---------- */
.ablaufband{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.ablaufband>div{position:relative;min-height:150px;border-radius:14px;background:var(--nacht);color:#FAF7F2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.ablaufband>div.hell{background:var(--karte);color:var(--tinte);border:1px solid var(--linie)}
.ablaufband b{font-size:15px;font-weight:800}
.ablaufband b.riesig{font-size:56px;color:var(--amber);line-height:1}
.ablaufband b.ruf{font-size:24px;letter-spacing:.04em}
.ablaufband span{position:absolute;bottom:10px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.45)}
.ablaufband .hell span{color:var(--tinte3)}
.ablaufband i{display:block}
.ablaufband .ring{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--amber)}
.ablaufband .blatt{width:56px;height:76px;border-radius:6px;border:2px solid rgba(250,247,242,.4);background:#26262C}
.ablaufband .qr{width:44px;height:44px;border-radius:8px;background:#FAF7F2}

/* ---------- Stationen (Anfangen) ---------- */
.stationen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;position:relative}
.stationen::before{content:"";position:absolute;left:26px;right:26px;top:26px;height:2px;background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 62%,var(--linie2) 100%)}
.station{display:flex;flex-direction:column;gap:12px;position:relative}
.station .nummer{width:52px;height:52px;border-radius:50%;background:var(--karte);border:2px solid var(--linie2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--tinte3);box-shadow:0 0 0 6px var(--papier)}
.station .nummer.an{background:var(--amber);border-color:var(--amber);color:#141210}
.station h3{font-size:19px;letter-spacing:-.01em}
.station p{font-size:14px;line-height:1.55;color:var(--tinte3)}
.station .code{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--nacht);border-radius:12px;padding:18px 16px;margin-top:auto}
.station .code span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.station .code b{font-family:var(--mono);font-size:26px;letter-spacing:.3em;color:var(--amber);font-weight:500}
.station .pruefe{display:flex;flex-direction:column;gap:7px;background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:14px 16px;margin-top:auto;font-family:var(--mono);font-size:11px}
.station .pruefe span{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.1em;color:var(--tinte3)}
.station .pruefe b{color:var(--gruen);font-weight:600}

/* ---------- Bon (Preise) ---------- */
.bon{width:min(340px,100%);justify-self:center;background:#FBF8F2;color:#141210;border:1px solid #E4DCCB;border-radius:6px 6px 0 0;padding:26px 28px 32px;box-shadow:0 26px 60px -18px rgba(0,0,0,.7);transform:rotate(1.5deg);display:flex;flex-direction:column;gap:12px;font-family:var(--mono)}
.bon .bkopf{font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:rgba(20,18,16,.75);font-weight:600}
.bon .trenn{border-top:1px dashed #CFC5AE}
.bon .zeile{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(20,18,16,.65);text-transform:uppercase;letter-spacing:.04em}
.bon .zeile.stark{font-size:13px;color:#141210;font-weight:600}
.bon .bfuss{font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:rgba(20,18,16,.5)}
ul.haken{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
ul.haken li{display:flex;align-items:center;gap:10px}
ul.haken li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen);flex:none}

/* ---------- Regelliste (Haltung) ---------- */
.regelliste{display:flex;flex-direction:column}
/* Drei Spalten: Marke, Regeltext, Beleg. */
.regelzeile{display:grid;grid-template-columns:120px 1fr 230px;gap:40px;padding:36px 0;border-top:1px solid rgba(250,247,242,.12)}
.regelzeile:last-child{border-bottom:1px solid rgba(250,247,242,.12)}
.regelzeile .marke{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);padding-top:14px}
.regelzeile h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.015em}
.regelzeile p{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(250,247,242,.62);max-width:72ch}
.regelzeile a{color:var(--amber)}

/* ---------- In Arbeit ---------- */
.inarbeit{border:2px dashed var(--linie2);border-radius:16px;padding:8px 24px}

@media (max-width:980px){
.zeitreihe{grid-template-columns:1fr 1fr}
.buehnen{grid-template-columns:1fr}
.weltband{grid-template-columns:1fr 1fr}
.riesen{grid-template-columns:1fr 1fr;gap:18px 0}
.riesen>div{border-right:0;padding-left:0}
.ablaufband{grid-template-columns:repeat(2,1fr)}
.stationen{grid-template-columns:1fr}
.stationen::before{display:none}
.regelzeile{grid-template-columns:1fr;gap:8px;padding:28px 0}
}
@media (max-width:620px){
.zeitreihe{grid-template-columns:1fr}
.weltband{grid-template-columns:1fr}
.ablaufband{grid-template-columns:1fr}
}

/* ---------- Mittiger Held (Unterseiten) ---------- */
.held.mitte{padding-bottom:clamp(46px,5vw,70px)}
.held .obenzeile.mittig{justify-content:center;margin-bottom:18px}
.held .lead.mittig{text-align:center;margin:18px auto 0;max-width:64ch;color:rgba(250,247,242,.66)}

/* ---------- Modi als Kachelraster ---------- */
/* Die grosse Kachel gehoert der Lichtmalerei: sie ist der Modus, den es sonst
   nirgends gibt, und traegt darum das Bild. */
.modiraster{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(168px,auto);gap:14px}
.modikachel{background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:22px 24px;
display:flex;flex-direction:column;justify-content:flex-end;gap:7px;box-shadow:var(--schatten2,0 10px 28px rgba(245,242,236,.05))}
.modikachel .name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.modikachel .satz{font-size:12.5px;line-height:1.5;color:var(--tinte3)}
.modikachel.gross{grid-row:span 2;background:var(--nacht);border-color:var(--nacht);position:relative;overflow:hidden;padding:26px}
.modikachel.gross .name{color:#FAF7F2;font-size:22px;position:relative}
.modikachel.gross .satz{color:rgba(250,247,242,.62);font-size:13px;position:relative}
.modikachel.gross .lichtring{position:absolute;left:50%;top:14%;transform:translateX(-50%);
width:min(150px,60%);aspect-ratio:1;border-radius:50%;border:2.5px solid rgba(242,178,62,.7);
box-shadow:inset 0 0 70px rgba(242,178,62,.4)}
.modikachel.gross::before{content:"";position:absolute;inset:0;
background:radial-gradient(320px 420px at 50% 15%,rgba(242,178,62,.3),transparent 65%)}

/* ---------- Zwei Karten nebeneinander, eine dunkel ---------- */
.zweiband{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch}
.zweiband .karte{background:var(--karte);border:1px solid var(--linie);border-radius:24px;padding:32px 36px;
display:flex;flex-direction:column;gap:14px;box-shadow:0 14px 40px rgba(245,242,236,.06)}
.zweiband .karte h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15}
.zweiband .karte p{font-size:14px;line-height:1.65;color:var(--tinte2)}
.zweiband .karte .meta{margin-top:auto}
.zweiband .karte.dunkel{background:var(--nacht);border-color:var(--nacht);position:relative;overflow:hidden}
.zweiband .karte.dunkel::before{content:"";position:absolute;inset:0;
background:radial-gradient(400px 300px at 80% 100%,rgba(242,178,62,.16),transparent 65%)}
.zweiband .karte.dunkel>*{position:relative}
.zweiband .karte.dunkel h2{color:#FAF7F2}
.zweiband .karte.dunkel p{color:rgba(250,247,242,.62)}
.zweiband .karte.dunkel .kicker{color:var(--amber)}
.filterreihe{display:flex;gap:8px;margin-top:auto}
.filterreihe i{flex:1;height:58px;border-radius:10px;display:block}

/* ---------- Amber-Schlussband ---------- */
.amberband{background:var(--amber);color:#141210;padding:clamp(38px,4.4vw,56px) 0}
.amberband .wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.amberband>.wrap>div{flex:1;min-width:280px;display:flex;flex-direction:column;gap:8px}
.amberband h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.01em}
.amberband p{font-size:15px;line-height:1.6;color:rgba(10,10,12,.72);max-width:60ch}

@media (max-width:980px){
.modiraster{grid-template-columns:1fr 1fr}
.modikachel.gross{grid-row:span 1;min-height:220px}
.zweiband{grid-template-columns:1fr}
}
@media (max-width:620px){.modiraster{grid-template-columns:1fr}}

/* ---------- Haltung: der Beleg neben der Regel ---------- */
.beleg{display:flex;flex-direction:column;gap:9px;background:rgba(250,247,242,.05);
border:1px solid rgba(250,247,242,.13);border-radius:14px;padding:18px 20px;
font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;align-self:start;margin-top:14px}
.beleg span{display:flex;justify-content:space-between;gap:18px}
.beleg b{font-weight:400;color:rgba(250,247,242,.55)}
.beleg i{font-style:normal}
.beleg .gut{color:#7AD6A8}.beleg .rot{color:#E8A49C}
/* Der Streifen ist der Beleg fuer "dein Name drauf": gedrucktes Papier. */
.beleg.papier{background:#FBF8F2;border:0;border-radius:7px;padding:10px 10px 20px;gap:7px;
transform:rotate(3deg);box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.beleg.papier i{display:block;height:64px;border-radius:3px}
/* .beleg.papier dreht den Grund auf hell (#FBF8F2) — die Schriftfarbe von
   .beleg b blieb aber die helle des dunklen Grundes. Kontrast 1,03: die
   Zeile "Dein Logo, nicht unseres" stand unsichtbar auf dem Papier.
   Gemessen mit dieser Farbe: 5,1. */
.beleg.papier b{color:rgba(20,18,16,.62);text-align:center;font-size:8px;letter-spacing:.2em;font-weight:500}
.ausserdem{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.ausserdem>div{background:rgba(250,247,242,.05);border:1px solid rgba(250,247,242,.12);
border-radius:14px;padding:20px 24px;display:flex;flex-direction:column;gap:7px}
.ausserdem p{font-size:13.5px;line-height:1.6;color:rgba(250,247,242,.7)}
/* Die Amber-Karte ist eingerueckt, keine randlose Flaeche. */
.amberkarte{background:var(--amber);border-radius:26px;padding:clamp(28px,3.4vw,40px) clamp(28px,3.6vw,44px);
display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.amberkarte>div{flex:1;min-width:260px;display:flex;flex-direction:column;gap:6px}
.amberkarte h2{font-size:clamp(22px,2.8vw,30px);color:#141210}
/* Dunkel auf Amber, wie die Ueberschrift darueber. Hier stand die helle
   Textfarbe der dunklen Karten — auf Amber ergab das Kontrast 1,68 und war
   praktisch unlesbar. Gemessen mit dieser Farbe: 6,2. */
.amberkarte p{font-size:14.5px;line-height:1.6;color:rgba(20,18,16,.78)}
@media (max-width:980px){.regelzeile{grid-template-columns:1fr}.beleg{margin-top:6px;max-width:280px}.ausserdem{grid-template-columns:1fr}}

/* ---------- Preise: zwei Kacheln am Schluss ---------- */
.zweikacheln{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zweikacheln .karte{background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:26px 30px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 28px rgba(245,242,236,.05)}
.zweikacheln .karte .titel{font-size:17px;font-weight:700}
.zweikacheln .karte p{font-size:13.5px;color:var(--tinte2)}
.zweikacheln .karte.amber{background:var(--amber);border-color:transparent;color:#141210}
/* Dunkel auf Amber — hier stand dreimal dieselbe helle Textfarbe, die zum
   DUNKLEN Grund gehoert. Der Container setzt color:#141210, und die
   p-Regel nahm es wieder zurueck. Gemessen jetzt: 6,2. */
.zweikacheln .karte.amber p{color:rgba(20,18,16,.78)}
.zweikacheln .karte .knopf{align-self:flex-start;margin-top:6px}
.adresse{font-family:var(--mono);font-size:13px;color:var(--amber-tinte)}

/* ---------- Anfangen: Formular-Mockup, Fragenraster, dunkle Schlusskarte ---------- */
.station .formular{margin-top:auto;background:var(--papier);border:1px solid var(--linie);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.station .formular i{display:block;height:11px;border-radius:3px;background:var(--linie);width:80%}
.station .formular i.kurz{width:60%}
.station .formular b{align-self:flex-start;padding:10px 18px;border-radius:999px;background:var(--amber);color:#141210;font-size:12px;font-weight:700}
.fragenraster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fragekarte{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:22px 26px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 22px rgba(245,242,236,.04)}
.fragekarte h3{font-size:15.5px}
.fragekarte p{font-size:13px;line-height:1.6;color:var(--tinte2)}
.dunkelkarte{background:var(--nacht);border-radius:26px;padding:clamp(28px,3.4vw,40px) clamp(28px,3.6vw,44px);display:flex;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.dunkelkarte::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 90% 50%,rgba(242,178,62,.16),transparent 65%)}
.dunkelkarte>*{position:relative}
.dunkelkarte>div{flex:1;min-width:280px;display:flex;flex-direction:column;gap:8px}
.dunkelkarte h2{font-size:clamp(22px,2.8vw,30px);color:#FAF7F2}
.dunkelkarte p{font-size:14.5px;line-height:1.6;color:rgba(250,247,242,.62)}
.dunkelkarte .adresse{color:var(--amber)}

/* ---------- Studio: Held mit Mockups ---------- */
.studioheld{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:clamp(28px,4vw,56px);align-items:center}
.studioheld .mockups{position:relative;height:420px}
.studioheld .fenster{position:absolute;left:0;top:0;width:min(520px,100%);height:360px;background:var(--karte);border:1px solid var(--linie);border-radius:18px;box-shadow:0 34px 80px -30px rgba(245,242,236,.4);overflow:hidden;display:flex;flex-direction:column}
.studioheld .leiste{height:40px;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:7px;padding:0 16px}
.studioheld .leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie);flex:none}
.studioheld .leiste span{margin-left:12px;flex:1;height:20px;border-radius:6px;background:var(--papier);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:8.5px;color:var(--tinte3)}
.studioheld .innen{flex:1;display:flex;min-height:0}
.studioheld .rail{width:132px;border-right:1px solid var(--linie);padding:14px 12px;display:flex;flex-direction:column;gap:8px;font-size:10.5px;color:var(--tinte3)}
.studioheld .rail b{padding:8px 10px;border-radius:8px;background:var(--amber);color:var(--tinte);font-size:10.5px}
.studioheld .rail span{padding:8px 10px}
.studioheld .platte{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.studioheld .boxzeile{background:var(--papier);border:1px solid var(--linie);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.studioheld .boxzeile .punkt{width:8px;height:8px;border-radius:50%;background:var(--gruen);flex:none}
.studioheld .boxzeile span{display:flex;flex-direction:column;gap:1px}
.studioheld .boxzeile b{font-size:11.5px}
.studioheld .boxzeile em{font-family:var(--mono);font-size:8px;font-style:normal;color:var(--tinte3)}
.studioheld .boxzeile .rechts{margin-left:auto;color:var(--gruen)}
.studioheld .knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.studioheld .knoepfe span{padding:12px 0;border-radius:999px;border:1.5px solid var(--linie2);font-weight:600;font-size:11px;text-align:center;color:var(--tinte2)}
.studioheld .knoepfe .an{background:var(--tinte);border-color:var(--tinte);color:#fff;font-weight:700}
.studioheld .bilder{display:flex;gap:6px;margin-top:auto}
.studioheld .bilder i{flex:1;height:42px;border-radius:6px;display:block}
.studioheld .handy{position:absolute;right:0;bottom:0;width:150px;height:250px;background:var(--nacht);border-radius:22px;border:3px solid #26262C;padding:16px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 70px -24px rgba(245,242,236,.6)}
.studioheld .handy .mini{font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.studioheld .handy .ausloesen{height:56px;border-radius:12px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--tinte);font-weight:800;font-size:13px}
.studioheld .handy .taste{height:32px;border-radius:9px;border:1.5px solid rgba(250,247,242,.25)}
.studioheld .handy .fuss{margin-top:auto;font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,242,.4);text-align:center}

/* ---------- Studio: Doktrin mit Konflikt-Karte ---------- */
.doktrin{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(28px,4vw,48px);align-items:center}
.doktrin .text,.studioheld .text{display:flex;flex-direction:column;gap:12px;min-width:0}
.doktrin h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.015em}
.konfliktkarte{background:rgba(250,247,242,.05);border:1px solid rgba(250,247,242,.13);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.konfliktkarte b{font-size:16px;color:#FAF7F2}
.konfliktkarte p{font-size:12.5px;line-height:1.6;color:rgba(250,247,242,.55)}
.konfliktkarte .knoepfe{display:flex;gap:8px}
.konfliktkarte .knoepfe i{flex:1;padding:12px 0;border-radius:999px;font-style:normal;font-size:12px;font-weight:600;text-align:center;border:1.5px solid rgba(250,247,242,.3);color:#FAF7F2}
.konfliktkarte .knoepfe .an{background:var(--amber);border-color:var(--amber);color:var(--tinte);font-weight:700}

/* ---------- Studio: drei Karten mit Ikone ---------- */
.dreikarten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dreikarten .karte,.karte.breit{background:var(--karte);border:1px solid var(--linie);border-radius:22px;padding:28px 30px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 28px rgba(245,242,236,.05)}
.karte.breit{flex-direction:row;align-items:center;gap:26px}
.karte.breit>div:first-child{flex:1;display:flex;flex-direction:column;gap:8px}
.dreikarten h3,.karte.breit h3{font-size:19px}
.dreikarten p,.karte.breit p{font-size:13.5px;line-height:1.6;color:var(--tinte2)}
.ikonfeld{width:44px;height:44px;border-radius:12px;background:var(--papier);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center}
.ikonfeld svg{width:22px;height:22px;stroke:var(--amber-tinte);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.statuszeilen{display:flex;flex-direction:column;gap:8px;width:min(330px,100%);flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.statuszeilen span{display:flex;justify-content:space-between;gap:16px;background:var(--papier);border:1px solid var(--linie);border-radius:9px;padding:11px 15px}
.statuszeilen b{font-weight:400;color:var(--tinte3)}
.statuszeilen i{font-style:normal}
.statuszeilen .gut{color:var(--gruen)}.statuszeilen .rot{color:#B83729}
.amberkarte.hell{background:var(--amber)}

@media (max-width:980px){
.zweikacheln,.fragenraster,.dreikarten{grid-template-columns:1fr}
.studioheld,.doktrin{grid-template-columns:1fr}
.studioheld .mockups{height:340px}
.karte.breit{flex-direction:column;align-items:flex-start}
}

/* ---------- Datenblatt: zwei Spalten ---------- */
.datenspalten{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
/* Ohne min-width:0 sprengt die breite Einstellungs-Tafel die Spalte. */
.datenspalten .haupt{min-width:0}
.datenspalten .stapel{display:flex;flex-direction:column;gap:16px}
.datenspalten .stapel>div{border-radius:18px;padding:24px 28px;display:flex;flex-direction:column;gap:10px}
.datenspalten .inarbeit{border:2px dashed var(--linie2)}
.datenspalten .inarbeit p{font-size:13.5px;line-height:1.6;color:var(--tinte2)}
.datenspalten .inarbeit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.datenspalten .inarbeit li{display:flex;align-items:center;gap:10px}
.datenspalten .inarbeit li::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--linie2);flex:none}
.datenspalten .warum{background:var(--nacht);position:relative;overflow:hidden}
.datenspalten .warum::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 90% 0%,rgba(242,178,62,.18),transparent 60%)}
.datenspalten .warum>*{position:relative}
.datenspalten .warum .kicker{color:var(--amber)}
.datenspalten .warum b{font-size:17px;color:#FAF7F2;line-height:1.4}
.datenspalten .warum p{font-size:13px;line-height:1.65;color:rgba(250,247,242,.62)}
.datenspalten .brauchst{background:var(--karte);border:1px solid var(--linie)}
.datenspalten .nachmessen{background:var(--amber);color:#141210}
.datenspalten .nachmessen b{font-size:19px}
.datenspalten .nachmessen p{font-size:13.5px;color:rgba(20,18,16,.78)}
.datenspalten .nachmessen .knopf{align-self:flex-start;margin-top:4px}
@media (max-width:980px){.datenspalten{grid-template-columns:1fr}}

/* ---------- Preise: dunkler Kopf, Kacheln ragen hinein ---------- */
.held.preiskopf{padding-bottom:clamp(150px,16vw,240px)}
/* Die Kacheln ragen in die dunkle Flaeche, duerfen den Lead aber nicht
   verdecken: der Abstand ist die Differenz aus Polster und Ueberlappung. */
.plaene.ragt{margin-top:clamp(-140px,-10vw,-96px);position:relative;z-index:2;align-items:end}
.plaene.ragt .plan{box-shadow:0 24px 60px -24px rgba(245,242,236,.28)}
.plaene.ragt .plan.haupt{box-shadow:0 34px 80px -26px rgba(245,242,236,.5)}

/* ---------- Die Vorfuehrungs-Startseite ----------
   Grundsatz: der Ruhezustand ist der sichtbare Zustand. Jede Animation ist
   eine Schleife auf einem fertigen Bild — faellt CSS-Bewegung aus oder ist
   Bewegung reduziert, steht jede Kachel als stilles Standbild da. */

/* Die grosse Buehne: die echte Box, mittig, anfassbar. */
.buehnenheld{padding-bottom:clamp(46px,5vw,70px)}
.grossgeraet{margin-top:clamp(28px,3.4vw,44px)}
.grossgeraet .geraet{width:min(920px,100%);height:575px;margin:0 auto;border-radius:14px;box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
.grossgeraet .geraet iframe{width:1490px;height:931px;transform:scale(.6174);transform-origin:top left}
/* Auf schmalen Schirmen steht die Box hochkant, wie am Event — quer
   waere sie nur ein Briefschlitz. */
@media (max-width:980px){.grossgeraet .geraet{height:auto;aspect-ratio:4/5;max-height:72vh}.grossgeraet .geraet iframe{width:100%;height:100%;transform:none}}

/* Welt-Knoepfe: echte Verweise, die den Rahmen umfaerben — kein Skript noetig. */
.weltknoepfe{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.weltknoepfe .wort{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.5);margin-right:4px}
.weltknoepfe .wk{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(250,247,242,.28);color:rgba(250,247,242,.85);font-size:13.5px;font-weight:600;text-decoration:none}
.weltknoepfe .wk:hover{border-color:var(--amber);color:#FAF7F2}
/* Dunkel auf Amber. --tinte ist die helle Schrift des dunklen Grundes; auf
   dem Amber-Knopf ergab sie Kontrast 1,68 — der aktive Weltknopf war der
   einzige, den man nicht lesen konnte. Gemessen mit --papier: 8,4. */
.weltknoepfe .wk.an{background:var(--amber);border-color:var(--amber);color:var(--papier);font-weight:700}
/* Auf heller Flaeche (Erlebnis-Seite) drehen die Knoepfe ihre Farben. */
.wrap .weltknoepfe.hell .wort{color:var(--tinte3)}
.wrap .weltknoepfe.hell .wk{border-color:var(--linie2);color:var(--tinte2)}
.wrap .weltknoepfe.hell .wk:hover{border-color:var(--amber-tinte);color:var(--tinte)}
.wrap .weltknoepfe.hell .wk.an{background:var(--amber);border-color:var(--amber);color:var(--tinte)}

/* ---------- Werkzeug-Kacheln, jede mit laufender Miniatur ---------- */
.werkzeuge{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wz{background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 28px rgba(245,242,236,.05)}
.wz b{font-size:17px;letter-spacing:-.01em}
.wz p{font-size:13px;line-height:1.55;color:var(--tinte2)}
.wz.dunkel{background:var(--nacht);border-color:var(--nacht)}
.wz.dunkel b{color:#FAF7F2}
.wz.dunkel p{color:rgba(250,247,242,.62)}
.wzbuehne{position:relative;height:150px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 100% at 50% 30%,#241d16,#0d0b09 75%);display:flex;align-items:center;justify-content:center}
.wzbuehne.hell{background:var(--papier2)}

/* Countdown-Zahlen: drei Ziffern wechseln sich ab, mit kleinem Schlag. */
.cd-zahl{position:relative;width:70px;height:90px;display:block}
.cd-zahl i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:76px;color:var(--amber);opacity:0;animation:cdz 3s infinite}
.cd-zahl i:nth-child(1){animation-delay:0s;opacity:1}
.cd-zahl i:nth-child(2){animation-delay:1s}
.cd-zahl i:nth-child(3){animation-delay:2s}
@keyframes cdz{0%{opacity:1;transform:scale(1.14)}9%{transform:scale(1)}31%{opacity:1}34%,100%{opacity:0}}
.cd-zahl.klein{width:44px;height:56px}
.cd-zahl.klein i{font-size:44px}

/* Lichtmalerei: die Spur zieht sich selbst. */
.lichtspur{width:82%;height:auto}
.lichtspur path{stroke:var(--amber);stroke-width:4;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:0;filter:drop-shadow(0 0 8px rgba(242,178,62,.65));animation:spur 3.4s ease-in-out infinite}
@keyframes spur{0%{stroke-dashoffset:340}62%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* Druck: das Blatt faehrt aus dem Schlitz. */
.druckschacht{position:relative;width:150px;height:120px;display:block}
.druckschacht::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;border-radius:8px;background:var(--tinte);z-index:2}
.blattfahrt{position:absolute;left:16px;right:16px;top:10px;bottom:0;overflow:hidden;display:block}
.blattfahrt em{position:absolute;left:0;right:0;height:88px;border-radius:4px;background:#FBF8F2;border:1px solid var(--linie);box-shadow:0 10px 24px rgba(245,242,236,.18);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;animation:blatt 3s ease-in-out infinite}
.blattfahrt em::before,.blattfahrt em::after{content:"";border-radius:2px;background:linear-gradient(150deg,#3A3140,#6B4A2E)}
.blattfahrt em::after{background:linear-gradient(200deg,#2A2A36,#52405C)}
.blattfahrt em:nth-child(1){animation-delay:0s}
.blattfahrt em:nth-child(2),.blattfahrt em:nth-child(3),.blattfahrt em:nth-child(4){display:none}
@keyframes blatt{0%{transform:translateY(-96%)}55%,78%{transform:translateY(4%)}100%{transform:translateY(4%);opacity:0}}

/* GIF: drei Bilder in Schleife. */
.gifwechsel{position:relative;width:150px;height:110px;display:block;border-radius:8px;overflow:hidden}
.gifwechsel i{position:absolute;inset:0;opacity:0;animation:gifw 1.8s steps(1) infinite}
.gifwechsel i:nth-child(1){animation-delay:0s}
.gifwechsel i:nth-child(2){animation-delay:.6s}
.gifwechsel i:nth-child(3){animation-delay:1.2s}
@keyframes gifw{0%{opacity:1}33.3%{opacity:0}100%{opacity:0}}

/* Splitscreen: die Trennung wandert. */
.splitflaeche{position:relative;width:150px;height:110px;display:flex;border-radius:8px;overflow:hidden}
.splitflaeche i{display:block;height:100%}
.splitflaeche i:first-child{width:50%;background:linear-gradient(150deg,#3A3140,#6B4A2E);animation:split 3.6s ease-in-out infinite}
.splitflaeche i:last-child{flex:1;background:linear-gradient(200deg,#22303E,#4E7A9E)}
.splitflaeche::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--amber);transform:translateX(-50%);animation:splitlinie 3.6s ease-in-out infinite}
@keyframes split{0%,100%{width:50%}50%{width:64%}}
@keyframes splitlinie{0%,100%{left:50%}50%{left:64%}}

/* QR zum Handy. */
.qrflug{position:relative;width:170px;height:120px;display:block}
.qrflug .qrbild{position:absolute;left:14px;top:24px;width:64px;height:64px;border-radius:8px;background:
conic-gradient(var(--tinte) 25%,transparent 0 50%,var(--tinte) 0 75%,transparent 0) 0 0/22px 22px,#fff;
border:5px solid #fff;box-shadow:0 8px 20px rgba(245,242,236,.18);animation:qrpuls 3s ease-in-out infinite}
.qrflug .handyriss{position:absolute;right:14px;top:12px;width:52px;height:96px;border-radius:12px;border:3px solid var(--tinte);background:var(--karte);display:block}
.qrflug .handyriss::after{content:"";position:absolute;left:7px;right:7px;top:10px;height:36px;border-radius:5px;background:linear-gradient(150deg,#3A3140,#6B4A2E);opacity:0;animation:ankunft 3s ease-in-out infinite}
@keyframes qrpuls{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}}
@keyframes ankunft{0%,35%{opacity:0;transform:translateY(8px)}60%,100%{opacity:1;transform:translateY(0)}}

/* ---------- Fernbedienungs-Szene ---------- */
.fernszene{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(28px,4vw,48px);align-items:center}
.fernszene .text{display:flex;flex-direction:column;gap:12px}
.fernszene h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.015em}
.fernszene .szene{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;min-height:280px}
.fernszene .handy{width:150px;height:250px;background:#0B0B0D;border-radius:22px;border:3px solid #26262C;padding:16px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 70px -24px rgba(0,0,0,.8)}
.fernszene .handy .mini{font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.fernszene .handy .ausloesen{height:56px;border-radius:12px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--tinte);font-weight:800;font-size:13px}
.fernszene .handy .ausloesen.drueckt{animation:druecken 3s ease-in-out infinite}
.fernszene .handy .taste{height:32px;border-radius:9px;border:1.5px solid rgba(250,247,242,.25)}
.fernszene .handy .fuss{margin-top:auto;font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,242,.4);text-align:center}
@keyframes druecken{0%,100%{transform:scale(1)}6%{transform:scale(.93)}12%{transform:scale(1)}}
.fernszene .boxschirm{width:210px;height:150px;border-radius:14px;background:radial-gradient(120% 100% at 50% 30%,#241d16,#0d0b09 75%);border:1px solid rgba(250,247,242,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fernszene .boxschirm .unterzeile{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.5)}

/* ---------- Der Blaetterzug: die echten Vorlagen ziehen vorbei ---------- */
.blattband{overflow:hidden;padding:6px 0 clamp(40px,5vw,64px)}
.blattband .zug{display:flex;gap:18px;width:max-content;animation:zugfahrt 70s linear infinite}
.blattband .bm{display:block;height:150px;flex:none}
.blattband .bm .blattbuehne{display:block;height:100%;width:auto;border-radius:6px;border:1px solid var(--linie);box-shadow:0 10px 26px rgba(245,242,236,.12);position:relative;overflow:hidden;container-type:size}
@keyframes zugfahrt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.blattband:hover .zug{animation-play-state:paused}

/* ---------- Sanftes Auftauchen beim Rollen — nur wo der Browser es kann ---------- */
@supports (animation-timeline: view()) {
  .werkzeuge .wz,.zeitreihe .zeitkarte,.buehnen .buehne3,.dreikarten .karte{
    animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 36%}
  @keyframes auftauchen{from{transform:translateY(22px)}to{transform:none}}
}

/* Wer Bewegung reduziert hat, bekommt die stillen Bilder. */
@media (prefers-reduced-motion:reduce){
  .cd-zahl i,.lichtspur path,.blattfahrt em,.gifwechsel i,.splitflaeche i:first-child,.splitflaeche::after,
  .qrflug .qrbild,.qrflug .handyriss::after,.fernszene .handy .ausloesen.drueckt,.blattband .zug,
  .werkzeuge .wz,.zeitreihe .zeitkarte,.buehnen .buehne3,.dreikarten .karte{animation:none}
  .cd-zahl i:nth-child(1),.gifwechsel i:nth-child(1),.qrflug .handyriss::after{opacity:1}
  .blattfahrt em:nth-child(1){transform:translateY(4%)}
}

@media (max-width:980px){
  .werkzeuge{grid-template-columns:1fr 1fr}
  .fernszene{grid-template-columns:1fr}
}
@media (max-width:620px){.werkzeuge{grid-template-columns:1fr}}

/* ---------- Showroom-Bausteine ---------- */
/* Die Werkzeug-Reihe der Dreier-Formel: Kacheln mit laufender Miniatur. */
.werkzeuge.formel{grid-template-columns:repeat(3,1fr)}
.werkzeuge .wz .kicker{font-size:10px}
.wz.dunkel{background:var(--karte);border-color:var(--linie)}
.wz.dunkel b{color:var(--tinte)}
.wz.dunkel p{color:var(--tinte3)}
.druckschacht.dunkelvariante::before{background:#F2B23E}

/* Lichtmalerei-Schaufenster */
.lichtbuehne{position:relative;border-radius:24px;background:radial-gradient(560px 320px at 72% 30%,rgba(242,178,62,.16),transparent 65%),var(--karte);border:1px solid var(--linie);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;gap:12px;overflow:hidden;min-height:280px;justify-content:flex-end}
.lichtbuehne .text{display:flex;flex-direction:column;gap:10px;max-width:46ch;position:relative}
.lichtbuehne h2{font-size:clamp(26px,3.2vw,38px)}
.lichtbuehne p{font-size:14.5px;line-height:1.65;color:var(--tinte2)}
.lichtspur.gross{position:absolute;right:24px;top:26px;width:min(520px,52%);height:auto}
.lichtspur.gross path{stroke:var(--amber);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;filter:drop-shadow(0 0 12px rgba(242,178,62,.65));animation:spurgross 4.2s ease-in-out infinite}
@keyframes spurgross{0%{stroke-dashoffset:900}62%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* Sechs Gruende */
.gruende{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gruende>div{border-top:2px solid var(--amber);padding:16px 4px 0;display:flex;flex-direction:column;gap:6px}
.gruende b{font-size:16px}
.gruende span{font-size:12.5px;line-height:1.6;color:var(--tinte3)}

/* Anlass-Teaser */
.anlassreihe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.anlasskarte{position:relative;border-radius:18px;border:1px solid var(--linie);padding:22px 24px 24px;display:flex;flex-direction:column;gap:7px;min-height:150px;justify-content:flex-end;overflow:hidden;color:var(--tinte)}
.anlasskarte:hover{color:var(--tinte);filter:brightness(1.12)}
.anlasskarte .schein{position:absolute;inset:0;pointer-events:none;animation:scheinpuls 4.6s ease-in-out infinite}
.anlasskarte b{font-size:15.5px;line-height:1.35;position:relative}
.anlasskarte .kicker{position:relative}
@keyframes scheinpuls{0%,100%{opacity:.75}50%{opacity:1}}

/* Bereichs- und Modus-Waehler */
/* display setzt die :checked-Regel — hier nur die Anordnung, sonst staende alles offen */
.bereichstafel,.modustafel{flex-direction:column;gap:16px}
.wahl.moduswahl.bereiche,.wahl.moduswahl.modineu{display:flex;flex-direction:column;align-items:stretch;gap:26px}
.wahl.bereiche .tafel,.wahl.modineu .tafel{padding:26px 30px;border-radius:18px}
.wahl.bereiche .chips,.wahl.modineu .chips{display:flex;flex-wrap:wrap;gap:9px}
.btkopf{display:flex;align-items:baseline;gap:16px}
.btkopf h3{font-size:26px}
.punkteraster{display:grid;grid-template-columns:1fr 1fr;gap:4px 40px}
.punktzeile{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.punktzeile i{width:7px;height:7px;border-radius:50%;flex-shrink:0;transform:translateY(-1px);display:block}
.punktzeile div{display:flex;flex-direction:column;gap:2px}
.punktzeile b{font-size:14.5px}
.punktzeile span{font-size:12.5px;line-height:1.55;color:var(--tinte3)}
.moduswahl .chips label .mz{display:inline-flex;margin-right:7px;transform:translateY(2px);color:currentColor}
.moduswahl .chips label .bald{display:inline-block;width:7px;height:7px;border-radius:50%;border:2px solid var(--linie2);margin-left:8px}
.mtkopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mtkopf .mgross{width:64px;height:64px;border-radius:16px;background:rgba(242,178,62,.1);border:1px solid rgba(242,178,62,.35);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.mtkopf h3{font-size:26px;flex:1}
.mtkopf .stand{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.mtkopf .stand.an{color:var(--amber)}
.mtkopf .stand.bald{color:var(--tinte3)}
.modustafel .gast{font-size:15px;line-height:1.7;color:var(--tinte2);max-width:60ch}
.reglerliste{display:flex;flex-direction:column;gap:9px}
.reglerliste span{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--tinte2)}
.reglerliste i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;display:block}

/* Anlass-Grosskarten */
.anlassgross{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.ak{border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.ak .akkopf{height:130px;position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 14px}
.ak .akkopf b{font-size:28px;font-weight:800}
.ak>p{padding:20px 26px 0;font-size:14px;line-height:1.65}
.ak .akchips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 26px 24px}
.ak .akchips span{padding:8px 14px;border-radius:999px;font-size:11.5px;font-weight:600}

/* Preisreihe */
/* Der Preis eines einzelnen Moduls — eine Zahl, kein Kartenstapel.
   Steht auf jeder Modulseite in der Amber-Karte am Fuss. */
.preis{font-size:46px;font-weight:800;letter-spacing:-.025em;line-height:1;display:flex;align-items:baseline;gap:9px}
.preis span{font-size:14px;font-weight:600;letter-spacing:0;opacity:.7}
.preisreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;align-items:end;text-align:left}
.preiskarte{background:var(--karte);border:1px solid var(--linie);border-radius:22px;padding:30px 32px;display:flex;flex-direction:column;gap:12px;min-height:320px}
.preiskarte .betragzeile{display:flex;align-items:baseline;gap:7px}
.preiskarte .betragzeile b{font-size:50px;font-weight:800;letter-spacing:-.025em}
.preiskarte .betragzeile i{font-style:normal;font-size:13px;color:var(--tinte3)}
.preiskarte .boxen{font-size:14.5px}
.preiskarte p{font-size:13px;line-height:1.6;color:var(--tinte3)}
.preiskarte .knopf{margin-top:auto;justify-content:center}
.preiskarte.haupt{background:linear-gradient(170deg,#1A1610,#0E0C09);border:1.5px solid var(--amber);min-height:370px;position:relative;overflow:hidden}
.preiskarte.haupt::before{content:"";position:absolute;inset:0;background:radial-gradient(340px 240px at 85% 0%,rgba(242,178,62,.2),transparent 60%)}
.preiskarte.haupt>*{position:relative}
.preiskarte.haupt .betragzeile b{font-size:58px}
.preiskarte .hauptzeile{display:flex;align-items:center;justify-content:space-between;gap:10px}
.preiskarte .hauptzeile em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(242,178,62,.15);border:1px solid rgba(242,178,62,.5);color:var(--amber)}

/* Enthalten-Liste und Fragenkarte */
.enthalten{display:grid;grid-template-columns:1fr 1fr;gap:3px 30px}
.enthalten span{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie);font-size:13.5px}
.enthalten i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;display:block}
.fragenkarte{gap:10px}
.fragenkarte details{background:rgba(245,242,236,.03);border:1px solid var(--linie);border-radius:14px;padding:0}
.fragenkarte details[open]{border-color:rgba(242,178,62,.5)}
.fragenkarte summary{list-style:none;cursor:pointer;padding:15px 20px;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:space-between}
.fragenkarte summary::-webkit-details-marker{display:none}
.fragenkarte summary::after{content:"+";font-size:18px;color:var(--amber)}
.fragenkarte details[open] summary::after{content:"−"}
.fragenkarte details p{padding:0 20px 16px;font-size:13px;line-height:1.6;color:var(--tinte3)}

/* Vermieter-Strecke */
.strecke{display:flex;flex-direction:column;margin-top:34px}
.etappe{display:flex;gap:40px;padding:26px 0;border-top:1px solid var(--linie);align-items:baseline}
.etappe:last-child{border-bottom:1px solid var(--linie)}
.etappe .em{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);width:150px;flex-shrink:0}
.etappe b{font-size:20px}
.etappe p{margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--tinte3);max-width:70ch}

/* Fussgitter mit vier Spalten */
.fussgitter.fuenf{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}

@media (max-width:980px){
.werkzeuge.formel,.gruende,.preisreihe{grid-template-columns:1fr}
.anlassreihe{grid-template-columns:1fr 1fr}
.anlassgross{grid-template-columns:1fr}
.punkteraster,.enthalten{grid-template-columns:1fr}
.etappe{flex-direction:column;gap:8px}
.fussgitter.fuenf{grid-template-columns:1fr 1fr}
.lichtspur.gross{position:static;width:100%}
}
@media (max-width:620px){.anlassreihe{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lichtspur.gross path,.anlasskarte .schein{animation:none}}

/* ---- Bildstrecke: was am Ende des Abends herauskommt ----------------
   Die Fotos liegen unter /assets/bilder. Ohne Skript stehen sie da —
   die Einblendung ist Zugabe, kein Vorhang. */
.bildband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bildband figure{margin:0;border-radius:16px;overflow:hidden;background:var(--karte);border:1px solid var(--linie);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.bildband figure:hover{transform:translateY(-6px)}
.bildband img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.bildband figure.hoch{grid-row:span 2}
.bildband figure.hoch img{aspect-ratio:2/3}
.bildunterschrift{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinte3);opacity:.75}
/* Das Saalbild traegt den Kopf der Seite. */
.saalband{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--linie)}
.saalband img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.saalband .darauf{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,4vw,42px);
  background:linear-gradient(to top,rgba(11,11,13,.92),rgba(11,11,13,.55) 55%,transparent)}
.saalband .darauf h3{font-size:clamp(20px,2.6vw,34px);margin:0 0 8px;letter-spacing:-.02em}
.saalband .darauf p{margin:0;font-size:14px;line-height:1.6;color:var(--tinte2);max-width:56ch}
@media (max-width:980px){.bildband{grid-template-columns:repeat(2,1fr)}.bildband figure.hoch{grid-row:span 1}.bildband figure.hoch img{aspect-ratio:3/2}}

/* ---- Produktbilder: Oberflaechen und Druckvorlagen ------------------
   Die Aufnahmen kommen aus der laufenden Software (assets/bilder/schirm),
   die Vorlagen aus demselben Zeichner wie im Studio. */
.schirmbild{margin:0}
.schirmbild .rahmen{border-radius:18px;overflow:hidden;border:1px solid var(--linie);
  background:var(--karte);box-shadow:0 30px 70px -40px rgba(0,0,0,.85)}
.schirmbild img{display:block;width:100%;height:auto}
.schirmbild figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinte3)}
/* Ein hohes Bild darf oben stehen bleiben, statt zu strecken. */
.schirmbild.hoch .rahmen{max-height:520px;overflow:hidden}
.schirmbild.hoch img{object-fit:cover;object-position:top}

.schirmpaar{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.schirmreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.vorlagenband{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.vorlagenband figure{margin:0;display:flex;flex-direction:column;gap:8px}
.vorlagenband img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--linie);background:#fff;box-shadow:0 14px 30px -20px rgba(0,0,0,.75);
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.vorlagenband figure:hover img{transform:translateY(-5px)}
.vorlagenband figcaption{font-size:11.5px;color:var(--tinte3);text-align:center}
.vorlagenband.alle{grid-template-columns:repeat(8,1fr);gap:12px}
.vorlagenband.alle figcaption{display:none}

@media (max-width:1100px){.vorlagenband{grid-template-columns:repeat(4,1fr)}.vorlagenband.alle{grid-template-columns:repeat(5,1fr)}}
@media (max-width:820px){.schirmpaar,.schirmreihe{grid-template-columns:1fr}
  .vorlagenband{grid-template-columns:repeat(3,1fr)}.vorlagenband.alle{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.vorlagenband figure:hover img,.bildband figure:hover{transform:none}}

/* Zwei Blaetter nebeneinander, gross genug zum Ansehen. */
.schaustueck{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.schaustueck img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;
  border:1px solid var(--linie);box-shadow:0 26px 60px -34px rgba(0,0,0,.8)}
@media (max-width:820px){.schaustueck{grid-template-columns:1fr}}

/* Der Saal hinter dem Kopf: die Box steht im Raum, die Schrift davor.
   Das Bild traegt keine Aussage — faellt es aus, bleibt der Kopf lesbar. */
.held.mitsaal{position:relative;isolation:isolate}
.held.mitsaal .saalgrund{position:absolute;inset:0;overflow:hidden;z-index:-1}
.held.mitsaal .saalgrund img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:.38;filter:saturate(.85)}
.held.mitsaal .saalgrund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,11,13,.72) 0%,rgba(11,11,13,.86) 42%,var(--grund) 88%)}
@media (max-width:820px){.held.mitsaal .saalgrund img{opacity:.28}}