/* ==========================================================================
   Laptop und Küchentisch · Designsystem "Auf Sendung" (Phase 6)
   Quelle der Wahrheit: docs/agency/06-designsystem.md
   Aufbau: 1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Komponenten · 6 Motion · 7 Responsive
   ========================================================================== */

/* ---------- 1 Fonts (selbst gehostet, keine Google Fonts) ---------- */
@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff2) format("woff2"),url(../fonts/inter-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-700.woff2) format("woff2"),url(../fonts/inter-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-800.woff2) format("woff2"),url(../fonts/inter-800.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Allura";src:url(../fonts/allura-400.woff2) format("woff2"),url(../fonts/allura-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@property --luk-angle{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 2 Tokens ---------- */
:root{
  /* Farben: Rollen (Kontrast auf Papier / Weiss, gemessen nach WCAG 2.2) */
  --c-ink:#0E1122;          /* Text, Linien, dunkle Knöpfe        17.78 / 18.72 */
  --c-paper:#FFFFFF;        /* Seitengrund: reines Weiss (Look-Korrektur 12.10.2026) */
  --c-surface:#FFFFFF;      /* Karten, Dock, Felder                              */
  --c-grey:#5C6174;         /* Fliesstext sekundär                 5.84 / 6.15  */
  --c-label:#6B7084;        /* Labels, Metadaten, Hinweise         4.66 / 4.91  */
  --c-soft:#969AAA;         /* NUR Deko: Achsen, deaktiviert. Nie Text. 2.66  */
  --c-field:#7E8294;        /* Feldrand (UI, 3:1)                  3.62 / 3.81  */
  --c-line:rgba(14,17,34,.11);
  --c-line-2:rgba(14,17,34,.16);
  --c-rule:var(--c-ink);    /* Tintenlinie 1.5 px über Sektionen */
  --c-focus:#6A47E8;        /* Fokusring                           5.42 / 5.71  */
  --c-onair:#EC4899;        /* Punkt "Auf Sendung"                 3.35 (UI)    */
  --c-error:#B4123E;        /* Fehlermeldungen                     6.44 / 6.78  */
  --c-ok:#0F7F73;           /* Bestätigung                         4.63 / 4.88  */
  --c-hover:rgba(14,17,34,.025);   /* Hover auf Weiss: Hauch Tinte */

  /* Licht: helle Neon-Verläufe für Flächen, Ränder, Ringe, Balken (nie für Fliesstext) */
  --g-verlauf:linear-gradient(90deg,#00B8A6,#7C5CF6 52%,#EC4899);   /* Marke, Sender, neueste Folge */
  --g-magenta:linear-gradient(90deg,#D01E78,#EC4899 55%,#FA7D78);   /* Liebe und Erlebnisse */
  --g-tuerkis:linear-gradient(90deg,#00A896,#00BAD0 50%,#2878EB);   /* Business und Tools */
  --g-lila:linear-gradient(90deg,#6E50F0,#965CF6 50%,#C46EFA);      /* Geld und Paar */
  --g-ring:conic-gradient(from var(--luk-angle),#00B8A6,#7C5CF6,#EC4899,#00B8A6);

  /* Grosse Farbflächen (Phase 9): helle Teilstrecken der Markenverläufe, Text darauf immer Tinte.
     Kontrast Tinte auf dem dunkelsten Stopp: verlauf/lila 4.6 (#965CF6), tuerkis 7.5, magenta 5.3 */
  --f-verlauf:linear-gradient(120deg,#00B8A6 0%,#965CF6 52%,#EC4899 100%);
  --f-tuerkis:linear-gradient(120deg,#00B8A6 0%,#00BAD0 100%);
  --f-magenta:linear-gradient(120deg,#EC4899 0%,#FA7D78 100%);
  --f-lila:linear-gradient(120deg,#965CF6 0%,#C46EFA 100%);
  --f:var(--f-verlauf);
  /* zarte Tönung pro Thema (Archiv-Karten) */
  --tint:rgba(124,92,246,.08);

  /* Schrift-Verläufe: tiefere Stopps, jeder Stopp >= 4.4:1 auf Papier (Text und weisse Schrift darauf) */
  --gt-verlauf:linear-gradient(90deg,#0F7F73,#6A47E8 52%,#D61F69);
  --gt-magenta:linear-gradient(90deg,#B0186A,#D01E78 55%,#D61F69);
  --gt-tuerkis:linear-gradient(90deg,#0F7F73,#007C92 50%,#1F6FD6);
  --gt-lila:linear-gradient(90deg,#5B3FD9,#6E50F0 50%,#8B45D6);
  --g-action:var(--gt-verlauf);  /* Hauptknopf mit weisser Schrift: min. 4.88:1 */

  /* Aktives Thema (per .t-* gesetzt) */
  --g:var(--g-verlauf);
  --gt:var(--gt-verlauf);

  /* Typografie */
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-script:"Allura","Snell Roundhand",cursive;
  --fs-hero:clamp(2.5rem,1.6rem + 2.4vw,3.5rem);      /* 40 → 56   Hero-Titel (Reel-Bühne) */
  --fs-d1:clamp(3rem,1rem + 5vw,5.25rem);              /* 48 → 84   grosse Displays */
  --fs-d2:clamp(2.125rem,1.35rem + 3.3vw,4rem);       /* 34 → 64   Sektionstitel */
  --fs-d3:clamp(1.75rem,1.3rem + 1.9vw,2.75rem);      /* 28 → 44   Untertitel, Abo */
  --fs-h4:clamp(1.375rem,1.15rem + .9vw,1.875rem);    /* 22 → 30   Intro-Satz */
  --fs-h5:clamp(1.0625rem,1rem + .3vw,1.1875rem);     /* 17 → 19   Folgentitel */
  --fs-lead:clamp(1.0625rem,.98rem + .4vw,1.25rem);   /* 17 → 20 */
  --fs-body:1.0625rem;                                /* 17 */
  --fs-small:.90625rem;                               /* 14.5 */
  --fs-meta:.8125rem;                                 /* 13 */
  --fs-label:.71875rem;                               /* 11.5, Versalien, gesperrt */
  --fs-script:clamp(3.125rem,1.6rem + 5.6vw,6rem);    /* 50 → 96 Namen */
  --fs-nr:clamp(2.5rem,1.9rem + 1.6vw,3.375rem);      /* 40 → 54 Folgennummer */
  --lh-tight:.92; --lh-head:1.02; --lh-snug:1.22; --lh-body:1.55;
  --tr-d1:-.052em; --tr-d2:-.045em; --tr-d3:-.04em; --tr-h:-.015em; --tr-label:.22em;

  /* Abstände (4er-Raster) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --s-section:clamp(64px,10vw,128px);
  --s-block:clamp(28px,4vw,48px);
  --gut:clamp(16px,4vw,48px);
  --wrap:1240px;
  --col-gap:clamp(20px,2.4vw,32px);

  /* Radien */
  --r-xs:6px; --r-s:12px; --r-m:22px; --r-l:26px; --r-pill:999px;

  /* Schatten und Glow (Glow nur, wo etwas lebt: Play, Dock, aktives Foto) */
  --sh-card:0 18px 40px -26px rgba(14,17,34,.35);
  --sh-dock:0 0 0 1px rgba(14,17,34,.09),0 18px 40px -18px rgba(14,17,34,.35);
  --sh-float:0 14px 30px -16px rgba(14,17,34,.4);
  --glow-btn:0 14px 30px -14px rgba(106,71,232,.75);
  --glow-photo:0 30px 70px -40px rgba(124,92,246,.6);
  --neon:drop-shadow(0 0 3px rgba(124,92,246,.55)) drop-shadow(0 0 12px rgba(236,72,153,.45)) drop-shadow(0 0 28px rgba(0,184,166,.35));   /* Neon-Leuchten für Verlaufsschrift */
  --neon-soft:drop-shadow(0 0 3px rgba(124,92,246,.5)) drop-shadow(0 0 14px rgba(236,72,153,.38)) drop-shadow(0 0 30px rgba(0,184,166,.28));
  --glow-reel:0 0 0 1px rgba(255,255,255,.4),0 30px 60px -25px rgba(124,92,246,.55),0 0 46px -6px rgba(236,72,153,.35);
  --rim:3px;   /* Verlaufsrand um Fotos */

  /* Motion */
  --d-1:150ms; --d-2:250ms; --d-3:400ms; --d-4:700ms; --d-5:1100ms;
  --ease-out:cubic-bezier(.2,.7,.1,1);      /* Standard: alles, was ankommt */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* Flächen, die sich öffnen */
  --ease-in:cubic-bezier(.4,0,1,1);         /* was geht */
  --onair-loop:5s;

  /* Ebenen und Masse */
  --z-nav:40; --z-dock:50; --z-skip:100;
  --dock-h:84px;
  --tap:44px;
}

/* Themen-Hooks: setzen Licht- und Schriftverlauf für alles darin */
.t-verlauf{--g:var(--g-verlauf);--gt:var(--gt-verlauf);--f:var(--f-verlauf);--tint:rgba(124,92,246,.08)}
.t-magenta{--g:var(--g-magenta);--gt:var(--gt-magenta);--f:var(--f-magenta);--tint:rgba(236,72,153,.09)}
.t-tuerkis{--g:var(--g-tuerkis);--gt:var(--gt-tuerkis);--f:var(--f-tuerkis);--tint:rgba(0,186,208,.10)}
.t-lila{--g:var(--g-lila);--gt:var(--gt-lila);--f:var(--f-lila);--tint:rgba(150,92,246,.09)}

/* ---------- 3 Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s-5);scroll-padding-bottom:calc(var(--dock-h) + 32px)}
main,.foot{overflow-x:clip}
body{font-family:var(--f-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-paper);
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
  padding-bottom:calc(var(--dock-h) + 40px)}
/* Kein Schleier im Seitenhintergrund: Weiss pur, Abgrenzung über Linien und Schatten */
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:rgba(124,92,246,.18)}
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--s-3);top:-80px;z-index:var(--z-skip);background:var(--c-ink);color:#fff;padding:10px 14px;border-radius:var(--r-s);text-decoration:none;font-weight:700}
.skip:focus{top:var(--s-3)}

/* Typo-Rollen */
.label{font-size:var(--fs-small);font-weight:700;color:var(--c-grey);line-height:1.4}
.d1{font-size:var(--fs-d1);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--tr-d1)}
.d2{font-size:var(--fs-d2);font-weight:800;line-height:.98;letter-spacing:var(--tr-d2);text-wrap:balance}
.d3{font-size:var(--fs-d3);font-weight:800;line-height:var(--lh-head);letter-spacing:var(--tr-d3);text-wrap:balance}
.h4{font-size:var(--fs-h4);font-weight:800;line-height:1.2;letter-spacing:-.03em}
.h5{font-size:var(--fs-h5);font-weight:800;line-height:var(--lh-snug);letter-spacing:var(--tr-h)}
.lead{font-size:var(--fs-lead);color:var(--c-grey);max-width:34em}
.lead strong{color:var(--c-ink);font-weight:700}
.muted{color:var(--c-grey)}
.meta{font-size:var(--fs-meta);color:var(--c-label);font-weight:700}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0;line-height:1}
/* Verlauf in Schrift: nur ab --fs-h4 oder 700+, immer Schriftverlauf */
.gt{background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  filter:var(--neon)}
.prose p+p{margin-top:var(--s-4)}
.prose{max-width:38em;color:var(--c-grey)}

/* ---------- 4 Layout: Titel tragen die Sektion (keine Labels, keine Haarlinien, keine Nummern) ---------- */
.sec{padding-top:var(--s-section)}
.cols{display:grid;gap:var(--col-gap)}
.cols-8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.cols-6-6{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.cols-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* Sektionskopf: grosser Titel, darunter ein Satz. Variante --split: Titel links, Satz rechts unten bündig */
.head{position:relative;margin-bottom:var(--s-block)}
.head>p{color:var(--c-grey);margin-top:18px;max-width:36em}
.head--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col-gap);align-items:end}
.head--split>p,.head--split>div>p{margin-top:0}
.head .d1,.head .d2{max-width:16ch}

/* Grosse Farbfläche: vollflächig, hell und leuchtend, Text in Tinte. Graue Rollen werden innen zu Tinte (AA). */
.surface{position:relative;overflow:clip;background:var(--f);color:var(--c-ink);padding-block:clamp(72px,10vw,150px);
  --c-grey:var(--c-ink);--c-label:var(--c-ink);--c-line:rgba(14,17,34,.2);--c-line-2:rgba(14,17,34,.42);--c-focus:var(--c-ink);--c-hover:rgba(255,255,255,.28);--c-field:rgba(14,17,34,.55)}
.surface>.wrap{position:relative;z-index:1}
/* Akzentwort auf Farbfläche: Tinte mit weissem Neon-Hof (Verlaufsschrift wäre auf dem Verlauf unsichtbar) */
.surface .gt,.surface .chapter__kw{background:none;color:var(--c-ink);-webkit-text-fill-color:currentColor;filter:none;
  text-shadow:0 0 .18em rgba(255,255,255,.95),0 0 .55em rgba(255,255,255,.75),0 0 1.2em rgba(255,255,255,.5)}
.surface .btn-play{box-shadow:0 0 0 3px #fff,0 18px 40px -16px rgba(14,17,34,.45)}
.surface .link-arrow{border-bottom-color:var(--c-ink)}
/* Riesiges Hintergrundwort, scrollt langsamer (motion.js). Auf Farbfläche weisses Neon, auf Weiss zarter Verlauf. */
.bigword{position:absolute;z-index:0;left:-.05em;top:clamp(8px,2vw,32px);font-weight:800;font-size:clamp(6rem,1rem + 21vw,24rem);line-height:.78;letter-spacing:-.065em;
  white-space:nowrap;color:#fff;opacity:.34;text-shadow:0 0 .06em rgba(255,255,255,.9),0 0 .2em rgba(255,255,255,.6);pointer-events:none;user-select:none;will-change:transform}
.bigword--end{left:auto;right:-.05em}
.bigword--low{top:auto;bottom:clamp(-40px,-2vw,-12px)}
.bigword--ink{color:transparent;background:var(--g-verlauf);-webkit-background-clip:text;background-clip:text;opacity:.12;text-shadow:none}

/* ---------- 5 Komponenten ---------- */

/* 5.1 Navigation (Original-Logo als Bild, nie nachgebaut) */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding-block:22px 18px}
.brand{display:inline-block;line-height:0;text-decoration:none;flex:none}
.brand img{height:34px;width:auto}
.nav__links{list-style:none;display:flex;gap:30px;align-items:center}
.nav__links a{text-decoration:none;font-size:var(--fs-small);font-weight:700;color:var(--c-grey);transition:color var(--d-1)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--c-ink)}
.nav__links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--c-focus)}
.btn-outline{display:inline-flex;align-items:center;min-height:var(--tap);white-space:nowrap;color:var(--c-ink)!important;border:1.5px solid var(--c-line-2);padding:9px 16px;border-radius:var(--r-pill);font-weight:700;text-decoration:none;transition:border-color var(--d-2)}
.btn-outline:hover{border-color:var(--c-ink)}
.nav__right{display:flex;align-items:center;gap:var(--s-2)}
.nav__toggle{display:none;width:var(--tap);height:var(--tap);border-radius:50%;place-items:center;transition:background var(--d-1)}
.nav__toggle:hover{background:rgba(14,17,34,.06)}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--c-ink);position:relative;transition:transform var(--d-2) var(--ease-out),background var(--d-1)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0}
.nav__toggle span::before{top:-6px}.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.nav__sheet{display:none}

/* 5.2 Wochenstreifen, schmal und ruhig (Dienstag 05:00, Europe/Zurich) */
.week{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,3.4fr) repeat(5,minmax(0,1fr));border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.week__day{padding:6px 10px 7px;border-right:1px solid var(--c-line);display:flex;align-items:baseline;gap:8px;position:relative;line-height:1.3;min-width:0}
.week__day:last-child{border-right:0}
.week__day b{font-size:.65625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c-grey)}
.week__day span{font-size:.71875rem;color:var(--c-label)}
.week__day.is-today b,.week__day.is-di b{color:var(--c-ink)}
.week__day.is-today span{color:var(--c-ink);font-weight:700}
.week__day.is-today span::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--c-onair);margin-left:6px;vertical-align:2px}
.week__day.is-di{border-right:0}
.week__day.is-di,.week__next{background:var(--f-verlauf)}
/* Desktop: Dienstag lesbar auf Weiss, der Verlauf nur als leuchtende Linie unten (Handy behält die Verlaufs-Pille) */
@media (min-width:901px){
  .week__day.is-di,.week__next{background:#fff}
  .week__day.is-di::after,.week__next::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--g-verlauf);box-shadow:0 0 10px rgba(124,92,246,.45),0 0 18px rgba(236,72,153,.25)}
}
.week__day.is-di b,.week__day.is-di span,.week__next .week__when{color:var(--c-ink)}
.week__next{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 14px 7px 2px;border-right:1px solid var(--c-line);position:relative;font-size:.78rem;line-height:1.3;white-space:nowrap;min-width:0}
.week__next strong{font-weight:800}
.week__when{color:var(--c-grey);margin-left:4px}
.week__cd{font-weight:700;color:var(--c-ink)}
.week__live{display:none;min-height:24px;align-items:center;gap:6px;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-line-2)}
.week__live i{width:6px;height:6px;border-radius:50%;background:var(--c-onair)}
.week.is-live .week__cd,.week.is-pending .week__cd{display:none}
.week.is-live .week__live{display:inline-flex}

/* 5.3 Hero "Reel-Bühne" (Variante 1): Reel links, rechts Text und Paarfoto mit Namen */
.hero{--rh:max(440px,min(calc(100svh - 250px),690px));display:grid;grid-template-columns:calc(var(--rh) * 9 / 16) minmax(0,1fr);
  grid-template-areas:"reel txt" "reel pic";grid-template-rows:auto minmax(0,1fr);column-gap:clamp(28px,4vw,60px);padding-top:22px;padding-bottom:clamp(40px,7vh,72px)}
.hero__collage{display:contents}
.hero__stage{grid-area:reel;position:relative;height:var(--rh);min-height:440px;margin:0}
.hero__txt{grid-area:txt;display:flex;flex-direction:column;min-width:0}
.hero__title{font-size:var(--fs-hero);font-weight:800;line-height:.98;letter-spacing:-.048em;margin-top:12px;text-wrap:balance}
.hero__title .ln{display:block}
.hero__txt .lead{margin-top:14px;max-width:36em}
.hero__txt .actions{margin-top:18px}
.hero__couple{grid-area:pic;position:relative;display:flex;flex-direction:column;min-height:220px;margin:0;padding:22px 0 30px}
.hero__couple .pic{flex:1;min-height:0;position:relative}
.hero__couple .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--focus-y,26%)}
.hero__names{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;padding:0 7%;pointer-events:none}
.hero__names .script{font-size:clamp(3.125rem,1.6rem + 3.2vw,4.75rem);filter:drop-shadow(0 2px 10px rgba(255,255,255,.9));padding:0 .1em .1em}
/* Personenfoto ohne Rand: weicher Schatten, Radius m */
.pic{border-radius:var(--r-m);overflow:hidden;box-shadow:0 30px 60px -36px rgba(14,17,34,.45);background:#e9e6e1}
.pic img{width:100%;object-fit:cover;object-position:var(--focus-x,50%) var(--focus-y,20%)}
/* Neon-Comic-Illustration: weisser Grund, das Neon-Randlicht steckt in der Zeichnung. Kein Schatten-Kasten, kein Rand. */
.pic--illu{box-shadow:none;background:none}
.chapter__media .pic--illu img{aspect-ratio:1600/1066}

/* Hero-Reel: Highlight der aktuellen Folge, 9:16 mit Verlaufsrand (das Einzige, was sich im Hero bewegt) */
.reel{position:relative;height:100%;margin:0}
.reel__frame{position:relative;height:100%;aspect-ratio:9/16;border-radius:var(--r-l);padding:var(--rim);background:var(--g-verlauf);box-shadow:0 30px 60px -28px rgba(124,92,246,.55),0 0 40px -10px rgba(236,72,153,.3)}
.reel__frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-l) - var(--rim));background:#d9d4d0}
.reel__tagline{position:absolute;right:14px;top:14px;z-index:2;background:rgba(255,255,255,.92);border-radius:var(--r-pill);padding:6px 12px 5px;font-size:.8125rem;font-weight:800;letter-spacing:-.01em}
.reel__ctrl{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;z-index:2}
.reel__btn{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 8px 20px -10px rgba(14,17,34,.5);transition:transform var(--d-2) var(--ease-out)}
.reel__btn:hover{transform:scale(1.06)}
.reel__btn svg{width:18px;height:18px;fill:none;stroke:var(--c-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reel__btn .i-sound-on,.reel__btn.is-on .i-sound-off{display:none}
.reel__btn.is-on .i-sound-on{display:block}
.reel__big{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:var(--g-action);box-shadow:var(--glow-btn);display:none;place-items:center;z-index:2}
.reel__big svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.reel.is-static:not(.is-playing) .reel__big{display:grid}

/* Knöpfe */
.actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:30px}
.hint{margin-top:var(--s-4);font-size:var(--fs-meta);color:var(--c-label)}
.btn-play{display:inline-flex;align-items:center;gap:14px;min-height:60px;background:var(--g-action);color:#fff;font-weight:800;font-size:1rem;line-height:1.2;text-align:left;
  padding:8px 24px 8px 8px;border-radius:var(--r-pill);box-shadow:var(--glow-btn);transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2)}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(106,71,232,.9)}
.btn-play:active{transform:translateY(0) scale(.98)}
.btn-play__ic{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.btn-play__ic svg{width:16px;height:16px;fill:#6A47E8}
.btn-play small{display:block;font-weight:700;font-size:.75rem;opacity:.92;letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);background:var(--c-ink);color:#fff;font-weight:800;font-size:.9375rem;padding:12px 22px;border-radius:var(--r-pill);text-decoration:none;transition:transform var(--d-1) var(--ease-out),opacity var(--d-1)}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.link-arrow{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;font-size:.9375rem;text-decoration:none;border-bottom:1.5px solid var(--c-line-2);transition:border-color var(--d-2)}
.link-arrow:hover{border-color:var(--c-ink)}

/* Play/Pause-Symbole: ein Knopf, zwei Zustände (per .is-playing am Knopf oder Vorfahren) */
.i-pause{display:none}
.is-playing>.i-play,.is-playing .i-play{display:none}
.is-playing>.i-pause,.is-playing .i-pause{display:block}

/* 5.4 Foto mit Verlaufsrand (Köpfe nie anschneiden: object-position y = --focus-y) */
.photo{position:relative;border-radius:var(--r-m);padding:var(--rim);background:var(--g);box-shadow:var(--glow-photo)}
.photo img{border-radius:calc(var(--r-m) - var(--rim));width:100%;object-fit:cover;object-position:var(--focus-x,50%) var(--focus-y,0%)}
.photo--square img{aspect-ratio:1}
.photo--wide img{aspect-ratio:3/2}
.photo__tag{position:relative;margin:-58px 16px 0 -18px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.95);
  border-radius:var(--r-s);padding:12px 12px 12px 16px;box-shadow:var(--sh-float);text-decoration:none;color:inherit;transition:transform var(--d-3) var(--ease-out)}
.photo__tag:hover{transform:translateY(-3px)}
.photo__tag b{font-size:var(--fs-small);font-weight:800;line-height:1.2;display:block}
.photo__tag span{font-size:.75rem;color:var(--c-grey)}
.go{width:34px;height:34px;flex:none;border-radius:50%;background:var(--c-ink);display:grid;place-items:center}
.go svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2}

/* 5.5 Player-Dock mit On-Air-Ring */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:var(--z-dock);max-width:1160px;margin-inline:auto;height:var(--dock-h);border-radius:var(--r-m)}
.dock::before,.dock::after{content:"";position:absolute;inset:-2px;border-radius:calc(var(--r-m) + 2px);opacity:0;background:var(--g-ring);transition:opacity 600ms var(--ease-out);pointer-events:none}
.dock::after{inset:-4px;filter:blur(22px);z-index:-1}
.dock.is-on::before{opacity:1;animation:luk-spin var(--onair-loop) linear infinite}
.dock.is-on::after{opacity:.7;animation:luk-spin var(--onair-loop) linear infinite}
.dock__in{position:relative;height:100%;border-radius:calc(var(--r-m) - 2px);background:var(--c-surface);box-shadow:var(--sh-dock);
  display:grid;grid-template-columns:56px minmax(0,250px) auto minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:0 18px 0 14px}
.dock__cover{width:56px;height:56px;border-radius:var(--r-s);overflow:hidden;background:var(--c-ink)}
.dock__cover img{width:100%;height:100%;object-fit:contain}
.dock__meta{min-width:0;line-height:1.25}
.dock__status{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;font-size:.75rem;font-weight:700;color:var(--c-label)}
.dock__status i{width:7px;height:7px;border-radius:50%;background:var(--c-soft);flex:none}
.dock__status span{overflow:hidden;text-overflow:ellipsis}
.dock.is-on .dock__status{color:var(--c-ink)}
.dock.is-on .dock__status i{background:var(--c-onair);animation:luk-pulse 1.6s ease-out infinite}
.dock__title{font-size:.9375rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;margin-top:2px}
.dock__ctrl{display:flex;align-items:center;gap:6px}
.dock__skip{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;position:relative;transition:background var(--d-1)}
.dock__skip:hover{background:rgba(14,17,34,.06)}
.dock__skip svg{width:22px;height:22px;fill:none;stroke:var(--c-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock__skip em{position:absolute;font-style:normal;font-size:.53rem;font-weight:800;top:17px}
.dock__play{width:54px;height:54px;border-radius:50%;background:var(--c-ink);display:grid;place-items:center;transition:transform var(--d-2) var(--ease-out),background var(--d-3)}
.dock__play:hover{transform:scale(1.05)}
.dock.is-on .dock__play{background:var(--g-action)}
.dock__play svg{width:18px;height:18px;fill:#fff}
.dock__wave{position:relative;min-width:0;height:44px;display:flex;align-items:center;cursor:pointer;border-radius:var(--r-xs)}
.dock__wave .wave{height:40px}
.dock__head{position:absolute;top:2px;bottom:2px;width:2px;border-radius:1px;background:var(--c-ink);left:0;pointer-events:none}
.dock__time{font-size:var(--fs-meta);font-weight:700;color:var(--c-grey);white-space:nowrap}
.dock__time b{color:var(--c-ink)}
.dock__speed{font-size:var(--fs-meta);font-weight:800;border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);padding:6px 10px;min-width:52px;min-height:36px;transition:border-color var(--d-1)}
.dock__speed:hover{border-color:var(--c-ink)}
.dock__bar{display:none}
.dock__keys{position:absolute;bottom:calc(100% + 10px);right:10px;background:var(--c-ink);color:#fff;font-size:.75rem;font-weight:700;padding:8px 12px;border-radius:var(--r-s);opacity:0;transform:translateY(4px);transition:opacity var(--d-2),transform var(--d-2) var(--ease-out);pointer-events:none;white-space:nowrap}
.dock:focus-within .dock__keys{opacity:1;transform:none}
.dock__keys kbd{font:inherit;background:rgba(255,255,255,.16);border-radius:4px;padding:1px 5px}

/* Wellenform (echte Pegel, Basis grau, gespielter Teil im Themenverlauf) */
.wave{display:block;width:100%;height:40px}
.wave .base rect{fill:rgba(14,17,34,.16)}

/* Wir zwei: Paarfoto mit Namen in Allura (nur die Namen) */
.names{display:grid;grid-template-columns:1fr 1fr;margin-top:-34px;position:relative;z-index:2;padding:0 6%}
.names .script{font-size:var(--fs-script);padding:0 .1em .12em}
.names .o{text-align:right}
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);margin-top:18px}
.people p:not(.label){color:var(--c-grey)}
.people .o{text-align:right}
.people .label{margin-bottom:8px}

/* Unsere Geschichte (Phase 9): Einstieg auf Weiss, dann vier Kapitel je auf einer grossen Farbfläche ihres Themas.
   Keine Nummern, keine Striche: der Kapiteltitel steht gross auf der Fläche, das Kapitelwort riesig dahinter. */
.story-head{position:relative;padding-top:var(--s-section);padding-bottom:clamp(56px,8vw,112px)}
.story-head .bigword{top:auto;bottom:clamp(-30px,-1vw,0px)}
.story-head>*:not(.bigword){position:relative;z-index:1}
.story-head .d1{max-width:14ch;text-wrap:balance}
.story-intro{font-size:clamp(1.25rem,1rem + 1vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.35;max-width:32em;color:var(--c-ink);margin-top:clamp(24px,3vw,40px)}
.story{list-style:none}
.chapter{padding-block:clamp(80px,11vw,160px)}
.chapter__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.chapter:nth-child(even) .chapter__in{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.chapter:nth-child(even) .chapter__media{order:2}
.chapter:nth-child(even) .bigword{left:auto;right:-.05em}
.chapter .bigword{top:auto;bottom:clamp(-24px,-1.5vw,-8px)}
.chapter__media{position:relative;will-change:transform}
/* Comic als Bild auf der Fläche: weisses Blatt, leicht gedreht, tiefer Schatten */
.chapter__frame{transform:rotate(-1.6deg);border-radius:var(--r-l);background:#fff;padding:clamp(6px,.8vw,10px);box-shadow:0 50px 90px -40px rgba(14,17,34,.55),0 0 0 1px rgba(255,255,255,.6)}
.chapter:nth-child(even) .chapter__frame{transform:rotate(1.4deg)}
.chapter__frame .pic{border-radius:calc(var(--r-l) - 8px)}
.chapter__media .pic--illu img{aspect-ratio:1600/1066}
.chapter h3{font-size:clamp(2.75rem,.8rem + 5vw,6rem);font-weight:800;letter-spacing:-.06em;line-height:.9}
.chapter__kw{display:block;padding-right:.04em}
.chapter h3 small{display:block;font-size:clamp(1.375rem,1.1rem + 1vw,2rem);letter-spacing:-.03em;font-weight:800;color:var(--c-ink);margin-top:clamp(14px,1.6vw,22px);line-height:1.1}
.chapter p{color:var(--c-ink);margin-top:18px;max-width:30em}
/* Zitat: gross gesetzt statt Strich am Rand */
.q,.chapter p.q{position:relative;margin-top:22px;max-width:24em;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--c-ink);text-wrap:balance}
.q cite{display:block;margin-top:8px;font-style:normal;font-size:var(--fs-small);font-weight:700;letter-spacing:0;color:var(--c-grey)}
.story-head .q{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);margin-top:clamp(28px,4vw,48px)}
.chapter__ref{display:block;margin-top:18px;font-size:var(--fs-small);color:var(--c-ink);font-weight:700}
.chapter__ref button{font-weight:800;color:var(--c-ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:currentColor;text-underline-offset:4px;min-height:44px}
.chapter__ref button:hover{text-decoration-thickness:3px}

/* Neueste Folge: eine weisse Karte, Thumbnail aus der Folge (Variable, Rückfall Artwork) */
.latest{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;background:var(--c-surface);border-radius:var(--r-l);padding:clamp(18px,2.4vw,28px);box-shadow:0 0 0 1px rgba(14,17,34,.07),0 30px 70px -50px rgba(14,17,34,.45)}
.latest__thumb{position:relative;border-radius:18px;overflow:hidden}
.latest__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.latest__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:var(--fs-meta);font-weight:700;color:var(--c-grey)}
.latest__meta .new{margin:0}
.latest h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:12px;text-wrap:balance}
.latest p{color:var(--c-grey);margin-top:12px}
.latest__wave{margin-top:20px;max-width:420px}
.latest .actions{margin-top:20px}
.latest h3 a{text-decoration:none}
.latest h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.latest .hint{margin-top:0}

/* 5.6 Sendeplan-Zeile (ruhig, ohne Wellenform) */
.plan{list-style:none;border-bottom:1px solid var(--c-line)}
.ep{display:grid;grid-template-columns:110px 70px minmax(0,1fr) 120px 64px 48px;gap:20px;align-items:center;
  padding:16px 12px 16px 16px;border-top:1px solid var(--c-line);position:relative;transition:background var(--d-2)}
.ep:hover{background:var(--tint)}
.ep.is-current{background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line),var(--sh-card)}
.ep__date{font-size:var(--fs-meta);color:var(--c-grey);line-height:1.3}
.ep__nr{font-size:2.25rem;font-weight:800;letter-spacing:-.06em;line-height:1;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}
.ep__title{font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.ep__title a{text-decoration:none}
.ep__title a::after{content:"";position:absolute;inset:0}
.ep__title a:focus-visible{outline:0}
.ep:has(.ep__title a:focus-visible){outline:2px solid var(--c-focus);outline-offset:-2px;border-radius:var(--r-s)}
.ep__mobile{display:none;gap:12px;align-items:center;font-size:.75rem;color:var(--c-label);font-weight:700;margin-top:4px;flex-wrap:wrap}
.ep__mobile b{font-weight:800;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}
.new{display:inline-block;vertical-align:3px;margin-left:8px;font-size:.65625rem;font-weight:800;letter-spacing:.16em;color:#fff;background:var(--g-action);padding:3px 9px 2px;border-radius:var(--r-pill)}
.ep__theme{font-size:.84rem;font-weight:800;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.ep__dur{font-size:.875rem;font-weight:700;text-align:right;color:var(--c-grey)}
.legend{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px}
.more{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 0;font-size:var(--fs-small);color:var(--c-grey)}
.pbtn{position:relative;z-index:1;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;flex:none;transition:background var(--d-2)}
.pbtn::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.6px;background:var(--g);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pbtn svg{width:14px;height:14px;fill:var(--c-ink);position:relative}
.pbtn.is-playing{background:var(--g)}
.pbtn.is-playing svg{fill:#fff}

/* 5.7 Sendeprotokoll (alle Folgen als Balken, Höhe = Dauer) */
.proto__bars{position:relative;height:190px;display:flex;align-items:flex-end;gap:3px;border-bottom:1.5px solid var(--c-rule);list-style:none}
.proto__bars li{flex:1 1 0;min-width:2px;height:var(--h);display:flex}
.bar{display:block;width:100%;height:100%;border-radius:3px 3px 0 0;background:rgba(14,17,34,.17);transform-origin:bottom;transition:background var(--d-1)}
.bar:hover,.bar:focus-visible{background:rgba(14,17,34,.5)}
.bar:focus-visible{outline-offset:2px}
.bar.is-current{background:var(--g-verlauf);box-shadow:0 0 16px rgba(124,92,246,.55)}
.proto__bars li.gap{border-left:1px dashed rgba(14,17,34,.2)}
.proto__gap-label{position:absolute;bottom:14px;transform:translateX(-50%) rotate(-90deg);font-size:.625rem;letter-spacing:.18em;font-weight:700;color:var(--c-label);text-transform:uppercase;white-space:nowrap;pointer-events:none}
.proto__axis{display:flex;justify-content:space-between;margin-top:10px;font-size:.75rem;color:var(--c-label);font-weight:700;letter-spacing:.08em}
.tip{position:absolute;bottom:calc(100% + 10px);visibility:hidden;left:0;transform:translateX(-50%);background:var(--c-ink);color:#fff;font-size:.78rem;font-weight:700;padding:7px 11px;border-radius:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--d-1)}
.tip.is-shown{opacity:1;visibility:visible}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;border-top:1px solid var(--c-line)}
.facts>div{padding:16px 18px 0 0}
.facts b{display:block;font-size:clamp(1.625rem,1.2rem + 1.5vw,2.375rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.facts span{font-size:.84rem;color:var(--c-grey)}

/* 5.8 Zitat mit Sprungmarke (aus Richtung B, für Folgenseiten) */
.quote{margin:0;position:relative}
.quote blockquote{margin:0}
.quote__text{display:block;width:100%;text-align:inherit;cursor:pointer;font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;font-size:var(--fs-d3);-webkit-tap-highlight-color:transparent;border-radius:var(--r-s)}
.quote__text:focus-visible{outline-offset:8px}
.quote--big .quote__text{font-size:clamp(2.5rem,1.2rem + 5.4vw,5.5rem);line-height:.95;letter-spacing:-.045em;max-width:13ch}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.quote--right{text-align:right}
.quote--right .quote__text{margin-left:auto}
.quote--right figcaption{justify-content:flex-end}
.quote__ctx{display:block;font-size:var(--fs-small);font-weight:400;letter-spacing:0;color:var(--c-grey);margin-top:10px;line-height:1.45}
.sig{font-family:var(--f-script);font-size:clamp(2.375rem,1.6rem + 2.2vw,3.25rem);line-height:1;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em}
.ava{width:46px;height:46px;border-radius:50%;padding:2px;background:var(--g);flex:none}
.ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* Reibungswort: leuchtet erst, wenn die Stelle läuft oder sichtbar wird */
.spark{position:relative;display:inline-block;white-space:nowrap;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}
.spark::after{content:attr(data-word);position:absolute;inset:0;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;filter:blur(.16em);opacity:0;pointer-events:none;transition:opacity var(--d-4) var(--ease-out)}
.quote.is-live .spark::after,.spark.is-lit::after{opacity:.55}
/* Sprungmarke */
.jump{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:.8125rem;font-weight:800;color:var(--c-grey);
  border:1px solid var(--c-line-2);background:rgba(255,255,255,.75);border-radius:var(--r-pill);padding:7px 12px 7px 8px;cursor:pointer;transition:color var(--d-1),border-color var(--d-1)}
.jump__pi{width:20px;height:20px;border-radius:50%;background:var(--c-ink);display:grid;place-items:center;flex:none}
.jump__pi svg{width:8px;height:8px;fill:#fff;margin-left:1px}
.jump__eq{display:none;gap:2px;align-items:flex-end;height:10px}
.jump__eq i{display:block;width:2px;height:10px;background:#fff;border-radius:1px;transform-origin:bottom}
.jump:hover,.quote:hover .jump{color:var(--c-ink);border-color:var(--c-ink)}
.quote.is-live .jump{color:var(--c-ink);background:linear-gradient(#fff,#fff) padding-box,var(--g) border-box;border:1.5px solid transparent;box-shadow:0 0 18px -4px rgba(124,92,246,.5)}
.quote.is-live .jump__pi{background:var(--g)}
.quote.is-live .jump__pi svg{display:none}
.quote.is-live .jump__eq{display:flex}
.quote.is-live .jump__eq i{animation:luk-eq .9s ease-in-out infinite}
.jump__eq i:nth-child(2){animation-delay:-.3s!important}.jump__eq i:nth-child(3){animation-delay:-.6s!important}

/* 5.9 Folgen-Karte (Archiv, "Ähnliche Folgen") */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s-4)}
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:22px 22px 20px;background:var(--tint);border-radius:var(--r-s);transition:background var(--d-2),transform var(--d-2) var(--ease-out)}
.card:hover{background:var(--c-surface);box-shadow:0 0 0 1.5px var(--c-ink);transform:translateY(-2px)}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card__nr{font-size:var(--fs-nr);font-weight:800;letter-spacing:-.06em;line-height:.9;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}
.card__title{font-size:var(--fs-h5);font-weight:800;line-height:var(--lh-snug);letter-spacing:var(--tr-h)}
.card__title a{text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-m)}
.card:has(.card__title a:focus-visible){outline:2px solid var(--c-focus);outline-offset:3px}
.card__title a:focus-visible{outline:0}
.card p{font-size:var(--fs-small);color:var(--c-grey);line-height:1.45}
.card__meta{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:6px}

/* 5.10 Themen-Chip (Filter, aria-pressed) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-theme{display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 18px;border-radius:var(--r-s);background:var(--tint);
  font-weight:800;font-size:var(--fs-small);color:var(--c-ink);transition:box-shadow var(--d-1),background var(--d-2)}
.chip-theme:hover{box-shadow:0 0 0 1.5px var(--c-ink)}
.chip-theme[aria-pressed="true"]{background:var(--f);box-shadow:0 0 0 1.5px var(--c-ink)}

/* 5.11 Abo-Zeilen und Social */
.abo{margin-top:var(--s-section)}
.abo h2{font-size:clamp(2.5rem,1.3rem + 3.6vw,4.75rem);line-height:.96;letter-spacing:-.05em;max-width:14ch}
.plats{list-style:none;display:grid;gap:10px;align-self:end}
.plats a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--r-l);background:rgba(255,255,255,.9);text-decoration:none;
  box-shadow:0 20px 40px -28px rgba(14,17,34,.5);transition:transform var(--d-3) var(--ease-out),background var(--d-3)}
.plats a:hover{transform:translateX(6px);background:#fff}
.plats .logo{width:34px;height:34px;fill:var(--c-ink)}
.plats b{font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;display:block}
.plats span{display:block;font-size:.84rem;color:var(--c-grey)}
.plats .arr{width:22px;height:22px;stroke:var(--c-ink);fill:none;stroke-width:2}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4)}
.social a{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 18px 10px 12px;border-radius:var(--r-pill);background:var(--c-surface);text-decoration:none;font-weight:700;font-size:var(--fs-small);box-shadow:0 0 0 1px rgba(14,17,34,.12);transition:box-shadow var(--d-1),transform var(--d-1)}
.social a:hover{box-shadow:0 0 0 1.5px var(--c-ink);transform:translateY(-1px)}
.social svg{width:20px;height:20px;fill:var(--c-ink)}
.social small{font-weight:400;color:var(--c-label)}

/* 5.12 Partner-Formular */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-small);font-weight:700;color:var(--c-ink)}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--c-label)}
.field input,.field textarea{font-size:1rem;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-field);border-radius:var(--r-s);padding:12px 14px;min-height:var(--tap);transition:border-color var(--d-1),box-shadow var(--d-1)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--c-focus);box-shadow:0 0 0 3px rgba(106,71,232,.2)}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--c-error);box-shadow:0 0 0 3px rgba(180,18,62,.12)}
.field__err{font-size:var(--fs-meta);font-weight:700;color:var(--c-error);min-height:0}
.surface .field__err,.surface .form__fail{color:var(--c-error);background:#fff;border-radius:var(--r-xs);padding:3px 8px;width:fit-content}
.field__err:empty{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__send{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.form__send small{color:var(--c-label);font-size:var(--fs-meta)}
.form__ok{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-m);background:var(--c-surface);box-shadow:0 0 0 1px var(--c-line)}
.form__ok b{display:block;font-size:var(--fs-h5)}
.form__ok p{color:var(--c-grey);font-size:var(--fs-small)}
.form__ok svg{width:28px;height:28px;flex:none;stroke:var(--c-ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.form__fail{grid-column:1/-1;color:var(--c-error);font-weight:700;font-size:var(--fs-small)}

/* 5.13 Fusszeile */
.foot{padding-top:var(--s-section);padding-bottom:40px}
.foot--partner{padding-top:0}
.foot__partner{margin-top:var(--s-section)}
/* Zwei Farbflächen hintereinander ohne weissen Balken dazwischen */
main:has(>.surface:last-child)+.foot .foot__partner,.surface+.surface{margin-top:0}
.foot__partner .bigword{top:auto;bottom:clamp(-30px,-2vw,-8px)}
.foot__partner .form{align-self:start;background:rgba(255,255,255,.55);border-radius:var(--r-l);padding:clamp(18px,2.4vw,32px)}
.foot__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:clamp(48px,6vw,72px)}
.foot__bottom .brand img{height:30px}
.foot__nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:var(--fs-small);font-weight:700;color:var(--c-grey)}
.foot__nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.foot__nav a:hover{color:var(--c-ink)}
.foot small{display:block;width:100%;color:var(--c-label);font-size:.78rem}

/* Neon-Symbole (Linien im Verlauf, wie Karussells und Reels) */
.sym{width:58px;height:58px}
.sym *{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 6 Motion ---------- */
@keyframes luk-spin{to{--luk-angle:360deg}}
@keyframes luk-pulse{0%{box-shadow:0 0 0 0 rgba(236,72,153,.6)}100%{box-shadow:0 0 0 9px rgba(236,72,153,0)}}
@keyframes luk-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes luk-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes luk-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes luk-ignite{0%{opacity:0}8%{opacity:.6}12%{opacity:.1}20%{opacity:.7}26%{opacity:.25}40%,100%{opacity:.55}}
@keyframes luk-light{from{background-color:rgba(255,255,255,0)}}
@keyframes luk-grow{from{transform:scaleY(0)}}
@keyframes luk-failsafe{to{opacity:1;transform:none}}

/* Reveal per IntersectionObserver (motion.js). Ohne JS oder ohne Motion: sofort sichtbar. */
.has-motion.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out);transition-delay:calc(var(--i,0) * 40ms)}
.has-motion.reveal-on [data-reveal].is-in{opacity:1;transform:none}
.has-motion.reveal-on .proto__bars .bar{transform:scaleY(0)}
.has-motion.reveal-on .proto__bars.is-in .bar{animation:luk-grow var(--d-4) var(--ease-out) both;animation-delay:calc(var(--i,0) * 12ms);transform:none}
.has-motion .spark.is-lit::after{animation:luk-ignite 1.1s steps(1,end) both}
/* Foto: kein clip-path auf dem beobachteten Element (IntersectionObserver und Lazy Loading sähen es nicht) */
.has-motion.reveal-on .photo[data-reveal]{transform:translateY(28px) scale(.985);transition:opacity var(--d-5) var(--ease-io),transform var(--d-5) var(--ease-io)}
/* Hero-Intro rein in CSS (Phase 9, LCP): Reel und Paarfoto stehen sofort, nur Text und Namen gleiten kurz herein.
   Kein Nachladen von GSAP für das Intro; Inhalte sind nie länger als 0.9 s unsichtbar. */
.has-motion [data-intro]{animation:luk-fade-up .6s var(--ease-out) both}
.has-motion .hero__title[data-intro]{animation-delay:.08s}
.has-motion .hero__txt .lead[data-intro]{animation-delay:.16s}
.has-motion .hero__txt .actions[data-intro]{animation-delay:.24s}
.has-motion .hero__names .script{animation:luk-fade-up .7s .3s var(--ease-out) both}
.has-motion .hero__names .script+.script{animation-delay:.42s}
.intro-done [data-intro],.intro-done .hero__names .script{animation:none!important}

/* ---------- 7 Responsive (mobile Anpassungen) ---------- */
@media (max-width:1100px){
  .ep{grid-template-columns:96px 56px minmax(0,1fr) 110px 44px;gap:16px}
  .ep__dur{display:none}
}
@media (max-width:1000px) and (min-width:761px){
  .dock__in{grid-template-columns:56px minmax(0,200px) auto minmax(60px,1fr) auto}
  .dock__speed{display:none}
}
@media (max-width:900px){
  .nav__links li:not(.keep){display:none}
  .nav__toggle{display:grid}
  .nav__sheet{display:none;position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:100%;z-index:var(--z-nav);background:var(--c-paper);border-top:1px solid var(--c-line);border-bottom:1.5px solid var(--c-rule);padding:6px var(--gut) 18px;box-shadow:var(--sh-float)}
  .nav__sheet.is-open{display:block}
  .nav__sheet a{display:flex;align-items:center;min-height:52px;font-size:1.375rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--c-line)}
  .cols-8-4,.cols-6-6,.cols-5-7,.head--split{grid-template-columns:minmax(0,1fr)}
  .head--split{align-items:start}
  /* Hero als Collage: Reel gross, Paarfoto darübergelegt */
  .hero{display:flex;flex-direction:column;padding-top:14px}
  .hero__txt{display:contents}
  .hero__title{order:2;font-size:clamp(2rem,1rem + 4.6vw,3.25rem);margin-top:8px}
  /* Haupt-CTA direkt unter den Titel: auf 375/390 über dem Dock, auf 768 über dem Falz */
  .hero__txt .actions{order:3;margin-top:16px}
  .hero__title .ln{display:inline}
  .hero__collage{order:4;display:block;position:relative;margin-top:24px}
  .hero__txt .lead{order:5;margin-top:56px}
  .hero__stage{height:auto;min-height:0;width:60%}
  .reel__frame{height:auto;width:100%}
  .reel__frame video{height:auto;aspect-ratio:9/16}
  .reel__ctrl{left:12px;bottom:12px}
  .reel__tagline{right:auto;left:12px;top:12px;font-size:.75rem;padding:5px 10px 4px}
  .hero__couple{position:absolute;right:0;bottom:-30px;width:60%;min-height:0;padding:0;transform:rotate(2deg)}
  .hero__couple .pic{border:4px solid #fff;border-radius:20px;flex:none}
  .hero__couple .pic img{position:static;aspect-ratio:3/2;height:auto}
  .hero__names{bottom:-30px;padding:0 2% 0 0;justify-content:space-around}
  .hero__names .script{font-size:clamp(2rem,1rem + 4.4vw,3.125rem)}
  /* Wochenstreifen wird eine ruhige Zeile */
  .week{display:block}
  .week__day{display:none}
  .week__next{border-right:0}
  .week__next{padding:7px 12px 8px;border-radius:var(--r-xs)}
  .latest{grid-template-columns:minmax(0,1fr)}
  .ep{grid-template-columns:48px minmax(0,1fr) 44px;gap:14px;padding:14px 4px 14px 12px}
  .ep__nr{font-size:1.5rem}
  .ep__title{font-size:.97rem}
  .ep__date,.ep__theme,.ep__dur{display:none}
  .ep__mobile{display:flex}
  .facts>div{padding-right:10px}
  .chapter__in,.chapter:nth-child(even) .chapter__in{grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,48px)}
  .chapter:nth-child(even) .chapter__media{order:0}
  .chapter .bigword,.chapter:nth-child(even) .bigword{top:clamp(4px,2vw,16px);bottom:auto}
  .chapter{padding-block:clamp(64px,14vw,96px)}
  .people{grid-template-columns:1fr;gap:26px}
  .people .o{text-align:left}
  .names{margin-top:6px}
  .reel__side{display:none}
  .quote--right{text-align:left}
  .quote--right .quote__text{margin-left:0}
  .quote--right figcaption{justify-content:flex-start;flex-direction:row-reverse}
}
@media (max-width:760px){
  :root{--dock-h:72px}
  .dock{left:8px;right:8px;bottom:8px}
  .dock__in{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:0 10px;overflow:hidden}
  .dock__cover{width:48px;height:48px}
  .dock__wave,.dock__time,.dock__speed,.dock__skip--back,.dock__keys{display:none}
  .dock__play{width:48px;height:48px}
  .dock__bar{display:block;position:absolute;left:0;right:0;top:0;height:3px;background:rgba(14,17,34,.08)}
  .dock__bar i{display:block;height:100%;width:100%;background:var(--g-verlauf);transform-origin:left;transform:scaleX(0)}
  .facts{grid-template-columns:1fr}
  .facts>div{padding:14px 0 0}
  .form{grid-template-columns:1fr}
  .proto__bars{height:140px;gap:2px}
  .bar{border-radius:2px 2px 0 0}
  .proto__gap-label{display:none}
  .brand img{height:28px}
}
@media (max-width:420px){
  .nav{gap:10px}
  .nav .brand img{height:22px}
  .nav .brand{min-width:0;flex:0 1 auto}
  .nav .brand img{height:auto;width:100%;max-width:172px}
  .nav__links .keep{display:none}   /* "Partner werden" steht im Menü-Blatt */
  .week__next{font-size:.75rem}
  .week__when{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .dock.is-on::before{animation:none}
  .dock.is-on::after{animation:none;opacity:.5}
  .dock.is-on .dock__status i{animation:none;box-shadow:0 0 0 3px rgba(236,72,153,.25)}
}
@media (forced-colors:active){
  .bigword{display:none}
  .gt,.spark,.sig,.card__nr,.chapter__kw,.ep__nr,.ep__theme,.ep__mobile b{filter:none;background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .dock__in{border:1px solid CanvasText}
}

.foot__bottom small a{color:inherit;text-decoration:underline;text-underline-offset:3px}