/* Smith-Diagramm (AFU-354, /smith). Nur eigene sm-Klassen, Farben aus den Variablen von style.css. */

:root {
  --sm-netz: rgba(138, 147, 179, 0.38);
  --sm-netz-neben: rgba(138, 147, 179, 0.16);
  --sm-adm: rgba(167, 139, 250, 0.42);
  --sm-adm-neben: rgba(167, 139, 250, 0.16);
  --sm-last: #ff6b6b;
  --sm-swr: #f5b942;
  --sm-dl: #34d399;
  --sm-mess: #22d3ee;
  --sm-vorschau: #e5e7eb;
  --sm-f0: #6aa6ff;
  --sm-f1: #f472b6;
  --sm-f2: #34d399;
  --sm-f3: #fbbf24;
  --sm-f4: #a78bfa;
  --sm-f5: #fb923c;
  --sm-ziel: #c084fc;
}
@media (prefers-color-scheme: light) {
  :root {
    --sm-netz: rgba(70, 82, 110, 0.38);
    --sm-netz-neben: rgba(70, 82, 110, 0.14);
    --sm-adm: rgba(124, 92, 255, 0.40);
    --sm-adm-neben: rgba(124, 92, 255, 0.14);
    --sm-last: #dc2626;
    --sm-swr: #c27c0e;
    --sm-dl: #059669;
    --sm-mess: #0891b2;
    --sm-vorschau: #1a2235;
    --sm-f0: #2f6fed;
    --sm-f1: #db2777;
    --sm-f2: #059669;
    --sm-f3: #b7791f;
    --sm-f4: #7c5cff;
    --sm-f5: #ea580c;
    --sm-ziel: #9333ea;
  }
}

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

/* Bühne wie /hoeren: Diagramm links groß, Werte rechts; schmal untereinander. */
.sm-buehne {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  align-items: start;
}
.sm-panel { display: grid; gap: 1rem; min-width: 0; }
@media (max-width: 900px) {
  .sm-buehne { grid-template-columns: minmax(0, 1fr); }
}
/* Simulator (AFU-361): Raster mit festen Feldern. Links das Diagramm, so groß wie das Fenster unter der Bühne hoch ist
   (--sm-oben misst smith.js) und beim Rollen stehen bleibend; daneben Last und Werte, darunter über beide Spalten die
   Schaltung mit der Tabelle der Bauteile, darunter L-Glied, Messung und Durchlauf. */
.sm-buehne.sm-raster {
  --sm-d: clamp(22rem, calc(100vh - var(--sm-oben, 15rem) - 3.5rem), 44rem);
  gap: 0.7rem;
  grid-template-columns: var(--sm-d) minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "dia last werte" "dia kette kette" "dia rest rest";
}
.sm-raster > .sm-diagramm-kasten { grid-area: dia; position: sticky; top: calc(var(--kopf-hoehe, 44px) + 0.5rem); }
.sm-raster > .sm-last-kasten { grid-area: last; }
.sm-raster > .sm-werte-kasten { grid-area: werte; }
.sm-raster > .sm-kette-kasten { grid-area: kette; }
.sm-raster > .sm-schritte-kasten { grid-area: schritte; }
.sm-raster > .sm-rest { grid-area: rest; }
.sm-rest { display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; min-width: 0; }
.sm-rest-spalte { display: grid; gap: 0.7rem; min-width: 0; }
/* AFU-362: ab 1800 px eine Spalte mehr statt breiterer Kästen: Diagramm | Last, Schaltung | Werte | Durchlauf, darunter
   L-Glied und Messung. .sm-rest löst sich dafür auf, seine beiden Teile liegen im Raster. */
@media (min-width: 1800px) {
  :root:not([data-breite="begrenzt"]) .sm-buehne.sm-raster:not(.sm-gross) {
    grid-template-columns: var(--sm-d) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "dia last werte durch" "dia kette kette lg" "dia kette kette lg";
  }
  :root:not([data-breite="begrenzt"]) .sm-buehne.sm-raster:not(.sm-gross) > .sm-rest { display: contents; }
  :root:not([data-breite="begrenzt"]) .sm-raster:not(.sm-gross) .sm-rest-spalte { grid-area: lg; align-self: start; }
  :root:not([data-breite="begrenzt"]) .sm-raster:not(.sm-gross) .sm-durchlauf-kasten { grid-area: durch; align-self: start; }
}
@media (max-width: 1200px) {
  .sm-buehne.sm-raster {
    grid-template-columns: var(--sm-d) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "dia last" "dia werte" "dia kette" "dia rest";
  }
  .sm-rest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sm-buehne.sm-raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "dia" "kette" "last" "werte" "rest";
  }
  .sm-raster > .sm-diagramm-kasten { position: static; }
}

/* Kästen mit Kopf */
.sm-kasten {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0; overflow: hidden;
}
.sm-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  min-height: 2rem; padding: 0.15rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.sm-titel {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.sm-luft { flex: 1 1 auto; }
.sm-kopf .btn-sm { padding: 0.1rem 0.6rem; font-size: 0.8rem; }
.sm-haken { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.sm-haken input { accent-color: var(--accent); margin: 0; }
.sm-inhalt { padding: 0.55rem 0.7rem; }
.sm-leer { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Diagramm */
.sm-diagramm { padding: 0.4rem; display: flex; justify-content: center; position: relative; }
#sm-svg {
  width: 100%; max-width: 820px; height: auto; aspect-ratio: 1;
  display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: crosshair; overflow: visible;
}
#sm-svg.sm-zieht { cursor: grabbing; }
.sm-n-grund { fill: var(--bg2); }
.sm-n-rahmen { fill: none; stroke: var(--muted); stroke-width: 0.6; }
.sm-z-netz .sm-n-haupt { fill: none; stroke: var(--sm-netz); stroke-width: 0.35; }
.sm-z-netz .sm-n-neben { fill: none; stroke: var(--sm-netz-neben); stroke-width: 0.25; }
.sm-adm-netz .sm-n-haupt { fill: none; stroke: var(--sm-adm); stroke-width: 0.35; stroke-dasharray: 1.4 0.9; }
.sm-adm-netz .sm-n-neben { fill: none; stroke: var(--sm-adm-neben); stroke-width: 0.25; }
#sm-netz > .sm-n-haupt { stroke: var(--sm-netz); stroke-width: 0.4; }
.sm-n-text { fill: var(--muted); font-size: 3.6px; font-family: inherit; }
.sm-n-rand { font-size: 3.4px; }
.sm-n-winkel { font-size: 3.2px; opacity: 0.85; }
.sm-swr { fill: none; stroke: var(--sm-swr); stroke-width: 0.6; stroke-dasharray: 2 1.2; }
.sm-swr-last { opacity: 0.45; }
.sm-weg { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sm-weg-gewaehlt { stroke-width: 2.3; }
.sm-vorschau { fill: none; stroke: var(--sm-vorschau); stroke-width: 1; stroke-dasharray: 2 1.4; opacity: 0.85; }
.sm-dl { fill: none; stroke: var(--sm-dl); stroke-width: 1.1; }
.sm-dl-rand { fill: var(--sm-dl); }
.sm-dl-text { fill: var(--sm-dl); font-size: 3.2px; }
.sm-mess { fill: none; stroke: var(--sm-mess); stroke-width: 0.8; opacity: 0.85; }
.sm-last { fill: var(--sm-last); stroke: var(--bg2); stroke-width: 0.8; cursor: grab; }
.sm-last-ring { fill: none; stroke: var(--sm-last); stroke-width: 0.5; opacity: 0.55; pointer-events: none; }
.sm-ende { fill: var(--fg); stroke: var(--bg2); stroke-width: 0.6; pointer-events: none; }
.sm-griff { stroke: var(--bg2); stroke-width: 0.7; cursor: grab; }
.sm-hot { cursor: help; }
.sm-hot circle { fill: var(--accent); opacity: 0.9; }
.sm-hot text { fill: var(--on-accent); font-size: 4.6px; font-weight: 700; pointer-events: none; }
.sm-hot:hover circle, .sm-hot:focus circle { opacity: 1; stroke: var(--fg); stroke-width: 0.5; }
.sm-hot:focus { outline: none; }

.sm-erklaer {
  margin: 0 0.9rem 0.9rem; padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent); background: var(--bg2);
  border-radius: 0 10px 10px 0; font-size: 0.95rem;
}
.sm-tastenhilfe { display: none; }
.sm-erklaer-titel { color: var(--accent); }

/* Erklärung am Diagramm (AFU-360): Blase neben dem Gemeinten, Band über dem Kreis, schmal Text direkt darunter. */
.sm-erklaer-band { margin: 0.6rem 0.9rem 0; }
.sm-diagramm + .sm-erklaer { margin-top: 0; }
.sm-blase {
  position: absolute; z-index: 2; width: max-content; max-width: min(40%, 18rem);
  padding: 0.5rem 1.7rem 0.55rem 0.7rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 0.88rem; line-height: 1.42;
}
.sm-blase[hidden] { display: none; }
.sm-blase-titel { display: block; margin-bottom: 0.15rem; color: var(--accent); }
.sm-blase-titel:empty { display: none; }
.sm-blase-zu {
  position: absolute; top: 0.15rem; right: 0.2rem;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0.25rem;
}
.sm-blase-zu:hover, .sm-blase-zu:focus-visible { color: var(--fg); }
.sm-zeiger { stroke: var(--accent); stroke-width: 0.6; pointer-events: none; }
.sm-hl { pointer-events: none; }
.sm-hl-linie { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.9; }
.sm-hl-punkt { fill: var(--accent); }
.sm-hl-flaeche { fill: var(--accent); opacity: 0.12; }
.sm-hl-weg { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; }
.sm-hot-akt circle { opacity: 1; stroke: var(--fg); stroke-width: 0.8; }
.sm-buehne.sm-gross .sm-blase { font-size: 1.15rem; max-width: min(40%, 26rem); }

/* Felder */
.sm-felder { display: grid; gap: 0.7rem 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Last (AFU-361): Felder so breit wie ihr Inhalt, Beschriftung davor, umbrechen statt rollen */
.sm-felder.sm-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }
.sm-felder.sm-zeile + .sm-zeile { margin-top: 0.45rem; }
.sm-zeile .field { display: flex; flex-direction: row; align-items: center; gap: 0.35rem; margin: 0; min-width: 0; max-width: 100%; }
.sm-zeile .field[hidden] { display: none; }
.sm-zeile .field > label { align-self: center; font-size: 0.72rem; white-space: nowrap; }
.sm-felder.sm-zeile .field select { width: auto; max-width: 100%; min-width: 0; field-sizing: content; padding-left: 0.45rem; padding-right: 0.3rem; }
.sm-felder.sm-zeile .field input { min-width: 0; }
.sm-felder.sm-zeile .field input.sm-z7 { width: calc(7ch + 1rem); }
.sm-felder.sm-zeile .field input.sm-z5 { width: calc(5ch + 1rem); }
.sm-zeile .field input, .sm-zeile .field select { height: 1.9rem; padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.9rem; }
/* Knöpfe im Simulator niedrig (style.css gibt jedem .btn-sm 2,5rem); mobil wieder 40 px, siehe unten */
#sm-buehne .sm-kopf .btn-sm, #sm-buehne .sm-f-zeile .btn-sm, #sm-buehne .sm-kette-fuss .btn-sm, #sm-buehne .sm-menue-liste .btn-sm,
#sm-buehne .sm-kette .btn-sm, #sm-buehne .sm-inhalt .btn-sm { min-height: 1.75rem; padding-top: 0.1rem; padding-bottom: 0.1rem; }
#sm-buehne .sm-f-zeile .btn-sm { min-height: 1.9rem; padding-left: 0.55rem; padding-right: 0.55rem; }
#sm-buehne .sm-kette .btn-weg:not(.mit-wort) { width: 1.75rem; height: 1.75rem; }
.sm-felder:not(.sm-zeile) .field input, .sm-felder:not(.sm-zeile) .field select { width: 100%; min-width: 0; }
.sm-felder .sm-breit { grid-column: 1 / -1; }
.sm-inhalt > .field-hint { margin: 0.4rem 0 0; }

/* Werte */
table.sm-werte { font-size: 0.85rem; }
table.sm-werte th, table.sm-werte td { padding: 0.18rem 0.4rem; }
table.sm-werte thead th { position: static; }
table.sm-werte tbody th {
  position: static; background: none; text-transform: none; letter-spacing: 0;
  font-size: 0.84rem; font-weight: 500; color: var(--muted); white-space: normal;
}
table.sm-werte .sm-swr-zeile td { font-weight: 700; color: var(--fg); }
table.sm-werte.sm-ohne-ende th:nth-child(3), table.sm-werte.sm-ohne-ende td:nth-child(3) { display: none; }
#sm-link-stand { margin: 0.3rem 0 0; }
#sm-link-stand:empty { display: none; }

/* Kette */
.sm-kette-inhalt { padding-top: 0; }
.sm-kette-inhalt .sm-leer { font-size: 0.85rem; }
table.sm-kette { font-size: 0.88rem; }
table.sm-kette th, table.sm-kette td { padding: 0.2rem 0.4rem; vertical-align: middle; }
table.sm-kette tbody td:first-child { box-shadow: inset 3px 0 0 var(--sm-zeile, transparent); white-space: nowrap; }
table.sm-kette tr.sm-neu { background: color-mix(in srgb, var(--sm-dl) 18%, transparent); }
@media (prefers-reduced-motion: no-preference) { table.sm-kette tbody tr { transition: background-color 0.4s; } }
table.sm-kette thead th { position: static; }
table.sm-kette tr.sm-gewaehlt { background: var(--card-hover); }
table.sm-kette tr.sm-aus td:not(:last-child):not(:nth-last-child(2)) { opacity: 0.45; }
table.sm-kette tr.sm-verborgen { opacity: 0.35; }
table.sm-kette tr.sm-ziel { box-shadow: inset 0 2px 0 var(--accent); }
table.sm-kette tr.sm-zieht { opacity: 0.5; }
.sm-zug { cursor: grab; color: var(--muted); margin-right: 0.35rem; touch-action: none; }
.sm-farbe { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: -0.05rem; }
.sm-art-knopf {
  font: inherit; font-size: 0.9rem; color: var(--fg); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 3px;
}
.sm-wertfeld { display: flex; gap: 0.3rem; align-items: center; }
.sm-wertfeld input, .sm-ltg input, .sm-wertfeld select {
  background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 7px; padding: 0.25rem 0.45rem; font: inherit; font-size: 0.9rem;
}
.sm-wertfeld input { width: calc(6ch + 1rem); }
.sm-wertfeld input, .sm-ltg input, .sm-wertfeld select { padding: 0.15rem 0.35rem; font-size: 0.85rem; }
.sm-ltg { display: flex; gap: 0.5rem; }
.sm-ltg label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); }
.sm-ltg input { width: calc(4ch + 0.9rem); }
.sm-an input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.sm-knoepfe { display: flex; gap: 0.15rem; align-items: center; }
.sm-pfeil { padding: 0.05rem 0.4rem; font-size: 0.8rem; line-height: 1.2; }
.sm-knoepfe .btn-weg { padding: 0.1rem 0.3rem; }
.sm-knoepfe .btn-weg svg { width: 0.95rem; height: 0.95rem; }
.sm-pfeil:disabled { opacity: 0.35; cursor: default; }
.sm-kette-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  padding: 0.4rem 0.7rem; border-top: 1px solid var(--border); background: var(--bg2);
}
.sm-kette-fuss .field-hint { margin: 0; font-size: 0.8rem; }
.sm-plus-knopf { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Menüs im Kopf (Anzeige, Datei) */
.sm-menue { position: relative; }
.sm-menue > summary { list-style: none; cursor: pointer; user-select: none; }
.sm-menue > summary::-webkit-details-marker { display: none; }
.sm-menue[open] > summary { border-color: var(--accent); color: var(--fg); }
.sm-menue-liste {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; min-width: max-content;
  display: grid; gap: 0.35rem; padding: 0.5rem 0.7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.sm-menue-rechts .sm-menue-liste { left: auto; right: 0; }
.sm-kasten:has(.sm-menue[open]) { overflow: visible; z-index: 3; }
.sm-menue-liste.sm-datei-knoepfe { margin: 0; }

/* ＋ im Schaltbild und Menü der Bauteile (AFU-361) */
.sm-sb { position: relative; }
.sm-sb-plus { cursor: pointer; outline: none; }
.sm-sb-plus-flaeche { fill: transparent; stroke: none; }
.sm-sb-plus-ring { fill: var(--bg2); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2.4 1.6; }
.sm-sb-plus-kreuz { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.sm-sb-plus-feld { fill: var(--bg2); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 2; }
.sm-sb-plus-text { fill: var(--accent); font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.sm-sb-plus-gross { font-size: 12px; }
.sm-sb-plus:hover .sm-sb-plus-ring, .sm-sb-plus:focus-visible .sm-sb-plus-ring, .sm-sb-plus-offen .sm-sb-plus-ring,
.sm-sb-plus:hover .sm-sb-plus-feld, .sm-sb-plus:focus-visible .sm-sb-plus-feld, .sm-sb-plus-offen .sm-sb-plus-feld {
  fill: var(--accent); stroke-dasharray: none;
}
.sm-sb-plus:hover .sm-sb-plus-kreuz, .sm-sb-plus:focus-visible .sm-sb-plus-kreuz, .sm-sb-plus-offen .sm-sb-plus-kreuz { stroke: var(--on-accent); }
.sm-sb-plus:hover .sm-sb-plus-text, .sm-sb-plus:focus-visible .sm-sb-plus-text, .sm-sb-plus-offen .sm-sb-plus-text { fill: var(--on-accent); }
.sm-sb-plus:focus-visible .sm-sb-plus-ring, .sm-sb-plus:focus-visible .sm-sb-plus-feld { stroke: var(--fg); stroke-width: 1.6; }
.sm-sb-teil.sm-sb-neu .sm-sb-treffer { fill: color-mix(in srgb, var(--sm-dl) 16%, transparent); stroke: var(--sm-dl); stroke-width: 2; stroke-dasharray: none; }
@media (prefers-reduced-motion: no-preference) { .sm-sb-treffer { transition: fill 0.4s, stroke 0.4s; } }
.sm-plus-menue {
  position: absolute; z-index: 6; width: max-content; max-width: calc(100% - 8px);
  display: grid; gap: 0.35rem; padding: 0.5rem 0.6rem 0.6rem;
  background: var(--bg); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.sm-plus-menue[hidden] { display: none; }
.sm-plus-titel { margin: 0 0 0.1rem; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.sm-plus-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.sm-plus-kopf { width: 4.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sm-plus-gruppe button {
  display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.85rem; color: var(--fg);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; padding: 0.2rem 0.5rem; cursor: pointer;
}
.sm-plus-gruppe button:hover, .sm-plus-gruppe button:focus-visible { border-color: var(--accent); background: var(--card-hover); outline: none; }
.sm-plus-gruppe svg { width: 1.6rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* L-Glied */
.sm-lglied-liste { display: grid; gap: 0.6rem; }
.sm-loesung {
  border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem;
  display: grid; gap: 0.5rem; background: var(--bg2);
}
.sm-loesung.sm-vorgeschaut { border-color: var(--accent); }
.sm-loesung-text { display: grid; gap: 0.15rem; font-size: 0.9rem; }
.sm-loesung-kopf { font-weight: 700; font-size: 0.84rem; }
.sm-loesung-wie { color: var(--muted); font-size: 0.82rem; }
.sm-loesung-knoepfe { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sm-loesung-knoepfe .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
.sm-nimm { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Durchlauf */
.sm-swrplot { width: 100%; height: auto; display: block; margin-top: 0.7rem; }
.sm-p-netz { stroke: var(--sm-netz-neben); stroke-width: 1; }
.sm-p-grenze { stroke: var(--sm-netz); stroke-dasharray: 3 3; }
.sm-p-text { fill: var(--muted); font-size: 9px; }
.sm-p-mitte { stroke: var(--sm-last); stroke-width: 1; stroke-dasharray: 2 2; }
.sm-p-kurve { fill: none; stroke: var(--sm-dl); stroke-width: 1.8; }
#sm-bandbreite { margin: 0.4rem 0 0; line-height: 1.5; }

/* Messung */
.sm-ablage {
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 0.7rem 0.8rem;
  font-size: 0.9rem; color: var(--muted);
}
.sm-ablage p { margin: 0; }
.sm-ablage.sm-drueber { border-color: var(--accent); background: var(--card-hover); }
.sm-dateiknopf { color: var(--accent); cursor: pointer; text-decoration: underline; }
.sm-dateiknopf input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sm-dateiknopf:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#sm-mess-stand { margin: 0.5rem 0; }
#sm-mess-knoepfe .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
.sm-grenze { margin: 1rem 0 0; }

/* Beispiele */
.sm-beispiele { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.sm-beispiel {
  font: inherit; text-align: left; color: var(--fg); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg);
  padding: 0.9rem 1rem; display: grid; gap: 0.35rem; align-content: start;
}
.sm-beispiel:hover, .sm-beispiel:focus-visible { border-color: var(--accent); background: var(--card-hover); }
.sm-beispiel-titel { font-weight: 700; }
.sm-beispiel-text { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

.sm-text { max-width: none; }

/* Liste der Schritte nur in der Großansicht */
.sm-nur-gross { display: none; }
.sm-schrittliste { margin: 0; padding: 0.7rem 0.9rem 0.8rem 2.2rem; display: grid; gap: 0.3rem; }
.sm-schrittliste li.sm-aus { opacity: 0.45; text-decoration: line-through; }
.sm-schrittliste li.sm-verborgen { opacity: 0.3; }
.sm-schrittliste li.sm-leer { list-style: none; margin-left: -1.3rem; }

/* Großansicht (Vollbild oder, ohne Fullscreen API, über die ganze Seite) */
.sm-buehne.sm-gross {
  position: fixed; inset: 0; z-index: 1000; margin: 0;
  background: var(--bg); padding: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
  overflow: auto; font-size: 1.2rem;
}
.sm-buehne.sm-gross .sm-diagramm-kasten { height: calc(100vh - 2rem); display: flex; flex-direction: column; }
/* Simulator: Diagramm links über dem Schaltbild, rechts Last, Werte, Schritte; das Raster füllt das Fenster */
.sm-buehne.sm-raster.sm-gross {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "dia last" "dia werte" "dia schritte" "kette schritte";
}
.sm-buehne.sm-raster.sm-gross .sm-diagramm-kasten { position: static; height: auto; min-height: 0; align-self: stretch; }
.sm-buehne.sm-raster.sm-gross .sm-schritte-kasten { align-self: start; }
.sm-buehne.sm-gross .sm-diagramm { flex: 1 1 auto; min-height: 0; }
.sm-buehne.sm-gross #sm-svg { max-width: none; width: auto; height: 100%; max-height: 100%; }
.sm-buehne.sm-gross .sm-nur-gross { display: block; }
.sm-buehne.sm-gross .sm-nicht-gross { display: none; }
.sm-buehne.sm-gross .sm-tastenhilfe { display: block; margin: 0 0.9rem 0.6rem; font-size: 0.8rem; color: var(--muted); }
.sm-buehne.sm-gross table.sm-werte { font-size: 1.15rem; }
.sm-buehne.sm-gross table.sm-werte tbody th { font-size: 1rem; }
.sm-buehne.sm-gross .sm-erklaer { font-size: 1.15rem; }
.sm-buehne.sm-gross .field-hint { font-size: 0.85rem; }
body.sm-gross-an { overflow: hidden; }
@media (max-width: 900px) {
  .sm-buehne.sm-gross { grid-template-columns: minmax(0, 1fr); }
  .sm-buehne.sm-raster.sm-gross { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "dia" "kette" "last" "werte" "schritte"; }
  .sm-buehne.sm-gross .sm-diagramm-kasten { height: auto; }
  .sm-buehne.sm-gross #sm-svg { width: 100%; height: auto; }
}

@media (max-width: 520px) {
  .sm-felder:not(.sm-zeile) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
  .sm-inhalt { padding: 0.7rem; }
  .sm-diagramm { padding: 0.2rem; }
  .sm-kopf { padding: 0.3rem 0.6rem; }
}

/* Vom Rechteck zum Smith-Diagramm (AFU-355) */
.sm-seg { flex: 0 0 auto; }
.sm-seg button { flex: 0 0 auto; padding: 0.2rem 0.7rem; font-size: 0.82rem; }
#sm-ue-svg {
  width: 100%; max-width: 820px; height: auto; aspect-ratio: 1;
  display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: crosshair; overflow: visible;
}
#sm-ue-svg.sm-zieht { cursor: grabbing; }
#sm-ue-netz .sm-n-haupt { fill: none; stroke: var(--sm-netz); stroke-width: 0.35; }
#sm-ue-netz .sm-n-neben { fill: none; stroke: var(--sm-netz-neben); stroke-width: 0.25; }
#sm-ue-netz .sm-n-achse { fill: none; stroke: var(--sm-netz); stroke-width: 0.5; }
#sm-ue-netz .sm-n-rahmen { fill: none; stroke: var(--muted); stroke-width: 0.6; }
.sm-ue-spur { fill: none; stroke: var(--sm-last); stroke-width: 0.6; stroke-dasharray: 1.6 1.2; opacity: 0.7; }
.sm-ue-unendlich { font-size: 4.4px; font-weight: 700; }
.sm-ue-seite { fill: var(--muted); font-size: 3.6px; }
.sm-ue-z { fill: var(--sm-last); font-size: 3.8px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--bg2); stroke-width: 0.8px; }
.sm-last.sm-ue-draussen { fill: var(--bg2); stroke: var(--sm-last); stroke-width: 1; }
.sm-ue-mitte > .sm-erklaer { margin-top: 0; }
@media (min-width: 1200px) {
  .sm-buehne:not(.sm-gross) .sm-ue-mitte { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .sm-buehne:not(.sm-gross) .sm-ue-mitte > .sm-erklaer { margin: 0.6rem 0.9rem 0 0; }
}
.sm-buehne.sm-gross .sm-ue-mitte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sm-ue-regler { display: grid; gap: 0.6rem; padding: 0.2rem 0.9rem 0.9rem; }
.sm-ue-regler .sliderrow label { font-weight: 600; font-size: 0.9rem; }
.sm-ue-regler .btn-row .btn-sm { padding: 0.3rem 0.85rem; font-size: 0.88rem; }
.sm-ue-last { display: grid; gap: 0.7rem; }
.sm-ue-last .field { margin: 0; }
.sm-ue-last .sliderrow input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.sm-ue-zahl { width: 6.5rem; flex: none; }
.sm-ue-last > .field > .sm-ue-zahl { width: 100%; }
.sm-ue-last .field-hint { margin: 0; }
.sm-ue-text p { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.5; }
.sm-ue-text p:last-child { margin-bottom: 0; }
.sm-ue-mehr { margin-top: 1.4rem; }
.sm-buehne.sm-gross #sm-ue-svg { max-width: none; width: auto; height: 100%; max-height: 100%; }
.sm-buehne.sm-gross .sm-ue-regler { font-size: 1.1rem; }
@media (max-width: 900px) {
  .sm-buehne.sm-gross #sm-ue-svg { width: 100%; height: auto; }
}

/* Schaltbild der Kette (AFU-357): Sender links, Last rechts, Masse unten. Farben der Bauteile = Farbe des Bogens. */
.sm-sb-rolle { overflow-x: auto; padding: 0.35rem 0.7rem 0.3rem; }
#sm-sb-svg { display: block; width: 100%; height: auto; max-height: 11.5rem; margin: 0 auto; overflow: visible; }
.sm-sb-svg text, #sm-sb-svg text { font-family: inherit; }
.sm-sb-draht { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; }
.sm-sb-sym { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sm-sb-bauteil { stroke-width: 2.2; }
.sm-sb-platte { stroke-width: 2.8; stroke-linecap: butt; }
.sm-sb-schirm { fill: var(--bg2); stroke-width: 1.8; }
.sm-sb-steg { stroke-width: 3; stroke-linecap: butt; }
.sm-sb-innen { fill: none; stroke: var(--fg); stroke-width: 1.4; }
.sm-sb-offen { fill: var(--bg2); stroke: var(--fg); stroke-width: 1.2; }
.sm-sb-knoten { fill: var(--fg); }
.sm-sb-lastbox { fill: var(--bg2); stroke: var(--sm-last); stroke-width: 2; }
.sm-sb-zeichen { fill: var(--sm-last); font-size: 7.5px; font-weight: 700; }
.sm-sb-name { fill: var(--muted); font-size: 10px; }
.sm-sb-wert { fill: var(--fg); font-size: 11px; font-weight: 600; }
.sm-sb-neben { font-weight: 500; fill: var(--muted); }
.sm-sb-lastwert { fill: var(--sm-last); }
.sm-sb-bruecke { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 3 2.5; }
.sm-sb-teil { cursor: pointer; outline: none; }
.sm-sb-treffer { fill: transparent; stroke: none; }
.sm-sb-teil:hover .sm-sb-treffer, .sm-sb-teil.sm-sb-hover .sm-sb-treffer { fill: var(--card-hover); }
.sm-sb-teil.sm-sb-gewaehlt .sm-sb-treffer { fill: var(--card-hover); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; }
.sm-sb-teil:focus-visible .sm-sb-treffer { stroke: var(--accent); stroke-width: 1.4; }
.sm-sb-teil.sm-sb-gewaehlt .sm-sb-bauteil, .sm-sb-teil.sm-sb-hover .sm-sb-bauteil { stroke-width: 3.2; }
.sm-sb-aus .sm-sb-bauteil, .sm-sb-aus .sm-sb-sym, .sm-sb-aus .sm-sb-innen, .sm-sb-aus .sm-sb-wert { opacity: 0.35; }
.sm-sb-spaeter { opacity: 0.13; }
.sm-sb-zstrich { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 2 2.5; opacity: 0.7; }
.sm-sb-zpunkt { fill: var(--accent); }
.sm-sb-ztext { fill: var(--fg); font-size: 9.5px; }
.sm-sb-zswr { fill: var(--sm-swr); font-weight: 700; }
.sm-sb-mini { display: block; width: 100%; max-width: 30rem; height: auto; }
.sm-sb-mini .sm-sb-teil { cursor: default; }
table.sm-kette tr.sm-hover { background: var(--card-hover); }
.sm-buehne.sm-gross .sm-sb-rolle { padding: 0.2rem 0.9rem 0; }
.sm-buehne.sm-gross #sm-sb-svg { height: 15vh; width: auto; max-width: 100%; }
.sm-buehne.sm-gross #sm-sb-svg { max-height: none; }
.sm-buehne.sm-gross .sm-kette-kasten { position: relative; }
.sm-buehne.sm-gross .sm-kette-kasten > .sm-kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 1; border: 0; background: none; pointer-events: none;
}
.sm-buehne.sm-gross .sm-kette-kasten > .sm-kopf .sm-titel { display: none; }
.sm-buehne.sm-gross .sm-kette-kasten > .sm-kopf .sm-haken { pointer-events: auto; }

/* AFU-359: Zielkreise, Auswahl, Zoom, Beschriften, Zeigerwerte */
.sm-ziel-kreis { fill: none; stroke: var(--sm-ziel); stroke-width: 0.5; stroke-dasharray: 1.6 1; pointer-events: none; }
.sm-weg-gedimmt { opacity: 0.35; }
#sm-svg.sm-gezoomt { overflow: hidden; }
.sm-last-pfeil { fill: var(--sm-last); }
.sm-ende-pfeil { fill: var(--accent); }
.sm-dl-marke { fill: var(--sm-dl); stroke: var(--bg2); stroke-width: 0.4; }
.sm-dl-klein { fill: var(--sm-dl); opacity: 0.8; }
.sm-dl-marke-text { fill: var(--sm-dl); font-size: 3px; paint-order: stroke; stroke: var(--bg2); stroke-width: 0.8px; }
.sm-kennz { font-size: 3.4px; font-weight: 700; paint-order: stroke; stroke: var(--bg2); stroke-width: 0.9px; pointer-events: none; }
.sm-last-gewaehlt { stroke-width: 1.1; opacity: 1; }
.sm-zoom { background: var(--bg2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.85rem; padding: 0.05rem 0.3rem; }
.sm-diagramm { flex-wrap: wrap; }
.sm-zeigerwerte { flex: 1 0 100%; margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); min-height: 1.3em; text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sm-buehne.sm-gross .sm-zeigerwerte { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.2rem; margin: 0; pointer-events: none; }
@media (max-width: 600px) { .sm-zeigerwerte { display: none; } }
.sm-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.82rem; color: var(--muted); }
.sm-wahl-text { color: var(--fg); }
.sm-wahl-text:empty { display: none; }
.sm-wahl [aria-pressed="true"] { border-color: var(--sm-last); color: var(--fg); }
.sm-artzelle { display: flex; gap: 0.15rem; align-items: center; white-space: nowrap; }
.sm-art-wahl {
  background: var(--bg2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 0.75rem; padding: 0 0.1rem; width: 1.5rem; height: 1.4rem; color: transparent; cursor: pointer;
}
.sm-art-wahl option { color: var(--fg); background: var(--bg2); }
.sm-ltg { flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.sm-ltg-el { flex-basis: 100%; }
.sm-wertfeld select { field-sizing: content; }
.sm-wertfeld input, .sm-ltg input, .sm-wertfeld select { height: 1.6rem; box-sizing: border-box; }
.sm-ltg + .sm-ltg { margin-top: 0.3rem; }
.sm-ltg-el { font-size: 0.75rem; color: var(--muted); }
.sm-ersatz-zeile td, .sm-ersatz-zeile th { font-size: 0.85rem; color: var(--muted); }
.sm-f-zeile { display: flex; gap: 0.3rem; align-items: center; }
.sm-f-zeile input { flex: 1 1 auto; min-width: 0; }
.sm-datei-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.sm-dateiwahl { position: relative; cursor: pointer; }
.sm-dateiwahl input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sm-dateiwahl:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-p-zeiger { stroke: var(--fg); stroke-width: 1; opacity: 0.6; }
.sm-p-db { stroke: var(--sm-f0); }
.sm-p-achse { font-weight: 700; }
.sm-plot-zeiger { font-size: 0.82rem; color: var(--muted); margin: 0.4rem 0 0; min-height: 2.6em; font-variant-numeric: tabular-nums; }
/* Einstellungen */
.sm-einst { width: min(56rem, calc(100vw - 2rem)); }
.sm-einst-gitter { display: grid; gap: 0.8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.sm-einst-gitter fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.75rem 0.7rem; margin: 0; min-width: 0; display: grid; gap: 0.5rem; }
.sm-einst-gitter legend { font-weight: 700; padding: 0 0.3rem; }
.sm-einst-stand { min-height: 1.3em; font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }

@media print {
  .site-header, .site-footer, header.kopf, footer, nav, .reiter-leiste, .sm-menue, .sm-kette-fuss, #sm-gross,
  .sm-knoepfe, .sm-zug, .sm-wahl, dialog, .sm-blase, .sm-sb-plus, .sm-plus-menue { display: none !important; }
  body { background: #fff; color: #000; }
  .sm-buehne, .sm-raster, .sm-rest { display: block; }
  .sm-raster > .sm-diagramm-kasten { position: static; }
  .card, .sm-panel > * { break-inside: avoid; box-shadow: none; }
  #sm-svg { max-width: 16cm; margin: 0 auto; display: block; }
}

/* Mobil (AFU-361): Bedienelemente mindestens 40 px hoch, Schrift nicht unter 0,88rem */
@media (max-width: 600px) {
  #sm-buehne .sm-kopf .btn-sm, #sm-buehne .sm-menue > summary, #sm-buehne .sm-kette-fuss .btn-sm, #sm-buehne .sm-zoom,
  #sm-buehne .sm-zeile .field input, #sm-buehne .sm-zeile .field select, #sm-buehne .sm-f-zeile .btn-sm, #sm-buehne .sm-plus-gruppe button,
  #sm-buehne .sm-kette .btn-sm, #sm-buehne .sm-wertfeld input, #sm-buehne .sm-wertfeld select, #sm-buehne .sm-ltg input,
  #sm-buehne .sm-art-wahl, #sm-buehne .sm-art-knopf, #sm-buehne .sm-inhalt .btn-sm, #sm-buehne .sm-menue-liste .btn-sm {
    min-height: 40px; height: auto; font-size: 0.88rem;
  }
  #sm-buehne .sm-kette .btn-weg:not(.mit-wort), #sm-buehne .sm-pfeil { width: 40px; height: 40px; }
  #sm-buehne .sm-art-wahl { width: 40px; }
  #sm-buehne .sm-haken { min-height: 40px; font-size: 0.88rem; }
  #sm-buehne .sm-haken input, .sm-an input { width: 1.15rem; height: 1.15rem; }
  .sm-zeile .field > label { font-size: 0.78rem; }
  .sm-kette-fuss .field-hint { font-size: 0.88rem; }
}
/* Kopf des Diagramms: der Titel nur für Bildschirmleser, sonst bricht die Zeile bei schmalem Kreis um (AFU-361) */
.sm-diagramm-kasten > .sm-kopf { gap: 0.25rem 0.6rem; }
.sm-diagramm-kasten > .sm-kopf .sm-titel {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Tabelle der Bauteile: style.css gibt jeder Auswahl in Tabellen 7,5rem Mindestbreite */
#sm-kette td select { min-width: 0; }
#sm-kette td select.sm-art-wahl { width: 1.5rem; padding: 0; }
#sm-kette td .sm-wertfeld select { width: auto; field-sizing: content; padding-right: 0.2rem; }
#sm-kette td input { min-width: 0; }
@media (max-width: 600px) { #sm-kette td select.sm-art-wahl { width: 40px; } }
#sm-kette td input:not([type="checkbox"]), #sm-kette td select { padding-top: 0.05rem; padding-bottom: 0.05rem; font-size: 0.85rem; border-radius: 7px; }
#sm-kette td input:not([type="checkbox"]) { padding-left: 0.35rem; padding-right: 0.35rem; }
@media (max-width: 600px) { #sm-kette td input:not([type="checkbox"]), #sm-kette td select { font-size: 0.88rem; } }
/* Werte: bei knapper Spalte kleiner, notfalls rollt die Tabelle im Kasten statt abgeschnitten zu werden */
.sm-werte-kasten .sm-inhalt { overflow-x: auto; }
@media (max-width: 1700px) { table.sm-werte { font-size: 0.8rem; } table.sm-werte th, table.sm-werte td { padding-left: 0.3rem; padding-right: 0.3rem; } }