/* =============================================================
   SIDtunez — ASM Sync Studio
   /css/studio.css
   -------------------------------------------------------------
   Eigene Datei, nicht in style.css: Das Studio ist ein Werkzeug
   mit Vollbild-Layout, nicht eine Seite des Shops. Die Farben
   kommen aus style.css, damit es dieselbe Handschrift behaelt.
   ============================================================= */

.studio-body {
  margin: 0;
  /* style.css setzt am body padding-top: var(--nav-h) und unten Platz
     fuer die Playerleiste — beides fuer Shopseiten richtig, hier falsch.
     Es erzeugte schwarze Raender oben und unten, schob den Inhalt aus
     dem Bild und liess die Seite scrollen, obwohl sie das nicht soll. */
  padding: 0 !important;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;                 /* das Werkzeug scrollt in sich, nicht als Seite */
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ---------- Kopfleiste ---------- */
.st-kopf {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.st-kopf .logo { font-size: 1.3rem; text-decoration: none; flex: 0 0 auto; }
.st-marke {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem; letter-spacing: .06em;
  color: var(--accent);
  /* Drei Wörter in einer schmalen Spalte brechen sonst um — der Name
     stand nach dem Umbenennen zweizeilig neben dem Logo und machte
     die Kopfleiste höher. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.st-stufe {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--buy, #E9A94A);
  border: 1px solid var(--buy, #E9A94A);
  border-radius: 999px; padding: .12rem .6rem;
}
.st-projekt { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.st-name {
  width: 230px; padding: .4rem .7rem;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .9rem; font-family: inherit;
}
.st-name:focus { outline: none; border-color: var(--accent); }
.st-btn {
  padding: .42rem .85rem;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .86rem; font-family: inherit; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.st-btn:hover { border-color: var(--accent); color: var(--accent); }
.st-btn-teal { background: var(--accent); border-color: var(--accent); color: #0A2E2B; font-weight: 600; }
.st-btn-teal:hover { color: #0A2E2B; filter: brightness(1.08); }
.st-btn-weg:hover { border-color: #e0533f; color: #e0533f; }
.st-nutzer { font-size: .82rem; color: var(--text3); flex: 0 0 auto; }
/* Kopfleiste: Seit dem Knopf „Neu" (22.10.2026) wurde es unter
   ~1500 px eng. Zuerst gibt das Namensfeld nach, dann Abstaende; der
   Benutzername (steht auch im Konto) faellt weg. */
.st-kopf .st-name { width: clamp(120px, 13vw, 230px); }
.st-kopf #stNeu { white-space: nowrap; }
@media (max-width: 1500px) {
  .st-kopf { gap: .6rem; }
  .st-kopf .st-btn { padding: .42rem .65rem; }
  .st-nutzer { display: none; }
}

/* ---------- Arbeitsfläche ---------- */
.st-flaeche {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;                    /* sonst sprengt der Inhalt das Raster */
}
.st-bibliothek {
  border-right: 1px solid var(--border);
  background: var(--bg2);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0; overflow: auto;
}
.st-panel-kopf {
  padding: .7rem 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem; letter-spacing: .06em;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
/* Die Videospur sitzt im Editor, nicht als eigener Bereich daneben —
   dort liegt sie ueber der Zeitleiste und teilt sich den Playhead.
   Deshalb bekommt die Zeitleiste die ganze Flaeche. */
/* min-width: 0 ist hier nicht Kosmetik. Rasterspalten haben von Haus
   aus min-width: auto — sie duerfen also breiter werden als ihr
   Anteil, wenn der Inhalt es verlangt. Beim Hineinzoomen wuchs
   dadurch die ganze Spalte mit, statt eine Bildlaufleiste zu zeigen:
   gemessen von 1165 auf 1344 px, und ein anschliessendes Verkleinern
   des Fensters holte sie nicht zurueck. */
.st-mitte { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.st-timeline { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* ---------- Platzhalter der noch offenen Stufen ---------- */
.st-platzhalter {
  padding: 1.2rem;
  color: var(--text2);
  font-size: .9rem; line-height: 1.6;
}
.st-platzhalter p { margin: 0 0 .7rem; }
.st-platzhalter strong { color: var(--accent); }
.st-platzhalter-mitte {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; max-width: 560px; margin: 0 auto;
}
.st-klein { font-size: .82rem; color: var(--text3); }

/* ---------- Dialog ---------- */
.st-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(10,10,12,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.st-dialog {
  width: min(640px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-4);
}
.st-dialog-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem; letter-spacing: .06em;
}
.st-x {
  background: transparent; border: 0; color: var(--text2);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.st-x:hover { color: var(--accent); }
.st-dialog-koerper { padding: .8rem 1rem 1rem; overflow: auto; }

/* Rueckfrage „Zum Projekt hinzufügen?" (seit 22.10.2026) */
.st-frage { width: min(480px, 100%); }
.st-frage .st-dialog-koerper { padding: 1rem 1.1rem 1.1rem; }
.st-frage-titel { margin: 0 0 .7rem; }
.st-frage-titel b { display: block; font-size: 1.05rem; color: var(--text); }
.st-frage-titel span { display: block; margin-top: .15rem; font-size: .8rem; color: var(--accent); }
.st-frage-text { margin: 0 0 1rem; font-size: .9rem; line-height: 1.55; color: var(--text2); }
.st-frage-knoepfe { display: flex; flex-direction: column; gap: .5rem; }
.st-frage-knoepfe .st-btn { width: 100%; padding: .6rem .9rem; font-size: .9rem; }
.st-frage-hinweis { margin: .8rem 0 0; line-height: 1.5; }
/* Projektname in der Speicher-Rueckfrage („Neues Projekt") */
.st-frage-feld { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.st-frage-feld span { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.st-frage-feld .st-name { width: 100%; }

.st-zeile {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}
.st-zeile:last-child { border-bottom: 0; }
.st-zeile-txt { flex: 1 1 auto; min-width: 0; }
.st-zeile-txt b { display: block; font-size: .95rem; }
.st-zeile-txt span {
  display: block; font-size: .8rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .st-flaeche { grid-template-columns: 1fr; }
  .st-bibliothek { display: none; }     /* Stufe 3 bringt eine Schublade */
  .st-projekt { flex-wrap: wrap; }
  .st-name { width: 150px; }
}

/* ---------- Bibliothek ---------- */
.st-panel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.st-zahl { font-family: 'DM Sans', system-ui, sans-serif; font-size: .76rem; color: var(--text3); letter-spacing: 0; }

.st-filter {
  padding: .6rem .7rem; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .4rem;
}
.st-filter-reihe { display: flex; gap: .4rem; }
.st-filter-reihe > * { flex: 1 1 0; min-width: 0; }
.st-filter input, .st-filter select {
  width: 100%; padding: .42rem .6rem;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .84rem; font-family: inherit;
}
.st-filter input:focus, .st-filter select:focus { outline: none; border-color: var(--accent); }
.st-btn-klein { padding: .42rem .6rem; font-size: .8rem; }
.st-treffer { flex: 1 1 auto; overflow: auto; min-height: 0; }
/* Eine Zeile besteht aus zwei Knoepfen nebeneinander: der grosse
   waehlt aus, der kleine hoert vor. Ineinander ginge nicht — ein
   <button> darf keinen zweiten enthalten. */
.st-zeile2 {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.st-zeile2:hover { background: rgba(47,212,196,.06); }

.st-titel {
  display: block; flex: 1 1 auto; min-width: 0; text-align: left;
  padding: .55rem .4rem .55rem .8rem;
  background: transparent; border: 0;
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: background .12s;
}
/* aktiv = liegt auf der Zeitleiste. Bewusst nur ein schmaler Balken
   links statt einer Flaeche: Es koennen mehrere Titel gleichzeitig
   liegen, und eine gefuellte Liste waere unruhig. */
.st-titel.aktiv { border-left: 3px solid var(--accent); padding-left: calc(.8rem - 3px); }
.st-titel.laedt { opacity: .5; pointer-events: none; }

/* Vorhoeren. Das Dreieck bzw. die zwei Balken stecken als
   Hintergrundbild drin — so gibt es kein Zeichen, das je nach
   Schriftart anders aussieht, und keine zusaetzliche Schriftdatei. */
.st-play {
  flex: 0 0 auto;
  width: 34px;
  background: transparent;
  border: 0; border-left: 1px solid var(--border);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M0 0l11 6.5L0 13z' fill='%239A9CA3'/%3E%3C/svg%3E");
  transition: background-color .12s;
}
.st-play:hover {
  background-color: rgba(47,212,196,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M0 0l11 6.5L0 13z' fill='%232FD4C4'/%3E%3C/svg%3E");
}
.st-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-play.laeuft {
  background-color: rgba(47,212,196,.18);
  background-size: 10px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='0' y='0' width='3.5' height='12' fill='%232FD4C4'/%3E%3Crect x='6.5' y='0' width='3.5' height='12' fill='%232FD4C4'/%3E%3C/svg%3E");
}
.st-titel-n { display: block; font-size: .9rem; }
.st-titel-m {
  display: block; font-size: .78rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-hinweis { padding: .7rem .8rem; border-top: 1px solid var(--border); margin: 0; }

/* ---------- Vorhoerfenster ----------
   Klein, unten rechts, ohne abdunkelnden Hintergrund: Es soll die
   Bibliothek nicht sperren — wer durch die Liste hoert, klickt die
   naechste Spur, und das Fenster wechselt einfach den Inhalt. */
.st-hoer {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 9700;
  width: min(460px, calc(100vw - 2rem));
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.st-hoer[hidden] { display: none; }
/* Der Kopf ist der Griff: Daran laesst sich das Fenster verschieben.
   touch-action:none, sonst scrollt das iPad die Seite statt zu ziehen. */
.st-hoer-kopf {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .6rem .5rem .5rem .9rem;
  border-bottom: 1px solid var(--border);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.st-hoer.zieht { box-shadow: var(--shadow-4), 0 0 0 1px rgba(47,212,196,.35); }
.st-hoer.zieht .st-hoer-kopf { cursor: grabbing; }
/* Kleiner Griff-Hinweis links im Kopf: drei Punkte, wie an einer Schublade. */
.st-hoer-kopf::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 22px; margin: .15rem .1rem 0 -.3rem;
  background-image: radial-gradient(circle, rgba(154,156,163,.55) 1.2px, transparent 1.6px);
  background-size: 6px 6px; background-repeat: repeat-y;
}
.st-hoer-txt { flex: 1 1 auto; min-width: 0; }
.st-hoer-name {
  display: block; font-size: .92rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-hoer-meta {
  display: block; font-size: .76rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-hoer-welle {
  position: relative;
  height: 76px;
  background: var(--bg);
  cursor: pointer;
}
.st-hoer-welle canvas { display: block; width: 100%; height: 100%; }
.st-hoer-laedt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--text3);
  pointer-events: none;
}
.st-hoer-laedt[hidden] { display: none; }
.st-hoer-fuss {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem .55rem;
  flex-wrap: wrap;
}
/* Pause/Play als Hintergrundbild, derselbe Weg wie beim Knopf in
   der Liste — kein Zeichen, das je nach Schrift anders aussieht. */
.st-hoer-pp {
  flex: 0 0 auto; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 50%;
  background-color: transparent; cursor: pointer;
  background-repeat: no-repeat; background-position: center; background-size: 10px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='0' y='0' width='3.5' height='12' fill='%232FD4C4'/%3E%3Crect x='6.5' y='0' width='3.5' height='12' fill='%232FD4C4'/%3E%3C/svg%3E");
}
.st-hoer-pp.pausiert {
  background-size: 11px 13px;
  background-position: 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M0 0l11 6.5L0 13z' fill='%232FD4C4'/%3E%3C/svg%3E");
}
.st-hoer-pp:hover { border-color: var(--accent); }
.st-hoer-zeit {
  font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--text2); flex: 0 0 auto;
}
.st-hoer-hinweis {
  flex: 1 1 100%;
  font-size: .78rem; color: #E9A94A; line-height: 1.4;
}
.st-hoer-hinweis:empty { display: none; }
.st-hoer-spring, .st-hoer-anfang { margin-left: auto; }
.st-hoer-spring { border-color: rgba(233,169,74,.5); color: #E9A94A; }
.st-hoer-spring:hover { border-color: #E9A94A; color: #E9A94A; background: rgba(233,169,74,.1); }
.st-hoer-anfang { margin-left: 0; }
.st-hoer-spring[hidden], .st-hoer-anfang[hidden] { display: none; }

/* ---------- Referenzvideo ---------- */
.st-video-knopf { flex: 0 0 auto; }
.st-btn-video {
  border-color: var(--buy, #E9A94A);
  color: var(--buy, #E9A94A);
}
.st-btn-video:hover:not(:disabled) {
  background: var(--buy, #E9A94A); color: #1a1205; border-color: var(--buy, #E9A94A);
}
.st-btn:disabled { opacity: .45; cursor: not-allowed; }
.st-btn:disabled:hover { border-color: var(--border); color: var(--text); }

/* Ablagefläche beim Ziehen einer Datei */
.st-timeline.st-ablage { outline: 2px dashed var(--buy, #E9A94A); outline-offset: -6px; }
.st-timeline.st-ablage::after {
  content: 'Video hier ablegen — es bleibt auf deinem Rechner';
  position: absolute; inset: auto 0 1.5rem 0;
  text-align: center; color: var(--buy, #E9A94A); font-size: .9rem;
  pointer-events: none;
}
.st-mitte { position: relative; }

/* ---------- Umschalter Titel / Einzelspuren ---------- */
.st-modus { display: flex; border-bottom: 1px solid var(--border); }
.st-modus-b {
  /* Drei Reiter in 320 px: Der Text muss umbrechen duerfen, sonst
     schiebt "Einzelspuren" die anderen zusammen. */
  flex: 1 1 0; min-width: 0; padding: .5rem .3rem;
  font-size: .8rem; line-height: 1.2;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text2); font-family: inherit; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.st-modus-b:hover { color: var(--text); }
.st-modus-b.aktiv { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Videovorschau im eingebetteten Editor ----------
   Sie liegt im Editor als frei verschiebbares Fenster. Eingebettet
   braucht sie eine hoehere Ebene als die klebenden Spurkoepfe und
   das Lineal, sonst verschwindet sie dahinter. */
#stTimeline .asm-vidprev { z-index: 30; }
/* Drei Stufen statt zwei: 240 – 460 – 760 px. Zwei waren zu wenig,
   um ein Bild wirklich beurteilen zu koennen. */
#stTimeline .asm-vidprev.big { width: 460px; }
#stTimeline .asm-vidprev.riesig { width: min(760px, 60%); }

/* ---------- Einpassen: der Überstand des Lineals ----------
   Die letzte Zeitmarke wird an ihrer Position gezeichnet und ragt
   mit ihrer Beschriftung über das Ende der Spur hinaus — gemessen
   47 px. Das erzeugte eine waagerechte Bildlaufleiste, obwohl die
   Anordnung rechnerisch genau passte, und liess „Einpassen" wirkungslos
   aussehen. Die letzte Marke steht ohnehin am Ende; sie zu
   beschneiden kostet nichts. */
#stTimeline .asm-ruler-track { overflow: hidden; }
#stTimeline .asm-ruler { overflow: hidden; }

/* ---------- Bedienung am Vorschaufenster ----------
   Erscheint beim Überfahren. Dauerhaft sichtbar wäre sie im Weg —
   das Fenster ist klein und zeigt bewegtes Bild. Auf Geräten ohne
   Mauszeiger bleibt sie deshalb immer sichtbar (siehe unten). */
#stTimeline .asm-vidprev { position: absolute; }
#stTimeline .asm-vidprev-ctl {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
#stTimeline .asm-vidprev:hover .asm-vidprev-ctl,
#stTimeline .asm-vidprev:focus-within .asm-vidprev-ctl { opacity: 1; }
#stTimeline .asm-vidprev-btn {
  width: 22px; height: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,16,.78);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px;
  color: #ECEAE4; font-size: .82rem; cursor: pointer;
  padding: 0;
}
#stTimeline .asm-vidprev-btn:hover {
  background: var(--accent); border-color: var(--accent); color: #0A2E2B;
}
@media (hover: none) {
  #stTimeline .asm-vidprev-ctl { opacity: 1; }
}

/* ---------- Meldungen ----------
   Mittig über der Arbeitsfläche, nicht in der Kopfzeile: Dort stand
   die Meldung zwischen den Knöpfen und verschob bei jedem Erscheinen
   die ganze Reihe — man traf den Knopf nicht mehr, den man gerade
   anklicken wollte.

   pointer-events: none, damit die Meldung nichts blockiert, was
   darunter liegt. */
.st-meldung {
  position: fixed;
  top: 66px; left: 50%;
  transform: translate(-50%, -8px);
  z-index: 9900;
  max-width: min(560px, 90vw);
  padding: .6rem 1.1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text3);
  border-radius: 8px;
  box-shadow: var(--shadow-4);
  color: var(--text);
  font-size: .9rem; line-height: 1.45;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.st-meldung.an {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.st-meldung.st-gut    { border-left-color: var(--accent); }
.st-meldung.st-fehler { border-left-color: #e0533f; }

@media (prefers-reduced-motion: reduce) {
  .st-meldung { transition: opacity .01ms, visibility .01ms; transform: translate(-50%, 0); }
}

/* ---- Anmeldefenster im Studio (seit 27.10.2026: Studio auch ohne Konto) ----
   Dasselbe Fenster wie auf allen Seiten (js/auth.js). Hier ueber allen
   Studio-Ebenen und bis zum unteren Rand — einen Player gibt es nicht. */
.studio-body #loginModal { z-index: 10050; bottom: 0; }
.studio-body #loginModal .modal { max-height: calc(100vh - 2rem); overflow-y: auto; }
.st-anmelde-grund {
  margin: 0 0 1rem; padding: .7rem .9rem;
  border-left: 3px solid var(--accent, #2FD4C4); border-radius: 0 6px 6px 0;
  background: rgba(47, 212, 196, .08);
  color: var(--text2, #b9bbc2); font-size: .88rem; line-height: 1.5;
}