/* Zeiger-Labor · Gestaltung
   Grundgerüst: Farbschema, Ränder für Geräte mit Notch, versteckte Elemente. */
:root { color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.noscript { margin: 24px 16px; padding: 12px 14px; border: 1px solid #d4dae3; border-radius: 10px; font: 15px/1.5 system-ui, sans-serif; }

/* Layout: Kopf, darunter eine klebende Laborleiste (Ansichten + Zeitsteuerung). Jede Ansicht ist ein Arbeitsplatz
   Diagramm | Zeitverläufe + Rechnung | Regler. Farbe ist den physikalischen Grössen vorbehalten, die Bedienung bleibt neutral. */
:root {
  --paper: #f1f3f6;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --ink: #131b26;
  --ink-2: #465265;
  --muted: #737e91;
  --rule: #d4dae3;
  --grid: #e4e8ee;
  --grid-2: #c6ced9;
  --ph-a: #c8431a;
  --ph-b: #0d8257;
  --ph-c: #2160c4;
  --vec: #7b2fb5;
  --zei: #a66200;
  --zero: #69727f;
  --sm-u1: #131b26;
  --sm-up: #7b2fb5;
  --sm-du: #69727f;
  --sm-i: #c8431a;
  --sm-psi: #0d8257;
  --good: #0c6e47;
  --warn: #8f5200;
  --bad: #b42318;
  --good-bg: #e3f3ea;
  --warn-bg: #fbefd9;
  --bad-bg: #fbe5e2;
  --n-bg: #e9edf2;
  --c-r: #0d8257;
  --c-l: #a8327a;
  --c-c: #2160c4;
  --pw: #a66200;
  --shadow: 0 8px 28px rgba(19, 27, 38, .16);
  --f-display: "Barlow Semi Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-math: "STIX Two Text", "Cambria Math", Cambria, "Times New Roman", serif;
  --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M1 4.5h14' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3Cpath d='M12.5 0.8L21.5 4.5L12.5 8.2Z' fill='%23000'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1117; --panel: #131a23; --panel-2: #18212c; --ink: #e6ebf2; --ink-2: #b2bccb; --muted: #8a96a8;
    --rule: #263040; --grid: #1d2631; --grid-2: #303b4a;
    --ph-a: #ff7f55; --ph-b: #3dcf8d; --ph-c: #74aaff; --vec: #c690ff; --zei: #ffb547; --zero: #98a2b0;
    --sm-u1: #e6ebf2; --sm-up: #c690ff; --sm-du: #98a2b0; --sm-i: #ff7f55; --sm-psi: #3dcf8d;
    --good: #48d39b; --warn: #ffbe5c; --bad: #ff8b7b; --good-bg: #12342a; --warn-bg: #382b12; --bad-bg: #3b1d1a; --n-bg: #212b37;
    --c-r: #3dcf8d; --c-l: #f07ac0; --c-c: #74aaff; --pw: #ffb547;
    --shadow: 0 8px 28px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1117; --panel: #131a23; --panel-2: #18212c; --ink: #e6ebf2; --ink-2: #b2bccb; --muted: #8a96a8;
  --rule: #263040; --grid: #1d2631; --grid-2: #303b4a;
  --ph-a: #ff7f55; --ph-b: #3dcf8d; --ph-c: #74aaff; --vec: #c690ff; --zei: #ffb547; --zero: #98a2b0;
  --sm-u1: #e6ebf2; --sm-up: #c690ff; --sm-du: #98a2b0; --sm-i: #ff7f55; --sm-psi: #3dcf8d;
  --good: #48d39b; --warn: #ffbe5c; --bad: #ff8b7b; --good-bg: #12342a; --warn-bg: #382b12; --bad-bg: #3b1d1a; --n-bg: #212b37;
  --c-r: #3dcf8d; --c-l: #f07ac0; --c-c: #74aaff; --pw: #ffb547;
  --shadow: 0 8px 28px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--f-body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); }
.wrap { max-width: 1520px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
p { margin: 0; }

/* Kopf */
.top { display: flex; align-items: center; gap: 12px 16px; padding-block: 18px 12px; flex-wrap: wrap; }
.mark { width: 46px; height: 46px; flex: none; }
.titles { min-width: 0; flex: 1 1 300px; }
.eyebrow { font: 600 12px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
h1 { margin: 1px 0 0; font: 700 clamp(27px, 3.3vw, 36px)/1.04 var(--f-display); letter-spacing: -.005em; }
.lead { margin-top: 4px; color: var(--ink-2); max-width: 74ch; }

/* Laborleiste */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); border-block: 1px solid var(--rule); }
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .bar { background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.bar-in { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding-block: 7px; }
.tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; border-radius: 8px; padding: 6px 11px 6px 7px; cursor: pointer; font: 600 15.5px/1.1 var(--f-display); color: var(--ink-2); letter-spacing: .01em; white-space: nowrap; }
.tab .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 12px/1 var(--f-display); }
.tab:hover { color: var(--ink); background: var(--panel-2); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--panel); }
.transport { display: flex; align-items: center; gap: 6px 8px; flex: 1 1 520px; flex-wrap: wrap; justify-content: flex-end; }
.pop { position: relative; }
.pop > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--rule); background: var(--panel); cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary svg { width: 12px; height: 12px; }
.pop[open] > summary { border-color: var(--grid-2); }
.pop-b { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; box-shadow: var(--shadow); z-index: 50; min-width: 250px; }
.pop-b .mini { justify-content: space-between; gap: 12px; }
.fab { display: none; }
.ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); cursor: pointer; color: var(--ink); flex: none; padding: 0; }
.ic:hover { border-color: var(--grid-2); }
.ic svg { width: 15px; height: 15px; display: block; }
.ic.play { background: var(--ink); color: var(--panel); border-color: var(--ink); width: 38px; height: 38px; }
.ic.play .i-play { display: none; }
.ic.play.paused .i-play { display: block; }
.ic.play.paused .i-pause { display: none; }
.tslide { flex: 1 1 120px; min-width: 100px; max-width: 280px; }
.tread { font-size: 13.5px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 148px; white-space: nowrap; }
.tread b { color: var(--ink); font-weight: 600; }
.mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
select { border: 1px solid var(--rule); background: var(--panel); border-radius: 7px; padding: 4px 6px; font-size: 13px; color: var(--ink); }

/* Ansichten */
main { padding-block: 16px 10px; }
.vhead { display: grid; gap: 3px; margin-bottom: 10px; }
.vhead h2 { margin: 0; font: 700 25px/1.12 var(--f-display); }
.vhead p { color: var(--ink-2); max-width: 92ch; }

.exp { margin-bottom: 14px; display: grid; gap: 8px; }
/* Dritte Ebene: Experimente, als gerahmte Auswahl in der Ansicht */
.exp-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--grid-2); border-radius: 10px; }
.exp-lbl { font: 600 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--grid-2); background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; line-height: 1.25; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink-2); color: var(--panel); border-color: var(--ink-2); }
.callout { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px 9px; display: grid; gap: 4px; max-width: 120ch; grid-template-columns: minmax(0, 1fr); }
.co-q { line-height: 1.55; }
.co-t { font: 600 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: 8px; }
.callout summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); width: fit-content; }
.callout summary:hover { color: var(--ink); }
.callout details p { margin-top: 3px; line-height: 1.55; }

.work { display: grid; gap: 14px; align-items: start; }
.w1 { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) 300px; grid-template-areas: "da pl ct"; }
.w2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; grid-template-areas: "da db ct" "pl pl ct"; }
.w3 { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "ch ct"; }
.w4 { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) 300px; grid-template-areas: "da sd ct"; }
.ga-da { grid-area: da; } .ga-db { grid-area: db; } .ga-pl { grid-area: pl; } .ga-ct { grid-area: ct; } .ga-ch { grid-area: ch; } .ga-sd { grid-area: sd; }
@media (max-width: 1240px) {
  .w1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "da pl" "ct ct"; }
  .w2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "da db" "pl pl" "ct ct"; }
  .w3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ch" "ct"; }
  .w4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "da sd" "ct ct"; }
  .ctrl { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); column-gap: 26px; }
  .ctrl > .grp { border-top: 0; }
}
@media (max-width: 760px) {
  .w1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "da" "ct" "pl"; }
  .w2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "da" "db" "ct" "pl"; }
  .w4 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "da" "ct" "sd"; }
  .ctrl > .grp + .grp { border-top: 1px solid var(--rule); }
}

.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; margin: 0; min-width: 0; }
figure.card { padding: 10px 12px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; font: 600 14.5px/1.25 var(--f-display); letter-spacing: .015em; }
figcaption .hint { font: 400 12.5px/1.3 var(--f-body); color: var(--muted); letter-spacing: 0; }
canvas { display: block; width: 100%; max-width: 100%; touch-action: manipulation; }
canvas.sq { aspect-ratio: 1 / 1; }
canvas.tp { aspect-ratio: 3.1 / 1; min-height: 150px; }
canvas.chart { aspect-ratio: 1.75 / 1; min-height: 210px; }
canvas.wf { aspect-ratio: 1 / 1.5; }
canvas.drag { cursor: crosshair; }
.stack { display: grid; gap: 14px; min-width: 0; }
.pl2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.pl2 > .span2 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .pl2 { grid-template-columns: minmax(0, 1fr); } }

.legend { display: flex; flex-wrap: wrap; gap: 1px 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; min-height: 20px; }
.lg { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.lg .sw { width: 16px; height: 0; border-top: 2.5px solid var(--c); align-self: center; }
.lg .sw.d { border-top-style: dashed; }
.lg b { font-weight: 600; display: inline-block; min-width: 5.6ch; text-align: right; }
.dleg { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.dleg .sw { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--c); vertical-align: middle; margin-right: 5px; }
.dleg .sw.d { border-top-style: dashed; }
.dleg .sw.o { width: 10px; height: 10px; border: 1.5px dashed var(--c); border-radius: 50%; }

/* Regler */
.ctrl { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 2px 14px 8px; display: grid; align-content: start; }
.grp { padding-block: 10px; border-top: 1px solid var(--rule); display: grid; gap: 9px; align-content: start; }
.ctrl > .grp:first-child { border-top: 0; }
.grp[hidden] { display: none; }
.grp > h3, .grp > summary { margin: 0; font: 600 12.5px/1.2 var(--f-display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
details.grp > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary::after { content: "+"; font: 600 17px/1 var(--f-body); color: var(--ink-2); }
details.grp[open] > summary::after { content: "−"; }
.grp-b { display: grid; gap: 9px; }
.ctl { display: grid; gap: 1px; }
.ctl[hidden] { display: none; }
.ctl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.ctl-h output { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ctl.num { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.nin { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; }
.nin input { width: 84px; border: 1px solid var(--rule); background: var(--panel-2); border-radius: 6px; padding: 4px 6px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.mi { font-family: var(--f-math); font-style: italic; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btn { border: 1px solid var(--rule); background: var(--panel-2); border-radius: 7px; padding: 5px 10px; font-size: 13.5px; line-height: 1.2; cursor: pointer; color: var(--ink); }
.btn:hover { border-color: var(--grid-2); background: var(--panel); }
.status { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.status .btn { padding: 2px 8px; font-size: 12.5px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--grid-2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); margin-top: -6px; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--ink); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--grid-2); }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--ink); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 8px; padding: 2px; gap: 2px; background: var(--panel-2); width: fit-content; max-width: 100%; }
.seg button { font-size: 13.5px; line-height: 1.15; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--panel); }
.tog { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.3; position: relative; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tog .sw { flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--grid-2); position: relative; transition: background .15s; }
.tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: transform .15s; }
.tog input:checked + .sw { background: var(--ink); }
.tog input:checked + .sw::after { transform: translateX(12px); }
.tog input:focus-visible + .sw { outline: 2px solid var(--ink); outline-offset: 2px; }
.tog input:disabled + .sw, .tog input:disabled ~ span { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .tog .sw, .tog .sw::after { transition: none; } }

/* Rechnung / Formeln */
.fx { padding: 10px 14px 12px; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.fx h3 { margin: 0 0 3px; font: 600 14.5px/1.25 var(--f-display); letter-spacing: .015em; }
.eq { font-family: var(--f-math); font-size: 16.5px; line-height: 2; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.eq b, .vals b { font-family: var(--f-body); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.vals { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.vals .m { font-size: 16px; }
.fx .note { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.m, .eq { font-family: var(--f-math); }
.m i, .eq i, .vec, .ul { font-family: var(--f-math); font-style: italic; }
sub, sup { line-height: 0; font-size: .7em; }
.vec { position: relative; display: inline-block; line-height: 1; }
.vec::after { content: ""; position: absolute; left: 50%; top: -.3em; width: .64em; height: .34em; transform: translateX(-40%); background: currentColor; -webkit-mask: var(--arr) center / 100% 100% no-repeat; mask: var(--arr) center / 100% 100% no-repeat; }
.ul { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .15em; text-decoration-skip-ink: none; }
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .76em; line-height: 1.12; margin: 0 .1em; }
.fr > span:first-child { border-bottom: .07em solid currentColor; padding: 0 .14em; }

/* Kette */
.chain { display: grid; gap: 0; min-width: 0; }
.row { display: grid; grid-template-columns: 118px minmax(150px, 236px) minmax(0, 1fr); gap: 12px; align-items: center; }
.rl { display: grid; gap: 2px; }
.rl .rn { font: 700 17px/1.15 var(--f-display); }
.rl .rs { font-size: 15px; color: var(--ink-2); }
.row figure.card { padding: 8px 10px; }
.tf { display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 130px; min-height: 44px; }
.tf .arrow { flex: none; width: 26px; height: 30px; color: var(--ink-2); }
.tf .tfx { min-width: 0; display: grid; }
.tf .tfl { font: 600 12px/1.2 var(--f-display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.tf .eq { font-size: 16px; line-height: 1.8; }
@media (max-width: 760px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .row figure.card.mini { max-width: 300px; width: 100%; justify-self: center; }
  .tf { padding-left: 0; }
}

/* Synchronmaschine */
.res { padding: 10px 14px 12px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.states { display: flex; gap: 6px; flex-wrap: wrap; }
.st { font: 600 13px/1 var(--f-body); padding: 5px 9px; border-radius: 999px; background: var(--n-bg); color: var(--ink); }
.st.good { background: var(--good-bg); color: var(--good); }
.st.warn { background: var(--warn-bg); color: var(--warn); }
.st.bad { background: var(--bad-bg); color: var(--bad); }
.rt { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rt td { padding: 3px 0; border-top: 1px solid var(--grid); vertical-align: baseline; }
.rt tr:first-child td { border-top: 0; }
.rt td.s { font-family: var(--f-math); font-size: 16px; white-space: nowrap; padding-right: 10px; }
.rt td.f { color: var(--ink-2); font-family: var(--f-math); font-size: 14.5px; }
.rt td.v { text-align: right; font-weight: 600; white-space: nowrap; padding-left: 10px; }
.esb { width: 100%; max-width: 420px; height: auto; display: block; justify-self: center; }
.esb .w { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.esb text { font-family: var(--f-math); font-style: italic; font-size: 15px; fill: var(--ink); }
.esb .v { font-family: var(--f-body); font-style: normal; font-size: 12.5px; fill: var(--ink-2); }
.cmp { padding: 10px 14px 12px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.cmp h3 { margin: 0; font: 600 14.5px/1.25 var(--f-display); letter-spacing: .015em; }
.cmp .note { font-size: 13px; color: var(--ink-2); }
.ct-w { overflow-x: auto; }
.ct { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.ct th, .ct td { text-align: left; vertical-align: top; padding: 5px 10px 5px 0; border-top: 1px solid var(--grid); }
.ct thead th { border-top: 0; font: 600 12px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ct tbody th { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.eq .note { font-family: var(--f-body); font-size: 13px; color: var(--ink-2); }
.esb .t-up { fill: var(--sm-up); } .esb .t-i { fill: var(--sm-i); } .esb .t-u1 { fill: var(--sm-u1); } .esb .t-du { fill: var(--sm-du); }

.foot { padding-block: 18px 30px; color: var(--ink-2); font-size: 13.5px; display: grid; gap: 6px; max-width: 1520px; }
.foot p { max-width: 120ch; }
kbd { font: 600 12px/1 var(--f-body); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: var(--panel); color: var(--ink); }

/* Zweite Ebene: Unterpunkte des Tabs Raumzeiger, als Band unter der Tab-Zeile */
.subrow { order: 1; flex-basis: 100%; display: flex; }
.subtabs { max-width: max-content; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 5px 9px 5px 13px; margin-top: 2px; background: var(--grid); border: 1px solid var(--grid-2); border-radius: 10px; }
.subtabs::before { content: '↳'; color: var(--ink-2); font: 700 16px/1 var(--f-display); margin-right: 8px; }
.stab { border: 0; background: transparent; border-radius: 7px; padding: 6px 13px; cursor: pointer; font: 600 15px/1.1 var(--f-display); color: var(--ink-2); white-space: nowrap; }
.stab:not([aria-selected="true"]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--grid-2); }
.stab:hover { color: var(--ink); text-decoration-color: var(--ink-2); }
.stab[aria-selected="true"] { background: var(--panel); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .14), inset 0 0 0 1.5px var(--ink-2); }
@media (max-width: 760px) {
  .bar { position: static; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .subrow { order: 0; }
  .subtabs { max-width: none; flex: 1; }
  .tab { font-size: 14.5px; padding: 7px 9px 7px 6px; }
  .transport { justify-content: flex-start; flex-basis: 100%; }
  .tslide { max-width: none; }
  .tread { min-width: 0; }
  .vhead h2 { font-size: 22px; }
  .bar-in { position: relative; }
  .pop { position: static; }
  .pop-b { left: 16px; right: 16px; min-width: 0; }
  .fab { display: grid; place-items: center; position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--panel); border: 0; z-index: 35; box-shadow: var(--shadow); cursor: pointer; }
  .fab svg { width: 20px; height: 20px; }
  .fab .i-play { display: none; }
  .fab.paused .i-play { display: block; }
  .fab.paused .i-pause { display: none; }
  .foot { padding-bottom: 84px; }
}

/* watt.li: CSP-konforme Ersatzklassen für die früheren style-Attribute (style-src 'self').
   !important bildet den Vorrang des Inline-Styles nach. */
.f-ink { fill: var(--ink) !important; }
.f-none { fill: none !important; }
.f-panel { fill: var(--panel) !important; }
.f-sm-du { fill: var(--sm-du) !important; }
.f-sm-i { fill: var(--sm-i) !important; }
.f-sm-u1 { fill: var(--sm-u1) !important; }
.f-sm-up { fill: var(--sm-up) !important; }
.f-vec { fill: var(--vec) !important; }
.fst-normal { font-style: normal !important; }
.fz-11 { font-size: 11px !important; }
.lc-round { stroke-linecap: round !important; }
.s-grid-2 { stroke: var(--grid-2) !important; }
.s-ink { stroke: var(--ink) !important; }
.s-ph-a { stroke: var(--ph-a) !important; }
.s-ph-b { stroke: var(--ph-b) !important; }
.s-ph-c { stroke: var(--ph-c) !important; }
.s-sm-du { stroke: var(--sm-du) !important; }
.s-sm-i { stroke: var(--sm-i) !important; }
.s-sm-u1 { stroke: var(--sm-u1) !important; }
.s-sm-up { stroke: var(--sm-up) !important; }
.s-vec { stroke: var(--vec) !important; }
.w-1_1 { stroke-width: 1.1 !important; }
.w-1_5 { stroke-width: 1.5 !important; }
.w-1_6 { stroke-width: 1.6 !important; }
.w-1_8 { stroke-width: 1.8 !important; }
.w-2 { stroke-width: 2 !important; }
.w-2_4 { stroke-width: 2.4 !important; }
.w-3 { stroke-width: 3 !important; }
/* Legenden-Swatches: Farbe als Klasse statt style="--c:…" */
.c-paper { --c: var(--paper); }
.c-panel { --c: var(--panel); }
.c-panel-2 { --c: var(--panel-2); }
.c-ink { --c: var(--ink); }
.c-ink-2 { --c: var(--ink-2); }
.c-muted { --c: var(--muted); }
.c-rule { --c: var(--rule); }
.c-grid { --c: var(--grid); }
.c-grid-2 { --c: var(--grid-2); }
.c-ph-a { --c: var(--ph-a); }
.c-ph-b { --c: var(--ph-b); }
.c-ph-c { --c: var(--ph-c); }
.c-vec { --c: var(--vec); }
.c-zei { --c: var(--zei); }
.c-zero { --c: var(--zero); }
.c-sm-u1 { --c: var(--sm-u1); }
.c-sm-up { --c: var(--sm-up); }
.c-sm-du { --c: var(--sm-du); }
.c-sm-i { --c: var(--sm-i); }
.c-sm-psi { --c: var(--sm-psi); }
.c-good { --c: var(--good); }
.c-warn { --c: var(--warn); }
.c-bad { --c: var(--bad); }
.c-good-bg { --c: var(--good-bg); }
.c-warn-bg { --c: var(--warn-bg); }
.c-bad-bg { --c: var(--bad-bg); }
.c-n-bg { --c: var(--n-bg); }
.c-c-r { --c: var(--c-r); }
.c-c-l { --c: var(--c-l); }
.c-c-c { --c: var(--c-c); }
.c-pw { --c: var(--pw); }
.sw.tight { margin-left: -3px; }

/* watt.li: Rückweg zur Website (Kopfzeile) und rechtliche Links (Fuss) */
.wl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; font: 600 14px/1.2 var(--f-body); }
.wl a { color: var(--ink-2); text-decoration: none; }
.wl a:hover { color: var(--ink); }
.wl .wl-logo { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.wl-logo span { color: #077370; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wl-logo span { color: #2FBDB5; } }
:root[data-theme="dark"] .wl-logo span { color: #2FBDB5; }
.wl a:focus-visible, .wl-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.wl-foot a { color: inherit; }