/* Musik-API — Oberflaeche.
 *
 * Regel dieser Datei: KEIN eigenes #hex, kein rgb(), kein frei erfundener
 * px-Wert. Farbe, Abstand, Radius, Schriftgroesse, Schatten und Dauer kommen
 * ausschliesslich als var(--...) aus tokens.css. Erlaubt sind daneben nur
 * 0, 1fr, %, auto, 100vh, transparent, currentColor, Grid-/Flex-Zahlen,
 * z-index und opacity.
 *
 * tokens.css wird NICHT von hier importiert — das index.html laedt sie zuerst.
 */

/* ------------------------------------------------------------------ Grundlage */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-schrift);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-normal);
  line-height: var(--zeilenhoehe-normal);
}

/* Das hidden-Attribut ist der einzige Schalter fuer Sichtbarkeit. Es muss die
   display-Angaben der Klassen unten schlagen, sonst bliebe Verstecktes stehen. */
[hidden] {
  display: none !important; /* schlaegt display:flex/grid der Klassen — Sichtbarkeit haengt allein am Attribut */
}

:focus-visible {
  outline: var(--rand-staerke) solid var(--farbe-akzent);
  outline-offset: var(--abstand-1);
}

.nur-leser {
  position: absolute;
  width: var(--rand-staerke);
  height: var(--rand-staerke);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.versteckt {
  display: none;
}

.start-zeile {
  margin: 0;
  padding: var(--abstand-7);
  text-align: center;
  color: var(--farbe-schrift-still);
}

/* ----------------------------------------------------------------- Bedienteile */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--hoehe-bedien);
  padding: 0 var(--abstand-4);
  border: var(--rand-staerke) solid var(--farbe-rand-stark);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
  color: var(--farbe-schrift);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-normal);
  font-weight: var(--schrift-gewicht-halb);
  line-height: var(--zeilenhoehe-eng);
  text-align: center;
  cursor: pointer;
  transition:
    background var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve),
    color var(--dauer-kurz) var(--kurve);
}

.knopf:hover:not(:disabled) {
  background: var(--farbe-flaeche-hoch);
  border-color: var(--farbe-schrift-still);
}

.knopf:disabled {
  opacity: 0.6;
  cursor: default;
}

.knopf-haupt {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-schrift);
  font-weight: var(--schrift-gewicht-fett);
}

.knopf-haupt:hover:not(:disabled) {
  background: var(--farbe-akzent-hoch);
  border-color: var(--farbe-akzent-hoch);
  color: var(--farbe-akzent-schrift);
}

.knopf-voll {
  width: 100%;
}

.knopf-klein {
  min-height: auto;
  padding: var(--abstand-1) var(--abstand-3);
  font-size: var(--schrift-klein);
}

/* Loeschen. Rot wie jede andere Fehlermeldung dieser Oberflaeche — der Owner
   soll den Knopf nicht mit "Zurückholen" verwechseln. */
.knopf-gefahr {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-grund);
  color: var(--farbe-fehler);
}

.knopf-gefahr:hover:not(:disabled) {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler);
  color: var(--farbe-akzent-schrift);
}

.knopf-filter[aria-pressed="true"] {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-schrift);
}

.eingabe {
  width: 100%;
  min-height: var(--hoehe-bedien);
  padding: 0 var(--abstand-3);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-grund-2);
  color: var(--farbe-schrift);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-normal);
}

.eingabe::placeholder {
  color: var(--farbe-schrift-still);
}

.eingabe:focus {
  border-color: var(--farbe-akzent);
}

.eingabe:disabled {
  opacity: 0.6;
}

/* ------------------------------------------------------ Ansicht A — Anmelden */

.mitte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--abstand-5);
}

.karte {
  width: 100%;
  max-width: var(--breite-schmal);
  padding: var(--abstand-6);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-3);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-3);
}

.karte-titel {
  margin: 0;
  font-size: var(--schrift-kopf);
  font-weight: var(--schrift-gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
}

.karte-unter {
  margin: var(--abstand-2) 0 var(--abstand-5);
  color: var(--farbe-schrift-leise);
}

.feld {
  margin-bottom: var(--abstand-4);
}

.etikett-feld {
  display: block;
  margin-bottom: var(--abstand-1);
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
}

.meldung {
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-3);
  border: var(--rand-staerke) solid var(--farbe-fehler);
  border-radius: var(--radius-2);
  background: var(--farbe-fehler-grund);
  color: var(--farbe-fehler);
  font-size: var(--schrift-normal);
}

/* ------------------------------------------------------ Ansicht B — Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: var(--rand-staerke) solid var(--farbe-rand);
  background: var(--farbe-grund-2);
  box-shadow: var(--schatten-1);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-3) var(--abstand-5);
}

.marke {
  font-size: var(--schrift-titel);
  font-weight: var(--schrift-gewicht-fett);
}

.kopf-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-3);
}

.benutzer {
  color: var(--farbe-schrift-leise);
  font-size: var(--schrift-normal);
}

.inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-5);
}

/* Abschnitt in der Inhaltsspalte. min-width verhindert, dass die scrollbare
   Tabelle den Flex-Kasten aufzieht. */
.block {
  min-width: 0;
}

.block-titel {
  margin: 0;
  font-size: var(--schrift-titel);
  font-weight: var(--schrift-gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
}

.reihe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}

.hinweis {
  margin: var(--abstand-3) 0 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-still);
  line-height: var(--zeilenhoehe-normal);
}

.hinweis-warn {
  color: var(--farbe-warn);
}

/* ---------------------------------------------------------------- Zahlenreihe */

.zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}

.zahl-feld {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  min-width: 0;
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}

.zahl-wert {
  font-family: var(--schrift-zahl);
  font-size: var(--schrift-titel);
  font-weight: var(--schrift-gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
}

.zahl-etikett {
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
  line-height: var(--zeilenhoehe-eng);
}

/* --------------------------------------------------------------- Ablagefeld */

.ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-4);
  padding: var(--abstand-7) var(--abstand-5);
  border: var(--rand-staerke) dashed var(--farbe-rand-stark);
  border-radius: var(--radius-3);
  background: var(--farbe-grund-2);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--dauer-kurz) var(--kurve),
    background var(--dauer-kurz) var(--kurve);
}

.ablage.ist-aktiv {
  border-color: var(--farbe-ablage-rand);
  background: var(--farbe-ablage-grund);
}

.ablage-text {
  margin: 0;
  font-size: var(--schrift-gross);
  color: var(--farbe-schrift-leise);
}

/* ------------------------------------------------------------- Warteschlange */

.wl-summe {
  font-size: var(--schrift-normal);
  color: var(--farbe-schrift-leise);
}

.warteschlange {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-zeile {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}

.wl-oben {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-2);
}

.wl-name {
  font-weight: var(--schrift-gewicht-halb);
  word-break: break-all;
}

.wl-groesse {
  font-family: var(--schrift-zahl);
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-still);
  white-space: nowrap;
}

.wl-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}

.wl-text {
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
  word-break: break-word;
}

.wl-zeile.ist-gut .wl-text {
  color: var(--farbe-gut);
}

.wl-zeile.ist-fehler .wl-text {
  color: var(--farbe-fehler);
}

.balken {
  overflow: hidden;
  height: var(--hoehe-balken);
  border-radius: var(--radius-rund);
  background: var(--farbe-balken-grund);
}

.balken-fuellung {
  width: 0;
  height: 100%;
  border-radius: var(--radius-rund);
  background: var(--farbe-balken);
  transition: width var(--dauer-normal) var(--kurve);
}

.wl-zeile.ist-gut .balken-fuellung {
  background: var(--farbe-gut);
}

.wl-zeile.ist-fehler .balken-fuellung {
  background: var(--farbe-fehler);
}

/* ------------------------------------------------------------------ Etiketten */

.etikett {
  display: inline-block;
  padding: var(--abstand-1) var(--abstand-2);
  border: var(--rand-staerke) solid transparent;
  border-radius: var(--radius-rund);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-eng);
  white-space: nowrap;
}

.etikett-leise {
  border-color: var(--farbe-rand);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-schrift-leise);
}

.etikett-gut {
  border-color: var(--farbe-gut);
  background: var(--farbe-gut-grund);
  color: var(--farbe-gut);
}

.etikett-warn {
  border-color: var(--farbe-warn);
  background: var(--farbe-warn-grund);
  color: var(--farbe-warn);
}

.etikett-fehler {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-grund);
  color: var(--farbe-fehler);
}

/* --------------------------------------------------------------- Bestand */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

.eingabe-suche {
  max-width: var(--breite-schmal);
}

.zustand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-3);
  padding: var(--abstand-5);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-grund-2);
  color: var(--farbe-schrift-leise);
  font-size: var(--schrift-normal);
  text-align: center;
}

/* Unter etwa 800 px hat die Tabelle keinen Platz mehr: sie bleibt hier immer
   waagerecht scrollbar, so braucht es keinen erfundenen Umbruchpunkt. */
.tabelle-huelle {
  overflow-x: auto;
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-normal);
}

.tabelle th {
  padding: var(--abstand-3);
  border-bottom: var(--rand-staerke) solid var(--farbe-rand);
  background: var(--farbe-grund-2);
  color: var(--farbe-schrift-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--schrift-gewicht-halb);
  text-align: left;
  white-space: nowrap;
}

.tabelle td {
  padding: var(--abstand-2) var(--abstand-3);
  border-bottom: var(--rand-staerke) solid var(--farbe-rand);
  vertical-align: middle;
}

.tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.tabelle tbody tr:hover {
  background: var(--farbe-grund-2);
}

.sp-bild {
  width: var(--groesse-bild);
}

.sp-zahl {
  font-family: var(--schrift-zahl);
  text-align: right;
  white-space: nowrap;
}

.sp-text {
  white-space: nowrap;
}

.leer-wert {
  color: var(--farbe-schrift-still);
}

.bild,
.bild-leer {
  width: var(--groesse-bild);
  height: var(--groesse-bild);
  border-radius: var(--radius-1);
  background: var(--farbe-flaeche-hoch);
}

.bild {
  display: block;
  object-fit: cover;
}

.bild-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-schrift-still);
  font-size: var(--schrift-gross);
}

.titel-zelle {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  align-items: flex-start;
}

.titel-haupt {
  font-weight: var(--schrift-gewicht-halb);
  line-height: var(--zeilenhoehe-eng);
}

.titel-neben {
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
  line-height: var(--zeilenhoehe-eng);
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-4);
}

.blaettern-text {
  font-family: var(--schrift-zahl);
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
}

/* Die Spalte mit dem Loeschknopf: so schmal wie noetig, rechtsbuendig. */
.sp-tat {
  width: 0;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------- Papierkorb */

.korb-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.korb-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}

.korb-links {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  min-width: 0;
}

.korb-titel {
  font-weight: var(--schrift-gewicht-halb);
  line-height: var(--zeilenhoehe-eng);
}

.korb-pfad {
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-leise);
  word-break: break-all;
}

.korb-zeit {
  font-size: var(--schrift-klein);
  color: var(--farbe-schrift-still);
}

.korb-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}

/* -------------------------------------------------- Rueckfrage vor Loeschen */

.schleier {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-5);
  background: var(--farbe-schleier);
}

.dialog {
  width: 100%;
  max-width: var(--breite-dialog);
  padding: var(--abstand-5);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-3);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-3);
}

.dialog-titel {
  margin: 0;
  font-size: var(--schrift-titel);
  font-weight: var(--schrift-gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
}

.dialog-text {
  margin: var(--abstand-3) 0 var(--abstand-5);
  color: var(--farbe-schrift-leise);
  /* Der Text wird aus Titel, Ablagepfad und Erklaerung zusammengesetzt und mit
     Zeilenumbruechen getrennt. Ohne pre-line liefe alles in eine Zeile. */
  white-space: pre-line;
  word-break: break-word;
}

.dialog-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--abstand-3);
}

/* -------------------------------------------------------- Doppel-Verdacht */

.gruppe {
  margin-top: var(--abstand-3);
  padding: var(--abstand-4);
  border: var(--rand-staerke) solid var(--farbe-rand);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}

.gruppe-grund {
  margin: 0 0 var(--abstand-3);
  color: var(--farbe-warn);
  font-weight: var(--schrift-gewicht-halb);
}

.gruppe-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gruppe-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-1);
  background: var(--farbe-grund-2);
  font-size: var(--schrift-klein);
}

.gruppe-titel {
  font-weight: var(--schrift-gewicht-halb);
}

.gruppe-pfad {
  color: var(--farbe-schrift-leise);
  word-break: break-all;
}

.gruppe-dauer {
  font-family: var(--schrift-zahl);
  color: var(--farbe-schrift-still);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Bewegung */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important; /* Vorgabe: Bewegung aus — muss jede Uebergangsregel oben schlagen */
    animation: none !important; /* Vorgabe: Bewegung aus — muss jede Animationsregel oben schlagen */
    scroll-behavior: auto !important; /* Vorgabe: Bewegung aus — auch weiches Scrollen faellt weg */
  }
}