/* LiveStudio CMS — Aussehen fuer beide Seiten.
   Ausgelagert, weil /cms/media und /cms/management dieselbe Anmutung haben
   sollen. Eine Datei aendern statt zwei. */
  :root {
    /* Sagt dem Browser, dass diese Seite dunkel ist. Ohne das zeichnet er
       Bildlaufleisten, Auswahllisten und Fokusrahmen weiterhin hell — sie
       stammen vom Betriebssystem, nicht von unserem Stylesheet, und stachen
       als helle Balken aus der dunklen Oberfläche heraus. */
    color-scheme: dark;

    --bg:#14161a; --flaeche:#1c1f25; --rand:#2b3038; --text:#e6e8ec;
    --matt:#8b93a1; --akzent:#4da3ff; --warn:#d98a3a; --gut:#4caf7d;
    --markIn:#4caf7d; --markOut:#e05c5c; --intro:#4da3ff; --outro:#d98a3a; --link:#b47ce0;
    --hook:#e0c04a;

    /* Schmaler und ruhiger als die Vorgabe. Die Trefferliste ist das, was man
       stundenlang ansieht — dort soll die Leiste führen, nicht auffallen. */
    scrollbar-width: thin;
    scrollbar-color: #3a424e var(--bg);
  }

  /* Für ältere Chromium-Fassungen, die scrollbar-color noch nicht kennen. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb {
    background: #3a424e; border-radius: 5px;
    border: 2px solid var(--bg);        /* etwas Luft, damit der Griff schlanker wirkt */
  }
  ::-webkit-scrollbar-thumb:hover { background: #4a5563; }
  ::-webkit-scrollbar-corner { background: var(--bg); }
  * { box-sizing:border-box; }
  body {
    margin:0; height:100vh; display:flex; flex-direction:column;
    background:var(--bg); color:var(--text);
    font:14px/1.45 "Segoe UI",system-ui,sans-serif;
  }
  header {
    display:flex; align-items:center; gap:16px; padding:9px 16px;
    background:var(--flaeche); border-bottom:1px solid var(--rand); flex:0 0 auto;
  }
  header h1 { font-size:15px; font-weight:600; margin:0; }
  header .zahlen { color:var(--matt); font-size:12px; margin-left:auto; }

  .leiste { display:flex; gap:8px; padding:9px 16px; border-bottom:1px solid var(--rand); flex:0 0 auto; flex-wrap:wrap; }
  input,select,textarea,button {
    background:var(--bg); color:var(--text); border:1px solid var(--rand);
    border-radius:4px; padding:6px 9px; font:inherit;
  }
  input:focus,select:focus,textarea:focus { outline:none; border-color:var(--akzent); }
  #q { flex:1 1 240px; min-width:160px; }
  label.haken { display:flex; align-items:center; gap:6px; color:var(--matt); font-size:13px; }
  button { cursor:pointer; }
  button:hover:not(:disabled) { border-color:var(--akzent); }
  button:disabled { opacity:.4; cursor:default; }
  button.stark { background:var(--akzent); border-color:var(--akzent); color:#08121d; font-weight:600; }
  button.gefahr { border-color:#5a2a2a; color:#e08a8a; }

  /* Der Weg zwischen Mediendatenbank und Verwaltung. Ein <a> und kein <button>,
     weil es wirklich ein Seitenwechsel ist: Mittelklick öffnet einen neuen
     Reiter, der Browser zeigt das Ziel unten an, und der Zurück-Knopf tut, was
     er soll. Aussehen soll es trotzdem wie die Knöpfe daneben — für den, der
     die Leiste bedient, ist es einer. */
  a.knopfartig {
    background:var(--bg); color:var(--text); border:1px solid var(--rand);
    border-radius:4px; padding:6px 9px; font:inherit; text-decoration:none;
    display:inline-flex; align-items:center; cursor:pointer;
  }
  a.knopfartig:hover { border-color:var(--akzent); }

  main { flex:1 1 auto; display:flex; min-height:0; }
  .liste { flex:0 0 42%; overflow-y:auto; border-right:1px solid var(--rand); }
  /* Kopf und Fuß stehen, nur die Mitte rollt. Der Sichern-Knopf muss immer
     erreichbar sein — sonst scrollt man nach jeder Änderung ans Ende, nur um
     ihn zu finden, und bei neun Marken plus Ast plus Angaben ist das weit. */
  .editor { flex:1 1 auto; display:flex; flex-direction:column; background:var(--flaeche); min-width:0; overflow:hidden; }
  .editor > .hinweis { overflow-y:auto; }

  .ekopf { flex:0 0 auto; padding:12px 16px 0; border-bottom:1px solid var(--rand); }
  .ekopf h2 { margin:0 0 2px; font-size:16px; }
  .ekopf .unter { margin-bottom:10px; }

  .reiter { display:flex; gap:2px; }
  .reiter button {
    background:none; border:none; border-bottom:2px solid transparent;
    border-radius:0; padding:6px 12px; color:var(--matt); font-size:13px;
  }
  .reiter button:hover { color:var(--text); background:#20242b; }
  .reiter button[data-offen] { color:var(--text); border-bottom-color:var(--akzent); font-weight:600; }

  .einhalt { flex:1 1 auto; overflow-y:auto; padding:14px 16px; min-height:0; }

  table { width:100%; border-collapse:collapse; }
  th {
    position:sticky; top:0; background:var(--flaeche); text-align:left;
    font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--matt); font-weight:600; padding:7px 10px; border-bottom:1px solid var(--rand);
  }
  td { padding:6px 10px; border-bottom:1px solid #23262d; }
  tbody tr { cursor:pointer; }
  tbody tr:hover { background:#20242b; }
  tbody tr[aria-selected=true] { background:#223247; }
  .dauer { font-variant-numeric:tabular-nums; text-align:right; color:var(--matt); }
  .klasse { font-size:11px; color:var(--matt); border:1px solid var(--rand); border-radius:3px; padding:1px 5px; white-space:nowrap; }
  .ohneton { color:var(--warn); font-size:11px; margin-left:6px; }
  .matt { color:var(--matt); }
  .hinweis { color:var(--matt); padding:24px 16px; }

  /* ── Wellenform ── */
  #welle { position:relative; height:180px; background:var(--bg); border:1px solid var(--rand); border-radius:5px; overflow:hidden; }
  #welle canvas { display:block; width:100%; height:100%; cursor:crosshair; }
  .marke { position:absolute; top:0; bottom:0; width:1px; pointer-events:none; }

  /* Der schmale Streifen am Strich bleibt — wer genau zielt, greift dort. */
  .marke i {
    position:absolute; top:0; left:-5px; width:11px; height:100%;
    cursor:ew-resize; pointer-events:auto;
  }

  /* Die Beschriftung ist der eigentliche Griff: viel größer zu treffen als ein
     Strich von einem Pixel. Jede Marke sitzt in ihrer eigenen Zeile, deshalb
     verdecken sie sich auch dann nicht, wenn zwei Marken übereinanderliegen —
     bei MarkIn und LinkIn ist das der Normalfall. */
  .marke b {
    position:absolute; left:3px; font:600 10px/1.5 system-ui;
    padding:0 4px; border-radius:2px; color:#0c0f13; white-space:nowrap;
    pointer-events:auto; cursor:ew-resize; user-select:none;
    box-shadow:0 0 0 1px rgba(0,0,0,.45);
  }
  .marke b:hover { filter:brightness(1.25); }
  .marke[data-gewaehlt] b { outline:1px solid #fff; }
  .marke.links b { left:auto; right:3px; }   /* am rechten Rand nach innen klappen */

/* Während eine Datei über dem Fenster hängt. Ohne sichtbare Antwort weiß
   niemand, ob das Fenster sie überhaupt annimmt. */
body.zieht { outline:2px dashed var(--akzent); outline-offset:-4px; }

/* Das hidden-Attribut setzt display:none — aber nur mit der schwachen
   Standardregel [hidden]. Eine eigene Regel mit display:flex ist staerker und
   hebt es auf. Deshalb hier ausdruecklich zuruecknehmen; sonst bleibt das
   Element sichtbar, obwohl das Skript es laengst versteckt hat.
   Genau das ist passiert: Nach erfolgreicher Anmeldung blieb die Maske stehen,
   und meine Pruefung fragte nur die EIGENSCHAFT .hidden ab — die stimmte. */
.wer[hidden], #tor[hidden] { display:none !important; }

.wer { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--matt); }
.wer b { color:var(--vorn); font-weight:600; }
#meinKennwort { background:none; border:none; padding:0; cursor:pointer; }
#meinKennwort:hover b { text-decoration:underline; }

/* width:auto, NICHT 100%. Mit 100% verteilt der Browser den Ueberschuss auf
   die Spalten — bei acht Rechten wurde jede 53 Pixel breit, obwohl ein Haken
   zwoelf braucht. */
table.rechte { border-collapse:collapse; font-size:12px; margin-top:8px; width:auto; }
table.rechte th, table.rechte td {
  border:1px solid var(--rand); padding:3px 7px; text-align:left; white-space:nowrap;
}
table.rechte th { color:var(--matt); font-weight:500; }
table.rechte td.zelle {
  text-align:center; cursor:pointer; font-weight:600; user-select:none;
}
table.rechte td.zelle:hover { background:#20262e; }
table.rechte td.ja    { color:var(--gut); }         /* direkt vergeben */
table.rechte td.ueber { color:var(--akzent); }      /* kommt aus einer Gruppe */
table.rechte td.nein  { color:var(--markOut); }     /* hat er nicht */
table.rechte td.leer  { background:#181c22; }

/* Senkrechte Spaltenkoepfe.
   Gedreht wird ein INNERES span, nicht die Zelle selbst. Dreht man die Zelle,
   greifen text-align und vertical-align in der gedrehten Achse und die Woerter
   stehen unterschiedlich weit oben — genau das war zu sehen. Ein inline-block
   im Span sitzt dagegen am unteren Rand der Zelle, und alle beginnen auf
   derselben Linie. */
table.rechte th.dreh {
  height:92px; padding:0 1px; vertical-align:bottom; font-weight:500;
}
table.rechte th.dreh > span {
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:inline-block; white-space:nowrap; padding:4px 0;
}
table.rechte th.senderName { text-align:left; white-space:nowrap; padding-right:14px; }

/* Schmal: Ein Haken braucht keine Breite. Die Spalte richtet sich nach dem
   gedrehten Wort, und das ist eine Zeilenhoehe.

   KEIN width:1% hier. In einer Tabelle mit width:auto ist eine Prozentbreite
   auf den Zellen ein Zirkelschluss — sie bezieht sich auf eine Breite, die
   erst aus den Zellen entsteht. Chrome loest das auf, indem es die Tabelle den
   Elternblock fuellen laesst: gemessen 710 statt 277 Pixel, und die ganze
   ueberschuessige Breite landete in der Namensspalte. */
table.rechte td.zelle { padding:3px 2px; }

/* Listenansicht der Verwaltung. Dieselbe Anmutung wie die Trefferliste links —
   wer dort eine Zeile waehlt, erwartet hier dasselbe Verhalten. */
table.liste-verwaltung { border-collapse:collapse; font-size:12px; width:100%; }
table.liste-verwaltung th {
  text-align:left; font-weight:500; color:var(--matt);
  border-bottom:1px solid var(--rand); padding:4px 8px; white-space:nowrap;
}
table.liste-verwaltung td { padding:4px 8px; white-space:nowrap; }
table.liste-verwaltung tr[aria-selected] { background:#24333f; }
table.liste-verwaltung tr:not(:first-child):hover { background:#20262e; cursor:default; }

/* Der Dialog. <dialog> bringt Tastaturfang und Escape mit; hier steht nur,
   wie er aussieht. */
dialog.kdialog {
  border:1px solid var(--rand); border-radius:6px;
  background:var(--flaeche); color:var(--vorn); padding:20px; min-width:320px;
}
dialog.kdialog::backdrop { background:rgba(0,0,0,.6); }
dialog.kdialog h3 { margin:0 0 12px; font-size:15px; }
dialog.kdialog form { display:flex; flex-direction:column; gap:10px; }
dialog.kdialog .feld { display:flex; flex-direction:column; gap:4px; }
.matt span.zelle { padding:0 3px; font-weight:600; }
.matt span.ja { color:var(--gut); }
.matt span.ueber { color:var(--akzent); }
.matt span.nein { color:var(--markOut); }

.vwreiter { margin-top:8px; }

/* Über allem, nicht daneben: Ein halb bedienbarer Hintergrund verleitet zum
   Klicken, und jeder dieser Klicks liefe ins Leere. */
#tor {
  position:fixed; inset:0; z-index:100;
  background:var(--hintergrund); display:flex; align-items:center; justify-content:center;
}
#tor form {
  width:320px; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--rand); border-radius:6px; padding:24px; background:var(--flaeche);
}
#tor h2 { margin:0 0 4px; font-size:16px; }
#tor .feld { display:flex; flex-direction:column; gap:4px; }
#anStand { min-height:16px; font-size:12px; }
  .welleMeldung {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--warn); font-size:13px; pointer-events:none; text-align:center; padding:0 12px;
  }
  #kopf { position:absolute; top:0; bottom:0; width:1px; background:#fff; pointer-events:none; opacity:.85; }

  .spieler { display:flex; align-items:center; gap:8px; margin:8px 0 14px; }
  /* Nur Symbole: Beschriftungen kosteten Platz, den die Wellenform besser
     gebrauchen kann. Was sie bedeuten, sagt der Tooltip. */
  button.symbol { min-width:34px; padding:5px 0; text-align:center; font-size:13px; line-height:1.2; }
  .zeit { font-variant-numeric:tabular-nums; color:var(--matt); font-size:13px; }

  fieldset { border:1px solid var(--rand); border-radius:5px; margin:0 0 14px; padding:10px 12px; }
  legend { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--matt); padding:0 5px; }
  .gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 12px; }

  /* Vier feste Spalten fuer die Marken: Zusammengehoeriges steht untereinander,
     IN ueber OUT. Ohne feste Spalten fuellt das Raster zeilenweise auf und
     reisst die Paare auseinander — dann steht MarkOut neben LinkIn, und man
     greift beim schnellen Arbeiten ins falsche Feld. */
  /* Bewusst OHNE Media-Query: Die Marken stehen an fest zugewiesenen
     Rasterplätzen. Würde die Spaltenzahl schrumpfen, legte das Raster für
     Spalte 3 und 4 stillschweigend neue Spalten an — die Paare stünden wieder
     nebeneinander, nur unsichtbar rechts außerhalb. Vier schmale Spalten sind
     das kleinere Übel. */
  .markenGitter { grid-template-columns:repeat(5, minmax(92px,1fr)); }
  .feld { display:flex; flex-direction:column; gap:3px; }
  .feld > span { font-size:11px; color:var(--matt); }

  /* Beschriftung als Knopf: setzt die Marke auf die Abspielposition. Sieht
     unauffällig aus wie eine Beschriftung, reagiert aber auf Zeiger und Klick —
     sonst hielte man es für Text und fände die Funktion nie. */
  .markeKopf { display:flex; align-items:center; gap:4px; }
  .markeKopf .setzen {
    flex:1 1 auto; text-align:left; background:none; border:none; padding:1px 2px;
    font:600 11px/1.4 system-ui; cursor:pointer; border-radius:3px;
  }
  .markeKopf .setzen:hover { background:#262c34; }
  .markeKopf .setzen::before { content:'◆ '; opacity:.55; }
  .markeKopf .abhier {
    background:none; border:none; color:var(--matt); padding:0 3px;
    font-size:11px; line-height:1; cursor:pointer; border-radius:3px;
  }
  .markeKopf .abhier:hover { background:#24333f; color:var(--akzent); }
  .markeKopf .leeren {
    background:none; border:none; color:var(--matt); padding:0 4px;
    font-size:13px; line-height:1; cursor:pointer; border-radius:3px;
  }
  .markeKopf .leeren:hover { background:#3a2626; color:#e08a8a; border-color:transparent; }
  .feld input, .feld select { width:100%; }
  .feld input[type=number] { font-variant-numeric:tabular-nums; }
  textarea { width:100%; resize:vertical; min-height:52px; }
  .breit { grid-column:1/-1; }
  /* Die beiden Vorschlagsknöpfe sind das Einzige in dieser Oberfläche, das
     etwas von sich aus setzt. Das Zeichen macht sie auf einen Blick von den
     Knöpfen unterscheidbar, die nur ausführen, was man ihnen sagt. */
  button.zauber { display:inline-flex; align-items:center; gap:6px; }
  button.zauber .stab { font-size:12px; line-height:1; filter:saturate(.7); }

  .fuss { display:flex; gap:8px; align-items:center; margin-top:4px; }
  .fuss .stand { margin-left:auto; font-size:12px; color:var(--matt); }
  .efuss {
    flex:0 0 auto; margin:0; padding:10px 16px;
    border-top:1px solid var(--rand); background:var(--flaeche);
  }
  pre { background:var(--bg); border:1px solid var(--rand); border-radius:4px; padding:8px; overflow-x:auto; font-size:12px; margin:0; white-space:pre-wrap; word-break:break-word; }

  /* ── Jinglebänke ─────────────────────────────────────────────────────────
     Die Karte ist ein Rechteck aus drei Zeilen: außen die Randfarbe mit den
     Angaben, in der Mitte die Titelfarbe mit der Beschriftung. Sie sieht hier
     genauso aus wie im Playout — wer eine Bank anlegt, soll dort nichts Neues
     lernen müssen.

     Die beiden Farben kommen als Stileigenschaften vom Datensatz, nicht aus
     dem Stylesheet: Sie gehören dem einzelnen Jingle. */
  /* Die Bank sitzt an der Stelle des Editors, rechts neben der Trefferliste.
     Von dort wird sie bestückt: Zeile greifen, auf einen Platz ziehen. */
  .jbSeite { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
  .jbKopf { display: flex; gap: 6px; align-items: center; }
  .jbKopf select { flex: 1 1 auto; min-width: 0; }

  .jbGitter {
    display: grid; gap: 10px; margin: 0;
    /* So viele Spalten, wie 150 Pixel breite Karten hineinpassen. Zwölf Plätze
       ergeben je nach Fenster zwei bis vier Reihen. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .cart {
    --mitte: #1f5f4f; --rand: #123b33;
    border-radius: 6px; overflow: hidden; cursor: pointer;
    border: 1px solid #0000; user-select: none;
    display: grid; grid-template-rows: auto 1fr auto; min-height: 74px;
    transition: transform .08s ease, border-color .12s ease;
  }
  .cart:hover { border-color: var(--akzent); }
  .cart:active { transform: scale(.98); }

  .cart .cz { padding: 3px 8px; font-size: 11px; color: #ffffffb0; background: var(--rand); }
  .cart .cz.unten { text-align: right; }
  .cart .cz.mitte {
    background: var(--mitte); color: #fff; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; padding: 8px;
    /* Lange Titel brechen um statt abgeschnitten zu werden — auf einer Taste
       ist ein halber Titel schlimmer als zwei Zeilen. */
    overflow-wrap: anywhere; line-height: 1.25;
  }

  /* Ein freier Platz sieht aus wie ein Platz und nicht wie ein Jingle. */
  .cart.leer { --mitte: #1c1f25; --rand: #171a1f; border: 1px dashed var(--rand); }
  .cart.leer .cz.mitte { color: var(--matt); font-weight: 400; }

  /* Belegt, aber der Ton fehlt oder hat keine Marken. Lieber vorher sehen als
     im Sendebetrieb ins Leere drücken. */
  .cart.stumm { outline: 1px solid var(--markOut); outline-offset: -1px; }
  .cart.stumm .cz.unten { color: var(--markOut); }

  .jbTreffer { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; margin: 0 0 10px; }
  .jbTreff {
    text-align: left; background: var(--bg); border: 1px solid var(--rand);
    color: var(--text); padding: 5px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
  }
  .jbTreff:hover { border-color: var(--akzent); }
  .jbGewaehlt {
    background: var(--flaeche); border: 1px solid var(--gut); border-radius: 4px;
    padding: 5px 8px; font-size: 12px;
  }

  .jbFarben { display: flex; gap: 4px; flex-wrap: wrap; }
  .jbFarbe {
    width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--rand);
    padding: 0; cursor: pointer;
  }
  .jbFarbe:hover { border-color: var(--akzent); }
  .jbVorschau { margin: 10px 0; max-width: 200px; }

  /* Der Platz, über dem die Maus gerade hängt. Ohne diese Rückmeldung weiß
     niemand, ob er losgelassen hat, wo er wollte. */
  .cart.ziel { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent) inset; }
  .cart[draggable="true"] { cursor: grab; }
  .cart[draggable="true"]:active { cursor: grabbing; }

  /* Eine Zeile, die sich ziehen lässt, muss danach aussehen. */
  .liste tbody tr[draggable="true"] { cursor: grab; }

  #jbKnopf[data-offen] { border-color: var(--akzent); color: var(--akzent); }

  /* Ein display in einer Klassenregel schlaegt das hidden-Attribut, das seine
     display:none nur aus dem Vorgabestylesheet des Browsers hat. Ohne diese
     Zeile stand der ausgeblendete Editor weiter neben der Bank. */
  .editor[hidden] { display: none; }

  /* Die abgeleitete Art neben der Klasse. Matter als die Klasse: Die Klasse
     steht im Bestand, die Art ist eine Vermutung aus dem Titel. */
  .cartart {
    font-size: 10px; color: var(--matt); border: 1px solid var(--rand);
    border-radius: 3px; padding: 0 4px; white-space: nowrap;
  }

  /* Der Rückweg sitzt rechts aussen im Kopf der Bank, abgesetzt von den
     Knöpfen, die die Bank selbst betreffen. */
  #jbZu { margin-left: auto; padding: 2px 8px; }

  /* Der Abhoerknopf sitzt rechts oben auf der Karte, in der Randfarbe --
     er gehoert zur Karte und nicht auf sie drauf. */
  .cart { position: relative; }
  .jbStift {
    position: absolute; right: 3px; top: 1px;
    background: transparent; border: none; color: #ffffff8a;
    font-size: 11px; line-height: 1; padding: 2px 4px; cursor: pointer;
    border-radius: 3px;
  }
  .jbStift:hover { color: #fff; background: #ffffff22; }

  /* Welche Karte gerade klingt. Die Karte IST der Knopf, also gehoert der
     Zustand an sie und nicht an ein Zeichen darauf. */
  .cart.laeuft { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }

  /* Nur zum Ansehen: in der Farbverwaltung. */
  .cart.schau { cursor: default; }
  .cart.schau:hover { border-color: #0000; }

  .cfZelle { display: flex; flex-direction: column; gap: 6px; }
  .cfRegler { display: flex; gap: 4px; align-items: center; }
  .cfRegler input[type=color] { width: 34px; height: 24px; padding: 0; }
  .cfZurueck { padding: 2px 8px; }
  .cfZurueck:disabled { opacity: .35; }