/* myWerkzeug.de Helfer – öffentliche Rechner. Marke: Navy/Blau/Volt, Archivo.
   Gestaltungsidee: Ergebnis wie die Anzeige eines Messgeräts, Kategorien farbcodiert, eigene Strichsymbole. */
@font-face{font-family:"Archivo";src:url("/fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --paper:#f4f4f8;--raised:#fff;--line:#dcdfe9;--line-2:#c6cadb;--ink:#0a1540;--muted:#525975;--soft:#5e6680;
  --navy:#0a1540;--navy-2:#14215a;--blue:#1f3fe0;--blue-soft:#e6ebff;--volt:#c4ff1a;
  --el:#2c47d8;--el-bg:#e8edff;--el-2:#c9d4ff;--wg:#0b766e;--wg-bg:#dcf3ef;--wg-2:#a9e0d7;--gr:#6a48cf;--gr-bg:#eee9ff;--gr-2:#d4c8fb;--al:#4a5579;--al-bg:#ededf3;--akzent:#ffb21e;
  --ok:#276b3b;--ok-bg:#e7f6ec;--warn:#8a5a00;--warn-bg:#fff1cc;--err:#b3202a;--err-bg:#ffe4e5;
  --font:"Archivo","Segoe UI",system-ui,sans-serif;--focus:0 0 0 1.5px #1f3fe0,0 0 0 5px rgba(31,63,224,.25)}
*{box-sizing:border-box}html{background:var(--paper)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-variant-numeric:tabular-nums}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Kopf ---------- */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 20px;height:56px;background:var(--navy);color:#fff;position:relative;z-index:2;box-shadow:inset 0 -1px 0 var(--navy-rand,transparent)}
.kopfnav{margin-left:auto}.kopf .thema-knopf{margin-left:-6px}
.marke{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.marke .logo{display:block;width:30px;height:30px}
.marke .logo svg{width:30px;height:30px;display:block}
.marke b{font-weight:700;font-stretch:118%;letter-spacing:-.01em;font-size:16px}.marke span{color:#aab4dc;font-weight:500}
.kopfnav{display:flex;align-items:center;gap:2px}
.kopfnav a{color:#dfe5ff;text-decoration:none;padding:7px 11px;border-radius:7px;font-size:14px}.kopfnav a:hover{background:rgba(255,255,255,.08);color:#fff}
.kopfnav a.cta{background:var(--volt);color:var(--navy);font-weight:600;margin-left:6px}.kopfnav a.cta:hover{background:#d6ff5c;color:var(--navy)}
.kopfnav .trenn{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 6px}

/* ---------- Rahmen ---------- */
.rahmen{flex:1;display:grid;grid-template-columns:268px 1fr;min-height:0}
.seite{border-right:1px solid var(--line);background:var(--raised);padding:14px 10px 24px;overflow:auto;height:calc(100vh - 56px);position:sticky;top:0}
.kat{display:flex;align-items:center;gap:8px;margin:18px 8px 6px;font-size:13px;font-weight:700;color:var(--ink);font-stretch:110%}
.kat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k-ink,var(--al));box-shadow:0 0 0 3px var(--k-bg,var(--al-bg))}
.wz{display:flex;gap:10px;align-items:center;width:100%;padding:7px 8px;border-radius:9px;text-decoration:none;color:inherit;position:relative}
.wz:hover{background:var(--paper)}
.wz.an{background:var(--blue-soft)}.wz.an::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--k-bg,var(--al-bg));color:var(--k-ink,var(--al));flex:none}
.wz b{display:block;font-size:14px;font-weight:600;line-height:1.25}.wz small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
[data-kat="Elektro"]{--k-bg:var(--el-bg);--k-ink:var(--el);--k-2:var(--el-2)}[data-kat="Wasser & Gas"]{--k-bg:var(--wg-bg);--k-ink:var(--wg);--k-2:var(--wg-2)}[data-kat="Grundlagen"]{--k-bg:var(--gr-bg);--k-ink:var(--gr);--k-2:var(--gr-2)}
main{padding:26px 32px 48px;min-width:0}

/* ---------- Startseite ---------- */
.held{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;background:var(--navy);color:#fff;border-radius:18px;padding:36px 40px;position:relative;overflow:hidden;margin-bottom:30px}
.held::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);pointer-events:none}
.held>*{position:relative;z-index:1}
.held h1{margin:0;font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:-.025em;font-weight:800;font-stretch:122%}
.held p{color:#c3cbec;margin:14px 0 18px;max-width:46ch;font-size:16px}
.fakten{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fakten li{display:flex;align-items:center;gap:6px;font-size:13px;color:#e6eaff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:5px 10px;border-radius:99px}
.fakten svg{width:15px;height:15px;color:var(--volt)}
/* Schnellrechner im Kopf */
.schnell{background:var(--raised);color:var(--ink);border-radius:14px;padding:18px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px var(--navy-rand,transparent)}
.schnell h2{margin:0 0 2px;font-size:15px;font-weight:700}.schnell>p{margin:0 0 12px;color:var(--muted);font-size:13px}
.schnell .reihe{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.schnell .anzeige{margin-top:12px}
.schnell a{font-size:13px}

/* ---------- Kacheln ---------- */
.gruppe{margin-top:26px}.gruppe h2{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:19px;font-weight:700;font-stretch:112%;letter-spacing:-.01em}
.gruppe h2 small{font-size:13px;color:var(--muted);font-weight:500;font-stretch:100%}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.kachel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:4px 12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--raised);background-image:var(--glanz);box-shadow:var(--schatten);text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.kachel:hover{border-color:var(--k-ink);box-shadow:inset 0 0 0 1px var(--k-ink),var(--schatten-hover);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.kachel,.kachel:hover{transition:none;transform:none}}
.kachel .ic{grid-row:span 2;width:40px;height:40px;border-radius:11px}.kachel .ic svg{width:22px;height:22px}
.kachel b{font-size:15px;font-weight:650;line-height:1.25}.kachel span{font-size:13px;color:var(--muted);line-height:1.4}
.einladung{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;padding:18px 22px;border:1px dashed var(--line-2);border-radius:14px;background:var(--raised)}
.einladung b{display:block;font-size:16px}.einladung span{color:var(--muted);font-size:14px}

/* ---------- Rechnerseite ---------- */
.tkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tkopf .titel{display:flex;gap:14px;align-items:flex-start}
.tkopf .ic{width:48px;height:48px;border-radius:13px}.tkopf .ic svg{width:26px;height:26px}
.tkopf .titel>div{min-width:0}.tkopf h1{overflow-wrap:anywhere;hyphens:auto;margin:0;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:750;font-stretch:118%}
.tkopf p{margin:5px 0 0;color:var(--muted);max-width:72ch}
.norm{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--soft);margin-top:8px;max-width:90ch}.norm svg{width:15px;height:15px;margin-top:2px}
.aktionen{display:flex;gap:6px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--raised);background-image:var(--glanz-knopf);box-shadow:var(--knopf-licht);cursor:pointer;font-size:13.5px;text-decoration:none;color:var(--ink);font-weight:500}
.btn svg{width:16px;height:16px}.btn:hover{border-color:var(--line-2);background-color:var(--paper)}
.btn.pri{background-color:var(--blue);border-color:var(--blue);color:var(--auf-blau,#fff)}.btn.pri:hover{background-color:var(--blue-hover,#1835c4)}
.btn.volt{background-color:var(--volt);border-color:var(--volt);color:var(--navy);font-weight:650}.btn.volt:hover{background-color:#d6ff5c}
.btn.sm{padding:4px 9px;font-size:12.5px}
.raster{display:grid;grid-template-columns:minmax(300px,370px) 1fr;gap:20px;align-items:start}
.eingaben{background:var(--raised);background-image:var(--glanz);box-shadow:var(--schatten);border:1px solid var(--line);border-radius:16px;padding:16px 18px 6px;position:sticky;top:16px}
.ergebnis{min-width:0}
.blockt{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--muted)}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.feld{display:grid;gap:4px;margin-bottom:12px;align-content:start}.feld>label{font-size:13px;font-weight:600}.feld small{color:var(--muted);font-size:12px;line-height:1.35}
.eing{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;background:var(--raised);box-shadow:var(--feld-innen);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.eing:hover{border-color:var(--line-2)}.eing:focus-within{box-shadow:var(--focus);border-color:var(--blue)}
.eing input,.eing select{flex:1;min-width:0;border:0;padding:8px 10px;background:transparent;outline:none;font-variant-numeric:tabular-nums}
.eing .eh{padding:8px 10px;color:var(--soft);font-size:13px;white-space:nowrap;align-self:center}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.seg{display:flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:9px}
.seg label{flex:1;min-width:max-content;text-align:center;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--muted);font-weight:500}
.seg label:hover{color:var(--ink)}/* Das Auswahlfeld liegt unsichtbar über dem ganzen Schalter: Klick- und Tippfläche = Schalter (mind. 30 px, am Handy 44 px) statt 13 px */
.seg label{position:relative}.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg label.an{background:var(--raised);color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(10,21,64,.12),0 0 0 1px var(--line)}
.seg label:focus-within{box-shadow:var(--focus)}
.liste table{width:100%;border-collapse:collapse;font-size:13px}.liste th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:2px 4px}
.liste td{padding:2px 3px}.liste td input,.liste td select{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:7px;background:var(--raised);min-width:0}
.liste td.x{width:28px}.liste .weg{border:0;background:none;cursor:pointer;color:var(--soft);font-size:18px;line-height:1;border-radius:6px;padding:2px 6px}.liste .weg:hover{color:var(--err);background:var(--err-bg)}
.liste .btn{margin-top:6px}

/* Anzeige (Hauptergebnis) wie ein Messgerät */
.anzeige{background:linear-gradient(125deg,#2238c4 0%,#2f4de6 55%,#4f6bff 100%);color:#fff;border-radius:14px;padding:16px 20px 14px;position:relative;overflow:hidden}
.anzeige::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
.anzeige::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.anzeige.ok::before{background:#7fe3a0}.anzeige.warn::before{background:#ffc53d}.anzeige.err::before{background:#ff5a64}
.kzk.anzeige span{display:block;color:#dfe5ff;font-size:13px}
.kzk.anzeige b{display:block;color:#fff;font-size:clamp(34px,4.4vw,52px);line-height:1.05;font-weight:700;font-stretch:125%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.kzk.anzeige b small{font-size:16px;font-weight:500;color:#e3e8ff;font-stretch:100%;letter-spacing:0;margin-left:4px}
.kz{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0;margin:0 0 14px;background:var(--raised);background-image:var(--glanz);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--schatten)}
.kz .anzeige{grid-column:1/-1;border-radius:0;border:0;margin:0}.schnell .kzk.anzeige b{font-size:34px}
.kzk{padding:11px 14px;border-top:1px solid var(--line);border-right:1px solid var(--line);margin-right:-1px;position:relative}
.kzk span{display:block;font-size:12.5px;color:var(--muted)}
.kzk b{display:block;font-size:20px;font-weight:700;font-stretch:110%;line-height:1.25;font-variant-numeric:tabular-nums}.kzk b small{font-size:12.5px;font-weight:500;color:var(--muted);font-stretch:100%}
.kzk.ok span::before,.kzk.warn span::before,.kzk.err span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.kzk.ok span::before{background:#3f9a52}.kzk.warn span::before{background:#e0a100}.kzk.err span::before{background:var(--err)}
.kzk.err b{color:var(--err)}
.kz>.kzk:first-child:not(.anzeige){border-top:0}
.hw{padding:10px 14px;border-radius:10px;margin:8px 0;font-size:13.5px;background:var(--raised);border:1px solid var(--line);display:flex;gap:10px}
.hw::before{content:"";flex:none;width:4px;border-radius:2px;background:var(--line-2)}
.hw.ok{background:var(--ok-bg);border-color:var(--ok-rand,#bfe3c9)}.hw.ok::before{background:#3f9a52}
.hw.warn{background:var(--warn-bg);border-color:var(--warn-rand,#f0d58a)}.hw.warn::before{background:#e0a100}
.hw.err{background:var(--err-bg);border-color:var(--err-rand,#f5b3b7)}.hw.err::before{background:var(--err)}
.hw.info{background:var(--blue-soft);border-color:var(--info-rand,#c9d3ff)}.hw.info::before{background:var(--blue)}
.hw>div{min-width:0}
.tab{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0;background:var(--raised)}
.tabw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:6px 0 10px;background:var(--raised)}
.tabw .tab{margin:0}
.tab th,.tab td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tab tbody tr:last-child td{border-bottom:0}.tab .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tab th{font-size:12px;color:var(--muted);font-weight:600;background:var(--paper)}
.tab tr.wahl td{background:var(--blue-soft);font-weight:700}.tab tr.wahl td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.tab td.ok{color:var(--ok)}.tab td.err{color:var(--err)}.tab td.warn{color:var(--warn)}
h3{font-size:14.5px;margin:20px 0 6px;font-weight:700}
.check{list-style:none;padding:0;margin:6px 0;background:var(--raised);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.check li{padding:9px 12px 9px 40px;position:relative;border-bottom:1px solid var(--line);font-size:13.5px}.check li:last-child{border-bottom:0}
.check li::before{content:"";position:absolute;left:14px;top:12px;width:14px;height:14px;border:1.5px solid var(--line-2);border-radius:4px;background:var(--raised)}
.check li.pflicht::before{border-color:var(--blue);background:var(--blue-soft)}.check li b{font-weight:650}
.balken{display:grid;gap:8px;margin:10px 0;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:12px}
.balken div{display:grid;grid-template-columns:30px 1fr 86px;gap:10px;align-items:center;font-size:13px}.balken i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 70%,#fff))}
.balken span{text-align:right;font-variant-numeric:tabular-nums}
.svgw{border:1px solid var(--line);border-radius:12px;background:var(--papier-karte,#fff);padding:10px;margin:10px 0}.svgw svg{display:block;width:100%;height:auto;max-height:420px}
.i.schloss{width:14px;height:14px;margin-left:6px;vertical-align:-1px;color:var(--soft)}
.sperre{display:flex;gap:18px;align-items:flex-start;max-width:640px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--raised)}
.sperre .ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);color:var(--blue)}.sperre .ic svg{width:26px;height:26px}
.sperre h2{margin:0 0 4px;font-size:20px;font-stretch:112%}.sperre p{margin:0 0 14px;color:var(--muted)}
.leer{color:var(--muted);font-size:14px;padding:8px}
.gast{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;padding:14px 18px;border-radius:12px;background:var(--raised);border:1px dashed var(--line-2);font-size:14px;color:var(--muted)}
.gast b{color:var(--ink)}
#erg{transition:opacity .12s}#erg.neu{opacity:.55}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:1100px){.held{grid-template-columns:1fr;padding:28px}}
@media (max-width:980px){.raster{grid-template-columns:1fr}.eingaben{position:static}}
@media (max-width:900px){
  .rahmen{grid-template-columns:1fr}.seite{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  #liste{display:none}.seite.offen #liste{display:block}main{padding:16px}.kopfnav a:not(.cta):not(.kurz){display:none}.kopfnav .trenn{display:none}
  .held{padding:22px 18px;border-radius:14px}.schnell .reihe{grid-template-columns:1fr 1fr}.schnell .reihe .seg{grid-column:1/-1}
  .kz{grid-template-columns:1fr 1fr}.tkopf h1{font-size:23px}.marke span{display:none}}
@media print{.kopf,.seite,.fuss,.aktionen,.gast,.liste .btn,.liste .weg{display:none!important}.rahmen{display:block}main{padding:0}.raster{grid-template-columns:1fr 1.5fr}.eingaben{position:static}body{font-size:11pt}
  .anzeige{-webkit-print-color-adjust:exact;print-color-adjust:exact}.kz,.tabw,.check,.hw{break-inside:avoid}}

.kzk.anzeige.ok span::before,.kzk.anzeige.warn span::before,.kzk.anzeige.err span::before{display:none}
.kzk b small{margin-left:4px}
.kopfnav a{white-space:nowrap}
.kopfnav .knapp{display:none}
@media (max-width:760px){.kopfnav .lang{display:none}.kopfnav .knapp{display:inline}.kopfnav a{padding:7px 9px}}

/* ---------- Bilder (animierte Darstellung je Rechner) ---------- */
.bild{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--papier-karte,#fff)}
.bildsvg{display:block;width:100%;height:auto;font-family:var(--font)}
.bildsvg .t{font-size:13px;fill:var(--ink)}
.bildsvg .tk{font-size:12px;fill:#5a6485}
.bildsvg .tw{font-size:13.5px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
.bildsvg .twb{font-size:15px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums}
.bildsvg .tg{font-size:30px;font-weight:800;fill:var(--ink);font-stretch:120%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bildsvg .tm{font-size:12.5px;font-weight:600;fill:#8a93b0}.bildsvg .tm.an{fill:var(--ink)}
.bildsvg .tok{font-size:13.5px;font-weight:650;fill:#3b7a00}.bildsvg .terr{font-size:13px;font-weight:650;fill:#c42a33}
.bildsvg .tpill{font-size:13px;font-weight:700;fill:#c4ff1a}.bildsvg .tpill2{font-size:10.5px;font-weight:700;fill:#fff;letter-spacing:.02em}.bildsvg .tpd{font-size:12.5px;font-weight:700;fill:var(--navy)}
.bildsvg .tw2{font-size:12px;font-weight:700;fill:#fff}.bildsvg .tw2b{font-size:13px;font-weight:700;fill:var(--ink)}
.bildsvg .twh{font-size:14px;font-weight:700;fill:#fff}
.bildsvg .tdig{font-size:15px;font-weight:600;fill:#c4ff1a;letter-spacing:2px;font-family:ui-monospace,Menlo,Consolas,monospace}
.bildsvg.dunkel .tw{fill:#e6eaff}.bildsvg.dunkel .terr{fill:#ff8a90}
/* fließender Strom */
.strom{stroke-dasharray:5 13;stroke-linecap:round;animation:fliessen 1s linear infinite}
@keyframes fliessen{to{stroke-dashoffset:-36}}
/* Wärme, LED, Flammen, Tropfen, Duschen, Licht */
.puls{animation:puls 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes puls{50%{transform:scale(1.04)}}
.blink{animation:blink 1.6s ease-in-out infinite}@keyframes blink{50%{opacity:.35}}
.flamme{transform-box:fill-box;transform-origin:50% 100%;animation:flackern 1.1s ease-in-out infinite alternate}
@keyframes flackern{0%{transform:scale(1,1)}40%{transform:scale(.94,1.06)}70%{transform:scale(1.04,.95)}100%{transform:scale(.97,1.03)}}
.tropfen{animation:tropfen linear infinite}@keyframes tropfen{from{transform:translateX(0)}to{transform:translateX(340px)}}
.duschen{stroke-dasharray:4 6;animation:duschen .7s linear infinite}@keyframes duschen{to{stroke-dashoffset:-10}}
.leuchten{animation:leuchten 3.2s ease-in-out infinite}@keyframes leuchten{50%{opacity:.75}}
/* Auftritt bei neuem Bild: Elemente wachsen gestaffelt ein, Leitungen und Rohre füllen sich */
svg.neu .wachs{transform-box:fill-box;transform-origin:center;animation:wachsen .55s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes wachsen{from{opacity:0;transform:scale(.6)}}
svg.neu .fuellen{transform-box:fill-box;transform-origin:left center;animation:fuellen .9s cubic-bezier(.3,.7,.2,1) both .15s}
@keyframes fuellen{from{transform:scaleX(0)}}
svg.neu{animation:bildEin .35s ease-out}@keyframes bildEin{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.strom,.puls,.blink,.flamme,.tropfen,.duschen,.leuchten,svg.neu,svg.neu .wachs,svg.neu .fuellen{animation:none!important}}
@media print{.bild{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.kachel .ic svg,.wz .ic svg{transition:transform .25s cubic-bezier(.2,.9,.25,1.3)}
.kachel:hover .ic svg{transform:translateY(-2px) scale(1.08)}

/* URI-Dreieck */
.uriteil{cursor:pointer;transition:filter .2s}.uriteil:hover{filter:brightness(1.25)}
.bildsvg .uribu{font-size:40px;font-weight:800;fill:#fff;font-stretch:115%;pointer-events:none}.bildsvg .uribu.an{fill:var(--navy)}
.bildsvg .urix{font-size:26px;font-weight:800;fill:var(--navy);pointer-events:none}
.bildsvg .urif{font-size:24px;font-weight:700;fill:var(--blue);font-stretch:112%}

/* Untergruppen und Filter */
.ugr{margin:10px 10px 2px;font-size:11.5px;font-weight:600;color:var(--soft)}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--raised);cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
.fchip span{font-size:12px;font-weight:700;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--k-bg,var(--al-bg));color:var(--k-ink,var(--al))}
.fchip:hover{border-color:var(--k-ink,var(--line-2));color:var(--ink)}
.fchip.an{background:var(--k-ink,var(--ink));border-color:var(--k-ink,var(--ink));color:var(--auf-c,#fff)}.fchip.an span{background:color-mix(in srgb,var(--auf-c,#fff) 22%,transparent);color:var(--auf-c,#fff)}
[data-kat="alle"]{--k-ink:var(--alle-ink,#1b2a5e);--k-bg:var(--alle-bg,#e6e9f2)}
.gruppe{margin-top:22px;padding:20px 22px 22px;border-radius:20px;background:linear-gradient(180deg,var(--k-bg) 0,transparent 140px),var(--raised);border:1px solid var(--line);box-shadow:var(--schatten)}
.gruppe>h2{display:flex;align-items:center;gap:10px}
.gruppe>h2 i{width:12px;height:12px;border-radius:50%;background:var(--k-ink);box-shadow:0 0 0 4px var(--k-2)}
.untergruppe{margin-top:14px}.untergruppe h3{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--k-ink)}
.kachel{background-color:var(--raised)}
.ic{background:var(--k-bg,var(--al-bg));box-shadow:inset 0 0 0 1px var(--k-2,transparent)}
.wz.an .ic{background:var(--raised)}
/* Dreiecke */
.bildsvg .uribu{fill:#fff}
.bildsvg .urix{fill:#364452}
.bildsvg .tpill{fill:#ffc95a}
.bildsvg .tdig{fill:#8ff0b5}

.marke b i{font-style:normal;color:var(--volt)}
@media (max-width:420px){.kopf{padding:0 12px;gap:8px}.marke b{font-size:15px}.kopfnav a{padding:6px 8px;font-size:13px}.kopfnav a.cta{margin-left:2px}}
/* Querverweis zur Formelsammlung */
.formel-verweis{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--raised,#fff)}
.formel-verweis b{display:block;font-size:15px}.formel-verweis span{color:var(--muted);font-size:13.5px}
.formel-verweis nav{display:flex;flex-wrap:wrap;gap:8px}
.formel-verweis a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.formel-verweis a:hover{border-color:var(--blue);color:var(--blue)}.formel-verweis i{font:italic 700 16px/1 Georgia,"STIX Two",serif;color:var(--blue)}
.werkzeug-verweis i{font:700 15px/1 inherit;font-style:normal}
@media print{.formel-verweis{display:none}}
/* Blättern im Bereich: voriger/nächster Rechner (Wischen am Handy, ←/→ am PC über assets/app-nav.js).
   Nur innerhalb von .blaettern: andere Seiten binden helfer.css ein und haben eigene .blatt (Beschriftung: Druckblätter). */
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.blaettern .blatt{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:44px;padding:14px 18px;border-radius:16px;background:var(--raised);background-image:var(--glanz);border:1px solid var(--line);box-shadow:var(--schatten);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.blaettern .blatt:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--line));transform:translateY(-2px);box-shadow:var(--schatten-hover)}
.blaettern .blatt:focus-visible{outline:none;box-shadow:var(--focus)}
.blatt-nach{text-align:right;align-items:flex-end}
.blatt-rtg{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.blatt-rtg svg{width:16px;height:16px}
.blaettern .blatt b{font-size:15.5px;line-height:1.25;overflow-wrap:anywhere}
.blaettern .blatt small{color:var(--muted);font-size:12.5px;line-height:1.3}
.blaettern .blatt-ende{background:var(--paper);background-image:none;box-shadow:none}.blaettern .blatt-ende b{color:var(--muted)}
.blatt-pos{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--soft)}
.blatt-pos kbd{font:600 11px/1.5 var(--font);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--raised);color:var(--muted)}
@media (hover:none),(max-width:700px){.blatt-tasten{display:none}}
@media (max-width:700px){.blaettern{gap:8px}.blaettern .blatt{padding:12px 14px;border-radius:14px}.blaettern .blatt b{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.blaettern .blatt,.blaettern .blatt:hover{transition:none;transform:none}}
@media print{.blaettern{display:none}}
@media (max-width:420px){.kopf{gap:6px;padding:0 10px}.marke{gap:8px}.marke b{font-size:14.5px}.kopfnav a{padding:6px 6px}.kopf .thema-knopf{width:32px;height:32px;margin-left:0}}
@media (max-width:384px){.kopf{gap:4px;padding:0 8px}.marke{gap:6px}.marke .logo,.marke .logo svg{width:26px;height:26px}.marke b{font-size:14px}.kopfnav a{padding:6px 5px}}
@media (max-width:370px){.marke b{font-size:13px}.kopfnav a{font-size:12.5px;padding:6px 4px}}

/* Dunkelmodus: Werte nur für die Helfer (gemeinsame Werte in /assets/thema.css); Bilder bleiben auf heller Papier-Karte */
:root[data-theme="dark"]{--alle-ink:#d5dbef;--alle-bg:#232b46}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--alle-ink:#d5dbef;--alle-bg:#232b46}}
/* Rechner als App: dezente Leiste unter dem Kopf und Hinweis für Browser ohne Installationsdialog (app.js) */
.app-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;padding:6px 12px;border-bottom:1px solid var(--linie,rgba(127,127,127,.3));background:var(--karte,rgba(127,127,127,.08));font-size:14px}
.app-leiste small{opacity:.7}
.app-knopf{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;border:1px solid var(--linie,rgba(127,127,127,.4));background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.app-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-knopf:hover,.app-knopf.hervor{border-color:#c4ff1a;box-shadow:0 0 0 3px rgba(196,255,26,.4)}
.app-weg{border:0;background:transparent;color:inherit;font-size:20px;line-height:1;padding:2px 8px;cursor:pointer;opacity:.7}
.app-leiste[hidden],.app-hinweis[hidden]{display:none}
.app-hinweis{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;max-width:30em;margin:0 auto;padding:12px 16px;border-radius:12px;background:#0a1540;color:#fff;font-size:15px;line-height:1.45;box-shadow:0 8px 28px rgba(0,0,0,.35)}
@media (max-width:520px){.app-leiste small{display:none}}
.app-mehr{font-size:13px;opacity:.85}.app-mehr a{font-weight:700;color:inherit;text-decoration:underline}

/* ---------- Merken (Stern in den Aktionen der Rechnerseite), Gemerkt und Zuletzt in der Seitenleiste ---------- */
.btn.merk-knopf svg{transition:transform .2s}
.btn.merk-knopf[aria-pressed=true]{border-color:var(--ab-warn-rand);background-color:var(--ab-warn-hell)}
.btn.merk-knopf[aria-pressed=true] svg{fill:var(--ab-amber);stroke:var(--ab-warn)}
.btn.merk-knopf.gepulst svg{animation:merk-puls .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes merk-puls{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:none}}
[data-kat="Gemerkt"]{--k-ink:var(--ab-warn);--k-bg:var(--ab-warn-hell);--k-2:var(--ab-warn-rand)}
.wz .ic .stern{fill:var(--ab-amber);stroke:var(--ab-warn)}
.panel-kopf{display:none}
@media (prefers-reduced-motion:reduce){.btn.merk-knopf.gepulst svg{animation:none}}

/* ---------- App-Layout bis 900 px (nur mit der Leiste unten, body[data-app-nav]; die Pro-Offlinekopie behält das bisherige Verhalten):
   Suche haftet oben unter der kompakten Kopfzeile, Rechnerliste als Feld zwischen Suche und Leiste (assets/app-nav.css/.js) ---------- */
@media (max-width:900px){
  /* Die Suche sitzt seit 2026-10-17 in der Kopfzeile (assets/app-suche.css): die Seitenleiste trägt am Handy nur noch das Feld */
  body[data-app-nav] .seite{position:sticky;top:var(--kopf-h);z-index:30;height:0;max-height:none;padding:0;border:0;background:none;overflow:visible}
  body[data-app-nav] .panel{position:fixed;left:0;right:0;top:var(--panel-oben,109px);bottom:var(--nav-h);z-index:29;display:none;flex-direction:column;background:var(--raised);border-top:1px solid var(--line)}
  body[data-app-nav] .seite.offen .panel{display:flex}
  body[data-app-nav] .panel-kopf{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 16px;border-bottom:1px solid var(--line)}
  body[data-app-nav] .panel-kopf b{flex:1;font-size:15px}
  body[data-app-nav] .panel-zu{flex:none;width:44px;height:44px;border:0;background:none;border-radius:12px;color:var(--muted);display:grid;place-items:center;cursor:pointer}
  body[data-app-nav] .panel-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  body[data-app-nav] #liste{display:block;flex:1;min-height:0;overflow:auto;padding:4px 8px calc(12px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
  body[data-app-nav] .wz{min-height:48px;padding:8px}
  body[data-app-nav] .wz.an::before{left:-8px}
  body[data-app-nav] main{padding:16px 16px 40px}
  body[data-app-nav] .fchip,body[data-app-nav] .aktionen .btn,body[data-app-nav] .seg label{min-height:44px}
  body[data-app-nav] .seg label{display:grid;place-items:center}
  body[data-app-nav] .formel-verweis a{min-height:44px}
}

/* ---------- Feinschliff 2026-10-22 (Thomas: „Glow, Glaseffekt, Morph“ wie auf der Startseite, ruhig und ohne mehr Platz):
   weiche Lichtkanten beim Überfahren und am aktiven Element, Glas auf Flächen über Inhalt (mit Fallback), Formübergänge an
   Symbolen, Schaltern und Karten, langsam wandernde Lichtflecken nur im Kopfband und in der Anzeige (pausieren unsichtbar,
   Klasse .ruht aus helfer.js). Nur transform, opacity, box-shadow und border-radius werden bewegt; alles aus bei reduzierter Bewegung. */
:root{--hf-morph:cubic-bezier(.2,.8,.25,1);--hf-blob:46% 54% 52% 48% / 54% 46% 54% 46%;
  --hf-glow:rgba(31,63,224,.16);--hf-glow-stark:rgba(31,63,224,.3);--hf-glow-volt:rgba(196,255,26,.3);
  --hf-kante:rgba(31,63,224,.22);--hf-glas-licht:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme="dark"]{--hf-glow:rgba(142,163,255,.14);--hf-glow-stark:rgba(142,163,255,.26);--hf-kante:rgba(142,163,255,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hf-glow:rgba(142,163,255,.14);--hf-glow-stark:rgba(142,163,255,.26);--hf-kante:rgba(142,163,255,.28)}}
/* Kopfband der Übersicht: wandernder Lichtfleck hinter dem Raster, Fakten als Glas-Pillen, Schnellrechner mit weichem Licht */
.held::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(520px 340px at 22% 72%,rgba(47,77,230,.38),transparent 70%),radial-gradient(380px 280px at 84% 18%,rgba(196,255,26,.07),transparent 70%);animation:hfDrift 28s ease-in-out infinite alternate;will-change:transform}
.held.ruht::before{animation-play-state:paused}
@keyframes hfDrift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(2.5%,1.5%,0) scale(1.05)}}
.fakten li{box-shadow:var(--hf-glas-licht);transition:border-color .2s,box-shadow .3s,transform .3s var(--hf-morph)}
.fakten li:hover{border-color:rgba(255,255,255,.3);box-shadow:var(--hf-glas-licht),0 0 18px rgba(196,255,26,.12);transform:translateY(-1px)}
.schnell{transition:box-shadow .4s}
.schnell:hover{box-shadow:0 28px 70px rgba(0,0,0,.4),0 0 0 1px var(--navy-rand,transparent),0 0 60px rgba(125,147,255,.16)}
.schnell .anzeige{box-shadow:0 10px 28px rgba(34,56,196,.28),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .3s}
.schnell:hover .anzeige{box-shadow:0 14px 34px rgba(34,56,196,.38),inset 0 1px 0 rgba(255,255,255,.22)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fakten li{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
  .app-hinweis{background:rgba(10,21,64,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
}
/* Seitenleiste: aktiver Rechner mit Lichtkante und leuchtendem Streifen, Symbole morphen beim Überfahren zur weichen Form */
.wz{transition:background-color .2s,box-shadow .3s}
.wz .ic{transition:border-radius .45s var(--hf-morph),transform .4s var(--hf-morph),box-shadow .3s,background-color .25s}
.wz:hover .ic{border-radius:var(--hf-blob);transform:rotate(-6deg) scale(1.06)}
.wz:hover .ic svg{transform:none}
.wz.an{box-shadow:0 0 0 1px var(--hf-kante),0 6px 18px var(--hf-glow)}
.wz.an::before{box-shadow:0 0 10px var(--blue)}
.wz.an .ic{box-shadow:inset 0 0 0 1px var(--k-2,transparent),0 4px 12px var(--hf-glow)}
@supports (color:color-mix(in srgb,red,blue)){
  .wz:hover .ic{box-shadow:0 6px 16px color-mix(in srgb,var(--k-ink,var(--al)) 28%,transparent)}
}
/* Übersicht: Filter-Chips leuchten in ihrer Bereichsfarbe, Kacheln mit Lichtkante und morphendem Symbol */
.fchip{transition:background-color .25s,border-color .25s,color .25s,box-shadow .3s,transform .25s var(--hf-morph)}
.fchip:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--hf-glow)}
.fchip.an{box-shadow:0 8px 20px var(--hf-glow-stark)}
.kachel .ic{transition:transform .35s var(--hf-morph),border-radius .4s var(--hf-morph),box-shadow .3s}
.kachel:hover .ic{border-radius:var(--hf-blob);transform:rotate(-6deg) scale(1.06)}
.kachel:hover .ic svg{transform:none}
.kachel:hover{box-shadow:var(--schatten-hover),0 0 0 1px var(--k-ink)}
@supports (color:color-mix(in srgb,red,blue)){
  .fchip:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--k-ink,var(--blue)) 20%,transparent)}
  .fchip.an{box-shadow:0 8px 20px color-mix(in srgb,var(--k-ink,var(--blue)) 32%,transparent)}
  .kachel:hover{box-shadow:0 2px 4px rgba(20,33,90,.05),0 16px 34px color-mix(in srgb,var(--k-ink) 20%,transparent),0 0 0 1px var(--k-ink)}
  .kachel:hover .ic{box-shadow:0 8px 18px color-mix(in srgb,var(--k-ink) 30%,transparent)}
}
.gruppe{transition:box-shadow .4s}
.gruppe:hover{box-shadow:var(--schatten),0 0 50px var(--hf-glow)}
/* Rechnerseite: Titelsymbol morpht, Knöpfe mit Licht und Lift, Merken leuchtet bernsteinfarben, wenn gesetzt */
.tkopf .ic{transition:border-radius .45s var(--hf-morph),transform .4s var(--hf-morph),box-shadow .3s}
.tkopf .titel:hover .ic{border-radius:var(--hf-blob);transform:rotate(-6deg) scale(1.05)}
.btn{transition:background-color .2s,border-color .2s,color .2s,box-shadow .3s,transform .25s var(--hf-morph),border-radius .3s var(--hf-morph)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--knopf-licht),0 8px 18px rgba(20,33,90,.1)}
.btn:active{transform:none}
.btn.pri:hover{box-shadow:var(--knopf-licht),0 0 0 1px var(--hf-kante),0 10px 24px var(--hf-glow-stark)}
.btn.volt:hover{box-shadow:var(--knopf-licht),0 0 0 1px rgba(196,255,26,.45),0 10px 26px var(--hf-glow-volt);border-radius:12px}
.btn.merk-knopf[aria-pressed=true]{box-shadow:var(--knopf-licht),0 0 16px rgba(255,178,30,.3)}
.btn:focus-visible{box-shadow:var(--focus)}
/* Eingaben: Felder leuchten beim Fokus weich auf, Segment-Schalter morpht zur gewählten Fläche */
.eing{transition:border-color .2s,box-shadow .3s}
.eing:focus-within{box-shadow:var(--focus),0 0 18px var(--hf-glow)}
.seg{transition:box-shadow .3s}
.seg:focus-within{box-shadow:0 0 14px var(--hf-glow)}
.seg label{transition:background-color .25s,color .2s,box-shadow .3s,border-radius .3s var(--hf-morph)}
.seg label.an{border-radius:7px;box-shadow:0 1px 2px rgba(10,21,64,.12),0 0 0 1px var(--hf-kante),0 4px 12px var(--hf-glow)}
.eingaben,.kz,.bild,.svgw,.formel-verweis{transition:box-shadow .4s}
.eingaben:focus-within{box-shadow:var(--schatten),0 0 0 1px var(--hf-kante),0 0 40px var(--hf-glow)}
/* Anzeige: weiches Licht im Messgerät, der Lichtfleck wandert langsam; Kennzahlkarte und Grafik mit Rahmenlicht beim Überfahren */
.anzeige{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.anzeige::after{animation:hfAnzeige 18s ease-in-out infinite alternate;will-change:transform}
.anzeige.ruht::after{animation-play-state:paused}
@keyframes hfAnzeige{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22%,18%,0) scale(1.25)}}
.kz:hover{box-shadow:var(--schatten-hover),0 0 0 1px var(--hf-kante),0 0 44px var(--hf-glow)}
.bild,.svgw{box-shadow:var(--schatten)}
.bild:hover,.svgw:hover{box-shadow:var(--schatten-hover),0 0 0 1px var(--hf-kante),0 0 44px var(--hf-glow)}
.formel-verweis:hover{box-shadow:var(--schatten)}
/* Hinweise: weiche Lichtkante in der Farbe des Hinweises; dunkel nur die feine Oberkante */
.hw{box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:box-shadow .3s}
.hw.ok{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -8px rgba(63,154,82,.55)}
.hw.warn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -8px rgba(224,161,0,.6)}
.hw.err{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -8px rgba(179,32,42,.5)}
.hw.info{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -8px var(--hf-glow-stark)}
:root[data-theme="dark"] .hw,:root[data-theme="dark"] .hw.ok,:root[data-theme="dark"] .hw.warn,:root[data-theme="dark"] .hw.err,:root[data-theme="dark"] .hw.info{box-shadow:var(--hf-glas-licht)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hw,:root:not([data-theme="light"]) .hw.ok,:root:not([data-theme="light"]) .hw.warn,:root:not([data-theme="light"]) .hw.err,:root:not([data-theme="light"]) .hw.info{box-shadow:var(--hf-glas-licht)}}
/* Blättern und Formeln dahinter: Karten mit blauem Licht, Pfeil rückt beim Überfahren in Leserichtung, Pillen heben sich leicht */
.blaettern .blatt{transition:border-color .2s,transform .3s var(--hf-morph),box-shadow .3s,border-radius .3s var(--hf-morph)}
.blaettern .blatt:hover{box-shadow:var(--schatten-hover),0 0 0 1px var(--hf-kante),0 0 40px var(--hf-glow);border-radius:20px}
.blatt-rtg svg{transition:transform .3s var(--hf-morph)}
.blaettern .blatt-vor:hover .blatt-rtg svg{transform:translateX(-3px)}.blaettern .blatt-nach:hover .blatt-rtg svg{transform:translateX(3px)}
.blaettern .blatt-ende:hover{box-shadow:var(--schatten),0 0 0 1px var(--line-2)}
.formel-verweis a{transition:border-color .2s,color .2s,box-shadow .3s,transform .25s var(--hf-morph)}
.formel-verweis a:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--hf-glow)}
.einladung,.gast{transition:box-shadow .4s}.einladung:hover,.gast:hover{box-shadow:0 0 40px var(--hf-glow)}
/* Handy: das Rechnerfeld liegt als Glas über dem Inhalt (ohne backdrop-filter bleibt die Fläche deckend) */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (color:color-mix(in srgb,red,blue)){
  @media (max-width:900px){body[data-app-nav] .panel{background:color-mix(in srgb,var(--raised) 92%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}}
}
@media (hover:none){.wz:hover .ic,.kachel:hover .ic,.tkopf .titel:hover .ic{transform:none}.wz:hover .ic{border-radius:9px}.kachel:hover .ic{border-radius:11px}.tkopf .titel:hover .ic{border-radius:13px}}
@media (prefers-reduced-motion:reduce){.held::before,.anzeige::after{animation:none;transform:none}
  .wz:hover .ic,.kachel:hover .ic,.tkopf .titel:hover .ic,.fchip:hover,.btn:hover,.fakten li:hover,.formel-verweis a:hover,.blaettern .blatt-vor:hover .blatt-rtg svg,.blaettern .blatt-nach:hover .blatt-rtg svg{transform:none}}
@media print{.held::before,.anzeige::after{display:none}}