/* =====================================================================
   Chor-App — Aussehen
   Dieselben Farben und Schriften wie im Klickdummy.
   Hell und dunkel, je nach Einstellung des Geräts.
   ===================================================================== */

:root {
  --grund:#F3F5F8; --flaeche:#FFFFFF; --flaeche-2:#EDF0F5; --flaeche-3:#E3E8EF;
  --tinte:#16202B; --leise:#5B6774; --linie:#DCE2EA; --linie-stark:#C3CCD8;
  --hauptfarbe:#2B4A6F; --auf-hauptfarbe:#FFFFFF; --akzent:#8A6D1F;
  --blau:#2B4A6F; --gruen:#3F6B52; --rot:#7A3E3E; --gold:#8A6D1F; --lila:#5C3D7A;
  --schatten:0 1px 2px rgba(22,32,43,.06), 0 10px 30px rgba(22,32,43,.07);
  /* Schriften, die auf dem Gerät schon da sind — kein Nachladen von
     fremden Servern. Reihenfolge: Windows, macOS/iOS, Android, Rest. */
  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund:#10151B; --flaeche:#192028; --flaeche-2:#212A34; --flaeche-3:#2A3540;
    --tinte:#E7ECF2; --leise:#97A3B1; --linie:#2B3540; --linie-stark:#3C4855;
    --hauptfarbe:#7FA8D8; --auf-hauptfarbe:#10151B; --akzent:#D9B658;
    --blau:#7FA8D8; --gruen:#74BC93; --rot:#D08B8B; --gold:#D9B658; --lila:#AE8FD3;
    --schatten:0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--grund); color:var(--tinte);
  font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; }
a { color:var(--hauptfarbe); }

.app { min-height:100%; display:flex; flex-direction:column; }
/* Nur dieser Kasten wird beim Bildschirmwechsel ausgetauscht. Alles
   darunter — das Tonelement und die Leiste — bleibt stehen. */
.bild { flex:1; display:flex; flex-direction:column; min-height:0; }
.laedt { margin:auto; color:var(--leise); font-family:var(--mono); font-size:13px; }

/* ---------------------------------------------------------- Anmeldung */
.anmeldung {
  margin:auto; width:100%; max-width:400px; padding:32px 24px 60px;
  display:flex; flex-direction:column; gap:18px;
}
.anmeldung h1 {
  font-family:var(--serif); font-size:34px; font-weight:700;
  line-height:1.1; margin:0; letter-spacing:-.015em;
}
.anmeldung .unter { color:var(--leise); margin:0; font-size:15px; }
.feld { display:flex; flex-direction:column; gap:6px; }
.feld label { font-size:13.5px; color:var(--leise); }
.feld input {
  border:1px solid var(--linie-stark); background:var(--flaeche);
  color:var(--tinte); border-radius:4px; padding:11px 13px; font:inherit; font-size:15px;
}
.feld input:focus { outline:2px solid var(--akzent); outline-offset:1px; border-color:var(--hauptfarbe); }
.knopf {
  border:1px solid var(--hauptfarbe); background:var(--hauptfarbe); color:var(--auf-hauptfarbe);
  border-radius:4px; padding:11px 18px; font-weight:500; cursor:pointer; transition:.15s;
}
.knopf:hover:not(:disabled) { filter:brightness(1.08); }
.knopf:disabled { opacity:.55; cursor:default; }
.knopf-still {
  background:var(--flaeche); color:var(--tinte); border-color:var(--linie-stark);
}
.knopf-klein { padding:5px 11px; font-size:13px; }
.meldung {
  border-left:3px solid var(--rot); background:var(--flaeche);
  padding:11px 14px; border-radius:0 4px 4px 0; font-size:14px; color:var(--tinte);
}
.hinweis { font-size:12.5px; color:var(--leise); }

/* ------------------------------------------------------------ Kopfzeile */
.kopf {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  padding:12px 18px; border-bottom:1px solid var(--linie);
  background:var(--flaeche-2); position:sticky; top:0; z-index:5;
}
.kopf-mitte { min-width:0; flex:1 1 auto; }
.kopf-titel {
  font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kopf-unter { font-size:12px; color:var(--leise); }
.kopf-rechts { display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.marke {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  border:1px solid var(--linie-stark); border-radius:20px; padding:3px 10px; color:var(--leise);
}

/* -------------------------------------------------------------- Inhalt */
.inhalt { padding:18px; display:flex; flex-direction:column; gap:18px; flex:1; }
.raster { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }

.suche {
  display:flex; align-items:center; gap:9px;
  background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:4px; padding:9px 12px;
}
.suche input { flex:1; border:0; background:transparent; font:inherit; font-size:14px; color:var(--tinte); outline:none; }
.suche svg { flex:none; opacity:.55; }

.spalte-filter { display:flex; flex-direction:column; gap:12px; }
.spalte-filter h4 {
  margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--leise); font-weight:500;
}
.marken { display:flex; flex-wrap:wrap; gap:6px; }
.stichwort {
  font-size:12.5px; border:1px solid var(--linie-stark); background:var(--flaeche);
  border-radius:20px; padding:3px 11px; cursor:pointer; color:var(--leise); transition:.15s;
}
.stichwort:hover { border-color:var(--akzent); color:var(--tinte); }
.stichwort[aria-pressed="true"] { background:var(--akzent); border-color:var(--akzent); color:var(--auf-hauptfarbe); }
.stichwort-fest { cursor:default; font-size:11.5px; padding:2px 9px; }

.zaehler { font-size:12.5px; color:var(--leise); }
.lieder { display:flex; flex-direction:column; }
.lied {
  display:grid; grid-template-columns:1fr; gap:5px; text-align:left; width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--linie);
  padding:13px 4px; cursor:pointer; transition:background .12s;
}
.lied:hover { background:var(--flaeche-2); }
.lied:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
.lied-haupt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.lied-titel { font-family:var(--serif); font-size:17.5px; font-weight:600; line-height:1.25; }
.lied-nr { font-family:var(--mono); font-size:12.5px; color:var(--leise); margin-right:7px; }
.lied-unter { font-size:12.5px; color:var(--leise); }
.lied-tonart { font-family:var(--mono); font-size:12px; color:var(--blau); }
.lied-marken { display:flex; flex-wrap:wrap; gap:5px; }
.lied-mehr { font-family:var(--mono); font-size:11px; color:var(--leise); }
.leer { padding:28px 4px; color:var(--leise); font-size:14px; }

/* --------------------------------------------------- Ab 640 px zweispaltig */
@container (min-width: 640px) { }
@media (min-width: 720px) {
  .kopf { padding:14px 30px; }
  .inhalt { padding:24px 30px; gap:22px; }
  .raster { grid-template-columns:250px 1fr; gap:34px; }
  .lied { grid-template-columns:minmax(0,2.1fr) minmax(0,1.5fr) 150px; align-items:center; gap:18px; padding:15px 6px; }
  .lied-mehr { text-align:right; }
}

/* ===================================================== Liedansicht ===== */
.lesen { display:flex; flex-direction:column; gap:20px; }
.l-text { order:2; } .p-oben { order:1; } .p-unten { order:3; }

.panel { display:flex; flex-direction:column; gap:16px; }
.pgruppe { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pgruppe h4 {
  margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--leise); font-weight:500;
}
.wahlreihe { display:flex; flex-wrap:wrap; gap:6px; }
.wahl {
  border:1px solid var(--linie-stark); background:var(--flaeche); border-radius:3px;
  padding:7px 14px; font-size:13.5px; cursor:pointer; transition:.15s;
}
.wahl:hover { border-color:var(--hauptfarbe); }
.wahl[aria-pressed="true"] {
  background:var(--hauptfarbe); border-color:var(--hauptfarbe); color:var(--auf-hauptfarbe);
}
.schalterzeile {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:13.5px; padding:2px 0; width:100%;
}
.schalter {
  width:38px; height:22px; border-radius:11px; border:1px solid var(--linie-stark);
  background:var(--flaeche-2); position:relative; cursor:pointer; flex:none; transition:.15s;
}
.schalter::after {
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--linie-stark); transition:.15s;
}
.schalter[aria-pressed="true"] { background:var(--hauptfarbe); border-color:var(--hauptfarbe); }
.schalter[aria-pressed="true"]::after { left:18px; background:var(--auf-hauptfarbe); }

.stufen { display:flex; align-items:center; gap:8px; }
.stufen button {
  width:30px; height:30px; border:1px solid var(--linie-stark); background:var(--flaeche);
  border-radius:3px; cursor:pointer; font-family:var(--mono);
}
.stufen .val {
  font-family:var(--mono); font-size:12.5px; color:var(--leise);
  min-width:96px; text-align:center;
}

.angaben {
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:4px;
  padding:12px 14px; display:flex; flex-direction:column; gap:6px; width:100%;
}
.angabe { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.angabe span:first-child { color:var(--leise); }
.verweis { font-size:13.5px; text-decoration:none; border-bottom:1px solid var(--linie-stark); }
.verweis:hover { border-bottom-color:var(--hauptfarbe); }
.hinweis-fein { font-size:13px; color:var(--leise); }

/* --------------------------------------------- Der Liedtext selbst ---- */
.sheet { display:flex; flex-direction:column; gap:26px; }
.block { display:flex; flex-direction:column; gap:3px; }
.block-marke {
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--leise);
}
.geraten, .wdh {
  border:1px solid var(--linie-stark); border-radius:20px; padding:1px 8px;
  letter-spacing:.04em; text-transform:none; font-size:10px;
}
.geraten { color:var(--gold); border-color:var(--gold); }

.zeile { position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 9px; }
.wort { display:flex; flex-direction:column; position:relative; }
.faecher { display:flex; flex-direction:column; gap:1px; }
.wort-text { font-family:var(--serif); font-size:20px; line-height:1.5; padding:0 2px; }
.notiz {
  font-family:var(--mono); font-size:12px; font-weight:500; line-height:1.3;
  white-space:nowrap; padding:0 2px;
}
.notiz.akkord { color:var(--blau); }
.notiz.einsatz { color:var(--rot); }
.notiz.hinweis { color:var(--gruen); font-style:italic; }
.notiz.kommentar { color:var(--gold); }

.legende {
  display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:24px;
  font-family:var(--mono); font-size:11px; color:var(--leise);
}
.legende span::before {
  content:""; display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-right:6px; background:currentColor; vertical-align:1px;
}

/* ======================================================== Playback ===== */
.spielraster { display:grid; grid-template-columns:1fr; gap:22px; }
.spielspalte { display:flex; flex-direction:column; gap:18px; }
.jetzt { display:flex; flex-direction:column; gap:6px; }
.jetzt-titel { font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.15; }
.jetzt-unter { font-size:13px; color:var(--leise); }
.bahn { position:relative; height:6px; border-radius:3px; background:var(--flaeche-3); cursor:pointer; }
.bahn .fill { position:absolute; inset:0 auto 0 0; background:var(--rot); border-radius:3px; }
.zeiten {
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--mono); font-size:11.5px; color:var(--leise);
}
.transport { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.transport .gross {
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--hauptfarbe); color:var(--auf-hauptfarbe); font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.transport .klein {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--linie-stark);
  background:var(--flaeche); cursor:pointer; font-family:var(--mono); font-size:11px;
}
.reglerzeile { display:flex; flex-direction:column; gap:5px; width:100%; }
.reglerzeile label { display:flex; justify-content:space-between; font-size:13px; }
.reglerzeile label b { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--leise); }
input[type=range] { width:100%; accent-color:var(--hauptfarbe); }

/* ============================== Die mitlaufende Wiedergabe-Leiste ===== */
.bar {
  position:sticky; bottom:0; z-index:8; margin-top:auto;
  background:var(--flaeche-2); border-top:1px solid var(--linie-stark);
  cursor:pointer; user-select:none;
}
.bar-prog { height:3px; background:var(--flaeche-3); }
.bar-prog i { display:block; height:100%; width:0; background:var(--rot); }
.bar-inner { display:flex; align-items:center; gap:12px; padding:10px 14px; }
.bar-play {
  flex:none; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--hauptfarbe); color:var(--auf-hauptfarbe); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.bar-txt { min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.bar-txt b {
  font-family:var(--serif); font-size:15px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar-txt span { font-family:var(--mono); font-size:11px; color:var(--leise); }
.bar-mid { display:none; }
.bar-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.bar-open { font-family:var(--mono); font-size:11px; color:var(--leise); }
.bar-close {
  border:0; background:transparent; color:var(--leise); font-size:19px;
  line-height:1; cursor:pointer; padding:0 4px;
}
.bar-close:hover { color:var(--rot); }
/* Solange die Leiste steht, darf sie die letzte Textzeile nicht verdecken. */
.app:has(.bar:not([hidden])) .inhalt { padding-bottom:84px; }

/* --------------------------------------------------- Ab 720 px breiter */
@media (min-width: 720px) {
  /* Zwei Reihen: oben so hoch wie der obere Kasten, unten der Rest.
     Sonst rutscht der untere Kasten in die Mitte der Seite. */
  .lesen {
    display:grid; grid-template-columns:minmax(0,1fr) 268px;
    grid-template-rows:auto 1fr;
    column-gap:40px; row-gap:22px; align-items:start;
  }
  .l-text  { grid-column:1; grid-row:1 / span 2; }
  .p-oben  { grid-column:2; grid-row:1; }
  .p-unten { grid-column:2; grid-row:2; }
  .wort-text { font-size:23px; }
  .spielraster { grid-template-columns:minmax(0,1fr) 330px; gap:44px; align-items:start; }
  .jetzt-titel { font-size:34px; }
  .bar-inner { padding:11px 30px; gap:18px; }
  .bar-txt { flex:0 0 240px; }
  .bar-mid { display:flex; flex:1; align-items:center; justify-content:flex-end; min-width:0; }
  .bar-mid .zeit { font-family:var(--mono); font-size:11.5px; color:var(--leise); }
}

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }