/* Farb- und Formensprache bewusst identisch zum AV-Rechner und zum
   Signalflow-Konfigurator, damit die eigenen Tools als eine Familie erkennbar
   bleiben. */
:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --flaeche-2: #f8f9fb;
  --rand: #d6d9de;
  --rand-stark: #b3b8c0;
  --text: #1f2328;
  --leise: #6b727c;
  --primaer: #2f6fb5;
  --primaer-text: #ffffff;
  --gefahr: #c0392b;
  --ok-bg: #eef6ee;
  --ok-rand: #7fae7f;
  --warn-bg: #fdf3e3;
  --warn-rand: #e0b054;
  --fehler-bg: #fdecea;
  --fehler-rand: #d9534f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d21;
    --flaeche: #24272c;
    --flaeche-2: #1f2226;
    --rand: #3a3f46;
    --rand-stark: #50565e;
    --text: #e6e8ea;
    --leise: #9aa1aa;
    --primaer: #4b8fd6;
    --ok-bg: #21301f;
    --ok-rand: #4d7a4d;
    --warn-bg: #3a2f1c;
    --warn-rand: #8a6b2a;
    --fehler-bg: #3a2320;
    --fehler-rand: #a4453f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.versteckt { display: none !important; }
.luecke { flex: 1; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.kopf h1 { font-size: 17px; margin: 0; font-weight: 600; white-space: nowrap; }
.kopf .projektname { flex: 0 1 260px; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--primaer); outline-offset: -1px; }
input[type="checkbox"], input[type="radio"] { min-width: auto; }
input[type="range"] { padding: 0; }

button, .knopf-link {
  font: inherit;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand-stark);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover, .knopf-link:hover { border-color: var(--primaer); }
button:disabled { opacity: 0.5; cursor: default; }
button.klein { padding: 4px 9px; font-size: 13px; }
button.primaer { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); }

/* ---------- Arbeitsfläche ---------- */
.arbeitsflaeche {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  height: calc(100vh - 53px);
}
.steuerung {
  overflow-y: auto;
  border-right: 1px solid var(--rand);
  background: var(--flaeche-2);
  padding: 12px;
}
.buehne {
  overflow: auto;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 900px) {
  .arbeitsflaeche { grid-template-columns: minmax(0, 1fr); height: auto; }
  .steuerung { border-right: none; border-bottom: 1px solid var(--rand); }
}

/* ---------- Gruppen ---------- */
.gruppe {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.gruppe > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 600;
  background: var(--flaeche-2);
  border-bottom: 1px solid transparent;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gruppe > summary::-webkit-details-marker { display: none; }
.gruppe > summary::before { content: "▸"; color: var(--leise); }
.gruppe[open] > summary { border-bottom-color: var(--rand); }
.gruppe[open] > summary::before { content: "▾"; }
.gruppe .inhalt { padding: 10px 12px 12px; }

.zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.zeile > label { flex: 0 0 auto; color: var(--leise); font-size: 13px; }
.zeile input[type="number"] { width: 92px; }
.zeile input[type="text"] { flex: 1 1 140px; }
.zeile select { flex: 1 1 140px; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.paar label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--leise); }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.drei label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--leise); }
.hinweis { font-size: 12px; color: var(--leise); margin: 4px 0 0; }
.warnung {
  font-size: 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0 0;
}
.fehler {
  font-size: 12px;
  background: var(--fehler-bg);
  border: 1px solid var(--fehler-rand);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0 0;
}

/* ---------- Schirmliste ---------- */
.schirmliste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.schirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  cursor: pointer;
}
.schirm.aktiv { border-color: var(--primaer); box-shadow: inset 0 0 0 1px var(--primaer); }
.schirm .name { font-weight: 600; }
.schirm .daten { font-size: 12px; color: var(--leise); }
.schirm input[type="checkbox"] { margin: 0; }
.schirm .kopfzeile { flex: 1; min-width: 0; }
.schirm .kopfzeile > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Bildwahl ---------- */
.bildwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.bildwahl button {
  font-size: 13px;
  padding: 5px 10px;
}
.bildwahl button.aktiv { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); }
.bildwahl label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--flaeche);
  cursor: pointer;
}

/* ---------- Vorschau ---------- */
.vorschau-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vorschau-rahmen {
  border: 1px solid var(--rand);
  border-radius: 8px;
  background:
    repeating-conic-gradient(var(--flaeche-2) 0% 25%, var(--flaeche) 0% 50%) 50% / 20px 20px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vorschau-rahmen.einpassen { align-items: center; justify-content: center; padding: 8px; }
#vorschau {
  display: block;
  image-rendering: pixelated;
  /* Der Schatten macht ein reinweißes Testbild vor hellem Hintergrund sichtbar. */
  box-shadow: 0 0 0 1px var(--rand-stark);
}
.beschreibung { font-size: 13px; color: var(--leise); margin: 0; }

.werte {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--leise);
}
.werte .probe {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--rand-stark);
  display: inline-block;
  vertical-align: middle;
}

.fortschritt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 8px 10px;
}
.fortschritt .balken {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.fortschritt .balken i { display: block; height: 100%; background: var(--primaer); width: 0; }

/* Farbwähler: die allgemeine Eingabeformatierung macht sie sonst zu einem
   schmalen Streifen, in dem die Farbe kaum zu erkennen ist. */
input[type="color"] {
  padding: 2px;
  height: 30px;
  min-width: 44px;
  cursor: pointer;
}

/* Eine Zeile des Verlaufs-Reglers: Farbe, Lage, Wert, Löschen. */
#hStopps .zeile input[type="color"] { flex: 0 0 44px; }
#hStopps .zeile button { flex: 0 0 auto; padding: 4px 9px; }

/* Die Oberfläche selbst in derselben Schrift wie die erzeugten Bilder —
   dann entspricht die Vorschau dem, was herauskommt. */
body { font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ================= LED-Planer ================= */

/* Die Steuerspalte darf breiter sein als beim Testbild-Generator: hier stehen
   Zuglisten mit Auslastung darin, keine reinen Zahlenfelder. */
.arbeitsflaeche { grid-template-columns: 400px minmax(0, 1fr); }
@media (max-width: 1100px) { .arbeitsflaeche { grid-template-columns: minmax(0, 1fr); height: auto; } }

/* ---------- Reiter in der Steuerspalte ---------- */
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.reiter button {
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 999px;
}
.reiter button.aktiv {
  background: var(--primaer);
  color: var(--primaer-text);
  border-color: var(--primaer);
}
.reiter button .zahl {
  font-size: 11px;
  opacity: 0.75;
  margin-left: 4px;
}

/* ---------- Karte ---------- */
.kartenrahmen {
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: auto;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 320px;
}
.kartenrahmen svg { display: block; width: 100%; height: auto; }
.kartenrahmen.malen .zelle { cursor: crosshair; }
.kartenrahmen .zelle:hover { fill: rgba(47, 111, 181, 0.16); }

.kartenleiste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--leise);
}
.kartenleiste select, .kartenleiste input[type="number"] { padding: 4px 6px; font-size: 13px; }
.kartenleiste label { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Züge (Ports und Abgänge) ---------- */
.zugliste { display: flex; flex-direction: column; gap: 4px; }
.zug {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  cursor: pointer;
}
.zug.aktiv { border-color: var(--primaer); box-shadow: inset 0 0 0 1px var(--primaer); }
.zug.leer .titel { color: var(--leise); }
.zug .punkt { width: 12px; height: 12px; border-radius: 3px; }
.zug .titel { font-weight: 600; font-size: 13px; }
.zug .unter { font-size: 11.5px; color: var(--leise); }
.zug .rechts { text-align: right; font-size: 12px; white-space: nowrap; }
.zug .rechts b { font-size: 13px; }
.zug.ueberlast { border-color: var(--fehler-rand); background: var(--fehler-bg); }
.zug.knapp { border-color: var(--warn-rand); }

.balkenzeile { height: 4px; background: var(--rand); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.balkenzeile i { display: block; height: 100%; background: var(--primaer); }
.balkenzeile.ueberlast i { background: var(--gefahr); }
.balkenzeile.knapp i { background: #d9922b; }

/* ---------- Befunde ---------- */
.befund {
  border-left: 3px solid var(--rand-stark);
  padding: 5px 8px;
  font-size: 12.5px;
  background: var(--flaeche);
  border-radius: 0 4px 4px 0;
  margin-bottom: 4px;
}
.befund.fehler { border-left-color: var(--fehler-rand); background: var(--fehler-bg); }
.befund.warnung { border-left-color: var(--warn-rand); background: var(--warn-bg); }
.befund.hinweis { border-left-color: var(--rand-stark); }
.befund-leer { color: var(--leise); font-size: 13px; }

/* ---------- Tabellenartige Listen (Bibliothek) ---------- */
.stammliste { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.stammzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  font-size: 13px;
  cursor: pointer;
}
.stammzeile.aktiv { border-color: var(--primaer); }
.stammzeile .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke-ungeprueft {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rand);
  color: var(--text);
  white-space: nowrap;
}
.marke-geprueft {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-rand);
  white-space: nowrap;
}

/* ---------- Kennzahlen unter der Karte ---------- */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
}
.kennzahlen div { display: flex; flex-direction: column; }
.kennzahlen span { color: var(--leise); font-size: 11.5px; }
.kennzahlen b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Logo-Vorschau ---------- */
.logo-vorschau {
  max-width: 100%;
  max-height: 56px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 4px;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.trenner { height: 1px; background: var(--rand); margin: 10px 0; }
.mini { font-size: 11.5px; color: var(--leise); }

/* ---------- Formularraster in der Seitenleiste ---------- */
/* Rasterzellen bekommen von Haus aus min-width:auto und schrumpfen deshalb nicht
   unter die Eigenbreite eines <input> (rund 170 px). In einer 400 px breiten
   Spalte lief die dritte Spalte damit aus dem Bild — genau der abgeschnittene
   Rand. min-width:0 hebt das auf, die Breite kommt danach vom Raster. */
.paar > label, .drei > label { min-width: 0; }
.paar input, .paar select, .drei input, .drei select { width: 100%; min-width: 0; }
.zeile input[type="text"], .zeile select { min-width: 0; }

/* Fachlich zusammengehörige Felder sichtbar gruppieren: das Kabinettformular hat
   inzwischen genug Zeilen, dass eine reine Reihenfolge nicht mehr trägt. */
.feldgruppe {
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 14px 10px 4px;
  margin-bottom: 10px;
  position: relative;
}
.gruppentitel {
  position: absolute;
  top: -7px;
  left: 8px;
  background: var(--flaeche);
  padding: 0 5px;
  font-size: 11px;
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Zahlenfelder ohne Spinner: sie stehlen Breite und werden ohnehin getippt. */
input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------- Phasenmarken im Stromreiter ---------- */
.phase-L1 { background: #8B5A2B; }
.phase-L2 { background: #1A1A20; }
.phase-L3 { background: #8A8F98; }
.zug .punkt.strich {
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px);
}
.zug.reserve { border-style: dashed; }
.zug.reserve .titel::after {
  content: " Red.";
  font-size: 10.5px;
  font-weight: 500;
  color: var(--leise);
}

/* ---------- Zoom und Ausschnitt der Karte ---------- */
.zoomleiste { display: inline-flex; align-items: center; gap: 4px; }
.zoomleiste button { padding: 2px 8px; min-width: 26px; }
.zoomleiste #zoomWert { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }

/* Über 100 % wächst das SVG über den Rahmen hinaus; der Rahmen scrollt dann.
   Ohne feste Höhe würde stattdessen die ganze Seite wachsen. */
.kartenrahmen { max-height: calc(100vh - 190px); }
.kartenrahmen svg { display: block; height: auto; }
.kartenrahmen.gezoomt { cursor: grab; }
.kartenrahmen.gezoomt.zieht { cursor: grabbing; }

/* ---------- Zugfenster am rechten Rand ---------- */
/* Die Port- und Abgangslisten werden schnell lang. In der Seitenleiste schoben
   sie die Knöpfe („Port anlegen" …) aus dem Bild — deshalb stehen sie jetzt
   neben der Karte und scrollen für sich. */
.buehne-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 10px;
  align-items: start;
  min-height: 0;
}
.buehne-inhalt.zu { grid-template-columns: minmax(0, 1fr) 34px; }
.kartenspalte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.zugfenster {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.zugfenster-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  flex: 0 0 auto;
}
.zugfenster-kopf button { padding: 1px 7px; line-height: 1.2; }
.zugfenster .zugliste {
  overflow-y: auto;
  padding: 6px;
  gap: 4px;
  min-height: 0;
}
.zugfenster .zug { grid-template-columns: 10px 1fr auto; padding: 5px 6px; gap: 6px; }
.zugfenster .zug .titel { font-size: 12.5px; }
.zugfenster .zug .unter { font-size: 11px; }
.zugfenster .zug .rechts { font-size: 11.5px; }

/* Eingeklappt bleibt nur der Kopf mit dem Pfeil stehen. */
.buehne-inhalt.zu .zugfenster .zugliste { display: none; }
.buehne-inhalt.zu .zugfenster-kopf { writing-mode: vertical-rl; padding: 8px 6px; gap: 10px; }
.buehne-inhalt.zu #zugfensterTitel, .buehne-inhalt.zu #zugfensterZahl { white-space: nowrap; }

@media (max-width: 1100px) {
  .buehne-inhalt { grid-template-columns: minmax(0, 1fr); }
  .zugfenster { max-height: 320px; }
  .buehne-inhalt.zu { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Konfigurationsdateien am Cabinet ---------- */
.dateiliste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dateizeile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  background: var(--flaeche-2);
  font-size: 12.5px;
}
.dateizeile .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateizeile button { padding: 1px 7px; font-size: 12px; }
.dateiliste-leer { font-size: 12px; color: var(--leise); }

/* Marke am Bibliothekseintrag: welche Endung liegt vor. */
.marke-datei {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 4px;
  border-radius: 3px;
  background: #2E7FB8;
  color: #fff;
  white-space: nowrap;
}
.marke-datei.ncp { background: #7B4FB5; }
.marke-datei.rcfg { background: #2E7FB8; }
.marke-datei.rcfgx { background: #1B998B; }

/* ---------- Bewertung der Eingangsauflösung ---------- */
/* Orange: eine Seite über UHD — möglich, aber der Zuspieler muss es liefern.
   Rot: über dem Pixeltakt oder der Kantenlänge des Anschlusses. */
.stufe-ok { color: var(--leise); }
.stufe-warnung { color: #D97A1F; font-weight: 600; }
.stufe-fehler { color: #C4415C; font-weight: 700; }