/* =====================================================================
   Die Rechthaberinnen – gemeinsames Stylesheet

   MOBILE FIRST.
   Die Grundregeln beschreiben das Handy. Größere Bildschirme kommen über
   `@media (min-width: …)` dazu. Das ist keine Stilfrage: Die Mehrheit der
   Podcast-Hörerinnen kommt vom Telefon, und in dieser Reihenfolge lädt ein
   Handy nur die Regeln, die es wirklich braucht – statt erst ein
   Desktop-Layout aufzubauen und es danach wieder abzuräumen.

   Breakpoints (bewusst wenige, an Inhalten statt an Gerätenamen orientiert):
     Basis        Telefon, eine Spalte
     ≥  560px     zwei Spalten für kurze Kacheln
     ≥  760px     Tablet: Karten und Hosts nebeneinander
     ≥  900px     Hauptnavigation ausgeklappt, Hero zweispaltig
     ≥ 1060px     Inhaltsseiten mit Seitenspalte

   SELEKTOREN: keine nackten Element-Selektoren in Komponenten
   (also nicht `.aside span`, sondern `.who-role`). Ein `.aside a` hatte
   zuvor den Newsletter-Button unlesbar gemacht, weil es spezifischer ist
   als `.btn-primary`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Schriften – lokal gehostet (DSGVO)
   Cormorant Garamond und Inter, SIL Open Font License 1.1.
   Bewusst KEIN Aufruf von fonts.googleapis.com / fonts.gstatic.com:
   dabei würde die IP-Adresse der Besucher ohne Einwilligung an Google
   in die USA übertragen (vgl. LG München I, 20.01.2022, 3 O 17493/20).
   Beide Familien sind Variable Fonts – eine Datei deckt alle Schnitte ab.
--------------------------------------------------------------------- */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('fonts/cormorant-garamond-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;
}
@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;
}

/* ---------------------------------------------------------------------
   2. Tokens
--------------------------------------------------------------------- */
:root{
  /* --gold ist rein dekorativ (Linien, Rahmen). Für Text auf hellem Grund
     wird --gold-deep genutzt: #C2A15B erreicht auf #F1EDE4 nur 2,1:1 und
     fällt damit durch jede WCAG-Anforderung. #7E6330 kommt auf 4,8:1. */
  --navy:#16243A;--navy-soft:#1F2A3C;--gold:#C2A15B;--gold-deep:#7E6330;
  --paper:#F1EDE4;--paper-light:#FAF7F0;--white:#FFFFFF;--ink:#1B2536;--muted:#555D6B;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;

  /* Höhe der klebenden Kopfzeile. Steht als Variable da, damit
     Sprungmarken und die klebende Seitenspalte nicht auseinanderlaufen. */
  --header-h:60px;
  --gap:20px;          /* seitlicher Rand */
  --section-y:56px;    /* vertikaler Abstand zwischen Abschnitten */
}

/* ---------------------------------------------------------------------
   3. Grundlagen
--------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* Kein overflow-x:hidden am body: das erzeugt einen Scroll-Container und
   kann position:sticky an Kopfzeile und Seitenspalte aushebeln. Statt zu
   kaschieren, wird Ueberlauf an der Quelle vermieden (siehe .table-scroll). */
img,svg{max-width:100%;height:auto}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 var(--gap)}
.eyebrow{
  font-family:var(--body);font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);line-height:1.5
}
/* Verhindert Trennung innerhalb zusammengesetzter Wörter wie "E-Mail".
   Browser trennen dort sonst am Bindestrich. */
.nowrap{white-space:nowrap}
/* E-Mail-Adressen nie mitten im Domainnamen umbrechen */
a[href^="mailto:"]{white-space:nowrap}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px
}
.skip-link{
  position:absolute;top:0;left:0;z-index:100;
  background:var(--navy);color:var(--paper-light);
  padding:12px 20px;text-decoration:none;font-size:.85rem;
  transform:translateY(-120%)  /* statt left:-9999px – das kann selbst
     seitliches Scrollen erzeugen */
}
.skip-link:focus{transform:translateY(0)}

section{padding:var(--section-y) 0;scroll-margin-top:calc(var(--header-h) + 10px)}
[id]{scroll-margin-top:calc(var(--header-h) + 10px)}

/* ---------------------------------------------------------------------
   4. Kopfbereich & Navigation
   Basis = Burger-Menü. Die waagerechte Navigation kommt erst ab 900px,
   wo sie ohne Umbruch nebeneinander passt.
--------------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(241,237,228,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(22,36,58,.08)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:1;min-width:0}
.mono{
  width:34px;height:34px;border-radius:50%;background:var(--navy);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column
}
.mono span{font-family:var(--display);color:var(--white);font-size:.74rem;font-weight:500;line-height:.92}
.mono .bar{width:18px;height:1px;background:var(--gold);margin:1px 0}
.brand-name{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.03em;
  color:var(--navy);font-weight:600;line-height:1.15
}

.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  width:44px;height:44px;flex-shrink:0;align-items:center  /* volle Trefferfläche */
}
.burger span{display:block;width:24px;height:2px;background:var(--navy);transition:.3s}

/* Ausgeklapptes Menü: volle Breite, große Zeilen zum Tippen */
#menu{display:none;list-style:none}
#menu.open{
  display:flex;flex-direction:column;align-items:stretch;
  position:absolute;top:var(--header-h);left:0;right:0;
  background:var(--paper);padding:8px var(--gap) 20px;
  border-bottom:1px solid rgba(22,36,58,.12);
  box-shadow:0 18px 30px -22px rgba(22,36,58,.5)
}
#menu.open li{border-bottom:1px solid rgba(22,36,58,.08)}
#menu.open li:last-child{border-bottom:none;margin-top:12px}
#menu a{
  display:block;text-decoration:none;color:var(--navy-soft);
  font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:15px 2px  /* ergibt ~50px Zeilenhöhe */
}
#menu a[aria-current="page"]{color:var(--navy)}
#menu .nav-cta{
  background:var(--navy);color:var(--paper-light);text-align:center;
  border-radius:2px;padding:15px 20px;font-size:.8rem
}

/* ---------------------------------------------------------------------
   5. Buttons
   min-height 48px: Empfehlung für sicher treffbare Schaltflächen.
--------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-family:var(--body);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:14px 24px;min-height:48px;border-radius:2px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;text-align:center
}
.btn-primary{background:var(--navy);color:var(--paper-light);border:1px solid var(--navy)}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid rgba(22,36,58,.35)}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:var(--paper-light)}
/* Auf schmalen Schirmen füllen Buttons die Breite – nebeneinander wären
   sie zu schmal für die Beschriftung. */
.btns{display:flex;flex-direction:column;gap:12px;align-items:stretch}

/* ---------------------------------------------------------------------
   6. Startseite – Hero
   Auf dem Handy steht die Aussage zuerst, das Signet danach. Vorher lag
   die Grafik per `order:-1` oben und schob die Überschrift aus dem Bild.
--------------------------------------------------------------------- */
.hero{position:relative;padding:40px 0 52px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.hero-copy{order:1}
.hero-visual{order:2;display:flex;justify-content:center;align-items:flex-end}
.hero h1{
  font-family:var(--display);font-weight:500;line-height:1.02;
  color:var(--navy);font-size:clamp(2.1rem,9.5vw,4.4rem);margin:14px 0 4px;
  text-transform:uppercase;letter-spacing:.03em
}
.hero h1 .inn{color:var(--gold-deep)}
.hero h1 .die{
  display:block;font-size:.32em;letter-spacing:.3em;font-weight:500;
  color:var(--navy-soft);margin-bottom:.4em;text-transform:uppercase
}
.draw-rule{height:1.5px;background:var(--gold);width:0;margin:22px 0;animation:draw 1.1s .5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes draw{to{width:160px}}
.tagline{
  font-family:var(--display);font-size:clamp(1.25rem,5vw,1.75rem);
  color:var(--navy-soft);font-style:italic;margin-bottom:16px;line-height:1.25
}
.hero p.lead{font-size:1rem;color:var(--muted);max-width:34em;margin-bottom:28px}

/* Hero-Foto, freigestellt (tools/freisteller.php).
   Kein Rahmen, kein Schatten, kein Hintergrund: die Personen stehen
   unmittelbar auf der Seitenfläche. Auf dem Handy unter dem Text,
   ab 900px gross an der rechten Kante und am unteren Rand verankert. */
/* Bezugsrahmen für das Siegel: genau so groß wie das Bild, damit das
   Siegel bei jeder Breite dieselbe Lage zum Motiv behält. */
.hero-figur{width:min(340px,86vw)}
.hero-bild{display:block;width:100%;height:auto}

/* Podcast-Siegel oben rechts. Der Kreis ragt bewusst über die Ecke
   hinaus und wird vom overflow:hidden des Hero beschnitten - genau wie
   im Originalfoto. Auf schmalen Schirmen kleiner, damit die Vorzeile
   daneben nicht gequetscht wird. */
/* Zwei Plätze, je nach Breite genau einer sichtbar:
   .siegel-fluss  – im Fluss über dem Bild, rechtsbündig (schmale Schirme)
   .siegel-ecke   – absolut in der oberen rechten Ecke des Hero (ab 900px) */
.siegel{pointer-events:none;display:block;width:112px;aspect-ratio:1}
.siegel svg{display:block;width:100%;height:100%;overflow:visible}
.siegel-ecke{display:none}
.siegel-fluss{margin:0 0 12px auto}

/* Bildrahmen als Spalte: Siegel oben rechts, darunter das Motiv. */
.hero-figur{display:flex;flex-direction:column;align-items:flex-end}
.siegel svg{display:block;width:100%;height:100%;overflow:visible}
.siegel-kreis{fill:none;stroke:var(--gold);stroke-width:1.1}
.siegel-mikro{
  fill:none;stroke:var(--gold);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round
}
.siegel-wort{
  fill:var(--navy);font-family:var(--body);font-size:15px;font-weight:500;
  letter-spacing:4.2px
}

/* Animation: Der Kreis zeichnet sich, danach treten Mikrofon und Wort
   hervor. Gleiche Bildsprache wie die Goldlinie unter der Überschrift. */
.siegel-kreis{
  stroke-dasharray:604;stroke-dashoffset:604;
  animation:siegel-ring 9s .4s cubic-bezier(.45,0,.25,1) infinite
}
/* Mikrofon und Wortmarke tauchen einmal auf und bleiben stehen. Eine
   blinkende Wortmarke wäre auf einer Kanzleiseite deplatziert - die
   Bewegung übernimmt allein der Ring. */
.siegel-mikro,.siegel-wort{opacity:0;animation:siegel-auftauchen .9s 1.5s ease forwards}
.siegel-wort{animation-delay:1.75s}

/* 604 ist der Umfang bei r=96. Bei +604 und bei -604 ist die Linie
   vollständig aus dem Bild geschoben, also unsichtbar - deshalb ist der
   Sprung vom Ende zum Anfang nahtlos. */
@keyframes siegel-ring{
  0%   {stroke-dashoffset:604}
  40%  {stroke-dashoffset:0}
  60%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:-604}
}
@keyframes siegel-auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------
   7. Abschnittsköpfe
--------------------------------------------------------------------- */
.sec-head{max-width:660px;margin-bottom:32px}
.sec-head h2{
  font-family:var(--display);font-weight:500;color:var(--navy);
  font-size:clamp(1.75rem,6.5vw,3rem);line-height:1.1;margin:10px 0 12px
}
.sec-head p{color:var(--muted);font-size:1rem}

/* ---------------------------------------------------------------------
   8. Karten, Rubriken, Hosts
--------------------------------------------------------------------- */
.themen{background:var(--paper-light)}
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{
  background:var(--white);padding:26px 22px;border:1px solid rgba(22,36,58,.07);
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s
}
.card .num{font-family:var(--display);font-size:1.05rem;color:var(--gold-deep);letter-spacing:.1em}
.card h2,.card h3{font-family:var(--display);font-size:1.4rem;color:var(--navy);font-weight:600;margin:6px 0 12px;line-height:1.2}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--gold-deep)}
.card p{color:var(--muted);font-size:.95rem}
.card .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.card .tags span{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-soft);
  border:1px solid rgba(22,36,58,.15);padding:5px 10px;border-radius:2px
}
.card .more{
  margin-top:auto;padding-top:18px;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);text-decoration:none;font-weight:500;
  display:inline-block;min-height:24px
}
.card .more:hover{text-decoration:underline}

.rub-grid{display:grid;grid-template-columns:1fr;gap:14px}
.rub{
  background:var(--white);border:1px solid rgba(22,36,58,.08);
  border-left:2px solid var(--gold);padding:20px 22px;transition:transform .25s,box-shadow .25s
}
.rub .rnum{font-family:var(--display);font-size:.95rem;color:var(--gold-deep);letter-spacing:.08em}
.rub h3{font-family:var(--display);font-size:1.2rem;color:var(--navy);font-weight:600;margin:2px 0 6px;line-height:1.25}
.rub p{color:var(--muted);font-size:.9rem;line-height:1.55}

.hosts{display:grid;grid-template-columns:1fr;gap:16px}
.host{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper-light);padding:24px 22px;border:1px solid rgba(22,36,58,.07)
}
.portrait{
  width:76px;height:76px;border-radius:50%;flex-shrink:0;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);color:#fff;font-size:1.55rem;letter-spacing:.04em;
  border:2px solid var(--gold);line-height:1
}
.host h3{font-family:var(--display);font-size:1.35rem;color:var(--navy);font-weight:600;line-height:1.2}
.host .role{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:4px 0 10px}
.host p{color:var(--muted);font-size:.93rem}

/* ---------------------------------------------------------------------
   9. Folgen
   Auf dem Handy: Nummer und Titel nebeneinander, Abspieltaste darunter.
--------------------------------------------------------------------- */
.episodes{background:var(--navy);color:var(--paper-light)}
.episodes .eyebrow{color:var(--gold)}
.episodes h2{color:var(--paper-light)}
.episodes .sec-head p{color:rgba(241,237,228,.78)}

.ep{
  display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start;
  padding:18px 0;border-top:1px solid rgba(194,161,91,.25)
}
.ep:last-of-type{border-bottom:1px solid rgba(194,161,91,.25)}
.ep .epnum{font-family:var(--display);font-size:1.3rem;color:var(--gold);line-height:1.3}
.ep .epbody h2,.ep .epbody h3{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--paper-light);line-height:1.25}
.ep .epbody h2 a,.ep .epbody h3 a{color:inherit;text-decoration:none}
.ep .epbody h2 a:hover,.ep .epbody h3 a:hover{color:var(--gold)}
.ep .epbody span{font-size:.82rem;color:rgba(241,237,228,.72);display:block;margin-top:4px}
/* Markiert Folgen, zu denen es auf der Website eine Textfassung gibt */
.ep-hinweis{display:inline!important;color:var(--gold)!important;margin:0!important}
/* Liefert der Feed keine Folgennummer, entfällt die erste Spalte. */
.ep-ohne-nummer{grid-template-columns:1fr}
.ep-ohne-nummer .play{grid-column:1}

.ep .play{
  grid-column:2;justify-self:start;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);background:transparent;transition:.25s;flex-shrink:0;text-decoration:none
}
.ep .play:hover{background:var(--gold);color:var(--navy)}

/* Folgenübersicht auf hellem Grund */
.ep-light .ep{border-color:rgba(22,36,58,.14)}
.ep-light .ep .epnum{color:var(--gold-deep)}
.ep-light .ep .epbody h2,.ep-light .ep .epbody h3{color:var(--navy)}
.ep-light .ep .epbody h2 a:hover,.ep-light .ep .epbody h3 a:hover{color:var(--gold-deep)}
.ep-light .ep .epbody span{color:var(--muted)}
.ep-light .ep .play{border-color:var(--gold-deep);color:var(--gold-deep)}
.ep-light .ep .play:hover{background:var(--navy);border-color:var(--navy);color:var(--paper-light)}

/* ---------------------------------------------------------------------
   10. Newsletter / Kontakt
--------------------------------------------------------------------- */
.cta-band{background:var(--paper-light);text-align:center}
.cta-inner{max-width:620px;margin:0 auto}
.cta-band h2{
  font-family:var(--display);font-size:clamp(1.7rem,6vw,2.7rem);
  color:var(--navy);font-weight:500;margin:12px 0 12px;line-height:1.1
}
.cta-band p{color:var(--muted);margin-bottom:24px}
.soon{max-width:34em;margin:0 auto;color:var(--muted);font-size:.98rem}

/* Formular: gestapelt. Ein Eingabefeld neben einem Button ist auf 375px
   für beides zu schmal. */
.signup{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:0 auto}
.signup input{
  width:100%;padding:14px 16px;border:1px solid rgba(22,36,58,.25);
  background:var(--white);font-family:var(--body);
  font-size:16px;  /* unter 16px zoomt iOS beim Antippen automatisch hinein */
  border-radius:2px;color:var(--ink);min-height:48px
}
.signup input:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 2px rgba(126,99,48,.25)}
.consent{
  max-width:440px;margin:14px auto 0;font-size:.82rem;color:var(--muted);
  text-align:left;display:flex;gap:10px;align-items:flex-start
}
.consent input{margin-top:2px;flex-shrink:0;width:22px;height:22px;accent-color:var(--navy)}

/* ---------------------------------------------------------------------
   11. Inhaltsseiten
--------------------------------------------------------------------- */
.page-head{
  background:var(--paper-light);border-bottom:1px solid rgba(22,36,58,.08);
  padding:0 0 32px
}
.page-head h1{
  font-family:var(--display);font-size:clamp(1.9rem,7.5vw,3.4rem);color:var(--navy);
  font-weight:500;line-height:1.1;margin:10px 0 0;max-width:20em
}
.page-head .lead{margin-top:14px;color:var(--muted);font-size:1rem;max-width:44em}
.page-head .rule{width:56px;height:1.5px;background:var(--gold);margin:18px 0 0}

.crumbs{font-size:.75rem;letter-spacing:.04em;color:var(--muted);padding:14px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-block;padding:5px 0}
.crumbs a:hover{color:var(--gold-deep);text-decoration:underline}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--gold)}
.crumbs [aria-current="page"]{color:var(--navy)}

.layout{display:grid;grid-template-columns:1fr;gap:40px;padding:36px 0 56px;align-items:start}
.prose{max-width:44em;min-width:0}
.prose h2{
  font-family:var(--display);font-size:clamp(1.45rem,5.5vw,2.1rem);color:var(--navy);
  font-weight:600;margin:36px 0 12px;line-height:1.2
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-size:1.2rem;color:var(--navy);font-weight:600;margin:26px 0 8px;line-height:1.25}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--navy)}
.prose strong{color:var(--navy)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(22,36,58,.12);vertical-align:top}
.prose th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);font-weight:600;background:var(--paper-light)}

/* Breite Tabellen scrollen in sich – nie die ganze Seite.
   Bewusst OHNE negative Außenränder für einen randlosen Effekt: die
   ziehen den Container über den Viewport hinaus und erzeugen genau das
   seitliche Scrollen, das hier verhindert werden soll. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:28rem}

.callout{background:var(--white);border-left:3px solid var(--gold);padding:18px 20px;margin:22px 0;border-radius:2px}
.callout p:last-child{margin-bottom:0}
.callout .label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;display:block;margin-bottom:6px}

.disclaimer{
  background:rgba(22,36,58,.05);border:1px solid rgba(22,36,58,.12);
  padding:18px 20px;margin:32px 0 0;border-radius:2px;font-size:.86rem;color:var(--muted)
}
.disclaimer strong{color:var(--navy)}

/* FAQ */
.faq details{border-bottom:1px solid rgba(22,36,58,.14)}
.faq summary{
  cursor:pointer;padding:16px 0;font-family:var(--display);font-size:1.1rem;
  font-weight:600;color:var(--navy);list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;min-height:48px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-deep);font-family:var(--body);font-size:1.25rem;flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--gold-deep)}
.faq .answer{padding:0 0 18px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------
   12. Seitenspalte
   Eigene Klassen statt `.aside span` / `.aside a`: Element-Selektoren
   hier haben zuvor den Button unlesbar und die Initialen unzentriert
   gemacht, weil sie spezifischer sind als die Komponenten-Klassen.
--------------------------------------------------------------------- */
.aside{font-size:.95rem}
.aside .box{background:var(--white);border:1px solid rgba(22,36,58,.09);padding:22px;margin-bottom:16px}
.aside .box:last-child{margin-bottom:0}
.aside .box h2{
  font-family:var(--body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:12px;font-weight:600
}
.aside .box ul{list-style:none}
.aside .box li{margin-bottom:2px;line-height:1.45}
/* Nur Textlinks in Listen – Buttons bleiben unberührt */
.aside .box li a,.aside .box p a{color:var(--navy-soft);text-decoration:none;display:inline-block;padding:7px 0;min-height:24px}
.aside .box li a:hover,.aside .box p a:hover{color:var(--gold-deep);text-decoration:underline}

.who{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.who:last-of-type{margin-bottom:0}
.who .portrait{width:48px;height:48px;font-size:.95rem;border-width:1.5px}
.who-text{min-width:0}
.who-name{display:block;font-family:var(--display);font-size:1.05rem;color:var(--navy);font-weight:600;line-height:1.2}
.who-role{display:block;font-size:.76rem;color:var(--muted);line-height:1.35;margin-top:2px}

/* ---------------------------------------------------------------------
   13. Weiterlesen
--------------------------------------------------------------------- */
.next-up{background:var(--paper-light);border-top:1px solid rgba(22,36,58,.08);padding:44px 0}
.next-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
.next-grid a{
  display:block;background:var(--white);border:1px solid rgba(22,36,58,.09);
  padding:20px;text-decoration:none;transition:transform .25s,box-shadow .25s
}
.next-grid .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.next-grid b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--navy);font-weight:600;margin:6px 0 8px;line-height:1.2}
.next-grid p{color:var(--muted);font-size:.88rem;margin:0}

/* ---------------------------------------------------------------------
   14. Rechtstexte
--------------------------------------------------------------------- */
.legal{max-width:820px;margin:0 auto;padding:28px var(--gap) 56px;line-height:1.7}
.legal h1{font-family:var(--display);font-size:clamp(2rem,8vw,3.4rem);color:var(--navy);font-weight:500;line-height:1.05}
.legal .rule{width:56px;height:1.5px;background:var(--gold);margin:18px 0 28px}
.legal h2{font-family:var(--display);font-size:1.35rem;color:var(--navy);font-weight:600;margin:32px 0 10px;line-height:1.25}
.legal h3{font-size:.95rem;color:var(--navy-soft);font-weight:600;margin:20px 0 6px}
.legal p{margin-bottom:12px}
.legal ul,.legal ol{margin:0 0 14px 20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--gold-deep);overflow-wrap:anywhere}
.legal .muted{color:var(--muted)}
.legal .ph{background:rgba(194,161,91,.25);padding:1px 5px;border-radius:2px;font-style:normal;color:var(--navy)}
.legal .note{background:var(--white);border-left:3px solid var(--gold);padding:16px 18px;margin:14px 0 8px;font-size:.9rem;color:var(--muted);border-radius:2px}
.legal .note strong{color:var(--navy)}
.legal .draft{background:#FBEEDB;border:1px solid var(--gold);padding:16px 18px;border-radius:4px;margin-bottom:28px;font-size:.9rem}
.legal .draft strong{color:var(--navy)}

/* ---------------------------------------------------------------------
   15. Fußbereich
--------------------------------------------------------------------- */
footer{background:var(--navy);color:rgba(241,237,228,.8);padding:44px 0 24px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:32px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand .brand-name{color:var(--paper-light)}
footer h2{font-family:var(--body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:2px}
footer a{color:rgba(241,237,228,.82);text-decoration:none;font-size:.92rem;transition:color .2s}
footer a:hover{color:var(--gold);text-decoration:underline}
footer li a{display:inline-block;padding:7px 0;min-height:24px;overflow-wrap:anywhere}
.foot-bottom{
  border-top:1px solid rgba(241,237,228,.14);padding-top:18px;
  display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:rgba(241,237,228,.62)
}
.foot-bottom a{display:inline-block;padding:5px 0}

/* ---------------------------------------------------------------------
   16. Einblenden
--------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   AB HIER: Erweiterungen für größere Bildschirme
   ===================================================================== */

/* --- ab 560px: zwei Spalten für kurze Kacheln ---------------------- */
@media (min-width:560px){
  :root{--gap:24px;--section-y:64px}
  .btns{flex-direction:row;flex-wrap:wrap;align-items:center}
  .btn{padding:14px 28px}
  .rub-grid{grid-template-columns:1fr 1fr}
  .next-grid{grid-template-columns:1fr 1fr}
  .host{flex-direction:row;gap:20px;align-items:flex-start}
  .hero-visual{justify-content:flex-start}
  .hero-figur{width:min(380px,64vw)}
  .signup{flex-direction:row}
  .signup input{flex:1;min-width:200px}
  .foot-bottom{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .ep{grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 4px}
  .ep-ohne-nummer{grid-template-columns:1fr auto}
  .ep .play{grid-column:auto;justify-self:auto;margin-top:0}
  .ep .epbody span{display:inline;margin-top:0}
}

/* --- ab 760px: Tablet --------------------------------------------- */
@media (min-width:760px){
  :root{--gap:28px;--section-y:76px}
  .cards{grid-template-columns:1fr 1fr;gap:20px}
  .card{padding:32px 28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero{padding:64px 0 72px}
  .page-head{padding:0 0 44px}
  .layout{padding:52px 0 72px}
  .next-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .sec-head{margin-bottom:44px}
  .prose p{font-size:1.02rem}
  .legal{padding:44px var(--gap) 72px}
}

/* --- ab 900px: waagerechte Navigation, zweispaltiger Hero ---------- */
@media (min-width:900px){
  :root{--header-h:74px}
  .burger{display:none}
  #menu{display:flex;gap:22px;align-items:center}
  #menu.open{position:static;flex-direction:row;padding:0;background:none;border:none;box-shadow:none}
  #menu li{border:none!important;margin:0!important}
  #menu a{
    padding:4px 0;font-size:.76rem;letter-spacing:.1em;position:relative;
    transition:color .25s;white-space:nowrap
  }
  #menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s}
  #menu a:hover{color:var(--navy)}
  #menu a:hover::after,#menu a[aria-current="page"]::after{width:100%}
  #menu .nav-cta{padding:10px 18px;font-size:.72rem;letter-spacing:.1em;transition:background .25s}
  #menu .nav-cta::after{display:none}
  #menu .nav-cta:hover{background:var(--gold-deep);color:var(--paper-light)}
  .mono{width:38px;height:38px}
  .mono span{font-size:.82rem}
  .mono .bar{width:20px}
  .brand-name{font-size:1.18rem;white-space:nowrap}

  /* Der Freisteller wird aus dem Raster genommen und an der unteren
     rechten Ecke des Hero verankert. Dadurch reicht er bis an den
     Bildschirmrand, statt in einer Rasterspalte zu stecken.
     Bezugspunkt ist .hero (volle Breite) – .hero-grid bleibt bewusst
     unpositioniert, sonst wäre bei max. 1140px Schluss. */
  .hero{
    position:relative;overflow:hidden;padding:0;
    display:flex;align-items:center;min-height:min(78vh,760px)
  }
  .hero-grid{grid-template-columns:1fr;gap:0;width:100%}
  .hero-copy{position:relative;z-index:1;max-width:min(520px,50%);padding:56px 0}
  .hero p.lead{font-size:1.02rem}
  .hero-visual{
    position:absolute;bottom:0;z-index:0;
    /* Auf sehr breiten Schirmen nicht bis an die Bildschirmkante wandern -
       sonst steht das Motiv 300px vom Text entfernt und wirkt losgelöst. */
    right:max(0px, calc((100vw - 1600px) / 2));
    width:min(44vw,680px);justify-content:flex-end;align-items:flex-end
  }
  .hero-figur{width:100%}
  /* Auf großen Schirmen etwas höher und größer - dort ist Platz, und
     das Siegel rückt näher an die obere Ecke des Hero. */
  /* Ab hier in der Ecke des Hero, vom overflow:hidden beschnitten wie im
     Originalfoto. Bezug ist .hero (position:relative), nicht das Bild. */
  .siegel-fluss{display:none}
  .siegel-ecke{
    display:block;position:absolute;z-index:0;
    /* Tiefer als die Kopfzeile, damit der Kreis vollständig sichtbar ist.
       Weiter nach unten geht nicht: Mikrofon und Wortmarke würden sonst
       bei ~1536px Breite hinter den Köpfen verschwinden. Der Kreisbogen
       selbst darf dahinter laufen - er liegt hinter dem Freisteller. */
    top:10px;width:170px;
    right:max(-18px, calc((100vw - 1600px) / 2 - 18px))
  }
  @keyframes draw{to{width:200px}}

  .cards{grid-template-columns:repeat(3,1fr);gap:24px}
  .rub-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .hosts{grid-template-columns:1fr 1fr;gap:26px}
  .host{padding:30px}
  .portrait{width:96px;height:96px;font-size:1.9rem;border-width:2px}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .eyebrow{letter-spacing:.3em;font-size:.72rem}
}

/* --- ab 1060px: Inhaltsseiten mit klebender Seitenspalte ----------- */
@media (min-width:1060px){
  .layout{grid-template-columns:minmax(0,1fr) 300px;gap:52px}
  .aside{position:sticky;top:calc(var(--header-h) + 24px)}
  .table-scroll{margin-inline:0;padding-inline:0}
}

/* --- Zeigegerät vorhanden: Schwebe-Effekte nur dort ----------------
   Auf Touch-Geräten führt :hover zu hängenden Zuständen nach dem Tippen. */
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(22,36,58,.35)}
  .rub:hover{transform:translateY(-3px);box-shadow:0 16px 38px -26px rgba(22,36,58,.4)}
  .next-grid a:hover{transform:translateY(-3px);box-shadow:0 16px 38px -26px rgba(22,36,58,.4)}
  .ep{transition:padding-left .3s}
  .ep:hover{padding-left:14px}
}

/* --- Reduzierte Bewegung ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .draw-rule{width:160px}
  .siegel-kreis{stroke-dashoffset:0}
  .siegel-mikro,.siegel-wort{opacity:1}
  .card:hover,.rub:hover,.next-grid a:hover,.ep:hover{transform:none;padding-left:0}
}