/* Lad — ruhige, dunkle Oberfläche; die Noten liegen auf hellem Papier, weil alphaTab schwarz auf weiß zeichnet */

:root {
  --grund: #15171b;
  --flaeche: #1d2026;
  --flaeche-hoch: #262a31;
  --linie: #333842;
  --text: #e6e8eb;
  --leise: #8f96a3;
  --akzent: #e08a4f;          /* später auch Grundton am Griffbrett */
  --akzent-text: #1a1206;
  --fehler: #e2725b;
  --papier: #fbfaf7;
  --radius: 10px;
  --rand: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* sonst schlägt ein display der Klasse das hidden-Attribut */
body { margin: 0; min-height: 100dvh; background: var(--grund); }
button { font: inherit; color: inherit; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;   /* über dem Griffbrett (10): die Aufklapper des Kopfs ragen bis darüber */
  display: flex; align-items: center; gap: var(--rand);
  padding: 10px var(--rand);
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 650; font-size: 1.25rem; letter-spacing: .02em; color: var(--akzent); }
/* Reiter Stück | Übung: der aktive hell, fett, orange unterstrichen — man sieht sofort, wo man ist */
.modi { display: flex; gap: 4px; }
.modi__reiter { border: 0; background: none; padding: 4px 10px 5px; cursor: pointer; font-size: 1.1rem; color: var(--leise);
  border-bottom: 2px solid transparent; }
.modi__reiter:hover { color: var(--text); }
.modi__reiter.is-active { color: var(--text); font-weight: 650; border-bottom-color: var(--akzent); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.knopf {
  border: 1px solid var(--linie); background: var(--flaeche-hoch);
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.knopf:hover { border-color: var(--leise); }
.knopf--haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; font-weight: 600; padding: 10px 20px; }
.knopf--haupt:hover { filter: brightness(1.08); border-color: transparent; }

/* A− / A+: Größe der Noten */
.groesse { display: flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.groesse button { border: 0; background: transparent; padding: 6px 8px; cursor: pointer; color: var(--text); font-size: .85rem; }
.groesse button:hover { background: var(--flaeche-hoch); }
.groesse button + button { border-left: 1px solid var(--linie); }

/* Ausklappmenüs (Sprache, Tonleiter, Tonnamen) */
.wahl {
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); padding: 6px 8px; border-radius: 8px;
  font: inherit; font-size: .9rem; cursor: pointer;
}
.wahl:hover { border-color: var(--leise); }
.wahl:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Aufklapper (Einstellungen, Wiedergabe): Knopf mit kleinem Fenster darunter, ein Klick daneben schließt (app.js) */
.aufklapp { position: relative; }
.aufklapp summary { list-style: none; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp__knopf { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aufklapp__fenster { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 8px; min-width: 21rem;
  padding: 10px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.aufklapp__fenster--rechts { left: auto; right: 0; }
.aufklapp__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: nowrap; }
.aufklapp__ueber { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--leise); }
.aufklapp__regler { display: flex; align-items: center; gap: 8px; }
.aufklapp__regler input { width: 220px; accent-color: var(--akzent); }
.aufklapp__wert { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.einst__knopf { padding: 7px 11px; }

/* Spieler: zweite Zeile im Kopf, bleibt beim Scrollen stehen — links die Leiste, rechts das Pult (ab zwei Spuren) */
.kopf { flex-wrap: wrap; row-gap: 8px; }
.spieler { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.leiste { flex: 0 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.leiste__trenner { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--linie); }
.leiste__spiel {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--akzent); color: var(--akzent-text); font-size: 1rem;
}
.leiste__spiel:disabled { opacity: .4; cursor: default; }
.leiste__knopf { border: 1px solid var(--linie); background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.leiste__knopf:hover { border-color: var(--leise); }
.leiste__knopf.is-active { border-color: var(--akzent); color: var(--akzent); }
/* 𝄞 Notenzeilen ein/aus (nur Spuren mit Tabulatur): in der Leiste, damit er beim Scrollen erreichbar bleibt */
.leiste__noten { font-size: 1.15rem; line-height: 1; padding-top: 4px; padding-bottom: 4px; }
.ab { display: flex; gap: 4px; }
.ab .leiste__knopf { min-width: 34px; font-weight: 600; }
/* Abschnitte aus der Datei (leiste.js): eine eigene Zeile unter der Leiste */
.abschnitte { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.abschnitte[hidden] { display: none; }
/* Vorzähler (js/player/vorzaehler.js): Schalter, ⚙ als kleines Fenster, Schlagfelder, große Zahl */
.vz { display: flex; align-items: center; gap: 6px; }
.vz__kurz { display: none; }
.aufklapp summary.is-abweichend { border-color: var(--akzent); color: var(--akzent); }
.vz__haken { justify-content: flex-start; }
.takt { display: flex; align-items: center; gap: 8px; }
.takt[hidden] { display: none; }
.takt__schlaege { display: flex; gap: 3px; }
/* Schlagfelder groß — sie sollen beim Spielen aus dem Augenwinkel lesbar sein (Sascha 2026-10-25) */
.takt__schlaege { gap: 5px; }
.schlag { min-width: 42px; padding: 6px 0; text-align: center; font-size: 1.25rem; font-weight: 700; border: 2px solid var(--linie); border-radius: 7px; }
.schlag.is-an { background: var(--akzent); border-color: var(--akzent); color: #111; }
.schlag--eins.is-an { background: #ef4444; border-color: #ef4444; color: #fff; }
.takt__info { font-size: .85rem; white-space: nowrap; }
.vorzaehler-zahl { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: min(40vw, 16rem); font-weight: 800; color: var(--akzent); opacity: .85; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.vorzaehler-zahl[hidden] { display: none; }
/* Fuß unter den Noten (alphatab.js fussZeigen) statt alphaTabs eigenem; alphaTab setzt display inline */
.noten--fuss-ersetzt .at-surface > :last-child { display: none !important; }
/* der Fuß ist die letzte Zeile des Papiers — kein dunkler Streifen zwischen Noten und Brett */
.noten-fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 4px 16px 10px;
  font-size: .8rem; color: #777; background: var(--papier); border-radius: 0 0 var(--radius) var(--radius); }
.noten--fuss-ersetzt { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.noten-fuss span { min-width: 0; overflow-wrap: anywhere; }   /* lange Quell-Adressen brechen am Handy um */
[data-transp].is-aktiv { border-color: var(--akzent); color: var(--akzent); }
.stufen { display: flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.stufen button { border: 0; background: transparent; padding: 6px 9px; cursor: pointer; color: var(--leise); font-variant-numeric: tabular-nums; }
.stufen button.is-active { background: var(--flaeche-hoch); color: var(--text); }

/* Mischpult: rechts neben der Leiste, flach (Platz sparen) */
.pult { margin-left: auto; display: grid; gap: 2px; }
.pult__zeile {
  display: grid; grid-template-columns: minmax(70px, 180px) repeat(4, 28px) 52px;
  align-items: center; gap: 4px; padding: 1px 6px; background: var(--flaeche); border-radius: 6px; min-height: 26px;
}
.pult__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.pult__knopf {
  height: 24px; border: 1px solid var(--linie); background: transparent; border-radius: 5px; padding: 0;
  cursor: pointer; color: var(--leise); font-weight: 600; font-size: .8rem;
}
.pult__knopf.is-active { color: var(--text); border-color: var(--leise); background: var(--flaeche-hoch); }
.pult__knopf[data-griff] { filter: grayscale(1); opacity: .55; }
.pult__knopf[data-griff].is-active { filter: none; opacity: 1; border-color: var(--akzent); background: var(--flaeche-hoch); }
.pult__knopf[data-solo].is-active { color: var(--akzent-text); background: var(--akzent); border-color: var(--akzent); }
.pult__knopf.is-aus { color: var(--fehler); border-color: var(--fehler); }

/* Regler (js/player/regler.js): im Stand nur die Zahl, offen eine lange Linie über der Anzeige daneben */
.regler { position: relative; }
.regler__zahl { border: 1px solid var(--linie); background: transparent; border-radius: 8px; padding: 6px 9px; cursor: pointer;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.regler__zahl:hover { border-color: var(--leise); }
.pult .regler__zahl { width: 100%; padding: 2px 4px; border-radius: 5px; font-size: .8rem; color: var(--leise); text-align: right; }
.regler__feld { display: none; position: absolute; z-index: 30; top: 50%; left: 0; transform: translateY(-50%);
  align-items: center; gap: 10px; padding: 8px 12px; background: var(--flaeche-hoch); border: 1px solid var(--akzent);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.regler--links .regler__feld { left: auto; right: 0; }   /* im Pult am rechten Rand: nach links aufklappen */
.regler.is-offen .regler__feld { display: flex; }
.regler__feld input { width: 300px; accent-color: var(--akzent); }
.regler__wert { min-width: 5ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Griffbrett: fest am unteren Rand */
:root {
  --brett: #1b1f26;
  --bundstab: #4a525e;
  --sattel: #d5d8dd;
  --saite: #a3aab5;
  --marke: #2e343e;
  --grundton: #e08a4f;        /* = Akzent */
  --lad: #3a414c;
  --lad-text: #c9ced6;
  --akkordrand: #eef0f3;
  --punkt-text: #15171b;
  --bass: #5aa9ff;           /* blau: der Basston im Akkordblatt und am Brett */
  --gespielt: #4cd38a;        /* grün: hebt sich von Orange, Grau, Violett und dem hellen Akkordrand ab */
  --skala: #6b7380;
  --alteriert: #a98be3;
}
/* Das Brett hängt direkt unter den Noten, aber nie tiefer als der Fensterrand (sticky): bei kurzen Stücken bleibt
   kein leerer Streifen darüber, bei langen scrollen die Noten und das Brett bleibt unten stehen (Sascha 2026-10-26) */
.griff {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--grund); border-top: 1px solid var(--linie);
  padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom));
}
.griff__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; min-width: 0; }
/* Schlaglampen groß in der Mitte der Spielerzeile — der feste Kopf ist immer zu sehen; nur solange gezählt oder gespielt wird */
.spieler__takt { flex: 1 1 auto; align-self: center; justify-content: center; }
.spieler__takt .takt__schlaege { gap: 5px; }
.spieler__takt .schlag { min-width: 34px; padding: 4px 0; font-size: 1.05rem; font-weight: 700; border-radius: 7px; }
.takt:not(.is-laeuft) .takt__schlaege { visibility: hidden; }   /* Platz bleibt: der Kopf springt beim Start nicht */
.griff__schalter { margin-left: auto; }
.griff__akkord { font-size: 1.9rem; font-weight: 700; line-height: 1.1; min-width: 2.5ch; cursor: help; }
.griff__akkord.is-geschaetzt { color: color-mix(in srgb, var(--text) 70%, var(--grund)); font-weight: 600; }
.griff__akkord.is-unsicher { color: var(--leise); }
.griff__naechster { font-size: 1.1rem; white-space: nowrap; }
.griff__spur { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.griff__stimmung { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.griff__skala { max-width: 42vw; }
.griff__brett { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* PC: Rahmen fester Höhe, das Brett füllt sie (griffbrett.js passen); die Höhe zieht man am Anfasser oben */
.griff.is-rahmen .griff__brett { height: var(--brett-hoehe, min(24vh, 300px)); overflow-y: hidden; }
.griff.is-rahmen .gb { min-width: 0; max-width: none; max-height: none; }
.griff__anfasser { height: 14px; margin: -8px calc(-1 * var(--rand)) -6px; cursor: ns-resize; touch-action: none; position: relative; }
.griff__anfasser::after { content: ""; position: absolute; left: 50%; top: 4px; width: 48px; height: 4px; margin-left: -24px;
  border-radius: 2px; background: var(--linie); }
.griff__anfasser:hover::after { background: var(--leise); }
.griff:not(.is-rahmen) .griff__anfasser { display: none; }
.gb { display: block; width: 100%; min-width: 960px; height: auto; max-height: 42vh; }   /* schmaler wird es unlesbar: dann wischen */
/* Ausschnitt (griffbrett/ausschnitt.js): volle Breite ohne Mindestbreite, Höhe begrenzt — das Brett bleibt links */
/* Höhe fest, Breite aus dem Seitenverhältnis des Ausschnitts: wäre die Fläche breiter, zeigte das SVG daneben den Rest des
   Bretts (Sascha 2026-10-25: „von–bis“ wirkte nicht) */
.gb--ausschnitt { min-width: 0; width: auto; max-width: 100%; height: min(24vh, 320px); max-height: none; }
.griff .gb--ausschnitt { height: min(24vh, 300px); }   /* beim Stück liegt das Brett in der festen Leiste unten: die Noten brauchen den Platz */
.gb-randgrund { fill: var(--grund); }
.gb-bundzahl--klein { opacity: .7; }
.gb-brett { fill: var(--brett); }
.gb-marke { fill: var(--marke); }
.gb-bund { stroke: var(--bundstab); stroke-width: 2; }
.gb-sattel { stroke: var(--sattel); stroke-width: 5; stroke-linecap: round; }
.gb-saite { stroke: var(--saite); }
.gb-saitenname { fill: var(--text); font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.gb-bundzahl { fill: var(--leise); font-size: 12px; text-anchor: middle; }
/* Punkte nach dem Grundlad: Tonika orange, Tonart ruhig grau, dazu violett, weg als blasser Ring */
.gb-ton--tonika { fill: var(--grundton); }
.gb-ton--lad { fill: var(--lad); }
.gb-ton--dazu { fill: var(--alteriert); }
.gb-ton--weg { fill: none; stroke: var(--skala); stroke-width: 1.5; }
/* Töne des klingenden Akkords: heller Rand (geschätzt erkennt man am „≈“ im Namen) */
.gb-ton--akkord { stroke: var(--akkordrand); stroke-width: 2.5; }
.gb-tonname { fill: var(--punkt-text); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.gb-tonname--lad { fill: var(--lad-text); font-weight: 600; }
.gb-tonname--weg { fill: var(--leise); font-weight: 400; opacity: .6; }
.gb-gespielt { fill: none; stroke: var(--gespielt); stroke-width: 3.5; }
/* Bend/Slide (Schritt 7): Weg als Pfeil, erreichter Ton gestrichelt */
.gb-technik { fill: none; stroke: var(--gespielt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gb-technik-text { fill: var(--gespielt); font-size: 14px; font-weight: 700; }
.gb-ziel { fill: none; stroke: var(--gespielt); stroke-width: 2.5; stroke-dasharray: 4 3; }

/* Bibliothek: Fenster mit den freien Stücken nach Komponist */
.bibliothek {
  width: min(680px, calc(100vw - 2 * var(--rand))); max-height: 82vh; padding: 14px 18px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--text);
}
.bibliothek::backdrop { background: rgba(0, 0, 0, .6); }
.bibliothek__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bibliothek__kopf h2 { margin: 0; font-size: 1.3rem; }
.bibliothek__komponist { margin: 14px 0 4px; font-size: 1rem; color: var(--akzent); }
.bibliothek ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bibliothek__stueck {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.bibliothek__stueck:hover, .bibliothek__stueck:focus-visible { background: var(--flaeche-hoch); }
.bibliothek__stueck .klein { white-space: nowrap; }
.bibliothek__zeile { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.bibliothek__zeile.is-aktuell { box-shadow: inset 3px 0 0 var(--akzent); background: var(--flaeche-hoch); }
.bibliothek__zeile.is-aktuell .bibliothek__stueck span:first-child { color: var(--akzent); font-weight: 600; }
.bibliothek__weg {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--leise);
  cursor: pointer; opacity: .5;
}
.bibliothek__weg:hover, .bibliothek__weg:focus-visible { opacity: 1; color: var(--fehler); background: var(--flaeche-hoch); }
.bibliothek__aus { margin-top: 10px; }
.bibliothek__ueber { margin: 14px 0 2px; font-size: 1.05rem; cursor: help; }
.bibliothek__teil { padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
/* „Meine Stücke“ als Ordnerbaum: Unterordner zum Aufklappen, eingerückt */
.bibliothek__ordner { margin: 2px 0; }
.bibliothek__ordner > summary { cursor: pointer; padding: 6px 8px; border-radius: 6px; font-weight: 600; list-style: none; }
.bibliothek__ordner > summary::-webkit-details-marker { display: none; }
.bibliothek__ordner > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--leise); }
.bibliothek__ordner[open] > summary::before { content: "▾"; }
.bibliothek__ordner > summary:hover { background: var(--flaeche-hoch); }
.bibliothek__ordner > :not(summary) { margin-left: 18px; }
.bibliothek__zeigen { border: 0; background: none; padding: 0; color: var(--akzent); font: inherit; cursor: pointer; text-decoration: underline; }
.bibliothek a { color: var(--akzent); }
.ablage__feld [data-bibliothek-knopf] { margin-top: 8px; }

/* Übungen (docs/uebungen.md): eigene Ansicht statt des Stücks. Akkord 1 blau — Ü2 bringt Akkord 2 in Grün */
body:not(.ist-uebung) :is([data-uebung], [data-u-spielzeile], [data-u-kopfwahl]),
/* Bibliothek und Datei öffnen Stücke; in der Übung öffnet das Akkordblatt seine Blätter selbst (📂 neben 💾) */
.ist-uebung .kopf__rechts :is([data-bibliothek-knopf], [data-oeffnen]),
.ist-uebung :is([data-ablage], [data-blatt], [data-leiste], [data-pult], [data-griffbrett], [data-meldung], .einst__stueck) {
  display: none !important;
}
/* Akkord 1 blau, Akkord 2 grün — kräftig gegen hell, Blau und Grün weit auseinander (Sascha: Unterschiede deutlicher) */
:root { --u1-akkord: #1d4fd8; --u1-skala: #8cbcff; --u2-akkord: #0d9440; --u2-skala: #6fe39a; --griff: #ef4444; --stufe: #39ff6a; }
.uebung { padding: 12px var(--rand); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* breite Inhalte (Brett, Noten) wischen statt die Seite zu verbreitern */
.uebung__wahl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.uebung__feld { display: grid; gap: 2px; }
/* Keine Beschriftung über den Feldern (Sascha 2026-10-26): der Name steht im title (uebung.js feldTitel) */
.uebung .uebung__feld > .leise:first-child { display: none; }
.uebung__stufenfeld { margin-left: 12px; align-self: center; }
/* Übungsart in der Kopfzeile, gleich hinter den Reitern — sie ist die Überschrift der Übung */
.kopf__uebung { display: flex; align-items: center; }
.kopf__art { font-size: 1rem; font-weight: 600; }
.uebung__akkordfeld { width: 14ch; cursor: text; font-weight: 600; }
/* Stufe und Erweiterung: Hilfe aus der Tonart, mit Abstand hinter dem Akkord und seinen Griffen */
.uebung__tonart { margin-left: 12px; }
.uebung__akkordfeld.is-fehler { border-color: var(--fehler); }
.uebung__zeilen { display: grid; gap: 8px; }
.uebung__zeile { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.uebung__marke {
  align-self: center; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: #fff;
}
.uebung__marke--1 { background: var(--u1-akkord); }
.uebung__marke--2 { background: var(--u2-akkord); }
.uebung__name .is-klingt { color: var(--akzent); }
.uebung__stufen { display: flex; flex-wrap: wrap; gap: 4px; }
.uebung__stufen .leiste__knopf { min-width: 4.2em; }
/* Ü3: die Lage als heller Streifen hinter den Punkten */
.gb-lage { fill: #fff; fill-opacity: .07; }
/* Ü5: Leitton — geht im Halbtonschritt in den nächsten Akkord (G♯ → A) */
.gb-leitton { fill: none; stroke: var(--gespielt); stroke-width: 3.5; }
/* Ü5 Akkordblatt: links der Text, rechts das Raster (am Handy untereinander). Eigener Name — .blatt ist das Notenpapier */
.akkordblatt { display: block; }
/* Text des Blatts: eigenes, nicht-modales Fenster rechts oben — das Raster bleibt bedienbar */
.akkordblatt__fenster { position: fixed; inset: 70px var(--rand) auto auto; margin: 0; z-index: 30; width: min(44ch, calc(100vw - 2 * var(--rand)));
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.akkordblatt__fenster .akkordblatt__text { margin-top: 6px; }
.akkordblatt__legende { width: min(60ch, calc(100vw - 2 * var(--rand))); max-height: 80vh; overflow: auto; }
.akkordblatt__legende p { margin: 6px 0 8px; }
.akkordblatt__legende-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.akkordblatt__legende-tabelle td { padding: 4px 6px; border-top: 1px solid var(--linie); vertical-align: top; }
.akkordblatt__legende-tabelle td:first-child { font-weight: 700; white-space: nowrap; }
.akkordblatt__legende-tabelle td:last-child { white-space: nowrap; color: var(--akzent); }
.akkordblatt__warnung { color: var(--fehler); font-weight: 600; }
.wahl.is-fehler { border-color: var(--fehler); }
.akkordblatt[hidden] { display: none; }
.uebung__blattname { width: 16ch; }
.akkordblatt__text { width: 100%; min-height: 9.5rem; resize: vertical; font: 0.95rem/1.45 ui-monospace, Consolas, monospace;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
.akkordblatt__text.is-fehler { border-color: var(--fehler); }
.akkordblatt__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
/* Schritt 9: je Takt ein Gitter aus Plätzen; Akkord (Zeile 1) und Bass (Zeile 2) liegen über ihrer Länge, die Plätze
   darunter nehmen den Klick (Cursor) */
.akkordblatt__wahl { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; margin-bottom: 6px; }
.akkordblatt__nachrechts { margin-left: auto; }   /* ⓘ und 📝 Text an den rechten Rand */
.akkordblatt__hinweis { margin: 0 0 6px; }
.akkordblatt__hinweis[hidden] { display: none; }
.akkordblatt__takt { position: relative; display: grid; grid-template-rows: auto auto; align-items: center; min-height: 2.6rem;
  padding: 14px 4px 4px; border: 1px solid var(--linie); border-radius: 6px; }
.akkordblatt__platz { grid-row: 1 / span 2; align-self: stretch; min-height: 2.6rem; border: 0; border-left: 1px solid var(--linie);
  background: none; padding: 0; cursor: pointer; border-radius: 0; }
.akkordblatt__platz:first-of-type { border-left-color: transparent; }
.akkordblatt__platz.is-halb { border-left-style: dotted; }
.akkordblatt__platz.is-cursor { background: var(--flaeche-hoch); box-shadow: inset 0 -3px 0 var(--akzent); }
.akkordblatt__platz:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
/* Bass: unter der Linie, so groß und hell wie der Akkord — damit klar ist, welcher Ton unten klingt */
.akkordblatt__linie { grid-row: 2; grid-column: 1 / -1; align-self: start; border-top: 1px solid var(--leise); pointer-events: none; }
.akkordblatt__bass { grid-row: 2; pointer-events: none; padding: 3px 4px 1px; color: var(--bass); font-weight: 600; white-space: nowrap; overflow: hidden; }
/* hochgestellter Zusatz der Stufe (I⁷) — nah an der Zahl, Zeilenhöhe bleibt */
.akkordblatt sup, .uebung__name sup { font-size: .7em; line-height: 0; }
.akkordblatt__pos { margin-left: 5px; padding: 0 4px; font-size: .75rem; border: 1px solid currentColor; border-radius: 4px; vertical-align: 1px; }
.gb-bass { fill: none; stroke: var(--bass); stroke-width: 4; }
/* Takte der A–B-Schleife */
.akkordblatt__takt.is-ab { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.akkordblatt__takt.is-klingt { border-color: var(--akzent); background: var(--flaeche-hoch); }
.akkordblatt__takt.is-fehler { border-color: var(--fehler); color: var(--fehler); cursor: help; }
.akkordblatt__nr { position: absolute; top: 2px; left: 6px; font-size: .7rem; color: var(--leise); }
.akkordblatt__akkord { grid-row: 1; pointer-events: none; justify-self: start; padding: 2px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.akkordblatt__akkord.is-gezeigt { background: var(--akzent); color: var(--akzent-text); }
.akkordblatt__akkord.is-gezeigt .leise { color: inherit; }
.akkordblatt__fehler { margin: 6px 0 0; padding-left: 18px; color: var(--fehler); font-size: .85rem; }
.akkordblatt__fehler:empty { display: none; }
@media (max-width: 600px) { .akkordblatt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ist-folge .uebung__name span { cursor: pointer; }
.uebung__blatt { position: relative; }
/* Noten weggeklappt: Höhe 0 statt display:none — die Breite bleibt, alphaTab muss beim Aufklappen nicht neu setzen */
.uebung__blatt.is-zu { height: 0; overflow: hidden; }
/* Lupe: das Übungsbrett größer, Rest wischen */
.uebung__lupe { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 6px; cursor: help; }
.bereichwahl { display: flex; align-items: center; gap: 6px; cursor: help; }
.bereichwahl [hidden] { display: none; }
/* Ü2: die Zahlen gehören zu dem unterstrichenen Akkord; Klick auf den anderen wechselt */
.ist-uebergang .uebung__name span { cursor: pointer; }
.uebung__name .is-zahlen { text-decoration: underline; text-underline-offset: 6px; }
.uebung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.uebung__name { font-size: 1.9rem; font-weight: 700; line-height: 1.1; cursor: help; }
.uebung__griff { align-self: center; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.uebung__brett { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* Rahmen mit Anfasser unten rechts wie das Textfeld (Sascha 2026-10-25): die Höhe stellt man selbst ein, das Brett füllt
   sie, die Breite folgt dem gezeigten Bereich (ganz: breiter als das Fenster, dann wischen). Gemerkt in uebung.js */
.uebung__brett { resize: vertical; overflow: auto; height: min(24vh, 320px); min-height: 110px; max-height: 85vh;
  border: 1px solid var(--linie); border-radius: 8px; }
.uebung__brett .gb { height: 100%; width: auto; min-width: 0; max-width: none; max-height: none; }   /* genaue Maße setzt uebung.js brettPassen */
/* Punkte der Übung. Füllung = Akkord 1 (blau), Rand = Akkord 2 (grün); dunkel = Akkordton, hell = Tonleiter dazu.
   Liegt ein Ton nur bei Akkord 2, ist er grün gefüllt. In Ü1 (ein Akkord) trägt der Grundton („1“) einen hellen Rand */
.gb-u--u1-akkord { fill: var(--u1-akkord); }
.gb-u--u1-skala { fill: var(--u1-skala); }
.gb-u--u2-akkord { fill: var(--u2-akkord); }
.gb-u--u2-skala { fill: var(--u2-skala); }
.gb-u--rand-akkord { stroke: var(--u2-akkord); stroke-width: 5; }
.gb-u--rand-skala { stroke: var(--u2-skala); stroke-width: 5; }
.gb-u--grund { stroke: var(--akkordrand); stroke-width: 2.5; }
.gb-uzahl { font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.gb-uzahl--u1-akkord, .gb-uzahl--u2-akkord { fill: #fff; }
.gb-uzahl--u1-skala, .gb-uzahl--u2-skala { fill: var(--punkt-text); }
/* der gewählte Griff: Ringe und eine Linie durch die gegriffenen Stellen, × für nicht gespielte Saiten */
/* Der gewählte Griff rot: der weiße Ring gehört dem Grundton, beides fiel sonst zusammen (Sascha 2026-10-17) */
.gb-griff { fill: none; stroke: var(--griff); stroke-width: 3; }
.gb-griff-linie { fill: none; stroke: var(--griff); stroke-width: 3; stroke-opacity: .8; stroke-linejoin: round; }
/* Ü1: Griff der angeklickten Stufe leuchtend grün, der rote (Akkord aus Zeile 1) bleibt stehen */
.gb-griff--stufe { stroke: var(--stufe); }
.gb-griff-linie--stufe { stroke: var(--stufe); stroke-opacity: .9; }
.gb-griff-linie--1 { stroke: var(--u1-skala); stroke-opacity: .9; }   /* zwei Griffe (Ü2): Linie in der Farbe des Akkords */
.gb-griff-linie--2 { stroke: var(--u2-skala); stroke-opacity: .9; }
.gb-griff-x { fill: var(--fehler); font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.gb-saitenname--aus { opacity: 0; }

/* Handy quer: die Höhe ist knapp — Kopf in einer Zeile (ohne Titel), Brett 32 % hoch, Breite folgt, Rest wischen */
@media (pointer: coarse) and (max-height: 500px) {
  .kopf { padding-top: 6px; padding-bottom: 6px; }   /* Zeile 1: Marke, Leiste, Knöpfe; darunter das Pult */
  .spieler { flex-basis: auto; order: 1; }
  .kopf__rechts { order: 2; }
  .pult { order: 3; }
  .gb { width: auto; min-width: 0; height: 32vh; max-height: none; }
  .griff { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .griff__akkord { font-size: 1.4rem; }
}

/* Ablage: leere Seite */
.ablage { padding: var(--rand); min-height: calc(100dvh - 60px); display: grid; }
.ablage__feld {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1.5px dashed var(--linie); border-radius: var(--radius); padding: 32px var(--rand); text-align: center;
}
.ablage__text { margin: 0; font-size: 1.1rem; }

.meldung { margin: var(--rand); padding: 10px 14px; border-radius: 8px; background: var(--flaeche); border-left: 3px solid var(--leise); }
.meldung.is-fehler { border-left-color: var(--fehler); }

/* Notenblatt */
.blatt { padding: var(--rand); }
.blatt__noten { background: var(--papier); border-radius: var(--radius); min-height: 200px; overflow: hidden; isolation: isolate; }   /* eigene Ebene: der Cursor (z-index 1000) bleibt unter Kopf und Griffbrett */
/* A/B-Fähnchen: kleine Marke über dem Anfang von A bzw. dem Ende von B */
.blatt { position: relative; }
.ab-marke {
  position: absolute; z-index: 1; transform: translate(-50%, -100%); pointer-events: none;
  min-width: 20px; padding: 1px 5px; border-radius: 4px 4px 4px 0; text-align: center;
  background: var(--akzent); color: var(--akzent-text); font-weight: 700; font-size: .8rem; line-height: 1.3;
}
.ab-marke + .ab-marke { border-radius: 4px 4px 0 4px; }

/* alphaTab zeichnet Cursor, Bereich und gespielte Noten nur als Elemente — die Farben kommen von der Seite */
.blatt__noten .at-cursor-bar { background: rgba(224, 138, 79, .10); }
/* Cursor als Pfeil ▼ über der Zeile (player/alphatab.js, Sascha 2026-10-25): alphaTabs Strich bleibt unsichtbar, der Pfeil
   folgt seiner Lage */
.blatt__noten .at-cursor-beat { background: transparent; }
.cursor-pfeil { position: absolute; left: 0; top: 0; width: 14px; height: 12px; margin-left: -7px; background: var(--akzent);
  clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; z-index: 2; }
.cursor-pfeil[hidden] { display: none; }
.blatt__noten .at-selection div { background: rgba(224, 138, 79, .22); }
.blatt__noten .at-highlight * { fill: #b8551f; stroke: #b8551f; }

/* Ziehen über das Fenster */
.ziehen {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: color-mix(in srgb, var(--grund) 80%, transparent);
  border: 3px dashed var(--akzent); font-size: 1.3rem; pointer-events: none;
}

/* Handy, auch quer */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  :root { --rand: 10px; }
  .kopf { gap: 10px; }
  .griff__spur, .griff__stimmung { display: none; }
  .griff__akkord { font-size: 1.6rem; }
  .griff__kopf { gap: 8px; }
  .griff__skala { max-width: 34vw; padding: 5px 4px; }
  /* „Bünde“ am Handy ohne Wort; mit von–bis darf die Kopfzeile umbrechen */
  .griff__kopf { flex-wrap: wrap; row-gap: 4px; }
  .griff__bereich > span:first-child { display: none; }
  .wahl { padding: 5px 4px; }
  .blatt { padding: var(--rand) 0; }
  .pult { margin-left: 0; flex-basis: 100%; }
  .pult__zeile { grid-template-columns: 1fr repeat(4, 30px) 52px; padding: 1px 6px; }
  .regler__feld input { width: min(300px, 60vw); }
  .leiste__trenner { display: none; }
  [data-bereich], [data-u-ab-weg] { display: none; }   /* A und B lassen sich einzeln wegnehmen; ✕ würde die Leiste umbrechen */
  .griff__kopf [data-brett-schalter] { display: none; }   /* die Schalter fürs Brett sind Sache des PCs */
  .modi__reiter { font-size: 1rem; padding: 4px 6px 5px; }
  .kopf > .marke { display: none; }   /* Reiter, Bibliothek, Datei, ⚙ passen sonst nicht in eine Zeile */
  .aufklapp__tonart, .leiste .regler__zahl [data-regler-wert] { display: none; }
  .leiste .regler__zahl, .leiste .aufklapp__knopf { padding: 6px 5px; }
  /* am Handy kurze Zeichen statt Wörter (Übung), keine Schlagfelder (die große Zahl zählt ein) */
  .vz__lang, .takt { display: none !important; }
  .vz__kurz { display: inline; }
  /* Abschnitte am Handy in einer Zeile zum Wischen statt mehrerer Zeilen */
  .abschnitte { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abschnitte .leiste__knopf { white-space: nowrap; }
  .aufklapp__fenster { min-width: 0; width: min(21rem, calc(100vw - 32px)); white-space: normal; }
  .aufklapp__regler input { width: 150px; }
  /* Kopf: Bibliothek, Übung, Öffnen als Symbol — mit Text passt es nicht in 375 px; der Text bleibt für Vorleser */
  .kopf__rechts .knopf[data-symbol] { font-size: 0; padding: 6px 9px; }
  .kopf__rechts .knopf[data-symbol]::before { content: attr(data-symbol); font-size: 1.1rem; }
  /* Leiste in einer Zeile bis 375 px Breite */
  .leiste { gap: 4px; }
  .leiste__spiel { width: 36px; height: 36px; }
  .stufen button { padding: 6px 3px; }
  .leiste__knopf { padding: 6px 7px; }
  .ab .leiste__knopf { min-width: 28px; }
  /* hochkant: Breite setzt js/griffbrett/griffbrett.js (etwa 12 Bünde sichtbar, Rest wischen) */
  .gb { min-width: 0; max-height: none; }
  .gb--kompakt .gb-tonname { font-size: 15px; }
  .gb--kompakt .gb-uzahl { font-size: 14px; }
  .gb--kompakt .gb-saitenname { font-size: 17px; }
  .gb--kompakt .gb-bundzahl { font-size: 14px; }
  .blatt__noten { border-radius: 0; }
}

/* Anleitung (anleitung/<sprache>.html): eigenes Fenster, lesbar breit, scrollt in sich */
.anleitung { width: min(1000px, calc(100vw - 2 * var(--rand))); max-height: 88vh; padding: 14px 22px 22px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--text); line-height: 1.5;
  overflow-x: hidden; overflow-wrap: anywhere; }
.anleitung::backdrop { background: rgba(0, 0, 0, .6); }
.anleitung .bibliothek__kopf { position: sticky; top: -14px; padding: 6px 0; background: var(--flaeche); }
.anleitung__inhalt h1 { margin: 4px 0 8px; font-size: 1.5rem; color: var(--akzent); }
.anleitung__inhalt h2 { margin: 22px 0 6px; font-size: 1.2rem; padding-top: 12px; border-top: 1px solid var(--linie); }
.anleitung__inhalt h3 { margin: 14px 0 4px; font-size: 1rem; }
.anleitung__inhalt p, .anleitung__inhalt li { margin: 4px 0; }
.anleitung__inhalt table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.anleitung__inhalt th, .anleitung__inhalt td { padding: 5px 8px; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; }
.anleitung__inhalt th { color: var(--leise); font-weight: 600; }
.anleitung__inhalt a { color: var(--akzent); }
/* die Farben des Griffbretts als kleine Punkte — dieselben Werte wie .gb-ton-- */
.anl-punkt { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; }
.anl-punkt--tonika { background: var(--grundton); }
.anl-punkt--lad { background: var(--lad); }
.anl-punkt--dazu { background: var(--alteriert); }
.anl-punkt--weg { border: 1.5px solid var(--skala); }
.anl-punkt--akkord { background: var(--lad); box-shadow: 0 0 0 2.5px var(--akkordrand); }
.anl-punkt--gespielt { border: 3px solid var(--gespielt); }
/* Bilder der Anleitung (werkzeuge/anleitung_bilder.mjs) mit roten Nummern; darunter die Legende in derselben Zählung */
.anl-bild { margin: 8px 0 4px; }
.anl-bild img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 8px; }
.anl-unter { color: var(--leise); font-size: .9rem; }
.anl-legende { columns: 2 18rem; column-gap: 24px; margin: 4px 0 10px; padding-left: 22px; color: var(--leise); font-size: .9rem; }
.anl-legende li::marker { color: #e5484d; font-weight: 700; }

/* Hinweis bei anderem Browser als Chrome/Edge (app.js): schmal über dem Kopf, scrollt weg */
.browserhinweis { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px var(--rand);
  background: color-mix(in srgb, var(--akzent) 18%, var(--grund)); border-bottom: 1px solid var(--akzent); font-size: .9rem; }
.browserhinweis > span { flex: 1 1 20rem; }
.browserhinweis__knopf { border: 1px solid var(--akzent); background: transparent; color: var(--text); border-radius: 6px;
  padding: 3px 10px; cursor: pointer; }
.browserhinweis__knopf:last-child { border-color: transparent; color: var(--leise); }
.anl-hinweis { padding: 8px 12px; border-left: 3px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); border-radius: 0 6px 6px 0; }

/* Produktionshinweis (Sascha 2026-10-26): „egoetai“ immer in einem Wort, der Name in der Akzentfarbe */
.produktion { margin: 10px 0 0; text-align: center; color: var(--leise); font-size: .85rem; }
.produktion__name { color: var(--akzent); font-weight: 600; letter-spacing: .02em; }
.produktion--einst { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linie); }
.anleitung__inhalt .produktion { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--linie); }