/* ============================================================
   Rhythmus-Werkstatt: Theme und Grundlayout.
   Dunkel ist die Voreinstellung, hell kommt per [data-theme="light"]
   auf <html> - umgeschaltet und in localStorage gemerkt von app.js.
   ============================================================ */
:root {
    --bg: #0b1120;
    --bg-erhoben: #111827;
    --bg-karte: #0f172a;
    --rand: #334155;
    --rand-schwach: #1e293b;
    --text: #e2e8f0;
    --text-gedaempft: #94a3b8;
    --text-schwach: #64748b;
    --akzent: #8b5cf6;
    --akzent-stark: #7c3aed;
    --akzent-text: #ede9fe;
    --warnung: #f59e0b;
    --warnung-text: #1c1917;
    --erfolg: #22c55e;
    --gefahr: #f43f5e;
    --schatten: 0 10px 30px -10px rgba(0,0,0,.5);
    /* Beat-Werkstatt: je Instrument eine Farbe */
    --bass: #60a5fa;
    --snare: #fb923c;
    --becken: #facc15;
    --tom: #4ade80;
}
html[data-theme="light"] {
    --bg: #f8fafc;
    --bg-erhoben: #ffffff;
    --bg-karte: #ffffff;
    --rand: #cbd5e1;
    --rand-schwach: #e2e8f0;
    --text: #0f172a;
    --text-gedaempft: #475569;
    --text-schwach: #94a3b8;
    --akzent: #7c3aed;
    --akzent-stark: #6d28d9;
    --akzent-text: #4c1d95;
    --warnung: #d97706;
    --warnung-text: #fffbeb;
    --erfolg: #16a34a;
    --gefahr: #e11d48;
    --schatten: 0 10px 30px -12px rgba(15,23,42,.18);
    --bass: #2563eb;
    --snare: #ea580c;
    --becken: #a16207;
    --tom: #16a34a;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}
body { min-height: 100vh; padding-bottom: 3rem; }
h1, h2, h3 { font-weight: 800; margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--akzent); }

/* ---------- Kopfzeile ---------- */
.kopfzeile {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1.2rem; border-bottom: 1px solid var(--rand-schwach);
    background: var(--bg-erhoben);
    position: sticky; top: 0; z-index: 20;
}
.kopfzeile h1 { font-size: 1.1rem; }
.kopfzeile .untertitel { color: var(--text-gedaempft); font-size: .8rem; }
.kopfzeile .fuellt { flex: 1; }

/* ---------- Grundbausteine ---------- */
.karte {
    background: var(--bg-karte); border: 1px solid var(--rand-schwach);
    border-radius: 14px; padding: 1rem; box-shadow: var(--schatten);
}
/* Einklappbare Karte (Uebung erzeugen): natives <details>, kein eigenes
   Auf/Zu-Skript noetig. */
details.karte summary {
    font-size: 1rem; font-weight: 800; cursor: pointer; color: var(--text);
    list-style: none;
}
details.karte summary::-webkit-details-marker { display: none; }
details.karte summary::before {
    content: '▸'; display: inline-block; margin-right: .4rem; color: var(--text-schwach);
    transition: transform .1s;
}
details.karte[open] summary::before { transform: rotate(90deg); }
.leiste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.btn {
    border: 1px solid var(--rand); background: var(--bg-erhoben); color: var(--text);
    border-radius: 10px; padding: .5rem .85rem; font-size: .85rem; font-weight: 700;
    transition: transform .08s, background .15s; white-space: nowrap;
}
.btn:hover { background: var(--rand-schwach); }
.btn:active { transform: scale(.96); }
.btn.an { background: var(--akzent); border-color: var(--akzent-stark); color: #fff; }
.btn-primär {
    background: var(--akzent); border-color: var(--akzent-stark); color: #fff;
}
.btn-primär:hover { background: var(--akzent-stark); }
.btn-warnung { background: var(--warnung); border-color: var(--warnung); color: var(--warnung-text); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.schalter-feld { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-gedaempft); font-weight: 600; }
.schalter-feld input { accent-color: var(--akzent); width: 1.05rem; height: 1.05rem; }

/* Schiebeschalter (z.B. "und" <-> "+" bei den Zaehlzeiten) - kompakter als
   zwei Radio-Knoepfe, auf einen Blick erkennbar, welche Seite aktiv ist. */
.schalter { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter-schieber {
    position: absolute; inset: 0; background: var(--rand); border-radius: 999px;
    cursor: pointer; transition: background .15s;
}
.schalter-schieber::before {
    content: ''; position: absolute; width: 14px; height: 14px; left: 2.5px; top: 2.5px;
    background: #fff; border-radius: 50%; transition: transform .15s;
}
.schalter input:checked + .schalter-schieber { background: var(--akzent); }
.schalter input:checked + .schalter-schieber::before { transform: translateX(15px); }
label.feld { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--text-gedaempft); font-weight: 700; }
select, input[type="text"], input[type="number"] {
    background: var(--bg-erhoben); color: var(--text); border: 1px solid var(--rand);
    border-radius: 8px; padding: .4rem .55rem; font-size: .85rem; font-family: inherit;
}

main { max-width: 1100px; margin: 0 auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; }

/* ============================================================
   EDITOR: Kaestchen je Baustein, Takte als eigene Zeilen-Elemente.
   Der aeussere Kasten darf umbrechen (flex-wrap) - jeder Takt bleibt
   dabei als Ganzes zusammen, weil er selbst kein Umbruch-Kind ist.
   ============================================================ */
.editor-takte { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.editor-umbruch { flex-basis: 100%; height: 0; }
.editor-takt {
    display: flex; align-items: stretch; flex: 0 0 auto;
    border: 1px solid var(--rand); border-radius: 10px; overflow: hidden;
    background: var(--bg-erhoben); position: relative;
}
/* Ueberlang (zu viel eingetragen) - zu wenig sieht man schon an den leeren
   Kaestchen, aber ein zu voller Takt wirkte vorher wie ein ganz normaler.
   Bewusst nur ein ganz leichter Rotton, kein Alarm-Rot. */
.editor-takt.ueberlang { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .45); }
.editor-takt .takt-nr {
    position: absolute; top: 2px; left: 5px; font-size: .62rem; font-weight: 800;
    color: var(--text-schwach);
}
.editor-takt .takt-entfernen {
    display: flex; align-items: center; justify-content: center;
    width: 22px; color: var(--text-schwach); border-left: 1px solid var(--rand-schwach);
    background: transparent; border-top: none; border-bottom: none; border-right: none;
}
.editor-takt .takt-entfernen:hover { color: var(--gefahr); background: var(--rand-schwach); }
.editor-platz {
    min-width: 34px; display: flex; align-items: center; justify-content: center;
    padding: 2px 3px; border-right: 1px dashed var(--rand-schwach); cursor: pointer;
    min-height: 58px;
}
.editor-platz:last-of-type { border-right: none; }
.editor-platz.leer { background: var(--rand-schwach); opacity: .55; }
.editor-platz { position: relative; }
.editor-platz .noten-feld { cursor: pointer; }
.editor-platz .platz-weg {
    position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0;
    border: none; border-radius: 50%; background: transparent; color: var(--text-schwach);
    font-size: .8rem; line-height: 16px; cursor: pointer; opacity: .55;
}
.editor-platz .platz-weg:hover { opacity: 1; color: var(--gefahr); background: var(--rand-schwach); }
.editor-platz.ziel { outline: 2px solid var(--akzent); outline-offset: -2px; }
.editor-platz.jetzt { background: var(--warnung); opacity: 1; }
.editor-platz svg { color: var(--text); }
.editor-platz.jetzt svg { color: var(--warnung-text); }
/* Feste Hoechsthoehe statt Prozent: Prozentwerte brauchen eine definierte
   Hoehe am Elternelement, die ein Flex-Kaestchen mit nur min-height nicht
   hat - ohne diese feste Grenze waere die Skalierung in manchen Browsern
   undefiniert. */
.baustein-svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; margin: 0 auto; }

/* Palette der waehlbaren Bausteine */
.palette { display: flex; flex-wrap: wrap; gap: .4rem; }
.palette-gruppe { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; border-radius: 10px; background: var(--bg-erhoben); }
.palette-baustein {
    border: 1px solid var(--rand); background: var(--bg-karte); border-radius: 8px;
    padding: 4px 6px; min-width: 40px; height: 52px; display: flex; align-items: center; justify-content: center;
    color: var(--text); touch-action: none; user-select: none;
}
.palette-baustein:hover { border-color: var(--akzent); }
.palette-baustein.gezogen { opacity: .35; }
.palette-baustein.aus { opacity: .3; filter: grayscale(1); pointer-events: none; }
.rhy-geist { position: fixed; z-index: 999; pointer-events: none; width: 60px; height: 60px; opacity: .85; }

/* Auswahl-Kaestchen im Uebungsgenerator: anders als die Palette oben nicht
   ziehbar, sondern an/aus zum Toggeln - angelehnt, aber eigene Zustaende. */
.gen-baustein {
    border: 1px solid var(--rand); background: var(--bg-karte); border-radius: 8px;
    padding: 4px 6px; min-width: 40px; height: 52px; display: flex; align-items: center; justify-content: center;
    color: var(--text-schwach); opacity: .45; cursor: pointer; transition: opacity .1s, border-color .1s;
}
.gen-baustein:hover { opacity: .7; }
.gen-baustein.an { opacity: 1; color: var(--text); border-color: var(--akzent); background: var(--bg-erhoben); }

/* ============================================================
   ANZEIGE: der grosse, mehrzeilige Notensatz fuer den Beamer.
   ============================================================ */
.anzeige-karte { text-align: center; }
/* Vollbild fuer den Beamer: :fullscreen deckt die meisten Browser ab, die
   .vollbild-Klasse (von app.js per fullscreenchange gesetzt) faengt Faelle
   auf, in denen das Pseudoselektor-Matching auf dem jeweiligen Geraet
   unzuverlaessig ist. Groesser, mittig, eigener Hintergrund statt des
   Browser-Standard-Schwarz. */
#anzeige-karte:fullscreen,
#anzeige-karte.vollbild {
    /* position:fixed ist der eigentliche Kern: Ohne das bleibt die Karte,
       egal wie breit/hoch sie rechnerisch ist, an ihrer normalen Stelle im
       Seitenfluss stehen - bei einem Scrollstand weiter unten (z.B. weil
       man vorher im Editor war) landet dann genau "das Bild zu weit unten",
       weil der sichtbare Fullscreen-Ausschnitt eine Seite zeigt, die selbst
       noch mitten im normalen Dokumentfluss liegt, statt an den
       Bildschirmrand gepinnt zu sein. */
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; max-width: none;
    display: block;
    padding: 0; margin: 0; background: var(--bg-karte); overflow: auto; border-radius: 0;
}
/* Der Kopf (Bedienelemente) liegt absolut ueber dem Bild, statt als Grid-
   Zeile Platz wegzunehmen - sonst zentrieren wir nur noch "die Reststelle
   unter dem Kopf", und je hoeher der Kopf, desto weiter rutscht die Mitte
   nach unten. Die Noten sollen aber in der Mitte des ganzen Bildschirms
   stehen, nicht der Mitte des Rests - deshalb #anzeige absolut auf 50/50%
   mit transform, unabhaengig von der Kopf-Hoehe. */
#anzeige-karte:fullscreen .vollbild-kopf,
#anzeige-karte.vollbild .vollbild-kopf {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 1.6rem 3rem 0; z-index: 1; background: var(--bg-karte);
}
#anzeige-karte:fullscreen #anzeige,
#anzeige-karte.vollbild #anzeige {
    /* width (nicht nur max-width) ist absichtlich fest: ausserhalb des
       normalen Flusses (position:absolute, kein "right") wuerde sich die
       Breite sonst nach dem Inhalt richten - und genau diese Breite liest
       anzeigeNeuZeichnen() VOR dem Zeichnen aus, um "Takte/Zeile: auto" zu
       berechnen. Ohne feste Breite waere das beim ersten Zeichnen 0. */
    position: absolute; top: 0; bottom: 0; left: 3vw; right: 3vw;
    /* Oben genau die Kopf-Hoehe frei (app.js misst sie, --kopf-hoehe),
       unten gleich viel: So steht ein Notenbild, das passt, in der Mitte
       des ganzen Bildschirms. Wird es durch "Groesse" hoeher als der Platz,
       sorgt "safe center" dafuer, dass es direkt unter dem Kopf beginnt und
       nach unten scrollt, statt oben unter die Bedienelemente zu wachsen. */
    padding: calc(var(--kopf-hoehe, 12rem) + 1vh) 0 calc(var(--kopf-hoehe, 12rem) + 1vh);
    margin: 0; overflow: auto;
    display: flex; flex-direction: column; justify-content: safe center; align-items: safe center;
}
/* Sonst quetscht die Flex-Spalte die Notenzeilen auf Hoehe 0, sobald sie
   zusammen hoeher sind als der Platz - statt sie scrollen zu lassen. */
#anzeige-karte:fullscreen #anzeige > *,
#anzeige-karte.vollbild #anzeige > * { flex-shrink: 0; }
#anzeige-karte:fullscreen .anzeige-hinweis,
#anzeige-karte.vollbild .anzeige-hinweis {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0; font-size: 1.3rem; white-space: nowrap;
}
#anzeige-karte:fullscreen .anzeige-system,
#anzeige-karte.vollbild .anzeige-system { margin-bottom: .8rem; }
/* Natuerliche Groesse, nicht auf 100% gestreckt: Jede Zeile hat ihre eigene
   Breite (je nachdem, wie viele Takte hineinpassten) - mit width:100%
   wuerde ausgerechnet eine kuerzere letzte Zeile (weniger Takte, weniger
   Fuellung) staerker aufgeblasen als eine volle Zeile und die Noten saehen
   von Zeile zu Zeile unterschiedlich gross aus.
   Bewusst KEIN max-width:100% - bei fester Takte-pro-Zeile-Zahl haengt die
   natuerliche Breite nicht von der verfuegbaren Breite ab (anders als im
   "auto"-Modus), ein Deckel haette den Groesse-Regler irgendwann einfach
   wirkungslos gemacht. #anzeige faengt das stattdessen mit horizontalem
   Scrollen ab, falls eine Zeile trotz Skalierung breiter wird als die Karte. */
#anzeige, #druck-anzeige { overflow-x: auto; }
.anzeige-system { width: auto; display: block; margin: 0 auto .3rem; }
.anzeige-system .kopf,
.anzeige-system .zaehlzeit { fill: var(--text); }
.anzeige-system line, .anzeige-system path, .anzeige-system rect, .anzeige-system ellipse, .anzeige-system circle {
    color: var(--text);
}
.anzeige-system .linien-fuenf { color: var(--text-schwach); }
.anzeige-system [data-ab] { transition: opacity .1s; }
.anzeige-verdeckt .anzeige-system [data-ab],
.anzeige-verdeckt .anzeige-system .handsatz { opacity: 0; }
.anzeige-system .handsatz { fill: var(--akzent); }
.anzeige-verdeckt .anzeige-hinweis { display: block; }
.anzeige-hinweis {
    display: none; color: var(--text-gedaempft); font-weight: 700; font-size: .85rem; margin-top: -.4rem;
}
/* kopf-hohl (halbe/ganze Note) bleibt hohl - sonst sieht sie markiert
   wie eine ausgefuellte Viertelnote aus, nur die Umrandung faerbt mit. */
[data-ab].jetzt > *:not(.kopf-hohl) { fill: var(--warnung) !important; stroke: var(--warnung) !important; }
[data-ab].jetzt > .kopf-hohl { stroke: var(--warnung) !important; }

/* ---------- Metronom ---------- */
.metronom-puls { display: flex; gap: 5px; }
.metro-punkt {
    width: 11px; height: 11px; border-radius: 50%; background: var(--rand-schwach);
    border: 1px solid var(--rand);
}
.metro-punkt.eins { border-color: var(--akzent); }
.metro-punkt.an { background: var(--warnung); border-color: var(--warnung); }

/* ---------- Toast ---------- */
#toast-bereich { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.toast {
    background: var(--bg-erhoben); border: 1px solid var(--rand); color: var(--text);
    padding: .55rem .9rem; border-radius: 10px; font-size: .85rem; font-weight: 600; box-shadow: var(--schatten);
    animation: toast-ein .15s ease-out;
}
.toast.danger { border-color: var(--gefahr); color: var(--gefahr); }
.toast.success { border-color: var(--erfolg); color: var(--erfolg); }
@keyframes toast-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
    main { padding: .7rem; }
    .editor-platz { min-width: 28px; min-height: 48px; }
}

/* ---------- Übungsansicht (?ansicht=uebung): eingebettet, z.B. in Beat Vault ----------
   Nur Notenbild, Abspielen, Tempo und Metronom - ohne Editor, Speichern,
   Export und Druck. Gleiches Notenbild, gleicher Klang wie die volle Seite. */
.ansicht-uebung .nicht-in-uebung { display: none !important; }
.ansicht-uebung body { min-height: 0; padding-bottom: 0; background: transparent; }
.ansicht-uebung main { padding: 0; max-width: none; }
.ansicht-uebung .anzeige-karte { margin: 0; }

/* ---------- Loop-Bereich: angetippte Takte bzw. Übung ---------- */
.anzeige-system .takt-feld, .anzeige-system .uebung-nr { cursor: pointer; }
.anzeige-system .takt-auswahl { fill: var(--akzent); opacity: .22; stroke: none; }
#loop-auswahl-info { font-size: .85rem; color: var(--text-gedaempft); }
#loop-auswahl-info b { color: var(--akzent); }
.anzeige-tipp { font-size: .75rem; color: var(--text-schwach); margin: 0 0 .4rem; text-align: center; }
@media print { .anzeige-tipp, #loop-auswahl-info { display: none !important; } }
.anzeige-system .noten-feld { cursor: pointer; }

/* ============================================================
   REITER: Rhythmus-Werkstatt | Beat-Werkstatt
   ============================================================ */
.reiter { display: flex; gap: .25rem; background: var(--bg); border: 1px solid var(--rand-schwach); border-radius: 12px; padding: .2rem; }
.reiter-knopf {
    border: none; background: transparent; color: var(--text-gedaempft);
    padding: .4rem .8rem; border-radius: 9px; font-size: .82rem; font-weight: 800; white-space: nowrap;
}
.reiter-knopf:hover { color: var(--text); background: var(--rand-schwach); }
.reiter-knopf.an { background: var(--akzent); color: #fff; }
@media (max-width: 760px) {
    .kopfzeile { flex-wrap: wrap; }
    .kopfzeile .untertitel { display: none; }
}

/* ============================================================
   BEAT-WERKSTATT (js/beat.js)
   ============================================================ */
.bw-segment { display: flex; }
.bw-segment .btn { border-radius: 0; }
.bw-segment .btn:first-child { border-radius: 10px 0 0 10px; }
.bw-segment .btn:last-child { border-radius: 0 10px 10px 0; border-left: none; }
.bw-backbeat-feld { padding: .3rem .6rem; border: 1px solid var(--rand-schwach); border-radius: 10px; background: var(--bg-erhoben); }
.bw-legende { font-size: .78rem; color: var(--text-gedaempft); margin: 0 0 .7rem; }
.bw-hinweis-bb { color: var(--snare); font-weight: 700; }
.bw-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: baseline; }
.bw-punkt.bw-bass { background: var(--bass); }
.bw-punkt.bw-snare { background: var(--snare); }
.bw-punkt.bw-becken { background: var(--becken); }
.bw-punkt.bw-wechsel { background: linear-gradient(90deg, var(--bass) 50%, var(--snare) 50%); }

/* Editor: Takte als Kaesten, darin je Ebene eine Reihe mit vier Plaetzen -
   gleiche Zaehlzeit steht genau untereinander. */
.bw-takte { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .9rem; }
.bw-takt {
    border: 1px solid var(--rand); border-radius: 12px; background: var(--bg-erhoben);
    overflow: hidden; flex: 0 1 auto; max-width: 100%;
}
.bw-takt-kopf {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .25rem .5rem; font-size: .7rem; font-weight: 800; color: var(--text-schwach);
    border-bottom: 1px solid var(--rand-schwach);
}
.bw-kopieren {
    border: none; background: transparent; color: var(--text-schwach); font-size: .68rem; font-weight: 700;
    padding: .1rem .3rem; border-radius: 6px;
}
.bw-kopieren:hover { color: var(--akzent); background: var(--rand-schwach); }
.bw-reihe { display: grid; grid-template-columns: repeat(4, minmax(52px, 84px)); }   /* Spaltenzahl = Taktart, setzt beat.js */
#bw-editor.ghost-modus .noten-feld { cursor: cell; }
.bw-platz .bw-raster:hover { fill: color-mix(in srgb, var(--akzent) 24%, transparent); }
.bw-platz { position: relative; cursor: pointer; border-right: 1px dashed var(--rand-schwach); color: var(--text); }
.bw-platz:last-child { border-right: none; }
.bw-platz svg { display: block; width: 100%; height: auto; }
/* Im Platz sind nur die Ebenen-Flaechen und die Noten-Felder antippbar -
   so entscheidet die getroffene Flaeche, welche Ebene gemeint ist. */
.bw-platz svg * { pointer-events: none; }
.bw-platz svg .bw-band, .bw-platz svg .noten-feld { pointer-events: all; cursor: pointer; }
.bw-band { fill: transparent; }
.bw-band.leer { fill: color-mix(in srgb, var(--rand-schwach) 55%, transparent); }
.bw-band.aktiv { fill: color-mix(in srgb, var(--akzent) 16%, transparent); stroke: var(--akzent); stroke-width: 2.5; }
.bw-platz.jetzt { background: color-mix(in srgb, var(--warnung) 30%, transparent); }
.bw-platz .noten-feld:hover { fill: color-mix(in srgb, var(--akzent) 20%, transparent); }
.bw-schlag-nr { position: absolute; top: 2px; left: 4px; font-size: .6rem; font-weight: 800; color: var(--text-schwach); pointer-events: none; }
.bw-weg {
    position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0;
    border: none; border-radius: 50%; background: transparent; color: var(--text-schwach);
    font-size: .8rem; line-height: 16px; opacity: .55;
}
.bw-weg.bw-weg-unten { top: auto; bottom: 1px; }
.bw-weg:hover { opacity: 1; color: var(--gefahr); background: var(--rand-schwach); }
.bw-linie { opacity: .3; }
.bw-platz .bw-auto { opacity: .45; }

/* Farbe nur mit „Farbe an“ (Klasse bw-bunt auf #reiter-beat) - sonst
   alles in Textfarbe wie gedruckte Noten. */
.bw-bunt ellipse.bw-bass { fill: var(--bass); }
.bw-bunt ellipse.bw-snare { fill: var(--snare); }
.bw-bunt path.bw-becken { stroke: var(--becken); }
#reiter-beat:not(.bw-bunt) .bw-punkt { display: none; }
#reiter-beat:not(.bw-bunt) .bw-hinweis-bb { color: var(--text); }

/* Werkzeug: Stifte + Bausteine fuer die gewaehlte Reihe */
.bw-werkzeug { display: flex; flex-direction: column; gap: .6rem; padding-top: .7rem; border-top: 1px solid var(--rand-schwach); }
.bw-ziel { font-size: .8rem; color: var(--text-gedaempft); margin-right: .4rem; }
.bw-ziel b { color: var(--text); }
.bw-chip { padding: .35rem .65rem; font-size: .78rem; display: inline-flex; align-items: center; gap: .35rem; }
.bw-baustein { height: auto; padding: 2px 4px; touch-action: manipulation; }
.bw-baustein svg { display: block; width: 66px; height: auto; }
.bw-baustein { position: relative; }
.bw-taste {
    position: absolute; right: 2px; bottom: 2px; min-width: 1.05rem; padding: 0 .2rem;
    font-size: .62rem; font-weight: 800; line-height: 1.05rem; text-align: center;
    border-radius: 4px; background: var(--rand-schwach); color: var(--text-gedaempft);
}
.bw-tastatur kbd {
    display: inline-block; font-family: inherit; font-size: .68rem; font-weight: 800;
    padding: 0 .3rem; margin: 0 .05rem; border: 1px solid var(--rand); border-bottom-width: 2px;
    border-radius: 4px; background: var(--bg-erhoben); color: var(--text-gedaempft);
}

.bw-stumm-knopf { display: inline-flex; align-items: center; gap: .35rem; }
.bw-stumm-knopf.stumm { opacity: .45; text-decoration: line-through; }

/* Notenbild */
.bw-anzeige { overflow-x: auto; color: var(--text); }
.bw-system { display: block; margin: 0 auto .4rem; max-width: 100%; height: auto; }
.bw-system .kopf, .bw-system .zaehlzeit { fill: var(--text); }
.bw-system .bw-linie-anzeige { color: var(--text-schwach); }
.bw-system .bw-spiel { fill: transparent; }
.bw-system .bw-spiel.jetzt { fill: var(--warnung); opacity: .28; }
@media print { #reiter-beat { display: none !important; } }

/* Vollbild (Beamer): Notenbild so gross wie moeglich, bwAnzeigeZeichnen
   rechnet den Massstab aus dem freien Platz. */
#bw-anzeige-karte:fullscreen, #bw-anzeige-karte.vollbild {
    position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none;
    margin: 0; border-radius: 0; padding: 1.4rem 3vw; overflow: auto; background: var(--bg-karte);
    display: flex; flex-direction: column;
}
#bw-anzeige-karte.vollbild .bw-nicht-im-vollbild { display: none; }
#bw-anzeige-karte.vollbild #bw-anzeige {
    flex: 1; display: flex; flex-direction: column; justify-content: safe center; align-items: center;
}
#bw-anzeige-karte.vollbild .bw-system { max-width: none; flex-shrink: 0; }

/* ============================================================
   DRUMSET-WERKSTATT (js/drumset.js) - nutzt die bw-Bausteine oben,
   hier nur, was dazukommt.
   ============================================================ */
.ds-stifte { gap: .3rem; }
.ds-trenner { width: 1px; align-self: stretch; margin: 0 .2rem; background: var(--rand-schwach); }
.ds-stift { padding: .2rem .55rem .2rem .3rem; gap: .3rem; }
.ds-stift .ds-lage { color: var(--text); flex-shrink: 0; }
.ds-stift.an .ds-lage { color: #fff; }
.ds-stift-name { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; }
.ds-taste { font-size: .62rem; font-weight: 800; padding: 0 .25rem; border-radius: 4px; background: var(--rand-schwach); color: var(--text-gedaempft); }
.ds-stift.an .ds-taste { background: rgba(255, 255, 255, .25); color: #fff; }
.ds-palette { align-items: stretch; gap: .5rem; }
.ds-palette .palette-gruppe { align-items: center; }
.ds-gruppe-name { font-size: .68rem; font-weight: 800; color: var(--text-schwach); writing-mode: vertical-rl; transform: rotate(180deg); }
.ds-baustein svg { width: 76px; }
.ds-raster-punkt { fill: var(--text-schwach); opacity: .7; }
.ds-system .ds-tuplet, .bw-platz .ds-tuplet, .ds-baustein .ds-tuplet { fill: currentColor; }
.bw-punkt.ds-p-becken { background: var(--becken); }
.bw-punkt.ds-p-snare { background: var(--snare); }
.bw-punkt.ds-p-tom { background: var(--tom); }
.bw-punkt.ds-p-bass { background: var(--bass); }
#reiter-drumset:not(.ds-bunt) .bw-punkt { display: none; }
.ds-bunt ellipse.ds-bass { fill: var(--bass); }
.ds-bunt ellipse.ds-snare { fill: var(--snare); }
.ds-bunt ellipse.ds-tom { fill: var(--tom); }
.ds-bunt path.ds-becken { stroke: var(--becken); }
@media print { #reiter-drumset { display: none !important; } }
#ds-anzeige-karte:fullscreen, #ds-anzeige-karte.vollbild {
    position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none;
    margin: 0; border-radius: 0; padding: 1.4rem 3vw; overflow: auto; background: var(--bg-karte);
    display: flex; flex-direction: column;
}
#ds-anzeige-karte.vollbild .bw-nicht-im-vollbild { display: none; }
#ds-anzeige-karte.vollbild #ds-anzeige {
    flex: 1; display: flex; flex-direction: column; justify-content: safe center; align-items: center;
}
#ds-anzeige-karte.vollbild .bw-system { max-width: none; flex-shrink: 0; }

/* ============================================================
   LEISTE "Metronom & Anzeige": drei Zeilen (Spielen, Notenbild, Blatt),
   einheitliche Bausteine - Chips zum Umschalten, Regler mit Name und Wert,
   ein Menue fuer alles zum Speichern.
   ============================================================ */
.steuer-zeile { margin-bottom: .6rem; row-gap: .5rem; }
.steuer-zeile + .steuer-zeile { padding-top: .6rem; border-top: 1px solid var(--rand-schwach); }
.metronom-gruppen { display: contents; }

/* Chip = Schalter als Knopf: versteckte Checkbox, angezeigt wird der span */
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--rand); background: var(--bg-erhoben); color: var(--text-gedaempft);
    border-radius: 999px; padding: .38rem .8rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.chip:hover span { border-color: var(--akzent); color: var(--text); }
.chip input:checked + span { background: var(--akzent); border-color: var(--akzent-stark); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Umschalter aus zwei Knoepfen */
.segment { display: inline-flex; }
.segment .btn { border-radius: 0; }
.segment .btn:first-child { border-radius: 10px 0 0 10px; }
.segment .btn:last-child { border-radius: 0 10px 10px 0; border-left: none; }

/* Regler: Name klein, Schieber, Wert in fester Breite */
.regler {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .6rem; border: 1px solid var(--rand-schwach); border-radius: 10px; background: var(--bg-erhoben);
}
.regler-name { font-size: .72rem; font-weight: 700; color: var(--text-gedaempft); white-space: nowrap; }
.regler input[type="range"] { width: 6rem; accent-color: var(--akzent); }
.regler-wert { min-width: 2.4rem; text-align: right; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.btn-icon { padding: .4rem .55rem; }
.metronom-feld .btn-icon { padding: .25rem .45rem; font-size: .8rem; }

/* Menue "Speichern" */
.menue { position: relative; }
.menue summary { list-style: none; cursor: pointer; }
.menue summary::-webkit-details-marker { display: none; }
.menue-liste {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 12rem;
    display: flex; flex-direction: column; padding: .3rem;
    background: var(--bg-erhoben); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schatten);
}
.menue-liste button {
    display: flex; align-items: center; gap: .55rem; text-align: left;
    border: none; background: transparent; color: var(--text); padding: .5rem .65rem;
    border-radius: 7px; font-size: .85rem; font-weight: 700;
}
.menue-liste button:hover { background: var(--rand-schwach); }
.menue-liste button i { width: 1.1rem; text-align: center; color: var(--text-gedaempft); }
.menue-liste button:disabled { opacity: .4; }