/* StreamFinderPro+ — Designsystem „Vitrine", Farbvariante A.

   Die Spec nennt nur die Farbnamen Waldgruen / Senf / Bordeaux, keine Hex-Werte,
   keine Abstaende und kein Typo-Raster. Die konkreten Werte unten sind gewaehlt
   und in der README als Annahme ausgewiesen. „Vitrine" ist als Schaukasten
   gelesen: warmes Papier als Grund, Titel als gerahmte Objekte darauf,
   Serifen-Display fuer Ueberschriften, viel Ruhe zwischen den Elementen. */

:root {
  --waldgruen: #2f5d50;
  --waldgruen-hell: #e7efec;
  --senf: #d6a231;
  --senf-hell: #fbf1dc;
  --bordeaux-hell: #f7e8ea;

  /* Diese drei sind reine SCHRIFT-Tokens: sie stehen immer auf einer hellen
     Flaeche und werden im dunklen Schema aufgehellt. Fuer dunkle FLAECHEN gibt
     es getrennte Tokens (--waldgruen-tief, --senf-tief) — sonst wuerde ein
     Aufhellen im Dark Mode aus einem Knopf-Hintergrund eine helle Flaeche mit
     weisser Schrift machen. */
  --waldgruen-dunkel: #23443a;
  --senf-dunkel: #a97c1c;
  --bordeaux: #7b2d3b;

  --waldgruen-tief: #23443a;
  --senf-tief: #a97c1c;

  /* Zwei eigene Farben, damit sich die neuen Pillen nicht mit "im Abo"
     (gruen) oder "Miete" (senf) verwechseln lassen: Indigo fuer die Sprache,
     Violett fuer die Auslandsverfuegbarkeit. */
  --indigo: #3c5a8a;
  --indigo-hell: #e7ecf5;
  --violett: #6a4c93;
  --violett-hell: #efe9f7;

  --papier: #f5f1e8;
  --karte: #fffdf8;
  --tinte: #23201c;
  --tinte-leise: #6b655c;
  --linie: #e2dacb;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Durchgehend eine Sans-Serif-Schrift. --schrift-display bleibt als eigener
     Token bestehen (Ueberschriften, Karten-Titel, Kennzahlen), zeigt aber auf
     denselben Stack — Unterscheidung nur ueber Groesse und Gewicht. */
  --schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --schrift-display: var(--schrift-text);

  --schatten: 0 1px 2px rgba(35, 32, 28, .06), 0 6px 18px rgba(35, 32, 28, .07);

  /* Bildmarke: dunkles Waldgruen auf hellem Grund, helles Sandweiss auf
     dunklem. Die Marke ist inline eingebunden und erbt `color`. */
  --logo-tinte: #1f3d2e;
  --logo-hell: #f7f4eb;
  --logo-farbe: var(--logo-tinte);
}

/* Kein dunkles Farbschema mehr.
   Die App folgte `prefers-color-scheme`. Auf dem Telefon, das systemweit auf
   dunkel steht, wurde daraus ein fast schwarzgruener Grund (--papier #151d1a),
   waehrend derselbe Bildschirminhalt auf dem Desktop hell war — zwei
   verschiedene Apps, je nach Geraet. Auf Wunsch gilt jetzt ueberall das helle
   Schema; `color-scheme: light` im Kopf sagt dem Browser dasselbe, damit er
   auch Formularelemente hell zeichnet. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Ohne Serifen tragen Groesse und Gewicht die Hierarchie; leicht negative
   Laufweite haelt die Ueberschriften kompakt. */
h1, h2, h3 { font-family: var(--schrift-display); font-weight: 650; margin: 0; }
h1 { font-size: 1.35rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }

a { color: var(--waldgruen-dunkel); }

.huelle {
  max-width: 1080px;
  margin: 0 auto;
  /* Oben Luft, weil die Reiterleiste nicht mehr hier steht; unten Platz fuer
     die feste Bodenleiste, damit der letzte Inhalt nicht darunter verschwindet. */
  padding: var(--sp-5) var(--sp-4) calc(96px + env(safe-area-inset-bottom));
}

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--waldgruen);
  color: #fff;
  padding: env(safe-area-inset-top) 0 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.kopf-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.kopf h1 {
  color: #fff;
  font-size: clamp(.95rem, 4vw, 1.1rem);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf .marke {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1; min-width: 0; text-decoration: none; color: #fff;
  border-radius: var(--r-s); padding: 2px 4px; margin-left: -4px;
}
.kopf .marke:hover { background: rgba(255, 255, 255, .1); }
/* Bildmarke. Groesse skaliert mit der Viewport-Breite, damit sie auf dem
   Smartphone nicht die Kopfzeile sprengt und auf dem Desktop nicht verloren
   wirkt. Auf der Kopfzeile (dunkles Waldgruen) immer die helle Variante. */
.logo { display: block; height: auto; color: inherit; }
.kopf .marke .logo {
  width: clamp(26px, 6vw, 34px);
  min-width: 26px;
  color: var(--logo-hell);
}
.kopf a, .kopf button { color: #fff; }

/* Knoepfe in der Kopfzeile stehen auf Waldgruen. `.knopf.leise` setzt sonst
   dunkelgruene Schrift und gewinnt wegen hoeherer Spezifitaet gegen die Regel
   darueber — das ergab dunkle Schrift auf dunklem Grund. */
.kopf .knopf.leise {
  color: var(--logo-hell);
  border-color: rgba(255, 255, 255, .35);
  background: transparent;
}
.kopf .knopf.leise:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Symbolknoepfe in der Kopfzeile. Als Textknoepfe brauchten sie auf schmalen
   Geraeten so viel Breite, dass sie die Bildmarke ueberlappten. Die
   Beschriftung steckt jetzt in aria-label und title. */
.kopf-icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--logo-hell);
  cursor: pointer;
  text-decoration: none;
}
.kopf-icon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.kopf-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kopf-icon svg { width: 21px; height: 21px; display: block; }

.kopf-icon .zahl {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--senf);
  color: #3a2a05;
  font-weight: 700;
  font-size: .72rem;
  line-height: 18px;
  text-align: center;
}
.kopf-icon .zahl[hidden] { display: none; }

/* --- Reiter -------------------------------------------------------------- */
/* Bodenleiste wie in einer App: fest am unteren Rand, Symbol mit kleiner
   Beschriftung. Fuenf Textlabels nebeneinander passen auf schmalen Geraeten
   nicht — deshalb Symbole. `env(safe-area-inset-bottom)` haelt die Leiste auf
   Geraeten mit Home-Indikator ueber der Systemgeste. */
.reiter {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  display: flex;
  gap: 2px;
  background: var(--karte);
  border-top: 1px solid var(--linie);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(35, 32, 28, .08);
}
.reiter button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--r-s);
  color: var(--tinte-leise);
  font: inherit;
  font-size: .67rem;
  line-height: 1.1;
  padding: 6px 2px 4px;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.reiter button svg { width: 22px; height: 22px; display: block; }
.reiter button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reiter button[aria-selected="true"] {
  color: var(--waldgruen-dunkel);
  background: var(--waldgruen-hell);
  font-weight: 600;
}
.reiter button:focus-visible { outline: 2px solid var(--waldgruen); outline-offset: -2px; }

/* Auf breiten Bildschirmen schwebt die Leiste mittig als Pille, statt sich
   ueber die ganze Fensterbreite zu ziehen. */
@media (min-width: 721px) {
  .reiter {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: var(--sp-4);
    width: min(520px, calc(100% - 32px));
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--schatten);
  }
  .reiter button { border-radius: 999px; }
}

/* --- Formulare ----------------------------------------------------------- */
.suchfeld {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--karte);
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinte);
  box-shadow: var(--schatten);
}
.suchfeld:focus { outline: 2px solid var(--waldgruen); outline-offset: 1px; }

.knopf {
  appearance: none;
  border: 1px solid var(--waldgruen);
  background: var(--waldgruen);
  color: #fff;
  border-radius: var(--r-s);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}
.knopf:hover { background: var(--waldgruen-tief); }
.knopf[disabled] { opacity: .5; cursor: default; }
.knopf.leise { background: transparent; color: var(--waldgruen-dunkel); }
.knopf.leise:hover { background: var(--waldgruen-hell); }
.knopf.senf { background: var(--senf); border-color: var(--senf); color: #3a2a05; }
.knopf.senf:hover { background: var(--senf-tief); color: #fff; }

/* --- Karten -------------------------------------------------------------- */
.gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

/* Zwei Zeilen: oben Poster und Text nebeneinander, darunter die
   Verfuegbarkeits-Pillen ueber die ganze Kartenbreite. In der schmalen
   Textspalte neben dem Poster brachen lange Anbieternamen sonst ungleichmaessig
   um; ausserdem gehoeren Sprach-Badge und Verfuegbarkeit nicht in dieselbe
   Zeile — das eine beschreibt den Titel, das andere, wo er laeuft. */
.karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  align-items: start;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  padding: var(--sp-3);
  box-shadow: var(--schatten);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.karte:hover { border-color: var(--waldgruen); }
.karte .poster { grid-column: 1; grid-row: 1; }
.karte .rumpf { grid-column: 2; grid-row: 1; }
.karte .pillen {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.karte .pillen:empty { display: none; }
.karte .poster {
  width: 68px;
  min-width: 68px;
  height: 102px;
  object-fit: cover;
  border-radius: var(--r-s);
  background: var(--waldgruen-hell);
}
.karte .rumpf { min-width: 0; flex: 1; }
.karte .titel {
  font-family: var(--schrift-display);
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.karte .meta { color: var(--tinte-leise); font-size: .82rem; margin-bottom: var(--sp-1); }

/* Zeile fuer Regie und Besetzung. Die Hoehe steht von Anfang an, auch solange
   sie leer ist — sonst wachsen beim Nachladen alle Kacheln gleichzeitig und die
   ganze Trefferliste rutscht unter dem Finger weg. Eine Zeile, der Rest wird
   abgeschnitten: eine umbrechende Besetzungsliste wuerde die Hoehe wieder
   veraendern. */
.karte .personen {
  color: var(--tinte-leise);
  font-size: .82rem;
  min-height: 1.25em;
  line-height: 1.25;
  margin-bottom: var(--sp-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dritte Zeile der Kachel: Freigabe, Bewertungen, Preise — knapp und als
   Symbol, damit die Kachel nicht zur Textwueste wird. */
.karte .ikonen {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  color: var(--tinte-leise);
  font-size: .76rem;
  /* Platz steht von Anfang an — auch leer, auch waehrend des Nachladens.
     Sonst springt die Kachel zweimal: einmal wenn die Platzhalter kommen und
     einmal wenn die Werte sie ersetzen. */
  min-height: 18px;
}
.ikon-wert { display: inline-flex; align-items: center; gap: 3px; }
.ikon-wert svg { width: 14px; height: 14px; }
/* Platzhalter, solange die Zusatzangaben laden: dieselben Symbole, nur blass
   und leicht pulsierend. Sie zeigen, WELCHE Angaben kommen — und verschwinden,
   wenn keine kommen (siehe geisterWeg in app.js). */
.ikon-wert.geist {
  color: var(--tinte-leise);
  opacity: .4;
  animation: geist-puls 1.6s ease-in-out infinite;
}
@keyframes geist-puls {
  0%, 100% { opacity: .3; }
  50% { opacity: .65; }
}
/* Wer Bewegung abgestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .ikon-wert.geist { animation: none; opacity: .45; }
}

.ikon-wert.freigabe { color: var(--bordeaux); font-weight: 600; }
.ikon-wert.preis { color: var(--senf-dunkel); font-weight: 600; }
.ikon-wert.punkte { font-weight: 600; color: var(--tinte); }
/* Sprache und Untertitel: gleiche Zeile, gleiche Schrift wie der Rest der
   Fusszeile — bewusst ohne Auszeichnung, es ist eine Angabe, keine Wertung. */
.ikon-wert.sprache-text { color: var(--tinte-leise); }

/* Anklickbare Namen in der Kachel. Die Kachel selbst ist kein <button> mehr,
   sondern div[role=button] — verschachtelte Knoepfe sind ungueltiges HTML und
   verhalten sich je nach Browser anders. */
.person-link {
  color: var(--waldgruen-dunkel);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.person-link:hover { text-decoration-thickness: 2px; }
/* Alte Zwischenspeicher-Eintraege fuehren nur den Namen; dann wird die
   Personen-ID erst nachgeschlagen. Ohne Rueckmeldung wirkt der Klick tot. */
.person-link.laedt { opacity: .5; cursor: progress; }
.karte:focus-visible, .personenkarte:focus-visible {
  outline: 2px solid var(--waldgruen);
  outline-offset: 2px;
}

/* Personentreffer in der Suche. */
.personenreihe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.personenkarte {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.personenkarte:hover { border-color: var(--waldgruen); }
.personenkarte img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--waldgruen-hell);
}
.personenkarte .fach { color: var(--tinte-leise); font-size: .76rem; }

/* --- Badges -------------------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  /* Sehr lange Anbieternamen duerfen die Karte nicht sprengen. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.flat { background: var(--waldgruen); color: #fff; }
.badge.flat-andere { background: transparent; color: var(--waldgruen-dunkel); border-color: var(--waldgruen); }
.badge.miete { background: var(--senf-hell); color: var(--senf-dunkel); border-color: var(--senf); }
.badge.kauf { background: transparent; color: var(--tinte-leise); border-color: var(--linie); }
.badge.weg { background: var(--bordeaux-hell); color: var(--bordeaux); border-color: var(--bordeaux); }
.badge.sprache { background: var(--indigo-hell); color: var(--indigo); border-color: var(--indigo); font-weight: 500; }
/* Ausland ueber VPN: gruener Rahmen statt gruener Flaeche. Die gefuellte
   Fassung bleibt dem vorbehalten, was hier und jetzt im Abo laeuft — der
   Unterschied zwischen "geht sofort" und "geht mit Umweg" muss man auf einen
   Blick sehen. */
.badge.vpn {
  background: transparent;
  color: var(--waldgruen-dunkel);
  border-color: var(--waldgruen);
}
.badge.werbung { background: transparent; color: var(--tinte-leise); border-color: var(--linie); font-weight: 500; }
.badge svg { width: 13px; height: 13px; }
.badge.neutral { background: transparent; color: var(--tinte-leise); border-color: var(--linie); font-weight: 500; }

/* --- Detail -------------------------------------------------------------- */
.blende {
  position: fixed;
  inset: 0;
  background: rgba(35, 32, 28, .55);
  z-index: 30;
  overflow-y: auto;
  padding: var(--sp-4);
}
.blende[hidden] { display: none; }
.tafel {
  max-width: 780px;
  margin: var(--sp-4) auto var(--sp-7);
  background: var(--karte);
  border-radius: var(--r-l);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.tafel-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--linie);
}
.tafel-kopf .poster {
  width: 132px;
  min-width: 132px;
  border-radius: var(--r-m);
  background: var(--waldgruen-hell);
}
.tafel-schliessen {
  position: sticky;
  top: 0;
  float: right;
  margin: var(--sp-3) var(--sp-3) 0 0;
}
.abschnitt { padding: var(--sp-5); border-bottom: 1px solid var(--linie); }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt h3 {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  font-family: var(--schrift-text);
  color: var(--tinte-leise);
  margin-bottom: var(--sp-3);
}

.werte { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.wert .zahl {
  font-family: var(--schrift-display);
  font-weight: 650;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wert .beschriftung { font-size: .74rem; color: var(--tinte-leise); text-transform: uppercase; letter-spacing: .06em; }

.besetzung { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Die ganze Kachel fuehrt zur Person, Foto eingeschlossen — auf dem Smartphone
   ist der Name allein ein zu kleines Ziel. */
.besetzung .person { width: 92px; font-size: .78rem; cursor: pointer; }
.besetzung .person:hover img { filter: brightness(1.06); }
.besetzung .person:focus-visible {
  outline: 2px solid var(--waldgruen); outline-offset: 3px;
  border-radius: var(--r-s);
}
.besetzung .person img {
  width: 92px; height: 138px; object-fit: cover;
  border-radius: var(--r-s); background: var(--waldgruen-hell); display: block;
  margin-bottom: 4px;
}
.besetzung .person .rolle { color: var(--tinte-leise); }

.anbieterliste { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.anbieter {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: 4px 8px; background: #fff; font-size: .85rem;
}
.anbieter img { width: 22px; height: 22px; border-radius: 4px; }

/* "stimmt nicht" und "doch anzeigen": kleine Symbole statt Text. Es ist eine
   Korrektur am Rand — sie soll erreichbar sein, aber den Anbieternamen nicht
   ueberreden. Die Beschriftung steht in title/aria-label. */
.melden {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 2px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--tinte-leise); opacity: .5; cursor: pointer;
}
.melden svg { width: 13px; height: 13px; }
.melden:hover { opacity: 1; color: var(--bordeaux); background: var(--bordeaux-hell); }
.melden:focus-visible { outline: 2px solid var(--waldgruen); outline-offset: 1px; opacity: 1; }
.anbieter.korrigiert { opacity: .55; text-decoration: line-through; }

/* Anbieter mit hinterlegter Suchadresse sind anklickbar. */
a.anbieter.verlinkt {
  color: var(--tinte);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
a.anbieter.verlinkt:hover {
  border-color: var(--waldgruen);
  background: var(--waldgruen-hell);
}
a.anbieter.verlinkt:focus-visible {
  outline: 2px solid var(--waldgruen); outline-offset: 2px;
}
.anbieter .pfeil { color: var(--tinte-leise); font-size: .78rem; margin-left: 1px; }

/* --- Meldungen ----------------------------------------------------------- */
.meldung {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 3px solid var(--waldgruen);
  border-radius: var(--r-s); padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.meldung.weg { border-left-color: var(--bordeaux); }
.meldung .zeit { color: var(--tinte-leise); font-size: .75rem; }

/* --- Dienste ------------------------------------------------------------- */
.dienstliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2); }
.dienst {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); cursor: pointer;
}
.dienst input { width: 18px; height: 18px; accent-color: var(--waldgruen); }
.dienst img { width: 28px; height: 28px; border-radius: 5px; }
.dienst.aktiv { border-color: var(--waldgruen); background: var(--waldgruen-hell); }

/* --- Hinweise ------------------------------------------------------------ */
.hinweis {
  background: var(--senf-hell); border: 1px solid var(--senf);
  color: #4a3708; border-radius: var(--r-s);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: .9rem;
}
.hinweis.fehler { background: var(--bordeaux-hell); border-color: var(--bordeaux); color: var(--bordeaux); }
.leer { color: var(--tinte-leise); padding: var(--sp-6) 0; text-align: center; }
.leise { color: var(--tinte-leise); font-size: .85rem; }

.fuss {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--linie);
  color: var(--tinte-leise); font-size: .78rem;
}

/* Stand und Neu laden stehen am Fuss der Startseite, nicht ueber den Kacheln. */
.start-fuss {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--linie);
}
/* Einstiege, die keine eigene Kachelreihe verdienen: sie fuehren in die Tafel,
   so wie Reihe und Schlagwort auch. Ein siebter Reiter waere auf 320 Pixel
   nicht mehr unterzubringen. */
.start-aktionen {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-5);
}

/* Freitext-Suche: zugeklappt, weil sie die Ausnahme ist. Die Titelsuche
   beantwortet den Normalfall, und ein zweites grosses Feld daneben liesse
   offen, welches gemeint ist. */
.frei {
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4);
  background: var(--karte);
}
.frei > summary {
  cursor: pointer; font-size: .9rem; font-weight: 600;
  color: var(--waldgruen-dunkel);
}
.frei textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem;
  padding: var(--sp-2); border: 1px solid var(--linie);
  border-radius: var(--r-s); background: var(--papier); color: var(--tinte);
  resize: vertical;
}

/* Tagesueberschrift in der TV-Woche. Bewusst leise: sie gliedert, sie ist
   nicht der Inhalt. */
.tv-tag {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinte-leise);
  margin: var(--sp-4) 0 var(--sp-2);
}
.tv-tag:first-of-type { margin-top: 0; }

/* --- Login --------------------------------------------------------------- */
.login-huelle {
  min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: var(--sp-4);
}
.login-karte {
  width: 100%; max-width: 380px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--r-l);
  padding: var(--sp-6); box-shadow: var(--schatten); text-align: center;
}
.login-karte .logo {
  width: clamp(72px, 22vw, 96px);
  margin: 0 auto var(--sp-3);
  color: var(--logo-farbe);
}
.login-karte input {
  width: 100%; margin: var(--sp-2) 0; padding: var(--sp-3);
  border: 1px solid var(--linie); border-radius: var(--r-s);
  font: inherit; background: #fff; color: var(--tinte);
}
.login-karte .knopf { width: 100%; padding: var(--sp-3); font-size: 1rem; }
.login-fehler { color: var(--bordeaux); font-size: .9rem; margin-bottom: var(--sp-2); }

/* Gratis-Fundstellen in den Mediatheken. */
.mediathek-treffer {
  border-top: 1px solid var(--linie);
  padding: var(--sp-2) 0;
  font-size: .88rem;
}

/* Sortierleiste ueber Trefferlisten. */
.sortierleiste {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.sortierleiste select {
  font: inherit; font-size: .85rem; padding: 4px var(--sp-2);
  border: 1px solid var(--linie); border-radius: var(--r-s);
  background: var(--karte); color: var(--tinte);
}

/* --- Quellen ------------------------------------------------------------- */
.quelle {
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--karte); font-size: .88rem;
}
.quelle-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.quelle-name { font-weight: 600; }
.quelle-schalter { display: flex; align-items: center; cursor: pointer; }
.quelle-schalter input { width: 18px; height: 18px; accent-color: var(--waldgruen); }
/* Ausgeschaltet: sichtbar, aber zurueckgenommen — der Text bleibt lesbar. */
.quelle.aus { border-style: dashed; }
.quelle.aus .quelle-name { color: var(--tinte-leise); font-weight: 500; }

/* Schlagworte in der Detailansicht — fuehren in die Themensuche. */
.thema-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.thema-chip {
  font-size: .78rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--linie); background: transparent;
  color: var(--tinte-leise); cursor: pointer; font: inherit; font-size: .78rem;
}
.thema-chip:hover { border-color: var(--waldgruen); color: var(--waldgruen-dunkel); }

/* --- Ausland ------------------------------------------------------------- */
.vpn-zeile {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
}
.vpn-zeile select {
  font: inherit; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--linie); border-radius: var(--r-s);
  background: #fff; color: var(--tinte); max-width: 100%;
}

/* Eine Zeile je Abo, dahinter die Laenderkuerzel. Nach Land gruppiert wuchs die
   Liste bei acht Laendern auf acht Bloecke, obwohl immer derselbe Dienst
   dahinterstand. Die Konto-Angabe bleibt der Kern: ohne sie sieht ein Katalog,
   den man gar nicht abonnieren kann, genauso aus wie einer, den man hat. */
.dienst-zeile {
  border-top: 1px solid var(--linie);
  padding: var(--sp-2) 0;
}
.dienst-zeile:first-of-type { border-top: 0; }
.dienst-kopf { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dienst-kopf img { width: 22px; height: 22px; border-radius: 4px; }
.dienst-name { font-weight: 600; }
.land-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.land-chip {
  font-size: .74rem; font-weight: 600; letter-spacing: .3px;
  padding: 2px 7px; border-radius: var(--r-s);
  border: 1px solid var(--linie); color: var(--tinte-leise);
  cursor: default;
}
/* Blau: dort gibt es Ton oder Untertitel auf Deutsch oder Englisch. */
.land-chip.sprache {
  background: var(--indigo-hell); color: var(--indigo); border-color: var(--indigo);
}
/* Aufklapper fuer die restlichen Laender. */
.land-chip.mehr { cursor: pointer; font: inherit; font-size: .74rem; font-weight: 600; }
.land-chip.mehr:hover { border-color: var(--waldgruen); color: var(--waldgruen-dunkel); }

@media (max-width: 560px) {
  .tafel-kopf { flex-direction: column; }
  .tafel-kopf .poster { width: 108px; min-width: 108px; }
  .gitter { grid-template-columns: 1fr; }
  .vpn-zeile select { flex: 1 1 140px; }
}