/* Enerlyze · Wirtschaftlichkeitsrechner (Kapitel „Rechnen Sie selbst“).
   Alle Stile tragen das Präfix .rechner- bzw. sind unter #kapitel-rechner gescoped, damit das spätere Einhängen
   in prototyp/index.html konfliktfrei bleibt. Farben, Schrift und Bewegung ausschließlich aus tokens.css.
   Farblogik: Amber = Ergebnis, Cyan (--leitwert) = Annahme, kein Rot. */

/* ══════════ Vorschau-Rahmen (nur rechner.html; entfällt beim Einhängen) ══════════ */
.rechner-vorschau{margin:0;background:var(--graphit);color:var(--papier);font-family:var(--sans);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
.rechner-vorschau *,.rechner-vorschau *::before,.rechner-vorschau *::after{box-sizing:border-box}
.rechner-vorschau-kopf{border-bottom:1px solid var(--linie)}
.rechner-vorschau-innen{max-width:calc(1280px + 72px);margin:0 auto;padding:0 36px;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.rechner-vorschau-marke{display:flex;border-radius:6px}
.rechner-vorschau-marke img{display:block;width:115px;height:auto}
.rechner-vorschau-marke:focus-visible{outline:2px solid var(--leitwert);outline-offset:4px}
.rechner-vorschau-etikett{margin:0;font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nebel)}
.rechner-vorschau-fuss{border-top:1px solid var(--linie);padding:24px 0 56px}

/* ══════════ Kapitel ══════════
   Abstände wie .kapitel im Prototyp, damit das Kapitel eingehängt und eigenständig gleich aussieht. */
#kapitel-rechner{position:relative;padding:clamp(112px,12vw,176px) 0;border-top:1px solid var(--linie);scroll-margin-top:72px;color:var(--papier)}
#kapitel-rechner *,#kapitel-rechner *::before,#kapitel-rechner *::after{box-sizing:border-box}
/* Rücksetzen ohne Spezifität, damit die margin-top der Bausteine greifen */
:where(#kapitel-rechner) :where(p,h2,h3){margin:0}
#kapitel-rechner :focus-visible{outline:2px solid var(--leitwert);outline-offset:3px;border-radius:6px}
.rechner-innen{max-width:calc(1280px + 72px);margin:0 auto;padding:0 36px}

/* Kopf: Etikett, H2 | Einleitung (wie .kap-kopf.zweispaltig) */
.rechner-kopf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px;align-items:end}
.rechner-etikett{display:flex;align-items:center;gap:12px;font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hell)}
.rechner-etikett span{color:var(--nebel)}
.rechner-etikett span::after{content:"";display:inline-block;width:28px;height:1px;margin-left:12px;vertical-align:middle;background:var(--linie-2)}
#kapitel-rechner h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.3vw,62px);line-height:1.0;letter-spacing:-.04em;margin:26px 0 0;max-width:16.5em;text-wrap:balance}
.rechner-einleitung{font-size:17.5px;line-height:1.6;color:var(--text-fliess);max-width:34em;text-wrap:pretty;margin-bottom:6px}

/* ══════════ Raster: Eingaben | Ergebnis ══════════ */
.rechner-raster{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px;margin-top:80px;align-items:start}
.rechner-eingaben{display:grid;gap:24px;min-width:0}

/* Karten (Vorbild: .karte / .art in Kapitel 2 und 5) */
.rechner-karte{position:relative;border-radius:20px;padding:34px 40px 30px;min-width:0}
.rechner-kunde{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--linie-2),0 40px 100px -50px #000}
/* Annahmen treten zurück: keine Füllung, nur Haarlinie, gedämpfte Schrift */
.rechner-annahmen{background:transparent;box-shadow:inset 0 0 0 1px var(--linie)}

.rechner-karten-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--linie)}
.rechner-karten-etikett{font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hell)}
.rechner-karten-notiz{font:400 12px var(--mono);letter-spacing:.02em;color:var(--nebel)}
.rechner-annahmen .rechner-karten-etikett{color:var(--leitwert)}

/* Feld: Beschriftung links, Eingabe rechts */
.rechner-feld{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:12px 28px;align-items:center;padding:20px 0;border-bottom:1px solid var(--linie)}
.rechner-feld:last-child,.rechner-feld:has(+ .rechner-zuruecksetzen-zeile){border-bottom:0;padding-bottom:4px}
.rechner-feld-text{min-width:0;display:grid;gap:6px}
.rechner-feld-zeile{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.rechner-feld-name{font-size:16px;line-height:1.4;color:var(--papier);cursor:pointer;text-wrap:pretty}
.rechner-feld-hilfe{font:400 12px/1.55 var(--mono);color:var(--nebel);text-wrap:pretty}
.rechner-annahmen .rechner-feld-name{font-size:15px;color:var(--hell)}

.rechner-teiler{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-top:22px;padding:18px 0 2px;border-top:1px solid var(--linie-2)}
.rechner-teiler+.rechner-feld{border-top:1px solid var(--linie);margin-top:16px}

/* Etikett „Annahme“ (Cyan = Annahme) */
.rechner-annahme{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--leitwert);background:rgba(114,212,255,.06);box-shadow:inset 0 0 0 1px rgba(114,212,255,.28)}

/* Eingabe */
.rechner-eingabe{position:relative;min-width:0}
.rechner-eingabe input{display:block;width:100%;height:54px;margin:0;padding:0 16px;border:0;border-radius:12px;appearance:none;
  font:500 20px var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--papier);caret-color:var(--leitwert);
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--linie-2);
  transition:box-shadow .5s var(--weich),background .5s var(--weich)}
.rechner-eingabe.mit-einheit input{padding-right:58px}
.rechner-eingabe input::placeholder{color:var(--nebel);font-size:14px;font-weight:400;letter-spacing:0;opacity:1}
.rechner-eingabe input:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--papier) 30%,transparent)}
#kapitel-rechner .rechner-eingabe input:focus-visible{outline:2px solid var(--leitwert);outline-offset:2px;border-radius:12px;background:rgba(255,255,255,.055)}
/* ungültige Eingabe: ruhig markiert (Papier-Rand, kein Rot) */
.rechner-eingabe input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--papier);background:rgba(243,241,234,.06)}
.rechner-einheit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:400 13px var(--mono);color:var(--nebel);pointer-events:none}
/* Annahmen: kleinere, ruhigere Eingaben */
.rechner-annahmen .rechner-eingabe input{height:48px;font-size:17px;font-weight:400;color:var(--hell);background:transparent;box-shadow:inset 0 0 0 1px var(--linie-2)}

/* Etikett „Beispielwert“: neutral (nicht Cyan wie „Annahme“); verschwindet, sobald das Feld geändert ist */
.rechner-beispiel{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--nebel);box-shadow:inset 0 0 0 1px var(--linie-2)}
.rechner-beispiel[hidden]{display:none}
.rechner-zuruecksetzen-zeile{margin-top:8px;padding-top:4px;border-top:1px solid var(--linie)}
.rechner-zuruecksetzen-zeile:has(> [hidden]){display:none}
.rechner-zuruecksetzen{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:400 12px var(--mono);letter-spacing:.02em;color:var(--hell);text-decoration:underline;text-decoration-color:var(--linie-2);text-underline-offset:4px;transition:color .5s var(--weich)}
.rechner-zuruecksetzen:hover{color:var(--papier);text-decoration-color:currentColor}
.rechner-zuruecksetzen[hidden]{display:none}

/* ══════════ Ergebnis ══════════ */
.rechner-ergebnis{position:sticky;top:96px;min-width:0;border-radius:20px;padding:34px 40px 32px;
  background:linear-gradient(180deg,rgba(242,169,59,.045),rgba(255,255,255,.01) 40%),var(--tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--linie-2),0 40px 120px -50px #000}
.rechner-ergebnis::before{content:"";position:absolute;left:40px;top:-1px;width:56px;height:1px;background:var(--amber)}
.rechner-ergebnis .rechner-karten-notiz{color:var(--hell)}

.rechner-hinweis{margin-top:22px;padding:14px 18px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--linie);font:400 12.5px/1.6 var(--mono);color:var(--hell);text-wrap:pretty}
.rechner-hinweis[hidden]{display:none}

.rechner-block{padding:26px 0 4px}
.rechner-block+.rechner-block{margin-top:22px;border-top:1px solid var(--linie)}
.rechner-block-etikett{display:flex;align-items:center;gap:10px;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nebel)}
.rechner-block-etikett span{color:var(--hell)}

.rechner-leitzahl{margin-top:16px}
.rechner-leitzahl-wert{font:500 clamp(40px,3.6vw,52px)/1.05 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--amber);overflow-wrap:anywhere}
.rechner-einheit-gross{font-size:.46em;letter-spacing:0;color:var(--hell);font-weight:400}
.rechner-leitzahl-name{margin-top:8px;font-size:15px;line-height:1.45;color:var(--hell)}
.rechner-nebenzeile{margin-top:10px;font:400 12.5px/1.6 var(--mono);color:var(--nebel);font-variant-numeric:tabular-nums}
.rechner-nebenzeile .rechner-wert{color:var(--hell)}
.rechner-zeit-hinweis{margin-top:10px;font:400 12.5px/1.6 var(--mono);color:var(--hell)}
.rechner-zeit-hinweis[hidden]{display:none}

.rechner-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--linie)}
.rechner-zeile-name{font-size:15px;line-height:1.45;color:var(--hell)}
.rechner-zeile-wert{font:500 24px/1.2 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--amber);white-space:nowrap}
.rechner-ergaenzen{display:none;margin-top:3px;font:400 11.5px/1.5 var(--mono);color:var(--nebel);text-wrap:pretty}
.rechner-zeile.fehlt .rechner-ergaenzen,.rechner-zeile-ueberzahlung .rechner-ergaenzen{display:block}
.rechner-zeile-name{min-width:0;flex:1 1 14em}
/* b): Nebenzahlen neutral – sie beruhen nur auf der Anteils-Annahme und sind kein Verlust und keine Ersparnis */
.rechner-zeile.neutral .rechner-zeile-wert{font-size:18px;font-weight:400;letter-spacing:0;color:var(--hell)}
.rechner-zeile-zusatz{display:block;margin-top:3px;font:400 11.5px/1.5 var(--mono);color:var(--nebel)}
/* Überzahlung: Leitzahl, sobald eine Abweichung eingetragen ist; sonst Zeile mit Ergänzungshinweis */
.rechner-block-b.ohne-ueberzahlung .rechner-leitzahl-ueberzahlung{display:none}
.rechner-block-b:not(.ohne-ueberzahlung) .rechner-zeile-ueberzahlung{display:none}
.rechner-block-b.ohne-ueberzahlung .rechner-zeile-ueberzahlung{margin-top:16px}

/* Noch kein Ergebnis: Striche statt Zahlen, in Nebel */
.rechner-wert.leer{color:var(--nebel)}
.rechner-zahl-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.rechner-vorbehalt{margin-top:28px;padding-top:20px;border-top:1px solid var(--linie);font:400 12px/1.65 var(--mono);color:var(--nebel);text-wrap:pretty}

/* Tippflächen ≥ 44 px: Eingaben 48–54 px hoch, „Details“ und „Zurücksetzen“ 44 px; Beschriftungen sind klickbar */

/* ══════════ Ergebnis-Band (nur unter 900 px) ══════════
   Klebt unten, solange das Ergebnis außer Sicht ist (rechner.js blendet es per IntersectionObserver aus).
   Rechts bleibt Platz für den Anhalten-Knopf des Prototyps (44 × 44 px, 16 px vom Rand). */
.rechner-band{display:none}
@media (max-width:899px){
  .rechner-band{position:sticky;z-index:30;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-right:48px;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:60px;padding:8px 10px 8px 16px;border-radius:16px;
    background:color-mix(in srgb,var(--tinte) 78%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--linie-2),0 20px 50px -20px #000;
    transition:opacity .5s var(--weich),transform .5s var(--weich),visibility 0s linear 0s}
  .rechner-band.ist-weg{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none;
    transition:opacity .5s var(--weich),transform .5s var(--weich),visibility 0s linear .5s}
}
.rechner-band-wert{min-width:0}
.rechner-band-name{font:400 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nebel);white-space:nowrap}
.rechner-band-zahl{margin-top:2px;font:500 17px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--amber);white-space:nowrap}
.rechner-band-einheit{font-size:12px;font-weight:400;color:var(--hell)}
.rechner-band-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font:500 13px var(--sans);white-space:nowrap;
  color:var(--graphit);background:var(--papier);text-decoration:none}
#kapitel-rechner .rechner-band-link:focus-visible{border-radius:999px}
@media (prefers-reduced-motion:reduce){.rechner-band,.rechner-band.ist-weg{transition:none}}
/* Im Prototyp: Zwischen 561 und 899 px ist der Anhalten-Knopf eine Pille mit Text (rechts 20 px, unten 20 px,
   44 px hoch, ~185 px breit). Das Band sitzt dann darüber statt daneben. Unter 561 px ist der Knopf 44 × 44 px
   (rechts/unten 12 px); dort hält margin-right:48px ab dem 20-px-Inhaltsrand ≥ 12 px Abstand. */
@media (min-width:561px) and (max-width:899px){
  body:has(.anhalten) .rechner-band{bottom:calc(76px + env(safe-area-inset-bottom,0px));margin-right:0}
}

/* ══════════ Responsiv ══════════ */
@media (max-width:1000px){
  .rechner-kopf{grid-template-columns:1fr;gap:28px}
}
/* Unter 900 px einspaltig, Ergebnis nicht mehr klebend */
@media (max-width:899px){
  .rechner-raster{grid-template-columns:1fr;margin-top:56px;gap:16px}
  .rechner-eingaben{gap:16px}
  .rechner-ergebnis{position:relative;top:auto}
}
@media (max-width:560px){
  .rechner-vorschau-innen,.rechner-innen{padding:0 20px}
  #kapitel-rechner h2{font-size:clamp(30px,8.4vw,38px)}
  .rechner-einleitung{font-size:16.5px}
  .rechner-karte,.rechner-ergebnis{padding:28px 22px 24px}
  .rechner-ergebnis::before{left:22px}
  .rechner-feld{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .rechner-leitzahl-wert{font-size:40px}
  .rechner-zeile-wert{font-size:22px}
}