/*!
 * style.master.css — structured from style.cleaned-safe.css
 * Generated: 2025-10-20 10:00:23
 * SHA-256 (source first 12): 9190ab4259bf
 *
 * This file reorganizes the stylesheet with section headers only.
 * No rule order or values are changed.
 *
 * TABLE OF CONTENTS
  - ROOT & RESET
  - LAYOUT: App Shell
  - TYPOGRAPHY & FORM
  - PDF VIEWER UI (RIGHT)
  - SHORTCUTS (LEFT)
  - DEBUG WIDGET
  - RESPONSIVE
  - PLAYER: Gear Dropdown
  - PLAYER: A/B Controls
  - PLAYER: Seek Bar
  - HEADER / MASTHEAD
  - SELECTS: Pièce / Section / Voix
  - PLAYER CONTAINER & THEMES
  - MISC UTILITIES
 */

/* =====================================================================
   ROOT & RESET
   ===================================================================== */
:root{
  --bg:#f8f8f9; --text:#222; --line:#ddd; --panel:#fff;
  --accent:#3b82f6; --accent-soft:rgba(59,130,246,.12);
  --radius:10px; --gutter:12px;
  --fs-100:.9rem; --fs-200:1rem; --fs-300:1.15rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);}

/* Full-height container */

/* =====================================================================
   LAYOUT: App Shell
   ===================================================================== */
.container{
  display:flex; gap:var(--gutter); padding:var(--gutter);
  height:calc(100vh - (var(--gutter)*2));
}

/* Left column with bottom overlay */
.left{
  position:relative;
  flex:1 1 340px; max-width:520px; overflow:auto;
  padding:10px 8px 56px;
}
.right{
  flex:2 1 640px; position:relative; display:block;
  background:var(--panel); border:1px solid var(--line);
  /* WICHTIG: Panel selbst scrollt (für Zoom-Navigation) */
  overflow:auto; border-radius:var(--radius); height:100%;
  overscroll-behavior:contain;
}

/* Typography & inputs */

/* =====================================================================
   TYPOGRAPHY & FORM
   ===================================================================== */
h1{margin:0 0 8px 0; font-size:var(--fs-300); font-weight:650; color:#333}
label{display:block; margin:10px 0 6px 0; font-weight:600; font-size:var(--fs-100); color:#333}

select{
  width:100%; font-size:var(--fs-200); line-height:1.25;
  padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:#fff; color:#1f2937; outline:none;
  transition:border .15s, box-shadow .15s;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#888 50%),
    linear-gradient(135deg,#888 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1em + 2px),
                      calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
audio{width:100%; margin-top:12px; border-radius:10px}

/* PDF controls & overlays (right) */

/* =====================================================================
   PDF VIEWER UI (RIGHT)
   ===================================================================== */
button.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(240,240,240,.85); border:none; font-size:2rem;
  width:48px; height:48px; cursor:pointer; color:#333; border-radius:50%;
  z-index:12;
}
#prevPage{left:8px} #nextPage{right:8px}
#pageInfo{
  position:absolute; top:8px; left:8px;
  background:rgba(255,255,255,.95); padding:2px 8px; border-radius:8px;
  font-size:.9rem; color:#333; z-index:12;
}
#zoomCtrl{
  position:absolute; top:8px; right:8px;
  background:rgba(255,255,255,.95); padding:4px 8px; border-radius:8px;
  font-size:.85rem; display:flex; align-items:center; gap:6px; z-index:12;
}
#zoomCtrl input[type=range]{width:160px}

#pdfPlaceholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#aaa; font-style:italic; z-index:10; pointer-events:none;
}
#loadingOverlay{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.6);
  font-size:1rem; color:#666; font-style:italic; z-index:13;
}
canvas{
  display:block; margin:0 auto; max-width:100%; height:auto;
  transition:opacity .25s ease-in-out; z-index:1; cursor:grab;
}
canvas.grabbing{cursor:grabbing}
.fadeOut{opacity:0;} .fadeIn{opacity:1;}

/* Shortcuts in LEFT pane */

/* =====================================================================
   SHORTCUTS (LEFT)
   ===================================================================== */
#shortcutInfo{
  position:absolute; left:8px; bottom:8px;
  background:rgba(255,255,255,.95); padding:6px 10px; border-radius:8px;
  font-size:.78rem; line-height:1.35; color:#444; text-align:left;
  z-index:2; pointer-events:none;
}

/* Debug status (right, bottom-right), only if enabled */

/* =====================================================================
   DEBUG WIDGET
   ===================================================================== */
#statusInfo{
  position:fixed; right:12px; bottom:12px;
  background:rgba(255,255,255,.95); padding:4px 10px; border-radius:8px;
  font-size:.72rem; color:#555; z-index:50; box-shadow:0 1px 3px rgba(0,0,0,.06);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* NOTE: Breakpoint fürs Umschalten auf Spalten-Layout – 768px hier bei Bedarf anpassen. */
@media (max-width: 768px){
  .container{flex-direction:column}
  .left{max-width:none}
  .right{height:70vh}
  #zoomCtrl input[type=range]{width:130px}
}

/* Speed gear dropdown */

/* =====================================================================
   PLAYER: A/B Controls
   ===================================================================== */
.mini-ab .gear{position:relative}
.mini-ab .gear .btn{padding:6px 10px; border-radius:10px}
.mini-ab .dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,.08);padding:6px;display:none;z-index:20}
.mini-ab .dropdown.open{display:block}
.mini-ab .dropdown .opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.mini-ab .dropdown .opt:hover{background:#f6f7f9}
.mini-ab .dropdown .opt[aria-checked="true"]{background:#eef6ff;box-shadow:inset 0 0 0 1px #c7dfff}

/* Adjust gear placement and colors for A/B times; thicken seek bar */
/* NOTE: Zahnrad „Vitesse“ rechts andocken – margin-left:auto belassen, ggf. white-space nowrap. */
.mini-ab .gear{position:relative; margin-left:auto;}
#ainfo{color:#22c55e} /* green for A */
#binfo{color:#f59e0b} /* orange for B */

/* Thicker seek bar & larger markers/handle */

/* =====================================================================
   PLAYER: Seek Bar
   ===================================================================== */
.mini-seek{height:18px;}
.mini-seek .handle{top:-7px;width:10px;height:26px;border-radius:5px;}
.mini-seek .marker{top:-12px;border-left:9px solid transparent;border-right:9px solid transparent}
.mini-seek .marker.a{border-bottom:18px solid #22c55e}
.mini-seek .marker.b{border-bottom:18px solid #f59e0b}

/* Place A/B markers below the bar; keep handle within bar */
.mini-seek-wrap{position:relative;width:100%;margin-top:6px;padding-bottom:24px;} /* room for markers below */
/* NOTE: Seekbar-Höhe – hier anpassen (z.B. 12px/14px/18px). Auswirkungen auf Marker-Offsets beachten. */
.mini-seek{position:relative;height:18px;border-radius:999px;background:#e9edf3;cursor:pointer;user-select:none}
.mini-seek .handle{position:absolute;top:-2px;width:10px;height:22px;border-radius:5px;background:#374151;box-shadow:0 0 0 2px #fff}
/* Reposition markers below and flip triangles upward */
.mini-seek .marker{position:absolute;top:22px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent}
.mini-seek .marker.a{border-top:18px solid #22c55e; border-bottom:0}
.mini-seek .marker.b{border-top:18px solid #f59e0b; border-bottom:0}

/* Flip markers: point upward from below the bar */
.mini-seek .marker{top:22px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:0;border-bottom-width:18px;border-bottom-style:solid}
.mini-seek .marker.a{border-bottom-color:#22c55e}
.mini-seek .marker.b{border-bottom-color:#f59e0b}

/* Force triangle markers to point upward using transform (robust across browsers) */
.mini-seek .marker{top:18px; transform: rotate(180deg); transform-origin: 50% 0;}

/* Shift markers down by the bar height (18px) so they sit fully below */
.mini-seek-wrap{padding-bottom:48px !important;}
/* NOTE: Marker-Vertikalposition – 'top: calc(...)' hier an Seek-Höhe angleichen. */
.mini-seek .marker{top:calc(18px + 18px) !important;} /* bar height + 0px gap */

/* Fine-tune: move markers about 3px lower for better clearance */
.mini-seek .marker{top:calc(18px + 21px) !important;} /* slightly further below bar */

/* Farbiges Klammer-Segment oberhalb der Seek-Leiste (zwischen A und B) */
.mini-seek-wrap{ position:relative; }
.mini-seek .bracket{
  position:absolute;
  left:0; top:-10px;
  height:6px; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#f59e0b);
  opacity:.7;
  pointer-events:none;
  display:none;
}

/* Einheitliche Höhe für A, B, × und A↔B */
.mini-ab .btn, .mini-ab label{
  min-height:36px; height:36px; display:flex; align-items:center;
}

/* Zweizeilige [A] / [B] kompakter halten */
.mini-ab .btn.twoline{
  padding:4px 8px;
  gap:2px;
  align-items:center;
  justify-content:center;
}
.mini-ab .btn.twoline .mini-time{
  font-size:0.72rem;
  line-height:1;
  color:#6b7280;
  transform: translateY(-1px);
  min-height:0.9em;
}

/* [A] / [B] Buttons perfekt zentrieren */
.mini-ab .btn.twoline{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Zeit darunter: kleiner & dünner */
.mini-ab .btn.twoline .mini-time{
  font-size: 0.72rem;
  font-weight: 400;       /* dünner */
  line-height: 1;
  color: #6b7280;
  transform: none;        /* kein leichtes Verschieben mehr */
}

/* Häkchen & Buchstabe zentriert auf einer Linie */
.mini-ab .btn.twoline .mark{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;               /* kleiner Abstand zwischen Buchstabe & ✓ */
}

/* Zeit leicht nach links verschieben, damit sie mittig unter [A]/[B] steht */
#btnA .mini-time,
#btnB .mini-time{
  transform: translateX(-3px);
}

/* --- Mini A↔B controls (non-intrusive) --- */
.mini-ab{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.mini-ab .btn{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:600}
.mini-ab .btn:active{transform:translateY(1px)}
.mini-ab label{display:flex;align-items:center;gap:6px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;font-weight:600}
.mini-ab .sep{flex:0 0 8px}

/* Speed gear dropdown */

/* Adjust gear placement and colors for A/B times; thicken seek bar */

 /* green for A */
 /* orange for B */

/* Thicker seek bar & larger markers/handle */

/* Place A/B markers below the bar; keep handle within bar */
 /* room for markers below */

/* Reposition markers below and flip triangles upward */

/* Flip markers: point upward from below the bar */

/* Force triangle markers to point upward using transform (robust across browsers) */

/* Shift markers down by the bar height (18px) so they sit fully below */

 /* bar height + 0px gap */

/* Fine-tune: move markers about 3px lower for better clearance */
 /* slightly further below bar */

/* --- Mini A↔B controls (enhanced) --- */
.mini-ab{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.mini-ab .btn{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:600;line-height:1}
.mini-ab .btn.twoline{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px}
.mini-ab .btn .mini-time{font-size:.78rem;color:#6b7280;min-height:0.9em;line-height:1}
.mini-ab .btn .mark{font-size:.9rem}
.mini-ab label{display:flex;align-items:center;gap:6px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px 10px;font-weight:600}

/* Custom seek bar */
.mini-seek-wrap{position:relative;width:100%;margin-top:6px}
.mini-seek{position:relative;height:12px;border-radius:999px;background:#e9edf3;cursor:pointer;user-select:none}
.mini-seek .fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c7d2e0,#9aa9c2)}
.mini-seek .ab{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg, rgba(34,197,94,.2), rgba(245,159,0,.2));pointer-events:none}
.mini-seek .handle{position:absolute;top:-4px;width:8px;height:20px;border-radius:4px;background:#374151;box-shadow:0 0 0 2px #fff}
.mini-seek .marker{position:absolute;top:-10px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}
.mini-seek .marker.a{border-bottom:14px solid #22c55e}
.mini-seek .marker.b{border-bottom:14px solid #f59e0b}

/* Speed gear dropdown */

/* Adjust gear placement and colors for A/B times; thicken seek bar */

 /* green for A */
 /* orange for B */

/* Thicker seek bar & larger markers/handle */

/* Place A/B markers below the bar; keep handle within bar */
 /* room for markers below */

/* Reposition markers below and flip triangles upward */

/* Flip markers: point upward from below the bar */

/* Force triangle markers to point upward using transform (robust across browsers) */

/* Shift markers down by the bar height (18px) so they sit fully below */

 /* bar height + 0px gap */

/* Fine-tune: move markers about 3px lower for better clearance */
 /* slightly further below bar */

    
    

    /* Kopfzeile links */

/* =====================================================================
   HEADER / MASTHEAD
   ===================================================================== */
.left .masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 12px; border-radius:12px;
}

/* linke Seite (Logo + Ordner + Titel) */
.left .masthead .brandline{ display:flex; align-items:center; gap:10px; }
.left .masthead .brand{ height:28px; width:auto; display:block; }
.left .masthead .folder{ font-size:22px; line-height:1; opacity:.9; }
.left .masthead .title{ font-weight:600; font-size:1.1rem;  line-height: 1.2; color:#0f172a; }

/* rechte Seite: Back-Button wie in espace (Pill-Style) */
.left .masthead .back-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; text-decoration:none; font-weight:600;
}
.left .masthead .back-link:hover{ background:#f8fafc; }

    
    /* Logo links bündig mit der H1 ausrichten */
/* NOTE: Masthead-Links-Ausrichtung – padding-left hier justieren, um Logo/H1 auszurichten. */
.left .masthead{
  padding-left: 0;      /* bisher 12px → jetzt 0 */
}

/* optional: minimal feintuning, falls noch 1–2px Versatz sichtbar */
.left .masthead .brandline{ margin-left: 0; }
.left .masthead .brand{ display:block; }

    
    
 /* kleiner Schriften im Dropdown */   
    
 /* alles (Anzeige + Optionen) kompakt */

/* =====================================================================
   SELECTS: Pièce / Section / Voix
   ===================================================================== */
/* NOTE: Dropdown-Schrift & Innenabstand – font-size / padding hier ändern. */
#pieceSel, #sectionSel, #voiceSel{
  appearance: auto;
  -webkit-appearance: menulist;   /* Safari */
  font-size: 0.75rem;
  line-height: normal;
  padding: 2px 6px;
}

/* Dropdown-Optionen ebenso */
#pieceSel option,
#sectionSel option,
#voiceSel option{
  font-size: 0.75rem;
  line-height: 1.1;
}

/* Behalte den nativen Pfeil, entferne Custom-Dekor */
#pieceSel, #sectionSel, #voiceSel{
  appearance: menulist;           /* oder: auto */
  -webkit-appearance: menulist;
  background-image: none !important;   /* falls mal gesetzt */
  background: none !important;         /* killt evtl. svg als bg */
}

/* Falls ein Wrapper ein ::after-Pfeil erzeugt */
.select, .select-wrap, .sel{
  position: relative; /* belassen, falls vorhanden */
}
.select::after, .select-wrap::after, .sel::after{
  content: none !important;   /* Custom-Pfeil aus */
  display: none !important;
}

/* Optional für sehr alte IE-Engines (schadet sonst nicht) */
#pieceSel::-ms-expand,
#sectionSel::-ms-expand,
#voiceSel::-ms-expand{ display: none; }

    
    /* ——— Typo-Feintuning nur links ——— */
.left{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* H1 bleibt dominanter (du hast 650) */
.left h1{ font-weight: 650; }

/* Masthead-Titel etwas leichter als H1 */
.left .masthead .title{
  font-weight: 600;      /* dezenter als H1 */
  font-size: 1.1rem;     /* optional kleiner als H1 */
  line-height: 1.2;
}

/* Back-Link im Masthead: gut lesbar, nicht zu fett */
.left .masthead .back-link{ font-weight: 600; }

/* Mini-Leiste A/B: Buchstabe kräftig, Zeit dünn */
.mini-ab .btn.twoline .label{ font-weight: 600; }
.mini-ab .btn.twoline .mini-time{
  font-weight: 400;      /* dünner */
  font-size: 0.72rem;    /* dezent klein */
  line-height: 1.15;
}

/* Selects (Pièce / Section / Voix): kompakt, mit nativem Pfeil */
#pieceSel, #sectionSel, #voiceSel{
  font-size: 0.75rem;
  line-height: normal;
  padding: 2px 6px;      /* minimaler Innenabstand */
  appearance: menulist;  /* nativer Pfeil */
  -webkit-appearance: menulist;
  background: none;      /* falls vorher Custom-Pfeil */
}
#pieceSel option, #sectionSel option, #voiceSel option{ font-size: 0.75rem; }

    .left{
  font-size: 1.05rem;     /* leicht grösserer Grundfont */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   PATCH 1 — HEADER (non-intrusive tidy)
   ========================================================= */
.brandline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap; /* bricht sauber auf kleineren Screens */
}
.brandline .brand{
  display: block;
  max-height: 48px; /* Logo-Höhe anpassen, falls nötig */
  height: auto;
  width: auto;
}
.brandline h1{
  margin: 0;
  line-height: 1.2;
  font-weight: 650;  /* Wunschwert aus früherer Runde */
  /* optional: font-size leicht justieren, wenn zu groß/klein
     font-size: clamp(1.1rem, 2.2vw, 1.5rem); */
}

/* Falls im Header Links/Icons rechts stehen, glätten wir Abstände */
.brandline a,
.brandline button{
  text-decoration: none;
  line-height: 1.2;
}

/* =========================================================
   PATCH 2 — PLAYER (Buttons horizontal, einheitliche Höhe)
   Ziel: KEINE Layout-Änderung; nur Stabilisierung.
   Bekannte Container: 
/* =====================================================================
   PLAYER CONTAINER & THEMES
   ===================================================================== */
#playerZone, .mini-ab, .ab
   ========================================================= */
#playerZone{
  /* nichts Grundlegendes ändern; nur Innenabstand und Wrap sichern */
  display: block;
}
.mini-ab,
.ab{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap; /* verhindert „Umklappen“/Überlappen */
}

/* Einheitliche Button-/Control-Baseline, ohne bestehende Klassen zu überfahren */
.mini-ab button,
.ab button,
#playerZone button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 2rem;
  padding: .35rem .55rem;
  line-height: 1.1;
  border-radius: .5rem;       /* optisch konsistent */
  /* KEIN color/background hier, um bestehendes Design nicht zu überschreiben */
  /* Falls Pfeile/Icons abgeschnitten waren: */
  vertical-align: middle;
}

/* Wenn die Button-Reihen zu eng wirken */
.mini-ab > * + *,
.ab > * + *{
  margin-left: 0; /* Lücken werden über gap geregelt */
}

/* Optional: kleine Touch-Up-Regeln für winzige Icons/Inputs im Player */
#playerZone input[type="range"],
#playerZone select,
#playerZone .btn,
#playerZone .icon{
  line-height: 1.1;
}

/* =========================================================
   PATCH 3 — DROPDOWNS & PANEL 
/* =====================================================================
   MISC UTILITIES
   ===================================================================== */
#right
   IDs bekannt: #pieceSel, #sectionSel, #voiceSel
   Panel laut dir: #right
   ========================================================= */
#pieceSel, #sectionSel, #voiceSel{
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  display: inline-block;
  visibility: visible;
  opacity: 1;
  border: 1px solid #ccc;
  background: #fff;
  color: inherit;
  border-radius: 4px;
  padding: .35rem .5rem;
  line-height: 1.2;
  min-width: 10rem;  /* bei Bedarf anpassen */
  height: auto;      /* vermeidet abgeschnittene Pfeile */
  margin-right: .5rem;
}

/* Falls die Selects in einer Reihe liegen: sauberes Wrapping erlauben */
#pieceSel, #sectionSel, #voiceSel{
  white-space: nowrap;
}
.select-row, .controls, .toolbar{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* „Affichage“-Panel (#right) stabilisieren, ohne Layout zu ändern */
#right{
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: .75rem;
  overflow: auto;
  /* Position NICHT zwangsläufig ändern — nur sichtbar und oberhalb halten */
  z-index: 1000;
  /* Optional (falls gewünscht/üblich): am Viewport „kleben“
     position: sticky;
     top: 1rem;
  */
}

/* Player neutral */
#playerZone{
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: .75rem;
}

/* Nur im aktiven Zustand dezent akzentuieren */
#playerZone.is-active{
  box-shadow: 0 6px 14px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
}

#playerZone.is-active::before{
  content: "";
  display: block;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, #d6c98a, transparent); /* zarte, warme Linie */
  margin: -0.75rem -0.75rem .5rem -0.75rem;
}

/* AB-/Control-Zeilen stabilisieren */
.ab, .mini-ab{
  display: flex;
  align-items: center;
  flex-wrap: wrap;     /* darf umbrechen, aber kontrolliert */
  gap: .5rem;
  min-width: 0;        /* verhindert Layout-Schübe durch Flex-Kind-Überlauf */
}

/* Gruppierung der AB-Buttons (falls vorhanden) */
.ab .group, .mini-ab .group{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;      /* nimmt Platz, erlaubt Schrumpfen */
  min-width: 12rem;
}

/* Zahnrad-Button „Vitesse“: rechts andocken, niemals umbrechen */
.ab .gear, .mini-ab .gear{
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Falls du dem Zahnrad keine Klasse geben willst/kannst:
   Fallback: letztes Button-Element in der Zeile rechts andocken */
.ab > button:last-of-type,
.mini-ab > button:last-of-type{
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Einheitliche Button-Basis, damit nichts „kippt“ */
.ab button, .mini-ab button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 2rem;
  padding: .35rem .55rem;
  line-height: 1.1;
  border-radius: .5rem;
  vertical-align: middle;
}

/* Player neutral */
#playerZone{
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: .75rem;
  /* NOTE: Akzentfarbe der Player-Linie – hier nur den Hex-Wert ändern (z.B. #9bb7e6 für Blau). */
--player-accent: #d6c98a; /* Standard-Akzent (warm-gold) */
}

/* Nur aktiv akzentuieren (keine Fläche, nur Linie) */
#playerZone.is-active::before{
  content: "";
  display: block;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, var(--player-accent), transparent);
  margin: -0.75rem -0.75rem .5rem -0.75rem;
}

/* Optionale Farbschemata – einfach Klasse an #playerZone setzen */
#playerZone.theme-yellow{ }  /* pastell-gelb/gold, sehr dezent */
#playerZone.theme-blue{ }  /* soft-blau */
#playerZone.theme-green{ }  /* sanftes grün */
#playerZone.theme-rose{ }  /* warmes rose */
#playerZone.theme-gray{ }  /* warm-grau */

/* Abstand zwischen letztem Dropdown und Player */
#playerZone{
  margin-top: .75rem;           /* mehr Luft unter dem letzten Select */
  position: relative;           /* für die Akzentlinie */
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: .75rem; /* Akzentfarbe (nur Linie) */
}

/* Akzentlinie nur im aktiven Zustand – innen im Player */
#playerZone.is-active::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;    /* keine negativen Margins mehr */
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, var(--player-accent), transparent);
  pointer-events: none;
}

/* Sicherheit: keine Select-Färbung außerhalb des Players */
select{
  background-color: #fff;       /* neutral lassen */
}
/* 1) Player-Container robust adressieren (id ODER class) */
#playerZone, .playerZone{
  position: relative;
  margin-top: .9rem;          /* mehr Luft unter dem letzten Dropdown */
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: .75rem; /* nur für die Linie */
}

/* 2) Akzentlinie nur im aktiven Zustand – und nur am Container */
#playerZone.is-active::before,
.playerZone.is-active::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, var(--player-accent), transparent);
  pointer-events: none;
}

/* 3) Selects neutral halten (überschreibt ältere Tönungen sicher) */
#playerZone select,
.playerZone select,
#voiceSel, .voiceSel,
#sectionSel, .sectionSel,
#pieceSel, .pieceSel{
  background-color: #fff !important;
}

/* 4) Zahnrad & AB-Leiste stabil (falls noch nicht drin) */

.ab .gear, .mini-ab .gear,
.ab > button:last-of-type,
.mini-ab > button:last-of-type{
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* sanfte Übergänge, keine Layout-Änderung */
#playerZone{
  transition: box-shadow 160ms ease;
  will-change: box-shadow;
}

/* Akzentlinie weich ein-/ausblenden */
#playerZone.is-active::before{
  opacity: .75;
  transition: opacity 160ms ease;
}

/* Hover: bisschen mehr Tiefe + Linie etwas kräftiger */
#playerZone:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.05);
}
#playerZone.is-active:hover::before{
  opacity: 1;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  #playerZone,
  #playerZone.is-active::before {
    transition: none;
  }
}

/* ==============================
   Minimal Player Patch (final)
   ============================== */
#playerZone{
  position: relative;
  margin-top: 16px; /* per user */
}

#playerZone.is-active::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, #d6c98a, transparent);
  opacity: .75;
  pointer-events: none;
  transition: opacity .16s ease;
}

@media (prefers-reduced-motion: reduce) {
  #playerZone,
  #playerZone.is-active::before {
    transition: none;
  }
}

/* ===== Player A/B Compact Hotfix ===== */
/* NOTE: Abstand zwischen A/B-Elementen – gap hier feiner einstellen (z.B. 3–6px). */
#playerZone .mini-ab{
  display:flex;
  align-items:center;
  gap:4px;                 /* weniger Luft */
  flex-wrap: nowrap;       /* kein Umbruch in Standardbreite */
  min-width:0;
}

#playerZone .mini-ab > *{
  flex:0 1 auto;           /* Elemente dürfen schrumpfen */
}

/* NOTE: A/B-Button Padding & Höhe – hier feintunen (padding, height, line-height). */
#playerZone .mini-ab .btn,
#playerZone .mini-ab label{
  padding:4px 8px;         /* kompakter */
  min-width:auto;          /* keine 2rem-Zwangsbreite */
  height:32px;             /* etwas niedriger als 36px */
  line-height:1.05;
}

#playerZone .mini-ab .btn.twoline{
  padding:2px 6px;         /* sehr kompakt für 2-zeilige A/B */
  gap:2px;
}
#playerZone .mini-ab .btn.twoline .mini-time{
  font-size:.68rem;        /* Zeit noch etwas kleiner */
  line-height:1.05;
}

#playerZone .mini-ab .sep{
  flex:0 0 4px;            /* schmale Trenn-„Luft“ */
}

#playerZone .mini-ab .gear{
  margin-left:auto;        /* rechts andocken, aber ohne riesige Lücke */
  flex:0 0 auto;
  white-space:nowrap;
}

/* Auf sehr schmalen Geräten Wrap wieder erlauben */
@media (max-width: 520px){
  #playerZone .mini-ab{ flex-wrap: wrap; }
}

/* ===== Player – nur Layout fix, keine Styles überschreiben ===== */
#playerZone .mini-ab{
  display: flex;
  align-items: center;
  gap: 4px;          /* etwas weniger Luft */
  flex-wrap: nowrap; /* kein Umbruch in Normalbreite */
  min-width: 0;      /* Schrumpfen erlauben */
}
#playerZone .mini-ab > *{
  flex: 0 1 auto;    /* Elemente dürfen schrumpfen */
}
#playerZone .mini-ab .gear{
  margin-left: auto; /* nur rechts andocken, sonst nix */
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Auf sehr schmalen Bildschirmen wieder umbrechen */
@media (max-width: 520px){
  #playerZone .mini-ab{ flex-wrap: wrap; }
}

/* ============================
   Player Accent Themes (consolidated)
   ============================ */
#playerZone.theme-yellow { --player-accent: #d6c98a; }  /* Gold/Beige */
#playerZone.theme-blue   { --player-accent: #9bb7e6; }  /* Soft-Blau */
#playerZone.theme-green  { --player-accent: #9cc49c; }  /* Sanftes Grün */
#playerZone.theme-rose   { --player-accent: #d7a7b6; }  /* Warmes Rosé */
#playerZone.theme-gray   { --player-accent: #bdb7aa; }  /* Warm-Grau */
#playerZone.is-active::before {
  background: linear-gradient(90deg, transparent, var(--player-accent), transparent);
}


/* =============================================================
   FINAL PATCH — Edge Scrollfix + Responsive (4:3 safe)
   ============================================================= */

/* Edge horizontal scroll fix (bottom left scrollbar) */
html, body {
  overflow-x: hidden;
}
.container {
  overflow-x: clip; /* prevents 1px overflow, safer than hidden */
}
.left, .right {
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Raccourcis behavior on smaller screens --- */
@media (max-width: 1200px){
  #shortcutInfo{
    position: static;
    margin: 8px 0 0;
    background: rgba(255,255,255,.98);
    z-index: auto;
  }
}
@media (max-width: 900px){
  #shortcutInfo{ display: none; }
}

/* --- 4:3 / smaller width layout wrap --- */
@media (max-width: 1100px){
  .container{ flex-wrap: wrap; }
  .left{
    flex: 1 1 100%;
    max-width: none;
    order: 1;
    position: relative;
    z-index: 2;
  }
  .right{
    flex: 1 1 100%;
    order: 2;
  }
}
.left  { min-width: 360px; }
.right { min-width: 520px; }

/* --- Safety stacking context --- */
.left  { position: relative; z-index: 2; }
.right { position: relative; z-index: 1; }

/* =============================================================
   END OF FINAL PATCH
   ============================================================= */


/* =============================================================
   HARMONIZE PATCH — Player Flex & Gear Priority (final)
   - Resolves mixed gap/wrap settings on .mini-ab
   - Locks A → B → × order; Gear to far right
   - Keeps wrap only on very small screens
   ============================================================= */
#playerZone .mini-ab{
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
#playerZone .mini-ab > *{
  flex: 0 0 auto !important;
  margin: 0 !important;            /* spacing via gap only */
}
/* Fixed logical order */
#playerZone #btnA{ order:10 !important; }
#playerZone #btnB{ order:20 !important; }
#playerZone .mini-ab .btn[data-act="clear"]{ order:30 !important; }
/* Gear to far right, unconditionally */
#playerZone .mini-ab > .gear{
  order: 9999 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
}
/* Allow wrap again on very small screens */
@media (max-width: 520px){
  #playerZone .mini-ab{ flex-wrap: wrap !important; }
}
/* Active line always from accent variable (safety) */
#playerZone.is-active::before{
  background: linear-gradient(90deg, transparent, var(--player-accent), transparent) !important;
}
/* =============================================================
   END HARMONIZE PATCH
   ============================================================= */
/* Echtes Fullscreen */
:fullscreen #appShell,
:-webkit-full-screen #appShell { width:100vw; height:100vh; }
:fullscreen #appShell .right,
:-webkit-full-screen #appShell .right { height:100%; overflow:auto; }

/* Fallback: falls du Klasse am Body nutzt */
html.is-faux-fullscreen, body.is-faux-fullscreen { height:100%; overflow:hidden; }
body.is-faux-fullscreen #appShell {
  position:fixed; inset:0; width:100vw; height:100vh; z-index:9999; overflow-x:clip;
}
body.is-faux-fullscreen .right { height:100%; overflow:auto; }


/* Linkes Pane im echten Fullscreen hell halten */
:fullscreen #appShell .left,
:-webkit-full-screen #appShell .left{
  background:#fff !important;
}

/* Falls die linke Spalte verschachtelte, transparente Kacheln hat: */
:fullscreen #appShell .left > *{
  background:transparent;   /* Inhalt bleibt normal */
}

/* Falls du den Fallback mit Body-Klasse verwendest: */
body.is-fullscreen #appShell .left{ background:#fff !important; }