/* Einsatzbereit -- Szenario-Editor. Schlicht, Token auf :root, hell und dunkel. */

:root {
  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --flaeche-2: #eef1f5;
  --text: #1c2430;
  --text-leise: #5a6575;
  --rand: #d5dbe3;
  --akzent: #1f5fa8;
  --akzent-text: #ffffff;
  --akzent-hell: #e3edf9;
  --gefahr: #b42318;
  --gefahr-hell: #fdecea;
  --ok: #1e7a3c;
  --ok-hell: #e6f4ea;
  --warn: #8a5a00;
  --warn-hell: #fff4d6;
  --code-grund: #f1f3f6;
  --radius: 6px;
  --zeile: 72rem;
  --schmal: 30rem;
  --tippziel: 2.5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #12161c;
    --flaeche: #1a2029;
    --flaeche-2: #232b36;
    --text: #e4e8ee;
    --text-leise: #9aa5b4;
    --rand: #344050;
    --akzent: #6ea8ec;
    --akzent-text: #0d1622;
    --akzent-hell: #1d3047;
    --gefahr: #f2867a;
    --gefahr-hell: #3a1d1b;
    --ok: #74c98f;
    --ok-hell: #193323;
    --warn: #e7c06a;
    --warn-hell: #3a2f14;
    --code-grund: #232b36;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

a { color: var(--akzent); }

h1 { font-size: 1.5rem; margin: 0 0 1rem; line-height: 1.25; overflow-wrap: anywhere; }
h2 { font-size: 1.2rem; margin: 1.75rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }

code, pre, textarea.json { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }
code { background: var(--code-grund); padding: 0 0.25em; border-radius: 3px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Kopf */

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.kopf-innen {
  max-width: var(--zeile); margin: 0 auto; padding: 0.5rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
}
.marke { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.marke-zusatz { font-weight: 400; color: var(--text-leise); }
.hauptnav { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1 1 auto; }
.hauptnav a {
  color: var(--text); text-decoration: none; padding: 0.35rem 0.6rem; border-radius: var(--radius);
}
.hauptnav a:hover { background: var(--flaeche-2); }
.hauptnav a[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.abmelden { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.wer { color: var(--text-leise); font-size: 0.9rem; }
.rolle { display: inline-block; margin-left: 0.25rem; padding: 0 0.4rem; border: 1px solid var(--rand); border-radius: 999px; font-size: 0.8rem; }

/* ---------------------------------------------------------------- Seite */

main { max-width: var(--zeile); margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main.schmal { max-width: var(--schmal); }

.hinweis, .meldung {
  padding: 0.6rem 0.8rem; border-radius: var(--radius); margin: 0 0 1rem; border: 1px solid;
}
.hinweis { background: var(--ok-hell); color: var(--ok); border-color: var(--ok); }
.meldung { background: var(--gefahr-hell); color: var(--gefahr); border-color: var(--gefahr); white-space: pre-line; overflow-wrap: anywhere; }
.leise { color: var(--text-leise); font-size: 0.9rem; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.kopfzeile h1 { margin: 0; }
.angaben { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--text-leise); margin: -0.5rem 0 1rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------- Formulare */

.formular { display: grid; gap: 0.9rem; max-width: 40rem; }
.formular label, .feld { display: grid; gap: 0.3rem; font-weight: 600; }
.formular .hilfe { font-weight: 400; color: var(--text-leise); font-size: 0.85rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.45rem 0.6rem;
  min-height: var(--tippziel); width: 100%; max-width: 100%; font-weight: 400;
}
input[type="checkbox"] { width: auto; min-height: 0; }
textarea { min-height: 6rem; resize: vertical; }
textarea.json { min-height: 28rem; line-height: 1.4; white-space: pre; tab-size: 2; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
select[multiple] { min-height: 8rem; }
.kaestchen { display: flex !important; align-items: center; gap: 0.5rem; font-weight: 400 !important; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
button, .knopf {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tippziel); padding: 0.4rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--akzent); background: var(--akzent); color: var(--akzent-text); text-decoration: none;
}
button:hover, .knopf:hover { filter: brightness(1.08); }
.knopf-leise { background: var(--flaeche); color: var(--text); border-color: var(--rand); font-weight: 400; }
.knopf-gefahr { background: var(--flaeche); color: var(--gefahr); border-color: var(--gefahr); }
.knopf-klein { min-height: 2rem; padding: 0.15rem 0.6rem; font-size: 0.9rem; }
form.inline { display: inline; margin: 0; }

.filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; margin-bottom: 1rem; }
.filter label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--text-leise); }
.filter select { min-width: 9rem; width: auto; }
.filter .kaestchen { min-height: var(--tippziel); }

/* ---------------------------------------------------------------- Tabellen */

.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { background: var(--flaeche-2); font-size: 0.85rem; color: var(--text-leise); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.stillgelegt td { color: var(--text-leise); }
td.aktionen { white-space: nowrap; }
.leer { color: var(--text-leise); font-style: italic; }

/* ---------------------------------------------------------------- Marken */

.status, .marke-klein {
  display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; border: 1px solid;
}
.status-entwurf { color: var(--text-leise); border-color: var(--rand); }
.status-in_pruefung { color: var(--warn); background: var(--warn-hell); border-color: var(--warn); }
.status-fachlich_geprueft { color: var(--akzent); background: var(--akzent-hell); border-color: var(--akzent); }
.status-freigegeben { color: var(--ok); background: var(--ok-hell); border-color: var(--ok); }
.marke-klein { color: var(--warn); background: var(--warn-hell); border-color: var(--warn); }
.marke-still { color: var(--text-leise); background: var(--flaeche-2); border-color: var(--rand); }

/* ---------------------------------------------------------------- Reiter */

.reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--rand); margin: 0 0 1rem; }
.reiter a {
  padding: 0.5rem 0.8rem; text-decoration: none; color: var(--text-leise); border: 1px solid transparent;
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px;
}
.reiter a[aria-selected="true"] { color: var(--text); background: var(--flaeche); border-color: var(--rand); font-weight: 600; }
[data-reiter-panel][hidden] { display: none !important; }
.panel { margin-bottom: 2rem; }
/* Ohne JavaScript stehen alle Panels untereinander; jedes traegt seine Ueberschrift. */
.panel > h2:first-child { margin-top: 0.5rem; }

/* ---------------------------------------------------------------- Befunde, Unterschiede, Kommentare */

.befunde { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.befunde li { background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--gefahr); border-radius: var(--radius); padding: 0.45rem 0.7rem; overflow-wrap: anywhere; }
.stufe { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--gefahr); margin-right: 0.35rem; }
.pfad { margin-right: 0.35rem; }
.ok-text { color: var(--ok); }

.diff td { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; overflow-wrap: anywhere; min-width: 8rem; }
.diff .neu { background: var(--ok-hell); }
.diff .weg { background: var(--gefahr-hell); }
.diff .geaendert { background: var(--warn-hell); }

.kommentare { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.kommentare li { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.6rem 0.8rem; }
.kommentar-kopf { color: var(--text-leise); font-size: 0.85rem; margin-bottom: 0.2rem; }
.kommentar-text { white-space: pre-line; overflow-wrap: anywhere; }

.ablauf { display: grid; gap: 0.75rem; }
.ablauf form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0; }
.ablauf textarea { min-height: 3rem; flex: 1 1 18rem; }

.link-kasten { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.link-kasten input { flex: 1 1 20rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }

pre.json { background: var(--code-grund); padding: 0.75rem; border-radius: var(--radius); overflow-x: auto; max-height: 30rem; }

@media (max-width: 600px) {
  h1 { font-size: 1.3rem; }
  main { padding-top: 1rem; }
  .abmelden { width: 100%; justify-content: space-between; }
  textarea.json { min-height: 20rem; font-size: 0.8rem; }
}

.feldfehler { color: var(--gefahr); font-weight: 400; font-size: 0.9rem; }
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.9rem; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: var(--flaeche-2); color: var(--text); }
.hinweis-warn { padding: 0.6rem 0.8rem; border-radius: var(--radius); margin: 0 0 1rem; border: 1px solid var(--warn); background: var(--warn-hell); color: var(--warn); }
.formular.breit { max-width: none; }
details.karte > summary { cursor: pointer; font-weight: 600; }
details.karte pre.json { margin: 0.75rem 0 0; }

/* Nachgemessen im Rauchtest (390 / 1280 px) */
.karte > h2:first-child { margin-top: 0; }
.formular .feld > label { display: block; }
td code { white-space: nowrap; overflow-wrap: normal; }
td select { width: auto; min-width: 9rem; }
table.diff { min-width: 40rem; }

/* ---------------------------------------------------------------- Struktur-Reiter (Plan 1c) */

/* Enter in einem Feld löst den ERSTEN Absendeknopf aus -- das soll Speichern sein,
   nicht „Entfernen“ der ersten Zeile. Der Knopf ist unsichtbar, aber nicht display:none. */
.standardknopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular.struktur { max-width: 52rem; position: relative; }
fieldset.zeilen, fieldset.bedingung {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.75rem; margin: 0;
  min-width: 0; display: grid; gap: 0.75rem; background: var(--flaeche);
}
fieldset.zeilen > legend, fieldset.bedingung > legend { font-weight: 600; padding: 0 0.3rem; }
fieldset.bedingung { background: var(--flaeche-2); gap: 0.5rem; }
.zeile {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end;
  padding: 0.6rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--grund);
}
.zeile-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem 0.75rem; flex: 1 1 24rem; min-width: 0; }
.zeile-felder .breit { grid-column: 1 / -1; }
.zeile > .knopf-entfernen { flex: 0 0 auto; }
.knopf-entfernen { color: var(--gefahr); }
.teile { display: grid; gap: 0.5rem; }
.teil { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.teil select { flex: 1 1 12rem; width: auto; min-width: 0; }
.teil .zahlfeld { flex: 0 1 8rem; width: 8rem; }
.teil .feldfehler { flex: 1 0 100%; }
fieldset.bedingung > select { max-width: 16rem; }
pre.json.klein { font-size: 0.8rem; max-height: 12rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
[aria-invalid="true"] { border-color: var(--gefahr); }
.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
/* Das Befund-Raster scrollt am Telefon in sich (tabelle-wrap); die Befundspalte bleibt stehen. */
table.raster { width: auto; min-width: 100%; }
table.raster th, table.raster td { padding: 0.35rem 0.45rem; }
table.raster thead th { vertical-align: bottom; white-space: normal; min-width: 9rem; background: var(--flaeche-2); }
table.raster thead th .knopf-klein { margin-top: 0.3rem; }
table.raster tbody th { position: sticky; left: 0; background: var(--flaeche); color: var(--text); font-size: 0.9rem;
  white-space: normal; min-width: 8rem; max-width: 12rem; z-index: 1; }
table.raster td select, table.raster td input { width: 100%; min-width: 7rem; }
table.raster thead th:first-child { position: sticky; left: 0; z-index: 2; }
.kennung-feld { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; }
.marke-start { color: var(--ok); background: var(--ok-hell); border-color: var(--ok); }
form.knoten-neu { margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rand); }
form.knoten-neu h3 { margin: 0; }
.knoten-teil { display: grid; gap: 0.75rem; }
.knoten-teil > h2 { margin: 0.75rem 0 0; }
.effekte { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
[data-nur-art][hidden] { display: none !important; }
.art-gruppe { display: grid; gap: 0.9rem; }

/* ---------------------------------------------------------------- Ablaufdiagramm (SVG) */
.diagramm-wrap { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); max-height: 80vh; }
svg.diagramm { display: block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
svg.diagramm .kante { fill: none; stroke: var(--text-leise); stroke-width: 1.5; }
svg.diagramm .kante-richtig { stroke: var(--ok); }
svg.diagramm .kante-falsch { stroke: var(--gefahr); stroke-dasharray: 5 3; }
svg.diagramm .kante-notfall { stroke: var(--warn); }
svg.diagramm .pfeilspitze { fill: var(--text-leise); }
svg.diagramm .kanten-text { font-size: 11px; fill: var(--text-leise); paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; }
svg.diagramm .kasten rect { fill: var(--flaeche-2); stroke: var(--rand); stroke-width: 1.5; }
svg.diagramm .kasten-start rect { stroke: var(--ok); stroke-width: 3; }
svg.diagramm .kasten-funk rect { fill: var(--akzent-hell); stroke: var(--akzent); }
svg.diagramm .kasten-ende rect { fill: var(--ok-hell); stroke: var(--ok); }
svg.diagramm .kasten-notfall rect { fill: var(--warn-hell); stroke: var(--warn); }
svg.diagramm .kasten-fehlt rect, svg.diagramm .kasten-weg rect { fill: var(--gefahr-hell); stroke: var(--gefahr); stroke-dasharray: 4 3; }
svg.diagramm .kasten-titel { font-size: 13px; font-weight: 700; fill: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }
svg.diagramm .kasten-text { font-size: 11px; fill: var(--text-leise); }
svg.diagramm a:hover rect, svg.diagramm a:focus rect { stroke: var(--akzent); stroke-width: 3; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--text-leise); }
.muster { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; vertical-align: -0.1rem; border: 2px solid var(--rand); background: var(--flaeche-2); }
.muster-start { border-color: var(--ok); }
.muster-funk { background: var(--akzent-hell); border-color: var(--akzent); }
.muster-ende { background: var(--ok-hell); border-color: var(--ok); }
.muster-notfall { background: var(--warn-hell); border-color: var(--warn); }
.muster-weg { background: var(--gefahr-hell); border-color: var(--gefahr); border-style: dashed; }
.befund-ziel { margin-left: 0.35rem; white-space: nowrap; font-size: 0.9rem; }
/* Nach den Bildern (Rauchtest Plan 1c): Felder in Rastern nicht auf Zeilenhöhe strecken,
   Zeilenknöpfe so breit wie ihr Text. */
.zeile-felder > .feld, .feldgruppe > .feld, .zeile-felder > div > .feld { align-content: start; align-self: start; }
fieldset.zeilen > button, fieldset.bedingung > button, fieldset.zeilen > div > button { justify-self: start; }
button[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }

/* Plan 1d: ein Name aus den Rohdaten, der nicht als Adresse taugt (Knotenliste) */
.hinweis-klein { display: block; color: var(--warn); font-size: 0.85rem; }

/* ---------------------------------------------------------------- Probespielen (Plan 1d) */

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.probe-einstellung { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 0 0 1rem; }
.probe-einstellung .feld { flex: 0 1 22rem; min-width: 0; }
.probe-einstellung select { width: 100%; }
.probespiel { display: grid; gap: 0; }
.probe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  position: sticky; top: 0; z-index: 1; background: var(--grund); padding: 0.4rem 0; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rand); }
.probe-kopf p { margin: 0; }
.probe-zeit { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.probespiel dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.25rem 1rem; margin: 0; }
.probespiel dt { font-weight: 600; overflow-wrap: anywhere; }
.probespiel dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.probe-gruppe { border: 0; padding: 0; margin: 0 0 0.9rem; min-width: 0; }
.probe-gruppe legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.probe-knoepfe, .probe-antworten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; }
.probe-massnahme, .probe-antwort { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; min-height: var(--tippziel); white-space: normal; overflow-wrap: anywhere; }
.probe-dauer { font-size: 0.85rem; color: var(--text-leise); font-weight: 400; }
.probe-massnahme[disabled] .probe-dauer { color: var(--warn); }
.probe-erledigt { border-color: var(--ok); }
.probe-weitere { margin-top: 0.5rem; }
.probe-ereignisse { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.probe-ereignis { border-left: 3px solid var(--rand); padding: 0.15rem 0 0.15rem 0.6rem; overflow-wrap: anywhere; }
.probe-ereignis ul { margin: 0.2rem 0 0; padding-left: 1.2rem; color: var(--text-leise); }
.probe-art-fehler { border-left-color: var(--gefahr); color: var(--gefahr); }
.probe-art-zustand { border-left-color: var(--akzent); }
.probe-art-messung { border-left-color: var(--ok); }
.probe-uhr { font-variant-numeric: tabular-nums; color: var(--text-leise); }
.probe-liste { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.25rem; }
.probe-ja { color: var(--ok); font-weight: 700; }
.probe-nein { color: var(--gefahr); font-weight: 700; }
.probe-ergebnis { display: inline-block; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: var(--radius); margin: 0 0 0.5rem; }
.probe-bestanden { background: var(--ok-hell); color: var(--ok); }
.probe-durchgefallen { background: var(--gefahr-hell); color: var(--gefahr); }
.probe-plus, .probe-minus { color: var(--text-leise); }   /* ob mehr gut ist, haengt am Wert -- keine Wertung */
.probe-knotentext { font-size: 1.05rem; }
.probe-knoten > p:first-child { margin-top: 0; }
.probe-funk { border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.6rem 0.8rem; margin: 0; min-width: 0; }
.probe-funk .checkbox-zeile { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tippziel); }
.probe-funk input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.probe-abzweig { border-color: var(--warn); background: var(--warn-hell); }
.probe-nicht-spielbar { border-color: var(--gefahr); }
.probe-pruefbefunde > summary { cursor: pointer; font-weight: 600; }
.probe-pruefbefunde .befunde { margin: 0.5rem 0; color: var(--text); overflow-wrap: anywhere; }
.probe-pruefbefunde p { margin: 0; }