/* ══════════════════════════════════════════════════════════════════════
   DIE MUSIKGLOCKE — Knopf in der Kopfleiste und das kleine Menü dahinter
   (Minni, 30.10., mit Entwurf: „kannst du ein Musik icon im Hauptmenü mit
   einem kleinen Menü einbauen?")

   Alles unter .musik-* und .topnav-musik-* gekapselt. Farben ausschliesslich
   ueber die Themevariablen — sonst bleibt das Fenster im Dunkelmodus weiss.
   Laedt NACH style.css, damit die Variablen stehen.
══════════════════════════════════════════════════════════════════════ */

.topnav-musik-wrap { position: relative; display: flex; align-items: center; }

/* Der Knopf. Die Note ist ein Bild, kein Emoji — sie soll ueberall gleich
   aussehen, und auf Windows gibt es fuer sie kein Zeichen. */
.topnav-icon-btn--musik { padding: 4px; }
.topnav-musik-ico {
  /* ⚠️ 19px, nicht 28: Die Nachbarn sind Emoji in einem 36px-Knopf und tragen
     ihren eigenen Rand mit — die Posttaube misst gut 15 px Farbe. Die Note ist
     bis an den Rand beschnitten, 28 px Bild hiessen also 28 px Farbe, und sie
     stach heraus („etwas zu gross im vergleich zum Rest“). */
  width: 19px; height: 19px;
  display: block;
  object-fit: contain;
  transition: transform .15s ease, filter .15s ease;
}
.topnav-icon-btn--musik:hover .topnav-musik-ico { transform: scale(1.08); }

/* Laeuft Musik, bekommt die Note ihren Schein — sonst sieht man dem Knopf
   nicht an, dass gerade etwas spielt. */
.topnav-icon-btn--spielt .topnav-musik-ico {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 70%, transparent));
}

/* ── Das Fenster ───────────────────────────────────────────────────── */
/* Erbt Rahmen, Schatten und das Aufklappen von .topnav-dropdown. */
.musik-panel { width: 318px; padding: 14px; }

.musik-kopf { display: flex; align-items: center; gap: 9px; }
.musik-kopf-bild { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.musik-kopf-titel {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Cinzel', serif;
  /* ⚠️ .86rem, nicht groesser: „Hintergrundmusik“ ist EIN Wort und kann nicht
     umbrechen. Bei .98rem brauchte es 164 px, hatte aber nur 149 — im Fenster
     stand „Hintergrundmusii“, und Fragezeichen und Schalter rutschten hinaus. */
  font-size: .86rem; font-weight: 700; color: var(--text);
  line-height: 1.15;
}

/* Das (?) neben dem Titel: klein, rund, zurueckhaltend. */
.musik-frage {
  flex: 0 0 18px; width: 18px; height: 18px;
  border: 1.5px solid var(--border); border-radius: 50%;
  background: var(--surface2); color: var(--text2);
  font: 700 .62rem/1 'Nunito', sans-serif;
  cursor: pointer; padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.musik-frage:hover { background: var(--gold-l); color: var(--gold); border-color: var(--gold); }
.musik-frage--an { background: var(--gold); color: #fff; border-color: var(--gold); }

/* Die aufgeklappte Erklaerung zum (?). Steht direkt unter dem Titel, damit
   klar ist, wozu sie gehoert. */
.musik-erklaerung {
  margin-top: 10px; padding: 9px 11px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-l);
  font: 400 .7rem/1.4 'Nunito', sans-serif; color: var(--text2);
}
.musik-erklaerung strong { display: block; margin-bottom: 3px; color: var(--text); }

/* Der Schalter. Nachgebaut wie der Hell/Dunkel-Schalter daneben. */
.musik-schalter {
  flex: 0 0 42px; width: 42px; height: 23px;
  border: none; border-radius: 999px; padding: 0;
  background: var(--border); cursor: pointer;
  position: relative; transition: background .15s ease;
}
.musik-schalter--an { background: var(--primary); }
.musik-schalter-knopf {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px #0003;
  transition: transform .15s ease;
}
.musik-schalter--an .musik-schalter-knopf { transform: translateX(19px); }

/* ── Lautstaerke ───────────────────────────────────────────────────── */
.musik-laut { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.musik-laut-ico { font-size: .8rem; flex: 0 0 auto; }
.musik-laut-wert {
  flex: 0 0 38px; text-align: right;
  font: 700 .72rem/1 'Nunito', sans-serif; color: var(--text2);
}
.musik-regler {
  flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 999px; background: var(--border); cursor: pointer;
}
.musik-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px #0003; cursor: pointer;
}
.musik-regler::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px #0003; cursor: pointer;
}

/* ── Die drei Fassungen ────────────────────────────────────────────── */
/* Nebeneinander, gleich breit: Es sind drei Fassungen DESSELBEN Stuecks, da
   soll keine groesser wirken als die andere. */
.musik-stuecke {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 12px;
}
.musik-stueck {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface2); color: var(--text2);
  font-family: 'Nunito', sans-serif; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.musik-stueck:hover { border-color: var(--primary); color: var(--primary); }
.musik-stueck--an {
  border-color: var(--primary); background: var(--primary-l); color: var(--primary);
}
.musik-stueck-ico { font-size: .85rem; line-height: 1; }
.musik-stueck-name { font-size: .68rem; font-weight: 800; white-space: nowrap; }

.musik-fuss {
  margin: 10px 0 0;
  font: 400 .66rem/1.35 'Nunito', sans-serif; color: var(--text3);
}

/* ── Im Fenster auf dem Handy ──────────────────────────────────────── */
/* Dort traegt das allgemeine Fenster schon Rahmen und Polster. */
.musik-panel--modal { width: auto; padding: 0; }
.musik-panel--modal .musik-stueck { padding: 12px 4px; }
/* ⚠️ Im Fenster steht „Hintergrundmusik“ schon in der Fensterleiste — ein
   zweites Mal direkt darunter liest sich wie ein Fehler. Die Note bleibt,
   Fragezeichen und Schalter ruecken nach rechts. */
.musik-panel--modal .musik-kopf-titel { display: none; }
.musik-panel--modal .musik-kopf-bild { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .topnav-musik-ico, .musik-schalter, .musik-schalter-knopf { transition: none; }
}