/* Tiedwark Labor – Gestaltung nach ISA-101 (High-Performance-HMI)
   Grundsätze: graue, ruhige Grundfläche; Text dunkel; keine Verläufe/3D;
   Farbe ausschließlich für Zustände mit Handlungsbedarf (rot = Fehler,
   gelb/amber = Warnung/Einschränkung), immer redundant mit Form/Text codiert.
   Blau nur für Auswahl/Bedienfokus. Ergebnisse: schwarz und fett. */

:root {
  --grund: #d6d6d6;          /* Bildschirmhintergrund */
  --flaeche: #e4e4e4;        /* Paneele */
  --flaeche-hell: #ededed;   /* Eingabefelder, Knoten */
  --flaeche-dunkel: #c8c8c8;
  --linie: #a6a6a6;
  --linie-dunkel: #6e6e6e;
  --text: #1c1c1c;
  --text-mittel: #4a4a4a;
  --text-schwach: #7a7a7a;
  --ergebnis: #000000;
  --auswahl: #2f5f9e;
  --auswahl-hell: #c9d6e8;
  --fehler: #c8102e;
  --warnung: #e2a400;
  --warnung-text: #5a4100;
  --schrift: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "DejaVu Sans Mono", monospace;
  --ergebnis-hoehe: 38vh;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--grund); color: var(--text);
  font: 13px/1.4 var(--schrift); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mittel);
  margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 13px; margin: 12px 0 6px; }
[hidden] { display: none !important; }

button { background: var(--flaeche-hell); border: 1px solid var(--linie); border-radius: 2px;
  padding: 4px 10px; cursor: pointer; }
button:hover { border-color: var(--linie-dunkel); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--auswahl); outline-offset: 1px; }
button.primaer { background: #505050; color: #fff; border-color: #404040; }
button.primaer:hover { background: #3a3a3a; }
button:disabled { color: var(--text-schwach); cursor: default; border-color: var(--linie); }
button.aktiv { background: var(--text-mittel); color: #fff; border-color: var(--text-mittel); }
input[type=text], input[type=number], select, textarea, input:not([type]) {
  background: var(--flaeche-hell); border: 1px solid var(--linie); border-radius: 2px; padding: 3px 6px; width: 100%; }
input[type=number] { text-align: right; }

#app { display: grid; height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px 28px 1fr var(--ergebnis-hoehe); }

/* Kopfzeile */
.kopf { display: flex; align-items: center; gap: 12px; padding: 0 10px; background: var(--flaeche);
  border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; letter-spacing: .02em; padding-right: 8px; border-right: 1px solid var(--linie); }
.marke-zusatz { font-weight: 400; color: var(--text-mittel); }
.modellname { width: 260px !important; background: transparent !important; border-color: transparent !important; font-weight: 600; }
.modellname:hover, .modellname:focus { border-color: var(--linie) !important; background: var(--flaeche-hell) !important; }
.kopf-gruppe { display: flex; gap: 4px; }
.kopf-rechts { margin-left: auto; }
.ausklapp { position: relative; }
.menue { position: absolute; top: 30px; left: 0; z-index: 20; width: 360px; background: var(--flaeche-hell);
  border: 1px solid var(--linie-dunkel); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.menue button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--flaeche-dunkel);
  border-radius: 0; padding: 8px 10px; background: transparent; }
.menue button:hover { background: var(--auswahl-hell); }
.menue small { display: block; color: var(--text-mittel); }

/* Meldezeile */
.meldezeile { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--flaeche-dunkel);
  border-bottom: 1px solid var(--linie); cursor: pointer; white-space: nowrap; overflow: hidden; }
.meldezeile .text { overflow: hidden; text-overflow: ellipsis; }
.meldezeile.fehler { background: #f3d6da; }
.meldezeile.warnung { background: #f4e6bf; }

/* Zustandssymbole: Form + Farbe (redundant) */
.sym { display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px; position: relative; }
.sym.fehler { background: var(--fehler); }                                 /* Quadrat */
.sym.fehler::after { content: "!"; position: absolute; inset: 0; color: #fff; font: 700 11px/14px var(--schrift); text-align: center; }
.sym.warnung { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid var(--warnung); }                              /* Dreieck */
.sym.warnung::after { content: "!"; position: absolute; left: -2px; top: 2px; color: #000; font: 700 10px/12px var(--schrift); }
.sym.ok { border: 2px solid var(--linie-dunkel); border-radius: 50%; width: 12px; height: 12px; }  /* Kreis, neutral */
.sym.nicht { border: 1px dashed var(--linie); border-radius: 50%; width: 12px; height: 12px; }
.sym.info { border: 1px solid var(--linie-dunkel); border-radius: 50%; width: 14px; height: 14px; }
.sym.info::after { content: "i"; position: absolute; inset: 0; text-align: center; font: italic 700 10px/12px Georgia, serif; color: var(--text-mittel); }
.muster { display: inline-block; width: 10px; height: 10px; vertical-align: 0; }
.muster.fehler { background: var(--fehler); } .muster.warnung { background: var(--warnung); }

/* Arbeitsfläche */
.arbeitsflaeche { display: grid; grid-template-columns: 290px minmax(0, 1fr) 370px; min-height: 0; }
.links, .rechts { background: var(--flaeche); overflow-y: auto; min-height: 0; }
.links { border-right: 1px solid var(--linie); }
.rechts { border-left: 1px solid var(--linie); display: flex; flex-direction: column; }
.block { padding: 10px 12px; border-bottom: 1px solid var(--flaeche-dunkel); }
.tipp { margin: 8px 0 0; color: var(--text-mittel); font-size: 12px; }

/* Eigenschaften */
.feld { display: grid; grid-template-columns: 112px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.feld > label { color: var(--text-mittel); font-size: 12px; }
.feld .einheit { color: var(--text-schwach); font-size: 11px; }
.feld-gruppe { border-top: 1px solid var(--flaeche-dunkel); margin-top: 10px; padding-top: 8px; }
.feld-gruppe > .titel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mittel); margin-bottom: 6px; }
.erklaerung { font-size: 11px; color: var(--text-mittel); margin: -2px 0 8px 118px; }
.lesewert { font-family: var(--mono); font-size: 12px; }
.segment { display: flex; }
.segment button { flex: 1; border-radius: 0; margin-left: -1px; padding: 3px 4px; }
.segment button:first-child { border-radius: 2px 0 0 2px; margin-left: 0; }
.segment button:last-child { border-radius: 0 2px 2px 0; }
.knopfzeile { display: flex; gap: 6px; margin-top: 10px; }

/* Mitte */
.mitte { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.zeichen-leiste { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--flaeche);
  border-bottom: 1px solid var(--linie); }
.zeichen-leiste .trenner { width: 1px; height: 20px; background: var(--linie); margin: 0 4px; }
.schalter { display: inline-flex; align-items: center; gap: 4px; user-select: none; color: var(--text-mittel); }
.overlay-name { color: var(--text-mittel); font-size: 12px; }
.zoom { margin-left: auto; color: var(--text-schwach); font-size: 12px; }
.grafik { position: relative; flex: 1; min-height: 0; }
#leinwand { width: 100%; height: 100%; display: block; background: var(--grund); outline: none; }
.leer-hinweis { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center;
  background: var(--flaeche); border: 1px solid var(--linie); padding: 16px 24px; max-width: 420px; }
.leer-hinweis h3 { margin-top: 0; }

/* Blockdiagramm (SVG) */
.block .rumpf { fill: var(--flaeche-hell); stroke: var(--linie-dunkel); stroke-width: 1.2; }
.block.start .rumpf, .block.ende .rumpf, .block .port-block { fill: var(--flaeche-dunkel); }
.block .rumpf.balken { fill: #4a4a4a; stroke: #3a3a3a; }
.block .innen { fill: none; stroke: var(--linie-dunkel); stroke-width: 1; }
.block .subsystem-innen { fill: none; stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 2; }
.block .symbol-voll { fill: var(--linie-dunkel); }
.block text { fill: var(--text); font-size: 13px; pointer-events: none; user-select: none; }
.block text.klein, .block text.unter, .block text.port-text { fill: var(--text-mittel); font-size: 11px; }
.block text.logik-text { font-size: 16px; font-weight: 700; fill: var(--text); }
.block text.ergebnis-text { fill: var(--ergebnis); font-size: 11px; font-weight: 600; }
.block .logik rect { fill: var(--grund); stroke: var(--linie-dunkel); stroke-width: 1; }
.block .logik text { font-size: 10px; font-weight: 700; fill: var(--text-mittel); }
.block .port { fill: none; stroke: var(--linie-dunkel); stroke-width: 1.3; }
.block .port.aus { cursor: crosshair; }
.block .port-treffer { fill: transparent; cursor: crosshair; }
.block .port-aus:hover .port { stroke: var(--auswahl); stroke-width: 2.2; }
.block { cursor: move; }
.block.gewaehlt .rumpf { stroke: var(--auswahl); stroke-width: 2.5; }
.block.ziel .rumpf { stroke: var(--auswahl); stroke-width: 2.5; stroke-dasharray: 4 2; }
.block.markiert .rumpf { stroke: var(--ergebnis); stroke-width: 3; }
.block.markiert text.name { font-weight: 700; }
.block.problem-fehler .rumpf { stroke: var(--fehler); stroke-width: 2.5; stroke-dasharray: 5 3; }
.block.problem-warnung .rumpf { stroke: var(--warnung); stroke-width: 2.5; stroke-dasharray: 5 3; }
.kante path.linie { fill: none; stroke: #5a5a5a; stroke-width: 1.4; }
.kante path.treffer { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.kante.gewaehlt path.linie { stroke: var(--auswahl); stroke-width: 2.5; }
.kante.markiert path.linie { stroke: var(--ergebnis); stroke-width: 3; }
.kante.rueck path.linie { stroke-dasharray: 6 3; }
.kante text { font-size: 11px; fill: var(--text-mittel); paint-order: stroke; stroke: var(--grund); stroke-width: 3px; pointer-events: none; }
.kante text.ergebnis-text { fill: var(--ergebnis); font-weight: 600; }
.ziehlinie { stroke: var(--auswahl); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; pointer-events: none; }
.rahmen { fill: rgba(47, 95, 158, .08); stroke: var(--auswahl); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
#leinwand.schwenken { cursor: grab; }

/* Bibliothek */
.bibliothek input[type=search] { margin-bottom: 6px; }
.bib-gruppe { font-size: 11px; color: var(--text-mittel); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.bib-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bib-teil { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; font-size: 11px; cursor: grab; user-select: none; }
.bib-teil:hover { background: var(--auswahl-hell); }
.bib-symbol { width: 40px; height: 22px; }
.bib-geist { position: fixed; z-index: 60; pointer-events: none; background: var(--flaeche-hell); border: 1.5px dashed var(--auswahl); padding: 6px 12px; font-size: 12px; }

/* Pfad (Ebenen) und Schnellsuche */
.pfad { display: flex; align-items: center; gap: 2px; }
.pfad button { border: 0; background: transparent; padding: 3px 6px; }
.pfad button.aktiv { font-weight: 700; background: transparent; color: var(--text); }
.pfad button:not(.aktiv) { color: var(--auswahl); text-decoration: underline; }
.pfad .pfeil { color: var(--text-schwach); }
.schnellsuche { position: absolute; z-index: 30; width: 250px; background: var(--flaeche-hell); border: 1px solid var(--linie-dunkel); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.schnellsuche input { border: 0 !important; border-bottom: 1px solid var(--linie) !important; padding: 6px 8px !important; }
.schnellsuche .treffer button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; padding: 5px 8px; }
.schnellsuche .treffer button.erster, .schnellsuche .treffer button:hover { background: var(--auswahl-hell); }
.schnellsuche small { display: block; color: var(--text-mittel); font-size: 11px; }

/* Tabellenansicht */
.tabellen-ansicht { flex: 1; overflow: auto; padding: 10px; }
table.daten { border-collapse: collapse; background: var(--flaeche-hell); }
table.daten th, table.daten td { border: 1px solid var(--linie); padding: 3px 6px; text-align: left; }
table.daten th { background: var(--flaeche-dunkel); font-weight: 600; font-size: 12px; position: sticky; top: 0; }
table.daten td.zahl, table.daten th.zahl { text-align: right; }
table.daten tr.betont td { font-weight: 700; color: var(--ergebnis); }
table.daten input, table.daten select { border: 0; background: transparent; padding: 2px; min-width: 50px; }
table.daten select { min-width: 96px; }
table.daten input:focus, table.daten select:focus { background: #fff; }
.tabellen-ansicht .knopfzeile { margin: 10px 0; }

/* Lösungen */
.loesungen-kopf .zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zaehler { margin-top: 6px; color: var(--text-mittel); font-size: 12px; }
.loesungen { overflow-y: auto; flex: 1; }
.frage { padding: 8px 12px 4px; font-weight: 600; color: var(--text); border-top: 1px solid var(--flaeche-dunkel);
  background: var(--flaeche-dunkel); font-size: 12px; }
.methode { border-bottom: 1px solid var(--flaeche-dunkel); }
.methode-kopf { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 7px 12px;
  cursor: pointer; }
.methode-kopf:hover { background: var(--flaeche-hell); }
.methode-kopf .name { font-weight: 600; }
.methode-kopf .kurz { color: var(--text-mittel); font-size: 12px; }
.methode.nicht .name, .methode.nicht .kurz { color: var(--text-schwach); }
.methode.offen .methode-kopf { background: var(--flaeche-hell); }
.methode-koerper { padding: 4px 12px 10px 38px; background: var(--flaeche-hell); }
.methode-koerper p { margin: 0 0 6px; }
.methode-koerper .meta { font-size: 11px; color: var(--text-mittel); }
.grund { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; margin: 4px 0; }
.grund.hinweis { color: var(--text-mittel); }
.lauf { font-size: 11px; color: var(--text-mittel); }

/* Ergebnisse */
.ergebnisse { background: var(--flaeche); border-top: 1px solid var(--linie-dunkel); display: flex; flex-direction: column; min-height: 0; position: relative; }
.ergebnis-griff { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 5; }
.reiter-leiste { display: flex; gap: 2px; padding: 4px 8px 0; background: var(--flaeche-dunkel); overflow-x: auto; flex: none; }
.reiter { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--flaeche-dunkel);
  border: 1px solid var(--linie); border-bottom: 0; cursor: pointer; white-space: nowrap; font-size: 12px; }
.reiter.aktiv { background: var(--flaeche); font-weight: 600; }
.reiter .zu { border: 0; background: transparent; padding: 0 2px; color: var(--text-mittel); }
.ergebnis-inhalt { overflow: auto; padding: 10px 14px 20px; flex: 1; }
.ergebnis-inhalt .leer { color: var(--text-mittel); }
.ergebnis-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ergebnis-kopf h3 { margin: 0; font-size: 15px; }
.ergebnis-kopf .meta { color: var(--text-mittel); font-size: 12px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.kennzahl { background: var(--flaeche-hell); border: 1px solid var(--linie); padding: 6px 10px; min-width: 130px; }
.kennzahl .k-name { font-size: 11px; color: var(--text-mittel); }
.kennzahl .k-wert { font-size: 18px; font-weight: 600; }
.kennzahl .k-einheit { font-size: 11px; color: var(--text-mittel); margin-left: 3px; }
.meldung { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; margin: 4px 0; background: var(--flaeche-hell);
  border-left: 4px solid var(--linie); }
.meldung.fehler { border-left-color: var(--fehler); }
.meldung.warnung { border-left-color: var(--warnung); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.karte { background: var(--flaeche-hell); border: 1px solid var(--linie); padding: 8px 10px; overflow-x: auto; }
.karte h4 { margin: 0 0 6px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.karte h4 button { font-size: 11px; padding: 1px 6px; font-weight: 400; }
.karte table.daten { width: 100%; font-size: 12px; }
details.formeln { margin-top: 12px; }
details.formeln summary { cursor: pointer; color: var(--text-mittel); }
pre.formel { font-family: var(--mono); font-size: 12px; background: var(--flaeche-hell); border: 1px solid var(--linie);
  padding: 8px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 8px; }

/* Diagramme */
svg.diagramm { width: 100%; height: 230px; display: block; }
svg.diagramm .achse line, svg.diagramm .achse path { stroke: var(--linie-dunkel); stroke-width: 1; fill: none; }
svg.diagramm .gitter line { stroke: var(--flaeche-dunkel); stroke-width: 1; }
svg.diagramm text { font-size: 10px; fill: var(--text-mittel); }
svg.diagramm .serie { fill: none; stroke-width: 1.5; }
svg.diagramm .referenz line { stroke: var(--auswahl); stroke-dasharray: 4 3; stroke-width: 1.2; }
svg.diagramm .referenz text { fill: var(--auswahl); }
svg.diagramm .fadenkreuz line { stroke: var(--linie-dunkel); stroke-dasharray: 2 2; }
.legende { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text-mittel); margin-top: 2px; }
.legende span { display: inline-flex; align-items: center; gap: 4px; }
.legende svg { width: 22px; height: 8px; }
.tooltip { position: fixed; pointer-events: none; background: var(--flaeche-hell); border: 1px solid var(--linie-dunkel);
  padding: 4px 6px; font-size: 11px; z-index: 50; white-space: nowrap; }

/* Dialog */
.dialog { position: fixed; inset: 0; background: rgba(40,40,40,.35); display: flex; align-items: center; justify-content: center; z-index: 40; }
.dialog-inhalt { background: var(--flaeche); border: 1px solid var(--linie-dunkel); padding: 16px 22px; max-width: 640px; max-height: 85vh; overflow: auto; }
.dialog-inhalt h2 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }
table.einfach td { padding: 2px 10px 2px 0; vertical-align: top; }
table.einfach td:first-child { font-weight: 600; white-space: nowrap; }
.rechts-ausrichten { text-align: right; margin-top: 12px; }

/* Schmale Bildschirme: Spalten untereinander */
@media (max-width: 1100px) {
  #app { grid-template-rows: auto 28px auto auto; height: auto; }
  .arbeitsflaeche { grid-template-columns: 1fr; }
  .mitte { order: -1; }
  .grafik { flex: none; height: 60vh; }
  .tabellen-ansicht { flex: none; max-height: 70vh; }
  .kopf { flex-wrap: wrap; padding: 6px 10px; }
  .ergebnisse { min-height: 50vh; }
}

/* Seiten für Anmeldung, Konto, Verwaltung */
body.seite { display: block; min-height: 100vh; }
body.seite .kopf { height: 40px; }
a { color: var(--auswahl); }
a.marke { color: var(--text); text-decoration: none; }
a.knopf { display: inline-block; background: var(--flaeche-hell); border: 1px solid var(--linie); border-radius: 2px;
  padding: 4px 10px; color: var(--text); text-decoration: none; }
.nutzername { color: var(--text-mittel); margin-right: 6px; }
.kopf-rechts { display: flex; align-items: center; gap: 6px; }
.seiten-inhalt { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.seiten-inhalt.schmal { max-width: 440px; }
.seiten-inhalt h1 { font-size: 18px; margin: 0 0 12px; }
.seiten-inhalt .karte { margin-bottom: 14px; padding: 14px 16px; }
.formular label { display: block; margin-bottom: 10px; color: var(--text-mittel); font-size: 12px; }
.formular label input, .formular label select { margin-top: 3px; font-size: 14px; padding: 6px 8px; color: var(--text); }
.formular button { margin-top: 4px; }
.mitte-text { text-align: center; }
table.daten.breit { width: 100%; }
table.daten tr.gesperrt td { color: var(--text-mittel); }
td.aktionen { white-space: nowrap; }
td.aktionen form { display: inline; }
td.aktionen button { font-size: 11px; padding: 2px 6px; }
.meldung .sym { margin-top: 1px; }

/* Ergänzungen Editor v2 */
.speicher-status { color: var(--text-mittel); font-size: 12px; white-space: nowrap; }
.menue.schmal { width: 230px; }
.menue.rechtsbuendig { left: auto; right: 0; }
.menue a { display: block; padding: 8px 10px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--flaeche-dunkel); }
.menue a:hover { background: var(--auswahl-hell); }
.menue form button { display: block; width: 100%; }
.mit-einheit { display: flex; gap: 4px; align-items: center; }
.meldezeile.hinweis { background: var(--auswahl-hell); }
.reiter.veraltet span { font-style: italic; color: var(--text-schwach); }
.vergleich-raster { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
.abstand-links { margin-left: 8px; }
.block-dialog { width: 420px; }
.block-dialog .feld { grid-template-columns: 120px 1fr; }
.zeile-eingabe { display: flex; gap: 6px; }
#modellDialog .dialog-inhalt { width: 620px; }
.formular label input, .formular label select { display: block; width: 100%; }
.karte.schmal { max-width: 440px; }
.block .rumpf.wahl { stroke-width: 2.2; stroke-dasharray: none; }
.muster.dunkel { background: #4a4a4a; } .muster.hell { background: #a6a6a6; }
svg.diagramm .gitter-linie { stroke: var(--flaeche-dunkel); stroke-width: 1; }
svg.diagramm .balken-text { font-size: 10px; }

/* ---------------------------------------------------------------- Optimierung */
.opt-links { display: none; }
body.modus-opt .bibliothek, body.modus-opt #eigenschaften { display: none; }
body.modus-opt .opt-links { display: block; }
.opt-ansicht { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--grund); }
.opt-editor, .opt-vorschau-rahmen { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.opt-vorschau-rahmen { border-left: 1px solid var(--linie); background: var(--flaeche-hell); }
.opt-titel { padding: 5px 10px; background: var(--flaeche); border-bottom: 1px solid var(--linie); font-size: 12px; color: var(--text-mittel); }
.opt-feld { flex: 1; min-height: 0; display: flex; background: #f4f4f4; }
.opt-zeilen { width: 40px; overflow: hidden; padding: 8px 6px 8px 0; text-align: right; color: var(--text-schwach);
  font: 13px/20px var(--mono); background: var(--flaeche); border-right: 1px solid var(--flaeche-dunkel); user-select: none; }
.opt-zeilen .fehler { color: #fff; background: var(--fehler); font-weight: 700; }
#optText { flex: 1; resize: none; border: 0; outline: none; padding: 8px 10px; font: 13px/20px var(--mono);
  background: transparent; white-space: pre; overflow: auto; tab-size: 4; }
.opt-vorschau { flex: 1; overflow: auto; padding: 10px 14px; }
.opt-vorschau .katex-display { text-align: left; margin: 0.5em 0; }
.opt-vorschau .katex-display > .katex { text-align: left; }
.opt-beispiele { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.opt-beispiel { text-align: left; display: flex; flex-direction: column; padding: 5px 8px; }
.opt-beispiel small { color: var(--text-mittel); font-size: 11px; }
table.syntax td { vertical-align: top; padding: 2px 4px; font-size: 11px; }
table.syntax code { font: 11px var(--mono); cursor: copy; white-space: nowrap; }
table.syntax code:hover { background: var(--auswahl-hell); }
.formel-tex { overflow-x: auto; padding: 4px 0 10px; }
.formel-tex .katex-display { margin: 0.4em 0; text-align: left; }
.formel-tex .katex-display > .katex { text-align: left; }
.export-knoepfe { margin-left: auto; display: inline-flex; gap: 4px; }
textarea.code { width: 100%; font: 12px/18px var(--mono); background: #f4f4f4; border: 1px solid var(--linie); padding: 6px; white-space: pre; tab-size: 4; }
.feld.breit { display: block; }
.feld.breit > label { display: block; margin-bottom: 3px; }
.baum-rahmen { overflow-x: auto; }
.diagramm.baum text { font-size: 11px; }
.diagramm.baum .baum-regel { font-size: 9px; fill: var(--text-mittel); }
@media (max-width: 1100px) { .opt-ansicht { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .opt-vorschau-rahmen { border-left: 0; border-top: 1px solid var(--linie); } }

/* Rechtliches, Fußzeile */
.fuss { text-align: center; padding: 16px; font-size: 12px; color: var(--text-mittel); }
.fuss a, .kopf-link { color: var(--text-mittel); }
.kopf-link { font-size: 12px; margin-right: 8px; }
.rechtstext h1 { font-size: 20px; } .rechtstext h2 { font-size: 15px; margin-top: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.rechtstext p, .rechtstext li { max-width: 72ch; }
.abzeichen { font-size: 11px; padding: 1px 6px; border: 1px solid var(--linie); border-radius: 2px; color: var(--text-mittel); font-weight: 400; }
.abzeichen.warnung { background: var(--warnung); color: #000; border-color: var(--warnung); }
button.gefahr { background: var(--fehler); color: #fff; border-color: #8f0b21; }