/* kv-strom.css — Stromkostenrechner (stromkostenrechner.html), Aufbau V1 nach Fabio 28.10. (P58, Mockup p58-strom/v1).
   Baut an, was es schon gibt: Karte .card (kv-tools.css), Tasten kv-knopf (Auswahl = --chip, Handy 2×2), Tokens aus kv.css.
   Nur diese Seite, Präfix .sk-:
     .sk-teil     ein Schritt in der Karte (Geräte · Kühlen · Heizen · Strompreis), Haarlinie dazwischen, keine Kästen
     .sk-geraet   eine Gerätezeile: Raum · Größe · entfernen
     .sk-wahl     eine Frage mit Tasten (Stunden am Tag / Monate)
     .sk-erg      Ergebnis: je Zweck ein Feld Kühlen | Heizen, Summe klein darunter (Ink-Fläche wie Kostenrechner .krb-erg-kopf)
     .sk-serien   Qualitätsstufen im Vergleich: Register (2-px-Ink-Linie, Haarlinien)
     .sk-hv       Heizvergleich Gas/Heizöl/Elektroheizung (nur mit Heizen)
     .sk-ueb      Satz „Übernommen aus …“ an den Geräten (nur mit Journey)
     .sk-fragen   „Ihre nächsten Fragen“ unter dem Rechner
     .sk-mit      mitlaufende Ergebniszeile am Handy
   Schriftstufen wie .krb in kv-plan.css (t1 22 · t2 17 · t3 15 · t4 13 · t5 11). Abstände 4·8·12·16·20·24·28·32, kein Rot.
   Regeln innerhalb der Karte mit „.sk “ davor (schlägt kv.css p / .card h2). */

.sk{--krb-t1:22px;--krb-t2:17px;--krb-t3:15px;--krb-t4:13px;--krb-t5:11px;--sk-pad:var(--s-7);font-family:var(--f);color:var(--ink)}
.sk.sk-karte{padding:0;overflow:clip}
.sk .sk-in{padding:0 var(--sk-pad)}

/* ══ Schritt ══ */
.sk .sk-teil{padding:var(--s-6) 0;border-top:1px solid var(--border)}
.sk .sk-teil:first-child{border-top:0}
.sk .sk-t{margin:0;font-size:var(--krb-t1);font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.sk .sk-s{margin:var(--s-1) 0 0;font-size:var(--krb-t3);line-height:1.5;color:var(--muted)}
.sk .sk-s a,.sk .sk-hint a{color:var(--teal-d);font-weight:var(--fw-semibold);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(45,107,92,.38)}
.sk .sk-hint{margin:var(--s-3) 0 0;font-size:var(--krb-t4);line-height:1.5;color:var(--muted)}
.sk .sk-hint b{color:var(--ink);font-weight:var(--fw-semibold)}

/* ══ Übernommen-Satz ══ */
.sk .sk-ueb{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:var(--s-3) 0 0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.sk .sk-ueb[hidden]{display:none}
.sk .sk-ueb b{font-weight:var(--fw-semibold);color:var(--ink)}
.sk .sk-ueb a{color:var(--teal-d);font-weight:var(--fw-semibold);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(45,107,92,.38);-webkit-tap-highlight-color:transparent}
@media (hover:hover){.sk .sk-ueb a:hover{color:var(--ink);text-decoration-color:currentColor}}

/* ══ Geräte ══ */
.sk .sk-geraete{margin-top:var(--s-2);display:grid;gap:var(--s-2)}
.sk .sk-geraet,.sk .sk-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 36px;gap:var(--s-3);align-items:center}
.sk .sk-kopf{margin-top:var(--s-4);font-size:var(--krb-t5);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sk .sk-geraet select{height:44px;padding-top:0;padding-bottom:0;font-size:var(--krb-t3)}
.sk .sk-weg{width:36px;height:36px;border:0;border-radius:var(--r-1);background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sk .sk-weg svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media (hover:hover){.sk .sk-weg:hover{background:var(--grey-lt);color:var(--ink)}}
.sk .sk-weg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sk .sk-weg[hidden]{display:block;visibility:hidden}
.sk .sk-dazu{margin-top:var(--s-3)}

/* ══ Fragen mit Tasten ══ */
.sk .sk-wahl{margin-top:var(--s-4)}
.sk .sk-wahl-t{margin:0 0 var(--s-2);font-size:var(--krb-t3);font-weight:var(--fw-semibold);line-height:1.4;color:var(--ink)}
.sk .sk-wahl .kv-tasten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.sk .sk-wahl .kv-tasten--zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px}
.sk .sk-wahl .kv-knopf--chip{width:100%;padding:0 var(--s-2)}
.sk .sk-zeit{margin:var(--s-3) 0 0;font-size:var(--krb-t3);line-height:1.5;color:var(--body)}
.sk .sk-zeit b{color:var(--ink);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.sk .sk-heiz[hidden]{display:none}

/* ══ Strompreis: ein Feld ══ */
.sk .sk-preis{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--s-2) var(--s-5);align-items:center;margin-top:var(--s-4)}
.sk .sk-preis input{height:44px;padding-top:0;padding-bottom:0;font-size:var(--krb-t3)}
.sk .sk-preis-w{margin:0;font-size:var(--krb-t4);line-height:1.45;color:var(--muted)}
.sk .sk-preis-w b{display:block;font-size:var(--krb-t2);font-weight:var(--fw-semibold);color:var(--ink);font-variant-numeric:tabular-nums}

/* ══ Ergebnis: Ink-Fläche wie der Kostenrechner (.krb-erg-kopf, kv-plan.css), je Zweck ein Feld ══
   Fabio 28.10.: Kühlen und Heizen auf einen Blick getrennt, keine große Summe; „zusammen“ klein unter den Feldern.
   Handy: Felder untereinander, Beschriftung links, Zahl rechts. */
.sk .sk-erg{position:relative;overflow:hidden;padding:var(--s-6) var(--sk-pad);background:var(--ink);color:#fff}
.sk .sk-erg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 20% 0%,rgba(61,139,122,.16),transparent 70%),radial-gradient(ellipse 50% 50% at 95% 100%,rgba(46,64,87,.35),transparent 70%)}
.sk .sk-erg>*{position:relative;z-index:1}
.sk .sk-erg-l{margin:0 0 var(--s-3);font-size:var(--krb-t5);font-weight:700;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#71C3AA}
.sk .sk-erg-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.sk .sk-erg-w{min-width:0;padding:var(--s-4) var(--s-5) var(--s-5);border-radius:var(--r-3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
.sk .sk-erg-w--aus{background:transparent;border-color:rgba(255,255,255,.16)}
.sk .sk-erg-k{display:block;font-size:var(--krb-t2);font-weight:var(--fw-semibold);line-height:1.3;color:#fff}
.sk .sk-erg-k small{display:block;margin-top:2px;font-size:var(--krb-t4);font-weight:var(--fw-regular);color:rgba(255,255,255,.72)}
.sk .sk-erg-p{display:block;margin-top:var(--s-4)}
.sk .sk-erg-z{display:block;font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.sk .sk-erg-u{display:block;margin-top:2px;font-size:var(--krb-t4);color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.sk .sk-erg-w--aus .kv-knopf--text{font-size:var(--krb-t3)}
.sk .sk-erg-sum{margin:var(--s-4) 0 0;font-size:var(--krb-t4);line-height:1.5;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.sk .sk-erg-sum b{color:#fff;font-weight:var(--fw-semibold)}
.sk .sk-erg-a{margin:var(--s-2) 0 0;font-size:var(--krb-t4);line-height:1.5;color:rgba(255,255,255,.72)}
.sk .sk-erg-a a{color:#71C3AA;font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(113,195,170,.45)}
.sk .sk-sprung{animation:skSprung .4s var(--ease-out)}
@keyframes skSprung{0%{opacity:.35;transform:translateY(-3px)}100%{opacity:1;transform:none}}

/* ══ Qualitätsstufen im Vergleich ══ */
.sk .sk-serien{padding-top:var(--s-6);padding-bottom:var(--s-7)}
.sk .sk-serien-liste{margin:var(--s-4) 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.sk .sk-serien-kopf,.sk .sk-serie{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,.9fr)) minmax(0,1.4fr);gap:var(--s-3);align-items:center}
.sk .sk-serien-kopf{padding:var(--s-2) var(--s-2) var(--s-2) 0;font-size:var(--krb-t5);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sk .sk-serien-kopf span:not(:first-child){text-align:right}
.sk .sk-serien-liste li+li{border-top:1px solid var(--border)}
.sk .sk-serie{width:100%;padding:var(--s-3) var(--s-2) var(--s-3) 0;border:0;background:none;font-family:var(--f);text-align:left;cursor:pointer;color:var(--ink);
  transition:background var(--dur-base) var(--ease-smooth)}
.sk .sk-serie-n b{display:block;font-size:var(--krb-t2);font-weight:var(--fw-semibold);line-height:1.3}
.sk .sk-serie-n small{display:block;font-size:var(--krb-t4);line-height:1.4;color:var(--muted)}
.sk .sk-serie-v{text-align:right;font-size:var(--krb-t2);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.sk .sk-serie-v small{display:none}
.sk .sk-serie-d{color:var(--body);font-weight:var(--fw-medium)}
.sk .sk-serie[aria-pressed="true"] .sk-serie-n b{color:var(--teal-d)}
.sk .sk-serie[aria-pressed="true"] .sk-serie-n small::after{content:" · Ihre Auswahl";color:var(--teal-d);font-weight:var(--fw-semibold)}
.sk .sk-serie[aria-pressed="true"] .sk-serie-d{color:var(--muted)}
@media (hover:hover){.sk .sk-serie:hover{background:var(--teal-lt)}.sk .sk-serie:hover .sk-serie-n b{color:var(--teal-d)}}
.sk .sk-serie:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:var(--r-1)}
.sk .sk-serien-satz{margin:var(--s-4) 0 0;font-size:var(--krb-t3);line-height:1.55;color:var(--body)}
.sk .sk-serien-satz b{color:var(--ink);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.sk .sk-serien-fuss{margin:var(--s-2) 0 0;font-size:var(--krb-t4);line-height:1.5;color:var(--muted)}
.sk .sk-serien-fuss a{color:var(--teal-d);font-weight:var(--fw-semibold)}

/* ══ Heizvergleich (P50, nur mit Heizen): Tabelle wie „Verbrauch pro Stunde“ (.hourly), Haarlinie zu den Stufen ══ */
.sk .sk-hv{padding-top:var(--s-6);padding-bottom:var(--s-7);border-top:1px solid var(--border)}
.sk .sk-hv[hidden]{display:none}
.sk .sk-hv .sk-s b{color:var(--ink);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.sk .sk-hv-t{max-width:none}
.sk .sk-hv-t th:not(:first-child),.sk .sk-hv-t td:not(:first-child){text-align:right;white-space:nowrap;padding-right:0;padding-left:var(--s-3)}

/* ══ Ihre nächsten Fragen ══ */
.sk-fragen{margin:var(--s-10) 0;text-align:left}
.sk-fragen-t{margin:0 0 var(--s-4);font-size:var(--fs-3xl);font-weight:var(--fw-medium);line-height:1.2;letter-spacing:var(--tr-snug);color:var(--ink)}
.sk-fragen ul{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.sk-fragen li+li{border-top:1px solid var(--border)}
.sk-fragen a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) 18px;gap:var(--s-1) var(--s-6);align-items:center;padding:var(--s-4) 0;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk-f-q b{display:block;font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:1.35;letter-spacing:var(--tr-base);color:var(--ink);transition:color var(--dur-base) var(--ease-smooth)}
.sk-f-q span{display:block;margin-top:2px;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.sk-f-v{text-align:right;max-width:30ch;font-size:var(--fs-md);font-weight:var(--fw-semibold);line-height:1.25;color:var(--teal-d)}
.sk-f-p{width:18px;height:18px;color:var(--teal-d);transition:transform var(--dur-base) var(--ease-smooth)}
@media (hover:hover){.sk-fragen a:hover .sk-f-q b{color:var(--teal-d)}.sk-fragen a:hover .sk-f-p{transform:translateX(3px)}}
.sk-fragen a:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:var(--r-1)}

/* ══ Mitlaufende Ergebniszeile (nur Handy): Kühlen links, Heizen rechts, keine Summe ══ */
.sk-mit{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;display:none;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-2) var(--s-4);border:0;font-family:var(--f);text-align:left;cursor:pointer;
  background:linear-gradient(135deg,#1C2B3A,#22374A);color:#fff;border-radius:var(--r-3);
  box-shadow:0 16px 36px -14px rgba(28,43,58,.55),0 4px 10px -4px rgba(28,43,58,.3);transform:translateY(160%);transition:transform .32s var(--ease-out)}
.sk-mit.is-an{transform:none}
.sk-mit:focus-visible{outline:2px solid #71C3AA;outline-offset:3px}
.sk-mit-l{display:flex;flex-direction:column;min-width:0}
.sk-mit-l+.sk-mit-l{align-items:flex-end;text-align:right}
.sk-mit-k{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:#71C3AA;line-height:1.3}
.sk-mit-z{display:inline-block;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--tr-base);line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-mit-z small{margin-left:6px;font-size:var(--fs-sm);font-weight:var(--fw-regular);letter-spacing:0;color:rgba(255,255,255,.7)}
.sk-mit-aus{font-size:var(--fs-sm);font-weight:var(--fw-regular);color:rgba(255,255,255,.75)}
@media (max-width:900px){.sk-mit{display:flex}}

/* ══ Wie wir rechnen ══ */
.sk-rw p{font-size:15px;line-height:1.7;color:var(--body);max-width:760px;margin:0}
.sk-rw p+p{margin-top:14px}
.sk-rw p a{color:var(--teal);font-weight:var(--fw-semibold)}
.sk-rw h3{margin:var(--s-8) 0 var(--s-2);font-size:var(--fs-xl)}
.sk-annahme{font-weight:var(--fw-semibold);color:var(--ink)}
.hourly{width:100%;max-width:760px;border-collapse:collapse;margin-top:var(--s-4)}
.hourly th{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--muted);text-align:left;padding:0 var(--s-3) var(--s-2) 0}
.hourly td{padding:var(--s-3) var(--s-3) var(--s-3) 0;border-top:1px solid var(--stone);font-size:var(--fs-md);color:var(--body);font-variant-numeric:tabular-nums}
.hourly td b{color:var(--ink);font-weight:var(--fw-semibold)}
.hourly .lvl{font-weight:var(--fw-semibold);color:var(--ink)}
.hourly .lvl small{display:block;font-weight:var(--fw-regular);color:var(--muted);font-size:var(--fs-sm)}
.sk-bsp td small{display:block;font-size:var(--fs-sm);color:var(--muted)}
.sk-rw .sk-rw-fuss{margin-top:12px;font-size:13px;color:var(--muted)}

/* ══ Handy ══ */
@media (max-width:640px){
  .sk{--sk-pad:var(--s-5);--krb-t1:20px}
  .sk .sk-geraet,.sk .sk-kopf{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) 32px;gap:var(--s-2)}
  .sk .sk-geraet select,.sk .sk-preis input{font-size:16px}
  .sk .sk-geraet select{padding-left:var(--s-3);padding-right:var(--s-6);background-position:right var(--s-2) center}
  .sk .sk-weg{width:32px}
  .sk .sk-wahl .kv-tasten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk .sk-wahl .kv-tasten--zwei{max-width:none}
  .sk .sk-preis{grid-template-columns:minmax(0,1fr)}
  .sk .sk-erg-zwei{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .sk .sk-erg-w{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-4)}
  .sk .sk-erg-p{margin-top:0;text-align:right}
  .sk .sk-erg-z{font-size:28px}
  .sk .sk-erg-w--aus{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .sk .sk-erg-w--aus .sk-erg-p{text-align:left}
  .sk .sk-serien-kopf{display:none}
  .sk .sk-serie{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-3) 0}
  .sk .sk-serie-n{grid-column:1;grid-row:1 / span 3;align-self:start}
  .sk .sk-serie[aria-pressed="true"] .sk-serie-n small::after{content:"Ihre Auswahl";display:block}
  .sk .sk-serie-v{grid-column:2}
  .sk .sk-serie-v small{display:inline;font-size:var(--krb-t4);font-weight:var(--fw-regular);color:var(--muted);margin-left:4px}
  .sk .sk-serie-d{font-size:var(--krb-t3)}
  .sk .sk-serie[aria-pressed="true"] .sk-serie-zehn{display:none}
  .sk-fragen{margin:var(--s-8) var(--s-1)}
  .sk-fragen-t{font-size:var(--fs-2xl)}
  .sk-fragen a{grid-template-columns:minmax(0,1fr) 18px;gap:var(--s-1) var(--s-3)}
  .sk-f-q{grid-column:1;grid-row:1}
  .sk-f-v{grid-column:1;grid-row:2;text-align:left;max-width:none;font-size:var(--fs-sm)}
  .sk-f-p{grid-column:2;grid-row:1 / span 2}
  .sk-f-q b{font-size:var(--fs-lg)}
  .sk-f-q span{font-size:var(--fs-sm)}
}
@media (prefers-reduced-motion:reduce){.sk .sk-sprung{animation:none}.sk .sk-serie,.sk-mit,.sk-f-p{transition:none}}