/*
 * Podcast-Linkseiten - eine Gestaltung für alle Marken.
 *
 * Leitgedanke: Wechselrede. Die CI führt Pink und Türkis als gleichrangige
 * Signalfarben, und der Cover-Generator wechselt sie folgenweise durch -
 * gerade pink, ungerade türkis, Jubiläumsfolgen gold. Diese Regel gilt hier
 * genauso: Jede Folge trägt ihre eigene Akzentfarbe. Zwei Sprecher, zwei
 * Farben. Dadurch wird aus einer Liste ein Rhythmus, und die Seite spricht
 * dieselbe Sprache wie die Cover, die daneben liegen.
 *
 * Die Markenfarben kommen als Variablen aus der Seite (siehe seite.php),
 * gespeist aus den ci-tokens.json. Hier steht nur, wie etwas aussieht.
 *
 * Mobil zuerst: Die Grundregeln gelten für das Telefon, die Abfragen
 * ergänzen ausschließlich nach oben.
 */

/* ---------- Schriften, lokal ausgeliefert ---------- */

/* Alle vier Schnitte müssen da sein. Fehlt der Normalschnitt, ersetzt ihn
   der Browser durch den nächsten vorhandenen - dann steht die ganze Seite
   in Fett, ohne dass eine Regel das verlangt. */
/*
 * Inter ist eine Variable Font mit der Achse wght von 100 bis 900 - eine
 * einzige Datei deckt alle Gewichte ab. Sie lag hier viermal unter den Namen
 * Inter-400, -600, -700 und -900, byteidentisch, und wurde vom Browser
 * viermal geladen: 193 KB statt 48. Ein Bereich in font-weight sagt dem
 * Browser, dass er die Zwischenwerte selbst einstellen darf.
 */
@font-face {
  font-family: 'Inter LG';
  src: url('../fonts/Inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
/*
 * Arapey trägt die Überschriften von #ECHTJETZT. Es gibt nur den Schnitt 400 -
 * die CI arbeitet dort ohnehin mit Versalien und Sperrung statt mit Fettung,
 * und ein vom Browser errechneter Fettschnitt sähe bei einer Antiqua
 * schlechter aus als gesperrte Versalien.
 */
@font-face {
  font-family: 'Arapey LG';
  src: url('../fonts/Arapey.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*
 * Die echte Kursive - 11 KB, die sich lohnen. Ohne sie stellt der Browser die
 * Regular schräg, und bei einer Antiqua ist das sichtbar: Eine gezeichnete
 * Kursive hat andere Buchstabenformen, nicht nur eine andere Neigung.
 * Betrifft den Zuruf über der neuesten Folge, der bei #ECHTJETZT kursiv steht.
 */
@font-face {
  font-family: 'Arapey LG';
  src: url('../fonts/Arapey-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat LG';
  src: url('../fonts/Caveat-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund-dunkel);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  /* Sehr weites, ruhiges Leuchten hinter dem Kopf - die Bühne, nicht der
     Effekt. Auf hellem Grund muss es viel zurückhaltender sein: Dieselbe
     Mischung, die auf Navy nur eine Ahnung ist, färbt Weiß vollständig ein.
     Den Ton liefert deshalb die Marke über --buehne. */
  background-image:
    radial-gradient(80rem 34rem at 50% -14rem,
      var(--buehne) 0%, transparent 68%);
  background-repeat: no-repeat;
}

h1, h2, h3 {
  font-family: var(--schrift-kopf);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;   /* die Laufweite der Wortmarke, aus dem Druckdatenblatt */
  margin: 0 0 .4em;
}

a { color: var(--akzent); }
a:focus-visible,
summary:focus-visible,
audio:focus-visible,
button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.innen { width: min(100% - 2rem, 62rem); margin-inline: auto; }

/* Handschriftlicher Zwischenruf - die dritte CI-Schrift. */
/*
 * Gewicht und Neigung kommen aus dem Markenregister, weil beide von der
 * Akzentschrift abhängen: Caveat bringt einen 600er Schnitt mit, Arapey nicht.
 * Stand hier fest 600, rechnete der Browser bei Arapey einen Fettschnitt aus -
 * dieselbe Falle, die schon einmal die ganze Seite fett gemacht hat. Arapey
 * hat stattdessen eine gezeichnete Kursive, und die trägt den Zuruf besser.
 */
.zuruf {
  font-family: var(--schrift-akzent);
  font-weight: var(--zuruf-gewicht, 600);
  font-style: var(--zuruf-neigung, normal);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--akzent);
  letter-spacing: 0;
  display: block;
  margin-bottom: .35rem;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.sprung {
  position: absolute;
  left: -9999px;
  background: var(--akzent);
  color: var(--grund-dunkel);
  padding: .75rem 1rem;
  font-weight: 700;
  z-index: 10;
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ---------- Kopfband mit Umschaltleiste ----------
   Ohne sie kommt man von einer Podcast-Seite nur über den Fuß weiter.
   Waagerecht scrollbar statt Klappmenü: kein JavaScript, und auf dem
   Telefon sieht man sofort, dass es mehr gibt. */

.band {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--grund-hell);
  background: var(--grund-dunkel);
}
/*
 * Dasselbe Raster wie der Kopf der Übersicht: Logo links, Inhalt rechts.
 * Dort ist der Inhalt die Überschrift, hier sind es die Pillen - aber beide
 * Seiten fangen damit gleich an, und das Logo sitzt auf derselben Kante.
 */
.band-innen { align-items: center; }
.band-logo { width: 2.6rem; }

.wortmarke { display: inline-block; justify-self: start; }
.band-logo { width: 2.1rem; height: auto; opacity: .9; }
.wortmarke:hover .band-logo { opacity: 1; }

/*
 * Mobil zeigt das Band nur, wo man ist und wie man wegkommt - nicht alle
 * sechs Ziele. Sechs Pillen mit ungleichen Breiten in zwei Zeilen ergeben
 * kein Raster, sondern ein Zufallsmuster, und sie kosteten ein Drittel des
 * ersten Bildschirms für reine Navigation. Die anderen Formate gehen dabei
 * nicht verloren: Sie stehen weiter unten mit Cover und Beschreibung, und
 * „Alle" führt zur Übersicht.
 *
 * Ab 40rem ist Platz für die ganze Reihe - dort erscheint sie wieder.
 */
.band-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: flex-end;
}
.band-tab:not(.band-tab-hier) { display: none; }

.band-tab {
  flex: none;
  padding: .45rem .85rem;
  border-radius: 2rem;
  border: 1px solid var(--grund-hell);
  color: var(--text-leise);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.band-tab:hover, .band-tab:focus-visible {
  color: var(--text);
  border-color: var(--marke);
}
.band-tab-hier {
  background: var(--marke);
  border-color: var(--marke);
  color: var(--grund-dunkel);
}

/* ---------- Held: die neueste Folge ---------- */

.held { padding: 2rem 0 2.5rem; }

.held-raster { display: grid; gap: 1.5rem; }

.held-bild {
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .45);
  width: 100%;
  max-width: 20rem;
  /* Die Akzentkante greift die Farbe der Folge auf. */
  border-bottom: 5px solid var(--akzent);
}

.held-nummer {
  font-family: var(--schrift-kopf);
  font-weight: 900;
  font-size: clamp(3.5rem, 18vw, 7rem);
  line-height: .8;
  letter-spacing: -0.06em;
  color: var(--akzent);
  display: block;
  margin-bottom: .25rem;
}
.held-nummer .raute { opacity: .45; font-size: .45em; vertical-align: .55em; margin-right: .05em; }

.held-titel { font-size: calc(clamp(1.75rem, 6.5vw, 3rem) * var(--kopf-skala, 1)); margin-bottom: .5rem; }

.held-meta {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 1rem;
}

.held-anriss { color: var(--text-leise); margin: 0 0 1.25rem; max-width: 46ch; }

/* ---------- Abo: die eigentliche Handlung ---------- */

.abo { padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--grund-hell); }
.abo-kopf { margin-bottom: 1.25rem; }
.abo h2 { font-size: calc(clamp(1.4rem, 5vw, 2rem) * var(--kopf-skala, 1)); }
.abo-unter { color: var(--text-leise); margin: 0; font-size: .95rem; }

.abo-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

.knopf {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.25rem;
  /* Die Folgenfarbe, nicht die feste Signalfarbe - so wechselt auch die
     groesste Flaeche der Seite mit. */
  background: var(--akzent);
  /* Dunkle Schrift auf Vollton: Weiss auf Tuerkis erreichte nur 1,72:1. */
  color: var(--grund-dunkel);
  text-decoration: none;
  font-weight: 700;
  border-radius: .7rem;
  min-height: 3.25rem;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.knopf:hover, .knopf:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .35);
}
.knopf-symbol { width: 1.5rem; height: 1.5rem; flex: none; display: grid; place-items: center; }
.knopf-symbol svg { display: block; }
.knopf-pfeil { margin-left: auto; opacity: .55; font-size: 1.1rem; line-height: 1; }

.knopf-leise {
  background: transparent;
  color: var(--akzent);
  border: 2px solid var(--akzent);
  display: inline-flex;
  min-height: 3rem;
}
.knopf-leise:hover, .knopf-leise:focus-visible {
  background: var(--akzent);
  color: var(--grund-dunkel);
}

.weitere { margin: 1.25rem 0 0; }

/* ---------- Folgen ---------- */

.folgen { padding: 2.5rem 0 1rem; border-top: 1px solid var(--grund-hell); }
.folgen h2 { font-size: calc(clamp(1.4rem, 5vw, 2rem) * var(--kopf-skala, 1)); margin-bottom: 1.25rem; }

.karten, .archiv-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Auf dem Telefon füllt eine Folge fast den Bildschirm - bei .85rem Abstand
     lief eine Karte in die nächste über, und man sah eine lange Wand statt
     einzelner Folgen. Der Abstand wächst deshalb mit der Breite mit. */
  gap: clamp(1.4rem, 4vw, 1.75rem);
}

.karte, .archiv-liste > li {
  background: var(--sanft);
  border-radius: .85rem;
  padding: 1.1rem;
  display: grid;
  gap: .9rem;
  /* Die Akzentkante trägt die Farbe der jeweiligen Folge. */
  border-left: 4px solid var(--akzent);
  transition: background .18s ease;
}
.karte:hover, .archiv-liste > li:hover { background: var(--grund-hell); }

.karte-bild { width: 5.5rem; border-radius: .45rem; justify-self: start; }

.karte-meta, .archiv-meta {
  color: var(--text-leise);
  font-size: .78rem;
  margin: 0 0 .3rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.karte-meta b, .archiv-meta b { color: var(--akzent); font-weight: 700; }

/* Der Folgentitel ist das, wonach jemand die Folge auswählt - er darf
   deutlicher sein als die Beschreibung darunter. */
.karte h3 { font-size: calc(1.32rem * var(--kopf-skala, 1)); letter-spacing: -0.02em; line-height: 1.25; }
.archiv-liste h3 { font-size: calc(1.15rem * var(--kopf-skala, 1)); letter-spacing: -0.02em; }
/*
 * Der Claim steht unter dem Namen. Er trägt die Signalfarbe der Marke, nicht
 * --akzent: Letztere wechselt mit der Nummer der neuesten Folge, der Claim
 * hätte also jede Woche eine andere Farbe gehabt.
 */
.schild-claim {
  color: var(--signal);
  font-weight: 600;
  font-size: 1.02rem;
  margin: .15rem 0 .6rem;
}
/* Die Archivtitel führen zur Folge - das muss man ihnen ansehen. */
.archiv-liste h3 a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  text-underline-offset: 3px;
}
.archiv-liste h3 a:hover, .archiv-liste h3 a:focus-visible { color: var(--akzent); }

/*
 * Mindestgröße für alles, was mit dem Daumen getroffen werden muss (WCAG 2.5.5).
 * Das Media Center hat dieselbe Regel - zwei Seiten derselben Marke sollten
 * nicht mit zweierlei Maß messen. Gemessen waren hier 15 bis 38 px.
 */
@media (pointer: coarse) {
  .band-tab, .band-alle, .recht a, .weitere a, .fuss-credit a,
  .archiv-fuss a, .social-knopf, .abo-knopf {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .recht a, .weitere a, .fuss-credit a, .archiv-fuss a { padding-block: .35rem; }
}

.karte-anriss, .archiv-text { color: var(--text-leise); margin: 0 0 .85rem; font-size: .93rem; }

audio { width: 100%; height: 2.5rem; }

.hinweis {
  background: var(--sanft);
  padding: 1rem;
  border-radius: .7rem;
  border-left: 4px solid var(--signal);
}

/* ---------- Archiv ---------- */

.archiv { margin-top: 1.25rem; }
.archiv summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  background: var(--sanft);
  border-radius: .7rem;
  font-weight: 700;
  color: var(--akzent);
  list-style-position: inside;
  transition: background .18s ease;
}
.archiv summary:hover { background: var(--grund-hell); }
.archiv[open] summary { margin-bottom: .85rem; }

/* ---------- Weitere Formate, mit Cover ---------- */

.formate { padding: 2.5rem 0; border-top: 1px solid var(--grund-hell); }
.formate h2 { font-size: calc(clamp(1.4rem, 5vw, 2rem) * var(--kopf-skala, 1)); }
.formate-unter { color: var(--text-leise); margin: 0 0 1.25rem; font-size: .95rem; }

.formate-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }

.formate-liste a {
  /* --marke wird je Kachel gesetzt; ohne Wert bleibt es bei der Zweitfarbe. */
  --marke: var(--zweit);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: .9rem;
  background: var(--grund);
  border-radius: .85rem;
  text-decoration: none;
  color: var(--text);
  border-left: 4px solid var(--marke);
  transition: background .18s ease, transform .18s ease;
}
.formate-liste a:hover, .formate-liste a:focus-visible {
  background: var(--grund-hell);
  transform: translateY(-2px);
}

.formate-bild {
  width: 6rem;
  border-radius: .5rem;
  flex: none;
  border-bottom: 3px solid var(--marke);
}
.formate-name {
  line-height: 1.2;   /* span erbt sonst 1,6 vom Text */
  display: block;
  font-weight: 900;
  font-size: calc(1.3rem * var(--kopf-skala, 1));
  font-family: var(--schrift-kopf);
  letter-spacing: -0.03em;
  margin-bottom: .1rem;
}
.formate-claim { display: block; color: var(--marke); font-size: .82rem; margin-bottom: .15rem; }
.formate-text { display: block; color: var(--text-leise); font-size: .85rem; line-height: 1.45; }
.formate-ruht {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
  border: 1px solid var(--grund-hell);
  border-radius: 1rem;
  padding: .1rem .55rem;
  margin-top: .35rem;
}

/* ---------- Werbepartner, bewusst zurückhaltend ---------- */

.werbung { padding: 2rem 0 2.5rem; border-top: 1px solid var(--grund-hell); color: var(--text-leise); }
.werbung h2 { font-size: calc(1.1rem * var(--kopf-skala, 1)); color: var(--text); letter-spacing: -0.02em; }
.werbung p { font-size: .92rem; max-width: 52ch; }

/* ---------- Fuß ----------
   Aufbau wie im Media Center: Logo und Anschrift links, Verweise rechts,
   darunter die Urheberzeile. Bewusst ruhig - im Fuß soll nichts um
   Aufmerksamkeit kämpfen, deshalb gedämpfte Schrift und Unterstreichung
   erst beim Überfahren. */

.fuss {
  background: var(--sanft);
  font-size: .9rem;
  color: var(--text-leise);
}
.fuss-balken { height: 4px; background: var(--akzent); }

.fuss-innen {
  /* Auf dem Telefon stehen Logo und Profile nebeneinander - die Profile auf
     Höhe des Logos, nicht darunter. Gestapelt entstand ein hoher, leerer Fuß
     mit einem Logo, das allein in einer Zeile stand.
     Die Rechtsverweise bekommen eine eigene Zeile über die volle Breite; in
     der schmalen Spalte neben dem Logo brächen vier Verweise mehrfach um. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo    social"
    "angebot angebot"
    "recht   recht";
  align-items: center;
  gap: 1.5rem 1.25rem;
  padding: 2.25rem 0 1.5rem;
}
.fuss-innen > .fuss-block:first-child { grid-area: logo; }
.fuss-innen .social { grid-area: social; }
.fuss-innen .recht  { grid-area: recht; }
.fuss-innen .fuss-angebot { grid-area: angebot; }
.fuss-block { display: grid; gap: 1rem; align-content: start; }
.fuss-rechts { display: contents; }   /* Kinder wandern ins Raster des Fußes */

.fuss-logo-link { justify-self: start; }
.fuss-logo {
  width: 5.5rem;
  height: auto;
  opacity: .85;
  transition: opacity .18s ease;
}
.fuss-logo-link:hover .fuss-logo,
.fuss-logo-link:focus-visible .fuss-logo { opacity: 1; }


/* Profile als Kacheln */
.social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin: 0;
}

/* Im Fuß stehen die Profile des Studios - auf dem Telefon untereinander an
   der rechten Kante. Die Regel hängt bewusst an .fuss-rechts: Dieselbe Klasse
   trägt weiter oben die Kanäle der Sendung, und die sollen nebeneinander
   bleiben. minmax hält beide Knöpfe gleich breit; ohne das richtet sich jeder
   nach seiner Beschriftung und die Kante franst aus. Die Rechtsverweise
   darunter rücken mit, sonst stünden zwei Fluchtlinien übereinander. */
.fuss-rechts .social {
  grid-template-columns: minmax(9.5rem, auto);
  justify-content: end;
}
.social-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .75rem .7rem;
  background: var(--grund-dunkel);
  border: 1px solid var(--grund-hell);
  border-radius: .6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  min-height: 3rem;
  transition: background .18s ease, border-color .18s ease;
}
/*
 * Grundzustand neutral. Im Fuß spricht das Studio, nicht die Sendung - dort
 * wären Symbole in der Farbe des Podcasts eine falsche Zuordnung. Schlimmer
 * noch: --akzent ist die Farbe der NEUESTEN FOLGE und wechselt mit deren
 * Nummer, die Fußzeile hätte also jede Woche eine andere Farbe getragen.
 */
.social-knopf:hover, .social-knopf:focus-visible {
  background: var(--grund-hell);
  border-color: var(--text-leise);
}
.social-symbol { display: grid; place-items: center; color: var(--text-leise); }

/* Nur bei den Kanälen der Sendung selbst trägt das Symbol ihre Farbe - dort
   ist die Zuordnung eindeutig und gewollt. Auch hier die Signalfarbe der
   Marke, nicht die wechselnde der Folge. */
.marken-social .social-symbol { color: var(--signal); }
.marken-social .social-knopf:hover,
.marken-social .social-knopf:focus-visible { border-color: var(--signal); }
.social-symbol svg { display: block; }
.social-name { font-size: .88rem; }

/* Verweise: gedämpft, Unterstreichung erst beim Überfahren */
.recht {
  /* Nur noch drei Pflichtangaben, und die dürfen leise sein: eine Reihe,
     kleiner gesetzt, mit Trennpunkten. Als Raster wirkten sie wie eine
     Navigation - das sind sie nicht. Seit "Werbung buchen" als eigener Knopf
     darüber steht, passen die drei auch auf dem Telefon in eine Zeile. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  font-size: .85rem;
  line-height: 1.4;
  margin: 0;
}
.recht a + a::before {
  content: "·";
  margin-right: .75rem;
  opacity: .5;
}

.recht a { color: var(--text-leise); text-decoration: none; }
.recht a:hover, .recht a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

/* ---------- Ab Tablet ---------- */

@media (min-width: 40rem) {
  .held-raster { grid-template-columns: 20rem 1fr; align-items: center; gap: 2.5rem; }
  .abo-liste { grid-template-columns: repeat(2, 1fr); }
  .karte, .archiv-liste > li { grid-template-columns: auto 1fr; align-items: start; }
  .karte-bild { width: 7rem; }
  .formate-liste { grid-template-columns: repeat(2, 1fr); }
  .formate-liste a { align-items: start; }
  .formate-bild { width: 7rem; }
  .fuss-innen { grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
  .fuss-rechts { justify-items: end; }
  .fuss-rechts .recht {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
  }
  .social { grid-template-columns: repeat(4, 1fr); }
  /*
   * Im Fuß stehen nur zwei Knöpfe. Als Raster mit vier gleichen Spalten
   * füllten sie die ersten beiden und klebten links, während die Verweise
   * darunter rechts standen - zwei Kanten, die nicht fluchteten. Als Flex
   * richten sie sich an derselben rechten Kante aus.
   */
  .fuss-rechts .social {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .band {
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .band-innen { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }


}

@media (min-width: 62rem) {
  .held { padding: 3.5rem 0 4rem; }
  .held-raster { grid-template-columns: 22rem 1fr; }
  .held-bild { max-width: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .zuruf { transform: none; }
}

/* ---------- Schild: worum es in der Reihe geht ----------
   Ein Abo ist eine Entscheidung über die Reihe, nicht über eine Folge.
   Dieser Block sagt, was man abonniert - er stand vorher nur im Kopfbereich
   des Dokuments und war damit für Leser unsichtbar. */

.schild {
  padding: 1.5rem 0 .5rem;
  border-top: 1px solid var(--grund-hell);
}
.schild-raster {
  /* Mobil: Titelbild und Name nebeneinander, Beschreibung darunter über die
     volle Breite. Gestapelt schob das größere Titelbild den Namen unter die
     Falz - und eine Beschreibung in der Restspalte neben dem Bild wäre auf
     dem Telefon vier Wörter breit. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "bild kopf"
    "rumpf rumpf";
  align-items: center;
  gap: .9rem 1rem;
}
.schild-bild  { grid-area: bild; }
.schild-kopf  { grid-area: kopf; }
.schild-rumpf { grid-area: rumpf; }
.schild-bild {
  /* Nur eine Breitenangabe. Hier standen zwei, und die zweite hat die erste
     stillschweigend überschrieben - eine Vergrößerung blieb deshalb ohne
     Wirkung. */
  width: clamp(6rem, 24vw, 8.5rem);
  height: auto;
  border-radius: .5rem;
  border-bottom: 3px solid var(--akzent);
}
.schild h1 {
  /* Der Markenname ist die Hauptzeile der Seite - er gehört in die
     Hausschrift, nicht in die Textschrift. */
  font-family: var(--schrift-kopf);
  font-weight: 900;
  font-size: calc(clamp(1.25rem, 4.5vw, 1.6rem) * var(--kopf-skala, 1));
  color: var(--text);
  margin-bottom: .15rem;
  letter-spacing: -0.03em;
}
.schild-text { margin: 0 0 .6rem; color: var(--text-leise); max-width: 56ch; }
.schild-fakten {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 700;
}

@media (min-width: 40rem) {
  .schild-raster {
    /* Ab Tabletbreite ist rechts vom Bild Platz für beides. */
    grid-template-areas:
      "bild kopf"
      "bild rumpf";
    align-items: start;
    gap: .35rem 1.5rem;
  }
  .schild-bild { width: clamp(8rem, 13vw, 10.5rem); height: auto; }
}

/* ---------- Erkennungsfarben der Dienste ----------
   Die Klassen standen im HTML, hatten aber keine Regel - vier identische
   Balken zwingen zum Lesen. Ein Symbol in der vertrauten Plattformfarbe
   wird erkannt, bevor der Text gelesen ist. Die Farbe sitzt nur am Symbol,
   die Knopffläche bleibt in der Markenfarbe. */

.knopf-symbol { border-radius: .3rem; }
.knopf-spotify .knopf-symbol { color: #1DB954; }
.knopf-apple   .knopf-symbol { color: #9933CC; }
.knopf-amazon  .knopf-symbol { color: #25D1DA; }
.knopf-youtube .knopf-symbol { color: #FF0000; }

/* Auf dunklem Grund brauchen die Symbole eine helle Unterlage, sonst
   verschwinden sie in der Vollton-Fläche. */
.knopf .knopf-symbol {
  background: var(--grund-dunkel);
  padding: .2rem;
  width: 1.9rem;
  height: 1.9rem;
}

/* ---------- Der Schild sitzt jetzt oben und trägt die Seite ---------- */
.schild { padding: 2rem 0 1.5rem; border-top: 0; }
.schild h1 { font-size: calc(clamp(1.4rem, 5.5vw, 2.1rem) * var(--kopf-skala, 1)); }
.schild-hosts {
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--text);
}

/* Archivlink statt eingebettetem Player: 114 Abspielfelder im Quelltext
   waren das lauteste Element der Seite und arbeiteten gegen das Abo. */
.archiv-fuss { margin: 1rem 0 0; font-size: .95rem; font-weight: 700; }

/* ---------- Ein Hauptweg, drei Nebenwege ----------
   Drei unabhängige Untersuchungen kamen zum selben Schluss: Mehrere
   Vollton-Knöpfe untereinander heben sich gegenseitig auf. Die Besten der
   Gattung halten den Grund neutral und lassen die Farbe im Symbol.
   Wir behalten genau eine laute Fläche - den ersten Knopf, der bei einem
   deutschen Publikum das häufigste Ziel ist - und nehmen den Rest zurück. */

.abo-liste > li:not(:first-child) .knopf {
  background: var(--sanft);
  color: var(--text);
  border: 1px solid var(--grund-hell);
}
.abo-liste > li:not(:first-child) .knopf:hover,
.abo-liste > li:not(:first-child) .knopf:focus-visible {
  background: var(--grund-hell);
  filter: none;
}
.abo-liste > li:not(:first-child) .knopf-pfeil { opacity: .4; }

/* Auf dem zurückgenommenen Grund braucht das Symbol keine Extra-Unterlage. */
.abo-liste > li:not(:first-child) .knopf .knopf-symbol {
  background: transparent;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
}

/* ---------- Übersicht aller Formate ----------
   Andere Aufgabe als eine Podcast-Seite: Hier wird nicht abonniert, hier
   wird ausgewählt. Deshalb tragen die Cover die Seite, nicht der Text. */

.uebersicht-kopf {
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--grund-hell);
}
.uebersicht-raster {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
.uebersicht-logo { width: 3.5rem; height: auto; }
.uebersicht-kopf h1 { font-size: calc(clamp(1.6rem, 6vw, 2.4rem) * var(--kopf-skala, 1)); margin-bottom: .35rem; }
.uebersicht-unter {
  color: var(--text-leise);
  margin: 0;
  max-width: 46ch;
  font-size: .95rem;
}

.tafel {
  list-style: none;
  margin: 2rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 2.75rem;
}

.tafel-eintrag a {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: var(--sanft);
  border-radius: 1rem;
  border-top: 4px solid var(--marke);
  text-decoration: none;
  color: var(--text);
  transition: background .18s ease, transform .18s ease;
}
.tafel-eintrag a:hover, .tafel-eintrag a:focus-visible {
  background: var(--grund-hell);
  transform: translateY(-3px);
}

.tafel-bild {
  width: 100%;
  border-radius: .7rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tafel-name {
  line-height: 1.2;   /* span erbt sonst 1,6 vom Text */
  display: block;
  font-family: var(--schrift-kopf);
  font-weight: 900;
  font-size: calc(1.3rem * var(--kopf-skala, 1));
  letter-spacing: -0.03em;
}
.tafel-claim { display: block; color: var(--marke); font-weight: 600; font-size: .92rem; }

.tafel-knopf {
  display: block;
  padding: .8rem 1rem;
  background: var(--marke);
  color: var(--grund-dunkel);
  border-radius: .6rem;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 40rem) {
  .tafel { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .uebersicht-kopf { padding: 3.25rem 0 2.75rem; }
  .uebersicht-raster { gap: 2.5rem; }
  .uebersicht-logo { width: 5.5rem; }
  /* Im Kopfband bleibt es kleiner: Das Band klebt beim Scrollen mit, ein
     Logo in voller Größe nähme dauerhaft Bildschirm weg. */
  .band-logo { width: 3.2rem; }
  .uebersicht-unter { max-width: 58ch; font-size: 1.05rem; }
}
@media (min-width: 62rem) {
  .tafel { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 3rem; }
}

.band-alle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--linie-stark);
  color: var(--text-leise);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.band-alle:hover, .band-alle:focus-visible {
  color: var(--text);
  border-color: var(--linie-stark);
}
.band-alle-zeichen { display: inline-flex; opacity: .8; }

/* ---------- Die Kanäle der Sendung, über den weiteren Formaten ---------- */
.marken-social {
  padding: 1.75rem 0 .5rem;
  border-top: 1px solid var(--linie);
}
.marken-social h2 {
  font-family: var(--schrift-kopf);
  font-size: calc(1.15rem * var(--kopf-skala, 1));
  margin: 0 0 .9rem;
  color: var(--text-leise);
  font-weight: 700;
}

/*
 * Die vollständigen Namen brauchen rund 950 px. Erst ab dieser Breite zeigt
 * das Band die ganze Reihe - darunter lief sie rechts aus dem Bild und schob
 * das Logo weg. Bis dahin bleibt es bei „Alle" und der aktuellen Reihe; die
 * anderen Formate stehen mit Cover und Beschreibung weiter unten.
 */
@media (min-width: 60rem) {
  .band-tab:not(.band-tab-hier) { display: inline-block; }
  .band-nav { flex-wrap: nowrap; justify-content: flex-end; }
}

/*
 * Arapey ist eine Antiqua und kommt nur in 400 - die CI von #ECHTJETZT
 * arbeitet deshalb mit Sperrung statt mit Fettung. Damit die übrigen Marken
 * davon unberührt bleiben, hängt der Wert an einer eigenen Eigenschaft, die
 * das Markenregister über die Kopfschrift mitbringt.
 */
h1, h2, h3, .held-titel, .schild h1 {
  letter-spacing: var(--sperrung, -0.03em);
}

/*
 * Auf hellem Grund kehren sich die Verhältnisse um: Die hervorgehobene
 * Fläche darf nicht die helle Signalfarbe tragen, sondern muss dunkel
 * genug für weiße Schrift sein. Terrakotta auf Weiß ergibt 2,81:1 - zu
 * wenig; Terrakotta Dark liegt bei 4,95:1.
 */
.hell .abo-liste > li:first-child .knopf {
  background: var(--signal);
  color: var(--grund);
  border-color: var(--signal);
}
.hell .abo-liste > li:first-child .knopf .knopf-pfeil { color: var(--grund); }

/* Urheberzeile, zurückhaltend - sie soll erkennbar sein, nicht werben. */
.fuss-credit {
  /* Signatur, kein Inhalt: eng an der Linie, klein, zurückhaltend. */
  margin: 0;
  font-size: .72rem;
  color: var(--text-leise);
  opacity: .7;
  text-align: right;
}
.fuss-credit a { color: var(--text-leise); text-decoration: underline; }
.fuss-credit a:hover, .fuss-credit a:focus-visible { color: var(--akzent); }

/* ---------- Werbepartner ----------
   Kennzeichnungspflichtig: Die Überschrift sagt ausdrücklich "Werbepartner",
   die Verweise tragen rel="sponsored". Werbung muss als solche erkennbar
   sein - das Trennungsgebot gilt auch hier. */

.partner { padding: 2.5rem 0; border-top: 1px solid var(--grund-hell); }
.partner h2 { font-size: calc(clamp(1.3rem, 4.5vw, 1.7rem) * var(--kopf-skala, 1)); }
.partner-unter { color: var(--text-leise); margin: 0 0 1.25rem; font-size: .95rem; }

.partner-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

/* Die helle Flaeche gehoert an die Kachel, nicht an den Verweis - sonst
   sieht ein Partner ohne hinterlegte Adresse anders aus als die anderen. */
.partner-kachel {
  background: var(--text);
  border-radius: .85rem;
  padding: 1.25rem 1rem;
  display: grid;
  gap: .75rem;
  justify-items: center;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.partner-kachel:hover, .partner-kachel:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .35);
}
.partner-kachel a,
.partner-kachel > img {
  display: grid;
  gap: .75rem;
  justify-items: center;
  text-align: center;
  text-decoration: none;
}
.partner-kachel > img { margin-inline: auto; }
.partner-kachel img {
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}
.partner-kachel span {
  font-size: .82rem;
  font-weight: 700;
  color: var(--grund-dunkel);
  letter-spacing: .02em;
}

@media (min-width: 40rem) {
  .partner-liste { grid-template-columns: repeat(2, 1fr); }
}

/* Schlussband: die Urheberzeile steht rechts, wie im Media Center. */
.fuss-schluss {
  padding: .55rem 0 .8rem;
  border-top: 1px solid var(--grund-hell);
}

/* ---------- Abspieler ----------
   Ersetzt den nativen <audio controls>. Der war auf dunklem Grund eine
   weiße Pille mit 15:1 Kontrast - lauter als der Abo-Knopf, um den es auf
   der Seite eigentlich geht. */

/*
 * Der native Abspieler verschwindet erst, wenn der eigene ihn ersetzt hat.
 * Vorher stand hier `audio { display: none }` ohne Bedingung - damit war ohne
 * JavaScript keine einzige Folge abspielbar, obwohl das Markup den nativen
 * Player als Rückfall mitliefert. Jetzt greift die Regel nur, wenn ein
 * .abspieler davor steht - und den baut allein player.js.
 */
.abspieler ~ audio { display: none; }

.abspieler {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .35rem 0;
}

/* Kontur statt Fläche. Der Knopf ist damit leiser als das Cover darüber -
   er führt das Auge, ohne mit dem Titelbild um Aufmerksamkeit zu streiten.
   Die Füllung ist für den Moment reserviert, in dem jemand ihn anfasst. */
.abspieler-knopf {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  background: transparent;
  color: var(--akzent);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease;
}
.abspieler-knopf svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  /* Ein Dreieck sitzt im Kreis nie dort, wo die Geometrie es hinsetzt -
     das optische Zentrum liegt weiter rechts. Bei einer Kontur fällt das
     auf, bei einer Fläche nicht. */
  transform: translateX(2px);
}
.abspieler-knopf:hover, .abspieler-knopf:focus-visible {
  background: var(--akzent);
  color: var(--grund-dunkel);
  transform: scale(1.06);
}
.abspieler-knopf:active { transform: scale(.96); }

/* Läuft die Folge, steht dort das Pausenzeichen - zwei Balken, die mittig
   sitzen und keine Verschiebung brauchen. */
.spielt .abspieler-knopf {
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--akzent) 18%, transparent);
}
.spielt .abspieler-knopf svg { transform: none; }

.abspieler-leiste {
  height: 4px;
  /* Ein Hauch der Akzentfarbe in der Rinne: Seit der Knopf nur noch eine
     Kontur ist, verschwand die Linie im Untergrund - und mit ihr der
     Hinweis, dass man dort greifen kann. */
  background: color-mix(in srgb, var(--akzent) 22%, var(--grund-hell));
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
/* Der Greifbereich ist größer als die sichtbare Linie - vier Pixel trifft
   niemand mit dem Daumen. */
.abspieler-leiste::before {
  content: "";
  position: absolute;
  inset: -.85rem 0;
}
.abspieler-fuellung {
  display: block;
  height: 100%;
  width: 0;
  background: var(--akzent);
  border-radius: 2px;
}

.abspieler-zeit {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--text-leise);
  min-width: 3.2rem;
  text-align: right;
}

/* Im Held darf er größer sein - dort ist er der Hauptknopf. Die Kontur
   wächst mit, sonst wirkt sie bei der größeren Fläche wie ein Haarstrich. */
.held .abspieler-knopf { width: 3.75rem; height: 3.75rem; border-width: 3px; }
.held .abspieler-knopf svg { width: 1.7rem; height: 1.7rem; transform: translateX(3px); }
.held .spielt .abspieler-knopf svg, .spielt .held .abspieler-knopf svg { transform: none; }

/* Die Kurzzeile einer Formatkachel steht in der Farbe des jeweiligen Podcasts.
   Auf Navy trägt das: Türkis erreicht dort gut 9:1. Auf der hellen Fassung
   kippt es - gemessen am 12.09.2026 auf Sand #F9E2DC: Türkis 1,39:1, Gelb
   1,12:1, Orange 2,07:1. Das ist keine leise Farbe mehr, das ist unlesbar.
   Auch eine Beimischung von Dunkelbraun rettet es nicht: Gelb bleibt selbst
   bei 35 % Farbanteil bei 4,37:1 und damit unter der Grenze für Fließtext.
   Deshalb trägt auf hellem Grund der Balken links die Zuordnung - er ist
   Fläche, keine Schrift - und die Zeile selbst wird lesbar. */
.hell .formate-claim,
.hell .tafel-claim {
  /* --marke-text kommt je Kachel aus dem Markenregister und trägt dort die
     abgedunkelte Fassung aus dem CI-Guide. Fehlt sie, bleibt es bei der
     gedämpften Textfarbe - lieber unbunt als unlesbar. */
  color: var(--marke-text, var(--text-leise));
}

/* ---------- Knopf mit Kontur ----------
   Drei Stellen brauchen denselben Knopf: der Weg zurück von den Textseiten,
   "Werbung buchen" im Fuß und der Verweis auf alle Folgen bei Buzzsprout.
   Sie stehen hier gemeinsam, damit sie nicht auseinanderlaufen.

   Die Farbe kommt von der Signalfarbe, sobald der Grund hell ist: Der Akzent
   ist dort Terrakotta #D18688 und erreicht gegen Weiß nur 2,27:1, die
   Signalfarbe #A65A5C dagegen 4,95:1 (gemessen 12.09.2026). */
.heim,
.fuss-angebot,
.weitere a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 2px solid var(--akzent);
  border-radius: 2rem;
  color: var(--akzent);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.heim:hover, .heim:focus-visible,
.fuss-angebot:hover, .fuss-angebot:focus-visible,
.weitere a:hover, .weitere a:focus-visible {
  background: var(--akzent);
  color: var(--grund-dunkel);
}
.hell .heim,
.hell .fuss-angebot,
.hell .weitere a {
  border-color: var(--signal);
  color: var(--signal);
}
.hell .heim:hover, .hell .heim:focus-visible,
.hell .fuss-angebot:hover, .hell .fuss-angebot:focus-visible,
.hell .weitere a:hover, .hell .weitere a:focus-visible {
  background: var(--signal);
  color: var(--grund);
}

/* Größen je Ort: Der Weg zurück und das Angebot tragen Gewicht, der Verweis
   auf das Archiv ist ein Nebenweg und bleibt klein. */
.heim { margin: 0 0 1.5rem; padding: .6rem 1.1rem; min-height: 2.75rem; font-size: .95rem; }
.fuss-angebot { justify-self: start; padding: .6rem 1.1rem; min-height: 2.75rem; font-size: .95rem; }
.weitere a { padding: .4rem .85rem; min-height: 2.25rem; font-size: .85rem; }