/* ============================================================
   DIRK MUCHOW — DER ERKLÄRER  ·  /speaker/
   Eigene Bühne, gleiche CI: tiefdunkler Saal, ein Spot, das
   Orange nur als Signal. Ruhiger als die Hauptseite — mehr
   Fläche, weniger Bewegung, größere Zwischenräume.
   Alles lokal, null externe Requests (Fonts: ../fonts/).
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO — identisch zur Hauptseite) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-italic-latin.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:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Grundlagen ---------- */
:root{
  --bg:        #07090d;
  --bg-hoch:   #0b0e14;
  --karte:     #10141c;
  --linie:     rgba(232,234,240,.09);
  --linie-gold:rgba(247,146,30,.32);
  --ink:       #eceef3;
  --ink-mild:  #b9bec9;
  --ink-leise: #828a98;
  --orange:    #f7921e;
  --orange-tief:#b96a06;
  --gruen-ok:  #79c98e;
  --breite:    1140px;
  --rand:      clamp(1.2rem, 4vw, 3rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg);
  color:var(--ink);
  font:400 1.05rem/1.7 'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--orange);color:#0b0800}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.1;font-weight:750;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);text-wrap:balance}
section{padding:clamp(4.5rem,9vw,7.5rem) var(--rand)}
.innen{max-width:var(--breite);margin:0 auto}
.eyebrow{
  font-size:.76rem;font-weight:650;letter-spacing:.3em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.2rem;
}
.lead{color:var(--ink-mild);max-width:47rem;font-size:1.12rem;margin-top:1.1rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:.9rem 1.8rem;border-radius:.4rem;
  font-weight:650;font-size:.98rem;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-solid{background:var(--orange);color:#160d00}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(247,146,30,.35)}
.btn-gross{font-size:1.12rem;padding:1.05rem 2.1rem;border-radius:.5rem}
.btn-ghost{border-color:var(--linie);color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn:active{transform:translateY(0)}

/* ---------- Klartext-Brief: Abo-Band ----------
   Die Speaker-Seite fuehrt zur Buchung — aber wer noch nicht bucht, soll
   wenigstens den Brief abonnieren. Ruhiges, warmes Band als zweiter Weg. */
.abo-band{padding:4.5rem var(--rand);background:linear-gradient(120deg,#12161f 0%,#191206 100%);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abo-innen{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.abo-text{max-width:40rem}
.abo-text h2{margin:.2rem 0 .5rem}
.abo-text p{color:var(--ink-mild)}
.abo-band .eyebrow{color:var(--orange)}
@media (max-width:760px){
  .abo-band{padding:3rem var(--rand)}
  .abo-innen .btn{width:100%;text-align:center}
}
button.btn{font-family:inherit}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--rand);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.fest{background:rgba(7,9,13,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
.nav-brand{font-weight:850;letter-spacing:.02em;text-decoration:none;font-size:1.02rem}
.nav-brand span{color:var(--orange)}
.nav-brand em{font-style:normal;color:var(--ink-leise);font-weight:500}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{text-decoration:none;font-size:.92rem;font-weight:550;color:var(--ink-mild);transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
/* Ausdruecklicher Startseite-Knopf ganz links (aeltere Besucher wissen oft
   nicht, dass das Logo zurueckfuehrt) — gleiche Optik wie auf der Startseite. */
.nav-links .nav-home{
  color:var(--ink);border:1px solid var(--linie);border-radius:.35rem;
  padding:.42rem .8rem;font-weight:650;
}
.nav-links .nav-home:hover{border-color:var(--orange);color:var(--orange)}
.nav-links .nav-cta{
  color:var(--orange);border:1px solid rgba(247,146,30,.4);
  padding:.42rem .95rem;border-radius:.35rem;font-weight:700;
}
.nav-links .nav-cta:hover{background:var(--orange);color:#160d00}
.nav-burger{display:none;background:none;border:none;color:var(--ink);font-size:1.5rem;cursor:pointer}

/* ---------- Hero: die Sezier-Szene ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:5rem;
  /* Bühnenlicht: ein Spot von schräg oben, sonst Dunkel */
  background:
    radial-gradient(58% 74% at 68% 30%, rgba(247,146,30,.10) 0%, rgba(247,146,30,.035) 42%, transparent 70%),
    radial-gradient(120% 90% at 30% 55%, #0c1017 0%, var(--bg) 64%);
}
.hero::before{ /* Lichtkegel, sehr leise */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:conic-gradient(from 196deg at 74% -12%, transparent 42%, rgba(236,238,243,.05) 50%, transparent 58%);
}
.hero::after{ /* Bühnenboden-Reflex */
  content:'';position:absolute;left:0;right:0;bottom:0;height:26%;z-index:2;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
/* ---------- Rev. 6: Die Wand der 1.000 Sendungen ----------
   12 flache Reihen aus 6 zweizeiligen Sprites (assets/wand/). Kacheln
   bewusst klein (~140 px) — Beiwerk in der Masse, keine Galerie.
   Endlos-Drift: .lauf trägt zwei identische Segmente und fährt per
   Transform auf −50 % (GPU, kein Canvas). */
.kachelwand{position:absolute;inset:0;z-index:0;overflow:hidden;
  --rh:clamp(56px, 8.1svh, 108px);   /* Reihenhöhe ≈ Kachel 100–193 px breit */
  --fuge:clamp(3px, .45svh, 6px);
}
.reihe{
  position:absolute;left:0;right:0;height:var(--rh);
  overflow:hidden;
}
.r1{top:0}.r2{top:calc((var(--rh) + var(--fuge)) * 1)}
.r3{top:calc((var(--rh) + var(--fuge)) * 2)}.r4{top:calc((var(--rh) + var(--fuge)) * 3)}
.r5{top:calc((var(--rh) + var(--fuge)) * 4)}.r6{top:calc((var(--rh) + var(--fuge)) * 5)}
.r7{top:calc((var(--rh) + var(--fuge)) * 6)}.r8{top:calc((var(--rh) + var(--fuge)) * 7)}
.r9{top:calc((var(--rh) + var(--fuge)) * 8)}.r10{top:calc((var(--rh) + var(--fuge)) * 9)}
.r11{top:calc((var(--rh) + var(--fuge)) * 10)}.r12{top:calc((var(--rh) + var(--fuge)) * 11)}
.lauf{
  display:flex;height:100%;width:max-content;will-change:transform;
  animation:wanddrift var(--dauer,110s) linear infinite;
}
@keyframes wanddrift{to{transform:translateX(-50%)}}
/* Tempo + Richtung: benachbarte Reihen gegenläufig, leicht verschieden */
.r1 .lauf{--dauer:118s}.r2 .lauf{--dauer:132s;animation-direction:reverse}
.r3 .lauf{--dauer:104s}.r4 .lauf{--dauer:144s;animation-direction:reverse}
.r5 .lauf{--dauer:112s}.r6 .lauf{--dauer:126s;animation-direction:reverse}
.r7 .lauf{--dauer:98s}.r8 .lauf{--dauer:138s;animation-direction:reverse}
.r9 .lauf{--dauer:108s}.r10 .lauf{--dauer:150s;animation-direction:reverse}
.r11 .lauf{--dauer:122s}.r12 .lauf{--dauer:134s;animation-direction:reverse}
/* Mauerwerk-Versatz */
.r2 .lauf,.r6 .lauf,.r10 .lauf{margin-left:calc(var(--rh) * -.9)}
.r4 .lauf,.r8 .lauf,.r12 .lauf{margin-left:calc(var(--rh) * -1.6)}
/* Segment = 80 Kacheln einer Sprite-Zeile; Sprite hat 2 Zeilen (16000×224),
   der Wrapper blendet die jeweils andere aus. Kachel-Anzeigebreite =
   Reihenhöhe × 200/112. */
.seg{
  display:block;flex:none;height:100%;overflow:hidden;
  width:calc(var(--rh) * 142.857);   /* 80 Kacheln × (200/112) × rh */
}
.seg img{
  display:block;width:100%;height:auto;
  filter:brightness(.42) saturate(.72);
  opacity:0;transition:opacity 1.1s ease;
}
.seg img.da{opacity:1}
.seg.unten img{transform:translateY(-50%)}
/* Dunkel-Schleier: unten/links stärker, Kacheln bleiben Beiwerk */
.wand-schleier{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,9,13,.92) 0%, rgba(7,9,13,.78) 44%, rgba(7,9,13,.52) 100%),
    linear-gradient(0deg, rgba(7,9,13,.92) 0%, rgba(7,9,13,.35) 46%, rgba(7,9,13,.30) 100%);
}
/* Maus-Licht: ein weicher Spot hellt die Wand lokal an (kein Disco) */
.wandlicht{
  position:absolute;width:46vmin;height:46vmin;left:0;top:0;
  margin:-23vmin 0 0 -23vmin;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,226,180,.16), rgba(255,196,120,.06) 55%, transparent 72%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;
  will-change:transform;pointer-events:none;
}
.hero:hover .wandlicht{opacity:1}
/* Wand-Beschriftung: klein und präzise */
.wand-zahl{
  position:absolute;right:clamp(1rem,3vw,2.6rem);bottom:1.1rem;z-index:3;
  color:var(--ink-leise);font-size:.82rem;letter-spacing:.04em;
}
.wand-zahl b{color:var(--ink-mild);font-weight:750}

@media (prefers-reduced-motion: reduce){
  .lauf{animation:none}
  .wandlicht{display:none}
}
.hero.ruhig .lauf{animation:none}
.hero.ruhig .wandlicht{display:none}

.hero-innen{
  position:relative;z-index:3;max-width:var(--breite);margin:0 auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem;align-items:end;
}
.hero-copy{padding:4rem 0 6rem}
.hero-copy .eyebrow{margin-bottom:1.6rem}
.hero-kicker{
  font-family:'Fraunces',serif;font-style:italic;font-weight:430;
  color:var(--orange);font-size:clamp(1.5rem,2.8vw,2.2rem);
  letter-spacing:-.01em;margin-bottom:.6rem;
}
.hero-titel{font-size:clamp(2.5rem,5.6vw,4.5rem);font-weight:850;letter-spacing:-.03em;line-height:1.06}
.hero-titel .ht-z{display:block}
.hero-titel em{
  font-family:'Fraunces',serif;font-style:italic;font-weight:460;
  letter-spacing:0;
}
.hero-felder{
  margin-top:2.2rem;display:flex;gap:.6rem;flex-wrap:wrap;
}
.feld-chip{
  border:1px solid var(--linie);border-radius:2rem;padding:.45rem 1.05rem;
  font-size:.9rem;color:var(--ink-mild);letter-spacing:.02em;
}
.feld-chip b{color:var(--ink);font-weight:650}
.hero-line{margin-top:2.2rem;color:var(--ink-mild);font-size:1.16rem;max-width:34rem}
.hero-line b{color:var(--ink);font-weight:650}
.hero-actions{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero-fussnote{margin-top:2.6rem;font-size:.9rem;color:var(--ink-leise);max-width:32rem}
.hero-fussnote em{font-family:'Fraunces',serif;color:var(--ink-mild)}
.hero-bild{position:relative;align-self:end;min-height:420px}
/* Rev. 4: Das Porträt ist der scharfe, ruhige Fixpunkt — echtes Foto,
   dezenter Kontrast-Punch, tiefer Schatten, feiner warmer Saum.
   Immer sichtbar; die Animation passiert im Raum davor. */
.hero-bild .p-rahmen{
  position:absolute;bottom:0;right:clamp(-30px,-2vw,0px);
  height:min(80svh,660px);width:fit-content;
}
.hero-bild img{
  height:100%;width:auto;max-width:none;display:block;
  filter:contrast(1.04) saturate(.96)
         drop-shadow(0 0 30px rgba(0,0,0,.72))
         drop-shadow(0 0 110px rgba(247,146,30,.14));
}
.hero-bild picture{display:block;height:100%}
/* Story-Zeile am Porträt */
.p-zeile{
  position:absolute;left:-4%;bottom:1.2rem;z-index:2;max-width:96%;
  font-family:'Fraunces',serif;font-style:italic;font-size:1.02rem;
  color:var(--ink-mild);
  background:rgba(7,9,13,.62);backdrop-filter:blur(3px);
  padding:.28em .75em;border-radius:.35em;
}
.p-zeile b{color:var(--orange);font-weight:650}
/* Warmer Glow hinter dem Porträt — hebt das blaue Hemd von der Wand ab */
.hero-bild .p-rahmen::before{
  content:'';position:absolute;inset:-12% -18% 0 -18%;z-index:-1;
  background:radial-gradient(58% 62% at 50% 46%,
    rgba(247,146,30,.22), rgba(247,146,30,.08) 55%, transparent 75%);
  filter:blur(6px);
}
.hero-weiter{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:4;
  color:var(--ink-leise);text-decoration:none;font-size:1.3rem;
}
.hero-weiter:hover{color:var(--orange)}

/* ---------- Leiste: belegte Zahlen ---------- */
.beleg-band{
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--bg-hoch);
  padding:2.2rem var(--rand);
}
.beleg-innen{
  max-width:var(--breite);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
}
.beleg-stat strong{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em}
.beleg-stat span{color:var(--ink-leise);font-size:.88rem;line-height:1.45;display:block;margin-top:.25rem}
.beleg-quelle{max-width:var(--breite);margin:1.4rem auto 0;color:var(--ink-leise);font-size:.82rem}

/* ---------- Themen-Säulen ---------- */
.themen .kopf{max-width:47rem}
.saeulen{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.saeule{
  position:relative;background:var(--karte);border:1px solid var(--linie);border-radius:.8rem;
  padding:2.4rem 2.2rem 2.2rem;overflow:hidden;
}
.saeule::after{
  content:attr(data-mark);position:absolute;top:-1.6rem;right:.4rem;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:9rem;color:rgba(247,146,30,.07);pointer-events:none;line-height:1;
}
.saeule h3{font-size:1.45rem;margin-bottom:.4rem}
.saeule .untertitel{color:var(--ink-leise);font-size:.95rem;margin-bottom:1.6rem}
.saeule ul{list-style:none;display:grid;gap:1.1rem}
.saeule li{padding-left:1.4rem;position:relative;color:var(--ink-mild)}
.saeule li::before{content:'—';position:absolute;left:0;color:var(--orange)}
.saeule li b{color:var(--ink);font-weight:650;display:block}
.saeule li span{font-size:.95rem}

/* ---------- Prognosen-Wand ---------- */
.wand{background:var(--bg-hoch);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.wand .kopf{max-width:49rem}
.wand h2 .datiert{font-family:'Fraunces',serif;font-style:italic;font-weight:420;color:var(--orange)}
.methodik{
  margin-top:2rem;border:1px solid var(--linie-gold);border-radius:.7rem;
  padding:.9rem 1.5rem;max-width:49rem;
  color:var(--ink-mild);font-size:.95rem;background:rgba(247,146,30,.04);
}
.methodik b{color:var(--ink)}
/* Zusammengeklappt: nur eine dezente Zeile — Details auf Klick */
.methodik summary{
  cursor:pointer;list-style:none;color:var(--ink-leise);
  font-size:.88rem;letter-spacing:.04em;user-select:none;
}
.methodik summary::before{content:'▸ ';color:var(--orange)}
.methodik[open] summary::before{content:'▾ '}
.methodik summary::-webkit-details-marker{display:none}
.methodik summary:hover{color:var(--ink-mild)}
.methodik p{margin:.9rem 0 .2rem}

.eintraege{margin-top:3.6rem;display:grid;gap:0;position:relative}
.eintrag{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:2.2rem;
  padding:2.8rem 0;border-top:1px solid var(--linie);
}
.eintrag:last-child{border-bottom:1px solid var(--linie)}
.e-datum{color:var(--ink-leise);font-size:.9rem;line-height:1.5;padding-top:.5rem}
.e-datum .tag{display:block;color:var(--ink);font-weight:750;font-size:1.12rem;letter-spacing:.01em}
.e-datum .nr{display:block;margin-top:.9rem;font-size:.78rem;letter-spacing:.22em;color:var(--orange)}
.e-inhalt blockquote{
  font-family:'Fraunces',serif;font-style:italic;font-weight:430;
  font-size:clamp(1.18rem,2vw,1.5rem);line-height:1.5;color:var(--ink);
  text-wrap:pretty;
}
.e-inhalt blockquote::before{content:'„'}
.e-inhalt blockquote::after{content:'“'}
.e-sendung{margin-top:.8rem;color:var(--ink-leise);font-size:.88rem}
.e-eintritt{
  margin-top:1.5rem;background:var(--karte);border:1px solid var(--linie);
  border-left:2px solid var(--orange);border-radius:.5rem;
  padding:1.15rem 1.3rem;
}
.e-eintritt p{color:var(--ink-mild);font-size:.98rem}
.e-eintritt p b{color:var(--ink)}
.badge{
  display:inline-block;font-size:.74rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2rem;padding:.3rem .85rem;margin-bottom:.7rem;
}
.badge-voll{background:rgba(247,146,30,.14);color:var(--orange);border:1px solid rgba(247,146,30,.45)}
.badge-teil{background:transparent;color:var(--ink-mild);border:1px solid var(--linie)}
.e-quellen{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.e-quellen a{
  color:var(--ink-leise);font-size:.86rem;text-decoration:none;
  border-bottom:1px dotted var(--ink-leise);padding-bottom:.1rem;
  transition:color .15s ease,border-color .15s ease;
}
.e-quellen a:hover{color:var(--orange);border-color:var(--orange)}
.e-quellen a::after{content:' ↗';font-size:.8em}
.wand-fuss{margin-top:2.6rem;color:var(--ink-leise);font-size:.88rem;max-width:49rem}

/* ---------- Warum ---------- */
.warum .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem;align-items:start}
.warum h2{margin-bottom:1rem}
.warum .absatz{color:var(--ink-mild);margin-top:1.1rem}
.warum .absatz b{color:var(--ink)}
.warum-punkte{display:grid;gap:1.3rem;margin-top:.4rem}
.w-punkt{background:var(--karte);border:1px solid var(--linie);border-radius:.7rem;padding:1.4rem 1.5rem}
.w-punkt h3{font-size:1.05rem;margin-bottom:.35rem}
.w-punkt h3::before{content:'·';color:var(--orange);margin-right:.5rem;font-weight:900}
.w-punkt p{color:var(--ink-mild);font-size:.96rem}

/* ---------- Einblicke (Video-Reel, Facade) ---------- */
.reel-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.reel-item .facade{
  position:relative;aspect-ratio:16/9;width:100%;
  border:1px solid var(--linie);border-radius:.7rem;cursor:pointer;overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(247,146,30,.14), transparent 55%),
    linear-gradient(160deg,#141926 0%, #0b0e14 70%);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, transform .2s ease;
  font-family:inherit;color:inherit;text-align:center;padding:1rem;
}
.reel-item .facade:hover{border-color:var(--linie-gold);transform:translateY(-3px)}
.facade .play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  background:rgba(247,146,30,.92);color:#160d00;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 10px 34px rgba(247,146,30,.35);
  transition:transform .2s ease;
}
.facade:hover .play{transform:scale(1.08)}
.facade .f-thema{
  position:absolute;top:.9rem;left:.9rem;
  font-size:.74rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}
.facade .f-titel{
  position:absolute;left:.9rem;right:.9rem;bottom:.9rem;
  font-size:.92rem;color:var(--ink-mild);line-height:1.4;text-align:left;
}
.reel-item iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:.7rem;display:block}
.reel-item .r-unter{margin-top:.7rem;color:var(--ink-leise);font-size:.86rem}
.reel-hinweis{margin-top:1.6rem;color:var(--ink-leise);font-size:.85rem;max-width:49rem}

/* ---------- Buchung ---------- */
.buchung{background:var(--bg-hoch);border-top:1px solid var(--linie)}
.b-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;align-items:start}
.b-side h2{margin-bottom:1rem}
.b-side p{color:var(--ink-mild)}
.b-side .formate{margin-top:1.8rem;display:grid;gap:.7rem;list-style:none}
.b-side .formate li{color:var(--ink-mild);padding-left:1.4rem;position:relative;font-size:.98rem}
.b-side .formate li::before{content:'—';position:absolute;left:0;color:var(--orange)}
.b-form{display:grid;gap:1.1rem;background:var(--karte);border:1px solid var(--linie);border-radius:.8rem;padding:2rem}
.hp{position:absolute !important;left:-9999px !important;opacity:0;height:0;width:0;pointer-events:none}
.field{position:relative}
/* Gleiche Lesbarkeitsregel wie auf der Startseite: das Feld muss als Feld
   erkennbar sein (Rahmen 3,2:1 gegen die Feldflaeche), Hoehe mindestens 48px. */
.field input,.field textarea,.field select{
  width:100%;background:#1a1f29;border:1px solid #656e7e;border-radius:.45rem;
  color:var(--ink);font:inherit;font-size:1rem;padding:1.15rem 1rem .65rem;min-height:3.2rem;
}
.field textarea{resize:vertical;min-height:120px}
.field label{
  position:absolute;left:1rem;top:.82rem;color:var(--ink-leise);font-size:.98rem;
  pointer-events:none;transition:all .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,146,30,.3);
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,.field select.gefuellt + label{
  top:.28rem;font-size:.68rem;letter-spacing:.08em;color:var(--orange);text-transform:uppercase;
}
.field select{appearance:none;padding-top:1.15rem;cursor:pointer}
.b-zeile{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;line-height:1.5;
  color:var(--ink-mild);cursor:pointer;padding:.35rem 0}
.consent input{width:1.3rem;height:1.3rem;min-height:0;flex:none;margin-top:.1rem;accent-color:var(--orange)}
.consent a{color:var(--ink)}
.form-msg{min-height:1.3rem;font-size:.92rem}
.form-msg.ok{color:var(--gruen-ok)}
.form-msg.err{color:#e08c8c}
.b-direkt{margin-top:1.4rem;color:var(--ink-leise);font-size:.88rem}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--linie);padding:2.2rem var(--rand);font-size:.88rem;color:var(--ink-leise)}
.f-inner{max-width:var(--breite);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.footer nav{display:flex;gap:1.4rem}
.footer a{color:var(--ink-leise);text-decoration:none}
.footer a:hover{color:var(--ink)}

/* ---------- Reveal (dezent) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Responsiv ---------- */
@media (max-width: 980px){
  .hero-innen{grid-template-columns:1fr}
  /* Mobil: Porträt oben als ruhiger Fixpunkt, Text darunter;
     Wand: 4 Reihen, langsamer — kein Überlauf (Reihen sind geclippt) */
  /* Mobil (Rev. 8b): Porträt ist normales Fluss-Element VOR dem Text —
     Bild und Text können sich auf keinem Gerät mehr überlagern.
     object-fit hält das Bild strikt in seiner 33svh-Box (iPhone-Fix:
     die Kette height:100% + max-width:100% lief auf iOS aus der Box). */
  .hero-bild{
    display:block;position:relative;top:auto;left:auto;right:auto;
    height:33svh;min-height:0;align-self:auto;order:-1;margin-top:72px;
  }
  .hero-bild .p-rahmen{position:relative;bottom:auto;right:auto;height:100%;width:100%;margin:0}
  .hero-bild picture{height:100%}
  .hero-bild img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom}
  .p-zeile{left:3%;right:3%;transform:none;bottom:.6rem;max-width:none;width:auto;font-size:.94rem;text-align:center}
  .hero-copy{padding-top:1.4rem}
  .wand{--rh:clamp(48px, 10svh, 84px);--fuge:4px}
  .reihe:nth-child(n+5){display:none}
  .r1 .lauf{--dauer:170s}.r2 .lauf{--dauer:196s}
  .r3 .lauf{--dauer:158s}.r4 .lauf{--dauer:208s}
  .wandlicht{display:none}
  .wand-zahl{right:1rem;bottom:.7rem;font-size:.74rem}
  .beleg-innen{grid-template-columns:repeat(2,1fr)}
  .saeulen{grid-template-columns:1fr}
  .warum .grid{grid-template-columns:1fr;gap:2.4rem}
  .reel-grid{grid-template-columns:1fr}
  .b-grid{grid-template-columns:1fr;gap:2.4rem}
  .hero-statik{left:6%;right:6%;top:11%;height:17%}
}
@media (max-width: 760px){
  .nav-links{
    position:fixed;inset:0 0 auto 0;top:56px;flex-direction:column;gap:0;
    background:rgba(7,9,13,.97);backdrop-filter:blur(16px);
    display:none;padding:1rem var(--rand) 1.6rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.8rem 0;width:100%;border-bottom:1px solid var(--linie)}
  .nav-links .nav-cta{border:none;padding:.8rem 0}
  .nav-burger{display:block}
  .eintrag{grid-template-columns:1fr;gap:1rem;padding:2.2rem 0}
  .e-datum{display:flex;gap:1rem;align-items:baseline;padding:0}
  .e-datum .nr{margin:0;order:-1}
  .b-zeile{grid-template-columns:1fr}
}

/* ---------- Druck: die Wand als Dossier ---------- */
@media print{
  body{background:#fff;color:#111}
  .nav,.hero,.beleg-band,.themen,.warum,.reel,.buchung,.footer,.hero-weiter{display:none !important}
  .wand{background:#fff;border:0;padding:1cm 0}
  .wand h2,.e-inhalt blockquote,.e-datum .tag{color:#111}
  .methodik,.e-eintritt{border-color:#bbb;background:#fff}
  .e-eintritt p,.e-sendung,.e-datum,.wand-fuss,.badge-teil{color:#333}
  .badge-voll{color:#b96a06;background:#fff;border-color:#b96a06}
  .e-quellen a{color:#333;border-color:#999}
  .e-quellen a[href]::after{content:' (' attr(href) ')';font-size:.7em;word-break:break-all}
}

/* ---------- Max: KI-Ansprechpartner-Box (Muster gutegartentipps) ---------- */
.max-box{
  margin-top:1.8rem;background:var(--karte);border:1px solid var(--linie);
  border-left:2px solid var(--orange);border-radius:.7rem;padding:1.3rem 1.4rem;
}
.mb-kopf{display:flex;gap:.9rem;align-items:center}
.mb-kopf img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--linie)}
.mb-kicker{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.mb-name{font-weight:750;font-size:1.05rem}
.mb-text{margin-top:.9rem;color:var(--ink-mild);font-size:.95rem;line-height:1.6}
.mb-text b{color:var(--ink)}
.mb-mail{margin-top:.7rem;font-size:.9rem;color:var(--ink-leise)}
.mb-mail a{color:var(--ink-mild)}

/* Sprachumschalter DE|EN, dezent */
.nav-links .sprachwahl{
  font-size:.8rem;font-weight:750;letter-spacing:.08em;color:var(--ink-leise);
  border:1px solid var(--linie);border-radius:.35rem;padding:.3rem .6rem;
}
.nav-links .sprachwahl:hover{color:var(--orange);border-color:var(--orange)}