:root {
  --board-cols: 4;
  /* Boardbreite richtet sich exakt nach Diagrammspaltenbreite + deren Gaps */
  --board-w: calc((var(--board-cols) * var(--dcol)) + ((var(--board-cols) - 1) * var(--grid-gap)));
  --board-pad-x: 0px;
  /* Innenabstand links/rechts im Board */
  --tr-btn: 20px;
  /* Größe des runden Knopfs (z.B. 22–30px) */
  --tr-ico: 100px;
  /* Größe des Symbols im Knopf (z.B. 18–26px) */
	--board-right-gap: 16px; /* nach Geschmack 8–32px */
}

/* MuseJazzText lokal einbinden (für Fallback & Labels) */
@font-face {
  font-family: 'MuseJazzText';
  src: url('/fonts/MuseJazzText.otf') format('opentype');
  font-display: swap;
}


/* Board der Area zuweisen & top-ausrichten */
#chord-board {
  grid-area: chordboard;
  align-self: start;
}

/* ====== Board rechts ====== */
#chord-board {
  /* NEU: lokale Variablen für die „Pad-Spalte“ und die Board-Breite inkl. Pad */
  --board-pad-col: clamp(0px, calc(var(--board-inner-pad-x) - var(--grid-gap)), 9999px);
  --board-w: calc((var(--board-cols) * var(--dcol))
      /* Spaltenbreite gesamt */
      + (var(--board-cols) * var(--grid-gap))
      /* Lücken zwischen den Diagrammspalten (inkl. der letzten vor dem Pad) */
      + var(--board-pad-col)
      /* Breite der unsichtbaren Pad-Spalte */
    );

  width: var(--board-w);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid rgba(0, 0, 0, .08);
  background: var(--panel-bg, transparent);
}

#chord-board .board-header {
  font-weight: 600;
  font-size: 14px;
  opacity: .8;
  padding: 4px 2px;
}

#chord-board .board-grid {
  display: grid;
  grid-template-columns: repeat(var(--board-cols), var(--dcol));
  gap: var(--grid-gap);
  align-items: start;
	
}

/* Item im Board: Label + geklonte Box */
.board-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* vorher: center */
  gap: 2px;
  /* Abstand Label ↔ Diagramm */
}

.board-label {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: var(--dcol);
  /* gleiche Breite wie das Diagramm */
  margin-inline: auto;
  /* falls nötig, mittig in der Spalte */
  display: block;
}


/* Geklonte .box von links: sorgt dafür, dass sie nicht „wächst“ */
.board-item .box {
  width: var(--dcol);
}

/* ====== Mini-Buttons ====== */
/* Plus-Button unten rechts in jeder Diagramm-Box (links im Diagrammbereich) */
.box .btn-mini.btn-add {
  position: absolute;
  right: 6px;
  bottom: 6px;
}

/* (Optisch identisch zur vorhandenen Mini-Button-Optik) */
.btn-mini.btn-add::before {
  content: "+";
  display: inline-block;
  font-weight: 700;
  line-height: 1;
}

.btn-mini.btn-del::before {
  content: "🗑";
  display: inline-block;
  line-height: 1;
}

/* Verhindert, dass Add-Buttons in bereits ins Board geklonten Boxen bleiben */
.board-item .btn-mini.btn-add {
  display: none;
}

/* Lösch-Button standardmäßig verstecken, nur bei Hover zeigen */

.board-item .box:hover .btn-mini.btn-del,
.board-item .box:focus-within .btn-mini.btn-del {
  opacity: 1;
  pointer-events: auto;
}

/* Plus-Button wie Play nur bei Hover zeigen */
.box.has-mini-controls .btn-mini.btn-add {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .12s ease;
  z-index: 2;
  /* über dem SVG */
}

.box.has-mini-controls:hover .btn-mini.btn-add,
.box.has-mini-controls:focus-within .btn-mini.btn-add {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Weißes „Blatt“ ganz rechts */
:root {
  --board-paper-bg: #fff;
  /* ggf. anpassen */
}

#chord-board {
  background: var(--board-paper-bg) !important;
  /* optional, falls du wirklich einen randlosen „Blatt“-Look willst: */
  /* border-left: none !important; */
}

/* Diagramm-Kopien im Board: Rahmen & Schatten ausblenden */
#chord-board .board-item .box {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* gleiche Innenabstände wie links + Reserve unten für die Buttons */
  padding: 8px;
  padding-bottom: calc(8px + var(--mini-btn) + var(--mini-gap));
  width: var(--dcol);
  /* fixiert die Breite wie links */
}


/* Options-Panel (optisch wie Keys/Degrees) */
.panel--options {
  padding: 8px 10px;
  /* gleiche Innenabstände wie kompakte Panels */
}

.panel--options legend {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

/* Options: Label links, Dropdown rechts */
.panel--options .options-row--cols {
  display: grid;
  grid-template-columns: 1fr auto;
  /* Label | Select */
  gap: 8px;
  align-items: center;
}

/* Optional: Dropdown kompakt halten */
.panel--options .options-row--cols select {
  min-width: 88px;
}

/* Options: Label links, Checkbox rechts */
.panel--options .options-row--root {
  display: grid;
  grid-template-columns: 1fr auto;
  /* Label | Checkbox */
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

/* (robust) Wenn Diagramme komplett aus sind, verstecke den Container selbst,
   damit garantiert keine Restbreite übrig bleibt. */
.main--hide-diagrams #fretboards {
  display: none !important;
}

/* ===== Diagramm-Größe & Board-Spacing ===== */
#chord-board {
  --dcol: 95px;
}

#chord-board .board-box {
  width: var(--dcol);
}

#chord-board .board-box>.box {
  box-sizing: border-box;
  width: 105% !important;
}

#chord-board .board-label {
  width: 100% !important;
  text-align: center;
  margin-inline: 0;
}

#chord-board .board-grid {
  row-gap: 6px;
  justify-items: center;
}

/* ===== Board-Items & Mini-Buttons ===== */
#chord-board .board-item .box {
  padding: 8px !important;
  min-height: auto;
  padding-bottom: 22px !important;
  position: relative;
}

.board-item .btn-mini.btn-del {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  /* über dem SVG */
  transition: opacity .15s ease, transform .12s ease;
}

#chord-board .board-item .btn-mini.btn-del {
  position: absolute !important;
  right: -23px !important;
  /* Position Löschen-Knopf */
  bottom: 0px !important;
  z-index: 3;
  background-image: none !important;
}

#chord-board .board-item .btn-mini {
  position: static;
  width: 20px;
  height: 20px;
}

#chord-board .board-item .btn-mini .icon {
  width: 14px;
  height: 14px;
  display: block;
}

#chord-board .board-item .btn-mini::before,
#chord-board .board-item .btn-mini::after {
  content: none !important;
}

#chord-board .board-item .btn-mini.btn-add {
  display: none !important;
}

#chord-board .board-item .box:is(:hover, :focus-within) .mini-controls {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover:none) {
  #chord-board .board-item .mini-controls {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* ===== Insert-Button (oben links auf der Box) ===== */
#chord-board .board-box {
  position: relative;
}

#chord-board .btn-insert {
  position: absolute;
  top: -10px;
  left: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .18);
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
  z-index: 10000;
}

#chord-board .btn-insert:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .22);
}

#chord-board .btn-insert:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#chord-board .board-item:hover .btn-insert,
#chord-board .btn-insert:hover {
  opacity: 1;
  pointer-events: auto;
}

#chord-board .btn-insert .icon {
  width: 14px;
  height: 14px;
  display: block;
}

/* =============================
   HEADER, TITEL & TOOLBAR
   ============================= */
:root {
  --board-header-pad: 12px;
  --board-toolbar-gap: 6px;
  --board-title-gap: 6px;
  --board-title-size: 1.6rem;
  --board-section-size: 0.95rem;
  --board-section-space: 12px;
  --board-hairline: rgba(0, 0, 0, .12);
  --board-hover: rgba(0, 0, 0, .06);
  --board-active: rgba(0, 0, 0, .12);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

#chord-board .board-header {
  display: block;
  padding: var(--board-header-pad);
  margin-bottom: -15px;
}

#chord-board .board-toolbar {
  display: inline-flex;
  gap: var(--board-toolbar-gap);
  align-items: center;
  flex-wrap: wrap;
}

#chord-board .board-header+.board-grid,
#chord-board .board-header+* {
  margin-top: 2px;
}

#chord-board .board-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--board-hairline);
  padding-top: 0;
}

#chord-board .board-song-title {
  display: inline-flex;
  align-items: center;
  gap: var(--board-title-gap);
  font-size: var(--board-title-size);
  line-height: 1.1;
  font-weight: 700;
  margin: 20px 0 5px;
}

#chord-board .board-section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--board-title-gap);
  font-size: var(--board-section-size);
  line-height: 1.1;
  font-weight: 600;
  color: #555;
  margin: 0 0 var(--board-section-space) 0;
}

#chord-board .board-grid>.board-section-title {
  grid-column: 1 / -1;
  justify-self: stretch;
  text-align: left;
  padding-left: var(--board-header-pad);
  margin-left: 0;
}

#chord-board .btn-icon {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}

#chord-board .btn-icon svg {
  display: block;
}


#chord-board .board-section-title .btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

#chord-board .board-song-title .btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
}

#chord-board .board-song-title .btn-icon,
#chord-board .board-section-title .btn-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
}

#chord-board .board-song-title:hover .btn-icon,
#chord-board .board-section-title:hover .btn-icon,
#chord-board .board-song-title:focus-within .btn-icon,
#chord-board .board-section-title:focus-within .btn-icon,
#chord-board .board-song-title .btn-icon:focus-visible,
#chord-board .board-section-title .btn-icon:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

#chord-board .board-paper-size,
#chord-board .tiny-select {
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--board-hairline);
  border-radius: 5px;
  background: #fff;
  font: inherit;
}


#chord-board .toolbar-break {
  flex-basis: 100% !important;
  height: 0;
  margin: 0;
}

#chord-board .board-toolbar-right {
  flex-basis: auto !important;
  justify-content: flex-start;
  margin-top: 0;
}

#chord-board .board-toolbar>*,
#chord-board .board-toolbar-right>* {
  order: initial !important;
}

/* =============================
   LAYOUT & RECHTE LÜCKE
   ============================= */
	 
	 
#chord-board {
  box-sizing: border-box;
  justify-self: start;
}

.main:has(#chord-board) {
  grid-template-columns: max-content calc(var(--staffw) + var(--controlw) + 20px) var(--board-w) var(--board-right-gap);
  grid-template-areas: "toolbar toolbar . .""fretboards systems chordboard .";
}

.main:has(#chord-board) #chord-board {
  grid-area: chordboard;
  align-self: start;
}

.main:has(#chord-board):has(.systems.systems--hide-staves) {
  grid-template-columns: max-content var(--controlw) var(--board-w) var(--board-right-gap);
  grid-template-areas: "toolbar toolbar . .""fretboards systems chordboard .";
}

.main.main--hide-diagrams:has(#chord-board):has(.systems:not(.systems--hide-staves)) {
  grid-template-columns: calc(var(--staffw) + var(--controlw) + 20px) var(--board-w) var(--board-right-gap);
  grid-template-areas: "toolbar toolbar .""systems chordboard .";
  justify-content: start;
}

.main.main--hide-diagrams:has(#chord-board):has(.systems.systems--hide-staves) {
  grid-template-columns: var(--controlw) var(--board-w) var(--board-right-gap);
  grid-template-areas: "toolbar toolbar .""systems chordboard .";
  justify-content: start;
}

#chord-board {
  width: var(--board-w);
  max-width: var(--board-w);
}

#chord-board::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--board-right-gap));
  width: var(--board-right-gap);
  background: var(--bg);
  pointer-events: none;
}

/* =============================
   SONGS-DROPDOWN
   ============================= */

#chord-board {
  position: relative;
  z-index: 10000;
}

#chord-board .lib-select::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transform: translateY(-30%);
  pointer-events: none;
  opacity: .8;
}


@media (max-width:780px) {
  #chord-board .library-anchor {
    width: 220px;
  }
}


#chord-board .lib-root,
#chord-board .lib-sub {
  list-style: none;
  margin: 0;
  padding: 6px;
}

#chord-board .lib-group {
  position: relative;
}

#chord-board .lib-sub {
  padding-left: 12px;
}

#chord-board .lib-sub[hidden] {
  display: none;
}

#chord-board .lib-item.is-placeholder {
  opacity: .7;
  cursor: default;
}

#chord-board .lib-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#chord-board .lib-user-row .icon-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

#chord-board .lib-user-row .lib-item {
  flex: 1 1 auto;
  text-align: left;
}

#chord-board .lib-user-row .icon {
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

/* === Consolidated library items/headers + shared hover/focus styles === */
#chord-board .lib-item,
#chord-board .lib-head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font: inherit;
  border-radius: 5px;
  white-space: nowrap;
}

#chord-board .lib-item {
  cursor: pointer;
}


#chord-board .btn-icon:hover,
#chord-board .lib-select:hover,
#chord-board .lib-item:hover,
#chord-board .lib-head:hover,


#chord-board .btn-icon:active,


#chord-board .btn-icon:focus-visible,
#chord-board .lib-select:focus-visible,
#chord-board .board-paper-size:focus-visible,
#chord-board .tiny-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#chord-board {
  position: relative;
  z-index: 10000;
  /* Board liegt vor den Diagrammen */
}


/* Trigger-Container über der Seite halten */
#chord-board .library-anchor {
  position: relative !important;
  margin-right: var(--board-toolbar-gap, 8px);
  width: calc((3 * 28px) + (2 * var(--board-toolbar-gap, 8px)));
  z-index: 10001;
  /* Anker-Ebene */
  isolation: isolate;
}

/* Klick-Trigger (sieht wie <select> aus) – muss klickbar bleiben */
#chord-board .lib-select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding: 0 22px 0 8px;
  border: 1px solid var(--board-hairline);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 10003;
  /* Trigger über dem Anker */
}

/* Panel selbst – höchste Ebene */
/* Fixed dropdown overlay that always sits above everything */
.lib-dropdown--fixed {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 100000 !important;
  width: max-content;
  min-width: 0;
  max-height: min(60vh, calc(100vh - 16px));
  overflow: auto;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--board-hairline);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 18);
}

/* Put fretboard diagrams behind the board dropdown */
#fretboards {
  position: relative;
  z-index: 1;
}

.fretboards,
#fretboards {
  position: relative;
  z-index: 1 !important;
}

/* Fixed dropdown overlay that always sits above everything */
.lib-dropdown--fixed {
  position: fixed !important;
  /* statt absolute im Flow */
  left: 0;
  /* exakte Position setzt JS */
  top: 0;
  z-index: 100000 !important;
  /* oberste Ebene */
  width: max-content;
  min-width: 0;
  /* Inhalt bestimmt Breite */
  max-height: min(60vh, calc(100vh - 16px));
  overflow: auto;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--board-hairline);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

/* === Fixed Songs-Dropdown: gleiche Optik wie im Chord-Board-Scope === */
.lib-dropdown--fixed .lib-root,
.lib-dropdown--fixed .lib-sub {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.lib-dropdown--fixed .lib-group {
  position: relative;
}

.lib-dropdown--fixed .lib-sub {
  padding-left: 12px;
}

.lib-dropdown--fixed .lib-sub[hidden] {
  display: none;
}

.lib-dropdown--fixed .lib-item.is-placeholder {
  opacity: .7;
  cursor: default;
}

/* User-Zeilen (Slot, Rename, Delete) */
.lib-dropdown--fixed .lib-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lib-dropdown--fixed .lib-user-row .icon-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.lib-dropdown--fixed .lib-user-row .lib-item {
  flex: 1 1 auto;
  text-align: left;
}

.lib-dropdown--fixed .lib-user-row .icon {
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

/* Items & Gruppen-Header: Basisstil + Hover/Focus */
.lib-dropdown--fixed .lib-item,
.lib-dropdown--fixed .lib-head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font: inherit;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
}

.lib-dropdown--fixed .lib-item:hover,
.lib-dropdown--fixed .lib-head:hover,
.lib-dropdown--fixed .icon-btn:hover {
  background: var(--bg);
}

.lib-dropdown--fixed .lib-item:focus-visible,
.lib-dropdown--fixed .lib-head:focus-visible,
.lib-dropdown--fixed .icon-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#chord-board .board-item .mini-controls .btn-mini.btn-copy {
  margin-left: -3px;
  /* Position Copy Knopf Board */
}

/* === Top-right Aktions-Cluster pro Board-Item =============================== */
/* Wrapper, den wir pro .board-box einfügen (JS baut ihn später) */
#chord-board .board-box {
  position: relative;
}

/* Bezugspunkt für absolute Buttons */

/* ============ Sichtbarkeit der Top-Right-Actions ============ */
/* Die Actions sollen erscheinen, wenn die Box (das Diagramm) gehovt wird */
#chord-board .tr-actions {
  position: absolute;
  top: -10px;
  /* << Position Enter/Cluster nachjustieren */
  right: 2px;
  /* << Position Enter/Cluster nachjustieren */
  z-index: 10006;
  display: inline-flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .12s ease;
}

/* Sichtbar, wenn man nahe dran ist (Box) ODER über dem Cluster selbst */
/* WICHTIG: auf .board-box (NICHT .box) hören, weil .tr-actions ein Geschwister von .box ist */
#chord-board .board-box:hover .tr-actions,
#chord-board .tr-actions:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Hover-Brücke über dem Enter-Button: unsichtbare Fläche, die die Lücke bis zum %-Button "überdeckt" */
#chord-board .tr-actions::before {
  content: "";
  position: absolute;
  right: 0;
  top: -30px;
  /* gleiche Höhe wie der %-Button darüber */
  width: 28px;
  /* Breite der "Hitbox" */
  height: 30px;
  /* Höhe der "Hitbox" */
}

/* runde Basis für beide Knöpfe */
/* runde Buttons größer */
#chord-board .btn-round {
  border-radius: 999px;
  border: 1px solid var(--board-hairline, rgba(0, 0, 0, .2));
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* Hover-Brücke: Enter vergrößert unsichtbar sein Hover-Feld nach oben,
   damit man ohne „Abbruch“ zum %-Knopf kommt */
#chord-board .btn-enter {
  position: relative;
}

#chord-board .btn-enter::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -28px;
  /* selbe Höhe wie .btn-percent top (≈ Knopfhöhe) */
  height: 28px;
}

/* Aktiver Umbruch = andere Farbe */
#chord-board .board-item[data-break-after="1"] .btn-enter {
  background: #b366a2;
  color: #fff;
  border-color: transparent;
}

/* %-Button: sitzt ÜBER Enter und ist auch sichtbar, wenn die Box gehovt wird */
#chord-board .btn-percent {
  position: absolute;
  right: 0;
  top: -22px;  /* << vertikaler Abstand des %-Knopfs */
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

/* Sichtbar NUR wenn Enter (oder % selbst) gehovt wird */
#chord-board .btn-enter:hover+.btn-percent,
#chord-board .btn-enter:focus-visible+.btn-percent,
#chord-board .btn-percent:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Optional: Fokus-Ring für Tastaturbedienung */
#chord-board .btn-round:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* === Platzhalter-Item für „%” ============================================== */
#chord-board .board-item--repeat .mini-controls .btn-play,
#chord-board .board-item--repeat .mini-controls .btn-copy {
  display: none !important;
  /* beim % nur Delete zeigen */
}

/* Falls du das % - Symbol
#chord-board .board-item--repeat .repeat-sign{
  /* Container für das Prozentzeichen (z. B. <div class="repeat-sign"> oder SVG <text class="repeat-sign">) */
font-weight: 700;
opacity: .9;
user-select: none;
pointer-events: none;
cursor: default;
}


/* Wenn du das % als SVG-Text platzierst: */
#chord-board .board-item--repeat svg.board .repeat-sign {
  fill: #111;
  dominant-baseline: hanging;
  /* oben ansetzen */
  text-anchor: start;
  /* linksbündig */
  /* die exakte Position (1.-Bund-Stelle) legst du in JS per x/y fest */
}

/* Schwebende Icons oben links/rechts generell unselektierbar */
#chord-board .btn-round,
#chord-board .btn-insert {
  user-select: none;
}

/* Sicherstellen, dass der Trigger oben rechts über allem liegt */
#chord-board .tr-actions {
  z-index: 10006;
}

/* ===== %-Item auf kompakte Höhe (≈ 2 Bünde) bringen ===== */
/* Stellschraube: Höhe des %-Diagramms in px (nach Auge feinjustieren) */
#chord-board {
  --repeat-height: 20px;
}

/* z.B. 110–130px ausprobieren */

#chord-board .board-item--repeat .box {
  min-height: var(--repeat-height) !important;
  /* Box selbst kompakt halten */
}

#chord-board .board-item--repeat svg.board {
  height: var(--repeat-height) !important;
  /* SVG explizit auf die Höhe bringen */
}


/* Akkordsymbole im Board: nicht markierbar */
#chord-board .board-label {
  user-select: none;
}


/* 1 Bund ≈ halbe Repeat-Höhe */
#chord-board {
  --repeat-height: 60px;
  --repeat-shift: calc(var(--repeat-height) / 5);
}

/* Inhalt des %-Items (SVG) optisch nach unten versetzen,
   ohne die Mess-Höhe zu verändern */
#chord-board .board-item--repeat svg.board {
  transform-box: fill-box;
  transform-origin: 0 0;
  transform: translateY(var(--repeat-shift));
}

/* Auch die schwebenden Top-Buttons des %-Items nach unten ziehen */
#chord-board .board-item--repeat .tr-actions,
#chord-board .board-item--repeat .btn-insert {
  transform: translateY(var(--repeat-shift));
}

/* ===== Scrollbarer Bereich ab Titel ===== */
.board-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Mausrad bleibt im Bereich */
  -webkit-overflow-scrolling: touch;
  /* smoother auf iOS */
  max-height: var(--board-scroll-max-h, 70vh);
  scroll-padding-top: .5rem;
  /* kleiner Puffer oben */
}

/* Optional: dezente Scrollbar (nur WebKit/Chromium) */
.board-scroll::-webkit-scrollbar {
  width: 10px;
}

.board-scroll::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 5px;
}

.board-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* (optional) Header fixieren, falls er beim Seiten-Scroll sichtbar bleiben soll */
#chord-board .board-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg, #fff);
}

/* ============= Board inner gutters (wider without scaling diagrams) ============= */
:root {
  /* tweak this to add white space on both sides, e.g. 0–24px */
  --board-inner-pad-x: 20px;
  --board-shift-left: 11px;
  /* 0px = aus, 4–16px probieren */
  --board-clip-guard: -2px;
  /* NEU: Sicherheits-Puffer rechts (8–16px) */
}

#chord-board {
  border-radius: 5px;
  overflow: hidden;
  /* Inhalt folgt der Rundung */
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .08),
    /* weicher äußerer Schatten */
    inset 0 0 0 1px rgba(0, 0, 0, .06);
  /* feine „Kante“ statt harter Linie */
  width: calc(var(--board-w) + 2 * var(--board-inner-pad-x));
}

/* ============= Softer edge between white board and gray background ============= */
#chord-board {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  /* content follows the radius */
  /* subtle, soft edge; adjust opacities to taste */
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .08),
    0 1px 2px rgba(0, 0, 0, .06),
    inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* ==== Inhalt unter dem ersten Section-Namen nach links schieben ==== */
/* Positiver Wert ⇒ Inhalt wandert nach links (Song-Titel bleibt wo er ist) */
/* Grid-Inhalt etwas nach links schieben + Puffer rechts fürs 105%-Überstehen */
#chord-board #board-scroll .board-grid {
  margin-left: calc(-1 * var(--board-shift-left));
  padding-right: calc(var(--board-shift-left) + var(--board-clip-guard));
  overflow-x: hidden;
}

/* --- Board-Höhe zentral steuern: LETZTE Definition gewinnt --- */
:root {
  --board-scroll-offset: 190px;
  /* größer = kürzerer sichtbarer Bereich */
}

/* Der neue Scroll-Container */
#chord-board #board-scroll.board-scroll {
  padding-left: var(--board-inner-pad-x);
  padding-right: var(--board-inner-pad-x);
  height: calc(100vh - var(--board-scroll-offset));
  max-height: calc(100vh - var(--board-scroll-offset));
  overflow-y: auto;
  overflow-x: hidden;
  /* Sicherheitsleine gegen horizontale Scrollbar */
}

/* Final override: Board-Breite inkl. Innenränder, keine harte Max-Width */
#chord-board {
  width: calc(var(--board-w) + 1 * var(--board-inner-pad-x));
  max-width: none;
  /* wichtig: hebt das frühere max-width: var(--board-w) auf */
}

/* Scrollbereich: rechts zusätzlicher Puffer, damit nichts „unter die Scrollbar“ rutscht */
#chord-board #board-scroll.board-scroll {
  padding-right: calc(var(--board-inner-pad-x) + var(--board-clip-guard));
  overflow-x: hidden;
}

/* === TR-Buttons: Größe steuerbar über Variablen (Icon getrennt vom Button) === */
:root {
  --tr-btn: 22px;
  /* Knopf-Durchmesser */
  --tr-ico: 30px;
  /* Icon-Größe im Knopf */
}

#chord-board .btn-round {
  width: var(--tr-btn) !important;
  height: var(--tr-btn) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* WICHTIG: nur EINMAL in der Datei, ganz am Ende! */
#chord-board .btn-round svg {
  width: var(--tr-ico) !important;
  height: var(--tr-ico) !important;
  display: block;
}


/* ================================
   BOARD EDITOR (Optik) – fixed Overlay, dynamische Höhe
   ================================ */
.board-item {
  position: relative;
}

.board-item.has-editor .mini-controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* FIXED Overlay an <body> */
.chord-editor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;

  /* BREITER für rechten Rand/Gutter: */
  width: calc(var(--dcol) * 3.0);
  max-width: min(1000px, 95vw);

  /* DYNAMISCHE HÖHE: keine feste aspect-ratio mehr */
  height: auto;
  max-height: 92vh;
  /* klemmen, falls sehr hoch */

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
  padding: 10px;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;

  transform-origin: bottom right;
  /* bleibt stets unten rechts */
}

.chord-editor.is-in {
  animation: ceIn .12s ease-out both;
}

@keyframes ceIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1.0);
    opacity: 1;
  }
}

.chord-editor .icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Header */
.ce-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.ce-symbol {
  width: 91%;
  /* Breite Eingabe Feld Akkord Symbol Bearbeitungsmodus */
  font-size: 18px;
  font-weight: 700;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}

/* Body: 2 Spalten – links Diagramm, rechts der Frets-Count-Controller */
.ce-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  /* rechter Gutter für ce-sizectrl */
  column-gap: 0px;
  align-items: start;
  justify-items: center;
  overflow: hidden;
  /* Diagramm bleibt sauber eingerahmt */
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 4px;
  background: #fff;
  max-height: 100%;
  /* damit das Body-Feld bei 92vh klemmt */
}

.ce-diagram {
  display: grid;
  justify-items: center;
  /* mittig horizontal */
  align-items: start;
  /* oben vertikal */
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 0px;
  /* kleine Luft über dem Sattel (optional) */
}


.ce-svg {
  width: calc(var(--dcol) * 2.2);
  /* etwas größer als vorher */
  height: auto;
  max-height: 80vh;
  /* Sicherheit */
  margin-left: 16px;
}

/* === NEU: rechter Controller für BundANZAHL (PLUS über MINUS) === */
.ce-sizectrl {
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  justify-items: center;
  align-items: center;

  /* dezente Karte */
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
}

/* === Top-Fret-Controller: direkt unter der Bundnummer links === */

.ce-fretctrl {
  position: absolute;

  top: 70px;
  /* Abstand Bundnummern-PlusMinus */
  left: 8px;

  display: grid;
  gap: 6px;
  justify-items: center;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.ce-fretnum {
  font-size: 16px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}

/* Footer */
.ce-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.ce-footer .ce-play {
  justify-self: start;
}

.ce-footer .ce-trash {
  justify-self: end;
}

/* Buttons */
.ce-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ce-btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ce-btn:focus-visible {
  outline: 2px solid #7aa0ff;
  outline-offset: 2px;
}

/* optional in styles.css, falls nötig */
.ce-save,
.ce-close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
}

.ce-save .icon,
.ce-close .icon {
  width: 20px;
  height: 20px;
  display: block;
}


/* === Editor: Mindesthöhe ≈ 2 Bünde ============================= */
:root {
  /* Höhe eines "Bundsegments" im Editor (Feintuning nach Geschmack) */
  --editor-fret-cell: 54px;
  /* Extraluft für Diagramm-Rand/Innenabstände im Body */
  --editor-extra-vert: 60px;
}

/* Mindesthöhe der Diagramm-Fläche: 2× Bundhöhe + etwas Rand */
.ce-diagram {
  min-height: calc((2 * var(--editor-fret-cell)) + var(--editor-extra-vert));
}

/* Falls das SVG selbst kleiner skaliert: hier auch eine Untergrenze setzen */
.ce-svg {
  min-height: calc(2 * var(--editor-fret-cell));
}

/* Editor: ungültiger Root im Akkordsymbol */
.ce-symbol.is-invalid {
  color: #b00020;
  border-color: #f3b2b9;
  background: #fff7f8;
}

/* ==== Board: feste Reihenfolge der Mini-Buttons (Play → Edit → Copy → Delete) ==== */
#chord-board .board-item .mini-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* explizite Reihenfolge */
#chord-board .board-item .mini-controls .btn-mini.btn-play {
  order: 1;
}

#chord-board .board-item .mini-controls .btn-mini.btn-edit {
  order: 2;
}

#chord-board .board-item .mini-controls .btn-mini.btn-copy {
  order: 3;
}

#chord-board .board-item .mini-controls .btn-mini.btn-del {
  order: 4;
}

/* Delete ist im Board ohnehin absolut positioniert */

/* Nur das "leeres Diagramm"-Icon im Section-Menü minimal tiefer setzen */
:root {
  --sec-addblank-nudge: 3px;
}

/* ggf. 1–3px feinjustieren */

.board-section-title .sec-addblank.btn-icon .icon {
  transform: translateY(var(--sec-addblank-nudge));
}


/* Section-Transpose Buttons */
#chord-board .board-section-title .btn-T {
  font: 600 11px/1 var(--ui-font, system-ui, sans-serif);
  padding: 0 6px;
  border-radius: 5px;
}

/* Tighter icon spacing in song & section title rows */
#chord-board {
  --board-title-gap: 2px;
  /* 0–4px nach Geschmack */
}

#chord-board .board-song-title,
#chord-board .board-section-title {
  gap: var(--board-title-gap) !important;
  /* überschreibt die bisherigen 6px */
}

/* Entfernt unsere frühere Zusatzmarge */
#chord-board .board-song-title>.btn-icon,
#chord-board .board-song-title>.btn-T,
#chord-board .board-section-title>.btn-icon,
#chord-board .board-section-title>.btn-T {
  margin-left: 0 !important;
}

/* Label nutzt MuseJazz (falls noch nicht gesetzt) */
#chord-board .board-label {
  font-family: 'MuseJazzText', system-ui, Arial, sans-serif;
}


/* === MuseJazz für Titel (Song & Section) === */
#chord-board :is(.board-song-title .text, .board-section-title .text) {
  font-family: "MuseJazzText", "MuseJazz", "MuseJazz Text", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Superscripts für add/sus/aug (kleiner + Schrift erben) */
#chord-board :is(.board-label, .label-text) sup.chsup {
  font-size: .55em;
  line-height: 0;
  vertical-align: super;
  font: inherit;
  /* family + weight erben */
  letter-spacing: inherit;
}

/* MuseJazz-Glyphen (Δ/ø) in Labels – einheitlich */
#chord-board :is(.board-label, .label-text) .mj-glyph svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1;
  overflow: visible;
  transform: scaleY(-1);
  /* Flip, damit richtig herum */
  transform-origin: 50% 50%;
}


/* Feintuning je Glyphe (optional) */
#chord-board .mj-glyph[data-gid="356"] svg {
  /* Δ */
  vertical-align: -0.7em;
}

#chord-board .mj-glyph[data-gid="361"] svg {
  /* ø */
  vertical-align: -0.7em;
}

/* Abstand zwischen Akkordsymbol (Label) und Griffdiagramm etwas reduzieren */
#chord-board .board-item .board-box {
  margin-top: -8px;
  /* -1px bis -3px wirkt meist gut */
}

/* add / sus / aug: Superscript noch kleiner machen */
#chord-board .board-label sup.chsup,
#chord-board .label-text sup.chsup {
  font-size: 0.70em !important;
  /* ggf. 0.6em, wenn du’s noch kleiner willst */
  line-height: 0;
  vertical-align: super;
}

/* Basis: Ziffern dezent anheben */
#chord-board :is(.board-label, .label-text) .num-sup {
  font-size: 0.80em;
  line-height: 0;
  position: relative;
  top: -0.18em;
  /* Anhebung für Zahlen */
}

/* Globale Feinjustage: Akkordsymbole im Board minimal nach rechts schieben */
#chord-board {
  --label-xshift: 8px;
  /* hier deinen Wunschwert einstellen: 1–4px */
}

#chord-board :is(.board-label, .label-text) {
  position: relative;
  left: var(--label-xshift);
}

/* MuseJazz-Glyphen (Δ/ø) wie im Board */
.cell-label .mj-glyph svg{
  width: 1em; height: 1em;
  display:inline-block; overflow:visible; line-height:1;
  transform: scaleY(-1); transform-origin: 50% 50%;
}
/* Fallback: während das SVG noch nicht gerendert ist, aria-label anzeigen */
.cell-label .mj-glyph[aria-label]:empty::before{
  content: attr(aria-label);
  font-family: "MuseJazzText","MuseJazz","MuseJazz Text", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* MuseJazz-Glyphen (Δ/ø) im Print-Fenster */
.cell-label .mj-glyph svg{
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1;
  overflow: visible;
  /* NICHT flippen – der Flip passiert schon im <g> im Script */
  /* transform: scaleY(-1);  <-- falls vorhanden: ENTFERNEN */
  vertical-align: -0.70em;   /* Baseline-Feinjustage wie im Board */
}
/* optional: je Glyphe ein klein wenig anders */
.cell-label .mj-glyph[data-gid="356"] svg{ vertical-align: -0.70em; } /* Δ */
.cell-label .mj-glyph[data-gid="361"] svg{ vertical-align: -0.70em; } /* ø */

/* Δ/ø im Print – nicht nochmal flippen, Baseline fein */
.cell-label .mj-glyph svg{
  width:1em; height:1em; display:inline-block; overflow:visible; line-height:1;
  transform: none !important;          /* KEIN zweiter Flip */
  vertical-align: -0.70em;
}
/* Fallback: solange das Script noch nicht gerendert hat */
.cell-label .mj-glyph[aria-label]:empty::before{
  content: attr(aria-label);
  font-family: "MuseJazzText","MuseJazz","MuseJazz Text", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}



/* === Copy-Hover-Untermenü (OBEN + Hover-Brücke) === */
#chord-board .mini-controls .copy-stack{
  position: relative;
  display: inline-block;
}

/* Unsichtbare Hover-Brücke zwischen Copy-Button und Untermenü,
   damit nichts verschwindet, wenn du die Maus nach oben bewegst */
#chord-board .mini-controls .copy-stack::before{
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 100%;
  height: 14px;               /* Brückenhöhe – bei Bedarf auf 10–16px anpassen */
  /* background: transparent;  (default) */
}

/* Das Untermenü erscheint jetzt OBEN über dem Copy-Button */
#chord-board .mini-controls .copy-sub{
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);   /* Abstand über dem Copy-Button; 100% für „ohne Abstand“ */
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10020;             /* sicher über den Mini-Controls */
}

/* Sichtbar bleiben beim Hover über Copy ODER das Untermenü selbst
   (plus Tastaturfokus-Support) */
#chord-board .mini-controls .copy-stack:hover .copy-sub,
#chord-board .mini-controls .copy-stack:focus-within .copy-sub,
#chord-board .mini-controls .copy-sub:hover{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Repeat-Platzhalter: ganze Copy-Gruppe ausblenden */
#chord-board .board-item--repeat .mini-controls .copy-stack{
  display: none !important;
}

/* ---- Fix: Reihenfolge der Copy-Gruppe (Play/Edit/Copy/Delete) ---- */
#chord-board .board-item .mini-controls .copy-stack{
  order: 3 !important;         /* nach Play(1) & Edit(2) */
  display: inline-flex;         /* verhält sich wie die anderen Buttons */
  align-items: center;
}

/* === Feintuning: Copy-Untermenü leicht nach links === */
#chord-board .mini-controls .copy-stack{
  --copy-sub-offset-x: -3px;   /* negativer Wert = weiter links, z. B. -4px / -8px  Paste-Button Cut-Button */
}

/* Untermenü horizontal verschieben */
#chord-board .mini-controls .copy-sub{
  left: var(--copy-sub-offset-x);
}

/* Hover-Brücke mit verschieben, damit nichts wegklappt */
#chord-board .mini-controls .copy-stack::before{
  left: calc(-6px + var(--copy-sub-offset-x));
  right: -6px;
}

/* 1) Mini-Buttons unter den Diagrammen minimal weiter nach unten */
#chord-board{
  /* negativer = tiefer; Standard war -2px */
  --mini-gap: -6px;
}

/* 2) Zeilenumbruch (+ %-Knopf) ein wenig nach rechts rücken */
#chord-board .tr-actions{
  /* kleinerer/right→ weiter rechts; Standard war 2px */
  right: -4px;
}

/* Mehr Abstand über der ersten Diagrammreihe, damit die runden Top-Buttons nie abgeschnitten werden */
#chord-board .board-grid { padding-top: 6px; }  /* bei Bedarf 10–16px feinjustieren */

/* Falls bei dir noch ein Abschneiden vorkommt, nimm zusätzlich: */
#chord-board #board-scroll .board-grid{
  overflow-x: visible;        /* nichts am rechten Rand wegschneiden */
}

/* % / // /// ////: nicht markierbar, aber klickbar */
#chord-board .board-item--repeat .repeat-sign{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* mobiles Highlight weg */
  cursor: pointer;                           /* zeigt: klickbar */
}

/* falls der Browser trotzdem noch Markierung zeigt */
#chord-board .board-item--repeat .repeat-sign::selection{
  background: transparent;
}

/* Optionstonslash als Hochstellung */
#chord-board .board-label sup.opt-slash,
#chord-board .box-title   sup.opt-slash,
#chord-board .chord-title sup.opt-slash{
  font-size:.75em;
  line-height:0;
  vertical-align:super;
}

/* Board immer schwarz, selbst wenn 'over5' durchrutscht */
#chord-board .box.over5 rect,
#chord-board .box.over5 line { stroke: #111 !important; }
#chord-board .box.over5 .dot { fill: #111 !important; }
#chord-board .box.over5 .fret-label { fill: #111 !important; }