:root {
  --bg-1: #f1f5f9;
  --bg-2: #e2e8f0;
  --bg-3: #1e3a8a;
  --ink: #0f172a;
  --ink-soft: #64748b;
  --paper: #ffffff;
  --paper-alt: #f1f5f9;
  --line: #cbd5e1;
  --border-strong: #94a3b8;
  --line-dark: #2563eb;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark: #b45309;
  --star: #d97706;
  --ok: #10b981;
  --ok-bg: rgba(16, 185, 129, 0.14);
  --warn: #e11d48;
  --warn-bg: rgba(225, 29, 72, 0.12);
  --pending: #f59e0b;
  --pending-bg: rgba(245, 158, 11, 0.14);
  --measure-gap: 18px;
  font-size: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 60%, #cbd5e1 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  /* touch-action:none bewusst NICHT hier (würde jedes Scrollen auf der
     ganzen Seite per Touch blockieren) - nur die einzelnen ziehbaren
     Karten (.note-card, .placed-note, ...) bekommen es weiter unten. */
}

h1, h2, h3 { margin: 0; }

/* Die Noten-/Pausen-SVGs in script.js sind fest dunkel gefüllt (#1a1a1a) -
   auf dem jetzt hellen Kartengrund von Natur aus gut lesbar, kein
   Filtertrick mehr nötig (anders als in der ersten, dunklen Testversion). */

/* ---------- Toolbar ---------- */

/* Die Werkzeugleiste zeigt nur noch den Titel - eine Zeile, egal wie
   schmal/niedrig der Bildschirm ist (wichtig im Querformat auf dem Handy,
   wo die Höhe knapp ist). Alle Aktionen sitzen jetzt entweder direkt beim
   Raster ("+ Takt") oder unten bei Abspielen ("Einstellungen"). */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--bg-3);
  color: var(--accent-light);
  border-bottom: 4px solid var(--line-dark);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
  position: sticky;
  top: 0;
  z-index: 20;
}

.toolbar h1 {
  font-size: 1.3rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Führt immer zurück zur App-Übersicht (eigenes Repo) - bewusst getrennt
   von etwaigen In-App-"Zurück"-Knöpfen (die nur zum vorherigen Bildschirm
   INNERHALB der App führen) und deshalb ganz links, dauerhaft sichtbar. */
.toolbar-home-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  text-decoration: none;
  color: var(--accent-light);
  padding: 4px 10px;
  border-radius: 10px;
  flex: none;
  margin-left: auto;
}
.toolbar-home-link:hover { background: rgba(255, 255, 255, 0.1); }
.toolbar-home-arrow { font-size: 1.3rem; }
.toolbar-home-label { font-size: 0.62rem; font-weight: 700; margin-top: 1px; }

/* Dunkler "Chip"-Knopf, bewusst unabhängig davon, ob er gerade in der
   dunklen Toolbar oder unten über dem hellen Seiteninhalt sitzt - so
   bleibt der Amber-auf-Dunkel-Kontrast überall gleich gut lesbar (Amber
   auf Weiß wäre zu blass). */
.btn {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 20px;
  border: 2px solid var(--line-dark);
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--accent-light);
  cursor: pointer;
  min-height: 48px;
}
.btn:hover { background: #1d4ed8; }

.btn:disabled { opacity: 0.4; cursor: default; }

.btn-secondary { background: var(--bg-3); }

/* "+ Takt" sitzt direkt unter der Taktliste (nicht mehr oben in der
   Werkzeugleiste) - ein Klick fügt den neuen Takt genau dort ein, wo man
   grade hinschaut, statt dass man erst nach oben scrollen müsste. */
.add-measure-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 24px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
}

/* Einstellungen + Abspielen bleiben als Einheit fest unten am Bildschirm,
   damit beide immer erreichbar sind, egal wie weit man durch die Takte
   gescrollt hat, und ohne oben Platz zu brauchen. */
.bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
}

.play-pause-btn {
  padding: 16px 36px;
  border: 2px solid var(--ok);
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #34d399 0%, var(--ok) 100%);
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.45);
  cursor: pointer;
  min-height: 56px;
  min-width: 200px;
}

.play-pause-btn.is-playing {
  background: var(--warn);
  border-color: var(--warn);
}

/* Solange mindestens ein Takt übervoll ist, darf gar nicht erst abgespielt
   werden - deutlich sichtbar statt beim Klick nur stillschweigend nichts
   zu tun. */
.play-pause-btn:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.bottom-bar .btn-secondary {
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
}

.tempo-label, .metronome-label, .volume-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  white-space: nowrap;
}

.tempo-label input[type="range"],
.volume-label input[type="range"] {
  width: 140px;
  accent-color: var(--accent);
}

.metronome-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

/* Tempo/Grundschlag sind ein Flyout statt permanent in der
   Werkzeugleiste - die bleibt dadurch bei jeder Bildschirmbreite kurz,
   statt bei jedem Umbruch höher zu werden und den Rest zu verdecken.
   Fixed statt absolute (nicht mehr an die schmale .bottom-bar-Breite
   gebunden) und über die volle Displaybreite - die Regler fließen dadurch
   in Zeilen statt in einer einzigen hohen Spalte übereinander zu stehen,
   das Panel bleibt so auch im flachen Querformat kurz. */
.settings-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 100px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 14px 28px;
  z-index: 25;
  max-height: 70vh;
  overflow-y: auto;
}

/* [hidden] hat allein dieselbe Spezifität wie die Klasse oben und würde
   ohne diese kombinierte Regel vom display:flex überschrieben. */
.settings-panel[hidden] {
  display: none;
}

.settings-panel .tempo-label,
.settings-panel .metronome-label,
.settings-panel .volume-label {
  font-size: 1rem;
}

.settings-panel .tempo-label input[type="range"],
.settings-panel .volume-label input[type="range"] {
  width: 100%;
  margin-top: 6px;
}

.settings-panel .tempo-label,
.settings-panel .volume-label {
  flex: 1 1 190px;
  max-width: 260px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.settings-panel .metronome-group,
.settings-panel .repeat-label {
  flex: 0 0 auto;
}

/* Grundschlag + Einzähler als Einheit gestapelt (nicht nebeneinander) -
   der Wrapper selbst ist EIN Flex-Item im Panel, gestapelt sind nur die
   zwei Checkboxen darin. */
.metronome-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* QR-Code zum spontanen Öffnen der App auf Schüler-Tablets - eigene
   schmale Spalte im Flyout, Bild oben, kurzer Hinweistext darunter. Der
   QR-Code selbst bleibt bewusst schwarz auf weiß (nicht Teil des
   Style-Tests) - sonst wird er auf Kamera-Scannern schlechter erkannt. */
.qr-share {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 130px;
  text-align: center;
}
.qr-share img {
  width: 110px;
  height: 110px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px;
  background: white;
}
.qr-share span {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* Eigene, volle Zeile unten im Einstellungen-Flyout statt zwischen den
   Reglern zu verschwinden - klar als eigener, dauerhaft erreichbarer
   Menüpunkt erkennbar (Zwei-Klick-Regel: Einstellungen -> Impressum). */
.settings-legal-link {
  flex: 1 1 100%;
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: none;
}
.settings-legal-link:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

/* Notenwerte-Palette liegt horizontal über den Takten (nicht mehr als
   schmale Seitenleiste), damit der ganze Breitenraum für die Rhythmen
   selbst frei bleibt. Noten links, Pausen rechts, klar per Trennlinie
   geschieden. */
.palette {
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  padding: 12px 24px;
}

.palette-columns {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.palette-group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.palette-group + .palette-group {
  border-left: 2px solid var(--line);
  padding-left: 24px;
}

.palette-group h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* Spaltenzahl kommt per JS (renderPalette) als --palette-cols - so viele
   Spalten wie nötig, um alle Karten in maximal 2 Zeilen unterzubringen
   (ceil(Anzahl/2)), bei jeder Bildschirmgröße. */
.palette-cards {
  display: grid;
  grid-template-columns: repeat(var(--palette-cols, 2), 1fr);
  gap: 8px;
}

.palette-hint {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  /* align-items:flex-start (oben für die Desktop-Zeile gedacht) steuert bei
     flex-direction:column plötzlich die BREITE statt der Höhe - die Gruppe
     würde sonst nur auf ihre Inhaltsbreite schrumpfen statt volle Breite zu
     bekommen. */
  .palette-columns { flex-direction: column; align-items: stretch; gap: 16px; }
  .palette-group + .palette-group {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid var(--line);
    padding-top: 12px;
  }
}

main {
  padding: 20px 24px 100px;
}

.score {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--measure-gap);
}

.measures {
  display: flex;
  flex-direction: column;
  gap: var(--measure-gap);
}

/* ---------- Note card (palette + placed) ---------- */

/* container-type:inline-size bleibt für die @container-Regel unten (Icon
   über/neben Text) nötig. Icon-/Schriftgröße selbst kommen jetzt aber NICHT
   mehr aus cqw (das würde Noten und Pausen unterschiedlich groß machen, je
   nachdem wie viele Spalten die jeweilige Gruppe hat), sondern aus JS
   berechneten --palette-*-Variablen, die sich an der ENGEREN der beiden
   Gruppen orientieren (siehe syncPaletteCardSizes in script.js) - Noten und
   Pausen sehen dadurch immer gleich groß aus. */
.note-card {
  container-type: inline-size;
  background: var(--paper);
  border: 3px solid var(--border-strong);
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
}

/* Eigener Flex-Wrapper statt Flex direkt auf .note-card: eine @container-
   Regel kann den Container selbst nicht anhand seiner eigenen Breite
   umschalten (das griff nie, obwohl es unauffällig so aussah), nur einen
   Nachfahren - deshalb sitzt das Layout hier auf .card-body. Das Padding
   sitzt bewusst auch hier (statt auf .note-card): die @container-Abfrage
   misst die Content-Box des Containers OHNE dessen Padding - läge das
   Padding auf .note-card selbst, wäre die gemessene Breite immer knapp
   unter dem Schwellenwert und die Abfrage würde fast permanent zuschlagen. */
.note-card .card-body {
  display: flex;
  align-items: center;
  gap: var(--palette-card-gap, 8px);
  padding: var(--palette-card-pad-y, 6px) var(--palette-card-pad-x, 10px);
  color: var(--ink);
}

.note-card .icon {
  width: var(--palette-icon-w, 32px);
  height: var(--palette-icon-h, 38px);
  flex: none;
}

.note-card .icon svg { width: 100%; height: 100%; display: block; }

.note-card .label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

/* Kein nowrap/ellipsis: bei sehr schmalen Karten (z.B. 3 Spalten auf einem
   Handy) darf der Name lieber zweizeilig umbrechen, als abgeschnitten oder
   überlappend zu wirken. */
.note-card .label .name {
  font-weight: 700;
  font-size: var(--palette-name-size, 0.8rem);
}
.note-card .label .beats {
  font-size: var(--palette-beats-size, 0.68rem);
  color: var(--ink-soft);
}

/* Ist die Karte insgesamt zu schmal für Icon+Text nebeneinander, steht das
   Icon stattdessen über dem (zentrierten) Text - container-basiert, hängt
   also von der tatsächlichen Kartenbreite ab, nicht vom Bildschirm. */
@container (max-width: 112px) {
  .note-card .card-body {
    flex-direction: column;
    text-align: center;
  }
  .note-card .label { align-items: center; }
}

/* ---------- Measure ---------- */

.measure {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  transition: border-color 0.15s, background 0.15s;
}

.measure.status-offen { border-color: var(--pending); background: var(--pending-bg); }
.measure.status-voll { border-color: var(--ok); background: var(--ok-bg); }
.measure.status-uebervoll { border-color: var(--warn); background: var(--warn-bg); }

/* Übervoll: die überzähligen Noten laufen einfach sichtbar aus (statt
   einen Scrollbalken zu brauchen) - der rote Rahmen + "Übervoll!" sagen
   bereits klar genug, dass es nicht passt. */
.measure.status-uebervoll .slot-track {
  -webkit-mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
}

.measure-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.measure-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.measure-status {
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
}

.measure.status-offen .measure-status { background: var(--pending); color: var(--bg-3); }
.measure.status-voll .measure-status { background: var(--ok); color: var(--bg-3); }
.measure.status-uebervoll .measure-status { background: var(--warn); color: #ffffff; }

.measure-remove {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 8px;
}
.measure-remove:hover { color: var(--warn); }

/* Sitzt zwischen der Zählzeiten-Anzeige und "Wiederholungen" im Kopf. */
.measure-randomize {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.measure-randomize:hover { border-color: var(--accent); color: var(--ink); }

/* Wiederholungen sitzt jetzt im Kopf links vom "×" (statt in einer eigenen
   Box neben dem Raster) - margin-left:auto schiebt beide gemeinsam an den
   rechten Rand der (ggf. umbrechenden) Kopfzeile. */
.measure-repeat {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: default;
}
.measure-repeat select {
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

/* Zwei Spalten (Taktart-Dropdown | Raster), zwei Zeilen (Notenspur |
   Zählzeiten-Zahlen) - die Taktart sitzt dadurch direkt vor dem ersten Feld
   im Raster, wie eine echte Taktvorzeichnung am Anfang der Notenzeile, und
   die Zählzeiten-Zahlen bleiben exakt unter der Notenspur (nicht auch unter
   dem Dropdown) ausgerichtet. */
.track-column {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: stretch;
}

/* Taktart-Dropdown in klassischer Notenschrift (zwei Ziffern übereinander,
   kein Bruchstrich) - ein eigener kleiner Menü-Button statt eines nativen
   <select>, damit auch der geschlossene Zustand wie eine echte
   Taktvorzeichnung aussieht. */
/* Nur Zeile 1 (die Notenspur), nicht auch die Zählzeiten-Zeile darunter -
   dadurch ist der Dropdown exakt so hoch wie EIN Feld im Raster, nicht wie
   Raster+Zählzeiten zusammen. */
.time-sig-dropdown {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  position: relative;
}

.time-sig-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1.05;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-alt);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
}
.time-sig-trigger:hover { border-color: var(--accent); }
.ts-num { display: block; }

/* position:fixed statt absolute, damit das Menü nicht vom overflow:hidden
   des Takts abgeschnitten wird - Position wird beim Öffnen per JS anhand
   der Trigger-Position gesetzt. */
.time-sig-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.25);
  padding: 4px;
  gap: 2px;
}
/* [hidden] hat allein dieselbe Spezifität wie die Klasse oben und würde
   ohne diese kombinierte Regel vom display:flex überschrieben (gleiches
   Muster wie beim .settings-panel-Fix). */
.time-sig-menu[hidden] {
  display: none;
}

.time-sig-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.time-sig-option:hover { background: var(--paper-alt); }
.time-sig-option.is-selected { background: var(--accent); color: var(--bg-3); }

.slot-track { grid-column: 2; grid-row: 1; }
.beat-labels { grid-column: 2; grid-row: 2; }

.slot-track {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 96px;
  width: 100%;
  border: 2px dashed var(--line);
  border-radius: 12px;
  overflow: visible;
}

.slot-track.drag-over {
  border-color: var(--accent);
  background-color: rgba(245, 158, 11, 0.12);
}

/* Laufender Zeigebalken beim Abspielen - läuft synchron zum Tempo über den
   Takt, damit sichtbar ist, WANN genau eine Note gespielt werden muss. */
.playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  pointer-events: none;
  z-index: 6;
  display: none;
}
.playhead.active { display: block; }

/* Einzähler-Overlay: schwebt transparent über dem ERSTEN Takt, solange
   "Abspielen" vorzählt - bewusst kein Hintergrund, damit das Raster
   dahinter die ganze Zeit gut sichtbar bleibt. Eigene Anzeige statt des
   normalen Playheads (siehe tick() in script.js), damit während des
   Zählens nicht der Eindruck entsteht, eine Note wäre schon "dran". */
.count-in-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Deutlich mehr Puffer unten als oben - schiebt die zentrierte Gruppe
     optisch nach oben, damit die Punkte-Reihe den farbigen Kartenrand
     nicht berührt. */
  padding: 4px 0 28px;
  pointer-events: none;
}
.count-in-overlay[hidden] { display: none; }

.count-in-number {
  font-size: 7rem;
  font-weight: 700;
  color: var(--accent-dark);
  opacity: 0.9;
  line-height: 1;
}
.count-in-number.bounce {
  animation: countInBounce 0.25s ease-out;
}
@keyframes countInBounce {
  0% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.count-in-dots {
  display: flex;
  gap: 8px;
}
.count-in-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.15s;
}
.count-in-dot.active {
  background: var(--accent);
}

/* Kurz eingeblendete Warnung, wenn eine Note/Pause den Takt übervoll
   gemacht hätte und deshalb NICHT abgelegt wurde (siehe onDragEnd in
   script.js) - verschwindet nach kurzer Zeit von selbst wieder. */
.measure-warning {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.measure-warning[hidden] { display: none; }
.measure-warning span {
  background: var(--warn);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Gleich breiter, unsichtbarer Rahmen wie .slot-track, damit beide vom
   selben Innenbereich (100%) ausgehen - sonst driften Notenkopf und
   Zählzeiten-Zahl mit jeder weiteren Note leicht auseinander. */
.beat-labels {
  display: grid;
  margin-top: 4px;
  border: 2px solid transparent;
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center; /* Zahl sitzt in der Spaltenmitte - genau da, wo auch der Notenkopf verankert ist */
}
.beat-labels span:nth-child(odd) { font-weight: 700; color: var(--ink); }
/* 6/8: jede Zahl ist ein eigener Achtel-Zählpunkt (kein "1 + 2 +"-Wechsel) -
   deshalb werden hier alle Zahlen gleich betont statt nur die ungeraden. */
.beat-labels-compound span { font-weight: 700; color: var(--ink); }

.placed-note {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 3px solid var(--border-strong);
  color: var(--ink);
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  align-self: stretch;
}

/* Im Raster hat jede Note jetzt eine feste Position (startUnit) statt in
   einer lückenlosen Reihe zu fließen - deshalb absolut statt per flex
   nebeneinander gereiht. Nur für die ECHTEN, im Takt liegenden Noten (nicht
   für den Drag-Ghost oder die Live-Vorschau, die ihre Höhe anders lösen). */
.slot-track > .placed-note,
.slot-track > .placed-note-pair {
  position: absolute;
  top: 0;
  bottom: 0;
}

.placed-note.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
}

/* Der Notenkopf sitzt IMMER an einer festen Position vom linken Rand der
   Note aus (nicht mittig in der ganzen Dauer-Fläche) - so wie auf der
   Notenwerte-Übersicht steht er exakt über der Zählzeit, an der die Note
   beginnt. Die Fläche rechts davon zeigt nur die Klangdauer. */
.placed-note .icon,
.insert-preview .icon {
  position: absolute;
  left: calc(var(--anchor-pct, 25) * 1% - 12.2px);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 40px;
}
.placed-note .icon svg,
.insert-preview .icon svg { width: 100%; height: 100%; display: block; }

.placed-note .delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.placed-note .delete-btn:hover { background: var(--warn); color: #ffffff; border-color: var(--warn); }

/* Achtelpaar: EINE gemeinsame Karte (wie jede andere Note), aber innen zwei
   unverzerrte Notenkopf-Grafiken (gleiche Form wie die Viertel, ohne
   Fähnchen) + ein Balken dazwischen statt einer gestreckten Einzelgrafik.
   Jede Hälfte bleibt einzeln greifbar/löschbar. */
.placed-note-pair {
  position: relative;
  display: flex;
  background: var(--paper);
  border: 3px solid var(--border-strong);
  border-radius: 10px;
  align-self: stretch;
}

.eighth-half {
  position: relative;
  flex: 0 0 50%;
  cursor: grab;
  touch-action: none;
}

.eighth-half .icon {
  position: absolute;
  left: calc(50% - 12.2px); /* jede Hälfte ist immer genau 1 Achtel-Einheit breit */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 40px;
}
.eighth-half .icon svg { width: 100%; height: 100%; display: block; }

.eighth-half .delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.eighth-half .delete-btn:hover { background: var(--warn); color: #ffffff; border-color: var(--warn); }
.eighth-half .delete-btn-left { right: auto; left: -10px; }

/* Balken: verbindet die Hälse der beiden Achtel - Position/Breite relativ
   zur Paar-Karte (die immer exakt 2 Achtel-Einheiten breit ist), damit es
   bei jeder Bildschirmgröße exakt passt. */
.beam-bar {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(25% + 5.8px);
  width: 50%;
  height: 6px;
  background: var(--ink);
  pointer-events: none;
}

.eighth-half.playing {
  background: rgba(245, 158, 11, 0.18);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Live-Vorschau während des Ziehens: zeigt schon an der Ziel-Zählzeit die
   echte Feldgröße, exakt dort, wo die Note beim Loslassen landen würde -
   absolut positioniert (wie die echten Noten im Raster), damit sie an
   jeder beliebigen freien Stelle stehen kann, nicht nur direkt anschließend
   an eine vorhandene Note. */
.insert-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  opacity: 0.85;
  z-index: 3;
}
.insert-preview .icon { opacity: 0.7; }

/* Ohne display:flex fehlt den beiden .eighth-half-Hälften (die sich sonst
   auf den flex-Kontext von .placed-note-pair verlassen) ihr Nebeneinander -
   sie fallen dann exakt übereinander und sehen wie EIN Notenkopf mit einem
   losen Balken darunter aus, statt wie ein Achtelpaar. */
.insert-preview-pair {
  display: flex;
}
.insert-preview-pair .beam-bar { opacity: 0.7; }

.measure.preview-overfull {
  border-color: var(--warn);
  background: var(--warn-bg);
}
.measure.preview-overfull .insert-preview {
  border-color: var(--warn);
  background: rgba(225, 29, 72, 0.12);
}
.measure.preview-overfull .slot-track {
  -webkit-mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
}

/* Die gerade gezogene Note verschwindet kurz aus ihrer alten Position,
   damit die verbleibenden Noten sofort zusammenrutschen und der frei
   werdende Platz nicht doppelt gezählt wird. */
.dragging-source {
  display: none !important;
}

/* ---------- Drag ghost ---------- */

/* Horizontal hängt der Cursor am Notenkopf (--ghost-anchor-x, per JS gesetzt),
   nicht an der Boxmitte - bei einer breiten Note (halbe/ganze) würde man
   sonst weit vom eigentlichen Notenkopf entfernt zielen. Vertikal bleibt der
   Cursor mittig in der Note. */
.drag-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  opacity: 0.9;
  transform: translate(calc(-1 * var(--ghost-anchor-x, 50%)), -50%);
}

.drag-ghost .note-card,
.drag-ghost .placed-note,
.drag-ghost .placed-note-pair {
  cursor: default;
}

/* .placed-note/-pair verlassen sich normalerweise auf align-self:stretch
   innerhalb der festen Höhe von .slot-track - der frei schwebende Ghost hat
   keinen solchen Rahmen, würde also ohne explizite Höhe auf eine dünne Linie
   zusammenfallen (das Icon schwebt dann lose daneben statt sichtbar DRIN zu
   stecken). Feste Höhe = exakt die Form, die die Note gleich im Raster hat. */
.drag-ghost .placed-note,
.drag-ghost .placed-note-pair {
  height: 96px;
}