:root{
    --bg:#0b0f16; --panel:#131a28; --panel2:#0f1422; --line:#243046;
    --text:#e7eef7; --muted:#9aa6b2; --accent:#58e1d3; --accent2:#ffd503; --danger:#ff6b6b; --ok:#77e08f; --warn:#ffd54a;
    --digital:#00ff87; --remain:#ff6b6b;
    --dockH: 360px;
    --clockW: 148px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;color:var(--text);
    background:radial-gradient(1200px 600px at 10% -10%, #12203a 0%, #0b0f16 50%, #070a10 100%);
    font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
  }

  /* === Dock (fix auf Desktop) – auf Mobile wird es „normal flow“ === */
  #dock{
    position:fixed; left:0; right:0; top:0; z-index:10;
    backdrop-filter: blur(8px);
    background:linear-gradient(180deg, rgba(11,15,22,.92), rgba(11,15,22,.85));
    border-bottom:1px solid var(--line);
  }
  header{padding:12px 14px 6px}
  .brand{
    margin:0;
    font-family: "Roboto Mono","Courier New",monospace;
    font-weight:700; letter-spacing:.6px; color:#58d9ff;
    text-shadow:0 0 6px rgba(80,200,255,.9),0 0 16px rgba(56,179,255,.6),0 0 28px rgba(56,179,255,.35);
    filter:saturate(120%);
  }

  .dock-grid{ display:grid; grid-template-columns: 1fr; gap:12px; padding: 6px 14px 8px; }

  /* HUD-Reihe: Tempo | Crossfade | System | Transport | Tools (Desktop) */
  .hud-strip{
    display:grid; gap:12px;
    grid-template-columns: minmax(300px,1.1fr) minmax(340px,1fr) 200px minmax(380px,1.1fr) minmax(420px,1.2fr);
    align-items:stretch;
  }
  .hud-card{
    display:flex; flex-direction:column; gap:8px; min-height:0;
    padding:10px 12px; background:linear-gradient(180deg,#11182a,#0b1222);
    border:1px solid var(--line); border-radius:12px
  }
  .hud-title{font-size:12px;color:var(--muted);margin:0;font-weight:600;letter-spacing:.2px}

  .spark{width:100%;height:64px;border:1px solid var(--line);border-radius:8px;background:#0f1424}
  .val{font-size:12px;color:#cfd9e6}

  .kpi{display:flex;flex-direction:column;gap:6px}
  .meter{height:10px;background:#121827;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:140px;position:relative}
  .meter .bar{height:100%;width:0%}
  .barA{background:linear-gradient(90deg,#58e1d3,#ffd503)}
  .barB{background:linear-gradient(90deg,#77e08f,#b5f1c2)}
  .miniCanvas{width:100%;height:52px;border:1px solid var(--line);border-radius:8px;background:#0f1424}

  .sysstats{display:flex; flex-direction:column; gap:6px}
  .sysline{display:flex; justify-content:space-between; font-variant-numeric:tabular-nums}
  .lag,.ram,.sum{font-size:12px}

  .row-buttons{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .btn{background:linear-gradient(180deg,#1b2234,#141a2b);border:1px solid var(--line);color:var(--text);
       padding:8px 12px;border-radius:8px;cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .05s}
  .btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,225,211,.15)}
  .btn:active{transform:translateY(1px)}
  .pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#121827;color:var(--text)}
  .pill.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px rgba(88,225,211,.12)}
  .ok{border-color:var(--ok);color:var(--ok)}
  .danger{color:var(--danger)}

  .tools{display:flex; flex-direction:column; gap:10px}
  .row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .kpi label{font-size:12px;color:#9aa6b2;margin-bottom:2px;display:block}
  .kpi input[type=range]{width:130px}

  .spectrumWrap{padding:0 14px 8px}
  #spectrum{width:100%;height:140px;border:1px solid var(--line);border-radius:12px;background:#0b1222;display:block}

  .dock-panel{padding:0 14px 12px}
  .panel{background:rgba(19,26,40,.75);backdrop-filter: blur(6px);border:1px solid var(--line);border-radius:14px;padding:12px}

  .upload{border:2px dashed var(--line);border-radius:12px;padding:12px;text-align:center;color:var(--muted);cursor:pointer;position:relative;background:rgba(14,20,36,.5)}
  .upload.drag{border-color:var(--accent);color:var(--accent)}
  .progressbar{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,#39f,#3d7);width:0%}

  /* === Scroller-Bereich (Desktop) === */
  #scroller{
    position:fixed; left:0; right:0; bottom:0; top:var(--dockH);
    overflow:auto; padding:14px;
    scrollbar-width: thin;
    scrollbar-color: #3abbdc #0b1222;
    background: transparent;
  }
  #scroller::-webkit-scrollbar{ width:14px }
  #scroller::-webkit-scrollbar-track{ background: linear-gradient(180deg,#0b1222,#0b0f16); border-left:1px solid #162036; }
  #scroller::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg,#58e1d3,#ffd503); border:3px solid #0b1222; border-radius:12px;
    box-shadow: 0 0 8px rgba(88,225,211,.35), inset 0 0 6px rgba(54,179,255,.25);
  }

  .tracklist{display:flex;flex-direction:column;gap:10px}

  /* 3 Spalten: Meta | Timeline (breit) | Uhren (Desktop) */
  .item{
    display:grid;
    grid-template-columns:minmax(220px,380px) 1fr 150px;
    gap:14px;align-items:center;background:#121828d9;border:1px solid var(--line);
    border-radius:12px;padding:12px
  }
  .item.dragging{opacity:.65; outline:2px dashed var(--accent)}
  .item.drop-target{outline:2px dashed var(--accent2)}
  .meta{cursor:grab}
.meta{ min-width:0; }                 /* erlaubt echtes Schrumpfen im Grid */
.meta .title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meta .sub{   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .meta:active{cursor:grabbing}
  .meta .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta .sub{font-size:12px;color:var(--muted)}
  .meta .actions{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}

  .timeline{position:relative;height:96px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#0f1424,#0b101b);overflow:hidden}

/* Sekunden-Lineal in der Timeline (unten andocken) */
.timeline{ padding-bottom:18px; } /* Platz für das Lineal */

.timeline .ruler{
  position:absolute;
  left:0; right:0; bottom:0;
  height:16px;
  background:#0f1424;
  border-top:0px solid var(--line);
  font-size:9px;
  line-height:16px;
  color:#ff8c00;
  pointer-events:none;
  z-index:5;
}

.timeline .ruler .tick{
  position:absolute;
  top:0; bottom:0;
  transform:translateX(-50%);
  border-left:0px solid rgba(255,255,255,.18);
  padding-left:1px;
  white-space:nowrap;
}


  canvas.wave{position:absolute;left:0;top:0;width:100%;height:100%}
  .progress{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.08);width:0%}
  .playhead{position:absolute;top:0;width:2px;background:#fff;height:100%;opacity:.9;pointer-events:none}
  .fadeMark{position:absolute;top:0;bottom:0;background:rgba(255,213,74,.20);border-left:2px solid #ffd54a;border-right:2px solid #ffd54a;pointer-events:none;display:none}

  .clockStack{display:flex;flex-direction:column;align-items:flex-end}
  .clock{
    width: var(--clockW);
    font-variant-numeric: tabular-nums;
    font-family: "Roboto Mono","Courier New",monospace;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--digital);
    background: #0b1326;
    border:1px solid rgba(0,255,135,.35);
    border-radius:8px;
    padding:8px 10px;
    text-align:center;
    box-shadow: 0 0 12px rgba(0,255,135,.12), inset 0 0 8px rgba(0,255,135,.05);
    text-shadow: 0 0 6px rgba(0,255,135,.55), 0 0 14px rgba(0,255,135,.25);
  }
  .clock.small{font-size: 15px; margin-top:6px}
  .clock.rem{
    width: var(--clockW);
    color: var(--remain);
    background:#2b0b0b;
    border:1px solid rgba(255,107,107,.38);
    box-shadow: 0 0 12px rgba(255,107,107,.12), inset 0 0 8px rgba(255,107,107,.06);
    text-shadow: 0 0 6px rgba(255,107,107,.55), 0 0 14px rgba(255,107,107,.25);
  }

  /* Busy Modal */
  .busyMask{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.35); backdrop-filter: blur(2px); z-index:1000;
  }
  .busyCard{
    width:min(560px,92vw); border-radius:14px; border:1px solid var(--line);
    background:linear-gradient(180deg,#101724,#0c1322); padding:18px;
    box-shadow:0 10px 40px rgba(0,0,0,.45);
  }
  .busyTitle{font-weight:600;margin:0 0 10px 0}
  .spinner{
    width:34px;height:34px;border-radius:50%; border:3px solid rgba(255,255,255,.14);
    border-top-color:#58e1d3; margin:6px auto 14px auto; animation:spin 1s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .busyBarWrap{height:8px;border:1px solid var(--line);border-radius:999px;background:#0f1424;overflow:hidden}
  .busyBar{height:100%;width:0%;background:linear-gradient(90deg,#ffd503,#58e1d3)}
  .busyInfo{font-size:12px;color:#9aa6b2;margin-top:6px}

  /* ======= MOBILE / SMARTPHONE =======
     Anforderungen:
     1) Reihenfolge (oben nach unten):
        Transport -> Tools (Crossfade/Normalisieren/EQ) -> Tempo -> Equal-Power Crossfade -> System
     2) Normales Seiten-Scrollen (Dock nicht fixed)
     3) Kompakte Items einspaltig
  */
  @media (max-width: 720px){
    /* Dock wird Teil des natürlichen Seitenflusses */
    #dock{
      position:static;
      border-bottom:1px solid var(--line);
    }
    /* Der Scroller ist nicht mehr fixed, sondern normaler Abschnitt */
    #scroller{
      position:static;
      top:auto; bottom:auto; left:auto; right:auto;
      padding:10px 10px 18px 10px;
    }

    .dock-grid{ padding: 6px 10px 8px; }
    .spectrumWrap{ padding: 0 10px 8px; }
    .dock-panel{ padding: 0 10px 12px; }

    /* HUD in EINER Spalte und mit definierter Reihenfolge */
    .hud-strip{
      grid-template-columns: 1fr;
    }
    /* Reihenfolge setzen über Flex-Order je Karte */
    #cardTransport { order: 1; }
    #cardTools     { order: 2; }
    #cardTempo     { order: 3; }
    #cardCross     { order: 4; }
    #cardSys       { order: 5; }

    /* Kompaktere Abstände */
    .hud-card{ padding: 10px; }
    .row-buttons .btn{ padding:7px 10px; }

    /* Track-Items einspaltig & kompakt */
    .item{
      grid-template-columns: 1fr;
      gap:10px;
      padding:10px;
    }
    .clockStack{
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
    }
    :root{ --clockW: 120px; }
    .timeline{ height: 84px; }
    .miniCanvas{ height: 64px; }

    /* Upload-Zone mit größerem Touch-Target */
    .upload{ padding:16px; }
  }



/* === Mobile Landscape Scroll Fix =========================================
   Ermöglicht vertikales Scrollen auf Smartphones im Querformat.
   Greift bei geringer Höhe ODER Landscape mit moderater Breite.
   ----------------------------------------------------------------------- */
@media (max-height: 520px), (orientation: landscape) and (max-width: 1024px) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Dock & Scroller nicht fixieren, damit der Body scrollen kann */
  #dock {
    position: static !important;
  }
  #scroller {
    position: static !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    padding: 10px 10px 18px 10px;
  }
  /* Sicherheitsnetz: jedes Fullscreen-Panel darf scrollen */
  .fullheight, .fullscreen, .viewport, .page, main {
    max-height: none !important;
    overflow-y: visible !important;
  }
}



/* === Mobile Landscape Width Fit ===========================================
   Ziel: Im Smartphone-Vollbild (Querformat) keine horizontale Scrollbar.
   - HUD-Cards oben sollen umbrechen und in die Viewport-Breite passen.
   - Buttons/Zeilen dürfen umbrechen (wrap), min-width wird neutralisiert.
   - Container erzwingen width:100vw und overflow-x:hidden.
   ------------------------------------------------------------------------- */
@media (max-height: 520px), (orientation: landscape) and (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
  }

  /* Oberes Layout: Cards dürfen umbrechen und schrumpfen */
  .dock-grid, .hud-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100%;
    max-width: 100vw;
  }

  /* Sicherheitsnetz gegen übergroße Inhalte */
  .hud-card, .dock-panel, .spectrumWrap, .row-buttons, .timeline, .spark, canvas, img, video {
    max-width: 100%;
    width: 100%;
    min-width: 0 !important;
  }

  /* Button-Reihen dürfen umbrechen, damit nichts rausragt */
  .row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tabellen/Listen/Meta-Zeilen: Texte dürfen schrumpfen statt zu überlaufen */
  .meta, .meta .title, .meta .sub {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Header kompakter, damit mehr Breite übrig bleibt */
  header { padding: 8px 10px 4px !important; }
  .brand { font-size: 14px !important; }
}



/* === Mobile Landscape: 5 Cards nebeneinander ===============================
   Zeigt alle HUD-Karten in einer Zeile, sobald ausreichend Querformat-Breite
   vorhanden ist (z. B. Smartphones ≥ 850 px Breite oder Landscape ≥ 480 px Höhe)
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 850px) and (max-width: 1200px) {
  .hud-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100vw;
  }

  /* Karten gleich hoch und flexibel */
  .hud-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Canvas und Elemente sollen nicht rausragen */
  canvas, .timeline, .spark {
    max-width: 100%;
  }

  /* Falls der Header-Text zu lang ist, etwas kleiner */
  header .brand {
    font-size: 14px !important;
  }
}



/* === Mobile Landscape: Gleich hohe HUD-Karten ==============================
   Ziel: Im Querformat sollen Tempo, Equal-Power, System, Transport, Crossfade
   die gleiche Kartengröße haben. Transport/Cross bekommen bei Überlänge Scroll.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 850px) and (max-width: 1200px) {
  :root { --hudH: min(38vh, 260px); } /* Oberer Bereich kompakt & einheitlich */

  .hud-strip {
    align-items: stretch !important;
  }

  .hud-card {
    height: var(--hudH) !important;
    overflow: hidden;             /* Standard: nix ragt raus */
    display: flex;
    flex-direction: column;
  }

  /* Bei den „vollen“ Karten (Buttons/Slider) intern scrollen erlauben */
  #cardTransport,
  #cardCross {
    overflow: auto !important;    /* interne Scrollbar falls nötig */
    padding-right: 8px;           /* damit Scrollbar nichts überlappt */
  }

  /* Buttonreihen dürfen umbrechen, um Höhe zu sparen */
  .row-buttons {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Canvas/Diagramme etwas kompakter halten */
  .spark,
  .timeline,
  canvas {
    max-height: calc(var(--hudH) - 54px);
  }
}

/* === Spektrum + eingebettete Zoom-Preview (nebeneinander) === */
.spectrumLayout{ display:flex; gap:12px; padding:0 14px 8px; align-items:stretch; }
.spectrumLayout .spectrumWrap{ flex:1 1 auto; min-width:0; }
.spectrumLayout .zoomPane{ flex:0 0 320px; height:160px; border:1px solid rgba(255,255,255,0.12); border-radius:12px; background:linear-gradient(180deg,#0b0f16,#0f1724); box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); position:relative; overflow:hidden; pointer-events:none; }
.spectrumLayout .zoomPane canvas{ width:100%; height:100%; display:block; }


/* === Gleich hohe Module: Spektrum & Zoom-Preview === */
:root{ --spectrum-h: 140px; } /* hier Höhe zentral ändern */
.spectrumLayout{ align-items:stretch; }
.spectrumLayout .spectrumWrap{ flex:1 1 auto; min-width:0; height:var(--spectrum-h); }
.spectrumLayout .spectrumWrap canvas{ height:100%; display:block; }
.spectrumLayout .zoomPane{ flex:0 0 300px; height:var(--spectrum-h); } /* etwas schmaler u. gleiche Höhe */


/* === Overrides: präzise Ausrichtung Spektrum/Zoom (links bündig, rechts kürzer) === */
:root{ --spectrum-h: var(--spectrum-h, 140px); }

/* Engere Außen-Paddings & saubere Linksbündigkeit */
.spectrumLayout{
  padding: 0 10px 8px 10px; /* links/rechts enger, bündiger mit oberen Panels */
  gap: 10px;                /* etwas schmaler, damit rechts nichts unter das Zoom ragt */
}

/* Feinkorrektur: ein kleines Negativ-Offset nach links und Abstand rechts */
.spectrumLayout .spectrumWrap{
  margin-left: -6px;   /* ~0.5 cm je nach DPI / Zoom – bei Bedarf hier feinjustieren */
  margin-right: 6px;   /* kleiner Sicherheitsabstand zum Zoom-Pane */
  height: var(--spectrum-h);
}

.spectrumLayout .spectrumWrap canvas{
  height: 100%;
  display: block;
}

/* Zoom bleibt gleich hoch, feste Breite, nichts überlappt */
.spectrumLayout .zoomPane{
  flex: 0 0 300px;
  height: var(--spectrum-h);
}



/* === FINAL Overrides: exakte Linksbündigkeit & kein Unterlaufen unter dem Zoom === */
:root{
  --panel-pad: 14px;   /* sollte zu den anderen Boxen passen */
  --zoom-gap: 12px;
  --zoom-w: 300px;
  --spectrum-h: var(--spectrum-h, 140px);
}

.spectrumLayout{
  padding: 0 var(--panel-pad) 8px var(--panel-pad);
  gap: var(--zoom-gap);
  align-items: stretch;
}

.spectrumLayout .spectrumWrap{
  flex: 1 1 0;
  min-width: 0;
  height: var(--spectrum-h);
  overflow: hidden;             /* Canvas ragt nicht unter das Zoom */
  box-sizing: border-box;
  margin: 0;                    /* keine Offsets mehr, bündig links */
}

.spectrumLayout .spectrumWrap canvas{
  width: 100% !important;
  height: 100%;
  display: block;
  position: static !important;  /* falls irgendwo absolute gesetzt war */
  left: auto; right: auto;
}

.spectrumLayout .zoomPane{
  flex: 0 0 var(--zoom-w);
  height: var(--spectrum-h);
}



/* === FINAL v3: Höhe reduziert, links bündig, geringerer Abstand rechts === */
.spectrumLayout{
  /* gleiche Innenabstände wie die übrigen Panels */
  padding: 0 14px 8px 14px;
  gap: 8px; /* kleinerer Abstand zwischen Spektrum und Zoom */
  align-items: stretch;
}

/* Einheitliche, etwas niedrigere Höhe */
.spectrumLayout,
.spectrumLayout .spectrumWrap,
.spectrumLayout .zoomPane{
  --spectrum-h: 128px; /* hier kannst du noch feinjustieren (z.B. 124–132px) */
}

.spectrumLayout .spectrumWrap{
  flex: 1 1 0;
  min-width: 0;
  height: var(--spectrum-h);
  margin: 0;              /* wirklich bündig links */
  overflow: hidden;
  box-sizing: border-box;
}

.spectrumLayout .spectrumWrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: static !important;
  left: auto; right: auto;
}

.spectrumLayout .zoomPane{
  flex: 0 0 290px;        /* etwas schmaler als vorher */
  height: var(--spectrum-h);
}



/* === v4 Overrides: gleiche Höhe, bündig links, volle Breite rechts === */
:root{
  --panel-pad: 14px;
  --zoom-gap: 6px;      /* noch etwas enger */
  --zoom-w: 288px;      /* minimal schmaler, damit nix überlappt */
  --spectrum-h: 126px;  /* exakt gleiche Höhe für beide */
}

.spectrumLayout{
  padding: 0 var(--panel-pad) 8px var(--panel-pad);
  gap: var(--zoom-gap);
  align-items: stretch;
}

/* Das Spektrum bekommt wirklich die volle verbleibende Breite */
.spectrumLayout .spectrumWrap{
  flex: 1 1 auto;
  min-width: 0;
  height: var(--spectrum-h);
  margin: 0;
  padding: 0 !important;          /* falls innen Padding vorhanden war */
  box-sizing: border-box;
  overflow: hidden;               /* kein Unterlaufen */
}

/* Canvas füllt die Box, auch wenn vorher andere Styles gesetzt wurden */
.spectrumLayout .spectrumWrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: static !important;
  left: auto; right: auto;
}

/* Zoom rechts: feste Breite, gleiche Höhe */
.spectrumLayout .zoomPane{
  flex: 0 0 var(--zoom-w);
  height: var(--spectrum-h);
  margin: 0;
}