/* ============================================================
   TOKENS — aicappella Crossover-Design
   (Quelle: soundboard-crossover-refined.html Mockup)
   ============================================================ */
:root {
  color-scheme: dark;
  --purple: #451067;
  --purple-warm: #2d1045;
  --orange: #E85E00;
  --orange-deep: #d05400;
  --yellow: #FCDE67;
  --cream: #F5EDE0;
  --surface-deep: #0e0818;
  --surface-elevated: #1a1228;
  --text-primary: #ede5d8;
  --text-secondary: rgba(237,229,216,0.5);
  --text-muted: rgba(237,229,216,0.3);
  --cream-15: rgba(245,237,224,0.15);
  --cream-08: rgba(245,237,224,0.08);
  --cream-04: rgba(245,237,224,0.04);
  --danger: #ef4444;

  --font-display: 'Bogart', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Champagne & Limousines', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* per-pad accent palette — Kachel-Grundfarbe (Crossover-Palette) */
.pal-violet { --pad: #451067; }
.pal-red    { --pad: #5b1a2e; }
.pal-amber  { --pad: #6e2a0a; }
.pal-blue   { --pad: #1f3a5e; }
.pal-green  { --pad: #2d5e3a; }
.pal-teal   { --pad: #5e3a1d; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }
html { -webkit-tap-highlight-color: transparent; background-color: var(--surface-deep); }

/* Touch: kein 300ms-Delay / Doppeltap-Zoom, keine Textmarkierung auf Bedien-Elementen.
   Das Inspector-Textfeld ist bewusst NICHT enthalten und bleibt selektierbar. */
.pad, .btn, .ctrl, .pa-btn, .pa-grab, .sw, .mchip, .tab, .seg-btn,
.modeswitch button, .btn-stop, .toggle, .stopmini, .btn-icon, .tab-x {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

body {
  zoom: 0.9; /* Gesamt-UI etwas kompakter — ein Regler skaliert Schrift + Boxen zusammen */
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* Basis: Surface-Deep mit zwei Marken-Glows */
  background:
    radial-gradient(ellipse 700px 560px at 60% 0%, rgba(69,16,103,0.55) 0%, transparent 68%),
    radial-gradient(ellipse 460px 400px at 65% 32%, rgba(232,94,0,0.10) 0%, transparent 60%),
    var(--surface-deep);
  background-attachment: fixed;
}

/* schwebende Ambient-Blobs (sehr dezent, hinter allem) */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 58% 42% 55% 45% / 48% 62% 38% 52%;
  filter: blur(60px); opacity: 0.5;
}
.blob.b1 {
  width: 480px; height: 420px; top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(69,16,103,0.55), transparent 70%);
  animation: blobFloat 14s ease-in-out infinite;
}
.blob.b2 {
  width: 360px; height: 340px; bottom: -100px; left: -60px;
  background: radial-gradient(circle, rgba(232,94,0,0.18), transparent 70%);
  animation: blobFloat 18s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(20px,-26px) rotate(3deg); }
  66% { transform: translate(-16px,18px) rotate(-2deg); }
}
/* Kork-Textur-Overlay (organisch, fast unsichtbar) — als SVG-Noise statt Bilddatei */
.cork-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 36px 28px 110px; }

/* ── Kopf ── */
.brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.brand-logo {
  height: 38px; width: auto; display: block;
  filter: drop-shadow(0 0 12px rgba(232,94,0,0.25)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.brandrow .eyebrow { margin-bottom: 0; }
.brandrow .eyebrow::before {
  content: ''; display: inline-block; width: 1px; height: 14px;
  background: var(--cream-15); margin-right: 14px; vertical-align: -2px;
}
.eyebrow {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.25em;
  font-weight: 700; color: var(--orange); margin-bottom: 12px;
}
.head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 6px; }
.sb-title {
  font-family: var(--font-display); font-weight: 300;
  letter-spacing: 0.06em; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head .badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--yellow); background: rgba(252,222,103,0.08);
  border: 1px solid rgba(252,222,103,0.18); padding: 5px 12px; border-radius: 100px;
  margin-bottom: 6px;
}
.separator {
  height: 2px; margin: 20px 0 26px; border-radius: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(232,94,0,0.4) 28%, rgba(252,222,103,0.55) 50%, rgba(232,94,0,0.4) 72%, transparent 96%);
  box-shadow: 0 0 20px rgba(232,94,0,0.15);
}

/* ── Board-Tabs ── */
.tabs-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tabs-row .tabs { margin-bottom: 0; }
.tabs.io { flex: none; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  padding: 8px 18px; border-radius: 100px; border: 1px solid var(--cream-08);
  background: transparent; color: var(--text-secondary);
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tab:hover { color: var(--cream); border-color: var(--cream-15); }
.tab.active {
  color: var(--surface-deep); background: var(--yellow); border-color: var(--yellow);
  box-shadow: 0 4px 16px rgba(252,222,103,0.2);
}
.tab.add { color: var(--text-muted); border-style: dashed; }
.tab-wrap { display: flex; align-items: center; }
.tab-label { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-rename-input {
  font: inherit; font-size: 0.85rem; font-weight: 700;
  background: transparent; border: none; outline: none;
  color: var(--surface-deep); width: 7em; min-width: 3em;
}
/* ✕ neben dem aktiven Tab (Geschwister-Button, kein verschachtelter Button mehr) */
.tab-x {
  font: inherit; font-size: 0.72rem; cursor: pointer;
  background: transparent; border: none; padding: 4px 6px; margin-left: -4px;
  color: var(--text-secondary); opacity: 0.5;
  transition: opacity 0.15s;
}
.tab-x:hover { opacity: 1; }

/* ── Toolbar ── */
.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; border-radius: 16px; margin-bottom: 24px;
  background: rgba(26,18,40,0.55); border: 1px solid var(--cream-08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.select {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; padding: 0 6px 0 16px; height: 40px; border-radius: 100px;
  border: 1px solid var(--cream-15); background: rgba(14,8,24,0.5); color: var(--text-secondary);
  transition: border-color 0.2s;
}
.select:hover { border-color: var(--orange); }
.select.counter { padding: 0 16px; color: var(--text-secondary); }
/* natives Select als nackter Pill-Inhalt mit eigenem ▾ */
select.ctrl {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--cream); background: transparent; border: none;
  padding: 9px 26px 9px 4px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--orange) 50%),
    linear-gradient(135deg, var(--orange) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.ctrl:focus { outline: none; }
select.ctrl option { background: var(--surface-elevated); color: var(--cream); font-weight: 400; }

.toolbar .spacer { margin-left: auto; }

/* Master-Lautstärke (Toolbar, beide Modi sichtbar) */
.select.master { gap: 10px; }
.select.master input.slider { width: 110px; }
.select.master .vol-val { padding-right: 8px; }

/* Segmented-Toggle: Nummerierungs-Modus (Auto | Fest) */
.tool-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.seg {
  display: inline-flex; padding: 4px; border-radius: 100px;
  background: rgba(14,8,24,0.6); border: 1px solid var(--cream-08);
}
.seg-btn {
  font: inherit; font-size: 0.8rem; font-weight: 700; padding: 7px 16px;
  border: none; border-radius: 100px; cursor: pointer; background: transparent; color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
}
.seg-btn.active { background: rgba(252,222,103,0.12); color: var(--yellow); }
.seg-btn:hover:not(.active) { color: var(--cream); }

/* Modus-Umschalter (Live | Bearbeiten) */
.modeswitch {
  display: inline-flex; padding: 4px; border-radius: 100px;
  background: rgba(14,8,24,0.6); border: 1px solid var(--cream-08);
}
.modeswitch button {
  font: inherit; font-size: 0.8rem; font-weight: 700; padding: 7px 16px;
  border: none; border-radius: 100px; cursor: pointer; background: transparent; color: var(--text-secondary);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.modeswitch button.on { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(232,94,0,0.3); }

.btn-stop {
  font: inherit; font-size: 0.85rem; font-weight: 700; padding: 10px 18px;
  border-radius: 100px; cursor: pointer; color: #f4a8a8;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-stop:hover { background: rgba(239,68,68,0.18); }
.btn-blackout { color: #c4b5d4; background: rgba(69,16,103,0.15); border-color: rgba(69,16,103,0.4); }
.btn-blackout:hover { background: rgba(69,16,103,0.28); }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; align-items: start; }
.stage { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-content: start; }
@media (max-width: 1180px){ .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Live-Modus: die Bühne gehört den Pads ──
   Editor klappt weg, Grid volle Breite, Nummern distanz-lesbar,
   „Alles stoppen" wird zum Blackout-Taster. */
body.is-live .layout { grid-template-columns: 1fr; }
body.is-live .editor { display: none; }
body.is-live .edit-tool { display: none; }
body.is-live .pad { aspect-ratio: 1.5/1; }
body.is-live .pad .num { font-size: 3.4rem; }
body.is-live .btn-stop {
  background: var(--danger); border-color: var(--danger); color: #fff;
  box-shadow: 0 8px 24px rgba(239,68,68,0.35);
}
body.is-live .btn-stop:hover { background: #dc2626; }

/* ── Pad (Crossover) ── */
.pad {
  position: relative; aspect-ratio: 1.35/1; border-radius: 16px;
  padding: 14px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  font: inherit; color: var(--text-primary);
  background: linear-gradient(158deg, color-mix(in srgb, var(--pad, var(--purple)) 58%, var(--surface-elevated)), #150c22 92%);
  border: 1px solid var(--cream-08);
  box-shadow: 0 6px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(252,222,103,0.06);
  transition: transform 0.16s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.2s;
}
.pad::after { /* sanfter Lichtschein oben */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(252,222,103,0.10), transparent 55%);
}
.pad:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(252,222,103,0.1); }
/* Press-Feedback wie eine Hardware-Taste: einsinken + kurz aufleuchten */
.pad:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(252,222,103,0.18);
  border-color: var(--cream-15);
  transition-duration: 0.06s;
}

/* Motiv-Wasserzeichen mittig; dimmt, sobald eine Wellenform auf dem Pad liegt */
.pad .motif {
  position: absolute; inset: 0; margin: auto; width: 56%; height: 56%;
  opacity: 0.16; color: var(--yellow); pointer-events: none;
}
.pad:has(.wave) .motif { opacity: 0.07; }

/* Status-Badges oben rechts (immer sichtbar — auch im Live-Modus ohne Hover) */
.pad .corner { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; gap: 5px; }
.pad .corner .dot {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 100px; line-height: 1.5;
  background: rgba(14,8,24,0.55); border: 1px solid var(--cream-08); color: var(--yellow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Exklusiv-Gruppe: orange abgesetzt vom gelben Loop-Badge */
.pad .corner .dot.dot-group { color: var(--orange); border-color: rgba(232,94,0,0.35); }

.pad .num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: flex-start; gap: 5px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.3rem; line-height: 1;
  color: var(--cream); text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* dezentes Schloss neben der Nummer im 'fixed'-Modus */
.pad .num-lock {
  width: 13px; height: 13px; margin-top: 4px; flex: none;
  color: var(--yellow); opacity: .7;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.pad .pad-title {
  margin-top: auto; position: relative; z-index: 1;
  font-size: 0.82rem; font-weight: 500;
  padding: 6px 11px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(14,8,24,0.5); color: var(--cream);
  border: 1px solid var(--cream-08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Zustand: ausgewählt (Bearbeiten) */
.pad.is-selected {
  box-shadow: 0 0 0 2px var(--orange), 0 10px 34px rgba(232,94,0,0.32), inset 0 1px 0 rgba(252,222,103,0.12);
}
/* Zustand: spielt gerade — Gelb durchgängig: Ring, Nummer, EQ, Label-Rand */
.pad.playing { box-shadow: 0 0 0 2px var(--yellow), 0 0 30px 2px rgba(252,222,103,0.4); }
.pad.playing .num { color: var(--yellow); }
.pad.playing .pad-title { border-color: rgba(252,222,103,0.35); }
.pad.playing .eq { display: flex; }
.eq { display: none; position: absolute; z-index: 1; bottom: 46px; right: 14px; gap: 3px; align-items: flex-end; height: 18px; }
.eq span { width: 3px; background: var(--yellow); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.eq span:nth-child(1){ animation-delay: 0s; } .eq span:nth-child(2){ animation-delay: 0.2s; }
.eq span:nth-child(3){ animation-delay: 0.4s; } .eq span:nth-child(4){ animation-delay: 0.1s; }
@keyframes eq { 0%,100%{ height:5px; } 50%{ height:18px; } }

/* ---- Wellenform-Band (erscheint, sobald eine Audiodatei auf dem Pad liegt) ---- */
.pad .wave { position: relative; z-index: 1; margin: 8px 0 6px; height: 30px; min-height: 0; }
.pad .wave-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pad .wave-svg.is-dim rect    { fill: rgba(245,237,224,0.22); }
.pad .wave-svg.is-bright rect { fill: var(--yellow); }
/* Abgespielter Teil = helle Ebene, von links nach --progress (0..1) freigelegt; Ruhe = 1 = ganz hell. */
.pad .wave-svg.is-bright { clip-path: inset(0 calc(100% - var(--progress, 1) * 100%) 0 0); }
/* Playhead-Marker: dünne gelbe Linie an der --progress-Position, nur während der Wiedergabe */
.pad .wave-marker {
  position: absolute; top: -3px; bottom: -3px;
  left: calc(var(--progress, 1) * 100%);
  width: 2px; margin-left: -1px;
  background: var(--yellow); border-radius: 2px;
  box-shadow: 0 0 8px rgba(252,222,103,0.85), 0 0 2px rgba(252,222,103,0.95);
  opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
}
.pad.is-progressing .wave-marker { opacity: 1; }

/* ---- Hover-Aktionsleiste am oberen Pad-Rand (nur Bearbeiten-Modus) ---- */
.pad-actions {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 5px;
  padding: 6px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(rgba(14,8,24,.88), rgba(14,8,24,.42) 75%, transparent);
  opacity: 0; transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease;
}
/* focus-within: Tastaturfokus auf einem Aktions-Button blendet die Leiste ein (sonst unsichtbarer Fokus) */
.pad:hover .pad-actions,
.pad:focus-within .pad-actions { opacity: 1; transform: translateY(0); }
.pa-spacer { flex: 1; }
.pa-grab {
  display: grid; place-items: center; width: 16px; height: 24px;
  color: var(--text-secondary); cursor: grab;
}
.pa-grab:active { cursor: grabbing; }
.pa-grab svg { width: 14px; height: 18px; }
.pa-btn {
  flex: none; width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--yellow);
  border: 1px solid var(--cream-15);
  border-radius: 8px;
  background: rgba(14,8,24,0.75);
  transition: background .12s, border-color .12s, color .12s, transform .1s, box-shadow .12s;
}
.pa-btn svg { width: 15px; height: 15px; }
.pa-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(26,18,40,0.95); transform: translateY(-1px); }
.pa-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.pa-btn.pa-del:hover {
  background: var(--danger); border-color: var(--danger); color: #fff;
  box-shadow: 0 3px 11px -1px rgba(239,68,68,0.6);
}
/* Loop-Status: aus = gedimmt, an/pingpong = volles Gelb mit Glow */
.pa-btn.pa-loop { opacity: .5; }
.pa-btn.pa-loop.is-on, .pa-btn.pa-loop.is-pp {
  opacity: 1; border-color: var(--yellow);
  box-shadow: inset 0 1px 0 rgba(252,222,103,0.16), 0 0 9px -1px rgba(252,222,103,0.55);
}

/* ---- Drag & Drop: Platzhalter-Kachel (gestrichelte Lücke) ---- */
.pad.pad-ph {
  pointer-events: none;                          /* Drops gehen an die echten Pads */
  background: rgba(26,18,40,0.3) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.pad.pad-ph::after { display: none; }
.pad.pad-ph::before {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: 16px;
  border: 2px dashed var(--yellow);
  background: rgba(252,222,103,0.10);
  box-shadow: inset 0 0 18px -6px rgba(252,222,103,0.6);
}

/* „Pad anlegen"-Kachel (leer/gestrichelt, Crossover-Stil) */
.pad.add {
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(26,18,40,0.4);
  border: 1px dashed var(--cream-15);
  box-shadow: none; color: var(--text-muted);
}
.pad.add::after { display: none; }
.pad.add .plus { font-size: 2rem; font-family: var(--font-display); line-height: 1; }
.pad.add .t { font-size: 0.82rem; font-style: italic; }
.pad.add:hover { transform: translateY(-2px); border-color: var(--orange); color: var(--text-secondary); }

/* ============================================================
   EDITOR-PANEL (rechts)
   ============================================================ */
.editor {
  border-radius: 18px; padding: 22px;
  background: rgba(26,18,40,0.8); border: 1px solid var(--cream-08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.insp-body { display: flex; flex-direction: column; }
.ehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ehead h2 { font-family: var(--font-display); font-weight: 300; font-size: 1.3rem; letter-spacing: 0.02em; }
.ehead .pill {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); background: rgba(232,94,0,0.12); padding: 4px 12px; border-radius: 100px;
}

.field { margin-bottom: 18px; }

/* Verhalten-Block: Loop + Trigger als immer sichtbare Segmented-Controls (oben, vor den Akkordeons) */
.behavior { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.beh-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 12px; }
.beh-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); }
.seg.seg-full { display: flex; width: 100%; }
.seg.seg-full .seg-btn { flex: 1; padding: 8px 5px; font-size: 0.76rem; text-align: center; white-space: nowrap; }

/* Akkordeon-Sektionen: native <details>, Kopfzeile im Label-Stil mit Chevron */
.sect { border-top: 1px solid var(--cream-08); }
.sect summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 2px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-secondary);
  transition: color 0.12s;
}
.sect summary::-webkit-details-marker { display: none; }
.sect summary::before {
  content: ''; width: 6px; height: 6px; flex: none; margin-top: -2px;
  border-right: 1.6px solid var(--orange); border-bottom: 1.6px solid var(--orange);
  transform: rotate(-45deg); transform-origin: 60% 60%;
  transition: transform 0.15s ease;
}
.sect[open] summary::before { transform: rotate(45deg); }
.sect summary:hover { color: var(--cream); }
.sect .sect-body { padding: 6px 0 2px; }
.sect .sect-body > .field:last-child { margin-bottom: 14px; }
label.lbl {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-secondary); margin-bottom: 8px;
}
textarea.desc, input.txt {
  width: 100%; font: inherit; font-size: 0.92rem; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-elevated); color: var(--cream);
  border: 1px solid var(--cream-08); resize: vertical;
}
textarea.desc { min-height: 76px; line-height: 1.5; }
textarea.desc:focus, input.txt:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,94,0,0.15); }

/* Selects im Editor: volle Breite, eckiger Input-Look */
.field select.ctrl {
  width: 100%; font-weight: 400; font-size: 0.92rem;
  padding: 12px 36px 12px 14px; border-radius: 12px;
  background-color: var(--surface-elevated);
  border: 1px solid var(--cream-08); color: var(--cream);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
}
.field select.ctrl:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,94,0,0.15); }

/* Farb-Chips */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; background: var(--pad); color: var(--pad);
  transition: transform 0.12s;
}
.sw:hover { transform: scale(1.1); }
.sw.active { border-color: var(--cream); box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 4px var(--yellow); }

/* Zuschnitt-Streifen: Wellenform + zwei ziehbare Handles, Außenbereiche abgedunkelt */
.trim {
  position: relative; height: 48px;
  background: var(--surface-elevated);
  border: 1px solid var(--cream-08); border-radius: 12px;
  overflow: hidden; touch-action: none;
}
.trim .wave-svg { position: absolute; inset: 6px 0; width: 100%; height: calc(100% - 12px); }
.trim .wave-svg rect { fill: rgba(245,237,224,0.35); }
.trim-shade {
  position: absolute; top: 0; bottom: 0;
  background: rgba(14,8,24,0.72); pointer-events: none;
}
.trim-shade.l { left: 0; }
.trim-shade.r { right: 0; }
.trim-handle {
  position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px;
  cursor: ew-resize; z-index: 2;
}
.trim-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
  background: var(--yellow); border-radius: 2px;
  box-shadow: 0 0 6px rgba(252,222,103,0.7);
}
.trim-handle::after {  /* Griff-Noppe */
  content: ''; position: absolute; top: 50%; left: 3px; width: 8px; height: 14px;
  transform: translateY(-50%); border-radius: 4px;
  background: var(--yellow);
}

/* Motiv-Chips */
.motifs { display: flex; gap: 8px; flex-wrap: wrap; }
.mchip {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-elevated); border: 1px solid var(--cream-08); cursor: pointer; color: var(--text-secondary);
  transition: color 0.15s, background 0.15s, border-color 0.15s; padding: 0;
}
.mchip svg { width: 20px; height: 20px; }
.mchip:hover { color: var(--yellow); border-color: var(--cream-15); }
.mchip.sel { color: var(--surface-deep); background: var(--yellow); border-color: var(--yellow); }
/* Eigene Symbole: hochgeladenes Bild als Chip + Upload-Chip („+") */
.mchip img { width: 22px; height: 22px; object-fit: contain; }
.mchip.add { border-style: dashed; font-size: 1.1rem; font-weight: 700; line-height: 1; }
.pad img.motif { object-fit: contain; }

/* Lautstärke */
.vol-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
input[type=range].slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--orange) var(--fill,80%), var(--surface-elevated) var(--fill,80%));
  outline: none; cursor: pointer;
}
input[type=range].slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--surface-deep);
  box-shadow: 0 0 8px rgba(232,94,0,0.4);
}
input[type=range].slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 2px solid var(--surface-deep);
}
.vol-val { font-size: 0.82rem; color: var(--text-secondary); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.toggle {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.82rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer; padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--cream-08); background: rgba(14,8,24,0.4);
  white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toggle.on { color: var(--yellow); border-color: rgba(252,222,103,0.3); background: rgba(252,222,103,0.08); }

/* Buttons */
.btn-row { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: 0.9rem; font-weight: 700; padding: 13px 18px;
  border-radius: 100px; border: none; cursor: pointer; flex: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn.primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(232,94,0,0.25); }
.btn.primary:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232,94,0,0.35); }
.btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--cream-15); flex: 0 0 auto; }
.btn.ghost:hover { border-color: var(--orange); color: var(--orange); }
/* Pegelmeter während der Aufnahme: gelber Balken, rot nahe Übersteuerung */
.rec-meter {
  height: 6px; margin-top: 8px; border-radius: 4px;
  background: var(--surface-elevated); border: 1px solid var(--cream-08); overflow: hidden;
}
.rec-meter span {
  display: block; height: 100%; width: 0%;
  background: var(--yellow); border-radius: 4px;
  transition: width 0.06s linear;
}
.rec-meter span.hot { background: var(--danger); }

/* Aufnahme läuft: roter Puls, Button wird zum Stopp-Knopf */
.btn.ghost.rec {
  color: #f4a8a8; background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.5);
  animation: recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse { 50% { border-color: rgba(239,68,68,0.95); background: rgba(239,68,68,0.18); } }
/* „Pad löschen": eindeutig sichtbar, aber nicht schreiend — rote Outline, volle Breite */
.btn.danger {
  width: 100%; margin-top: 10px;
  color: #f4a8a8; background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
}
.btn.danger:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.55); color: #fff; transform: none; }

.insp-body.play-mode .edit-only { display: none; }
/* Szenen-Pad: Audio-/Wiedergabe-Felder ausblenden — eine Szene spielt nicht selbst */
.insp-body.scene-mode .audio-only { display: none; }
.scene-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; margin-bottom: 6px; cursor: pointer;
  font-size: 0.85rem; color: var(--cream);
  background: var(--surface-elevated); border: 1px solid var(--cream-08); border-radius: 10px;
}
.scene-row input[type=checkbox] { accent-color: var(--orange); width: 15px; height: 15px; }
.scene-row-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-empty { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
/* Szenen-Badge auf dem Pad */
.pad .corner .dot.dot-scene { color: var(--cream); border-color: var(--cream-15); }
.play-hint { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.play-hint strong { color: var(--yellow); }
.stage .play-hint { text-align: center; font-size: 0.82rem; margin: 0; }

/* ── Now-Playing-Fußleiste ── */
.nowbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));   /* Standalone-PWA: nicht unter den iPhone-Home-Indicator */
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 14px;
  border-radius: 100px; background: rgba(26,18,40,0.92); border: 1px solid var(--cream-08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.nowbar[hidden] { display: none; }
.nowbar .eqmini { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.nowbar .eqmini span { width: 3px; background: var(--yellow); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.nowbar .eqmini span:nth-child(1){ animation-delay: 0s; } .nowbar .eqmini span:nth-child(2){ animation-delay: 0.2s; }
.nowbar .eqmini span:nth-child(3){ animation-delay: 0.4s; } .nowbar .eqmini span:nth-child(4){ animation-delay: 0.1s; }
.nowbar .meta { font-size: 0.85rem; max-width: 320px; }
.nowbar .meta b { color: var(--yellow); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowbar .meta .sub { color: var(--text-secondary); font-size: 0.78rem; }
.stopmini {
  font: inherit; font-size: 0.8rem; font-weight: 700; padding: 8px 16px; border-radius: 100px; cursor: pointer;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #f4a8a8;
}

/* ── Toast (über der Now-Playing-Leiste) ── */
.toast {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(20px);
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(26,18,40,0.95); border: 1px solid var(--cream-15); color: var(--cream);
  padding: 10px 18px; border-radius: 999px; font-size: 0.85rem;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Aktions-Button im Toast (z. B. „Rückgängig") — nur er ist klickbar,
   der übrige Toast bleibt pointer-durchlässig. */
.toast-action {
  pointer-events: auto;
  font: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--yellow); background: transparent;
  border: 1px solid rgba(252,222,103,0.4);
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
  touch-action: manipulation;
  transition: background .12s, border-color .12s;
}
.toast-action:hover { background: rgba(252,222,103,0.12); border-color: var(--yellow); }
.toast-action:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

svg.icn { display: block; }

.spin { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sichtbarer Tastatur-Fokus */
.pad:focus-visible, .btn:focus-visible, select.ctrl:focus-visible,
.sw:focus-visible, .mchip:focus-visible, .tab:focus-visible, .seg-btn:focus-visible,
.modeswitch button:focus-visible, .btn-stop:focus-visible, .toggle:focus-visible,
.stopmini:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
input[type=range].slider:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Bewegung reduzieren: Endlos-Equalizer, FLIP-Reorder, Blobs, Hover-/Toast-Übergänge beruhigen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   EDITOR-PANEL-UMBAU (Variante 4) — 2026-07-01
   Editor als rechte Spalte ab ganz oben, dicht dargestellt,
   ein-/ausklappbar (= zugleich Bearbeiten/Live-Umschalter).
   Plan: docs/plans/2026-07-01-soundboard-editor-panel-umbau.md
   ============================================================ */

/* Editor-Inneres als dichtes 2-Spalten-Layout */
.editor{ padding:14px 16px; }
.insp-body{ display:block; column-count:2; column-gap:22px; }
.insp-body > .ehead,
.insp-body > .field,
.insp-body > .behavior,
.insp-body > #btnDelete{ column-span:all; }
.insp-body > .sect{ break-inside:avoid; margin-top:8px; }
/* Sektions-Kopf = statische Gruppenueberschrift (kein Auf/Zu, kein Chevron) */
.editor .sect summary{ pointer-events:none; padding:7px 0 5px; font-size:0.66rem; letter-spacing:0.14em; color:var(--yellow); opacity:0.8; }
.editor .sect summary::before{ display:none; }
.editor .sect .sect-body{ padding:0; }
.editor .sect .sect-body > .field:last-child{ margin-bottom:7px; }
.editor .ehead{ margin-bottom:8px; }
.editor .ehead h2{ font-size:1.1rem; }
.editor label.lbl{ margin-bottom:4px; font-size:0.64rem; letter-spacing:0.07em; line-height:1.3; }
.editor .field{ margin-bottom:10px; }
.editor .behavior{ margin-bottom:10px; gap:7px; }
.editor .beh-row{ grid-template-columns:66px 1fr; gap:10px; }
.editor .beh-lbl{ font-size:0.64rem; letter-spacing:0.04em; }
.editor .seg.seg-full .seg-btn{ padding:7px 5px; font-size:0.68rem; }
.editor textarea.desc{ min-height:44px; padding:7px 10px; font-size:0.82rem; line-height:1.45; }
.editor input.txt, .editor select.ctrl{ padding:7px 11px; font-size:0.84rem; }
.editor .btn{ padding:7px 11px; font-size:0.74rem; }
.editor .btn-row{ gap:7px; }
.editor .vol-row{ gap:10px; }
.editor .vol-val{ font-size:0.74rem; min-width:36px; }
.editor .toggle{ padding:6px 9px; font-size:0.72rem; }
.editor .swatches, .editor .motifs{ gap:6px; }
.editor #btnDelete{ margin-top:10px; }

/* Top-Zone verdichten, Steuerung nach links */
.wrap{ padding-top:6px; padding-bottom:20px; }
.brandrow{ margin-bottom:6px; gap:10px; }
.brand-logo{ height:30px; }
.head{ margin-bottom:4px; }
.sb-title{ font-size:2rem; }
.head .badge{ margin-bottom:3px; padding:4px 10px; }
.separator{ margin:8px 0 10px; }
.tabs-row{ justify-content:flex-start; margin-bottom:8px; }
.tabs-row .tabs.io{ margin-left:14px; }
.toolbar{ padding:8px 12px; margin-bottom:10px; gap:8px; }
.toolbar .select{ height:34px; font-size:0.8rem; }
.toolbar .toggle, .toolbar .seg-btn, .toolbar .tab{ font-size:0.8rem; }

/* Editor als volle rechte Spalte ab ganz oben (.left-col wird per JS erzeugt) */
.wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:stretch; }
.left-col{ min-width:0; }
.left-col .layout{ display:block; }
.editor{ align-self:stretch; }

/* Ein-/Ausklappen = Bearbeiten/Live-Umschalter */
.wrap{ transition: grid-template-columns .4s cubic-bezier(.4,0,.2,1), gap .4s cubic-bezier(.4,0,.2,1); }
.editor{ min-width:0; overflow:hidden; transition: opacity .28s ease, padding .4s cubic-bezier(.4,0,.2,1); }
body.is-live .editor{ display:block; opacity:0; pointer-events:none; padding-left:0; padding-right:0; }
body.is-live .wrap{ grid-template-columns:1fr 0fr; gap:0; }
#modeSwitch{ display:none; }   /* Live/Bearbeiten-Knoepfe entfallen -> der Griff uebernimmt */

/* Drawer-Griff an der rechten Editor-Kante, mittig */
.editor-handle{
  position:absolute; top:50%; right:28px; transform:translate(50%,-50%); z-index:50;
  width:26px; height:66px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,18,40,0.95); border:1px solid var(--cream-15);
  color:var(--orange); font-size:1rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.45);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.editor-handle:hover{ border-color:var(--orange); background:var(--orange); color:#fff; transform:translate(50%,-50%) scale(1.08); }

/* ── Schmales Fenster (< 900 px): Editor stapelt unter dem Grid statt zerquetschter 2-Spalten ──
   Der Editor-Umbau nagelte .wrap auf 2 Spalten; der alte 860er-Breakpoint lief ins Leere, weil
   .layout jetzt display:block ist. Hier: eine Spalte, Inspector einspaltig, Drawer-Griff (ergibt
   gestapelt keinen Sinn) weicht dem Toolbar-Umschalter. body.is-live .wrap muss mit gesetzt sein,
   sonst gewinnt die 1fr-0fr-Live-Regel per hoeherer Spezifitaet. */
@media (max-width: 900px){
  .wrap, body.is-live .wrap{ grid-template-columns: 1fr; gap: 18px; }
  .insp-body{ column-count: 1; }
  body.is-live .editor{ display: none; }   /* im Live-Modus keine Leerzeile unter dem Grid */
  .editor-handle{ display: none; }
  #modeSwitch{ display: inline-flex; }     /* der Griff faellt weg -> Toolbar-Umschalter zurueck */
}

/* ── Timer ── */
.timer-wrap { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.timer-display {
  font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 700;
  color: var(--cream); letter-spacing: 0.05em; min-width: 3.2em; text-align: center;
}
.timer-wrap.running .timer-display { color: var(--yellow); }
.timer-wrap.expired .timer-display { color: #f87171; }
.btn-icon {
  font: inherit; font-size: 0.85rem; cursor: pointer; background: transparent;
  border: 1px solid var(--cream-08); border-radius: 6px; padding: 4px 8px;
  color: var(--text-secondary);
  transition: color 0.15s, border-color 0.15s;
}
.btn-icon:hover { color: var(--cream); border-color: var(--cream-15); }

/* ── Sound-Generator-Panel ── */
.gen-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 10px; background: var(--cream-04); border: 1px solid var(--cream-08); }
.gen-cfg summary { font-size: 0.78rem; color: var(--text-muted); }