/* Schriften liegen auf dem eigenen Server. Kein Aufruf nach draussen,
   damit keine Besucher-IP an Google geht und kein Banner noetig wird. */
@font-face{font-family:"Poppins";src:url("schriften/Poppins-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("schriften/Poppins-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("schriften/Poppins-SemiBold.otf") format("opentype");
  font-weight:600;font-style:normal;font-display:swap}

/* Der Lebenswandler
   Gemeinsamer Stil für alle Seiten. Farben und Schriften nach CLAUDE.md
   Abschnitt 19: Gold #C9A24B, Gold-Hell #E8C468, Marineblau #1A2E4A,
   Schrift Poppins und Georgia, beide ohne Aufruf nach draussen. */

:root{
  --grund:#0E131D;
  --tief:#0A0E16;
  --flaeche:#151C2A;
  --hoch:#1B2436;
  --linie:#26314A;
  --linie-hell:#33405E;
  --text:#E8F1FA;
  --leise:#9AA8BE;
  --still:#6B7A93;
  --gold:#C9A24B;
  --gold-hell:#E8C468;
  --marine:#1A2E4A;
  --gut:#4FB286;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --breite:1080px;
  --schmal:680px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hell)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0 0 1.1em}

.huelle{max-width:var(--breite);margin:0 auto;padding:0 26px}
.schmal{max-width:var(--schmal);margin-left:auto;margin-right:auto}
section{padding:74px 0}
section.eng{padding:54px 0}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:rgba(14,19,29,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.siegel{width:34px;height:34px;border-radius:10px;flex:none;border:1.5px solid var(--gold);
  display:grid;place-items:center;font-family:var(--serif);font-size:17px;color:var(--gold);
  background:radial-gradient(120% 120% at 30% 20%,#1E2A42,#131A28)}
.marke b{display:block;font-size:14px;font-weight:600;line-height:1.2}
/* nur die Unterzeile, nicht das Siegel. Sonst ueberschreibt sie es. */
.marke span span{display:block;font-size:9.5px;color:var(--still);letter-spacing:.16em;text-transform:uppercase}
/* Die Navigation muss als Navigation erkennbar sein. Ohne Wort und ohne
   Rahmen klickt niemand darauf, das ist gemessen. */
.kopf nav.haupt{margin-left:auto;display:flex;gap:6px;align-items:center}
.kopf nav.haupt a{color:var(--text);text-decoration:none;font-size:14px;
  padding:8px 13px;border-radius:9px;border:1px solid transparent;
  transition:background .16s,border-color .16s}
.kopf nav.haupt a:hover,.kopf nav.haupt a:focus-visible{
  background:var(--hoch);border-color:var(--linie-hell)}
.kopf nav.haupt a[aria-current="page"]{color:var(--gold-hell);border-color:var(--linie-hell)}

/* Das Menue auf dem Handy. Symbol allein senkt das Verstaendnis um dreissig
   bis vierzig Prozent, deshalb steht das Wort daneben und ein Rahmen darum. */
.menue{margin-left:auto;position:relative;display:none}
.menue>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  min-height:44px;padding:0 15px;border:1px solid var(--linie-hell);border-radius:11px;
  background:var(--flaeche);color:var(--text);font-size:14.5px;font-weight:500}
.menue>summary::-webkit-details-marker{display:none}
.menue>summary .balken{display:block;width:17px;height:11px;position:relative;flex:none}
.menue>summary .balken::before,.menue>summary .balken::after,.menue>summary .balken i{
  content:'';position:absolute;left:0;right:0;height:1.8px;border-radius:2px;background:var(--gold)}
.menue>summary .balken::before{top:0}
.menue>summary .balken i{top:4.6px}
.menue>summary .balken::after{bottom:0}
.menue[open]>summary{border-color:var(--gold);background:var(--hoch)}
.menue nav{position:absolute;right:0;top:calc(100% + 9px);min-width:210px;
  display:flex;flex-direction:column;padding:7px;border-radius:13px;
  background:var(--hoch);border:1px solid var(--linie-hell);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.menue nav a{padding:12px 14px;border-radius:9px;color:var(--text);
  text-decoration:none;font-size:15px;min-height:44px;display:flex;align-items:center}
.menue nav a:hover,.menue nav a:focus-visible{background:var(--flaeche);color:var(--gold-hell)}

@media (max-width:860px){
  .kopf nav.haupt{display:none}
  .menue{display:block}
}

/* Held */
.held{position:relative;overflow:hidden;border-bottom:1px solid var(--linie)}
.held-bild{position:absolute;inset:0}
.held-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.held-bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--grund) 0%,rgba(14,19,29,.94) 42%,rgba(14,19,29,.35) 100%)}
/* Auf dem Handy stand der Text ueber dem Foto, und darueber lag ein Schleier
   von 55 bis 93 Prozent. Oben sah man unscharfe Baeume, Georgs Gesicht lag
   genau unter der Ueberschrift. Georg am 11.09.2026: "Die ganze Seite sehr
   dunkel und das erste Foto kaum zu sehen."

   Deshalb auf schmalen Geraeten kein Uebereinander mehr, sondern ein
   Untereinander: das Foto oben in voller Klarheit, der Text darunter auf
   ruhigem Grund. Der Schleier faengt erst am unteren Rand des Fotos an und
   dient nur noch dem weichen Uebergang, nicht mehr der Lesbarkeit. */
@media (max-width:820px){
  .held-bild{position:relative;inset:auto;height:54vh;min-height:300px;max-height:440px}
  .held-bild img{height:100%;object-position:64% 30%}
  /* Der Verlauf muss den Grundton ein Stueck vor der Bildkante erreichen,
     sonst steht dort eine sichtbare Naht. */
  .held-bild::after{background:linear-gradient(180deg,
     rgba(14,19,29,0) 50%, rgba(14,19,29,.5) 74%, rgba(14,19,29,.9) 88%, var(--grund) 97%)}
}
.held-inhalt{position:relative;padding:118px 0 104px;max-width:640px}
@media (max-width:820px){.held-inhalt{padding:30px 0 66px;max-width:none}}

.kicker{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.4vw,62px);
  line-height:1.04;letter-spacing:-.022em}
h1 em{font-style:italic;color:var(--gold-hell)}
.vorspann{margin-top:22px;font-size:20px;line-height:1.55;color:var(--leise);font-weight:300}

h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.6vw,38px);
  line-height:1.16;letter-spacing:-.018em}
h2 em{font-style:italic;color:var(--gold-hell)}
h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3}
/* Die kleine Rubrik stand ueberall in 10,5 Pixel und in --still, das sind
   4,28 zu 1 Kontrast und damit unter der Anforderung von 4,5. Georg hat es
   zweimal gemeldet, erst beim Podcast, dann bei der Begleitung. Jetzt 12
   Pixel und --leise, das sind 7,72 zu 1. */
.rubrik{font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-hell);margin:0 0 16px}

.gross{font-family:var(--serif);font-size:clamp(22px,3vw,29px);line-height:1.45;
  font-weight:300;color:var(--text)}
.leise{color:var(--leise)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:11px;padding:16px 32px;border-radius:99px;
  border:1px solid var(--gold);background:var(--gold);color:#121826;
  font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .16s,box-shadow .16s,transform .12s}
.knopf:hover{background:var(--gold-hell);box-shadow:0 8px 28px rgba(201,162,75,.26)}
.knopf:active{transform:translateY(1px)}
.knopf.still{background:none;color:var(--gold-hell);border-color:var(--linie-hell)}
.knopf.still:hover{border-color:var(--gold);background:rgba(201,162,75,.08);box-shadow:none}
/* Der Rueckweg unten. Auf den Seiten ohne Menue braucht es am Ende einen Weg
   zurueck, sonst steht der Leser vor einer Wand. */
.zurueck{display:flex;flex-wrap:wrap;gap:12px}
.unterknopf{margin-top:12px;font-size:13px;color:var(--still)}

/* Formular */
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.form input[type=email]{flex:1 1 260px;min-width:0;padding:16px 19px;border-radius:14px;
  border:1px solid var(--linie-hell);background:var(--flaeche);color:var(--text);
  font-family:inherit;font-size:16px}
.form input[type=email]::placeholder{color:var(--still)}
.form input[type=email]:focus{border-color:var(--gold);outline:none;background:var(--hoch)}
.form button{flex:0 0 auto}
.zustimmung{margin-top:16px;font-size:13px;color:var(--still);line-height:1.6;max-width:52ch}
.zustimmung a{color:var(--leise)}

/* Karten */
.karten{display:grid;gap:16px;margin-top:34px}
@media (min-width:760px){.karten.drei{grid-template-columns:repeat(3,1fr)}
                         .karten.zwei{grid-template-columns:repeat(2,1fr)}}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:28px 26px}
.karte h3{margin-bottom:9px}
.karte p{color:var(--leise);font-size:15.5px;margin-bottom:0}

/* Liste der Folgen */
.folgen{margin:30px 0 0;padding:0;list-style:none;counter-reset:f;
  border:1px solid var(--linie);border-radius:16px;overflow:hidden;background:var(--flaeche)}
.folgen li{counter-increment:f;display:flex;gap:18px;align-items:baseline;
  padding:17px 24px;border-bottom:1px solid var(--linie);font-family:var(--serif);font-size:19px}
.folgen li:last-child{border-bottom:0}
.folgen li::before{content:counter(f,decimal-leading-zero);flex:none;
  font-family:var(--sans);font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.06em}

/* Zitat */
.zitat{border-left:3px solid var(--gold);padding-left:26px;margin:34px 0;
  font-family:var(--serif);font-size:clamp(21px,2.7vw,27px);line-height:1.42;font-weight:300}
.zitat cite{display:block;margin-top:14px;font-family:var(--sans);font-size:12.5px;
  font-style:normal;color:var(--still);letter-spacing:.02em}

/* Zahlenband */
.band{background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.band .huelle{display:flex;flex-wrap:wrap;gap:34px 60px;padding-top:34px;padding-bottom:34px}
.band div b{display:block;font-family:var(--serif);font-size:32px;font-weight:400;color:var(--gold-hell);line-height:1.1}
.band div span{display:block;font-size:12.5px;color:var(--still);margin-top:5px}

/* Audio */
.audio{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;
  padding:26px;margin-top:30px}
.audio audio{width:100%;margin-top:14px}

/* Preis */
.preis{display:flex;align-items:baseline;gap:14px;margin:26px 0 6px}
.preis b{font-family:var(--serif);font-size:44px;font-weight:400;color:var(--gold-hell);line-height:1}
.preis span{font-size:14px;color:var(--still)}

/* Hinweiskasten */
.hinweis{background:var(--hoch);border:1px solid var(--linie);border-radius:14px;
  padding:20px 24px;margin-top:26px;font-size:15px;color:var(--leise);line-height:1.65}
.hinweis b{color:var(--text)}

/* Platzhalter, den Georg noch füllen muss */
.platzhalter{border:1px dashed #B4544A;background:rgba(180,84,74,.09);border-radius:12px;
  padding:16px 20px;margin:20px 0;font-size:14px;color:#E0938A;line-height:1.6}
.platzhalter b{color:#F0B6AD}

/* Fußzeile */
.fuss{border-top:1px solid var(--linie);background:var(--tief);padding:44px 0 60px;margin-top:20px}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-start}
.fuss p{font-size:13.5px;color:var(--still);margin:0;max-width:44ch;line-height:1.7}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.fuss nav a{color:var(--still);text-decoration:none;font-size:13.5px}
.fuss nav a:hover{color:var(--gold-hell)}

/* Rechtstexte */
.recht h2{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.02em;
  margin:34px 0 10px;color:var(--gold-hell)}
.recht p,.recht li{font-size:15.5px;color:var(--leise);line-height:1.7}
.recht ul{padding-left:22px}

/* Der Slogan. Steht in jeder Fußzeile, unverändert. */
.fuss .slogan{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--leise);
  font-weight:300;letter-spacing:.01em}
.fuss .slogan b{font-weight:400;color:var(--gold-hell);font-size:18px}

/* ---------------------------------------------------------------
   Ergänzungen vom 01.09.2026
   Aktuell-Band, Stimmen, Leiter, Fragen, Podcast-Plattformen
   --------------------------------------------------------------- */

/* Was gerade läuft. Steht ganz oben, direkt unter dem Kopf. */
.aktuell{background:linear-gradient(180deg,var(--flaeche),var(--grund));
  border-bottom:1px solid var(--linie)}
.aktuell .huelle{padding-top:26px;padding-bottom:26px}
.aktuell .rubrik{margin-bottom:18px}
.aktuell-liste{display:grid;gap:12px}
@media (min-width:820px){.aktuell-liste{grid-template-columns:repeat(3,1fr)}}
.jetzt{display:flex;gap:15px;align-items:flex-start;padding:16px 18px;border-radius:14px;
  background:var(--hoch);border:1px solid var(--linie);text-decoration:none;color:inherit;
  transition:border-color .16s,background .16s}
.jetzt:hover{border-color:var(--gold);background:#1F293D}
.jetzt .wann{flex:none;width:44px;text-align:center;font-family:var(--serif);
  color:var(--gold-hell);line-height:1.05;padding-top:2px}
.jetzt .wann b{display:block;font-size:21px;font-weight:400}
.jetzt .wann span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--still);margin-top:3px;font-family:var(--sans)}
.jetzt .was{min-width:0}
.jetzt .was b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.jetzt .was span{display:block;font-size:13.5px;color:var(--leise);margin-top:3px;line-height:1.5}

/* Stimmen */
.stimmen{display:grid;gap:16px;margin-top:32px}
@media (min-width:820px){.stimmen{grid-template-columns:repeat(2,1fr)}}
.stimme{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;
  padding:26px 26px 22px;position:relative}
.stimme::before{content:'„';position:absolute;top:6px;left:20px;font-family:var(--serif);
  font-size:56px;color:var(--gold);opacity:.28;line-height:1}
.stimme p{font-family:var(--serif);font-size:18.5px;line-height:1.5;font-weight:300;
  margin:14px 0 16px;position:relative}
.stimme cite{display:block;font-style:normal;font-size:12.5px;color:var(--still);
  letter-spacing:.03em}

/* Die Leiter: wohin es von hier weitergeht */
.leiter{margin-top:34px;border:1px solid var(--linie);border-radius:16px;overflow:hidden}
.stufe{display:flex;gap:20px;align-items:center;padding:22px 26px;text-decoration:none;
  color:inherit;background:var(--flaeche);border-bottom:1px solid var(--linie);
  transition:background .16s}
.stufe:last-child{border-bottom:0}
.stufe:hover{background:var(--hoch)}
.stufe .marke-preis{flex:none;width:96px;font-family:var(--serif);font-size:21px;
  color:var(--gold-hell);line-height:1.1}
.stufe .marke-preis span{display:block;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--still);margin-top:5px}
.stufe .inhalt{min-width:0;flex:1}
.stufe .inhalt b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.3}
.stufe .inhalt span{display:block;font-size:15px;color:var(--leise);margin-top:5px;line-height:1.55}
.stufe .pfeil{flex:none;color:var(--gold);font-size:20px}
@media (max-width:620px){
  .stufe{flex-wrap:wrap;gap:10px}
  .stufe .marke-preis{width:auto}
  .stufe .pfeil{display:none}
}

/* Fragen und Antworten */
.fragen{margin-top:30px;border:1px solid var(--linie);border-radius:16px;overflow:hidden;
  background:var(--flaeche)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen details:last-child{border-bottom:0}
.fragen summary{cursor:pointer;padding:20px 26px;font-family:var(--serif);font-size:19px;
  list-style:none;display:flex;gap:14px;align-items:baseline}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::before{content:'+';flex:none;color:var(--gold);font-family:var(--sans);
  font-size:17px;font-weight:600;width:14px}
.fragen details[open] summary::before{content:'–'}
.fragen summary:hover{background:var(--hoch)}
.fragen .antwort{padding:0 26px 22px 54px;color:var(--leise);font-size:15.5px;line-height:1.7}
.fragen .antwort p:last-child{margin-bottom:0}

/* Podcast-Plattformen */
.plattformen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.plattform{display:inline-flex;align-items:center;gap:11px;padding:14px 24px;border-radius:99px;
  border:1px solid var(--linie-hell);background:var(--flaeche);color:var(--text);
  text-decoration:none;font-size:15px;font-weight:500;transition:border-color .16s,background .16s}
.plattform:hover{border-color:var(--gold);background:var(--hoch)}
.plattform b{color:var(--gold-hell);font-weight:600}

/* Takt-Zeile, z.B. Jeden Mittwoch um sechs */
.takt{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;
  background:rgba(201,162,75,.11);border:1px solid rgba(201,162,75,.3);
  font-size:13px;font-weight:600;color:var(--gold-hell);letter-spacing:.02em}

/* Das Folgen-Archiv. Waechst mit jeder Woche, ohne dass die Seite umgebaut wird. */
.folgen{display:flex;flex-direction:column;gap:18px}
.folge{padding:26px 26px 22px;border-radius:16px;background:var(--flaeche);
  border:1px solid var(--linie)}
.folge-kopf{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px}
.folge .nummer{flex:none;font-family:var(--serif);font-size:30px;color:var(--gold);
  line-height:1;padding-top:2px;min-width:44px}
.folge h2{font-size:23px;margin:0;line-height:1.25}
.folge-meta{margin:5px 0 0;font-size:12.5px;color:var(--still);
  letter-spacing:.05em;text-transform:uppercase}
.folge p{margin:0 0 12px}
.folge-fuss{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--linie)}
@media (max-width:620px){
  .folge{padding:22px 20px 20px}
  .folge-kopf{gap:13px}
  .folge .nummer{font-size:25px;min-width:36px}
  .folge h2{font-size:20px}
}

/* ====================================================================
   DER STOPPER und DIE PODCAST-BUEHNE
   Georg am 08.09.2026: der Podcast ist das Hauptformat, ganz oben steht
   ein Ausschnitt aus der neuesten Folge, darunter die Beweiszeile und
   genau ein Knopf.
   ==================================================================== */

.stopper{position:relative;overflow:hidden;border-bottom:1px solid var(--linie)}
.stopper-innen{position:relative;padding:104px 0 92px;display:grid;
  grid-template-columns:1fr;gap:44px;align-items:center}
@media (min-width:900px){
  .stopper.mit-video .stopper-innen{grid-template-columns:288px 1fr;gap:56px}
}
@media (max-width:820px){.stopper-innen{padding:30px 0 62px}}
.stopper.mit-video .stopper-innen{padding-top:78px}
@media (max-width:820px){.stopper.mit-video .stopper-innen{padding-top:24px}}

.stopper-video{position:relative;max-width:288px;width:100%}
.stopper-video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  border-radius:16px;background:#000;box-shadow:0 18px 48px rgba(0,0,0,.45);cursor:pointer}
.stopper-ab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:#0E131D;display:flex;align-items:center;
  justify-content:center;transition:.18s;padding:0}
.stopper-ab svg{width:30px;height:30px;margin-left:3px}
.stopper-ab:hover{transform:translate(-50%,-50%) scale(1.06)}
.stopper-video.laeuft .stopper-ab{opacity:0;pointer-events:none}
.stopper-zeile{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--leise);
  max-width:288px}

.stopper-text{position:relative;max-width:640px}
.stopper-knopf{margin-top:28px}

.beweis{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,auto);gap:0 34px;justify-content:start}
@media (max-width:640px){.beweis{grid-template-columns:repeat(2,auto);gap:20px 30px}}
.beweis li{display:block}
.beweis b{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:2rem;line-height:1;letter-spacing:-.02em}
.beweis span{display:block;font-size:11.5px;line-height:1.4;color:var(--leise);
  margin-top:6px;max-width:9ch}

.buehne{border-bottom:1px solid var(--linie)}
.buehne-raster{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media (min-width:900px){.buehne-raster{grid-template-columns:1fr 380px;gap:66px}}
/* Das Podcast-Schild. Georg am 10.09.2026: "DER PODCAST" stand in demselben
   dunklen Grau wie jede andere Rubrik und ging im Bereich unter, obwohl der
   Podcast das Hauptformat ist. Jetzt steht es als Schild ueber dem Titel:
   groesser, in Gold, mit einem Rahmen, der es vom Fliesstext abhebt.
   Geaendert wird nur .buehne .rubrik, also genau dieses eine Wort. Alle
   anderen Rubriken auf der Seite bleiben, wie sie sind. */
.buehne > .huelle > .buehne-raster .buehne-text > .rubrik{
  display:block;
  font-size:clamp(19px,2.4vw,25px);
  font-weight:600;
  letter-spacing:.19em;
  line-height:1.2;
  color:var(--gold-hell);
  background:none;
  border:0;
  padding:0;
  margin:0 0 14px;
}
/* Der feine Strich darunter traegt das Wort, ohne dass es nach Werbung aussieht. */
.buehne > .huelle > .buehne-raster .buehne-text > .rubrik::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin-top:13px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(201,162,75,0) 100%);
}
/* Der Abschnitt ueber die persoenliche Begleitung ist neben dem Podcast der
   wichtigste der Seite und stand in derselben blassen Kleinschrift wie jede
   Nebenrubrik. Georg am 11.09.2026: "Der Bereich ist sehr wichtig, aber kaum
   zu sehen, der muss ueberall sehr gut zu sehen sein und darf auffallen."
   Er bekommt deshalb dieselbe Behandlung wie DER PODCAST: gross, in Gold,
   mit dem feinen Strich darunter. Zwei Abschnitte auf dieser Stufe, mehr
   nicht, sonst schreit die ganze Seite. */
#begleitung > .huelle > .rubrik,
#community-kopf > .huelle > .rubrik{
  display:block;
  font-size:clamp(19px,2.4vw,25px);
  font-weight:600;
  letter-spacing:.19em;
  line-height:1.2;
  color:var(--gold-hell);
  margin:0 0 14px;
}
/* Die Zwischenzeile im selben Abschnitt darf sichtbar sein, aber nicht so laut
   wie die Ueberschrift des Abschnitts und nicht lauter als der Name des
   Angebots darunter. Also Gold, aber eine Stufe kleiner und ohne Strich. */
#begleitung > .huelle > .rubrik.zwischen{
  font-size:15px;
  letter-spacing:.17em;
  color:var(--gold);
}
#begleitung > .huelle > .rubrik.zwischen::after{display:none}

/* Der Name des Angebots ist die Hauptsache in der Karte. */
.kreis-name{font-size:clamp(24px,3vw,30px);margin:0}

#begleitung > .huelle > .rubrik::after,
#community-kopf > .huelle > .rubrik::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin-top:13px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(201,162,75,0) 100%);
}

/* "Zwei Wege. Ein Podcast." steht als Zeile unter dem Titel, in derselben
   Serifenschrift, damit es zusammengehoert und nichts Neues dazukommt. */
.zwei-wege{
  font-family:var(--serif);
  font-size:clamp(18px,2.1vw,21px);
  font-style:italic;
  color:var(--gold-hell);
  margin:10px 0 0;
}
.buehne-text h2{margin-top:8px}
.buehne-knoepfe{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.knopf.still{background:transparent;border:1px solid var(--linie-hell,#33405E);
  color:inherit}
.knopf.still:hover{border-color:currentColor}

.buehne-cover img{width:100%;border-radius:14px;display:block}
.folgenliste{list-style:none;margin:20px 0 0;padding:0;
  border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.folgenliste li{display:flex;gap:14px;align-items:baseline;padding:12px 16px;
  border-bottom:1px solid var(--linie);font-size:14px}
.folgenliste li:last-child{border-bottom:0}
.folgenliste b{flex:none;font-variant-numeric:tabular-nums;font-size:12px;
  color:var(--leise);font-weight:600}
.buehne-alle{margin-top:14px;font-size:13.5px}

/* ==================================================================
   DER HERO, neu am 09.09.2026.
   Georg: "Ganz oben im Hero-Bereich steht unuebersehbar die eine Frage."
   Darunter sein Gesicht und vier Sekunden seiner Stimme. Keine Zahlen,
   kein Beratergequatsche, ein einziger Knopf.
   ================================================================== */

h1.ruf{font-family:var(--serif);font-weight:300;
  font-size:clamp(31px,5.1vw,54px);line-height:1.14;letter-spacing:-.01em;
  color:var(--text);margin:0;text-wrap:balance}

.unterzeile{margin:20px 0 0;font-family:var(--sans);font-size:15px;
  font-weight:500;letter-spacing:.02em;color:var(--gold-hell)}

/* Die Stimmprobe: Foto und Wellenform nebeneinander. */
.stimmprobe{margin-top:36px;display:block;max-width:430px;
  background:rgba(21,28,42,.66);border:1px solid var(--linie);
  border-radius:18px;padding:16px 20px 16px 16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.stimmprobe-bild{width:132px;height:158px;object-fit:cover;object-position:50% 22%;
  border-radius:13px;display:block;border:1px solid var(--linie-hell)}

.stimmprobe-zeile{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.05em;color:var(--leise)}

.stimmprobe-reihe{display:flex;align-items:center;gap:13px;margin-top:12px}

.stimmprobe-ab{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:none;cursor:pointer;background:var(--gold);color:var(--tief);
  display:grid;place-items:center;transition:transform .16s ease,background .16s ease}
.stimmprobe-ab:hover{transform:scale(1.06);background:var(--gold-hell)}
.stimmprobe-ab svg{width:21px;height:21px}
.stimmprobe-ab .ab-play{margin-left:3px}

/* Die Wellenform. Die Balken sind aus dem echten Ton gerechnet, nicht gemalt. */
.welle{flex:1 1 auto;display:flex;align-items:center;gap:2px;height:40px;min-width:0}
.welle span{flex:1 1 0;min-width:2px;border-radius:2px;
  background:var(--linie-hell);transition:background .12s linear,transform .12s ease}
.welle span.durch{background:var(--gold)}
.welle span.jetzt{background:var(--gold-hell);transform:scaleY(1.14)}

.stimmprobe-satz{margin:12px 0 0;font-family:var(--serif);font-size:15px;
  font-style:normal;color:var(--text);line-height:1.4}

@media (max-width:560px){
  .stimmprobe{padding:14px}
  .stimmprobe-satz{font-size:14px}
}

/* Georg am 09.09.2026: "Entferne kursive Paragraphen mitten im Satz."
   Die Betonung in den Ueberschriften bleibt, aber sie steht jetzt aufrecht. */
h1 em,h2 em{font-style:normal}