/* Wunschkonzert · Projektschicht über dem stuv-CI-Paket (static/stuv-ci/css/stuv.css).
   Alle Ansichten laufen im App-Stil (body.stuv-app, Muster PLEITE, wie stuv Tix):
   nur Inter, selbst gehostet – an einer Uni bleibt so jede IP-Adresse im Haus.
   Hier steht nur, was das Paket nicht mitbringt: Fußzeile, Sprachwahl,
   Trefferzeilen mit Cover und Hörprobe, die Strichliste der Rangliste, der
   Kontingent-Balken, der Fließtext der Rechtstexte. Ausschließlich Tokens des
   Pakets (--stuv-*), keine eigenen Farben, Radien oder Schriftgrößen.
   Projekt-Eigenes trägt das Präfix wk-. Kein Grün. */

/* ── Seite ───────────────────────────────────────────────────────────────── */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#view-app { display: contents; }
body > main, #view-app > main { flex: 1 0 auto; min-width: 0; width: 100%; box-sizing: border-box; }
.stuv-app main.stuv-inhalt-app { align-content: start; }
/* Suche, Liste, Rangliste: 62 rem reichen */
.stuv-app .stuv-inhalt-app { max-width: calc(62rem + 2 * var(--stuv-s6)); padding-bottom: var(--stuv-s10); }
.stuv-app .stuv-anmeldung .stuv-karte { width: 100%; box-sizing: border-box; }
.stuv-app .stuv-karte p, .stuv-app .stuv-meldung { line-height: 1.5; }
.stuv-app .stuv-meldung, .stuv-app .stuv-meldungen { margin: 0; }

/* ── Kopfzeile und Sprachwahl ────────────────────────────────────────────── */
.wk-wer { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.stuv-app .stuv-kopf-rechts button.stuv-knopf--leise { white-space: nowrap; }
.stuv-app .stuv-seite-kopf h1 { overflow-wrap: anywhere; }
/* DE/EN als zwei kleine Knöpfe, der aktive als Umschalter (--aktiv, setzt i18n.js) */
.lang-switch { display: inline-flex; gap: var(--stuv-s1); }
/* Auf der Anmeldeseite hängt die Wahl oben rechts über dem Logo */
.lang-switch--page { display: flex; justify-content: flex-end; }

/* ── Fußzeile ────────────────────────────────────────────────────────────── */
.wk-fuss { max-width: var(--stuv-app-breite); margin: 0 auto; padding: 0 var(--stuv-s6) var(--stuv-s8); width: 100%; box-sizing: border-box;
           font-size: var(--stuv-app-klein); color: var(--stuv-text-2); display: grid; gap: var(--stuv-s2); }
.wk-fuss nav { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.wk-fuss a { color: var(--stuv-text-2); }
.wk-fuss p { margin: 0; }
@media (max-width: 640px) { .wk-fuss { padding: 0 var(--stuv-s4) var(--stuv-s6); } }

/* ── Kontingent ──────────────────────────────────────────────────────────── */
.wk-kontingent .stuv-balken { margin-top: var(--stuv-s2); }
.wk-kontingent .stuv-balken > div { transition: width var(--stuv-dauer-kurz); }

/* ── Treffer und eigene Wünsche: Zeilen in einer Karte ───────────────────── */
.wk-liste { list-style: none; margin: 0; padding: 0; }
.wk-liste:empty { display: none; }
.wk-zeile { display: flex; align-items: center; gap: var(--stuv-s3); padding: var(--stuv-s3) 0; border-top: 1px solid var(--stuv-linie); min-width: 0; }
.wk-meta { flex: 1 1 auto; min-width: 0; }
.wk-titel { font-weight: 600; }
.wk-sub { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); }
.wk-id { font-size: var(--stuv-app-klein); color: var(--stuv-text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-cover { width: 44px; height: 44px; object-fit: cover; border-radius: var(--stuv-r-feld); flex: none; background: var(--stuv-linie-leicht); }
.wk-audio { max-width: 11rem; height: var(--stuv-app-hoehe); flex: none; }
.wk-zeile .stuv-chip, .wk-zeile .stuv-knopf { flex: none; }
/* Zahl der Wünsche und Knopf eines Treffers als Einheit */
.wk-aktion { display: flex; align-items: center; gap: var(--stuv-s2); flex: none; }
/* Streichen/Sperren nie primär: leise, rot, ganz rechts */
.stuv-app .stuv-knopf--gefahr, .stuv-app button.stuv-knopf--gefahr { color: var(--stuv-negativ); }
.stuv-app .stuv-knopf--gefahr:hover, .stuv-app button.stuv-knopf--gefahr:hover { background: var(--stuv-akzent-heller); }

/* ── Rangliste und Titelverwaltung ───────────────────────────────────────── */
.stuv-tabelle tr.is-played td { color: var(--stuv-text-3); }
.stuv-tabelle td .stuv-chip { margin-top: var(--stuv-s1); }
.stuv-tabelle td .stuv-chip + .stuv-chip { margin-left: var(--stuv-s1); }
.tally { color: var(--stuv-akzent); vertical-align: middle; margin-right: var(--stuv-s2); }
tr.is-played .tally { color: var(--stuv-text-4); }
.wk-anzahl { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); font-variant-numeric: tabular-nums; }
.stuv-tabelle td.stuv-aktion .stuv-knopf + .stuv-knopf { margin-left: var(--stuv-s1); }
/* Titelverwaltung: Titel nicht umbrechen, die Tabelle scrollt seitlich (Paket) */
#admin-songs .wk-titel, #admin-songs td.stuv-nr, #admin-songs td.stuv-zahl { white-space: nowrap; }
#admin-songs td.wk-sub { min-width: 16rem; }

/* ── Impressum und Datenschutz: Fließtext in einer Karte ─────────────────── */
.wk-text { --zeile: min(70ch, 100%); line-height: 1.6; }
.wk-text h1 { margin: 0 0 var(--stuv-s4); }
.wk-text p, .wk-text ul, .wk-text .stuv-tabelle { margin: 0 0 var(--stuv-s4); max-width: var(--zeile); }
.wk-text .stuv-tabelle { max-width: none; }
.wk-text h2 { margin: var(--stuv-s8) 0 var(--stuv-s3); }
.wk-text > :first-child { margin-top: 0; }
.wk-text > :last-child { margin-bottom: 0; }
.wk-text > * { overflow-wrap: break-word; }
.wk-text a { overflow-wrap: anywhere; text-decoration: underline; }
.wk-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--stuv-app-klein);
                background: var(--stuv-linie-leicht); border-radius: var(--stuv-r-chip); padding: 0 var(--stuv-s1); }
.wk-text .stuv-tabelle td:last-child { white-space: nowrap; color: var(--stuv-text-2); }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wk-zeile { flex-wrap: wrap; }
  .wk-audio { order: 3; flex: 1 1 100%; max-width: 100%; }
  .stuv-app .stuv-werkzeuge > select, .stuv-app .stuv-werkzeuge > .stuv-knopf { flex: 1 1 auto; }
  .stuv-app .stuv-werkzeuge .stuv-suche { flex-basis: 100%; max-width: none; }
  .stuv-app .stuv-aktionen > * { flex: 1 1 auto; }
  .wk-wer { max-width: 30vw; }
  .wk-text .stuv-tabelle td:last-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }