/* =============================================================
   Heldendumm Creator — Oberflaeche
   Palette und Typografie stammen aus den Teaser-Videos selbst:
   Titel in DM Sans (Versalien, Blau), Untertitel in Roboto auf
   vollflaechigen Farbbloecken (Rot bzw. Violett je Sprecher).
   ============================================================= */

@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('fonts/roboto-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('fonts/roboto-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0A0B0D;
  --panel:#14161A;
  --panel-hi:#1B1E24;
  --line:#262B33;
  --fg:#E9ECF1;
  --fg-dim:#8A94A3;
  --fg-faint:#5C6472;

  --blau:#0B89F5;
  --rot:#E70003;
  --violett:#5D1BEC;
  --gruen:#25C07A;

  --display:'DM Sans',system-ui,sans-serif;
  --body:'Roboto',system-ui,sans-serif;

  /* Die Trennkante des Videocanvas bei 39 % — als Rasterproportion uebernommen */
  --split:39%;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

/* Muss vor allen Anzeigearten stehen: sonst überschreibt ein eigenes
   display die Vorgabe des Browsers und [hidden] bleibt wirkungslos. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--fg);
  font:400 16px/1.6 var(--body);
  letter-spacing:.005em;
}

a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;color:var(--fg-dim)}

:focus-visible{outline:2px solid var(--blau);outline-offset:2px;border-radius:2px}

/* ---------------------------------------------------------- Kopfleiste */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.topbar__brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
}
.topbar__brand:hover{text-decoration:none;color:var(--blau)}
.topbar__brand b{font-weight:700}
.topbar__mark{
  width:14px;height:20px;flex:none;border-radius:1px;
  background:linear-gradient(var(--blau) 0 39%, var(--rot) 39% 100%);
}
.topbar__right{display:flex;align-items:center;gap:18px;font-size:14px}
.topbar__user{color:var(--fg-dim)}
.topbar__link{color:var(--fg-dim)}
.topbar__link:hover{color:var(--fg)}

/* ---------------------------------------------------------- Grundraster */
.shell{
  flex:1;width:100%;max-width:1020px;
  margin:0 auto;padding:44px 24px 72px;
}
.shell--narrow{max-width:680px}
.shell--login{display:grid;place-items:center;padding-top:8vh}

.masthead{margin-bottom:40px}
.eyebrow{
  margin:0 0 10px;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blau);
}
.masthead h1{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.02em;
}
.lead{margin:14px 0 0;color:var(--fg-dim);max-width:56ch}
.muted{color:var(--fg-dim)}

/* ---------------------------------------------------------- Karten */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 28px;
  margin-bottom:20px;
}
.card__title{
  margin:0 0 20px;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);
}
.card--login{width:min(400px,92vw);margin-bottom:0}
.card--login .card__title{color:var(--fg-dim);margin-bottom:22px}

/* ---------------------------------------------------------- Module
   Die Ueberschrift sitzt auf einem vollflaechigen Farbblock, genau wie die
   Untertitel im Video: linksbuendig, rechts mitwachsend, kein Radius. */
.modules{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-bottom:32px;
}
.module{
  --akzent:var(--rot);
  position:relative;display:block;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 26px 24px;
  color:inherit;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.module--rot{--akzent:var(--rot)}
.module--violett{--akzent:var(--violett)}

a.module:hover{
  text-decoration:none;
  border-color:var(--akzent);
  background:var(--panel-hi);
  transform:translateY(-2px);
}

.module__name{
  display:inline-block;margin:0 0 16px;
  background:var(--akzent);color:#fff;
  font-family:var(--body);font-weight:700;
  font-size:22px;line-height:1.25;
  padding:5px 12px 6px;
}
.module__line{margin:0 0 20px;color:var(--fg-dim);font-size:15px}
.module__cta{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--akzent);
}
.module--soon{opacity:.62}
.module--soon .module__cta{color:var(--fg-faint)}
.module--soon .module__name{background:var(--fg-faint)}

/* ---------------------------------------------------------- Anmeldung */
.loginwrap{display:grid;gap:34px;justify-items:center}

/* Verkleinerte Nachbildung des Videolayouts als Erkennungszeichen */
.loginmark{
  position:relative;width:200px;height:356px;
  background:#000;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.loginmark__cover{
  position:absolute;left:50%;top:8.5%;transform:translateX(-50%);
  width:36%;aspect-ratio:1;
  background:
    repeating-linear-gradient(-14deg,#C9A227 0 3px,#8E7016 3px 6px),
    #C9A227;
  border-radius:2px;
}
.loginmark__title{
  position:absolute;left:0;right:0;top:32%;
  text-align:center;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.06em;color:var(--blau);
}
.loginmark__rule{
  position:absolute;left:0;right:0;top:var(--split);height:1px;
  background:var(--line);
}
.loginmark__box{
  position:absolute;color:#fff;font-family:var(--body);font-weight:700;
  font-size:12px;line-height:1;padding:5px 8px 6px;
}
.loginmark__box--a{left:9px;top:73%;background:var(--rot)}
.loginmark__box--b{right:9px;top:64%;background:var(--violett)}

/* ---------------------------------------------------------- Formular */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px;min-width:0}
.field__label{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
}
.field__hint{
  font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--fg-faint);margin-left:8px;
}
.field__input{
  width:100%;padding:11px 13px;
  background:var(--ink);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);
  font:400 15px/1.4 var(--body);
}
.field__input:focus{border-color:var(--blau);outline:none;box-shadow:0 0 0 3px rgba(11,137,245,.18)}

.btn{
  display:inline-block;justify-self:start;
  padding:11px 22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-hi);color:var(--fg);
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:#232830;text-decoration:none}
.btn--primary{background:var(--blau);border-color:var(--blau);color:#fff}
.btn--primary:hover{background:#0A78D8;border-color:#0A78D8}

/* ---------------------------------------------------------- Meldungen */
.warn{
  margin:0 0 4px;padding:11px 14px;
  background:rgba(231,0,3,.1);border-left:3px solid var(--rot);
  border-radius:0 var(--r) var(--r) 0;
  font-size:14.5px;color:#FFC9CA;
}
.ticklist{margin:0 0 20px;padding-left:20px;color:var(--fg-dim);font-size:14.5px}
.ticklist li{margin:3px 0}

.tag{
  display:inline-block;min-width:52px;text-align:center;
  padding:2px 8px;border-radius:3px;
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;
}
.tag--ok{background:rgba(37,192,122,.16);color:var(--gruen)}
.tag--bad{background:rgba(231,0,3,.16);color:#FF6B6D}

.checks{width:100%;border-collapse:collapse;font-size:14.5px}
.checks td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.checks tr:last-child td{border-bottom:none}
.checks__state{width:74px}
.checks__label{width:44%}
.checks__value{color:var(--fg-dim);word-break:break-all;font-size:13.5px}

/* ---------------------------------------------------------- Letzte Projekte */
.recent{list-style:none;margin:0;padding:0}
.recent__row{
  display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:15px;
}
.recent__row:last-child{border-bottom:none}
.recent__time{color:var(--fg-faint);font-size:13.5px;font-variant-numeric:tabular-nums}
.status{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;
}
.status--entwurf{background:rgba(138,148,163,.14);color:var(--fg-dim)}
.status--transkribiert{background:rgba(11,137,245,.14);color:var(--blau)}
.status--fertig{background:rgba(37,192,122,.14);color:var(--gruen)}

/* ---------------------------------------------------------- Fuss */
.footer{
  padding:20px 24px;border-top:1px solid var(--line);
  color:var(--fg-faint);font-size:12.5px;
  font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;
}

@media (max-width:640px){
  .shell{padding:32px 18px 56px}
  .card{padding:22px 20px}
  .recent__row{grid-template-columns:1fr auto;row-gap:4px}
  .recent__time{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  a.module:hover{transform:none}
}

/* =============================================================
   Mediathek
   ============================================================= */

.masthead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.eyebrow a{color:inherit}
.eyebrow a:hover{color:var(--fg)}

/* ---------------------------------------------------------- Ablageflaeche */
.drop{
  display:grid;place-items:center;gap:4px;
  padding:44px 24px;margin-bottom:26px;
  border:1.5px dashed var(--line);border-radius:var(--r);
  background:var(--panel);text-align:center;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.drop:hover{border-color:var(--fg-faint)}
.drop--an{border-color:var(--blau);background:rgba(11,137,245,.06)}
.drop__mark{
  width:26px;height:38px;margin-bottom:12px;border-radius:2px;
  background:linear-gradient(var(--blau) 0 39%, var(--rot) 39% 100%);
  opacity:.85;
}
.drop__line{margin:0;font-family:var(--display);font-weight:700;font-size:17px}
.drop__sub{margin:0;color:var(--fg-faint);font-size:13.5px}

/* ---------------------------------------------------------- Warteschlange */
.queue{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;margin-bottom:26px;
}
.queue__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}

.up{display:grid;gap:7px}
.up__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.up__name{
  font-size:14.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.up__stop{
  flex:none;background:none;border:none;padding:0;cursor:pointer;
  color:var(--fg-faint);font:inherit;font-size:12.5px;
}
.up__stop:hover{color:var(--rot)}

.up__balken{height:5px;border-radius:3px;background:var(--ink);overflow:hidden}
.up__fuellung{
  display:block;width:0;height:100%;background:var(--blau);
  transition:width .18s linear;
}
.up--fertig .up__fuellung{background:var(--gruen)}
.up--fehler .up__fuellung{background:var(--rot)}

.up__zeile{
  display:flex;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.up--fehler .up__stand{color:#FF6B6D}

/* ---------------------------------------------------------- Filterleiste */
.filterbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.filterbar__tabs{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--fg-dim);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  transition:color .14s ease,border-color .14s ease;
}
.chip:hover{color:var(--fg)}
.chip--on{color:#fff;background:var(--blau);border-color:var(--blau)}
.field__input--slim{width:auto;min-width:220px;padding:8px 12px;font-size:14px}

/* ---------------------------------------------------------- Kachelgitter */
.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.grid__leer{
  grid-column:1/-1;padding:36px 0;text-align:center;
  color:var(--fg-faint);font-size:14.5px;
}

.kachel{
  position:relative;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:border-color .15s ease;
}
.kachel:hover{border-color:var(--fg-faint)}

.kachel__buehne{
  position:relative;aspect-ratio:4/3;
  background:var(--ink);display:grid;place-items:center;overflow:hidden;
}
.kachel__bild{width:100%;height:100%;object-fit:cover;display:block}
.kachel__ersatz{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);
}

/* Artkennzeichnung in Sprecherlogik: Bild blau, Video violett, Ton rot */
.kachel__art{
  position:absolute;left:0;bottom:0;
  padding:3px 8px 4px;color:#fff;
  font-family:var(--body);font-weight:700;font-size:11px;line-height:1.2;
}
.kachel--image .kachel__art{background:var(--blau)}
.kachel--video .kachel__art{background:var(--violett)}
.kachel--audio .kachel__art{background:var(--rot)}

.kachel__benutzt{
  position:absolute;right:6px;top:6px;
  padding:2px 7px;border-radius:3px;
  background:rgba(10,11,13,.78);color:var(--fg-dim);
  font-size:11px;font-weight:700;
}

.kachel__fuss{display:grid;gap:3px;padding:11px 12px 13px}
.kachel__name{
  font-size:13.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kachel__meta{
  font-size:11.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}

.kachel__weg{
  position:absolute;right:6px;top:6px;
  width:26px;height:26px;border:none;border-radius:3px;
  background:rgba(10,11,13,.78);color:var(--fg-dim);
  font-size:17px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .14s ease,color .14s ease;
}
.kachel:hover .kachel__weg,
.kachel__weg:focus-visible{opacity:1}
.kachel__weg:hover{color:#fff;background:var(--rot)}
.kachel:hover .kachel__benutzt{opacity:0}

@media (hover:none){
  .kachel__weg{opacity:1}
  .kachel__benutzt{right:38px}
}

@media (max-width:640px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .drop{padding:34px 18px}
  .filterbar{flex-direction:column;align-items:stretch}
  .field__input--slim{width:100%}
}

/* =============================================================
   Teaser-Modul
   ============================================================= */

.shell--weit{max-width:1400px}

.hinweis{
  padding:13px 16px;margin-bottom:24px;
  background:rgba(11,137,245,.09);border-left:3px solid var(--blau);
  border-radius:0 var(--r) var(--r) 0;font-size:14.5px;color:var(--fg-dim);
}

/* ---------------------------------------------------------- Projektkarten */
.projekte{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.pkarte{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:border-color .15s ease;
}
.pkarte:hover{border-color:var(--fg-faint)}
.pkarte__flaeche{display:flex;gap:14px;padding:14px;color:inherit}
.pkarte__flaeche:hover{text-decoration:none}
.pkarte__bild{
  flex:none;width:78px;height:78px;border-radius:2px;overflow:hidden;
  background:var(--ink);display:grid;place-items:center;
}
.pkarte__bild img{width:100%;height:100%;object-fit:cover}
.pkarte__leer{
  font-family:var(--display);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-faint);text-align:center;padding:0 6px;
}
.pkarte__text{min-width:0;display:grid;align-content:start;gap:3px}
.pkarte__name{
  margin:0;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pkarte__titel{
  margin:0;font-size:13px;color:var(--fg-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pkarte__zahlen{
  margin:5px 0 0;display:flex;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.pkarte__fuss{
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;border-top:1px solid rgba(255,255,255,.05);
  font-size:12px;color:var(--fg-faint);
}
.pkarte__zeit{margin-right:auto;font-variant-numeric:tabular-nums}
.pkarte__werkzeug{display:flex;gap:12px}
.pkarte__werkzeug button{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--fg-faint);font:inherit;font-size:12px;
}
.pkarte__werkzeug button:hover{color:var(--fg)}
.pkarte__werkzeug button[data-tun="loeschen"]:hover{color:var(--rot)}

/* ---------------------------------------------------------- Dialog */
.dlg{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--fg);padding:0;
  width:min(430px,92vw);
}
.dlg::backdrop{background:rgba(0,0,0,.72)}
.dlg__form{display:grid;gap:18px;padding:26px 28px}
.dlg__knoepfe{display:flex;justify-content:flex-end;gap:10px}
.dlg__knoepfe .btn{justify-self:auto}
.dlg__warn{
  margin:0;padding:9px 12px;font-size:13.5px;color:#FFC9CA;
  background:rgba(231,0,3,.1);border-left:3px solid var(--rot);
}

/* ---------------------------------------------------------- Reiter */
.reiter{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:26px}
.reiter__knopf{
  padding:11px 20px;border:none;background:none;cursor:pointer;
  color:var(--fg-dim);border-bottom:2px solid transparent;
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color .14s ease,border-color .14s ease;
}
.reiter__knopf:hover:not(:disabled){color:var(--fg)}
.reiter__knopf--on{color:var(--fg);border-bottom-color:var(--blau)}
.reiter__knopf:disabled{color:var(--fg-faint);cursor:not-allowed;opacity:.5}

.speicherstand{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);
}
.speicherstand--fehler{color:#FF6B6D}

/* ---------------------------------------------------------- Arbeitsfläche
   Aufteilung wie in Schnittprogrammen: links die Medien, rechts die
   Einstellungen, in der Mitte Vorschau über Zeitleiste. Beide Leisten
   lassen sich einklappen; die Fläche füllt die Fensterhöhe, damit
   Medien und Zeitleiste immer gleichzeitig sichtbar sind. */
.werkstatt{
  display:flex;gap:14px;align-items:stretch;
  height:calc(100vh - 230px);min-height:520px;
}

.leiste{
  position:relative;flex:none;
  display:flex;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:width .18s ease;
  overflow:hidden;
}
.leiste--links{width:262px}
.leiste--rechts{width:326px}
.leiste--zu{width:26px}

.leiste__inhalt{
  display:flex;flex-direction:column;min-width:0;min-height:0;width:100%;
  padding:16px 10px 12px 16px;
}
.leiste--zu .leiste__inhalt{display:none}

.leiste__kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.leiste__kopf .card__title{margin:0}
.leiste__zu{
  flex:none;width:24px;height:24px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--fg-dim);cursor:pointer;font-size:14px;line-height:1;
}
.leiste__zu:hover{color:var(--fg);border-color:var(--fg-faint)}

/* Schild der eingeklappten Leiste */
.leiste__schild{
  display:none;
  width:26px;background:none;border:none;cursor:pointer;
  color:var(--fg-dim);padding:0;
}
.leiste--zu .leiste__schild{display:block}
.leiste__schild span{
  display:block;white-space:nowrap;
  transform:rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:12px 0;
}
.leiste__schild:hover{color:var(--blau)}

.leiste__bahn{
  flex:1;min-width:0;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  display:grid;gap:7px;align-content:start;
  scrollbar-gutter:stable;margin-top:2px;
}
/* Der senkrechte Rollbalken bekommt eigenen Platz (scrollbar-gutter),
   waagerecht wird nichts gerollt: alles im Inneren bleibt in der Breite. */
.leiste__rollen{
  flex:1;min-width:0;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-gutter:stable;
  display:grid;gap:16px;align-content:start;
}
.leiste__rollen > *{min-width:0;max-width:100%}
.leiste__rollen input,
.leiste__rollen select,
.leiste__rollen audio{max-width:100%;min-width:0}

/* Schmale, unauffällige Rollbalken */
.leiste__bahn,.leiste__rollen{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.leiste__bahn::-webkit-scrollbar,
.leiste__rollen::-webkit-scrollbar{width:9px}
.leiste__bahn::-webkit-scrollbar-track,
.leiste__rollen::-webkit-scrollbar-track{background:transparent}
.leiste__bahn::-webkit-scrollbar-thumb,
.leiste__rollen::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:5px;
  border:2px solid transparent;background-clip:content-box;
}
.leiste__bahn::-webkit-scrollbar-thumb:hover,
.leiste__rollen::-webkit-scrollbar-thumb:hover{background:var(--fg-faint);background-clip:content-box}
.leiste__fuss{margin:6px 0 0;font-size:12px}

.streifen__filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.streifen__filter .chip{padding:4px 10px;font-size:9.5px}
.streifen__fuss{margin:10px 0 0;font-size:11.5px;color:var(--fg-faint);line-height:1.5}
.streifen__fuss--aktiv{color:var(--blau)}

/* Mitte */
.mitte{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;
}
.buehne{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;
}
/* Maßangabe unaufdringlich in die Ecke */
.buehne::after{
  content:'1080 × 1920';
  position:absolute;right:12px;bottom:10px;
  font-family:var(--display);font-weight:700;font-size:9.5px;
  letter-spacing:.14em;color:var(--fg-faint);pointer-events:none;
}

/* Medienkacheln in der linken Leiste */
.mz{
  min-width:0;display:flex;gap:9px;align-items:center;
  padding:6px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink);cursor:grab;
  transition:border-color .14s ease,background .14s ease;
}
.mz:hover{border-color:var(--blau);background:var(--panel-hi)}
.mz--zieht{opacity:.45}
.mz__bild{
  flex:none;width:42px;height:42px;border-radius:2px;overflow:hidden;
  background:var(--panel);display:grid;place-items:center;
}
.mz__bild img{width:100%;height:100%;object-fit:cover}
.mz__ersatz{
  font-family:var(--display);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-faint);
}
.mz__text{min-width:0;display:grid;gap:1px}
.mz__name{
  font-size:12px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mz__meta{font-size:10.5px;color:var(--fg-faint)}
.mz--image .mz__bild{outline:2px solid var(--blau);outline-offset:-2px}
.mz--video .mz__bild{outline:2px solid var(--violett);outline-offset:-2px}
.mz--audio .mz__bild{outline:2px solid var(--rot);outline-offset:-2px}

/* Leinwand — maßstabsgetreu.
   Alle Werte in Container-Einheiten: 1cqw = 1 % der Canvasbreite (10,8 px),
   1cqh = 1 % der Canvashöhe (19,2 px). Damit rechnen die Positionen direkt
   gegen 1080 x 1920 und stimmen bei jeder Vorschaugröße. */
.leinwand{
  position:relative;container-type:size;
  height:100%;width:auto;max-width:100%;aspect-ratio:1080/1920;
  background:#000;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;user-select:none;
}

/* Kopfbereich: 0 bis y=750.
   Der Hintergrund ist das Cover, stark verdunkelt und weichgezeichnet.
   Es wird auf volle Breite gezogen und oben ausgerichtet: sichtbar sind
   die oberen 69,4 % des quadratischen Covers, der Schriftzug am unteren
   Rand bleibt damit ausserhalb. */
.lw__hg{
  position:absolute;left:0;right:0;top:0;height:39.0625cqh;
  display:grid;place-items:center;overflow:hidden;background:#000;
}
.lw__hg img{
  position:absolute;left:50%;top:0;transform:translateX(-50%) scale(1.06);
  transform-origin:top center;
  width:100%;height:auto;
  filter:brightness(var(--hg-hell,.1)) blur(var(--hg-weich,1.11cqw));
}

/* Volle Canvasfläche als Bezug, damit Prozentwerte stimmen */
.lw__kopf{position:absolute;inset:0;pointer-events:none}

.lw__cover{                      /* x=345, y=164, 390 x 390 */
  position:absolute;left:31.944cqw;top:8.5417cqh;
  width:36.111cqw;height:20.3125cqh;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.18);
  pointer-events:auto;
}
.lw__cover img{width:100%;height:100%;object-fit:cover}

.lw__titel{                      /* y=625, DM Sans 60 px, Versalien */
  position:absolute;left:0;right:0;top:32.111cqh;
  text-align:center;font-family:'DM Sans',sans-serif;font-weight:700;
  font-size:5.556cqw;line-height:1;letter-spacing:.005em;color:var(--blau);
  padding:0 2cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.lw__kante{
  position:absolute;left:0;right:0;top:39.0625cqh;height:1px;
  background:rgba(255,255,255,.16);
}
.lw__medien{
  position:absolute;left:0;right:0;top:39.0625cqh;bottom:0;
  display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#101216 0 8px,#0C0E11 8px 16px);
}

/* Untertitel — Roboto 60 px, Hauptbox linksbündig x=48, Mitte y=1534 */
.lw__text{
  position:absolute;left:4.444cqw;top:79.896cqh;transform:translateY(-50%);
  max-width:82cqw;
  background:var(--rot);color:#fff;
  font-family:'Roboto',sans-serif;font-weight:700;
  font-size:5.556cqw;line-height:1;
  padding:1.157cqw 1.111cqw;
}
/* Einwurf rechtsbündig x=1032; die Höhe setzt das Skript, 30 px über der Hauptbox */
.lw__einwurf{
  position:absolute;right:4.444cqw;bottom:25.42cqh;
  background:var(--violett);color:#fff;
  font-family:'Roboto',sans-serif;font-weight:700;
  font-size:5.556cqw;line-height:1;
  padding:1.157cqw 1.111cqw;
}

.lw__hinweis{
  font-family:var(--display);font-weight:700;font-size:2.6cqw;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
  text-align:center;padding:0 6px;
}
.lw__hinweis--gross{font-size:2.8cqw;max-width:70%;line-height:1.7}
.lw--an{outline:2px solid var(--blau);outline-offset:-2px;background:rgba(11,137,245,.14)}
.lw__hg.lw--an{background:rgba(11,137,245,.2)}

/* Einstellungen */
.einstellungen{display:grid;gap:18px}
.card__title--abstand{margin-top:6px}

.tonfeld{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-width:0;
  padding:12px 13px;border:1px dashed var(--line);border-radius:var(--r);
  background:var(--ink);font-size:13px;
}
.tonfeld.lw--an{border-style:solid}
.tonfeld__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tonfeld__dauer{flex:none;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.tonfeld__spieler{display:block;width:100%;max-width:100%;min-width:0;margin-top:8px;height:34px}

.farbzeile{
  min-width:0;display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.farbzeile:last-child{border-bottom:none}
.farbzeile__text{flex:1;font-size:13.5px}
.farbzeile__name{
  flex:1 1 0;min-width:0;width:100%;padding:6px 9px;
  background:var(--ink);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);
  font:400 13.5px var(--body);
}
.farbzeile__wahl{
  flex:none;width:44px;height:30px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:var(--r);
}
.einstellungen__fuss{
  margin:0;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11.5px;color:var(--fg-faint);line-height:1.5;
}

/* Schmale Fenster: die Leisten legen sich über die Mitte */
@media (max-width:1000px){
  .werkstatt{height:auto;min-height:0;position:relative}
  .leiste{position:absolute;top:0;bottom:0;z-index:20;
          box-shadow:0 8px 34px rgba(0,0,0,.6)}
  .leiste--links{left:0}
  .leiste--rechts{right:0}
  .leiste--zu{width:26px}
  .mitte{width:100%;padding:0 32px}
  .buehne{min-height:56vh}
  .leinwand{height:auto;width:100%;max-width:240px}
}
@media (max-width:680px){
  .mitte{padding:0 30px}
  .zeitleiste{padding:12px 12px 14px}
  .reiter{overflow-x:auto}
  .reiter__knopf{padding:10px 14px;white-space:nowrap}
}

.erk__umgebung--gut{color:var(--gruen)}
.erk__quelle{
  font-size:11px;color:var(--fg-faint);
  margin-left:auto;font-variant-numeric:tabular-nums;
}

.tag--neutral{background:rgba(138,148,163,.16);color:var(--fg-dim)}
.erk__fuss{
  margin:14px 0 0;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;color:var(--fg-faint);
}

/* =============================================================
   Zeitleiste
   ============================================================= */

.zl__kopf{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;margin-bottom:4px;
}
.zl__kopf .card__title{margin:0}
.zl__werkzeug{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zl__stand{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);
}
.zl__stand--fehler{color:#FF6B6D}

.btn--klein{padding:7px 13px;font-size:10px;letter-spacing:.1em}
.btn--klein:disabled{opacity:.4;cursor:not-allowed}

.notiz--warnung{color:#E8A33D}

/* Spur */
.zl__spur{
  position:relative;height:84px;margin:14px 0 0;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.zl__welle{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  width:100%;height:60px;pointer-events:none;opacity:.5;
}
.zl__bloecke{position:absolute;inset:0}

.zlb{
  position:absolute;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid rgba(0,0,0,.6);
  background:rgba(20,22,26,.5);
  cursor:pointer;overflow:hidden;
  transition:background .14s ease;
}
.zlb:last-child{border-right:none}
.zlb:hover{background:rgba(30,34,40,.6)}
.zlb--belegt{background:rgba(20,22,26,.25)}
.zlb--gewaehlt{outline:2px solid var(--blau);outline-offset:-2px;z-index:2}
.zlb--an{outline:2px dashed var(--blau);outline-offset:-2px;background:rgba(11,137,245,.2)}

.zlb__bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.42;
}
.zlb__kopf,.zlb__fuss{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:6px;padding:4px 6px;
}
.zlb__nr{
  display:grid;place-items:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:2px;
  background:var(--blau);color:#fff;
  font-family:var(--display);font-weight:700;font-size:10px;
}
.zlb--belegt .zlb__nr{background:var(--violett)}
.zlb__art{
  font-family:var(--display);font-weight:700;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);
}
.zlb__fuss{
  background:linear-gradient(transparent,rgba(10,11,13,.85));
  font-size:10.5px;
}
.zlb__name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-dim);
}
.zlb__dauer{flex:none;color:var(--fg-faint);font-variant-numeric:tabular-nums}

.zlb__griff{
  position:absolute;right:-5px;top:0;bottom:0;width:11px;
  cursor:col-resize;z-index:3;touch-action:none;
}
.zlb__griff::after{
  content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;
  background:var(--fg-faint);opacity:0;transition:opacity .14s ease;
}
.zlb__griff:hover::after{opacity:1;width:3px;left:4px;background:var(--blau)}

/* Skala */
.zl__skala{position:relative;height:18px;margin-top:5px}
.zl__strich{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:10px;color:var(--fg-faint);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.zl__strich:first-child{transform:none}

/* Einstellungen des gewählten Segments */
.zl__wahl{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.zl__wahlname{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blau);
  padding-bottom:9px;margin-right:auto;
}
.zl__feld{display:grid;gap:6px}
.zl__feld .field__input--slim{min-width:180px}

/* Vorschau des Segmentmediums in der Leinwand */
.zl__vorschaubild{position:absolute;inset:0;width:100%;height:100%}

/* ---------------------------------------------------------- Regler */
.notiz{margin:-6px 0 0;font-size:12px;line-height:1.55;color:var(--fg-faint)}
.regler{display:grid;gap:7px}
.regler__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.regler__kopf .field__label{min-width:0}
.regler__wert{
  flex:none;font-size:12px;color:var(--fg-dim);font-variant-numeric:tabular-nums;
}
.regler__fuss{font-size:11px;color:var(--fg-faint)}
.regler input[type=range]{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  height:4px;-webkit-appearance:none;appearance:none;
  background:var(--ink);border:1px solid var(--line);border-radius:3px;cursor:pointer;
}
.regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}
.regler input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}

/* =============================================================
   Textreiter
   ============================================================= */

.reiter__knopf--aus{color:var(--fg-faint);opacity:.5;cursor:default}
a.reiter__knopf:hover{text-decoration:none;color:var(--fg)}

.textflaeche{display:grid;gap:20px}

.erkennung{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;
}
.erk__kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.erk__kopf .card__title{margin:0}
.erk__umgebung{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);
}
.erk__umgebung--warnung{color:#E8A33D}
.erk__umgebung--gut{color:var(--gruen)}
.erk__quelle{
  font-size:11px;color:var(--fg-faint);
  margin-left:auto;font-variant-numeric:tabular-nums;
}

.erk__reihe{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.erk__reihe .field{gap:6px}
.erk__reihe .field__input--slim{min-width:150px}
.erk__reihe .btn{margin-left:auto}

.erk__lauf{margin-top:18px;display:grid;gap:7px}
.up__fuellung--puls{
  width:100% !important;
  background:linear-gradient(90deg,
    transparent 0%, var(--blau) 40%, var(--blau) 60%, transparent 100%);
  background-size:220% 100%;
  animation:zieht 1.5s linear infinite;
}
@keyframes zieht{from{background-position:120% 0}to{background-position:-120% 0}}

.erk__fuss{
  margin:14px 0 0;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;color:var(--fg-faint);
}

.warn--mild{background:rgba(232,163,61,.1);border-left-color:#E8A33D;color:#F0CE96}
.tag--neutral{background:rgba(138,148,163,.16);color:var(--fg-dim)}

/* Untertitelliste */
.untertitel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;
}
.ut__kopf{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:4px;
}
.ut__kopf .card__title{margin:0}
.ut__werkzeug{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ut__liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}

.utz{
  --farbe:var(--rot);
  display:grid;gap:12px;align-items:start;
  grid-template-columns:26px 150px minmax(0,1fr) 210px;
  padding:10px 12px 10px 14px;
  background:var(--ink);border:1px solid var(--line);
  border-left:3px solid var(--farbe);border-radius:var(--r);
}
.utz--gewaehlt{border-color:var(--blau);border-left-color:var(--farbe)}
.utz--zubreit{background:rgba(232,163,61,.07)}
.utz--zubreit .utz__text{border-color:#E8A33D}

.utz__zeit{display:flex;align-items:center;gap:6px;padding-top:5px}
.utz__ms{
  width:60px;padding:5px 6px;
  background:var(--panel);color:var(--fg-dim);
  border:1px solid var(--line);border-radius:var(--r);
  font:400 12px/1.3 var(--body);font-variant-numeric:tabular-nums;
  text-align:right;-moz-appearance:textfield;
}
.utz__ms::-webkit-outer-spin-button,
.utz__ms::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.utz__bis{font-size:11px;color:var(--fg-faint)}

.utz__text{
  width:100%;min-height:52px;resize:vertical;padding:8px 10px;
  background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);
  font:700 14px/1.35 var(--body);
}
.utz__text:focus{border-color:var(--blau);outline:none}

.utz__seite{display:flex;gap:6px;align-items:center;padding-top:2px}
.utz__sprecher,.utz__slot{
  flex:1;min-width:0;padding:6px 7px;
  background:var(--panel);color:var(--fg-dim);
  border:1px solid var(--line);border-radius:var(--r);
  font:400 12px var(--body);
}
.utz__weg{
  flex:none;width:26px;height:26px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--fg-faint);cursor:pointer;font-size:15px;line-height:1;
}
.utz__weg:hover{color:#fff;background:var(--rot);border-color:var(--rot)}

@media (max-width:900px){
  .utz{grid-template-columns:26px 1fr;gap:8px}
  .utz__wahl{grid-row:1 / span 3}
  .utz__zeit,.utz__text,.utz__seite{grid-column:2}
  .utz__zeit{padding-top:0}
  .erk__reihe .btn{margin-left:0;width:100%}
  .erk__reihe .field{flex:1 1 140px}
  .erk__reihe .field__input--slim{min-width:0;width:100%}
}

@media (max-width:1000px){
  /* container-type:size braucht eine feste Höhe — mit height:auto
     bliebe die Leinwand leer, weil ihr Inhalt nicht zur Größe beiträgt. */
  .leinwand{height:min(46vh,420px);width:auto;max-width:100%}
}
@media (max-width:680px){
  .leinwand{height:min(42vh,360px)}
  .zl__spur{height:74px}
  .zl__werkzeug .btn{flex:1 1 auto}
}

/* Kleinigkeiten, die bisher nur geerbt haben */
.recent__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent__status{flex:none}
.up__rest{flex:none}

/* Fortschritt der Erkennung */
.erk__balkenzeile{display:flex;align-items:center;gap:12px}
.erk__balkenzeile .up__balken{flex:1;min-width:0}
.erk__prozent{
  flex:none;min-width:46px;text-align:right;
  font-size:12.5px;color:var(--fg-dim);font-variant-numeric:tabular-nums;
}
.btn--stop{flex:none;border-color:var(--line)}
.btn--stop:hover{background:var(--rot);border-color:var(--rot);color:#fff}

/* =============================================================
   Vorschau
   ============================================================= */

.vorschau{
  display:grid;gap:20px;align-items:start;
  grid-template-columns:minmax(240px,1fr) 340px;
}

.vs__buehne{
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;min-height:0;
}
.vs__leinwand{
  display:block;height:min(74vh,720px);width:auto;max-width:100%;
  border-radius:var(--r);background:#000;
}

.vs__pult{
  display:grid;gap:16px;align-content:start;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;
}
.vs__pult .card__title{margin:0}
.vs__knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.vs__knoepfe .btn{justify-self:auto}

.vs__pult input[type=range]{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  height:4px;-webkit-appearance:none;appearance:none;
  background:var(--ink);border:1px solid var(--line);border-radius:3px;cursor:pointer;
}
.vs__pult input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}
.vs__pult input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}
.vs__pult input[type=range]:disabled{opacity:.4;cursor:not-allowed}

.vs__pult .checks__label{width:44%}

@media (max-width:900px){
  .vorschau{grid-template-columns:1fr}
  .vs__leinwand{height:min(56vh,520px)}
}

/* Auswahlkästchen zum Zusammenfassen */
.utz__wahl{display:flex;align-items:center;justify-content:center;padding-top:8px}
.utz__wahl input{
  width:17px;height:17px;cursor:pointer;
  accent-color:var(--blau);
}
.utz--angehakt{background:rgba(11,137,245,.07);border-color:rgba(11,137,245,.4)}

/* Export */
#exErgebnis{display:grid;gap:8px;justify-items:start;margin:0}
#exLaden{text-decoration:none}
#exLaden:hover{text-decoration:none}

/* Sprechertrennung */
.tr__gruppen{display:grid;gap:10px;margin:14px 0}
.tr__gruppe{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink);
}
.tr__marke{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blau);
}
.tr__anteil{
  font-size:12.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;margin-right:auto;
}
.tr__gruppe .field__input--slim{min-width:170px}

/* Stammsprecher */
.st__liste{display:grid;gap:2px;margin:14px 0}
.st__liste .farbzeile{gap:8px}

/* =============================================================
   Untertitel-Zeitleiste
   ============================================================= */

.utl__wahlzeit{
  font-size:12px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;margin-right:auto;
}

.utl__leiste{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:14px 0 8px;
}
.utl__zoom{display:flex;align-items:center;gap:10px}
.utl__zoom .field__label{white-space:nowrap}
.utl__zoom input[type=range]{
  width:180px;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--ink);border:1px solid var(--line);border-radius:3px;cursor:pointer;
}
.utl__zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}
.utl__zoom input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--blau);border:none;cursor:pointer;
}
.utl__kopfzeit{
  margin-left:auto;font-size:12.5px;color:var(--blau);
  font-variant-numeric:tabular-nums;
}

.utl__rahmen{
  display:flex;align-items:stretch;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}

/* Spurbeschriftung: steht fest und scrollt nicht mit */
.utl__spalte{
  flex:none;width:104px;
  border-right:1px solid var(--line);
  background:var(--panel);
}
.utl__spalteKopf{height:34px}
.utl__spalteFuss{height:20px;border-top:1px solid var(--line)}
.utl__schild{
  height:44px;display:flex;align-items:center;
  padding:0 10px;border-top:1px solid rgba(255,255,255,.05);
  border-left:4px solid var(--rot);
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.utl__bahn{
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
}
.utl__inhalt{position:relative;height:auto}

.utl__welle{
  position:absolute;left:0;top:0;height:34px;
  opacity:.45;pointer-events:none;
}

.utl__spuren{position:relative;padding-top:34px}
.utl__spur{
  position:relative;height:44px;
  border-top:1px solid rgba(255,255,255,.05);
}

.utl__block{
  position:absolute;top:16px;height:24px;
  border-radius:3px;cursor:grab;overflow:hidden;
  display:flex;align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
  touch-action:none;z-index:2;
}
.utl__block:active{cursor:grabbing}
.utl__block--gewaehlt{outline:2px solid #fff;outline-offset:1px;z-index:3}
/* Einwürfe sitzen etwas höher, damit sie sich von der Hauptposition abheben */
.utl__block--einwurf{top:2px;height:16px;opacity:.9}
.utl__text{
  padding:0 6px;color:#fff;font-size:11px;font-weight:700;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.utl__griff{
  position:absolute;top:0;bottom:0;width:8px;
  cursor:col-resize;touch-action:none;z-index:4;
}
.utl__griff--links{left:0}
.utl__griff--rechts{right:0}
.utl__griff::after{
  content:'';position:absolute;top:4px;bottom:4px;left:3px;width:2px;
  background:rgba(255,255,255,.55);opacity:0;
}
.utl__block:hover .utl__griff::after{opacity:1}

.utl__skala{position:relative;height:20px;border-top:1px solid var(--line)}
.utl__strich{
  position:absolute;top:3px;transform:translateX(-50%);
  font-size:10px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;
}

.utl__kopf{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--blau);pointer-events:none;z-index:5;
}
.utl__kopf::before{
  content:'';position:absolute;top:0;left:-4px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--blau);
}

/* Klappbare Liste */
.ut__klapp{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--fg-dim);font:inherit;
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
}
.ut__klapp:hover{color:var(--fg)}

.utz__teilen{
  flex:none;width:26px;height:26px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--fg-faint);cursor:pointer;font-size:13px;line-height:1;
}
.utz__teilen:hover{color:#fff;background:var(--blau);border-color:var(--blau)}

/* =============================================================
   Editor
   ============================================================= */

.shell--voll{max-width:1800px}
.masthead--schmal{margin-bottom:20px}
.masthead--schmal h1{font-size:clamp(22px,2.6vw,30px)}

.ed{
  display:flex;gap:14px;align-items:stretch;
  height:calc(100vh - 200px);min-height:560px;
}

.ed__mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}

/* Vorschau */
.ed__buehne{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;
}
.ed__leinwand{
  height:100%;width:auto;max-width:100%;
  border-radius:var(--r);background:#000;
}
.ed__abspiel{
  position:absolute;left:14px;bottom:12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.ed__ladestand{font-size:11.5px;color:var(--fg-faint)}

/* Schnittbereich */
.ed__schnitt{
  flex:none;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px 14px;
}
.ed__werkzeug{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.ed__werkzeugLinks,.ed__werkzeugRechts{display:flex;align-items:center;gap:6px}
.ed__werkzeugRechts{margin-left:auto}
.ed__zeitanzeige{
  font-family:var(--display);font-weight:700;font-size:12.5px;
  color:var(--fg-dim);font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.ed__massstab{
  min-width:38px;text-align:center;font-size:12px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;
}

.ed__legende{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.ed__legendeStueck{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);
}
.ed__legendeStueck i{width:10px;height:10px;border-radius:2px;display:block}

/* Ein einziger rollender Behälter für Lineal, Spuren, Wellenform und Kopf */
.ed__leiste{
  position:relative;overflow-x:auto;overflow-y:hidden;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
}
.ed__inhalt{position:relative}

.ed__lineal{position:relative;height:20px;border-bottom:1px solid var(--line)}
.ed__strich{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.09);
  font-size:9.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  padding-left:4px;line-height:20px;pointer-events:none;
}

.ed__spur{position:relative;border-top:1px solid rgba(255,255,255,.05)}
.ed__spur--medien{height:52px}
.ed__spur--sprecher{height:32px}
.ed__spuren{position:relative}

.ed__wellenraum{
  position:relative;height:38px;
  border-top:1px solid var(--line);overflow:hidden;
}
.ed__welle{position:absolute;top:0;left:0;pointer-events:none;opacity:.6}

.ed__kopf{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--blau);pointer-events:none;z-index:6;
}
.ed__kopf::before{
  content:'';position:absolute;top:0;left:-4px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:8px solid var(--blau);
}

/* Balken */
.edb{
  position:absolute;overflow:hidden;cursor:grab;
  display:flex;align-items:center;touch-action:none;
  border-radius:3px;z-index:2;
}
.edb:active{cursor:grabbing}
.edb--gewaehlt{outline:2px solid #fff;outline-offset:-1px;z-index:4}
.edb--an{outline:2px dashed var(--blau);outline-offset:-2px}

.edb--medium{
  top:4px;height:44px;
  background:#1B1E24 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.14);
}
.edb--medium::after{
  content:'';position:absolute;inset:0;background:rgba(10,11,13,.42);
}
.edb--leer{
  background-image:repeating-linear-gradient(45deg,#15181d 0 6px,#101216 6px 12px);
}

.edb--text{top:5px;height:22px}
.edb--einwurf{top:2px;height:14px;opacity:.9}

.edb__schild{
  position:relative;z-index:1;
  padding:0 6px;color:#fff;font-size:10.5px;font-weight:700;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}

.edb__griff{
  position:absolute;top:0;bottom:0;width:9px;
  cursor:col-resize;touch-action:none;z-index:5;
}
.edb__griff--links{left:0}
.edb__griff--rechts{right:-4px}
.edb__griff::after{
  content:'';position:absolute;top:3px;bottom:3px;left:3px;width:2px;
  background:rgba(255,255,255,.6);opacity:0;
}
.edb:hover .edb__griff::after{opacity:1}

/* Eigenschaften */
.ed__ablesen{display:grid;gap:4px}
.ed__wert{font-size:13.5px;color:var(--fg-dim);word-break:break-word}
.leiste__rollen .btn{justify-self:start}

.dlg--breit{width:min(900px,94vw);max-height:84vh}
.dlg--breit .dlg__form{max-height:80vh;overflow-y:auto}

@media (max-width:1100px){
  .ed{height:auto;min-height:0;position:relative;display:block}
  .ed__mitte{width:100%;padding:0 32px}
  .ed__buehne{min-height:46vh}
  .ed__leinwand{height:min(46vh,420px)}
  .ed .leiste{position:absolute;top:0;bottom:0;z-index:20;
              box-shadow:0 8px 34px rgba(0,0,0,.6)}
  .ed .leiste--links{left:0}
  .ed .leiste--rechts{right:0}
}