/*
 * FIX447 - DIE HOME-SEITE FUER NORMALE BENUTZER.
 *
 * Vorbild ist die Startseite eines Fernsehers: oben eine Buehne mit dem, was
 * gerade laeuft, darunter Reihen, die man seitwaerts schiebt. Kein Kachelfeld
 * mit Zahlen - wer den Fernseher einschaltet, will sehen, was laeuft, nicht
 * wie viele Sender es gibt.
 *
 * WARUM REIHEN UND KEIN RASTER: Ein Raster muss sich entscheiden, wie viele
 * Spalten es hat, und sieht auf dem iPhone anders falsch aus als auf dem
 * 27-Zoll-Bildschirm. Eine Reihe, die seitwaerts laeuft, passt auf beides
 * ohne Haltepunkte - sie zeigt einfach so viele Kacheln, wie hineinpassen.
 * Auf Geraeten mit Maus gibt es zusaetzlich zwei Pfeile, weil sich eine
 * Reihe mit dem Mausrad schlecht seitwaerts schieben laesst.
 */

.home-wrap { display: flex; flex-direction: column; gap: 22px; }

/*
 * DER ABSTAND ZWISCHEN DEN REIHEN GEHOERT HIERHER, NICHT AUF .home-wrap.
 *
 * Der gap oben wirkt nur zwischen den KINDERN von .home-wrap - und das sind
 * genau zwei: die Buehne und dieser Behaelter. Die Reihen liegen alle
 * gemeinsam darin und bekamen davon nichts ab; sie klebten aneinander, so
 * dass die Ueberschrift der naechsten Reihe fast die Kacheln der vorigen
 * beruehrte. Am Quelltext sieht man das nicht, auf dem Bildschirm sofort.
 */
#home-reihen { display: flex; flex-direction: column; gap: 26px; }

/* ---------------- Die Buehne ---------------- */

/*
 * FIX448 - GROSS UND FARBIG, ABER AUS ECHTEN DATEN.
 *
 * Vorbild ist die Startseite eines Fernsehers: oben eine Flaeche, die einen
 * anspringt, mit dem, was gerade laeuft.
 *
 * WOHER DIE FARBE KOMMT - und woher NICHT:
 * Ein Standbild aus dem Live-Bild waere das Naheliegende. Es kostet aber
 * einen Tuner: Es gibt keinen Endpunkt dafuer, und einen Frame zu holen
 * hiesse, einen Tuner darauf abzustimmen. Bei zwei Tunern wuerde eine
 * Startseite, die mehrere Leute oeffnen, gegen echtes Fernsehen antreten.
 * Deshalb hier zwei andere Quellen, die beide schon da sind und nichts
 * kosten:
 *   - das Sendlogo, gross und weichgezeichnet als Hintergrund. Aus einem
 *     50 Pixel breiten Logo wird so eine Flaeche in den Farben des Senders.
 *   - das DVB-Genre der laufenden Sendung. Der EPG-Decoder liest es
 *     laengst als Klartext aus ("Krimi", "Fussball", "Zeichentrick"), es
 *     lag nur ungenutzt herum.
 */
.home-buehne {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  background: #12121f;
  min-height: 292px;
  isolation: isolate;
}

/* Das weichgezeichnete Logo. Es wird weit ueber den Rand hinaus vergroessert,
   damit die Weichzeichnung an den Kanten nicht ausfranst. */
.home-buehne-grund {
  position: absolute; inset: -14%;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  filter: blur(46px) saturate(1.7);
  transform: scale(1.18);
  opacity: .62;
  z-index: 0;
  transition: opacity .3s ease;
}
/* Ohne Logo bleibt ein ruhiger Verlauf statt einer grauen Flaeche. */
.home-buehne-grund.leer {
  background: linear-gradient(118deg, #241a4d 0%, #14142a 55%, #0f2436 100%);
  filter: none; transform: none; opacity: 1;
}

/*
 * DER SCHLEIER IST NICHT ZIERRAT, SONDERN LESBARKEIT.
 * Ueber einem hellen Senderlogo stuende weisse Schrift sonst auf Weiss. Der
 * Verlauf ist links dicht und wird nach rechts durchsichtig - die Schrift
 * steht links, das Bild darf rechts durchkommen.
 */
.home-buehne-schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,10,19,.94) 0%, rgba(10,10,19,.86) 38%,
                            rgba(10,10,19,.55) 68%, rgba(10,10,19,.30) 100%),
    linear-gradient(to top, rgba(10,10,19,.55) 0%, rgba(10,10,19,0) 42%);
}

.home-buehne-inhalt {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 26px;
  padding: 26px 28px;
  min-height: 292px;
}

/* BREIT, NICHT QUADRATISCH. Senderlogos sind fast immer Schriftzuege im
   Querformat; in einem Quadrat bleiben sie winzig, weil die Hoehe sie
   begrenzt, noch bevor die Breite ausgenutzt ist. */
.home-buehne-logo {
  width: 176px; height: 108px; flex: 0 0 auto;
  border-radius: 16px; background: rgba(13,13,24,.82);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.home-buehne-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px 18px; }
.home-buehne-logo .kuerzel { font-size: 30px; font-weight: 800; color: #7a7a99; letter-spacing: 1px; }

.home-buehne-text { min-width: 0; flex: 1 1 auto; }

/* Die Marken ueber dem Titel: Empfangsart und Genre, beide in ihrer Farbe. */
.home-buehne-marken { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; min-height: 0; }
.home-marke {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--mf, #7c4dff) 22%, transparent);
  color: var(--mf, #7c4dff);
  border: 1px solid color-mix(in srgb, var(--mf, #7c4dff) 45%, transparent);
}
/*
 * Ersatz fuer Browser ohne color-mix (Safari vor 16.2). Ohne diesen Block
 * bliebe der Hintergrund der Marke durchsichtig und der Rahmen unsichtbar -
 * auf Daniels iPhone und auf dem MacBook mit Big Sur genau der Fall, auf den
 * es ankommt.
 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .home-marke { background: rgba(124,77,255,.20); border-color: rgba(124,77,255,.45); }
}

.home-buehne-oben {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 7px;
}
.home-buehne-titel {
  font-size: 34px; font-weight: 800; color: #fff; line-height: 1.12;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-buehne-unter {
  margin-top: 8px; font-size: 13.5px; color: #b9b9cc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fortschritt der laufenden Sendung. */
.home-buehne-balken {
  margin-top: 13px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.16); overflow: hidden; max-width: 520px;
}
.home-buehne-balken > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--mf, var(--purple));
  transition: width .4s ease;
}

.home-buehne-knoepfe { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.home-buehne-knoepfe .btn { font-size: 14px; padding: 10px 20px; }

/*
 * "DANACH" AM RECHTEN RAND.
 *
 * Es fuellt nicht nur die Luft: Die naechste Sendung steht in DERSELBEN
 * Antwort wie die laufende (api/epg/now-next liefert now UND next), kostet
 * also keinen einzigen zusaetzlichen Aufruf. Und es ist die zweite Frage,
 * die man beim Einschalten hat - gleich nach "was laeuft gerade".
 *
 * Unter 1100 px verschwindet es: Dort wird der Platz fuer den Titel
 * gebraucht, und zwei Spalten nebeneinander waeren beide zu schmal.
 */
.home-buehne-danach {
  flex: 0 0 auto; width: 232px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px 18px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.home-buehne-danach .kopf {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8f8fa8;
}
.home-buehne-danach .was {
  font-size: 15px; font-weight: 700; color: #e8e8f0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-buehne-danach .wann { font-size: 12.5px; color: #9a9ab2; }
@media (max-width: 1100px) { .home-buehne-danach { display: none; } }

/* Der Lebendpunkt neben "Laeuft gerade". Zurueckhaltend gepulst - eine
   Animation, die staerker zappelt als der Inhalt, lenkt nur ab. */
.home-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: home-puls 2.4s ease-in-out infinite;
}
@keyframes home-puls {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50% { opacity: .5; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) { .home-punkt { animation: none; } }

/* ---------------- Eine Reihe ---------------- */

.home-reihe { position: relative; }
.home-reihe-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; gap: 12px;
}
.home-reihe-kopf h3 { font-size: 14.5px; font-weight: 700; color: #fff; }
.home-reihe-kopf a { font-size: 12px; color: var(--purple); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap; }

.home-spur {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Damit der Fokusrahmen einer Kachel am Rand nicht abgeschnitten wird. */
  padding: 3px 2px 6px 2px;
}
.home-spur > * { scroll-snap-align: start; }

/* Die Pfeile gibt es nur dort, wo eine Maus ist. Auf dem Finger-Geraet
   waeren sie zwei Flaechen, die niemand braucht und die Platz kosten. */
.home-pfeil { display: none; }
@media (pointer: fine) {
  .home-pfeil {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-20%);
    width: 30px; height: 56px; z-index: 3;
    border: 1px solid var(--card-border); border-radius: 9px;
    background: rgba(10,10,19,.86); color: var(--text);
    cursor: pointer; opacity: 0; transition: opacity .15s ease;
  }
  .home-reihe:hover .home-pfeil { opacity: 1; }
  .home-pfeil:disabled { opacity: 0 !important; pointer-events: none; }
  .home-pfeil.links { left: -6px; }
  .home-pfeil.rechts { right: -6px; }
  .home-pfeil svg { width: 16px; height: 16px; }
}

/* ---------------- Eine Kachel ---------------- */

.home-kachel {
  flex: 0 0 auto; width: 142px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; overflow: hidden;
  cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.home-kachel:hover { border-color: #3a3a5c; }
@media (pointer: fine) { .home-kachel:hover { transform: translateY(-2px); } }
.home-kachel:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.home-kachel-bild {
  position: relative;
  height: 86px; background: #0d0d18;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/*
 * FIX448 - DAS LOGO ZWEIMAL: einmal weichgezeichnet als Flaeche, einmal
 * scharf und VOLLSTAENDIG darueber.
 *
 * Der erste Entwurf liess die breiten Kacheln das Logo mit "cover" fuellen.
 * Bei meinen quadratischen Platzhaltern sah das gut aus - bei einem echten
 * Senderlogo heisst "cover" aber: hineinzoomen und abschneiden. Aus einem
 * Schriftzug wird dann ein Ausschnitt aus zwei Buchstaben. Aufgefallen beim
 * Ansehen des Bildes, nicht beim Schreiben.
 *
 * Jetzt fuellt eine weichgezeichnete Kopie die Flaeche (die darf ruhig
 * beschnitten werden, sie ist nur Farbe), und das Logo selbst steht
 * unbeschnitten darauf. Es ist dieselbe Adresse, also auch nur EIN Abruf -
 * den zweiten bedient der Zwischenspeicher des Browsers.
 */
.home-kachel-bild::before {
  content: ""; position: absolute; inset: -20%;
  background-image: var(--bild, none);
  background-size: cover; background-position: center;
  filter: blur(17px) saturate(1.7);
  opacity: .48;
  z-index: 0;
}
.home-kachel-bild img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; padding: 9px;
}
.home-kachel-bild .kuerzel {
  position: relative; z-index: 1;
  font-size: 17px; font-weight: 800; color: #5c5c78; letter-spacing: 1px;
}

/* Breite Kacheln fuer Aufnahmen und Sendungen - dort ist der Titel die
   Hauptsache, nicht das Logo. */
.home-kachel.breit { width: 216px; }
.home-kachel.breit .home-kachel-bild { height: 106px; }
/* Kein "cover" - siehe die Begruendung oben. Nur etwas mehr Luft, weil die
   Flaeche groesser ist. */
.home-kachel.breit .home-kachel-bild img { padding: 13px 18px; }

.home-kachel-text { padding: 8px 10px 10px; }
.home-kachel-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-kachel-unter {
  margin-top: 3px; font-size: 11px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * Das Faehnchen oben links auf der Kachel.
 *
 * FIX448: Es traegt jetzt die Farbe seiner Sache - die Empfangsart beim
 * Radio, das DVB-Genre bei einer Sendung. js/home.js setzt dafuer --mf auf
 * der Kachel. Die Farbe ist also nicht Dekoration, sondern eine zweite,
 * schneller lesbare Fassung dessen, was dort ohnehin steht.
 */
.home-fahne {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(10,10,19,.84);
  color: var(--mf, #c9c9d6);
  border: 1px solid var(--mf, var(--card-border));
  max-width: calc(100% - 12px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-fahne.laeuft { background: rgba(34,197,94,.22); color: #86efac; border-color: rgba(34,197,94,.5); }

/*
 * Ein schmaler Farbstreifen am oberen Rand des Bildes. Er gibt der Reihe auf
 * einen Blick ein Muster - alles Blaue ist Nachrichten, alles Gruene Sport -
 * ohne dass man die Faehnchen einzeln lesen muss.
 */
.home-kachel-bild::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--mf, transparent);
  opacity: .95; z-index: 2;
}

/* Der Farbton faerbt auch das Bildfeld ganz leicht ein - sonst waere die
   Kachel unter dem Streifen wieder dasselbe Grau wie alle anderen. */
.home-kachel-bild {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--mf, #0d0d18) 15%, #0d0d18) 0%, #0d0d18 72%);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .home-kachel-bild { background: #0d0d18; }
}

/* Fortschrittsbalken am unteren Rand des Bildes - bei laufenden Sendungen. */
.home-fortschritt {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: rgba(0,0,0,.45);
}
.home-fortschritt > span { display: block; height: 100%; background: var(--mf, var(--purple)); }

/* ---------------- Leerzustaende ---------------- */

/*
 * Eine leere Reihe wird NICHT angezeigt - sie verschwindet ganz. Eine
 * Ueberschrift ueber einer leeren Flaeche sieht aus wie ein Fehler. Nur die
 * erste Reihe ("Weiter hören") erklaert sich beim ersten Start, weil sonst
 * niemand versteht, warum sie fehlt.
 */
.home-leer {
  font-size: 12.5px; color: var(--text-faint);
  border: 1px dashed var(--card-border); border-radius: 12px;
  padding: 16px 18px;
}

/* ---------------- Schmale Bildschirme ---------------- */

@media (max-width: 720px) {
  .home-buehne { min-height: 0; }
  .home-buehne-inhalt {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 18px; min-height: 0;
  }
  .home-buehne-logo { width: 132px; height: 76px; border-radius: 12px; }
  .home-buehne-titel { font-size: 23px; -webkit-line-clamp: 3; }
  .home-buehne-unter { white-space: normal; }
  .home-buehne-balken { max-width: none; }
  .home-kachel { width: 124px; }
  .home-kachel-bild { height: 74px; }
  .home-kachel.breit { width: 186px; }
  .home-kachel.breit .home-kachel-bild { height: 92px; }
}