/* Farben und Schriften aus digitalhandwerk.rocks ausgelesen, nicht geschaetzt:
   Grund #0C0D10, Flaeche #131519, Text #E2E0DD, Akzent #F59E0B (Amber),
   Inter Tight fuer Text, DM Mono fuer Labels, Radius 8px. */
:root {
  --bg: #0c0d10;
  --surface: #131519;
  --surface-2: #191c22;
  --line: #23262e;
  --text: #e2e0dd;
  --text-bright: #f0ede8;
  --muted: rgba(240, 237, 232, 0.62);
  --accent: #f59e0b;
  --accent-dim: rgba(245, 158, 11, 0.14);
  --cyan: #00e5ff;
  --radius: 8px;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Vom Visualizer je Bild gesetzt: 0 bis 1. Ausserhalb davon nie anfassen. */
  --pegel: 0;
  --rand: 1.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* Sicherheitsabstaende fuer Notch, Dynamic Island und die Wischleiste unten.
     Als installierte App liegt die Statusleiste ueber der Seite. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.innen { width: min(60rem, 100%); margin: 0 auto; padding: 0 var(--rand); }

/* ===================== Buehne ===================== */

.buehne {
  position: relative;
  min-height: 100vh;
  /* dvh beruecksichtigt die ein- und ausfahrende Browserleiste auf dem Telefon. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ohne das sammelt sich der Rest der Bildschirmhoehe als schwarze Flaeche unter
     dem Player: auf dem Telefon waren das 167 Pixel Leere vor dem Sendeplan. */
  justify-content: center;
  gap: 1rem;
  padding: 1.4rem var(--rand) 2rem;
  overflow: hidden;
}

/* Schein hinter allem, atmet mit dem Pegel. Bewusst sehr zurueckhaltend:
   ein Hintergrund, der zappelt, macht den Text unlesbar. */
.buehne::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 45%,
              rgba(245, 158, 11, 0.13), transparent 70%);
  opacity: calc(0.35 + var(--pegel) * 0.65);
  pointer-events: none;
}

.kopf {
  position: relative;
  width: min(38rem, 100%);
  display: flex;
  /* Auf 320 Pixeln passen Wortmarke und Abzeichen nicht nebeneinander, das
     Abzeichen lag ueber "Radio". Umbrechen statt schrumpfen: eine Wortmarke,
     die schmaler gerechnet wird, wird auch flacher und passt dann nicht mehr
     zur Schriftgroesse daneben. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}
h1 span { color: var(--accent); }

/* Die Wortmarke traegt "digital" in Weiss, das steht nur auf dunklem Grund.
   Hoehe statt Breite vorgeben, damit sie neben "Radio" auf derselben Linie
   sitzt, egal wie breit der Schriftzug ist. */
.marke {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}
.marke img {
  /* Beide Werte sind aus der Bilddatei gemessen: die Grundlinie liegt bei Zeile
     86,5 von 116, die Oberlaengen beginnen bei 6. Also 69,4 Prozent der
     Bildhoehe ueber und 25,4 Prozent unter der Grundlinie. Das "R" daneben ist
     0,75em hoch, macht 0,75 / 0,694 = 1,081em Bildhoehe.
     In em statt rem, damit eine geaenderte Schriftgroesse die Wortmarke
     mitnimmt und die Zeile nicht auseinanderfaellt. */
  height: 1.081em;
  width: auto;
  max-width: 100%;
  /* Ein Bild sitzt mit seiner Unterkante auf der Grundlinie, der Schriftzug hat
     aber Unterlaengen. Verschoben wird deshalb um den Teil des Bildes, der unter
     der Grundlinie liegt, und der reicht bis zur BILDKANTE bei 116, nicht bis zur
     letzten Tinte bei 109. Genau diese sechs Pixel transparenter Rand haben in
     der ersten Fassung gefehlt: die Wortmarke hing anderthalb Pixel zu hoch und
     "Radio" sah dadurch tiefergestellt aus. */
  transform: translateY(0.2748em);
}

.sub {
  position: relative;
  margin: 0;
  width: min(38rem, 100%);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.channel {
  flex: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  white-space: nowrap;
}
.channel::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
.channel.konserve { color: #d0d0cc; background: rgba(240, 237, 232, 0.1); }
.channel.konserve::before { background: #d0d0cc; animation: none; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .channel::before { animation: none; }
}

/* ===================== Visualizer ===================== */

/* Das Signet von digitalhandwerk als Visualizer: Impulse wandern die Leiterbahnen
   hoch. Der Pegel kommt aus einem AnalyserNode, der als Abzweig am Audiograph
   haengt und nicht im Signalweg liegt. Faellt er aus, laeuft der Ton weiter und
   die Bewegung wird deterministisch erzeugt. */
.viz {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 11rem;
  max-height: 52vh;
  display: grid;
  place-items: center;
  margin: 0.5rem 0;
}

.viz-schein {
  position: absolute;
  width: 26rem;
  max-width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(0, 229, 255, 0.16), rgba(245, 158, 11, 0.09) 45%, transparent 70%);
  opacity: calc(0.25 + var(--pegel) * 0.75);
  transform: scale(calc(0.86 + var(--pegel) * 0.28));
  filter: blur(14px);
}

.viz-kugel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* Der Schein dahinter traegt die Reaktion auf den Pegel. Ein Filter, der sich
     jedes Bild aendert, wuerde die ganze Flaeche neu rastern. */
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.18));
}

/* ===================== Player ===================== */

.player {
  position: relative;
  width: min(38rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.now {
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--surface-2);
}

.head-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.head-text { min-width: 0; }   /* damit lange Titel umbrechen statt zu sprengen */

/* --- Motiv --- */

.art {
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(245, 158, 11, 0.16), transparent 70%),
    var(--bg);
  color: var(--accent);
}
.art { overflow: hidden; }
.art svg { width: 46px; height: 46px; display: none; }
/* Coverbild fuellt die Kachel randlos. Feste Groesse, damit das Layout waehrend
   des Ladens nicht springt. */
.art img { width: 100%; height: 100%; object-fit: cover; display: none; }
/* Wortbeitrag zeigt das Mikrofon, Musik die Noten, alles andere das Mikrofon. */
.art[data-kind="music"] .art-music,
.art:not([data-kind="music"]) .art-mod { display: block; }
/* Liegt ein Cover vor, gewinnt es. Die Abschaltung der Symbole muss dieselbe
   Spezifitaet haben wie die Regel darueber: .art:not([data-kind="music"]) .art-mod
   zaehlt 0-3-0, ein blosses "svg" nur 0-2-1 und verliert trotz spaeterer Stelle.
   Genau daran lag das Mikrofon eine Runde lang ueber dem Coverbild. */
.art[data-kind="cover"] img { display: block; }
.art[data-kind="cover"] .art-mod,
.art[data-kind="cover"] .art-music { display: none; }

.kind {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.kind-moderation { color: var(--accent); }
.kind-ad { color: var(--cyan); }

.now h2 {
  margin: 0.5rem 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  /* Zwei Zeilen reichen, laengere Titel duerfen den Player nicht wachsen lassen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; }

.link {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* display:inline-block schlaegt die UA-Regel [hidden]{display:none}. Ohne diese
   Zeile steht "Beitrag im Blog lesen" auch unter Musiktiteln. */
.link[hidden] { display: none; }

/* --- Fortschritt --- */

.progress { margin-top: 1rem; }

.bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(240, 237, 232, 0.1);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  /* Kein Uebergang: die Position wird jede Viertelsekunde neu gesetzt,
     eine Animation wuerde nach einem Sprung hinterherlaufen. */
}
.bar-fill.idle { background: rgba(240, 237, 232, 0.25); }

.times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.times > span { flex: 1; }
.times .remaining { color: var(--text); text-align: right; }

/* --- Schalter --- */

/* Klein und rund statt breitem Balken. Der Schalter ist technisch noetig, weil
   Browser ohne Nutzerinteraktion kein Audio starten, aber er ist nicht der Inhalt. */
.play {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.play svg { width: 20px; height: 20px; }
.play:hover { background: var(--accent-dim); }
.play:focus-visible { outline: 2px solid var(--text-bright); outline-offset: 3px; }
.play[aria-pressed="true"] {
  color: #16130c;
  background: var(--accent);
}
.play .ico-pause { display: none; }
.play[aria-pressed="true"] .ico-play { display: none; }
.play[aria-pressed="true"] .ico-pause { display: block; }

/* ===================== Baender ===================== */

.band { border-top: 1px solid var(--line); padding: 2.6rem 0; }
#programm { background: var(--surface); }

.band-kopf { margin-bottom: 1.2rem; }
.band h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.band-sub {
  margin: 0.4rem 0 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Sendeplan --- */

/* Kein Scrollfenster: die Liste beginnt beim laufenden Beitrag und zeigt nur,
   was noch kommt. Gelaufenes steht gar nicht erst drin. */
.plan {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.plan-leer { padding: 1rem 1.1rem; color: var(--muted); font-size: 0.85rem; }

.plan li.pz {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.plan li.pz:first-child { border-top: 0; }
.plan .pz-zeit {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan .pz-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.plan .pz-titel a { color: inherit; text-decoration: none; }
.plan .pz-titel a:hover { color: var(--accent); text-decoration: underline; }
.plan .pz-typ {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.plan li.jetzt {
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
  padding-left: calc(1.1rem - 2px);
}
.plan li.jetzt .pz-titel { font-weight: 600; color: var(--text-bright); }
.plan li.jetzt .pz-zeit, .plan li.jetzt .pz-typ { color: var(--accent); }

/* --- Beitraege --- */

.beitraege {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.8rem;
}
.beitrag {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.beitrag:hover { border-color: var(--accent); background: var(--surface-2); }
.beitrag b { display: block; font-weight: 600; line-height: 1.3;
             color: var(--text-bright); font-size: 0.95rem; }
.beitrag span { display: block; margin-top: 0.35rem; font-family: var(--mono);
                font-size: 0.7rem; color: var(--muted); }

/* ===================== Fuss ===================== */

.fuss { border-top: 1px solid var(--line); padding: 1.6rem 0 2.4rem; }

.disclosure {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--accent-dim);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
.disclosure strong {
  flex: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.wer { margin: 0 0 1.4rem; max-width: 44rem; }
.wer h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.wer p { margin: 0 0 0.7rem; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.wer a { color: var(--accent); text-underline-offset: 3px; }

.fuss-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.fuss-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.fuss-zeile a { color: var(--muted); text-decoration: none; }
.fuss-zeile a:hover { color: var(--accent); }

/* ===================== Schmal ===================== */

@media (max-width: 34rem) {
  :root { --rand: 1.1rem; }
  h1 { font-size: 1.3rem; }
  .now h2 { font-size: 1.2rem; }
  .art { width: 64px; height: 64px; }
  .art svg { width: 34px; height: 34px; }
  .viz { max-height: 30vh; }
  .fuss-zeile { flex-direction: column; gap: 0.35rem; }
  .plan li.pz { grid-template-columns: 3.2rem 1fr; row-gap: 0.15rem; }
  .plan .pz-typ { grid-column: 2; }
}