/* Podcast-Reihe (Baustein einer Themenseite) — Variante „B" aus dem Entwurf (ReiheOrange /
   ReiheWeiss / Reihe für den Desktop, ReiheMobil mit den Farbsätzen unter 760 px).
   Schrift und Grundfarben aus colors_and_type.css; die Werte hier sind die des Entwurfs.
   Die Grundregeln sind der Farbsatz „orange"; welche Fläche der Abschnitt bekommt, entscheidet
   seine Position auf der Seite (src/lib/themenFlaechen.ts) — „weiß" und „dunkel" (auf Schwarz)
   stehen als Überschreibungen am Ende dieser Datei.
   Komponente: src/components/PodcastReihe.tsx. */

.pr-band {
  background: #f08300;
  color: #111111;
  font-family: var(--font-sans);
  padding: 64px 0;
}

.pr-raster {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ── links: die Reihe ──────────────────────────────────────────────────────────── */
.pr-reihe {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.pr-kachel {
  width: 160px;
  height: 160px;
  border-radius: 22px;
  background: #111111;
  color: #f08300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-kachel-klein {
  display: none;
}
.pr-kachel-gross,
.pr-kachel-klein {
  line-height: 0;
}
.pr-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111111;
}
.pr-titel {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111111;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.pr-beschreibung {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #2b2b2a;
}
.pr-zaehler {
  margin: 0;
  font-size: 14px;
  color: #2b2b2a;
}

/* ── rechts: Karte der aktiven Folge und die Zeilen darunter ───────────────────── */
.pr-folgen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pr-karte {
  background: #ffffff;
  color: #111111;
  border-radius: 22px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.pr-kopf {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pr-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}
.pr-folge-eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: #a35c00;
}
.pr-folge-titel {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: #111111;
  overflow-wrap: anywhere;
}
.pr-folge-meta {
  font-size: 14px;
  color: #4a4a4a;
}

/* Knöpfe — gemeinsame Grundlage */
.pr-band button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pr-play {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: none;
  background: #111111;
  color: #f08300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.pr-tempo {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #9d9d9c;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  flex-shrink: 0;
  /* Die Aufschrift wechselt zwischen „1,0×" und „1,25×" — sonst springt die Zeile. */
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
.pr-zeitleiste {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pr-sprung {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #9d9d9c;
  background: #ffffff;
  font-size: 11px;
  font-weight: 700;
  color: #111111;
  flex-shrink: 0;
  padding: 0;
}
.pr-zeit {
  font-size: 14px;
  color: #4a4a4a;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Nur mobil: das Transkript-Symbol in der Steuerleiste (Entwurf ReiheMobil). Ohne
   Transkript bleibt sein Platz leer — einen Download gibt es bewusst nicht (02.11.2026). */
.pr-transkript-symbol {
  display: none;
}

/* Der Regler: ein natives `<input type="range">`, gestaltet wie im Entwurf — Spur 6 px
   #d8d8d8, gefüllter Teil orange, Griff 18 px schwarz mit weißem Rand. Die Fläche ist 44 px
   hoch, damit der Finger sie trifft. Der gefüllte Teil kommt über --pr-fortschritt aus der
   Komponente (Firefox zeichnet ihn zusätzlich selbst über ::-moz-range-progress). */
.pr-regler {
  -webkit-appearance: none;
  appearance: none;
  flex-grow: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --pr-gefuellt: #f08300;
  --pr-leer: #d8d8d8;
  --pr-knopf: #111111;
  --pr-knopf-rand: #ffffff;
  --pr-spur: linear-gradient(
    to right,
    var(--pr-gefuellt) 0,
    var(--pr-gefuellt) var(--pr-fortschritt, 0%),
    var(--pr-leer) var(--pr-fortschritt, 0%),
    var(--pr-leer) 100%
  );
}
.pr-regler:disabled {
  cursor: default;
}
.pr-regler::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pr-spur);
}
.pr-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 999px;
  background: var(--pr-knopf);
  border: 3px solid var(--pr-knopf-rand);
  box-sizing: border-box;
}
.pr-regler::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pr-leer);
}
.pr-regler::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--pr-gefuellt);
}
.pr-regler::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pr-knopf);
  border: 3px solid var(--pr-knopf-rand);
  box-sizing: border-box;
}

/* Der Link unter der Steuerung: das Transkript (nur, wenn es eines gibt) */
.pr-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 15px;
}
.pr-link {
  color: #a35c00;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
  font-size: 15px;
  line-height: 1.4;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.pr-link:hover {
  color: #7a4500;
}

.pr-fehler {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #111111;
}

/* Das Transkript. `hidden="until-found"` blendet nur den INHALT aus — gestaltet wird
   deshalb der innere Kasten, nicht die Fläche selbst (wie in ProgramInfoTabs). Die
   geschlossene Fläche bleibt aber ein Element der Karte und bekäme den Abstand davor; den
   nimmt der negative Rand zurück. */
.pr-transkript[hidden] {
  margin-top: -16px;
}
.pr-transkript-text {
  border-top: 1px solid #e3e3e2;
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #2b2b2a;
  max-width: 70ch;
}
.pr-transkript-text p {
  margin: 0;
}

/* Die übrigen Folgen als Zeilen */
.pr-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-zeile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  background: transparent;
  color: #111111;
  text-align: left;
  min-height: 44px;
}
.pr-zeile-play {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #111111;
  color: #f08300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-zeile-nr {
  font-size: 14px;
  color: #2b2b2a;
  width: 64px;
  flex-shrink: 0;
}
.pr-zeile-titel {
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pr-zeile-dauer {
  font-size: 14px;
  color: #2b2b2a;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pr-zeile:hover .pr-zeile-titel {
  text-decoration: underline;
}

/* Fokus: immer sichtbar, 3 px schwarz wie im Entwurf. */
.pr-band button:focus-visible,
.pr-band a:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}
.pr-regler:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .pr-play,
  .pr-sprung,
  .pr-tempo,
  .pr-zeile-play {
    transition: transform 0.12s ease;
  }
  .pr-play:active,
  .pr-sprung:active,
  .pr-tempo:active,
  .pr-zeile:active .pr-zeile-play {
    transform: scale(0.96);
  }
}

/* ── mittlere Breite: die Reihe über der Karte ─────────────────────────────────── */
@media (max-width: 1023px) {
  .pr-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ── mobil (Entwurf ReiheMobil, Farbsatz orange) ───────────────────────────────── */
@media (max-width: 759px) {
  .pr-band {
    padding: 40px 0;
  }
  .pr-band .wrap {
    padding: 0 20px;
  }
  .pr-raster {
    gap: 24px;
  }

  .pr-reihe {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
  }
  .pr-kachel {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }
  .pr-kachel-gross {
    display: none;
  }
  .pr-kachel-klein {
    display: block;
  }
  .pr-eyebrow {
    font-size: 13px;
  }
  .pr-titel,
  .pr-beschreibung,
  .pr-zaehler {
    grid-column: 1 / -1;
  }
  .pr-titel {
    font-size: 28px;
  }

  /* Die Karte wird ein Raster, Kopf und Zeitleiste geben ihre Kinder dafür frei:
     Titelblock · Regler · Zeiten · Steuerleiste (Tempo, −15, Abspielen, +15, Transkript)
     · Links. */
  .pr-folgen {
    gap: 24px;
  }
  .pr-karte {
    border-radius: 18px;
    padding: 20px;
    box-shadow: none;
    display: grid;
    /* Fünf Spalten, der Abspielknopf in der mittleren: die übrigen vier teilen sich den
       Rest gleich. (`auto`-Spuren mit space-between gingen nicht — die Zeilen über die volle
       Breite, Titel, Regler und Links, blähen sie ungleich auf.) Ohne Transkript bleibt die
       letzte Spalte leer, das Abspielen steht trotzdem in der Mitte und −15/+15 rahmen es
       gleich ein. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    column-gap: 4px;
    row-gap: 14px;
    grid-template-areas:
      'info info info info info'
      'regler regler regler regler regler'
      'jetzt jetzt . gesamt gesamt'
      'tempo zurueck play vor transkript'
      'links links links links links';
  }
  /* Ohne Transkript gibt es keinen Link darunter — und damit auch keine leere Zeile samt
     Abstand am Ende der Karte. */
  .pr-karte.pr-ohne-transkript {
    grid-template-areas:
      'info info info info info'
      'regler regler regler regler regler'
      'jetzt jetzt . gesamt gesamt'
      'tempo zurueck play vor transkript';
  }
  .pr-info,
  .pr-regler,
  .pr-links,
  .pr-fehler,
  .pr-transkript {
    justify-self: stretch;
  }
  .pr-tempo {
    justify-self: start;
  }
  .pr-transkript-symbol {
    justify-self: end;
  }
  .pr-kopf,
  .pr-zeitleiste {
    display: contents;
  }
  .pr-info {
    grid-area: info;
  }
  .pr-folge-eyebrow {
    font-size: 13px;
  }
  .pr-folge-titel {
    font-size: 20px;
  }
  .pr-regler {
    grid-area: regler;
    height: 32px;
    width: 100%;
  }
  .pr-regler::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
  }
  .pr-regler::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  .pr-zeit {
    font-size: 13px;
    /* Die Zeiten stehen im Entwurf dicht unter dem Regler. */
    margin-top: -10px;
  }
  .pr-zeit-jetzt {
    grid-area: jetzt;
    justify-self: start;
  }
  .pr-zeit-gesamt {
    grid-area: gesamt;
    justify-self: end;
  }
  .pr-tempo {
    grid-area: tempo;
    height: 44px;
    min-width: 52px;
    padding: 0 10px;
  }
  .pr-zurueck {
    grid-area: zurueck;
  }
  .pr-vor {
    grid-area: vor;
  }
  .pr-sprung {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }
  .pr-play {
    grid-area: play;
    width: 68px;
    height: 68px;
  }
  .pr-play svg {
    width: 28px;
    height: 28px;
  }
  .pr-transkript-symbol {
    grid-area: transkript;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #111111;
    padding: 0;
    text-decoration: none;
  }
  .pr-links {
    grid-area: links;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }
  .pr-link {
    display: block;
    padding: 12px 0;
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Fehler und Transkript bekommen nur dann eine Zeile, wenn es sie gibt. */
  .pr-fehler,
  .pr-transkript {
    grid-column: 1 / -1;
  }
  .pr-transkript[hidden] {
    margin-top: -14px;
  }

  .pr-zeile {
    display: grid;
    grid-template-columns: 44px auto minmax(0, 1fr);
    grid-template-areas:
      'play nr dauer'
      'play titel titel';
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px 4px;
  }
  .pr-zeile-play {
    grid-area: play;
  }
  .pr-zeile-nr {
    grid-area: nr;
    width: auto;
    font-size: 13px;
  }
  .pr-zeile-dauer {
    grid-area: dauer;
    font-size: 13px;
    justify-self: start;
    /* „Folge 3 · 41 Min." steht im Entwurf als EINE Zeile: den Spaltenabstand bis auf ein
       Wortzwischenraum-Maß zurücknehmen. */
    margin-left: -9px;
  }
  .pr-zeile-dauer::before {
    content: '· ';
  }
  .pr-zeile-titel {
    grid-area: titel;
    font-size: 16px;
  }
}

/* ── Farbsatz „weiß" (Entwurf ReiheWeiss) ──────────────────────────────────────────
   Kein Orange als Schrift: Akzente und Links in #a35c00 (5,1:1 auf Weiß, 4,8:1 auf der
   Karte #f7f7f6). Orange nur als Fläche — Kachel, Abspielknopf, gefüllter Regler. */
.pr-band.pr-weiss {
  background: #ffffff;
  color: #111111;
}
.pr-weiss .pr-kachel {
  background: #f08300;
  color: #111111;
}
.pr-weiss .pr-beschreibung,
.pr-weiss .pr-zaehler,
.pr-weiss .pr-zeile-nr,
.pr-weiss .pr-zeile-dauer {
  color: #4a4a4a;
}
.pr-weiss .pr-karte {
  background: #f7f7f6;
  box-shadow: none;
}
.pr-weiss .pr-play,
.pr-weiss .pr-zeile-play {
  background: #f08300;
  color: #111111;
}
.pr-weiss .pr-zeile {
  border-bottom-color: #e3e3e2;
}
.pr-weiss .pr-links {
  border-top-color: #e3e3e2;
}

/* ── Farbsatz „dunkel" auf Schwarz (Entwurf Reihe / ReiheMobil „dunkel") ─────────
   Grund #000 statt des Entwurfs-Anthrazits, damit der Abschnitt dieselbe Fläche ist wie
   jeder andere schwarze Abschnitt der Seite. Orange ist hier Akzent (7,9:1 auf Schwarz,
   5,8:1 auf der Karte #262624); Fokusrahmen orange (public/themen-flaechen.css). */
.pr-band.pr-schwarz {
  background: #000000;
  color: #ffffff;
}
.pr-schwarz .pr-kachel {
  background: #f08300;
  color: #111111;
}
.pr-schwarz .pr-eyebrow,
.pr-schwarz .pr-titel,
.pr-schwarz .pr-zeile,
.pr-schwarz .pr-zeile-titel {
  color: #ffffff;
}
.pr-schwarz .pr-beschreibung,
.pr-schwarz .pr-zaehler,
.pr-schwarz .pr-zeile-nr,
.pr-schwarz .pr-zeile-dauer {
  color: #c5c5c4;
}
.pr-schwarz .pr-karte {
  background: #262624;
  color: #ffffff;
  box-shadow: none;
}
.pr-schwarz .pr-folge-eyebrow {
  color: #f08300;
}
.pr-schwarz .pr-folge-titel,
.pr-schwarz .pr-fehler,
.pr-schwarz .pr-transkript-symbol {
  color: #ffffff;
}
.pr-schwarz .pr-folge-meta,
.pr-schwarz .pr-zeit,
.pr-schwarz .pr-transkript-text {
  color: #c5c5c4;
}
.pr-schwarz .pr-transkript-text {
  border-top-color: #4a4a4a;
}
.pr-schwarz .pr-play {
  background: #f08300;
  color: #111111;
}
.pr-schwarz .pr-tempo,
.pr-schwarz .pr-sprung {
  background: transparent;
  border-color: #6e6e6d;
  color: #ffffff;
}
.pr-schwarz .pr-regler {
  --pr-leer: #4a4a4a;
  --pr-knopf: #ffffff;
  --pr-knopf-rand: #262624;
}
.pr-schwarz .pr-link {
  color: #f08300;
}
.pr-schwarz .pr-link:hover {
  color: #ffa640;
}
.pr-schwarz .pr-zeile {
  border-bottom-color: #262624;
}
.pr-schwarz .pr-zeile-play {
  background: transparent;
  border: 2px solid #f08300;
  color: #f08300;
  box-sizing: border-box;
}
.pr-schwarz .pr-links {
  border-top-color: #4a4a4a;
}
.pr-schwarz .pr-regler:focus-visible {
  outline-color: #f08300;
}