/* Leitwert – Ansichten. Fundament: /konto/gemeinsam/stil.css */
.logo-grund { fill: var(--akzent); }
.logo-zug { fill: none; stroke: var(--auf-akzent); stroke-width: 2.4; stroke-linecap: round; }
.konto-knopf { font-weight: 600; }
.l1 { --farbe: var(--l1); } .l2 { --farbe: var(--l2); } .l3 { --farbe: var(--l3); } .n { --farbe: var(--n); }
.pe { --farbe: var(--pe); } .kupfer { --farbe: var(--kupfer); } .warn { --farbe: var(--warn); }
#inhalt:focus { outline: none; }

/* ---------- Start ---------- */
.held { position: relative; padding: clamp(24px, 7vw, 96px) 0 clamp(28px, 5vw, 64px); overflow: hidden; }
.held-innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.held-beruf { margin: 0 0 16px; font-weight: 500; color: var(--text-2); }
.held .gross { text-wrap: pretty; }
.held .unter { margin: 22px 0 30px; max-width: 36ch; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.held-fuss { margin: 18px 0 0; }
.held-knoepfe .knopf.leise { padding-inline: 4px; }
.held-bild { aspect-ratio: 10 / 7; width: 100%; max-width: 520px; justify-self: end; }
.held-bild svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 760px) {
  .held-innen { grid-template-columns: 1fr; }
  .held-bild { order: -1; max-width: 340px; justify-self: center; margin: -8px 0 4px; }
}

/* Leitungs-Grafik (statisch, bis die Motion-Graphic geladen ist) */
.hb-leitung { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.hb-l1 { stroke: var(--l1); } .hb-n { stroke: var(--n); } .hb-pe { stroke: var(--pe); }
.hb-pe-gelb { fill: none; stroke: var(--pe-gelb); stroke-width: 7; stroke-dasharray: 10 10; stroke-linecap: butt; }
.hb-fluss { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 22; animation: fluss 1.4s linear infinite; opacity: 0.9; }
.hb-fluss.zurueck { animation-direction: reverse; }
@keyframes fluss { to { stroke-dashoffset: -23; } }
.hb-kasten { fill: var(--flaeche); stroke: var(--linie); stroke-width: 1.5; }
.hb-text { fill: var(--text-2); font: 600 14px var(--schrift-schild); letter-spacing: 0.04em; }
.hb-gross { fill: var(--text); font: 700 30px var(--schrift-schild); }
.hb-lampe { fill: var(--warn-weich); stroke: var(--warn); stroke-width: 2; animation: gluehen 3.2s ease-in-out infinite; }
@keyframes gluehen { 50% { fill: rgba(240, 165, 49, 0.45); } }
@media (prefers-reduced-motion: reduce) { .hb-fluss, .hb-lampe { animation: none; } }

.abschnitt { padding: clamp(36px, 6vw, 80px) 0; }
.abschnitt > .huelle > .marke { display: block; margin-bottom: 8px; }
.abschnitt h2 + .unter { margin: 12px 0 0; max-width: 52ch; }

/* Heute: eine Messleiste statt drei Kacheln */
.heute-abschnitt { padding-top: 0; }
.heute { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 2px solid var(--text); }
.heute > div { padding: 16px 20px 4px 0; }
.heute > div + div { padding-left: 20px; border-left: 1px solid var(--linie); }
.heute dt { font-weight: 600; color: var(--text-2); }
.heute dd.zahl { margin: 2px 0 6px; font-family: var(--schrift-schild); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; }
.heute dd.zahl small { font-size: 0.45em; color: var(--text-3); margin-left: 2px; }
.heute .klein { margin: 0; }
@media (max-width: 640px) {
  .heute { grid-template-columns: 1fr; }
  .heute > div, .heute > div + div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .heute dd.zahl { grid-row: span 2; grid-column: 2; font-size: 2.25rem; }
}

/* Hutschiene: Geräte nebeneinander, Breite = Gewicht in der Prüfung */
.verteiler { margin-top: 32px; padding: 18px clamp(12px, 3vw, 28px) 24px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten-1); }
.gruppen, .schiene { display: flex; gap: 3px; }
.gruppen > span, .geraet { flex: var(--wert, 1) 1 0; min-width: 0; }
.gruppen > span { padding: 0 2px 8px; margin-bottom: 10px; border-bottom: 2px solid var(--text); font-weight: 600; font-size: 0.875rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schiene { position: relative; padding: 0 0 2px; }
.schiene::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 30px; translate: 0 -50%; border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, 0.18) 18px 24px), linear-gradient(#c3c7c5, #9ea3a2 45%, #b9bdbb); }
.geraet { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 10px; min-height: 172px; padding: 10px 4px 12px;
  border-radius: 4px; background: var(--geraet, #f3f4f1); color: #16191b; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.12); transition: translate 0.1s ease-out; }
.geraet:hover { text-decoration: none; }
.geraet:active { translate: 0 1px; }
.schild { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); font-family: var(--schrift-schild); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: #16191b; }
/* Schaltstellungsanzeige wie am LS-Schalter: rot = ein, grün = aus */
.anzeige { width: 14px; height: 6px; border-radius: 1px; background: #d83a2e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); transition: background 0.15s; }
.hebel { align-self: center; width: min(22px, 60%); height: 40px; border-radius: 4px; background: linear-gradient(#2b2f32, #16191b); position: relative;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); translate: 0 -6px; transition: translate 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hebel::after { content: ""; position: absolute; left: 20%; right: 20%; top: 6px; height: 3px; border-radius: 2px; background: var(--akzent); }
.montage .geraet:not(.ein) .hebel { translate: 0 7px; }
.montage .geraet:not(.ein) .anzeige { background: #2e9e4f; }
.geraet:active .hebel { translate: 0 4px; transition-duration: 0.1s; }
.anteil { font-family: var(--schrift-schild); font-weight: 700; font-size: clamp(1.25rem, 3.4vw, 2rem); line-height: 1; }
.anteil small { font-size: 0.6em; margin-left: 1px; }
:root[data-theme="dark"] .geraet { --geraet: #dfe2de; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .geraet { --geraet: #dfe2de; } }
@media (max-width: 520px) {
  .gruppen .lang { display: none; }
  .schienen-liste a { grid-template-columns: 52px 1fr; row-gap: 2px; }
  .sl-wert { grid-column: 2; font-size: 0.875rem; }
  .geraet { min-height: 128px; gap: 6px; padding: 8px 2px 10px; }
  .schild { font-size: 0.75rem; padding: 1px 3px; }
  .hebel { height: 30px; }
}

.schienen-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap: 32px; }
.schienen-liste a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.schienen-liste a:hover .sl-name { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.schienen-liste .schild { justify-self: start; }
.sl-wert { color: var(--text-2); white-space: nowrap; font-size: 0.9375rem; }
.schienen-hinweis { margin: 16px 0 0; max-width: 70ch; }

/* Lernmethoden: Liste statt Kartenwand */
.methoden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 40px; margin: 28px 0 0; }
.methoden > div { padding: 18px 0 20px; border-top: 1px solid var(--linie); }
.methoden dt { font-family: var(--schrift-schild); font-weight: 700; font-size: 1.375rem; line-height: 1.15; }
.methoden dd { margin: 8px 0 0; color: var(--text-2); max-width: 46ch; }
.ehrlich { margin: 36px 0 0; font-family: var(--schrift-schild); font-weight: 600; font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.2; max-width: 34ch; text-wrap: balance; }

/* ---------- Themenkarte ---------- */
.themen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 26px; }
.thema { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; text-align: left; border: 0; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.2s; color: var(--text); }
.thema:hover { box-shadow: var(--schatten-2); }
.thema:active { transform: scale(0.98); }
/* Schaltzeichen in Aderfarbe; beim Zeigen/Antippen zeichnen sie sich neu wie eine frisch gezogene Leitung */
.symbol { display: block; width: 100%; height: 100%; fill: none; stroke: var(--farbe, var(--text)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thema .zeichen, .ua-symbol { width: 44px; height: 44px; padding: 4px; }
@keyframes zeichnen { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
:is(.thema, .uebungsart):is(:hover, :focus-visible, :active) .symbol path { animation: zeichnen 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { :is(.thema, .uebungsart) .symbol path { animation: none !important; } }
.thema h3 { font-size: 1rem; }
.thema p { margin: 3px 0 10px; font-size: 0.8125rem; color: var(--text-2); line-height: 1.4; }
.balken { display: block; height: 6px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.balken i { display: block; height: 100%; width: calc(var(--wert, 0) * 100%); background: var(--farbe, var(--tint)); border-radius: 6px; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.thema .stand { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-3); margin-top: 6px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.chip { border: 0; border-radius: 980px; padding: 8px 16px; background: var(--flaeche); box-shadow: var(--schatten-1); cursor: pointer; font-size: 0.9375rem; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--grund); }
.chip:active { transform: scale(0.97); }

/* ---------- Tab-Leiste unten (Handy) ---------- */
.tabs { display: none; }
@media (max-width: 760px) {
  .leiste nav a[data-nav] { display: none; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--material); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--linie); }
  .tabs a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; min-height: 48px; color: var(--text-3); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; }
  .tabs a:hover { text-decoration: none; }
  .tabs a:active svg { transform: scale(0.88); }
  .tabs svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s ease-out; }
  .tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
  .tabs a[aria-current="page"] svg { fill: var(--akzent); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.lernt .tabs { display: none; }
  body.lernt { padding-bottom: 0; }
}

/* ---------- Lernrunde ---------- */
.lernen { min-height: calc(100dvh - 52px); padding-bottom: 32px; }
.lern-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding-top: 14px; padding-bottom: 10px; position: sticky; top: 52px; z-index: 5; background: linear-gradient(var(--grund) 70%, transparent); }
.lern-kopf .zurueck { padding: 0 6px; min-height: 36px; }
.fortschritt-leiste { position: relative; height: 8px; border-radius: 8px; background: var(--linie); overflow: hidden; }
.fortschritt-leiste::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.fortschritt-leiste.impuls::after { opacity: 1; background: linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, 0.95) 48%, #fff6c8 50%, transparent 65%) no-repeat;
  background-size: 40% 100%; animation: impuls 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes impuls { from { background-position: -60% 0; } to { background-position: 160% 0; opacity: 0.2; } }
.fortschritt-leiste.kurzschluss { animation: kurzschluss 0.45s steps(1) 1; }
@keyframes kurzschluss { 0%, 40% { background: var(--schlecht); } 20%, 60%, 100% { background: var(--linie); } 80% { background: var(--schlecht-weich); } }
.fortschritt-leiste i { display: block; height: 100%; width: calc(var(--wert, 0) * 100%); background: var(--akzent); border-radius: 8px; transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.zaehler { font-size: 0.875rem; color: var(--text-2); min-width: 4.5ch; text-align: right; }
.lern-buehne { max-width: 720px; }
.lern-karte { padding: clamp(20px, 4vw, 34px); will-change: transform, opacity; }
.lern-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-2); font-weight: 500; }
.thema-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe, var(--tint)); }
.wieder { padding: 2px 9px; border-radius: 980px; background: var(--tint-weich); color: var(--tint); font-weight: 600; font-size: 0.75rem; }
.lern-frage { font-family: inherit; font-size: clamp(1.1875rem, 3.4vw, 1.5rem); line-height: 1.38; letter-spacing: 0; font-weight: 600; text-wrap: pretty; margin: 14px 0 20px; }
.lern-frage:focus { outline: none; }
.antwort { display: grid; gap: 10px; }
.optionen { display: grid; gap: 10px; }
.option { position: relative; display: flex; gap: 14px; align-items: center; width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 14px;
  background: var(--flaeche-2); box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; text-align: left; border: 0; font-size: 1.0625rem; line-height: 1.35;
  transition: box-shadow 0.15s, background 0.15s, transform 0.1s ease-out; -webkit-tap-highlight-color: transparent; }
.option:active { transform: scale(0.985); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.buchstabe { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 0.875rem; font-weight: 700; color: var(--text-2); background: var(--linie); transition: background 0.15s, color 0.15s; }
.option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent-weich); }
.option:has(input:checked) .buchstabe { background: var(--akzent); color: var(--auf-akzent); }
/* Dasselbe über die Klasse .gewaehlt (lernen.js) – eigene Regeln, denn ein :has() in der Liste machte sie ohne :has-Unterstützung ganz ungültig. */
.option.gewaehlt { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent-weich); }
.option.gewaehlt .buchstabe { background: var(--akzent); color: var(--auf-akzent); }
.option.gewaehlt .buchstabe.haken { box-shadow: none; }
@supports not selector(:has(*)) { .option:focus-within { outline: 3px solid var(--akzent); outline-offset: 2px; } }
.buchstabe.haken { color: transparent; background: transparent; box-shadow: inset 0 0 0 2px var(--linie); }
.option:has(input:checked) .buchstabe.haken { box-shadow: none; }
.option:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
.option.richtig { box-shadow: inset 0 0 0 2px var(--gut); background: var(--gut-weich); }
.option.richtig .buchstabe { background: var(--gut); color: #fff; }
.option.falsch { box-shadow: inset 0 0 0 2px var(--schlecht); background: var(--schlecht-weich); }
.option.falsch .buchstabe { background: var(--schlecht); color: #fff; }
.option:has(input:disabled) { cursor: default; }
.zahl-feld { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 18px; border-radius: 14px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1.5px var(--linie); }
.zahl-feld:focus-within { box-shadow: inset 0 0 0 2px var(--text), 0 0 0 4px var(--akzent-weich); }
.zahl-feld input { flex: 1; min-width: 0; width: 0; border: 0; background: none; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; outline: none; }
.zahl-feld .einheit { font-size: 1.25rem; color: var(--text-2); font-weight: 600; }
.zahl-feld .vorzeichen { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px; background: var(--linie); color: var(--text); font: 600 1.25rem/1 system-ui, sans-serif; cursor: pointer; }
.zahl-feld .vorzeichen:disabled { opacity: 0.4; cursor: default; }
.reihe-ziel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; min-height: 8px; }
.reihe-quelle { display: grid; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--linie); }
.reihe-gewaehlt .buchstabe { background: var(--akzent); color: var(--auf-akzent); }
.aktion { margin-top: 22px; }
.sicher-frage { margin: 0 0 8px; text-align: center; }
.sicher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sicher .knopf { min-height: 50px; padding: 0 8px; }
@media (max-width: 700px) {
  .aktion { position: sticky; bottom: 0; margin: 22px calc(-1 * clamp(20px, 4vw, 34px)) calc(-1 * clamp(20px, 4vw, 34px)); padding: 12px clamp(20px, 4vw, 34px) calc(12px + env(safe-area-inset-bottom));
    background: var(--material); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 0 0 var(--radius) var(--radius); }
}
.schritte { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.schritte li { counter-increment: s; display: grid; gap: 4px; padding: 10px 12px 10px 42px; position: relative; border-radius: 12px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); font-size: 0.9375rem; }
.schritte li::before { content: counter(s); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
.schritte code { font: 600 0.9375rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); overflow-wrap: anywhere; }
.schritte.hilfe { margin: -6px 0 18px; }
.beispiel { margin: 14px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--tint-weich); }
.beispiel summary { font-weight: 600; cursor: pointer; color: var(--tint); }
.beispiel p { margin: 10px 0 0; font-size: 0.9375rem; }
.auswertung { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); display: grid; gap: 12px; }
.urteil { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; letter-spacing: -0.01em; }
.urteil-zeichen { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.ist-richtig .urteil-zeichen { background: var(--gut); } .ist-richtig .urteil strong { color: var(--gut); }
.ist-falsch .urteil-zeichen { background: var(--schlecht); } .ist-falsch .urteil strong { color: var(--schlecht); }
.loesung, .kurz, .warum, .falle { margin: 0; font-size: 1rem; line-height: 1.55; }
.kurz { font-weight: 600; }
.warum { color: var(--text-2); }
.falle { padding: 10px 14px; border-radius: 12px; background: var(--schlecht-weich); font-size: 0.9375rem; }
/* Formeldreieck (bilder.js): Linien wie auf einem Plan, die gesuchte Größe unter einem Signalgelb-Schild */
.formeldreieck { margin: 14px 0 0; padding: 14px 14px 12px; border-radius: 12px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); display: grid; justify-items: center; gap: 8px; }
.formeldreieck svg { width: min(100%, 240px); height: auto; overflow: visible; }
.fd-linie { fill: none; stroke: var(--text-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fd-gr { font: 700 38px var(--schrift-schild); fill: var(--text); text-anchor: middle; }
.fd-tief { font-size: 20px; }
.fd-weg { fill: var(--text-3); }
.fd-schild rect { fill: var(--akzent); }
.fd-schild text { font: 700 28px var(--schrift-schild); fill: var(--auf-akzent); text-anchor: middle; }
.fd-schild { animation: fd-abdecken 520ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 250ms both; }
@keyframes fd-abdecken { from { transform: translateY(-26px); opacity: 0; } }
.formeldreieck figcaption { font-size: 0.9375rem; color: var(--text-2); text-align: center; }
.formeldreieck figcaption strong, .fd-rest { font: 700 1.125rem var(--schrift-schild); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .fd-schild { animation: none; } }
/* Erklärbilder (bilder.js): Schaltpläne und Maße im Planstil – Linien grau, Leiter in Aderfarben (DIN EN 60445), Signalgelb nur zum Hervorheben */
.erklaerbild { margin: 14px 0 0; padding: 12px 8px 12px; border-radius: 12px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 8px; }
.erklaerbild svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.erklaerbild figcaption { padding: 0 6px; font-size: 0.9375rem; color: var(--text-2); text-align: center; text-wrap: balance; }
.eb-t { font: 600 13px var(--schrift-schild); letter-spacing: 0.01em; fill: var(--text); }
.eb-m { text-anchor: middle; } .eb-r { text-anchor: end; }
.eb-k { font-size: 12px; } .eb-b { font-weight: 700; } .eb-2 { fill: var(--text-2); }
.eb-gross { font-size: 20px; font-weight: 700; } .eb-gross-k { font-size: 17px; }
.eb-sl { fill: var(--schlecht); } .eb-gt { fill: var(--gut); }
.eb-l { fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eb-c { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.eb-br { stroke: var(--l1); } .eb-sw { stroke: var(--l2); } .eb-gr { stroke: var(--l3); } .eb-bl { stroke: var(--n); }
.eb-pe { stroke: var(--pe); } .eb-pey { stroke: var(--pe-gelb); stroke-dasharray: 6 6; stroke-linecap: butt; } .eb-aus { stroke: var(--text-2); }
.eb-w { stroke-width: 1.4; stroke-dasharray: 4 3; }
.eb-d { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-linecap: round; } .eb-strichl { stroke-dasharray: 4 4; }
.eb-strich { stroke: var(--text); stroke-width: 1.8; }
.eb-pkt { fill: var(--text); } .eb-pin { fill: var(--flaeche-2); stroke: var(--text-2); stroke-width: 1.4; } .eb-fuell { fill: var(--text-2); }
.eb-box { fill: var(--flaeche); stroke: var(--text-2); stroke-width: 1.8; stroke-linejoin: round; }
.eb-klemme { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.6; }
.eb-lasche { fill: var(--akzent); stroke: var(--text-2); stroke-width: 1.2; }
.eb-hl { fill: var(--akzent-weich); stroke: none; } .eb-rahmen { stroke: var(--akzent); stroke-width: 2.5; }
.eb-kabel { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-dasharray: 5 3; }
.eb-gehaeuse { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 5 4; }
.eb-klinge { fill: none; stroke: var(--akzent); stroke-width: 8; stroke-linecap: round; }
.eb-schein { fill: var(--akzent); fill-opacity: 0.5; stroke: none; } .eb-schein.eb-voll { fill-opacity: 1; stroke: var(--text-2); stroke-width: 1.2; }
.eb-ja, .eb-nein { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; } .eb-ja { stroke: var(--gut); } .eb-nein { stroke: var(--schlecht); } .eb-dick { stroke-width: 4; }
.eb-kurz { fill: none; stroke: var(--schlecht); stroke-width: 11; stroke-opacity: 0.32; stroke-linejoin: round; }
.eb-wand { fill: none; stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.eb-gruppe { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.eb-b0 { fill: color-mix(in srgb, var(--n) 34%, transparent); stroke: var(--n); stroke-width: 1.2; }
.eb-b1 { fill: color-mix(in srgb, var(--akzent) 60%, transparent); stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.eb-b2 { fill: color-mix(in srgb, var(--akzent) 22%, transparent); stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.eb-leer { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.eb-zone { fill: color-mix(in srgb, var(--akzent) 42%, transparent); stroke: none; } .eb-rand { stroke: var(--text-3); stroke-width: 1; }
.eb-mauer { fill: color-mix(in srgb, var(--text) 18%, transparent); stroke: var(--text-3); stroke-width: 1; }
.eb-wandflaeche { fill: var(--flaeche); stroke: none; } .eb-oeffnung { fill: var(--flaeche-2); stroke: var(--text-2); stroke-width: 1.8; }
.merke { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-weich); display: grid; gap: 4px; font-weight: 600; }
.merke .marke { color: var(--warn); }
.hinweis-sicher { margin: 0; font-size: 0.875rem; color: var(--tint); }
.quelle { margin: 0; }
.loesung-reihe { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.aktion-weiter { margin-top: 6px; }
@media (max-width: 700px) { .aktion-weiter { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); } }
.runde-ende h1 { margin-top: 10px; }
.runde-ende .unter { margin: 14px 0 26px; }
.liste-falsch { padding: 20px 22px; margin-bottom: 26px; }
.liste-falsch ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); }
.lern-leer .unter { margin: 14px 0 26px; }

/* ---------- Fortschritt ---------- */
.segment { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; margin: 22px 0 26px; border-radius: 10px; background: var(--linie); }
.segment a { padding: 7px 18px; border-radius: 8px; color: var(--text); font-size: 0.9375rem; font-weight: 500; text-align: center; }
.segment a:hover { text-decoration: none; }
.segment a[aria-selected="true"] { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.hinweis-leer { margin: 0 0 18px; }
.vorbereitung { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 36px); align-items: center; padding: clamp(20px, 4vw, 32px); }
.vorbereitung h2 { margin: 6px 0 8px; }
.vorbereitung .klein { margin: 0; max-width: 52ch; }
@media (max-width: 520px) { .vorbereitung { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ring { width: 76px; height: 76px; }
.ring.gross { width: clamp(132px, 30vw, 156px); height: clamp(132px, 30vw, 156px); }
.ring-grund { fill: none; stroke: var(--linie); }
.ring-wert { fill: none; stroke: var(--akzent); stroke-linecap: round; }
.ring.gut .ring-wert { stroke: var(--gut); } .ring.mittel .ring-wert { stroke: var(--warn); } .ring.schwach .ring-wert { stroke: var(--schlecht); }
.ring-text { fill: var(--text); font: 700 18px -apple-system, system-ui, sans-serif; letter-spacing: -0.02em; }
.ring.gross .ring-text { font-size: 30px; }
.zwischen { margin: 38px 0 14px; }
.bereiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bereich { padding: 20px; display: grid; gap: 12px; }
.bereich h3 { font-size: 1rem; margin-top: 4px; }
.bereich-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bereich-zahlen > div { display: grid; gap: 2px; }
.gross-zahl { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.gross-zahl small { font-size: 0.875rem; color: var(--text-3); margin-left: 2px; letter-spacing: 0; }
.gut { color: var(--gut); } .mittel { color: var(--warn); } .schwach { color: var(--schlecht); }
.ehrlich-klein { margin: 14px 0 0; max-width: 80ch; }
.themen-liste { padding: 6px 8px; }
.themen-zeile { display: grid; grid-template-columns: 12px minmax(0, 1.4fr) minmax(60px, 1fr) 3.5em; gap: 12px; align-items: center; padding: 12px 10px; color: var(--text); border-radius: 10px; }
.themen-zeile + .themen-zeile { border-top: 1px solid var(--linie); }
.themen-zeile:hover { background: var(--flaeche-2); text-decoration: none; }
.tz-name { font-size: 0.9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-wert { text-align: right; font-size: 0.875rem; color: var(--text-2); }
@media (max-width: 520px) {
  .themen-zeile { grid-template-columns: 12px 1fr 3.5em; row-gap: 6px; }
  .themen-zeile .thema-punkt { grid-row: 1; grid-column: 1; }
  .themen-zeile .tz-name { grid-row: 1; grid-column: 2; }
  .themen-zeile .tz-wert { grid-row: 1; grid-column: 3; }
  .themen-zeile .balken { grid-row: 2; grid-column: 2 / 4; }
}
.aktivitaet { padding: 20px; }
.saeulen { height: 120px; display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; }
.saeule { height: 100%; display: flex; align-items: flex-end; }
.saeule i { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: max(3px, calc(var(--wert, 0) * 100%)); background: var(--schlecht); border-radius: 4px; overflow: hidden; opacity: 0.85; }
.saeule i[data-wert="0.000"] { background: var(--linie); opacity: 1; }
.saeule b { display: block; height: calc(var(--wert, 0) * 100%); background: var(--gut); }
.saeulen-achse { display: flex; justify-content: space-between; margin-top: 8px; }
.legende { display: flex; gap: 16px; margin-top: 6px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg.richtig { background: var(--gut); } .lg.falsch { background: var(--schlecht); }
.verlauf { display: grid; gap: 10px; }
.tag-kopf { margin: 18px 0 2px; font-size: 0.9375rem; color: var(--text-2); }
.runde { overflow: hidden; }
.runde-kopf { width: 100%; display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border: 0; background: none; text-align: left; cursor: pointer; }
.runde-kopf:active { background: var(--flaeche-2); }
.runde-quote { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.runde-text { display: grid; gap: 2px; }
.pfeil { font-size: 1.5rem; color: var(--text-3); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); }
.runde-kopf[aria-expanded="true"] .pfeil { transform: rotate(90deg); }
.runde-details { padding: 0 18px 18px; display: grid; gap: 14px; }
.runde-details ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.runde-details li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 0.9375rem; }
.runde-details li.r .zeichen-klein { color: var(--gut); } .runde-details li.f .zeichen-klein { color: var(--schlecht); }
.anleitung { margin: 18px 0 0; padding: 12px 14px 12px 34px; border-radius: 12px; background: var(--tint-weich); color: var(--tint); font-size: 0.875rem; font-weight: 600; display: grid; gap: 2px; }
.aktion.bereit .sicher .knopf:not([disabled]) { animation: aufleuchten 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes aufleuchten { 0% { transform: scale(1); } 40% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--tint-weich); } 100% { transform: scale(1); } }
.tasten-hinweis { display: none; margin: 16px 0 0; text-align: center; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .tasten-hinweis { display: block; } }

/* ---------- Probeprüfung ---------- */
.pruef-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.pruef-karte { position: relative; display: grid; gap: 6px; padding: 22px 44px 22px 22px; color: var(--text); text-align: left; border: 0; cursor: pointer; transition: transform 0.1s ease-out, box-shadow 0.2s; }
.pruef-karte:hover { box-shadow: var(--schatten-2); text-decoration: none; }
.pruef-karte:active { transform: scale(0.98); }
.pruef-karte .pfeil { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.zurueck-link { margin: 0 0 12px -12px; }
.regeln { margin: 22px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.uhr { justify-self: center; font-size: 1.0625rem; font-weight: 600; padding: 6px 14px; border-radius: 980px; background: var(--flaeche); box-shadow: var(--schatten-1); }
.uhr.knapp { color: var(--schlecht); background: var(--schlecht-weich); }
.fragen-netz { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fragen-netz button { width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; font-size: 0.8125rem; font-weight: 600; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); color: var(--text-2); position: relative; }
.fragen-netz button.fertig { background: var(--tint-weich); color: var(--tint); box-shadow: none; }
.fragen-netz button.jetzt { background: var(--akzent); color: var(--auf-akzent); }
.fragen-netz button.markiert::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--grund); }
.pruef-knoepfe { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.pruef-knoepfe #vor { margin-left: auto; }
.runde-details .urteil { font-size: 1rem; }

/* ---------- Formeln ---------- */
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }
.werkzeug { padding: clamp(18px, 4vw, 26px); display: grid; gap: 16px; align-content: start; }
.werkzeug.breit { grid-column: 1 / -1; }
.ohm-zeile { display: flex; align-items: baseline; gap: 10px; }
.ohm-wert { font-size: clamp(2.5rem, 8vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ohm-wert b { font-weight: 700; }
.ohm-bild { width: 100%; height: auto; }
.ohm-leitung { fill: var(--linie); }
.ohm-fluss { fill: var(--kupfer); transition: width 0.15s ease-out; }
.regler { display: grid; gap: 8px; }
.regler label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9375rem; font-weight: 500; }
.regler output { font-weight: 600; color: var(--tint); }
.regler input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; touch-action: pan-y; }
.regler input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--akzent) calc(var(--anteil, 0) * 100%), var(--linie) 0); }
.regler input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--linie); }
.regler input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--akzent); }
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12); transition: transform 0.12s ease-out; }
.regler input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12); }
.regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.formel-zeile { margin: 0; }
.formel-zeile code, .formel code { font: 600 0.9375rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
.zeiger-bild { width: 100%; height: auto; overflow: visible; }
.achse { stroke: var(--linie); stroke-width: 1.5; stroke-dasharray: 4 5; }
.zeiger-u { stroke: var(--n); stroke-width: 4; stroke-linecap: round; }
.zeiger-i { stroke: var(--schlecht); stroke-width: 4; stroke-linecap: round; }
.zeiger-iw { stroke: var(--gut); stroke-width: 7; stroke-linecap: round; opacity: 0.85; }
.zeiger-ib { stroke: var(--warn); stroke-width: 3; stroke-dasharray: 5 4; }
.pfeil-u { fill: var(--n); } .pfeil-i { fill: var(--schlecht); }
.bogen { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.z-text { fill: var(--text-2); font: 600 14px -apple-system, system-ui, sans-serif; }
.z-text.u { fill: var(--n); } .z-text.i { fill: var(--schlecht); }
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.leistungen > div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); }
.leistungen b { font-size: 1.125rem; letter-spacing: -0.01em; }
.leistungen > div:nth-child(1) b { color: var(--gut); } .leistungen > div:nth-child(2) b { color: var(--warn); }
.segment.klein-seg { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.segment.klein-seg button { border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.segment.klein-seg button[aria-checked="true"] { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.sf-a select { height: 46px; padding: 0 12px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--flaeche-2); font-size: 1rem; }
.sf-ergebnis { display: grid; gap: 8px; }
.sf-ergebnis p { margin: 0; }
.sf-ergebnis b { font-size: 2rem; letter-spacing: -0.02em; }
.sf-balken { position: relative; height: 10px; border-radius: 10px; background: var(--linie); }
.sf-balken i { display: block; height: 100%; border-radius: 10px; width: calc(var(--wert, 0) * 100%); background: var(--gut); transition: width 0.25s cubic-bezier(.2,.8,.2,1), background 0.2s; }
.sf-balken i.mittel-b { background: var(--warn); } .sf-balken i.schwach-b { background: var(--schlecht); }
.sf-grenze { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; background: var(--text); border-radius: 2px; }
.sf-grenze::after { content: "3 %"; position: absolute; top: -20px; left: -10px; font-size: 0.6875rem; font-weight: 600; color: var(--text-2); }
.zwischen-gross { margin: 56px 0 16px; }
.suche input { height: 46px; }
.sammlung { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.gruppe-f { padding: 18px 20px; display: grid; gap: 0; align-content: start; }
.gruppe-f h3 { margin-bottom: 8px; }
.formel { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--linie); }
.f-name { font-size: 0.875rem; color: var(--text-2); font-weight: 500; }
.melden { border: 0; background: none; padding: 0; color: var(--text-3); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.melden:hover { color: var(--schlecht); }
.feld textarea { padding: 12px 14px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--flaeche-2); font-size: 1rem; resize: vertical; }
.feld textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--akzent-weich); }

/* ---------- Werkstatt ---------- */
.werkstatt { padding-bottom: 32px; }
.werk-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "text flaeche" "knoepfe flaeche"; gap: 16px 24px; align-items: start; }
.werk-text { grid-area: text; } .werk-flaeche { grid-area: flaeche; } .werk-knoepfe { grid-area: knoepfe; display: grid; gap: 12px; }
@media (max-width: 760px) { .werk-raster { grid-template-columns: 1fr; grid-template-areas: "text" "flaeche" "knoepfe"; } }
.werk-text h1 { margin: 6px 0 10px; }
.werk-text p { margin: 0 0 10px; line-height: 1.5; }
.werk-tipp summary { cursor: pointer; color: var(--tint); font-weight: 600; }
.werk-hilfe { min-height: 2.9em; }
.werk-flaeche { position: relative; padding: 10px; touch-action: pan-y pinch-zoom; }   /* leere Fläche scrollt; Anschlüsse sperren per touchstart (werkstatt.js) */
.werk-flaeche svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.werk-zeile { display: flex; justify-content: space-between; gap: 10px; }
.werk-zeile #werk-pruefen { flex: 1; max-width: 220px; margin-left: auto; }
.w-draht { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.w-draht.dick { stroke-width: 3; } .w-draht.duenn { stroke-width: 1.6; stroke-dasharray: 3 3; }
.w-draht.hebel { stroke-width: 2.8; transition: d 0.15s; }
.w-kasten { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: 1.5; }
.w-t { fill: var(--text-2); font: 600 13px -apple-system, system-ui, sans-serif; text-anchor: middle; }
.w-t.l { text-anchor: start; } .w-t.r { text-anchor: end; }
.w-k { fill: var(--text-3); font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
.w-k.klein { text-anchor: start; font-size: 10px; }
.w-leuchte { fill: var(--flaeche); stroke: var(--text); stroke-width: 2.4; transition: fill 0.2s; }
.w-leuchte.an { fill: #ffd479; stroke: var(--warn); filter: drop-shadow(0 0 10px rgba(255, 196, 0, 0.8)); }
.w-x { stroke: var(--text); stroke-width: 2.2; }
.w-glanz { fill: none; } .w-glanz.an { fill: rgba(52, 199, 89, 0.15); }
.w-spule { fill: var(--flaeche); stroke: var(--text); stroke-width: 2.4; transition: fill 0.2s; }
.w-spule.an { fill: var(--text); stroke: var(--text); }
.w-zeit-halb { fill: var(--text); stroke: none; }   /* Zeitrelais: halb gefüllte Spule (links anzugs-, rechts abfallverzögert) */
.w-spule.an + .w-zeit-halb { fill: var(--flaeche); }
.w-anschluss { cursor: pointer; }
.w-treff { fill: transparent; }
.w-punkt { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; transition: r 0.15s, fill 0.15s; }
.w-anschluss:hover .w-punkt { fill: var(--linie); stroke: var(--text); }
.w-anschluss.gewaehlt .w-punkt { fill: var(--text); stroke: var(--text); r: 9; animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { stroke-width: 7; stroke-opacity: 0.35; } }
.w-leitung { cursor: pointer; }
.w-trefffl { fill: none; stroke: transparent; stroke-width: 18; }
.w-linie { fill: none; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.w-leitung.schalt .w-linie { stroke: var(--text-2); }
.w-leitung.l .w-linie { stroke: var(--l1); } .w-leitung.n .w-linie { stroke: var(--n); } .w-leitung.pe .w-linie { stroke: var(--pe); }
.w-pe-gelb { fill: none; stroke: var(--pe-gelb); stroke-width: 3.4; stroke-dasharray: 7 7; }
.w-leitung:hover .w-linie { stroke-width: 5; }
.w-leitung.geist { pointer-events: none; opacity: 0.35; }
.w-leitung.geist .w-linie { stroke-dasharray: 2 6; }
svg.probieren .bedienbar { cursor: pointer; }
svg.probieren .w-bedien-flaeche { fill: var(--warn-weich); stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 4; }
svg.probieren .bedienbar:active .w-bedien-flaeche { fill: rgba(240, 165, 49, 0.3); }
.werk-ergebnis:empty { display: none; }
/* Beschriftungen bleiben lesbar, auch wenn eine Leitung nah vorbeiläuft: Hof in Flächenfarbe */
.w-k.halo, .w-t { paint-order: stroke; stroke: var(--flaeche); stroke-width: 4px; stroke-linejoin: round; }
.w-k.klein { font-size: 11px; font-weight: 700; fill: var(--text-2); }
/* Stromfluss beim Ausprobieren */
.w-strom { pointer-events: none; }
.w-strom-linie { fill: none; stroke: #ff3b30; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.w-pfeil { fill: #ff3b30; stroke: var(--flaeche); stroke-width: 1.4; paint-order: stroke; }
.w-strom.kurz .w-strom-linie { stroke-width: 5; animation: kurzschluss 0.5s steps(2) infinite; }
@keyframes kurzschluss { 50% { opacity: 0.25; } }
.w-bauteil.strom .w-draht.hebel { filter: drop-shadow(0 0 3px rgba(255, 59, 48, 0.9)) drop-shadow(0 0 1px rgba(255, 59, 48, 1)); }
@media (prefers-reduced-motion: reduce) { .w-strom.kurz .w-strom-linie { animation: none; } }
/* Bedienfeld beim Ausprobieren */
.werk-bedien { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.werk-bedien .knopf { grid-column: 1 / -1; }
.bed-schalter, .bed-taster { display: grid; gap: 2px; justify-items: start; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 0; cursor: pointer; text-align: left;
  background: var(--flaeche); box-shadow: inset 0 0 0 1.5px var(--linie), var(--schatten-1); transition: transform 0.1s ease-out, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
.bed-name { font-weight: 700; font-size: 1rem; }
.bed-zustand { font-size: 0.8125rem; color: var(--text-2); }
.bed-schalter.an { background: var(--linie); box-shadow: inset 0 0 0 2px var(--text); }
.bed-schalter.an .bed-zustand { color: var(--text); font-weight: 600; }
.bed-schalter:active { transform: scale(0.97); }
.bed-taster.gedrueckt { transform: scale(0.95) translateY(1px); background: var(--warn-weich); box-shadow: inset 0 0 0 2px var(--warn), inset 0 3px 8px rgba(0,0,0,.12); }
.werk-status { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px; }
.chip-status { padding: 5px 11px; border-radius: 980px; font-size: 0.8125rem; font-weight: 600; background: var(--linie); color: var(--text-2); transition: background 0.2s, color 0.2s; }
.chip-status.an { background: rgba(255, 196, 0, 0.22); color: var(--warn); }
.werk-hilfe .gut { color: var(--gut); font-weight: 700; } .werk-hilfe .schwach { color: var(--schlecht); font-weight: 600; }
.chip-status.alarm { background: var(--schlecht); color: #fff; animation: kurzschluss 0.8s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .chip-status.alarm { animation: none; } }

/* Verdrahten: Ziehen, Magnet, Markieren */
.w-punkt { r: 7.5; }
.w-anschluss.ziel .w-punkt { stroke: var(--text); }
.w-anschluss.magnet .w-punkt { fill: var(--text); stroke: var(--text); r: 10; }
.w-band { fill: none; stroke: var(--text); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; pointer-events: none; }
.w-band.fest { stroke-dasharray: none; }
.w-knoten { fill: var(--text-2); stroke: var(--flaeche); stroke-width: 1.5; pointer-events: none; }
.w-knoten.l { fill: var(--l1); } .w-knoten.n { fill: var(--n); } .w-knoten.pe { fill: var(--pe); }
.w-leitung.l2 .w-linie { stroke: var(--l2); } .w-leitung.l3 .w-linie { stroke: var(--l3); }
.w-knoten.l2 { fill: var(--l2); } .w-knoten.l3 { fill: var(--l3); }
/* Anschluss belegt: Ring in Aderfarbe gefüllt (hohl = frei) */
.w-anschluss.belegt .w-punkt, .w-punkt.voll { fill: var(--text-2); }
.w-anschluss.belegt.l .w-punkt { fill: var(--l1); } .w-anschluss.belegt.l2 .w-punkt { fill: var(--l2); } .w-anschluss.belegt.l3 .w-punkt { fill: var(--l3); }
.w-anschluss.belegt.n .w-punkt { fill: var(--n); } .w-anschluss.belegt.pe .w-punkt { fill: var(--pe); }
.werk-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text-2); }
.werk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.werk-legende svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.w-legende-linie { fill: none; stroke: var(--text-2); stroke-width: 2.4; }
.w-draht.duenn-voll { stroke-width: 1.6; }
.w-wicklung { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-dasharray: 4 3; }
.w-motor { fill: var(--flaeche); stroke: var(--text); stroke-width: 2.4; transition: fill 0.2s; }
.w-motor.an { fill: rgba(52, 199, 89, 0.22); }
.w-lauf { fill: none; stroke: var(--gut); stroke-width: 3; stroke-dasharray: 9 7; animation: lauf-rechts 0.8s linear infinite; }
.w-lauf.links { animation-name: lauf-links; }
@keyframes lauf-rechts { to { stroke-dashoffset: -32; } }
@keyframes lauf-links { to { stroke-dashoffset: 32; } }
@media (prefers-reduced-motion: reduce) { .w-lauf { animation: none; } }
.w-leitung.markiert .w-linie { stroke-width: 6; filter: drop-shadow(0 0 4px var(--text)); }
.w-dose { fill: var(--flaeche); stroke: var(--text); stroke-width: 2.4; transition: fill 0.2s; }
.w-dose.an { fill: rgba(52, 199, 89, 0.22); }
.werk-entfernen { position: absolute; transform: translate(-50%, -140%); min-height: 38px; padding: 0 14px; font-size: 0.875rem; background: var(--schlecht); color: #fff; box-shadow: var(--schatten-2); z-index: 2; }
.werk-liste { padding: 0; }
.werk-liste summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.werk-liste summary::-webkit-details-marker { display: none; }
.werk-liste ul { list-style: none; margin: 0; padding: 0 18px; }
.werk-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); font: 600 0.875rem ui-monospace, "SF Mono", Menlo, monospace; }
.werk-liste li.markiert { color: var(--text); }
.werk-liste li .knopf { min-height: 34px; font-family: inherit; font-size: 0.8125rem; }
.werk-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px 16px; border-top: 1px solid var(--linie); }
.werk-neu select { flex: 1; min-width: 110px; height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche-2); font: 600 0.875rem ui-monospace, "SF Mono", Menlo, monospace; }

.w-dreh { fill: var(--text); }

/* ---------- LOGO!-Werkstatt ---------- */
.logo-legende { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.logo-legende strong { display: inline-block; min-width: 2.4em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.logo-leitung { fill: none; stroke-width: 3; stroke-linejoin: round; transition: stroke 0.15s; }
.logo-leitung.null { stroke: var(--text-3); } .logo-leitung.leer { stroke: var(--linie); stroke-dasharray: 4 4; }
.logo-leitung.eins { stroke: var(--gut); stroke-width: 3.6; filter: drop-shadow(0 0 3px rgba(52, 199, 89, 0.55)); }
.logo-pin { stroke: var(--text); stroke-width: 2; }
.logo-ein, .logo-block.frei { cursor: pointer; }
.logo-ein:focus, .logo-block:focus { outline: none; }
.logo-ein:focus-visible .logo-ein-feld, .logo-block:focus-visible .logo-kasten { stroke: var(--akzent); stroke-width: 4; }
.logo-abzweig { fill: var(--text-3); } .logo-abzweig.eins { fill: var(--gut); } .logo-abzweig.leer { fill: var(--linie); }
.logo-ein-feld { fill: var(--flaeche-2); stroke: var(--text); stroke-width: 2; transition: fill 0.15s; }
.logo-ein.an .logo-ein-feld, .logo-aus.an .logo-ein-feld { fill: var(--gut-weich); stroke: var(--gut); }
.logo-ein:active .logo-ein-feld { fill: var(--linie); }
.logo-t { fill: var(--text); font: 700 15px ui-monospace, "SF Mono", Menlo, monospace; }
.logo-t.mitte, .logo-wert.mitte { text-anchor: middle; }
.logo-wert { fill: var(--text-2); font: 700 18px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: end; }
.logo-ein.an .logo-wert, .logo-aus.an .logo-wert { fill: var(--gut); }
.logo-kasten { fill: var(--flaeche); stroke: var(--text); stroke-width: 2.2; }
.logo-block.offen .logo-kasten { stroke: var(--text); stroke-dasharray: 5 4; fill: var(--linie); }
.logo-block.gewaehlt .logo-kasten { stroke: var(--text); stroke-width: 3; fill: var(--linie); }
.logo-zeichen { fill: var(--text); font: 700 20px -apple-system, system-ui, sans-serif; text-anchor: middle; }
.logo-block.offen .logo-zeichen { fill: var(--text); }
.logo-neg { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.logo-name { fill: var(--text-3); font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: end; }
.logo-zeichen.klein { font-size: 16px; }
.logo-pinname { fill: var(--text-2); font: 600 9.5px ui-monospace, "SF Mono", Menlo, monospace; }
.logo-par { fill: var(--text-2); font: 600 10.5px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
.logo-ein.fix { cursor: default; }
.logo-gruppe { margin: 40px 0 0; font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; }
.logo-gruppe .klein { color: var(--text-2); font-weight: 500; }
.logo-gruppe + .pruef-wahl { margin-top: 14px; }
.logo-optionen.breit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.logo-option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.logo-option small { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; line-height: 1.3; color: var(--text-2); }
.zeit-karte { margin-top: 12px; padding: 10px 12px 12px; }
.zeit-karte svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: pointer; }
.zd-null { stroke: var(--linie); stroke-width: 1; }
.zd-name { fill: var(--text-2); font: 700 12px ui-monospace, "SF Mono", Menlo, monospace; }
.zd-achse { fill: var(--text-3); font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
.zd-spur { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linejoin: round; }
.zd-spur.q { stroke: var(--gut); stroke-width: 2.6; }
.zd-soll { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.zd-soll.eins { fill: var(--text); }
.zd-cursor { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 3; }
.zeit-regler { display: grid; gap: 4px; margin-top: 8px; font-size: 0.9375rem; font-weight: 600; }
.zeit-regler output { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.zeit-regler input { width: 100%; height: 32px; accent-color: var(--akzent); }
.zeit-legende { margin: 6px 0 0; }
.logo-wahl { display: grid; gap: 8px; }
.logo-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.logo-option { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 0; cursor: pointer; background: var(--flaeche); box-shadow: inset 0 0 0 1.5px var(--linie); text-align: left; font-size: 0.9375rem; font-weight: 500; }
.logo-option:active { transform: scale(0.97); }
.logo-option.an { box-shadow: inset 0 0 0 2px var(--text); background: var(--linie); }
.logo-sym { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; border: 2px solid var(--text); font-weight: 700; flex: none; }
.logo-sym i { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.75rem; line-height: 1; }
.wahrheit { width: 100%; border-collapse: collapse; margin-top: 10px; font: 600 0.9375rem ui-monospace, "SF Mono", Menlo, monospace; text-align: center; }
.wahrheit th { color: var(--text-2); padding: 6px; border-bottom: 2px solid var(--linie); }
.wahrheit td { padding: 6px; border-bottom: 1px solid var(--linie); }
.wahrheit tr.eins td:last-child { color: var(--gut); }
.logo-led { fill: var(--flaeche); stroke: var(--text-3); stroke-width: 1.5; }
.logo-ein.an .logo-led { fill: var(--gut); stroke: var(--gut); }
.logo-ein.an .logo-led + .logo-wert { fill: #fff; }

/* ---------- Üben (Zentrale) ---------- */
.uebungsarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 24px; }
.uebungsart { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 18px; color: var(--text); transition: transform 0.1s ease-out, box-shadow 0.2s; }
.uebungsart:hover { box-shadow: var(--schatten-2); text-decoration: none; }
.uebungsart:active { transform: scale(0.98); }
.uebungsart h3 { font-size: 1.0625rem; }
.uebungsart p { margin: 2px 0 0; font-size: 0.875rem; color: var(--text-2); line-height: 1.4; }

/* ---------- Kundenaufträge ---------- */
.projekt-kopf { margin-bottom: 12px; max-width: 720px; }
.unterlagen summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.unterlagen summary::-webkit-details-marker { display: none; }
.unterlagen summary > span:first-child { display: grid; gap: 2px; }
.unterlagen summary .klein { color: var(--tint); font-weight: 600; white-space: nowrap; }
.unterlagen[open] summary .klein::after { content: " ▲"; } .unterlagen:not([open]) summary .klein::after { content: " ▼"; }
.situation { margin: 0 18px 12px; line-height: 1.55; }
.unterlagen dl { margin: 0; padding: 0 18px 16px; display: grid; gap: 0; }
.unterlagen dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 0.9375rem; }
.unterlagen dt { color: var(--text-2); }
.unterlagen dd { margin: 0; font-weight: 600; }

/* ---------- Fachgespräch ---------- */
.fach-hinweis { margin: -6px 0 18px; }
.fach-loesung { display: grid; gap: 14px; margin-top: 4px; }
.fach-muster { padding: 16px 18px; background: var(--flaeche-2); }
.fach-muster p { margin: 8px 0 0; line-height: 1.55; }
.lern-karte .situation { margin: 12px 0 0; color: var(--text-2); }
/* Ladezustand, bis die Fragen da sind – nie eine leere Seite */
.laedt { min-height: 60dvh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--text-2); font-size: 0.9375rem; }
.laedt-punkt { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--linie); border-top-color: var(--akzent); animation: drehen 0.9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .laedt-punkt { animation-duration: 3s; } }
@media (max-width: 520px) {
  .uebungsarten { grid-template-columns: 1fr 1fr; gap: 10px; }
  .uebungsart { grid-template-columns: 1fr; gap: 10px; align-items: start; align-content: start; padding: 14px; }
  .ua-symbol { width: 38px; height: 38px; padding: 5px; }
  .uebungsart h3 { font-size: 0.9375rem; }
  .uebungsart p { font-size: 0.8125rem; }
}
.w-pfeilklemme { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Auswertung hat Vorrang vor der Auswahlfarbe: richtig gewählt = grün, falsch gewählt = rot, vergessen = grün gestrichelt */
.lern-karte .option.richtig, .lern-karte .option.richtig:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gut); background: var(--gut-weich); }
.lern-karte .option.richtig .buchstabe { background: var(--gut); color: #fff; }
.lern-karte .option.falsch, .lern-karte .option.falsch:has(input:checked) { box-shadow: inset 0 0 0 2px var(--schlecht); background: var(--schlecht-weich); }
.lern-karte .option.falsch .buchstabe { background: var(--schlecht); color: #fff; }
.lern-karte .option.fehlte { background: transparent; box-shadow: inset 0 0 0 2px var(--gut); outline: 2px dashed var(--gut); outline-offset: -6px; }
.lern-karte .option.fehlte .otext::after { content: "  · fehlte"; color: var(--gut); font-weight: 600; font-size: 0.875rem; }
.quelle, .falle, .warum, .kurz { overflow-wrap: anywhere; }

/* Rundenende: die Leuchte geht an, Helligkeit = Anteil richtig */
.ende-leuchte { width: 120px; height: 120px; margin: 0 0 20px -6px; overflow: visible; --hell: 0.6; }
.el-schein { opacity: 0; transform-origin: 60px 60px; animation: schein 1.1s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.el-glas { fill: #f7f8f6; stroke: var(--text); stroke-width: 4; }
.el-kreuz { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draht 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.el-glas { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draht 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.el-licht { fill: #ffd45c; opacity: 0; animation: licht 0.9s 0.7s ease-out forwards; }
@keyframes draht { to { stroke-dashoffset: 0; } }
@keyframes schein { from { opacity: 0; transform: scale(0.5); } to { opacity: calc(0.3 + var(--hell) * 0.7); transform: scale(1.15); } }
@keyframes licht { to { opacity: calc(0.25 + var(--hell) * 0.75); } }
.ende-leuchte .el-kreuz { stroke: #16191b; }
@media (prefers-reduced-motion: reduce) {
  .el-glas, .el-kreuz, .el-schein, .el-licht { animation-duration: 0.01ms; animation-delay: 0s; }
  .fortschritt-leiste.impuls::after { display: none; }
}

/* Seitenwechsel (View Transitions): Inhalt wechselt weich, die Leisten bleiben stehen */
.leiste { view-transition-name: leiste; }
.tabs { view-transition-name: tabs; }
::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-raus; }
::view-transition-new(root) { animation: 340ms cubic-bezier(0.16, 1, 0.3, 1) both vt-rein; }
@keyframes vt-raus { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* ---------- KNX-Werkstatt (knx.js) ---------- */
.knx-gesamt { margin: 18px 0 0; font-weight: 600; color: var(--text-2); }
.knx-gesamt .zahl { font-family: var(--schrift-schild); font-size: 1.5rem; color: var(--text); }
.knx-art-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.knx-art-kopf .klein { color: var(--text-2); font-weight: 600; font-family: var(--schrift-schild); }
.knx-art-kurz { margin: 0; color: var(--text-2); }
.knx-art-kurz + .pruef-wahl { margin-top: 14px; }
.knx-kopf-art { text-align: center; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knx-einspaltig.werk-raster { grid-template-columns: minmax(0, 720px); grid-template-areas: "text" "knoepfe"; }
.knx-hinweis { color: var(--text-2); }
.knx-flaeche { padding: 8px; }
.knx-svg { width: 100%; height: auto; display: block; }
.knx-bus { fill: none; stroke: var(--pe); stroke-width: 3; stroke-linecap: round; }
.knx-knoten { fill: var(--pe); stroke: var(--flaeche); stroke-width: 1.5; }
.knx-linie { fill: var(--text-2); font: 600 13px var(--schrift-schild); letter-spacing: 0.01em; }
.knx-kasten { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: 1.5; }
.knx-reg { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.4; }
.knx-nut { stroke: var(--text-3); stroke-width: 1; }
.knx-schild { fill: var(--text-3); } .knx-schild.sv { fill: var(--pe); }
.knx-up { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.4; }
.knx-wippe { fill: none; stroke: var(--text-3); stroke-width: 1.2; }
.knx-name { fill: var(--text); font: 500 14px Barlow, system-ui, sans-serif; }
.knx-info { fill: var(--text-2); font: 600 11.5px ui-monospace, "SF Mono", Menlo, monospace; }
.knx-adr { fill: var(--text); font: 700 14px ui-monospace, "SF Mono", Menlo, monospace; }
.knx-adr.mitte { text-anchor: middle; } .knx-adr.ende, .knx-ohne.ende { text-anchor: end; }
.knx-ohne { fill: var(--text-3); font: 500 12px Barlow, system-ui, sans-serif; }
.knx-chip-svg { fill: var(--linie); stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.knx-chip-svg.gesetzt { fill: var(--flaeche); stroke-dasharray: none; }
.knx-frage { cursor: pointer; }
.knx-frage:focus { outline: none; }
.knx-frage:focus-visible .knx-kasten, .knx-frage.gewaehlt .knx-kasten { stroke: var(--akzent); stroke-width: 3; }
.knx-frage.gewaehlt .knx-chip-svg { fill: var(--akzent-weich); }
.knx-frage:active .knx-kasten { fill: var(--linie); }
.knx-wahl { display: grid; gap: 8px; min-height: 5.5em; }
.knx-wahl p { margin: 0; }
.knx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.knx-chip { min-height: 40px; min-width: 58px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer; background: var(--flaeche); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--linie); font: 600 0.875rem ui-monospace, "SF Mono", Menlo, monospace; -webkit-tap-highlight-color: transparent; }
.knx-chips-gross .knx-chip { min-height: 48px; min-width: 84px; font-size: 1rem; }
.knx-chip:active { transform: scale(0.96); }
.knx-chip:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.knx-chip[aria-checked="true"], .knx-chip[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); box-shadow: none; }
.knx-chip:disabled { cursor: default; opacity: 0.55; }
.knx-plan { padding: 14px 16px; }
.knx-h { font-size: 1.25rem; margin-bottom: 6px; }
.knx-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.knx-tabelle td { padding: 6px 6px 6px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.knx-ga { font: 700 0.9375rem ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
.knx-breite { color: var(--text-2); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.knx-objekte { display: grid; gap: 10px; margin-top: 12px; }
.knx-geraet { padding: 12px 14px; }
.knx-geraet-name { display: flex; align-items: center; gap: 8px; font: 600 1.0625rem var(--schrift-schild); margin: 0 0 4px; }
.knx-geraet-name svg { width: 26px; height: 26px; flex: none; }
.knx-objekt { padding: 8px 0; border-top: 1px solid var(--linie); display: grid; gap: 6px; }
.knx-obj-name { margin: 0; font-weight: 500; }
.knx-chipzeile { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; align-items: center; }
.knx-chiplabel { font-size: 0.8125rem; color: var(--text-2); font-weight: 600; }
.knx-pruefen { flex: 1; max-width: 220px; margin-left: auto; }
.knx-fehler { margin: 6px 0 0; padding-left: 1.1em; }
.knx-fehler li + li { margin-top: 4px; }
.knx-erklaerung { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-klein); background: var(--flaeche); box-shadow: var(--schatten-1); line-height: 1.5; }
.knx-erklaerung p { margin: 0 0 8px; }
.knx-quelle { color: var(--text-2); overflow-wrap: anywhere; }
.knx-melden { padding: 0; min-height: 36px; font-size: 0.875rem; }
.knx-zahl { max-width: 420px; min-width: 0; padding: 0 12px; gap: 8px; }
.knx-zahl .einheit { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.knx-raster.werk-raster { grid-template-rows: auto 1fr; }
.knx-raster .werk-knoepfe { align-self: start; }
.knx-raster > .werk-flaeche-huelle { grid-area: flaeche; min-width: 0; }
.knx-flaeche .knx-svg { max-width: 460px; margin: 0 auto; }
.knx-zahl .vorzeichen { margin-right: 0; }

/* ---------- Formelsatz (MathML, formelsatz.js) ---------- */
math.fs { font-size: 1.14em; color: inherit; }
/* eigene Zeile: Brüche in voller Größe, linksbündig wie der Text darum */
math.fs[display="block"] { display: block math; margin: 0.1em 0; text-align: left; font-size: 1.2em; }
.fs-zeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.6em; row-gap: 0.2em; min-width: 0; }
.fs-zeile math.fs[display="block"] { display: inline math; }
.fs-zeile > .fs-wort, .fs-wort { font-size: 0.9375rem; color: var(--text-2); }
math.fs mi.w { font-family: inherit; font-size: 0.92em; }
math.fs mi, math.fs mn, math.fs mo { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math, serif; }
.schritte .fs-zeile { font-size: 1rem; }
.formel .fs-zeile, .kat-formel { font-size: 1rem; }
.otext math.fs, .lern-frage math.fs { font-size: 1.1em; }
.lern-frage math.fs { font-weight: 500; }

/* ---------- Hinweise aufdecken ---------- */
.hinweise { margin: 16px 0 18px; display: grid; gap: 10px; }
.hinweis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hinweis-liste:empty { display: none; }
.hinweis { display: grid; gap: 4px; padding: 10px 14px 12px; border-radius: 12px; background: var(--flaeche-2); box-shadow: inset 4px 0 0 var(--akzent), inset 0 0 0 1px var(--linie); animation: hinweis-ein 0.32s cubic-bezier(.2,.8,.2,1); }
.hinweis-nr { font-family: var(--schrift-schild); font-weight: 600; font-size: 1rem; color: var(--text-2); }
.hinweis-text { font-size: 0.9375rem; line-height: 1.5; }
.hinweis-formel { font-size: 1.05rem; padding-top: 2px; }
.hinweis-knopf { justify-self: start; min-height: 44px; gap: 10px; padding-inline: 16px; }
.hinweis-taste { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--linie); font: 600 0.75rem/1 var(--schrift-schild); color: var(--text-2); }
@media (hover: none) { .hinweis-taste { display: none; } }
@keyframes hinweis-ein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hinweis { animation: none; } }