/* ============================================================
   SALONRADIO - Stylesheet
   Version: radio_1v75
   Eigenstaendige Marke. Kein Bezug zu Astro2Match.
   ============================================================ */

:root {
  --tief:         #1b1a1d;   /* warmes Anthrazit, bewusst nicht schwarz */
  --flaeche:      #26242a;
  --flaeche-hell: #322f37;
  --linie:        #403c48;
  --akzent:       #c8944a;   /* Messing */
  --akzent-hell:  #e2ba7d;
  --text:         #f2eee9;
  --leise:        #a49eaa;

  --schrift-anzeige: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text:    "Inter", system-ui, -apple-system, sans-serif;
  --schrift-zahl:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --rand: 20px;

  /* Hoehen fuer die Bildschirm-Rechnung (ab radio_1v75) */
  --kopfhoehe: 66px;   /* ab 1v8: Kopfleiste traegt Knoepfe */
  --leiste: 70px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tief);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.sprungmarke {
  position: absolute;
  left: -9999px;
}
.sprungmarke:focus {
  left: var(--rand);
  top: 10px;
  z-index: 20;
  background: var(--akzent);
  color: var(--tief);
  padding: 8px 14px;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 3px;
}

/* ---- Kopf ------------------------------------------------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--rand);
  border-bottom: 1px solid var(--linie);

  /* Die Leiste bleibt oben stehen.

     Anders als beim Versuch mit dem Player-Kopf in 1v56 klappt
     das hier: die Leiste ist schmal, hat einen DECKENDEN
     Hintergrund und eine klare Kante nach unten. Es scheint
     also nichts durch.

     Wichtig ist der Hintergrund - ohne ihn wuerde die Musik-
     auswahl beim Scrollen dahinter sichtbar. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tief);
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wortmarke__punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 3px rgba(200, 148, 74, 0.18);
}

.sprachen { display: flex; gap: 4px; }

.sprachen__wahl {
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--leise);
  padding: 5px 8px;
  border-radius: 4px;
}
.sprachen__wahl:hover { color: var(--text); background: var(--flaeche); }
.sprachen__wahl.ist-aktiv { color: var(--tief); background: var(--akzent); }

/* ---- Held ------------------------------------------------- */
.held {
  display: grid;
  gap: 40px;
  padding: 46px var(--rand) 52px;
  max-width: 1120px;
  margin: 0 auto;
}

.augenbraue {
  margin: 0 0 18px;
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
}

.schlagzeile {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.schlagzeile span { display: block; }
.schlagzeile__schluss { color: var(--akzent); }

.anleser {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--leise);
  font-size: 1.03rem;
  text-align: justify;
  hyphens: auto;
}

.zeitband {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 0;
  padding: 9px 15px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 999px;
}
.zeitband__wort { font-size: 0.82rem; color: var(--leise); }
.zeitband__zahl {
  font-family: var(--schrift-zahl);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--akzent-hell);
}

/* ---- Die Scheibe (Signaturelement) ------------------------ */
.held__scheibe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.scheibe {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #201f23 0 2px,
      #2a282e 2px 4px);
  box-shadow:
    inset 0 0 0 1px var(--linie),
    0 18px 44px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  animation: dreht 14s linear infinite;
}

.scheibe__rillen {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 5px);
}

.scheibe__mitte {
  position: relative;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--akzent-hell), var(--akzent));
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.scheibe__dreieck {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid var(--tief);
}

.scheibe__hinweis {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--leise);
}

@keyframes dreht {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scheibe { animation: none; }
}

/* ---- Vier Punkte ------------------------------------------ */
.punkte {
  display: grid;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--rand);
  border-top: 1px solid var(--linie);
}

.punkt {
  padding: 26px 0;
  border-bottom: 1px solid var(--linie);
}

.punkt__titel {
  margin: 0 0 8px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}

.punkt__text {
  margin: 0;
  max-width: 52ch;
  color: var(--leise);
  font-size: 0.95rem;
  text-align: justify;
  hyphens: auto;
}

/* ---- Baustellenhinweis ------------------------------------ */
.baustelle {
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 26px var(--rand) 34px;
}

.baustelle__titel {
  margin: 0 0 8px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1rem;
  color: var(--akzent);
}

.baustelle__text {
  margin: 0;
  color: var(--leise);
  font-size: 0.93rem;
  max-width: 52ch;
}

.baustelle__link { margin: 18px 0 0; font-size: 0.9rem; }
.baustelle__link a { color: var(--akzent-hell); }

/* ---- Statusseite ------------------------------------------ */
.statusseite {
  max-width: 1120px;
  margin: 0 auto;
  padding: 46px var(--rand) 56px;
}

.statusseite__titel {
  margin: 0 0 30px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  letter-spacing: -0.03em;
}

.werte {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow: hidden;
}

.wert {
  background: var(--flaeche);
  padding: 16px 18px;
}

.wert dt {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--leise);
}

.wert__zahl {
  margin: 5px 0 0;
  font-family: var(--schrift-zahl);
  font-size: 1.15rem;
  color: var(--akzent-hell);
}

/* ---- Fuss -------------------------------------------------- */
.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 22px var(--rand) 34px;
  margin-top: 30px;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.82rem;
}

.fuss__marke {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  color: var(--text);
}

.fuss__links { display: flex; gap: 16px; }
.fuss__links span { cursor: default; opacity: 0.65; }

.fuss__version {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
}

/* ---- Ab Tablet -------------------------------------------- */
@media (min-width: 720px) {
  :root { --rand: 32px; }

  .held {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .punkte {
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
  }
}

@media (min-width: 1040px) {
  .punkte { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .punkt  { padding: 30px 0 34px; }
  .werte  { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   App-Fassung (PWA) - ab radio_1v75
   ============================================================ */

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.installknopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  background: transparent;
  color: var(--akzent-hell);
  font-family: var(--schrift-text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.installknopf:hover { background: var(--akzent); color: var(--tief); }
.installknopf[hidden] { display: none; }

.installknopf__zeichen {
  font-family: var(--schrift-zahl);
  font-size: 1rem;
  line-height: 1;
}

/* Auf sehr schmalen Geraeten nur das Zeichen zeigen */
@media (max-width: 400px) {
  .installknopf { padding: 7px 10px; font-size: 0; gap: 0; }
  .installknopf__zeichen { font-size: 1.05rem; }
}

/* ---- Laeuft die Seite als installierte App? ---------------- */
@media (display-mode: standalone) {
  /* Platz fuer die Statusleiste des Telefons */
  .kopf { padding-top: calc(18px + env(safe-area-inset-top)); }
  .fuss { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }

  /* In der App braucht es keinen Installationsknopf */
  .installknopf { display: none; }
}

/* ============================================================
   BILDSCHIRME STATT SCROLLEN  -  ab radio_1v75
   Gilt NUR am Handy und NUR wenn JavaScript laeuft.
   Ohne JavaScript stehen alle Bildschirme untereinander und
   die Seite scrollt wie bisher - niemand wird eingesperrt.

   Das Skript liefert zwei Dinge:
     --hoehe   die WIRKLICH sichtbare Hoehe (window.innerHeight)
     h-kurz / h-mittel / h-hoch   die Groessenstufe
   Grund: auf dem iPhone meldet das Stylesheet 667 px, nutzbar
   sind aber nur 554 px. Nur window.innerHeight stimmt.

     h-kurz    bis 620 px   iPhone 8      (554 nutzbar)
     h-mittel  bis 760 px   Galaxy S24 (684), iPhone 15 (712)
     h-hoch    darueber     Galaxy A54 (819)
   ============================================================ */

@media (max-width: 719px) {

  .hat-js body[data-seite="start"] { overflow: hidden; }

  .hat-js .bildschirm {
    display: none;
    height: calc(var(--hoehe, 100dvh) - var(--kopfhoehe) - var(--leiste));
    padding: 0 var(--rand);
    overflow-y: auto;                 /* Notausgang, nie einsperren */
    -webkit-overflow-scrolling: touch;
  }

  .hat-js .bildschirm.ist-sichtbar {
    display: flex;
    align-items: center;
    animation: einblenden 0.22s ease-out;
  }

  .hat-js .bildschirm__inhalt { width: 100%; padding: 10px 0; }

  @keyframes einblenden {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- Grundmass (Stufe h-hoch) ---------------------------- */
  .hat-js .held {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    max-width: none;
  }

  .hat-js .augenbraue  { margin-bottom: 8px; font-size: 0.64rem; }
  .hat-js .schlagzeile { font-size: 2.3rem; line-height: 1.0; }
  .hat-js .anleser     { margin-top: 12px; font-size: 0.95rem; max-width: none; }
  .hat-js .zeitband    { margin-top: 14px; padding: 7px 13px; }
  .hat-js .held__scheibe { margin-top: 16px; gap: 8px; }
  .hat-js .scheibe     { width: min(56vw, 210px); }
  .hat-js .scheibe__hinweis { font-size: 0.64rem; }

  .hat-js .bildschirm__titel {
    margin: 0 0 6px;
    font-family: var(--schrift-anzeige);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .hat-js .punkte { display: block; border-top: 0; padding: 0; max-width: none; }
  .hat-js .punkt  { padding: 12px 0; }
  .hat-js .punkt:last-child { border-bottom: 0; }
  .hat-js .punkt__titel { margin-bottom: 3px; font-size: 1.02rem; }
  .hat-js .punkt__text  { font-size: 0.88rem; line-height: 1.45; max-width: none; }

  .hat-js .baustelle { margin: 0; padding: 0; max-width: none; }
  .hat-js .baustelle__text { font-size: 0.95rem; max-width: none; }

  /* ---- Stufe h-mittel: Galaxy S24, iPhone 15 ---------------- */
  .h-mittel.hat-js .schlagzeile { font-size: 1.9rem; }
  .h-mittel.hat-js .anleser     { font-size: 0.86rem; }
  .h-mittel.hat-js .scheibe     { width: min(48vw, 165px); }
  .h-mittel.hat-js .bildschirm__titel { font-size: 1.35rem; }
  .h-mittel.hat-js .punkt       { padding: 11px 0; }
  .h-mittel.hat-js .punkt__text { font-size: 0.84rem; }

  /* ---- Stufe h-kurz: iPhone 8 ------------------------------- */
  .h-kurz.hat-js .schlagzeile { font-size: 1.6rem; }
  .h-kurz.hat-js .anleser     { font-size: 0.8rem; margin-top: 10px; }
  .h-kurz.hat-js .augenbraue  { font-size: 0.6rem; margin-bottom: 6px; }
  .h-kurz.hat-js .zeitband    { margin-top: 11px; padding: 6px 11px; }
  .h-kurz.hat-js .zeitband__wort { font-size: 0.75rem; }
  .h-kurz.hat-js .zeitband__zahl { font-size: 0.85rem; }
  .h-kurz.hat-js .held__scheibe  { margin-top: 12px; }
  .h-kurz.hat-js .scheibe     { width: min(40vw, 130px); }
  .h-kurz.hat-js .bildschirm__titel { font-size: 1.2rem; }
  .h-kurz.hat-js .punkt       { padding: 9px 0; }
  .h-kurz.hat-js .punkt__titel { font-size: 0.94rem; }
  .h-kurz.hat-js .punkt__text  { font-size: 0.78rem; line-height: 1.4; }
  .h-kurz.hat-js .baustelle__text { font-size: 0.88rem; }

  /* ---- Bedienleiste unten ---------------------------------- */
  .hat-js .blaettern {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--rand);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
  }
  .hat-js .blaettern[hidden] { display: none; }

  /* NUR die Startseite blendet die Fusszeile aus - dort steht
     ein Bildschirm im Vollbild und die Rechtslinks sitzen in
     der Bedienleiste.

     FRUEHER stand hier ".hat-js .fuss" ohne Einschraenkung.
     Dadurch fehlte das Impressum am Handy auf JEDER Seite
     ausser dem Player - also auf Konto, Listen, Zeiten,
     Geraete und im ganzen Adminbereich. */
  /* ersetzt durch die feste Zustaendigkeit am Dateiende (1v37) */
  .hat-js .kopf { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- Tippflaechen, Mindestmass 48 px ---------------------- */
.blaettern__pfeil {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.blaettern__pfeil:disabled { opacity: 0.3; }

.blaettern__weiter {
  flex: 1 1 auto;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--tief);
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.blaettern__weiter:active { background: var(--akzent-hell); }

.punktreihe { flex: 0 0 auto; display: flex; gap: 7px; }
.punktreihe span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--linie);
  cursor: pointer;
}
.punktreihe span.ist-aktiv {
  background: var(--akzent);
  width: 18px;
  border-radius: 999px;
}

/* ---- Rechner und Tablet: alles wie gehabt ------------------ */
/* Ab radio_1v75 gilt die Bildschirmfuehrung auch am Rechner.
   Frueher standen hier drei Regeln, die sie abgeschaltet haben. */
@media (min-width: 720px) {
  .bildschirm__titel { display: none; }
}

/* ============================================================
   FORMULARE, ADMIN, LISTEN  -  ab radio_1v75
   ============================================================ */

.formularseite,
.adminseite {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px var(--rand) 56px;
}

.adminseite { max-width: 760px; }

.formularseite__titel {
  margin: 0 0 20px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.formularseite__text {
  margin: 0 0 22px;
  color: var(--leise);
  font-size: 0.94rem;
  text-align: justify;
  hyphens: auto;
}

.formularseite__link { margin: 22px 0 0; font-size: 0.9rem; }
.formularseite__link a { color: var(--akzent-hell); }

/* ---- Felder ------------------------------------------------ */
.formular { display: flex; flex-direction: column; gap: 16px; }

.feld { display: flex; flex-direction: column; gap: 6px; }

.feld__wort {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
}

.feld input {
  width: 100%;
  min-height: 50px;                  /* bequem zu treffen */
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;                   /* nie kleiner: iOS zoomt sonst */
}

.feld input:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(200, 148, 74, 0.18);
}

/* ---- Knoepfe ----------------------------------------------- */
.knopf {
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--tief);
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.knopf:active { background: var(--akzent-hell); }
.knopf--gross { width: 100%; margin-top: 6px; }

.knopf--leise {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
  font-weight: 500;
}
.knopf--leise:active { background: var(--flaeche); }

/* ---- Hinweise ---------------------------------------------- */
.hinweis {
  margin: 0 0 20px;
  padding: 13px 15px;
  border-radius: 10px;
  border-left: 3px solid var(--linie);
  background: var(--flaeche);
  font-size: 0.92rem;
}
.hinweis--fehler { border-left-color: #d4705c; }
.hinweis--gut    { border-left-color: #7fbf8f; }

/* ---- Listen im Admin --------------------------------------- */
.abschnitt {
  margin: 34px 0 12px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--akzent);
}

.liste { list-style: none; margin: 0; padding: 0; }

.liste__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.88rem;
}
.liste__zeile:last-child { border-bottom: 0; }

.liste__zeit {
  font-family: var(--schrift-zahl);
  font-size: 0.76rem;
  color: var(--leise);
}

.liste__stufe {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flaeche-hell);
  font-family: var(--schrift-zahl);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--leise);
}
.liste__stufe--warn     { background: #4a3a22; color: var(--akzent-hell); }
.liste__stufe--error,
.liste__stufe--critical { background: #4a2b26; color: #f0a08c; }

.liste__zeile--offen { color: var(--leise); }
.liste__zeile--offen::before {
  content: "○";
  color: var(--akzent);
  margin-right: 4px;
}

.abmelden { margin-top: 40px; }

/* Die Bildschirm-Sperre haengt an body[data-seite="start"].
   Formular- und Adminseiten scrollen dadurch ganz normal.
   Bewusst KEIN :has() - das kann das iPhone 8 nicht. */

.baustelle__trenner { color: var(--linie); margin: 0 8px; }

/* ============================================================
   MUSIK IM ADMIN  -  ab radio_1v75
   ============================================================ */

.adminseite--breit { max-width: 900px; }

.werte--vier { }
@media (min-width: 640px) {
  .werte--vier { grid-template-columns: repeat(4, 1fr); }
}

.wert__wort {
  margin: 5px 0 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* ---- Ampel -------------------------------------------------- */
.ampel {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 7px;
  flex: 0 0 auto;
  vertical-align: baseline;
}
.ampel--ungeprueft { background: #d4705c; }
.ampel--pruefung   { background: #d8b25a; }
.ampel--frei       { background: #7fbf8f; }
.ampel--gesperrt   { background: #6c6873; }

/* ---- Filterzeile -------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 20px;
}

.filter__feld {
  flex: 1 1 180px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
}

.filter__zahl {
  width: 86px;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-zahl);
  font-size: 1rem;
}

.filter__wahl,
.feld select {
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
}

.knopf--klein {
  min-height: 46px;
  padding: 11px 18px;
  font-size: 0.92rem;
}

/* ---- Titelliste --------------------------------------------- */
.titelliste { list-style: none; margin: 0; padding: 0; }

.titelzeile { border-bottom: 1px solid var(--linie); }
.titelzeile:last-child { border-bottom: 0; }

.titelzeile__link,
.titelzeile--einfach {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;                 /* bequem zu tippen */
  padding: 10px 4px;
  text-decoration: none;
  color: inherit;
}
.titelzeile__link:hover { background: var(--flaeche); }

.titelzeile__wort {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.titelzeile__wort strong {
  font-weight: 500;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.titelzeile__wort em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titelzeile__dauer {
  flex: 0 0 auto;
  font-family: var(--schrift-zahl);
  font-size: 0.82rem;
  color: var(--leise);
}

/* ---- Werbeband im Player (ab 1v128) -------------------------
   Laeuft ein Astro2Match-Lied, steht es unter dem Titel. Dezent,
   aber lesbar - es soll den Salon nicht stoeren und trotzdem
   sagen, woher die Musik kommt. */
.werbeband {
  margin: 8px auto 0;
  padding: 4px 12px;
  max-width: 420px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--akzent);
  border: 1px solid rgba(200, 148, 74, 0.35);
  border-radius: 999px;
  background: rgba(200, 148, 74, 0.07);
  border-color: color-mix(in srgb, var(--akzent) 35%, transparent);
  background: color-mix(in srgb, var(--akzent) 7%, transparent);
}
.werbeband[hidden] { display: none; }
.werbeband__stern { margin-right: 5px; opacity: 0.8; }

/* Werbelied im Admin erkennbar */
.titelzeile__werbung {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #1a1420;
  background: var(--akzent);
}

/* ---- Werbe-Ordner (ab 1v130) --------------------------------
   Annos Ansage: "Es reicht doch, wenn ich ein Verzeichnis
   auswaehle." Darum grosse Flaechen zum Antippen - das muss am
   Handy mit dem Daumen gehen, ohne zu zielen. */
.wordner {
  margin: 0 0 20px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(200, 148, 74, 0.4);
  border-radius: 10px;
  background: rgba(200, 148, 74, 0.06);
}
.wordner__liste {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wordner__haken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  cursor: pointer;
}
.wordner__haken input { width: 20px; height: 20px; flex: 0 0 auto; }
.wordner__name { flex: 1 1 auto; }
.wordner__anzahl {
  font-family: var(--schrift-zahl, monospace);
  font-size: 0.8rem;
  color: var(--leise);
}
/* Der Hauptschalter sitzt ueber der Ordnerliste und ist der
   wichtigste Knopf im Kasten - darum deutlicher abgesetzt. */
.wordner__haken--haupt {
  margin-bottom: 4px;
  border-color: rgba(200, 148, 74, 0.5);
  background: rgba(200, 148, 74, 0.1);
  font-weight: 600;
}

/* Werbung je Salon (ab 1v131) - in der Kundenliste und auf der
   Salonseite derselbe Knopf.

   ab 1v132: Anno: "die Buttons sind nicht richtig platziert". Er
   hatte recht - der Knopf hing unter der Zeile links in der Luft.
   Jetzt wird die ganze Zeile zum Flex-Streifen: Salon links,
   Knopf rechts am Rand, beide auf einer Hoehe. Am Handy bricht
   der Knopf unter den Namen, aber rechtsbuendig. */
.titelzeile--mitknopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.titelzeile--mitknopf .titelzeile__link { flex: 1 1 60%; }
.titelzeile--mitknopf .wsalon { margin-left: auto; }

.wsalon { margin: 4px 0 0; }
.wsalon__knopf {
  min-height: 38px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: transparent;
  color: var(--leise);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.wsalon__knopf.ist-an {
  border-color: var(--akzent);
  background: rgba(200, 148, 74, 0.14);
  color: var(--akzent);
}
.feldhinweis--warnung { color: var(--akzent); }

/* Eigene Klasse, nicht die der Liedzeilen - sonst zaehlt eine
   Pruefung die Abzeichen des Kastens zu den Liedern dazu. */
.wordner__marke {
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #1a1420;
  background: var(--akzent);
}
/* Das Klappmenue mit den Ordnern (ab 1v132). Bei Anno sind das
   48 Stueck - die duerfen nicht offen herumliegen. */
.wordner__klapp {
  margin: 10px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 8px 10px;
}
.wordner__klappkopf {
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wordner__klappzahl {
  margin-left: auto;
  color: var(--leise);
  font-size: 0.78rem;
}
.wordner__klapp .wordner__liste {
  max-height: 60vh;
  overflow-y: auto;
  margin: 10px 0 2px;
}
/* Ist die Werbung aus, soll der Kasten nicht golden leuchten -
   es laeuft ja nichts. */
.wordner.ist-aus {
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
}

.wordner__zeile.ist-werbung .wordner__haken {
  border-color: var(--akzent);
  background: rgba(200, 148, 74, 0.14);
}
/* Der Hauptordner selbst kann nicht Werbung sein - sonst waere
   mit einem Haken ALLES Werbung. */
.wordner__haken input:disabled { opacity: 0.3; }
.wordner__haken input:disabled + .wordner__name { color: var(--leise); }

/* ---- Alben aufraeumen (ab 1v126) ----------------------------
   Die Einzelgaenger stehen oben und sind golden umrandet -
   Anno sucht genau die. */
.albenklapp {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.albenklapp__kopf {
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.albenklapp__zahl {
  margin-left: 8px;
  color: var(--leise);
  font-size: 0.8rem;
}
.albenliste {
  list-style: none;
  margin: 10px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.albenliste__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 0.84rem;
}
.albenliste__link:hover { border-color: rgba(200, 148, 74, 0.6); }
.albenliste__link.ist-aktiv {
  border-color: var(--akzent);
  background: rgba(200, 148, 74, 0.14);
}
.albenliste__anzahl {
  font-family: var(--schrift-zahl, monospace);
  font-size: 0.78rem;
  color: var(--leise);
}
/* Ein oder zwei Titel: das sind die, die aufgeraeumt gehoeren. */
.albenliste__zeile.ist-einzeln .albenliste__link {
  border-color: rgba(200, 148, 74, 0.55);
}
.albenliste__zeile.ist-einzeln .albenliste__anzahl {
  color: var(--akzent);
}

/* ---- Wo liegt das Lied? (ab 1v125) --------------------------
   Anno hatte ein Lied gefunden und sah nicht, in welchem Ordner
   es liegt. Steht jetzt klein unter Titel und Kuenstler. */
.titelzeile__ort {
  font-size: 0.74rem;
  color: var(--leise);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ortzeichen { opacity: 0.7; margin-right: 2px; }
.titelzeile__sprache {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid rgba(200, 148, 74, 0.4);
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* Der volle Weg auf der Titelseite - zum Markieren gedacht. */
.dateiweg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
}
.dateiweg__wort {
  font-size: 0.78rem;
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dateiweg__pfad {
  font-family: var(--schrift-zahl, monospace);
  font-size: 0.82rem;
  word-break: break-all;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-user-select: all;
  user-select: all;
}

.inline { margin: 0; }

/* ---- Kacheln im Adminbrett ---------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kachel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  text-decoration: none;
  color: inherit;
}
.kachel:hover { border-color: var(--akzent); }

.kachel__wort {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.02rem;
}
.kachel__zahl {
  font-family: var(--schrift-zahl);
  font-size: 1.6rem;
  color: var(--akzent-hell);
}

/* ---- Rechteformular ----------------------------------------- */
.ampelwahl,
.genrewahl {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}

.ampelwahl__wahl,
.genrewahl__wahl {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  font-size: 0.95rem;
  cursor: pointer;
}

.genrewahl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.genrewahl legend { width: 100%; }

.ampelwahl input,
.genrewahl input,
.feld--haken input {
  width: 20px;
  height: 20px;
  accent-color: var(--akzent);
  flex: 0 0 auto;
}

.feld--haken {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  min-height: 46px;
}

.feld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  resize: vertical;
}

.zweispaltig { display: grid; gap: 16px; }
@media (min-width: 600px) {
  .zweispaltig { grid-template-columns: 1fr 1fr; }
}

.pruefvermerk {
  margin-top: 20px;
  font-family: var(--schrift-zahl);
  font-size: 0.78rem;
  color: var(--leise);
  text-align: left;
}

/* ============================================================
   BEARBEITEN UND SAMMELBEARBEITUNG  -  ab radio_1v75
   ============================================================ */

.werte--zwei { }
@media (min-width: 600px) {
  .werte--zwei { grid-template-columns: 1fr 1fr; }
}

.allewahl {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--linie);
  font-size: 0.88rem;
  color: var(--leise);
  cursor: pointer;
}
.allewahl input { width: 20px; height: 20px; accent-color: var(--akzent); }

.titelzeile--waehlbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.titelzeile__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  min-height: 56px;               /* gross genug zum Tippen */
  cursor: pointer;
}
.titelzeile__haken input {
  width: 20px;
  height: 20px;
  accent-color: var(--akzent);
}

.titelzeile--waehlbar .titelzeile__link { flex: 1 1 auto; min-width: 0; }

.sammelkasten {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}

.sammelkasten .feld input::placeholder { color: var(--leise); opacity: 0.6; }

/* ============================================================
   PLAYER  -  ab radio_1v75
   Die Scheibe ist der Knopf. Alles andere ordnet sich unter.
   ============================================================ */

.player {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px var(--rand) 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.player .augenbraue { margin-bottom: 14px; }

.player__titel {
  margin: 0 0 12px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  letter-spacing: -0.03em;
}

/* ---- Jetzt laeuft ------------------------------------------ */
.jetzt { margin-bottom: 22px; }

.jetzt__wort {
  margin: 0 0 6px;
  font-family: var(--schrift-zahl);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
}

.jetzt__titel {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.6vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.jetzt__kuenstler { margin: 6px 0 0; font-size: 1rem; color: var(--text); }
.jetzt__album     { margin: 2px 0 0; font-size: 0.85rem; color: var(--leise); }

/* ---- Die Scheibe als Knopf --------------------------------- */
.scheibe--knopf {
  position: relative;
  width: min(70vw, 260px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  cursor: pointer;
  animation: none;                 /* dreht nur, wenn Musik laeuft */
}
.scheibe--knopf.dreht { animation: dreht 14s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .scheibe--knopf.dreht { animation: none; }
}

.scheibe__cover {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.55;
}

.scheibe--knopf .scheibe__mitte {
  position: relative;
  z-index: 2;
  width: 40%;
  aspect-ratio: 1;
}

.scheibe--knopf:active .scheibe__mitte { transform: scale(0.95); }

/* Play-Dreieck wird zur Pause-Marke */
.scheibe--knopf .scheibe__dreieck.ist-pause {
  width: 22px;
  height: 26px;
  margin-left: 0;
  border: 0;
  background:
    linear-gradient(var(--tief), var(--tief)) left / 7px 100% no-repeat,
    linear-gradient(var(--tief), var(--tief)) right / 7px 100% no-repeat;
}

.player__knopfwort {
  margin: 14px 0 0;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--akzent-hell);
}

/* ---- Fortschritt ------------------------------------------- */
.fortschritt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 22px;
}

.fortschritt__zeit {
  flex: 0 0 auto;
  font-family: var(--schrift-zahl);
  font-size: 0.76rem;
  color: var(--leise);
}

.fortschritt__balken {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--flaeche-hell);
  overflow: hidden;
}

.fortschritt__fuell {
  display: block;
  width: 0;
  height: 100%;
  background: var(--akzent);
  transition: width 0.25s linear;
}

/* ---- Bedienung --------------------------------------------- */
.bedienung {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
}

.rundknopf {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--text);
  font-size: 0.8rem;
  letter-spacing: -2px;
  cursor: pointer;
}
.rundknopf:active { background: var(--flaeche-hell); }

.laut {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.laut__zeichen { color: var(--leise); font-size: 1.1rem; }

.laut input[type="range"] {
  flex: 1 1 auto;
  height: 30px;
  accent-color: var(--akzent);
  cursor: pointer;
}

/* ---- Musikwahl --------------------------------------------- */
.musikwahl {
  width: 100%;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
}

.musikwahl__wort {
  display: block;
  margin-bottom: 12px;
  font-family: var(--schrift-zahl);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}

.musikwahl__reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wahlknopf {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-family: var(--schrift-text);
  font-size: 0.9rem;
  cursor: pointer;
}
.wahlknopf.ist-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tief);
  font-weight: 500;
}

.musikwahl__zahl {
  margin: 14px 0 0;
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  color: var(--leise);
}

.player .formularseite__link { margin-top: 34px; }

.kachel--stark { border-color: var(--akzent); }
.kachel--stark .kachel__zahl { font-size: 1.3rem; }

/* ============================================================
   REGISTRIERUNG, KONTO, KUNDEN  -  ab radio_1v75
   ============================================================ */

.formularseite--breit { max-width: 620px; }

.formularseite .abschnitt:first-of-type { margin-top: 26px; }

.hinweis__zeile { margin: 0 0 4px; }
.hinweis__zeile:last-child { margin-bottom: 0; }

.feldhinweis {
  margin: -6px 0 0;
  font-size: 0.8rem;
  color: var(--leise);
}

.landzeile {
  margin: -4px 0 0;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--flaeche);
  font-size: 0.84rem;
  color: var(--leise);
}

.preiszeile {
  margin: 6px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--akzent);
  border-radius: 10px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--akzent-hell);
  text-align: center;
}

.anschrift {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--flaeche);
  font-size: 0.95rem;
  line-height: 1.6;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.liste__wort { flex: 1 1 auto; min-width: 0; }

@media (min-width: 600px) {
  .zweispaltig--strasse { grid-template-columns: 3fr 1fr; }
  .zweispaltig--plz     { grid-template-columns: 1fr 3fr; }
}

/* ============================================================
   KOPFLEISTE MIT KONTO UND ABMELDEN  -  ab radio_1v75
   ============================================================ */

.kopfform { margin: 0; display: inline-flex; }

.kopfknopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-family: var(--schrift-text);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.kopfknopf:hover { color: var(--text); border-color: var(--akzent); }

.kopfknopf__zeichen { font-size: 0.7rem; color: var(--akzent); }
.kopfknopf--aus .kopfknopf__zeichen { font-size: 0.95rem; }

/* Am Handy wird es eng: dort nur die Zeichen */
@media (max-width: 560px) {
  .kopfknopf { padding: 7px 10px; gap: 0; }
  .kopfknopf__wort { display: none; }
  .kopfknopf__zeichen { font-size: 0.95rem; }
  .kopfknopf--aus .kopfknopf__zeichen { font-size: 1.1rem; }
}

/* Auf der Startseite bleiben die Bildschirme unberuehrt -
   der Kopf wird nur minimal hoeher. */
.kopf__rechts { flex-wrap: nowrap; }

/* ---- Tarifzeile mit Knoepfen  -  ab radio_1v75 -------------- */
.tarifzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}
.tarifzeile:last-child { border-bottom: 0; }

.tarifzeile__wort {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tarifzeile__wort strong { font-weight: 500; font-size: 1rem; }
.tarifzeile__wort em {
  font-style: normal;
  font-family: var(--schrift-zahl);
  font-size: 0.78rem;
  color: var(--leise);
}

.tarifzeile__knoepfe { display: flex; gap: 8px; flex: 0 0 auto; }

.knopf--gefahr {
  background: transparent;
  border: 1px solid #6d3b34;
  color: #e0917f;
  font-weight: 500;
}
.knopf--gefahr:active { background: #4a2b26; }

/* ---- Probezeit  -  ab radio_1v75 --------------------------- */
.probeband {
  margin: -6px 0 18px;
  padding: 8px 16px;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--akzent-hell);
}

.probe_einheit {
  align-self: center;
  font-size: 0.9rem;
  color: var(--leise);
}

/* ---- Musik einlesen im Admin  -  ab radio_1v75 ------------- */
.einlesekasten {
  margin: 26px 0 6px;
  padding: 18px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}

.abschnitt--eng { margin-top: 0; }

.einlesekasten .formularseite__text { margin-bottom: 16px; }

.importbericht {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.importbericht__kopf {
  margin: 0 0 12px;
  font-family: var(--schrift-zahl);
  font-size: 0.76rem;
  color: var(--akzent-hell);
}

.importliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.importzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 7px 0 7px 14px;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  font-size: 0.84rem;
}
.importzeile:last-child { border-bottom: 0; }
.importzeile--neu     { border-left-color: #7fbf8f; }
.importzeile--doppelt { border-left-color: var(--linie); opacity: 0.65; }
.importzeile--fehler  { border-left-color: #d4705c; }

.importzeile__datei {
  flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.importzeile__wort {
  flex: 0 1 auto;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--leise);
}

/* ============================================================
   PLAYER: KLAPPMENUE, REIHENFOLGE, BALKEN  -  ab radio_1v75
   ============================================================ */

/* ---- Balkenanzeige in der Scheibe -------------------------- */
.balken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ---- Musikauswahl als Klappmenue --------------------------- */
.wahlklapp {
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  text-align: left;
}

.wahlklapp__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
/* Ohne diese beiden Zeilen bleibt bei Safari das schwarze
   Dreieck stehen. */
.wahlklapp__kopf::-webkit-details-marker { display: none; }
.wahlklapp__kopf::marker { content: ''; }

.wahlklapp__kopf::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--schrift-zahl);
  font-size: 1.1rem;
  color: var(--akzent);
}
.wahlklapp[open] .wahlklapp__kopf::after { content: '−'; }

.wahlklapp__wort {
  font-family: var(--schrift-zahl);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}

.wahlklapp__jetzt {
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--akzent-hell);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wahlklapp__inhalt {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--linie);
}

.wahlklapp .musikwahl__reihe { justify-content: flex-start; margin-top: 12px; }

.reihenwahl { margin-top: 18px; }

/* Die alte offene Musikwahl gibt es nicht mehr */
.player .musikwahl__zahl { margin-top: 14px; }

/* ---- Am Handy passt jetzt alles auf einen Bildschirm ------- */
@media (max-width: 719px) {
  .hat-js body[data-seite="player"] { overflow: hidden; }

  .hat-js body[data-seite="player"] .player {
    height: calc(var(--hoehe, 100dvh) - var(--kopfhoehe));
    overflow-y: auto;              /* Notausgang, nie einsperren */
    padding-top: 16px;
    padding-bottom: 20px;
    justify-content: flex-start;
  }

  .hat-js body[data-seite="player"] .jetzt { margin-bottom: 14px; }
  .hat-js body[data-seite="player"] .scheibe--knopf { width: min(52vw, 200px); }
  .hat-js body[data-seite="player"] .player__knopfwort { margin-top: 10px; font-size: 0.95rem; }
  .hat-js body[data-seite="player"] .fortschritt { margin-top: 14px; }
  .hat-js body[data-seite="player"] .bedienung { margin-top: 14px; }
  .hat-js body[data-seite="player"] .wahlklapp { margin-top: 16px; }
  .hat-js body[data-seite="player"] .player .formularseite__link { margin-top: 16px; }

  /* Stufe h-mittel: Galaxy S24, iPhone 15 */
  .h-mittel.hat-js body[data-seite="player"] .scheibe--knopf { width: min(46vw, 170px); }
  .h-mittel.hat-js body[data-seite="player"] .jetzt__titel { font-size: 1.35rem; }

  /* Stufe h-kurz: iPhone 8 - hier zaehlt jeder Pixel */
  .h-kurz.hat-js body[data-seite="player"] .player { padding-top: 10px; padding-bottom: 12px; }
  .h-kurz.hat-js body[data-seite="player"] .scheibe--knopf { width: min(34vw, 118px); }
  .h-kurz.hat-js body[data-seite="player"] .jetzt { margin-bottom: 10px; }
  .h-kurz.hat-js body[data-seite="player"] .jetzt__wort { display: none; }
  .h-kurz.hat-js body[data-seite="player"] .jetzt__titel { font-size: 1.1rem; }
  .h-kurz.hat-js body[data-seite="player"] .jetzt__kuenstler { font-size: 0.85rem; margin-top: 3px; }
  /* Albumzeile bleibt seit 1v71 sichtbar - der Player scrollt normal */
  .h-kurz.hat-js body[data-seite="player"] .player__knopfwort { font-size: 0.82rem; margin-top: 7px; }
  .h-kurz.hat-js body[data-seite="player"] .fortschritt { margin-top: 10px; }
  .h-kurz.hat-js body[data-seite="player"] .bedienung { margin-top: 10px; }
  .h-kurz.hat-js body[data-seite="player"] .rundknopf { width: 46px; height: 46px; }
  .h-kurz.hat-js body[data-seite="player"] .wahlklapp { margin-top: 12px; }
  .h-kurz.hat-js body[data-seite="player"] .wahlklapp__kopf { min-height: 44px; padding: 9px 13px; }
  .h-kurz.hat-js body[data-seite="player"] .musikwahl__zahl { font-size: 0.66rem; margin-top: 10px; }
  .h-kurz.hat-js body[data-seite="player"] .player .formularseite__link { margin-top: 12px; font-size: 0.82rem; }
  /* Das Probeband braucht auf dem kurzen Bildschirm keinen Platz */
  .h-kurz.hat-js body[data-seite="player"] .probeband { margin-bottom: 10px; padding: 6px 12px; font-size: 0.68rem; }
}

/* ---- Vorschau "Als Naechstes"  -  ab radio_1v75 ------------ */
.vorschauliste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 42vh;
  overflow-y: auto;
}

.vorschauzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}
.vorschauzeile:last-child { border-bottom: 0; }

.vorschauzeile__zeit {
  flex: 0 0 auto;
  width: 42px;
  font-family: var(--schrift-zahl);
  font-size: 0.76rem;
  color: var(--akzent);
}

.vorschauzeile__wort {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vorschauzeile__wort strong {
  font-weight: 500;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vorschauzeile__wort em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vorschauzeile__dauer {
  flex: 0 0 auto;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--leise);
}

.wahlklapp__inhalt .feldhinweis { margin-top: 14px; }

/* ============================================================
   NUR DIE PLATTE DREHT SICH  -  ab radio_1v75
   Bis 1v13 drehte sich der ganze Knopf - damit auch das
   Play-Zeichen und die Balkenanzeige. Das war falsch.
   ============================================================ */

/* Der Knopf selbst steht ab jetzt immer still. */
.scheibe--knopf,
.scheibe--knopf.dreht { animation: none; }

.scheibe__platte {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* Die Rillen liegen jetzt in der Plattenebene */
.scheibe__platte .scheibe__rillen {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 5px);
}

.scheibe__platte .scheibe__cover {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.55;
}

/* Und genau diese Ebene dreht sich, sonst nichts. */
.scheibe--knopf.dreht .scheibe__platte {
  animation: dreht 14s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scheibe--knopf.dreht .scheibe__platte { animation: none; }
}

/* Mitte und Balken liegen darueber und bleiben ruhig */
.scheibe--knopf .scheibe__mitte { z-index: 3; }
.balken { z-index: 2; }

/* ---- Verzeichnisse im Admin  -  ab radio_1v75 -------------- */
.ordnerzeichen {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  color: var(--akzent);
  font-size: 1rem;
}

.ordnerkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}

.ordnerkopf__zurueck {
  font-size: 0.88rem;
  color: var(--akzent-hell);
  text-decoration: none;
}

.ordnerkopf__name {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.05rem;
}

/* Die Zaehlung je Ampel in der Ordnerzeile */
.titelzeile__wort em .ampel {
  width: 7px;
  height: 7px;
  margin: 0 3px 0 0;
}

/* ---- Geraete und Sprachen  -  ab radio_1v75 ---------------- */
.wahlknopf__zahl {
  margin-left: 6px;
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  opacity: 0.6;
}

.dieses {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--tief);
  font-family: var(--schrift-zahl);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.sprachknopf.ist-aktiv .wahlknopf__zahl { opacity: 0.75; }

/* ---- Herz, Listen, Hoererzahl  -  ab radio_1v75 ------------ */
.herz {
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  min-height: 44px;
  min-width: 56px;
}
.herz:hover { border-color: var(--akzent); }
.herz.ist-drin {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tief);
}
.herz[hidden] { display: none; }

.hoererband {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: -8px 0 22px;
  padding: 8px 15px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--leise);
}

.hoererpunkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linie);
}
.hoererpunkt.ist-live {
  background: #7fbf8f;
  box-shadow: 0 0 0 3px rgba(127, 191, 143, 0.18);
}

.tarifzeile__link { text-decoration: none; color: inherit; }
.tarifzeile__link:hover strong { color: var(--akzent-hell); }

/* Auf dem kurzen Bildschirm ist das Herz kleiner */
@media (max-width: 719px) {
  .h-kurz.hat-js body[data-seite="player"] .herz {
    margin-top: 8px; min-height: 40px; padding: 6px 14px; font-size: 1rem;
  }
}

/* ---- Merkmale je Ordner  -  ab radio_1v75 ------------------ */
.ordnermerkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.merkmal {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--schrift-zahl);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.merkmal--sprache {
  background: var(--flaeche-hell);
  color: var(--akzent-hell);
}

.merkmal--genre {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
  white-space: normal;
}

.merkmal--fehlt {
  background: #4a3a22;
  color: var(--akzent-hell);
}

/* In der Ordnerzeile darf der Text jetzt umbrechen */
.titelzeile__wort em { white-space: normal; }

/* ---- Rechtsseiten und Bank  -  ab radio_1v75 --------------- */
.rechtstext { text-align: left; }
.rechtstext p { margin: 0 0 14px; color: var(--text); font-size: 0.95rem; line-height: 1.7; text-align: justify; hyphens: auto; }
.rechtstext__h2 {
  margin: 28px 0 12px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--akzent-hell);
}
.rechtstext__h2:first-child { margin-top: 0; }
.rechtstext__liste { margin: 0 0 16px; padding-left: 20px; color: var(--leise); font-size: 0.93rem; line-height: 1.7; }
.rechtstext__liste li { margin-bottom: 5px; }
.rechtstext__stand {
  margin-top: 30px; padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-family: var(--schrift-zahl); font-size: 0.72rem; color: var(--leise);
}

.rechtsfeld { font-family: var(--schrift-zahl); font-size: 0.82rem; line-height: 1.55; }

.bankblock { display: grid; gap: 1px; margin: 0; background: var(--linie); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.bankblock > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 11px 14px; background: var(--flaeche); }
.bankblock dt { font-size: 0.8rem; color: var(--leise); }
.bankblock dd { margin: 0; font-size: 0.95rem; }
.bankblock__zahl { font-family: var(--schrift-zahl); color: var(--akzent-hell); letter-spacing: 0.02em; }

.hoererband--player { margin: 0 0 16px; }
.reg_link { margin-left: 6px; color: var(--akzent-hell); font-size: 0.85rem; }
.fuss__links a { color: var(--leise); text-decoration: none; }
.fuss__links a:hover { color: var(--akzent-hell); }

/* ---- Oeffnungszeiten  -  ab radio_1v75 --------------------- */
.zeitliste { list-style: none; margin: 0 0 18px; padding: 0; }

.zeitzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.zeitzeile:last-child { border-bottom: 0; }
.zeitzeile.ist-heute { border-left: 3px solid var(--akzent); padding-left: 11px; }

.zeitzeile__tag { flex: 0 0 96px; font-weight: 500; font-size: 0.95rem; }

.zeitzeile__zu { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--leise); }
.zeitzeile__zu input { width: 20px; height: 20px; accent-color: var(--akzent); }

.zeitzeile__uhr { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.zeitzeile__uhr input[type="time"] {
  width: 108px; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); color: var(--text);
  font-family: var(--schrift-zahl); font-size: 0.9rem;
}
.zeitzeile__bis { color: var(--leise); }

.zeitband {
  margin: 0 0 16px; padding: 7px 15px;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche);
  font-family: var(--schrift-zahl); font-size: 0.72rem; color: var(--leise);
}

@media (max-width: 520px) {
  .zeitzeile__tag { flex: 0 0 100%; }
  .zeitzeile__uhr { margin-left: 0; }
  .zeitzeile__uhr input[type="time"] { width: 96px; }
}

/* ---- Rechnung als Beleg  -  ab radio_1v75 ------------------ */
.beleg {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px var(--rand) 60px;
  text-align: left;
}

.beleg__kopf {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 20px; border-bottom: 1px solid var(--linie);
}
.beleg__absender { font-size: 0.82rem; line-height: 1.6; color: var(--leise); }
.beleg__absender strong { display: block; color: var(--text); font-size: 0.9rem; }
.beleg__marke {
  font-family: var(--schrift-anzeige); font-weight: 700;
  font-size: 1.05rem; color: var(--akzent);
}

.beleg__empfaenger { margin: 26px 0 0; font-size: 0.95rem; line-height: 1.6; }
.beleg__klein { font-size: 0.76rem; color: var(--leise); margin: 0 0 5px; }

.beleg__titel {
  margin: 30px 0 18px;
  font-family: var(--schrift-anzeige); font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem); letter-spacing: -0.02em;
}

.beleg__daten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0 0 26px;
  padding: 14px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.beleg__daten dt { font-size: 0.72rem; color: var(--leise); margin-bottom: 3px; }
.beleg__daten dd { margin: 0; font-family: var(--schrift-zahl); font-size: 0.88rem; }

.beleg__tabelle { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.beleg__tabelle th {
  padding: 9px 0; border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-zahl); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise);
  text-align: left; font-weight: 400;
}
.beleg__tabelle td { padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 0.92rem; vertical-align: top; }
.beleg__tabelle .rechts { text-align: right; }
.beleg__tabelle .zahl { font-family: var(--schrift-zahl); white-space: nowrap; }
.beleg__tabelle tfoot td { border-bottom: 0; padding: 7px 0; color: var(--leise); }
.beleg__summe td {
  padding-top: 13px !important; border-top: 1px solid var(--akzent) !important;
  color: var(--text) !important; font-weight: 500; font-size: 1.05rem;
}

.beleg__hinweis {
  margin: 0 0 20px; padding: 11px 14px;
  border-radius: 8px; background: var(--flaeche);
  font-size: 0.84rem; color: var(--leise);
}
.beleg__hinweis--gut { border-left: 3px solid #7fbf8f; }

.beleg__h2 {
  margin: 26px 0 10px;
  font-family: var(--schrift-anzeige); font-weight: 500; font-size: 1rem;
  color: var(--akzent-hell);
}
.beleg__weg { margin-top: 34px; }

/* Ausdruck: Papier statt Anthrazit */
@media print {
  .kopf, .fuss, .beleg__weg, .installknopf { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .beleg { max-width: none; padding: 0; }
  .beleg__absender strong, .beleg__daten dd, .beleg__tabelle td,
  .beleg__empfaenger, .beleg__titel { color: #000 !important; }
  .beleg__marke, .beleg__h2 { color: #8a6220 !important; }
  .beleg__klein, .beleg__daten dt, .beleg__tabelle th,
  .beleg__hinweis, .beleg__tabelle tfoot td { color: #444 !important; }
  .beleg__hinweis, .bankblock > div { background: #f4f4f4 !important; }
  .bankblock, .bankblock > div { border-color: #ccc !important; }
  .bankblock__zahl { color: #000 !important; }
  .beleg__summe td { border-top-color: #000 !important; }
}

/* ---- PDF, Mailpruefung, Hinweis  -  ab radio_1v75 ---------- */
.beleg__knoepfe { margin-top: 30px; }

.liste__pdf {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--akzent-hell);
  font-family: var(--schrift-zahl);
  font-size: 0.68rem;
  text-decoration: none;
}
.liste__pdf:hover { border-color: var(--akzent); }

.mailbericht {
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  font-family: var(--schrift-zahl);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--leise);
  white-space: pre-wrap;
  word-break: break-word;
}

.wenighinweis {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--akzent);
  border-radius: 0 8px 8px 0;
  background: var(--flaeche);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--leise);
  text-align: left;
}

/* ---- Verlauf  -  ab radio_1v75 ----------------------------- */
.vorschauzeile.ist-uebersprungen { opacity: 0.55; }
.vorschauzeile.ist-uebersprungen .vorschauzeile__zeit { color: var(--leise); }
.vorschauzeile.ist-uebersprungen .vorschauzeile__dauer {
  color: var(--leise);
  font-style: italic;
}

/* Ohne laufende Musik bleibt die Uhrzeitspalte leer -
   sie soll nicht in sich zusammenfallen. */
.vorschauzeile__zeit:empty::before { content: '—'; color: var(--linie); }

/* ---- Zwei Reiter in einem Klappmenue  -  ab radio_1v75 ----- */
.reiter {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}

.reiter__knopf {
  flex: 1 1 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-family: var(--schrift-text);
  font-size: 0.86rem;
  cursor: pointer;
}
.reiter__knopf.ist-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tief);
  font-weight: 500;
}

.reiter__inhalt { display: none; }
.reiter__inhalt.ist-aktiv { display: block; }

/* ---- Herz sitzt jetzt in der Bedienzeile  -  ab radio_1v75 -- */
.bedienung .herz {
  margin-top: 0;
  min-width: 52px;
  padding: 0;
  font-size: 1.05rem;
}
.h-kurz.hat-js body[data-seite="player"] .bedienung .herz {
  min-width: 46px; padding: 0; font-size: 1rem;
}

/* Auf kurzen Bildschirmen enger stellen */
@media (max-width: 719px) {
  .h-kurz.hat-js body[data-seite="player"] .reiter { margin-top: 8px; padding-bottom: 8px; }
  .h-kurz.hat-js body[data-seite="player"] .reiter__knopf { min-height: 38px; font-size: 0.8rem; }
  .h-kurz.hat-js body[data-seite="player"] .vorschauliste { max-height: 34vh; }
  .h-kurz.hat-js body[data-seite="player"] .jetzt__kuenstler { margin-top: 2px; }
  .hat-js body[data-seite="player"] .wahlklapp + .wahlklapp { margin-top: 8px; }
}

/* ---- Letzter Feinschliff der Hoehen  -  ab radio_1v75 ------ */
@media (max-width: 719px) {
  /* Mittlere Stufe: Scheibe etwas kleiner, Abstaende enger */
  .h-mittel.hat-js body[data-seite="player"] .scheibe--knopf { width: min(42vw, 152px); }
  .h-mittel.hat-js body[data-seite="player"] .jetzt { margin-bottom: 10px; }
  /* Albumzeile bleibt seit 1v71 sichtbar - der Player scrollt normal */
  .h-mittel.hat-js body[data-seite="player"] .fortschritt { margin-top: 10px; }
  .h-mittel.hat-js body[data-seite="player"] .bedienung { margin-top: 10px; }
  .h-mittel.hat-js body[data-seite="player"] .wahlklapp { margin-top: 12px; }
  .h-mittel.hat-js body[data-seite="player"] .musikwahl__zahl { margin-top: 10px; }
  .h-mittel.hat-js body[data-seite="player"] .player .formularseite__link { margin-top: 12px; }

  /* Kurze Stufe: die letzten Pixel */
  .h-kurz.hat-js body[data-seite="player"] .scheibe--knopf { width: min(32vw, 110px); }
  .h-kurz.hat-js body[data-seite="player"] .player__knopfwort { margin-top: 5px; }
  .h-kurz.hat-js body[data-seite="player"] .wahlklapp { margin-top: 10px; }
}

/* ---- Werbebildschirm  -  ab radio_1v75 --------------------- */
.werben { text-align: left; max-width: 480px; }
.werben .augenbraue { margin-bottom: 10px; }

.gemakasten {
  margin: 16px 0 20px;
  padding: 13px 16px;
  border: 1px solid var(--akzent);
  border-radius: 12px;
  background: var(--flaeche);
}

/* Zugeklappt kostet der Kasten nur eine Zeile - der lange
   Text kommt erst, wenn jemand nachfragt. */
.gemakasten summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}
.gemakasten summary::-webkit-details-marker { display: none; }
.gemakasten summary::marker { content: ''; }

.gemakasten__mehr {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--leise);
  text-decoration: underline;
}

.gemakasten[open] .gemakasten__mehr { text-decoration: none; opacity: 0.6; }
.gemakasten[open] .gemakasten__text { margin-top: 9px; }

.gemakasten__zeile {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--akzent-hell);
}

.gemakasten__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--leise);
  text-align: justify;
  hyphens: auto;
}

.werbliste {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.werbliste li {
  position: relative;
  padding: 0 0 11px 26px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
}

.werbliste li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent);
}

.werben__probe {
  margin: 0 0 14px;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--akzent-hell);
}

.werben__knopf {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.werben__klein {
  margin: 11px 0 0;
  font-size: 0.8rem;
  color: var(--leise);
  text-align: center;
}

.werben .baustelle__link { margin-top: 18px; text-align: center; }

/* Auf kurzen Bildschirmen straffen */
@media (max-width: 719px) {
  .h-kurz .werben .gemakasten { margin: 12px 0 16px; padding: 12px 14px; }
  .h-kurz .werben .gemakasten__zeile { font-size: 1rem; }
  .h-kurz .werben .gemakasten__text { font-size: 0.8rem; }
  .h-kurz .werbliste li { padding-bottom: 8px; font-size: 0.88rem; }
  .h-kurz .werben__probe { font-size: 0.95rem; margin-bottom: 10px; }
}

/* ---- Werbebildschirm auf kurzen Geraeten  -  ab radio_1v75 -- */
@media (max-width: 719px) {
  .h-kurz .werben .bildschirm__titel { font-size: 1.42rem; margin-bottom: 10px; }
  .h-kurz .werben .augenbraue { margin-bottom: 7px; }
  .h-kurz .werben .gemakasten { margin: 10px 0 14px; padding: 10px 13px; }
  .h-kurz .werben .gemakasten__zeile { font-size: 0.96rem; }
  .h-kurz .werbliste { margin-bottom: 14px; }
  .h-kurz .werbliste li { padding-bottom: 7px; font-size: 0.85rem; line-height: 1.45; }
  .h-kurz .werbliste li::before { top: 6px; width: 7px; height: 7px; }
  .h-kurz .werben__probe { font-size: 0.9rem; margin-bottom: 8px; }
  .h-kurz .werben .knopf--gross { padding: 13px 22px; font-size: 0.98rem; }
  .h-kurz .werben__klein { margin-top: 8px; font-size: 0.75rem; }
  .h-kurz .werben .baustelle__link { margin-top: 12px; font-size: 0.85rem; }
}

/* ---- Weg zur Musik  -  ab radio_1v75 ----------------------- */

/* Der Musik-Knopf in der Kopfleiste behaelt sein Wort auch
   auf dem Handy. Alle anderen Kopfknoepfe schrumpfen dort auf
   ihr Zeichen - dieser nicht, er ist der wichtigste. */
.kopfknopf--musik {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tief);
  font-weight: 500;
}

.kopfknopf--musik:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.kopfknopf--musik .kopfknopf__zeichen { font-size: 0.8rem; }

@media (max-width: 719px) {
  .kopfknopf__wort--immer { display: inline !important; }
  .kopfknopf--musik { padding-left: 11px; padding-right: 13px; }
}

/* Band auf der Startseite */
.zurmusik {
  margin: 0;
  padding: 12px var(--rand);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  text-align: center;
}

.zurmusik__knopf {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  text-decoration: none;
  text-align: center;
}

@media (max-width: 719px) {
  .h-kurz .zurmusik { padding: 9px var(--rand); }
  .h-kurz .zurmusik__knopf { padding: 12px 20px; font-size: 0.98rem; }
}

/* ---- Rechtszeile im Player  -  ab radio_1v75 --------------- */
/* Bewusst flach und leise: sie muss DA sein, aber sie soll
   nicht mit der Bedienung konkurrieren. */
.rechtszeile {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  color: var(--leise);
}

.rechtszeile a {
  color: var(--leise);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rechtszeile a:hover { color: var(--akzent-hell); }
.rechtszeile .baustelle__trenner { margin: 0 5px; opacity: 0.5; }

@media (max-width: 719px) {
  .h-kurz.hat-js body[data-seite="player"] .rechtszeile {
    margin-top: 6px;
    font-size: 0.68rem;
  }
}

/* ---- Rechtszeile: Platz sparen  -  ab radio_1v75 ----------- */
@media (max-width: 719px) {
  /* Sie muss auf EINE Zeile passen - sonst kostet sie doppelt. */
  .hat-js body[data-seite="player"] .rechtszeile {
    white-space: nowrap;
    font-size: 0.66rem;
    margin-top: 5px;
  }
  .hat-js body[data-seite="player"] .rechtszeile .baustelle__trenner { margin: 0 4px; }

  /* Die Zeile darueber ruecken wir enger heran. */
  .hat-js body[data-seite="player"] .player .formularseite__link { margin-top: 8px; }

  /* Auf kurzen Geraeten die letzten Pixel: Scheibe und
     Vorratszeile etwas kleiner. */
  .h-kurz.hat-js body[data-seite="player"] .scheibe--knopf { width: min(30vw, 100px); }
  .h-kurz.hat-js body[data-seite="player"] .musikwahl__zahl { margin-top: 7px; font-size: 0.66rem; }
  .h-kurz.hat-js body[data-seite="player"] .player .formularseite__link { margin-top: 7px; font-size: 0.8rem; }
  .h-kurz.hat-js body[data-seite="player"] .rechtszeile { font-size: 0.62rem; margin-top: 4px; }

  .h-mittel.hat-js body[data-seite="player"] .scheibe--knopf { width: min(38vw, 136px); }
  .h-mittel.hat-js body[data-seite="player"] .musikwahl__zahl { margin-top: 8px; }
}

@media (min-width: 1040px) {
  .werben { column-gap: 72px; }
  .werben .bildschirm__titel { font-size: 2.6rem; }
}


/* ---- Abschluss am Handy: schlicht untereinander ------------ */
@media (max-width: 719px) {
  .werben__abschluss { display: block; }
  .werben__abschluss .werben__probe { margin: 0 0 10px; }
  .werben__abschluss .werben__knopf { display: block; width: 100%; }
  .werben__abschluss .werben__klein { text-align: center; }
  .werben__abschluss .baustelle__link { text-align: center; margin-top: 14px; }
}

/* ============================================================
   BILDSCHIRME AM RECHNER  -  ab radio_1v75
   ============================================================
   Anno wollte am Desktop GENAU dieselbe Fuehrung wie am Handy:
   ein Bildschirm, "Weiter", der naechste. Nur breiter.

   Also bleibt das Bildschirmsystem bestehen - es bekommt nur
   groessere Masse und ein zweispaltiges Innenleben.
   ============================================================ */

@media (min-width: 720px) {

  /* Ein Bildschirm fuellt die Hoehe zwischen Kopf und Leiste. */
  .bildschirm {
    min-height: calc(100vh - 66px - 92px);
    display: none;
    padding: 0;
  }

  .bildschirm.ist-sichtbar {
    display: flex;
    align-items: center;
  }

  .bildschirm__inhalt {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px var(--rand);
  }

  /* ---- Bedienleiste am Rechner ---------------------------
     WICHTIG: die Grundregeln der Leiste standen bisher NUR im
     Handy-Block. Am Rechner erbte sie deshalb gar nichts - kein
     display:flex, keine Positionierung. Die Elemente lagen
     uebereinander, der Weiter-Knopf sah eingedrueckt aus.
     Hier steht sie jetzt vollstaendig. */
  .blaettern {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;

    display: flex;
    align-items: center;
    gap: 24px;

    box-sizing: border-box;
    width: 100%;
    padding: 16px var(--rand);

    background: var(--flaeche);
    border-top: 1px solid var(--linie);
  }

  .blaettern__pfeil {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    order: 1;
  }

  .punktreihe {
    flex: 0 0 auto;
    order: 2;
    gap: 12px;
  }

  .punktreihe span { width: 12px; height: 12px; }
  .punktreihe span.ist-aktiv { width: 30px; }

  /* Die Rechtslinks fuellen die Mitte - so ist Impressum ohne
     Scrollen erreichbar. */
  .blaettern__recht {
    order: 3;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 22px;
    font-size: 0.78rem;
  }

  .blaettern__recht a {
    color: var(--leise);
    text-decoration: none;
  }

  .blaettern__recht a:hover {
    color: var(--akzent-hell);
    text-decoration: underline;
  }

  .blaettern__weiter {
    order: 4;
    flex: 0 0 auto;
    min-width: 220px;
    min-height: 52px;
    padding: 15px 34px;
    font-size: 1.05rem;
  }

  /* ---- Werbebildschirm zweispaltig ----------------------- */
  .werben {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kopf   kopf"
      "gema   liste"
      "abschl abschl";
    column-gap: 56px;
    align-items: start;
  }

  .werben .augenbraue { grid-area: kopf; align-self: start; margin-bottom: 4px; }

  .werben .bildschirm__titel {
    display: block;
    grid-area: kopf;
    align-self: end;
    margin: 26px 0 24px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
  }

  .gemakasten { grid-area: gema; margin: 0; padding: 20px 22px; }
  .gemakasten__zeile { font-size: 1.2rem; }

  /* Am Rechner ist Platz - der Text steht offen da. */
  .gemakasten__text { display: block !important; margin-top: 12px; font-size: 0.9rem; }
  .gemakasten__mehr { display: none; }

  .werbliste { grid-area: liste; margin: 0; }
  .werbliste li { font-size: 1rem; padding-bottom: 14px; }

  .werben__abschluss {
    grid-area: abschl;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--linie);
  }

  .werben__probe { margin: 0; font-size: 1.15rem; }
  .werben__knopf { width: auto; min-width: 260px; margin: 0; }
  .werben__klein { margin: 0; text-align: left; flex: 1 1 100%; }
  .werben .baustelle__link { margin: 0; text-align: left; }

  /* ---- Die vier Punkte ----------------------------------- */
  .punkte { grid-template-columns: 1fr 1fr; column-gap: 44px; }
}

@media (min-width: 1040px) {
  .punkte { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .punkt  { padding: 30px 0 34px; }
  .werte  { grid-template-columns: repeat(3, 1fr); }
  .werben { column-gap: 72px; }
  .werben .bildschirm__titel { font-size: 2.6rem; }
}

/* Sehr flache Fenster (Notebook quer): Bildschirm darf scrollen */
@media (min-width: 720px) and (max-height: 700px) {
  .bildschirm { min-height: calc(100vh - 66px - 84px); }
  .bildschirm__inhalt { padding: 24px var(--rand); }
  .held { padding-top: 24px; padding-bottom: 24px; }
}

/* ============================================================
   FULL HD UND GROESSER  -  ab radio_1v75
   ============================================================
   Auf einem 1920er Bildschirm wirkte alles verloren: kleine
   Schrift, viel Leere, der Inhalt klebte an der Mitte.
   Ab hier wird groesser gedacht, nicht nur breiter.
   ============================================================ */

@media (min-width: 720px) {

  /* Der Bildschirm ist genau so hoch wie das Fenster minus
     Kopfleiste und Bedienleiste - keine Mindesthoehe, sondern
     eine feste Hoehe. Dann sitzt der Inhalt wirklich mittig
     und nichts rutscht unter die Leiste. */
  .bildschirm {
    min-height: 0;
    height: calc(100vh - 66px - 85px);
    overflow-y: auto;
  }

  .bildschirm.ist-sichtbar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Platz fuer die feste Leiste am Fuss */
  .bildschirme { padding-bottom: 0; }
}

@media (min-width: 1280px) {
  :root { --rand: 48px; }

  .bildschirm__inhalt { max-width: 1200px; padding: 48px var(--rand); }

  .held__titel   { font-size: clamp(2.6rem, 4.2vw, 3.9rem); }
  .anleser       { font-size: 1.12rem; max-width: 34em; }
  .punkt__titel  { font-size: 1.15rem; }
  .punkt__text   { font-size: 0.98rem; }

  .werben .bildschirm__titel { font-size: 2.8rem; }
  .gemakasten__zeile { font-size: 1.32rem; }
  .gemakasten__text  { font-size: 0.95rem; }
  .werbliste li      { font-size: 1.08rem; padding-bottom: 16px; }
  .werben__probe     { font-size: 1.25rem; }

  .blaettern__weiter { min-width: 250px; font-size: 1.1rem; }
}

/* ---- Breit, aber flach  -  ab radio_1v133 ------------------
   ANNOS FALL: Laptop mit 1920 Punkten Breite, aber durch
   Lesezeichenleiste und Taskleiste bleiben nur rund 780 Punkte
   Hoehe. Dort war die Scheibe 400 Punkte gross - zusammen mit
   Gruss, Titel und Werbeband schob sie die Knopfreihe aus dem
   Bild, und zum Ueberspringen musste er jedes Mal scrollen.

   Die Hoehenklassen (h-kurz/h-mittel) greifen erst unter 760
   Punkten, also hier gerade nicht mehr.

   Darum: auf breiten, aber flachen Bildschirmen richtet sich
   die Scheibe nach der HOEHE statt nach der Breite. */
@media (min-width: 900px) and (max-height: 1000px) {
  body[data-seite="player"] .scheibe--knopf { width: min(30vh, 400px); }

  /* Auch die Abstaende enger ziehen - jede Zeile, die hier
     gespart wird, ist eine Zeile weniger zu scrollen. */
  body[data-seite="player"] .player__knopfwort { margin: 10px 0 6px; }
  body[data-seite="player"] .bedienung { margin-top: 6px; }
}

/* Ab Full HD: die Scheibe darf richtig gross werden */
@media (min-width: 1600px) {
  .bildschirm__inhalt { max-width: 1360px; }

  .held { gap: 72px; }
  .held__titel { font-size: 4.2rem; }
  .anleser { font-size: 1.2rem; }

  .scheibe { width: min(30vw, 400px); }

  .punkt__titel { font-size: 1.22rem; }
  .punkt__text  { font-size: 1.02rem; }

  .werben .bildschirm__titel { font-size: 3.2rem; }
  .werbliste li { font-size: 1.15rem; }
}

/* ---- Rechtslinks am Handy  -  ab radio_1v75 ---------------
   NICHT ausblenden. Die allgemeine Fusszeile ist bei
   JavaScript unsichtbar - waeren die Links auch hier weg,
   waere das Impressum von der Startseite aus gar nicht mehr
   erreichbar. Genau der Mangel, den Anno in 1v31 gefunden hat.

   Deshalb bekommt die Leiste am Handy ZWEI Zeilen: oben die
   Bedienung, darunter die Rechtslinks, klein und leise. */
@media (max-width: 719px) {
  .blaettern {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .blaettern__recht {
    order: 9;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .blaettern__recht a { color: var(--leise); text-decoration: none; }
}

/* ---- Kurze Bildschirme: die zweite Leistenzeile kostet
        21 px, die holen wir hier zurueck  -  ab radio_1v75 ---- */
@media (max-width: 719px) {
  .h-kurz .werben .gemakasten { margin: 8px 0 12px; padding: 9px 12px; }
  .h-kurz .werbliste li { padding-bottom: 6px; line-height: 1.4; }
  .h-kurz .werben__abschluss .werben__probe { margin-bottom: 7px; }
  .h-kurz .werben .baustelle__link { margin-top: 10px; }

  /* Die zweite Zeile darf am kurzen Geraet enger stehen */
  .h-kurz .blaettern { row-gap: 5px; }
  .h-kurz .blaettern__recht { font-size: 0.62rem; }
}

/* ============================================================
   NUR EINMAL IMPRESSUM  -  ab radio_1v75
   ============================================================
   Anno sah es am Desktop DOPPELT. Der Grund ist dieselbe Falle
   wie bei der Bedienleiste: die Regel, die die allgemeine
   Fusszeile ausblendet, steht nur im Handy-Block. Am Rechner
   ist die Fusszeile also sichtbar - und dazu kam meine eigene
   Rechtszeile im Player.

   Klare Aufteilung ab jetzt:
     Handy   -> Fusszeile ausgeblendet, meine Zeile traegt sie
     Rechner -> Fusszeile sichtbar, meine Zeile weg
   ============================================================ */

/* Die eigene Rechtszeile im Player gibt es nicht mehr - die
   allgemeine Fusszeile traegt die Links jetzt auf jeder Seite
   ausser der Startseite. */

/* ---- Startseite am Rechner: Fusszeile weg  -  ab 1v35 ------
   Dort tragen die Links in der Bedienleiste. Bliebe die
   Fusszeile darunter stehen, staende Impressum auch hier
   zweimal - und man muesste ausserdem scrollen, obwohl ein
   Bildschirm nicht scrollen soll. */
@media (min-width: 720px) {
  /* ersetzt durch die feste Zustaendigkeit am Dateiende (1v37) */
}

/* ---- Fehlende Dateien  -  ab radio_1v75 -------------------- */
.fehlendkasten {
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px solid #6b4a2a;
  border-radius: 12px;
  background: #2a2119;
}

.fehlendkasten__kopf {
  margin: 0 0 8px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--akzent-hell);
}

.fehlendkasten .liste { margin: 12px 0 14px; }
.fehlendkasten .liste__zeit {
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  opacity: 0.75;
}

.importzeile--fehlt .importzeile__datei { color: var(--akzent-hell); }
.importzeile--zurueck .importzeile__datei { color: #7fbf8f; }


/* ============================================================
   IMPRESSUM: EINE QUELLE JE SEITE  -  ab radio_1v75
   ============================================================
   Anno hat es zweimal reklamiert, zu Recht. Erst stand es am
   Desktop doppelt, dann fehlte es am Handy. Ursache war beide
   Male, dass ZWEI Quellen um dieselbe Anzeige konkurrierten und
   ich das Ergebnis gerechnet statt gemessen habe.

   Ab jetzt gilt eine feste Zustaendigkeit, ohne Wenn und Aber:

     Startseite  ->  Bedienleiste       (Fusszeile aus)
     Player      ->  eigene Fusszeile   (Fusszeile aus)
     alles andere ->  allgemeine Fusszeile

   Der Player braucht seine eigene, weil er am Handy
   overflow:hidden setzt und die volle Fensterhoehe nimmt - die
   allgemeine Fusszeile stuende darunter und waere unerreichbar.

   Beide Ausblendungen gelten auf JEDER Breite. Keine
   Media-Query, kein Wettlauf.
   ============================================================ */

body[data-seite="start"]  .fuss { display: none; }
body[data-seite="player"] .fuss { display: none; }

/* ---- Pflichtfelder und Passwort-Auge  -  ab radio_1v75 ----- */
.pflicht {
  margin-left: 3px;
  color: var(--akzent);
  font-weight: 700;
}

.pflichthinweis {
  margin: -6px 0 18px;
  font-size: 0.8rem;
  color: var(--leise);
}

.pwfeld {
  position: relative;
  display: block;
}

/* Platz fuer das Auge, damit der Text nicht darunter laeuft */
.pwfeld input { padding-right: 52px; width: 100%; box-sizing: border-box; }

.pwauge {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  padding: 0;

  border: 0;
  background: transparent;
  color: var(--leise);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.pwauge:hover { opacity: 0.9; }
.pwauge.ist-offen { color: var(--akzent-hell); opacity: 1; }

/* ---- Installationshilfe  -  ab radio_1v75 ------------------ */
/* Erscheint nur, wenn der Browser KEIN eigenes Angebot macht.
   Samsung Internet, Safari und Firefox tun das nicht. */
.installhilfe {
  display: flex;
  flex-direction: column;
  gap: 3px;

  max-width: 340px;
  margin: 0;
  padding: 10px 14px;

  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);

  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--leise);
}

.installhilfe[hidden] { display: none; }

.installhilfe__kopf {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--akzent-hell);
}

@media (max-width: 719px) {
  .installhilfe { max-width: none; font-size: 0.74rem; padding: 9px 12px; }
}

/* ---- Hinweis auf fehlende Dateien  -  ab radio_1v75 -------- */
.marke--warn {
  border-color: #6b4a2a;
  background: #2a2119;
  color: var(--akzent-hell);
}

/* ---- Einlesen nach Dateiname  -  ab radio_1v75 ------------- */
.einlesekasten--namen { border-color: var(--akzent); }

.namensmuster {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--tief);
  font-family: var(--schrift-zahl);
  font-size: 0.82rem;
  color: var(--akzent-hell);
  overflow-x: auto;
  white-space: nowrap;
}

.liste--schlicht { list-style: none; margin: 8px 0; padding: 0; }
.liste--schlicht li {
  padding: 3px 0;
  font-family: var(--schrift-zahl);
  font-size: 0.76rem;
  color: var(--leise);
  word-break: break-all;
}

.importzeile--unpassend .importzeile__text { color: #c98a5a; }
.importzeile--neu .importzeile__datei { color: var(--akzent-hell); }

/* ---- Gefahrbereich ---------------------------------------- */
.gefahrkasten {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid #6b3a3a;
  border-radius: 12px;
  background: #241a1a;
}

.gefahrkasten__kopf {
  cursor: pointer;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1rem;
  color: #d08a8a;
}

.gefahrkasten[open] .gefahrkasten__kopf { margin-bottom: 10px; }

/* ==============================================================
   KLAPPMENUES STATT INNEREM SCROLLEN  -  ab radio_1v75
   ==============================================================
   In 1v54 hatte die Genre-Liste eine eigene Scrollflaeche. Das
   fuehrte zu zwei Scrollbereichen uebereinander - man wusste
   nie, welcher gerade reagiert.

   Jetzt bekommt jeder Abschnitt ein eigenes Klappmenue:
   Genres, Sprachen, Listen, Reihenfolge. Zu ist zu, offen ist
   offen - und gescrollt wird nur die Seite.
   ============================================================ */
.wahlklapp--unter {
  margin-top: 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--tief);
}

.wahlklapp--unter > .wahlklapp__kopf {
  padding: 11px 14px;
  font-size: 0.9rem;
}

.wahlklapp--unter > .wahlklapp__inhalt {
  padding: 0 14px 14px;
  border-top: 1px solid var(--linie);
}

.wahlklapp--unter .musikwahl__reihe { margin-top: 12px; }

/* ---- Der Player bleibt oben stehen -------------------------
   Waehrend man unten in der Auswahl blaettert, soll sichtbar
   bleiben, was gerade laeuft. Sonst weiss man beim Umschalten
   nicht mehr, wovon man kommt. */
/* Der Kopf muss die Zentrierung des Players FORTSETZEN.
   Als schlichtes div hat er sie unterbrochen - die Scheibe
   stand danach links statt in der Mitte. */
.player__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* Der feste Kopf aus 1v56/1v57 ist wieder RAUS.

   Die Idee war, dass beim Blaettern sichtbar bleibt, was
   laeuft. In der Praxis sah es unruhig aus: die Knoepfe
   scrollten sichtbar hinter der Scheibe durch.

   Anno hat das sofort gesehen - "das sieht dumm aus". Er hat
   recht. Ein Kopf, der halb durchscheint, ist schlechter als
   gar keiner.

   Der Player scrollt jetzt wieder ganz normal. Die
   Klappmenues bleiben - die waren die eigentliche Loesung. */

/* ---- Genres in Grossbuchstaben  -  ab radio_1v75 -----------
   Anno schreibt seine Genres im Dateinamen mal gross, mal
   klein - "e-Pop" und "e-pop", "Musical" und "musical". In der
   Liste sah das unruhig aus.

   Gelöst ueber die ANZEIGE, nicht ueber die Daten: in der
   Datenbank bleibt die Schreibweise aus dem Dateinamen
   erhalten. Nur im Player wird alles gross dargestellt.

   So bleibt auch die Sortierung nachvollziehbar und das
   Einlesen unveraendert. */
.wahlknopf[data-genre],
.wahlklapp__jetzt {
  text-transform: uppercase;

  /* Grossbuchstaben brauchen etwas mehr Luft, sonst kleben
     sie aneinander */
  letter-spacing: 0.04em;
}

/* Die Zeile oben ist laenger in Grossschrift - etwas kleiner,
   damit zwei Genres nebeneinander noch passen */
.wahlklapp__jetzt { font-size: 0.95rem; }

@media (max-width: 719px) {
  .wahlklapp__jetzt { font-size: 0.88rem; }
}

/* ==============================================================
   LAUFBAND UNTER "LAEUFT"  -  ab radio_1v75
   ==============================================================
   Annos Werbetexte ziehen von rechts nach links durch.
   Die Spur enthaelt die Texte ZWEIMAL hintereinander und wird um
   genau die Haelfte verschoben - so laeuft es ohne Sprung im
   Kreis. Die Dauer setzt das Skript nach der Textlaenge
   (--lauf-dauer), damit lange und kurze Texte gleich schnell
   laufen.

   Aus- und Einblenden nur ueber die Deckkraft: ein "hidden"
   wuerde die Bewegung bei jedem Liedwechsel neu starten. */
.laufband {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 10px auto 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 7px 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* weiche Kanten links und rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband[hidden] { display: none; }
.laufband.ist-an  { opacity: 1; }

.laufband__spur {
  display: inline-block;
  font-family: var(--schrift-zahl);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--akzent-hell);
  animation: laufband var(--lauf-dauer, 20s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.laufband.ist-an .laufband__spur { animation-play-state: running; }

.laufband__text { padding-right: 0.4em; }
.laufband__punkt {
  display: inline-block;
  padding: 0 1.1em 0 0.7em;
  color: var(--akzent);
}

@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Weniger Bewegung gewuenscht: der Text steht still und wird
   vom Skript alle paar Sekunden getauscht. */
.laufband.ist-still { text-align: center; }
.laufband.ist-still .laufband__spur {
  animation: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8%;
}

@media (max-width: 719px) {
  .laufband { margin-top: 8px; padding: 6px 0; }
  .laufband__spur { font-size: 0.78rem; }
}

/* ---- Admin: Laufschrift ------------------------------------- */
.laufzeile {
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--flaeche);
}
.laufzeile--leer { opacity: 0.75; }
.laufzeile__kopf {
  font-family: var(--schrift-zahl);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--akzent-hell);
  padding: 0 6px;
}
.laufzeile__steuer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.laufzeile__pos {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--leise);
  font-size: 0.88rem;
}
.laufzeile__uebersetzung summary {
  cursor: pointer;
  color: var(--leise);
  font-size: 0.88rem;
  padding: 4px 0;
}
.laufzeile__uebersetzung[open] summary { margin-bottom: 8px; }
.laufzeile__uebersetzung .feld { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
}

/* ============================================================
   TITELBILD IM KLAPPFENSTER  -  ab radio_1v76
   Zeigt das Bild aus der MP3 gross und quadratisch. Es bleibt
   in der Breite der Karte und wird am grossen Bildschirm nicht
   unnoetig riesig.
   ============================================================ */
.grossbild {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 12px auto 4px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: rgba(0, 0, 0, 0.25);
}

#bildklapp .feldhinweis { text-align: center; }

/* ============================================================
   NEUE AUSWAHL WARTET  -  ab radio_1v83, Zeichen ab 1v84
   Der Salon hat die Musikrichtung gewechselt, die Musik laeuft
   aber weiter. Der Knopf sagt an, dass ein Druck genuegt.
   ============================================================ */
.scheibe--knopf.wartet .scheibe__mitte {
  box-shadow: 0 0 0 3px var(--gold, #d6a04a);
}

/* ab 1v115: Der ganze Knopf leuchtet golden auf und ab - Anno
   wollte deutlicher sehen, dass etwas bereitliegt. Das Zeichen
   blinkt weiter ruhig mit. */
.scheibe--knopf.wartet .scheibe__mitte {
  animation: wartet_leuchten 1.6s ease-in-out infinite;
}

@keyframes wartet_leuchten {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold, #d6a04a), 0 0 10px 2px rgba(214, 160, 74, 0.35); }
  50%      { box-shadow: 0 0 0 5px var(--gold, #d6a04a), 0 0 30px 10px rgba(214, 160, 74, 0.75); }
}

/* Das Zeichen in der Mitte blinkt ruhig - einmal pro Sekunde,
   kein Flackern. Es zeigt das Play-Dreieck, weil ein Druck
   startet und NICHT pausiert. */
.scheibe--knopf.wartet .scheibe__dreieck {
  animation: wartet_pulsen 1.1s ease-in-out infinite;
}

@keyframes wartet_pulsen {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .scheibe--knopf.wartet .scheibe__dreieck { animation: none; opacity: 1; }
  .scheibe--knopf.wartet .scheibe__mitte {
    animation: none;
    box-shadow: 0 0 0 4px var(--gold, #d6a04a), 0 0 22px 6px rgba(214, 160, 74, 0.6);
  }
}

/* Hinweis ueber den Wahlknoepfen (ab 1v84) */
.feldhinweis--wahl {
  margin: 0 0 8px;
  opacity: 0.85;
}

/* ============================================================
   BUEHNE: PLATTE UND COVER NEBENEINANDER  -  ab radio_1v86

   Hochkant (Handy, Tablet senkrecht) bleibt alles wie bisher:
   Platte mittig, Cover im Klappfenster darunter.

   Ab 900 px Breite - also PC, Tablet quer, Handy quer - steht
   das Cover gross NEBEN der Platte. Das Klappfenster "Bild"
   verschwindet dann, es waere doppelt.
   ============================================================ */
.buehne {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.buehne__bild { display: none; margin: 0; }

@media (min-width: 900px) {
  .buehne {
    gap: 40px;
    align-items: center;
  }

  .buehne__bild {
    display: block;
    flex: 0 0 auto;
    width: min(300px, 26vw);
  }

  .buehne__cover {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--linie);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  /* Im Klappfenster waere dasselbe Bild ein zweites Mal. */
  #bildklapp { display: none; }
}

/* ============================================================
   FERNBEDIENUNG  -  ab radio_1v88
   ============================================================ */
.fern { max-width: 620px; margin: 0 auto; }

.fern__geraete {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 20px;
}

.fern__pult {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 18px 16px;
}

.fern__jetzt { text-align: center; margin-bottom: 14px; }
.fern__wort { color: var(--leise); font-size: 13px; margin: 0 0 4px; }
.fern__titel { font-size: 20px; font-weight: 600; margin: 0; }
.fern__kuenstler { color: var(--leise); margin: 2px 0 0; }

.fern__knoepfe {
  display: flex; gap: 16px; justify-content: center;
  margin: 16px 0;
}
.fern__knoepfe .rundknopf { font-size: 22px; }

.fern__laut {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

/* Hinweis im Player, dass gerade ferngesteuert wurde (ab 1v91) */
.fernband {
  text-align: center;
  margin: 6px 0 0;
  color: var(--akzent-hell);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Lautstaerkezeile der Fernbedienung - genau wie im Player
   (ab 1v92). Der Schieber war vorher im Blau des Browsers und
   fiel aus dem Bild. */
.fern__laut input[type="range"] {
  flex: 1 1 auto;
  height: 30px;
  accent-color: var(--akzent);
  cursor: pointer;
}

.fern__zahl {
  font-family: var(--schrift-zahl);
  font-size: 0.8rem;
  color: var(--leise);
  min-width: 3ch;
  text-align: right;
}

.fern__laut .fern__wort { color: var(--leise); font-size: 1.1rem; margin: 0; }

/* Die Klappfenster der Fernbedienung wie im Player, mit Abstand
   untereinander statt aneinandergeklebt. */
.fern__pult .wahlklapp { margin-top: 10px; }

.fern__pult .fern__knoepfe .rundknopf {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}

/* Eine leere Musikrichtung, die noch gespeichert ist (ab 1v94) */
.wahlknopf.ist-leer { opacity: 0.55; text-decoration: line-through; }

.wahl_zurueck { margin: 18px 0; text-align: center; }

/* ============================================================
   FARBHIMMEL  -  ab radio_1v98
   Farben aus dem Cover, sehr langsam wandernd. Nur breit.
   ============================================================ */
:root {
  --himmel1: 120, 60, 170;    /* Salon-Farben, falls kein Cover */
  --himmel2: 200, 120, 60;
  --himmel3: 40, 90, 160;
}

.himmel,
.himmel__schleier { display: none; }

@media (min-width: 900px) {
  /* Der Himmel liegt HINTER allem. Damit er zu sehen ist, darf
     der body keine eigene Flaeche malen - die dunkle Grundfarbe
     kommt weiter vom html. */
  body[data-seite="player"] { background: transparent; }

  .himmel {
    display: block;
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
    filter: blur(70px) saturate(120%);
    opacity: 0.8;
  }

  .himmel__fleck {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    mix-blend-mode: screen;
    transition: background 3s ease;
  }
  .himmel__f1 {
    background: radial-gradient(circle, rgba(var(--himmel1), 0.9), transparent 60%);
    left: 5%; top: 10%;
    animation: himmel_wandern1 38s ease-in-out infinite alternate;
  }
  .himmel__f2 {
    background: radial-gradient(circle, rgba(var(--himmel2), 0.8), transparent 60%);
    right: 0; top: 30%;
    animation: himmel_wandern2 46s ease-in-out infinite alternate;
  }
  .himmel__f3 {
    background: radial-gradient(circle, rgba(var(--himmel3), 0.8), transparent 60%);
    left: 30%; bottom: -10%;
    animation: himmel_wandern3 52s ease-in-out infinite alternate;
  }

  /* Der Schleier haelt die Schrift immer lesbar. */
  .himmel__schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                rgba(27, 26, 29, 0.10), rgba(27, 26, 29, 0.55));
  }
}

@keyframes himmel_wandern1 { to { transform: translate(25vw, 18vh) scale(1.2); } }
@keyframes himmel_wandern2 { to { transform: translate(-30vw, -12vh) scale(0.85); } }
@keyframes himmel_wandern3 { to { transform: translate(10vw, -25vh) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .himmel__fleck { animation: none; }
}

/* ---- Heute noch neu (ab 1v99) ------------------------------ */
.vorrat { margin-top: 6px; }
.vorrat__balken {
  height: 3px;
  margin: 6px auto 0;
  max-width: 320px;
  border-radius: 2px;
  background: var(--linie);
  overflow: hidden;
}
.vorrat__fuellung {
  height: 100%;
  background: var(--akzent);
  transition: width 0.8s ease;
}

/* ============================================================
   SENDER  -  ab radio_1v101
   "Alles gemischt" ueber die ganze Breite, darunter vier Sender
   in zwei Spalten.
   ============================================================ */
.senderwahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 14px;
}
.senderknopf {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  text-align: left;
  padding: 12px 12px 10px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche, rgba(255, 255, 255, 0.03));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 64px;
}
.senderknopf--alle { grid-column: 1 / -1; }
.senderknopf__sym  { font-size: 20px; grid-row: span 2; }
.senderknopf__name { font-weight: 700; font-size: 15px; }
.senderknopf__unter {
  grid-column: 2;
  font-size: 12px;
  color: var(--leise, #a49eaa);
}
.senderknopf__zahl {
  grid-column: 2;
  font-size: 11px;
  color: var(--leise, #a49eaa);
  font-family: ui-monospace, monospace;
}
.senderknopf.ist-aktiv {
  border-color: var(--akzent);
  background: linear-gradient(145deg, rgba(200, 148, 74, 0.28), rgba(200, 148, 74, 0.08));
}
.senderknopf.ist-aktiv .senderknopf__name { color: var(--akzent); }

/* ---- Zahlen IN den Wahlknoepfen (ab 1v103) -----------------
   Die Zahl uebernahm die Farbe und den Abstand der Zeile unter
   der Liste - hell und nach unten verrutscht. Auf dem goldenen
   Knopf war sie dadurch fast unsichtbar. Jetzt nimmt sie die
   Schriftfarbe des Knopfs an, nur etwas blasser. */
body[data-seite="player"] .player .wahlknopf .musikwahl__zahl {
  margin: 0 0 0 6px;
  color: inherit;
  font-size: 0.7rem;
  opacity: 0.6;
}
body[data-seite="player"] .player .wahlknopf.ist-aktiv .musikwahl__zahl,
.wahlknopf.ist-aktiv .wahlknopf__zahl { opacity: 0.8; }

/* ---- Hoerprobe der Klang-Gruppen (ab 1v104) ---------------- */
.klangseite .senderknopf { text-decoration: none; }
.klangsuche { margin: 6px 0 12px; }
.klangsuche .feld__eingabe { width: 100%; }
.probe { padding: 10px 0; border-top: 1px solid var(--linie); }
.probe:first-of-type { border-top: none; }
.probe__kopf { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.probe__titel { color: var(--text); text-decoration: none; font-weight: 600; }
.probe__titel:hover { color: var(--akzent); }
.probe__unter { font-size: 12px; color: var(--leise, #a49eaa); margin-top: 2px; }
.probe__marke { font-size: 11px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.probe__marke--schwung  { background: #4a2626; color: #f0a3a3; }
.probe__marke--getragen { background: #3d3a1f; color: #f0dc8a; }
.probe__marke--gefuehl  { background: #34284a; color: #c9b3ee; }
.probe__marke--warm     { background: #24384a; color: #9ccbee; }
.probe audio { width: 100%; height: 36px; margin-top: 6px; }
.probe--fokus { border: 1px solid var(--akzent); border-radius: 12px; padding: 0 10px; margin-bottom: 8px; }

/* ---- Hoerer in der Kopfleiste (ab 1v107) ------------------- */
.kopfknopf--hoerer {
  cursor: default;
  gap: 7px;
}
.kopfknopf--hoerer .hoererpunkt { margin: 0; }
.kopfknopf__zahl {
  font-family: var(--schrift-zahl);
  font-weight: 600;
}

/* Am schmalen Handy: nur Punkt und Zahl, eng gesetzt - sonst
   ragt die Kopfleiste ueber den Rand (gemessen: 14 px). */
@media (max-width: 520px) {
  .kopfknopf--hoerer {
    padding-left: 7px;
    padding-right: 7px;
    gap: 4px;
    min-width: 0;
  }
  .kopfknopf--hoerer .hoererpunkt { width: 7px; height: 7px; }
}

/* ---- Kopfleiste auf schmalen Handys (ab 1v107) --------------
   Schon ohne Hoerer-Anzeige stand die Kopfleiste bei 360 px
   Breite 11 px ueber den Rand. Etwas engere Abstaende - sonst
   bleibt alles gleich. */
@media (max-width: 420px) {
  .kopf { padding-left: 12px; padding-right: 12px; }
  .kopf__rechts { gap: 6px; }
  .sprachen { gap: 2px; }
  .sprachen > * { padding-left: 5px; padding-right: 5px; }
}

/* Unter 340 px (sehr alte, kleine Handys) ist fuer die Hoerer-
   Anzeige schlicht kein Platz - dort entfaellt sie. */
@media (max-width: 340px) {
  .kopfknopf--hoerer { display: none; }
}

/* ---- Installationshilfe unter die Kopfleiste (ab 1v110) -----
   Sie stand mitten in der Kopfzeile und schob bzw. verdeckte die
   Sprachknoepfe (Annos Bildschirmfoto vom 24.09.2026). Jetzt
   klappt sie UNTER der Leiste auf und nimmt dort keinem Knopf
   den Platz weg. */
.kopf { position: relative; }

.installhilfe {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--rand);
  left: var(--rand);
  margin-left: auto;
  max-width: 420px;
  z-index: 30;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

@media (max-width: 420px) {
  .installhilfe { right: 12px; left: 12px; }
}

/* Knopf, waehrend der Server arbeitet (ab 1v111) */
.knopf.ist-beschaeftigt {
  opacity: 0.65;
  cursor: progress;
}

/* ---- Titelnummer und Reihenfolge-Symbol (ab 1v112) ---------- */
.vorschauzeile__nr {
  display: inline-block;
  min-width: 1.9em;
  margin-right: 7px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--leise, #a49eaa);
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  text-align: center;
  vertical-align: 1px;
}

.rundknopf.reihezeichen { font-size: 1.15rem; }
.rundknopf.reihezeichen.ist-aktiv {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* ---- Ausweg bei leerer Auswahl (ab 1v113) ------------------- */
.leerweg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  max-width: 420px;
  text-align: center;
}
.leerweg[hidden] { display: none; }
.leerweg__wort { color: var(--leise, #a49eaa); font-size: 14px; }

/* ---- Sichtbare Einschraenkung (ab 1v123) --------------------
   Anno hoerte dieselben Lieder im Kreis, weil vier Alben und
   "der Reihe nach" aktiv waren - versteckt in Klappmenues.
   Diese Zeile steht ueber dem Play-Knopf und faellt auf, ohne
   zu schreien: gedaempfter Rahmen in der Akzentfarbe. */
.grenze {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  max-width: 440px;
  padding: 7px 12px;
  text-align: center;
  /* Erst feste Werte (Messing), damit es auch in aelteren
     Browsern richtig aussieht, dann die genaue Mischung. */
  border: 1px solid rgba(200, 148, 74, 0.45);
  border-radius: 10px;
  background: rgba(200, 148, 74, 0.08);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
}
.grenze[hidden] { display: none; }
.grenze__wort {
  color: var(--text, #ece8f0);
  font-size: 13px;
  line-height: 1.35;
}

/* ---- Wahlknoepfe ohne Treffer (ab 1v114) -------------------- */
.wahlknopf.ist-leer:not(.ist-aktiv),
.senderknopf.ist-leer:not(.ist-aktiv) {
  opacity: 0.35;
  cursor: default;
}

.wenighinweis[hidden] { display: none; }

/* ---- Messfassung (ab 1v118) --------------------------------- */
.messzeile {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 14px 0 0;
  opacity: 0.75;
}
.messzeile__wort {
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  color: var(--leise, #a49eaa);
}