/* Leitung im Zeitbereich (AFU-373, /leitung). Eigene le-Klassen, Aufbau wie /ausbreitung, Farben aus den Variablen von style.css. */

:root {
  --le-summe: #fbbf24;
  --le-hin: #6aa6ff;
  --le-rueck: #f87171;
  --le-huelle: rgba(52, 211, 153, 0.16);
  --le-huelle-rand: #34d399;
  --le-k1: #6aa6ff;
  --le-k2: #a78bfa;
  --le-k3: #f59e0b;
  --le-k4: #34d399;
  --le-netz: rgba(138, 147, 179, 0.24);
  --le-null: rgba(138, 147, 179, 0.6);
  --le-stoss: rgba(248, 250, 252, 0.45);
  --le-tdr: #fbbf24;
  --le-gut: #34d399;
  --le-schlecht: #f87171;
}
@media (prefers-color-scheme: light) {
  :root {
    --le-summe: #b45309;
    --le-hin: #2f6fed;
    --le-rueck: #dc2626;
    --le-huelle: rgba(5, 150, 105, 0.14);
    --le-huelle-rand: #047857;
    --le-k1: #2f6fed;
    --le-k2: #7c5cff;
    --le-k3: #c27c0e;
    --le-k4: #047857;
    --le-netz: rgba(70, 82, 110, 0.2);
    --le-null: rgba(70, 82, 110, 0.55);
    --le-stoss: rgba(17, 24, 39, 0.4);
    --le-tdr: #b45309;
    --le-gut: #047857;
    --le-schlecht: #dc2626;
  }
}

.le-rahmen { padding-top: 0.4rem; padding-bottom: 2.5rem; }

/* Bühne: links Leitung und TDR, rechts Leitung, Quelle, Werte, Smith, Vorlagen. */
.le-buehne {
  display: grid; gap: 0.7rem;
  grid-template-columns: minmax(0, 2.1fr) minmax(23rem, 1fr);
  align-items: start;
}
.le-links, .le-rechts { display: grid; gap: 0.7rem; min-width: 0; align-items: start; }
@media (max-width: 1000px) {
  .le-buehne { grid-template-columns: minmax(0, 1fr); }
}
/* AFU-362: ab 1800 px rechts zwei Spalten */
@media (min-width: 1800px) {
  :root:not([data-breite="begrenzt"]) .le-buehne { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr); }
  :root:not([data-breite="begrenzt"]) .le-rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:not([data-breite="begrenzt"]) .le-rechts > .le-kasten-breit { grid-column: 1 / -1; }
}

/* Kästen */
.le-kasten {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0; overflow: hidden;
}
.le-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
  min-height: 2rem; padding: 0.15rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.le-titel { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.le-luft { flex: 1 1 auto; }
.le-haken { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.le-haken input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.le-tempo input { width: 5.5rem; accent-color: var(--accent); }
.le-zeit { font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.le-inhalt { padding: 0.55rem 0.7rem; }
.le-seg button { padding: 0.1rem 0.55rem; font-size: 0.8rem; min-height: 1.75rem; white-space: nowrap; }
#le-buehne .btn-sm { min-height: 1.75rem; padding: 0.1rem 0.6rem; font-size: 0.8rem; }
select.le-klein { height: 1.75rem; padding: 0 0.3rem; font-size: 0.82rem; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; width: 5.2rem; }
.le-signal { margin-bottom: 0.55rem; }

/* Bilder */
.le-plot { padding: 0.3rem 0.4rem 0; }
#le-svg, #le-tdr { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#le-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
#le-tdr { cursor: pointer; }
.le-flaeche { fill: var(--bg2); }
.le-netz { stroke: var(--le-netz); stroke-width: 0.7; }
.le-null { stroke: var(--le-null); stroke-width: 1; }
.le-achse { fill: var(--muted); font-size: 10.5px; }
.le-stueck { stroke: none; }
.le-k1 { fill: var(--le-k1); } .le-k2 { fill: var(--le-k2); } .le-k3 { fill: var(--le-k3); } .le-k4 { fill: var(--le-k4); }
.le-stueck-text { fill: var(--fg); font-size: 10.5px; }
.le-stoss { stroke: var(--le-stoss); stroke-width: 1; stroke-dasharray: 3 3; }
.le-stoss-text { fill: var(--fg); font-size: 10.5px; font-weight: 600; }
.le-ende-linie { stroke: var(--fg); stroke-width: 1.4; }
.le-last { fill: none; stroke: var(--fg); stroke-width: 1.4; }
.le-last-text { fill: var(--fg); font-size: 10.5px; font-weight: 600; }
.le-summe { fill: none; stroke: var(--le-summe); stroke-width: 2.4; stroke-linejoin: round; }
.le-hin { fill: none; stroke: var(--le-hin); stroke-width: 1.3; stroke-dasharray: 6 4; }
.le-rueck { fill: none; stroke: var(--le-rueck); stroke-width: 1.3; stroke-dasharray: 6 4; }
.le-huelle { fill: var(--le-huelle); stroke: none; }
.le-huelle-rand { fill: none; stroke: var(--le-huelle-rand); stroke-width: 1.2; }
.le-maus { stroke: var(--muted); stroke-width: 0.8; pointer-events: none; }
.le-tdr { fill: none; stroke: var(--le-tdr); stroke-width: 2.2; stroke-linejoin: round; }
.le-tdr-blass { fill: none; stroke: var(--le-tdr); stroke-width: 1.2; opacity: 0.3; }
.le-jetzt { stroke: var(--accent); stroke-width: 1.4; }
.le-ereignis { stroke: var(--le-stoss); stroke-width: 1; stroke-dasharray: 2 3; }
.le-ereignis-text { fill: var(--fg); font-size: 10.5px; }
.le-zeiger, .le-tasten { margin: 0.1rem 0.8rem 0.5rem; font-size: 0.82rem; color: var(--muted); }
.le-zeiger { color: var(--fg); min-height: 1.3em; font-variant-numeric: tabular-nums; }

/* Tabelle der Stücke */
.le-tab-rahmen { overflow-x: auto; }
table.le-tabelle { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.le-tabelle input.le-zahl, table.le-tabelle select.le-klein { font-size: 0.8rem; }
table.le-tabelle th, table.le-tabelle td { padding: 0.18rem 0.15rem; vertical-align: middle; text-align: left; }
table.le-tabelle th { font-size: 0.7rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.le-tabelle td:first-child { white-space: nowrap; font-weight: 700; }
svg.le-farbe { width: 0.7rem; height: 0.7rem; vertical-align: -0.05rem; }
input.le-zahl { width: 2.9rem; height: 1.75rem; padding: 0 0.3rem; font-size: 0.84rem; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; }
input.le-falsch { border-color: var(--le-schlecht); }
table.le-tabelle .btn-weg:not(.mit-wort) { width: 1.75rem; height: 1.75rem; min-height: 1.75rem; }
table.le-tabelle .btn-weg svg { width: 0.95rem; height: 0.95rem; }

/* Felder */
.le-felder { display: grid; gap: 0.55rem 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.le-felder .field { margin: 0; min-width: 0; }
.le-felder .field[hidden] { display: none; }
.le-felder .field label, .le-uebernahme .field label { font-size: 0.7rem; }
.le-felder .field input, .le-felder .field select, .le-uebernahme .field input {
  width: 100%; min-width: 0; height: 1.95rem; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.9rem; }
.le-uebernahme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.le-uebernahme .field { margin: 0; }
.le-inhalt > .field-hint { margin: 0.45rem 0 0; }

/* Werte */
dl.le-werte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; margin: 0; font-size: 0.88rem; }
dl.le-werte dt { color: var(--muted); }
dl.le-werte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
dl.le-werte dd.le-gut { color: var(--le-gut); }
dl.le-werte dd.le-schlecht { color: var(--le-schlecht); }
.le-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* Vorlagen */
.le-vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.le-vorlagen .btn-sm.on { border-color: var(--accent); color: var(--accent); }
#le-link-stand:empty, #le-vorlage-text:empty { display: none; }

@media (max-width: 700px) {
  #le-buehne .btn-sm, .le-seg button { min-height: 2.5rem; }
}

/* Kachel auf /simulatoren */
.si-kabel { fill: none; stroke: var(--le-k1); stroke-width: 7; stroke-linecap: round; opacity: 0.45; }
.si-kabel2 { fill: none; stroke: var(--le-k2); stroke-width: 7; opacity: 0.45; }
.si-welle { fill: none; stroke: var(--le-summe); stroke-width: 2; stroke-linejoin: round; }
.si-zurueck { fill: none; stroke: var(--le-rueck); stroke-width: 1.6; stroke-dasharray: 5 3; }

/* nur für Bildschirmleser */
.le-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.le-tab-rahmen { padding-left: 0.5rem; padding-right: 0.5rem; }