/* ============================================================
   TopCharge Partner-Funnel — Produktions-Stylesheet (Staging).
   Nutzt die TopCharge-Designtokens 1:1 (Farben, Typografie aus
   DESIGN.md). Fortschrittsakku (.battery__*) 1:1 aus
   mockups/v1-ladestand.html übernommen, restliches Layout aus
   mockups/v3-gespraech.css.
   ============================================================ */

:root {
  --paper: oklch(0.966 0.007 236);
  --paper-2: oklch(0.945 0.009 236);
  --paper-3: oklch(0.922 0.011 238);
  --ink: oklch(0.255 0.055 262);
  --ink-2: oklch(0.415 0.046 260);
  --ink-3: oklch(0.525 0.036 258);
  --rule: oklch(0.865 0.012 240);
  --rule-2: oklch(0.775 0.017 244);
  --green: oklch(0.805 0.185 150);
  --green-deep: oklch(0.5 0.152 152);
  --battery-fill: oklch(0.6 0.18 150);
  --blue: oklch(0.555 0.118 245);
  --blue-bright: oklch(0.66 0.13 244);
  --dark: oklch(0.235 0.055 262);
  --on-dark: oklch(0.932 0.012 236);
  --on-dark-2: oklch(0.775 0.021 238);
  --err: oklch(0.52 0.19 26);

  --s-4: 0.25rem;  --s-8: 0.5rem;   --s-12: 0.75rem; --s-16: 1rem;
  --s-24: 1.5rem;  --s-32: 2rem;    --s-48: 3rem;    --s-64: 4rem;

  --sheet-pad: clamp(1.25rem, 0.5rem + 3vw, 3.25rem);
  --inner-narrow: 760px;
  --inner-wide: 1000px;

  --font-body: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Konversations-Typografie: eine Frage füllt den Bildschirm,
     bleibt an jedem Breakpoint innerhalb der Zeile (kein Overflow). */
  --t-frage: clamp(1.7rem, 1.25rem + 2.6vw, 3.1rem);
  --t-fig: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem);
  --t-lead: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  --t-mono: 0.72rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2 { margin: 0; text-wrap: balance; font-weight: 700; line-height: 1.1; }
p { margin: 0; }
button { font: inherit; color: inherit; }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.skip {
  position: absolute; left: var(--s-8); top: -80px;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--ink); color: var(--on-dark);
  padding: var(--s-8) var(--s-16); z-index: 60;
  font-family: var(--font-mono); font-size: 0.85rem;
  border-radius: 2px; transition: top .18s var(--ease);
}
.skip:focus { top: var(--s-8); }

:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 1px; }

/* ---------- Grundgerüst ---------- */
.funnel { display: flex; flex-direction: column; min-height: 100dvh; }

/* ---------- Topbar: Akku-Fortschritt (SVG aus v1-ladestand) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-16);
  padding: var(--s-12) var(--sheet-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.tb-back {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-2); border-radius: 3px;
  color: var(--ink); cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.tb-back svg { width: 20px; height: 20px; }
.tb-back:hover { border-color: var(--green); color: var(--green-deep); }
.tb-back[hidden] { display: none; }

.tb-battery { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; max-width: 72px; }
.battery { width: 58px; height: 26px; flex: none; overflow: visible; }
.battery__shell { fill: none; stroke: var(--ink); stroke-width: 3; }
.battery__nub { fill: var(--ink); }
.battery__fill {
  fill: var(--battery-fill);
  transition: width 0.55s var(--ease);
}
.tb-battery.ist-voll .battery__fill { fill: var(--green-deep); }
.battery__bolt {
  fill: var(--paper);
  opacity: 0;
  transform-origin: 28px 15px;
  transform: scale(0.6);
  transition: opacity .3s var(--ease) .1s, transform .3s var(--ease) .1s;
}
.tb-battery.ist-voll .battery__bolt { opacity: 1; transform: scale(1); }

.tb-meta { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; font-family: var(--font-mono); line-height: 1.25; }
.tb-meta [data-fortschritt-prozent] { font-size: 0.85rem; font-weight: 600; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.tb-meta [data-fortschritt-label-voll], .tb-meta [data-fortschritt-label-kompakt] {
  font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}
.tb-meta [data-fortschritt-label-kompakt] { display: none; font-variant-numeric: tabular-nums; }

.tb-restart {
  flex: none;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: none; cursor: pointer;
  padding: var(--s-8) var(--s-4); min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .16s var(--ease);
}
.tb-restart:hover { color: var(--green-deep); }

/* ---------- Bühne ---------- */
.stage { flex: 1 1 auto; position: relative; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--s-32) var(--sheet-pad) var(--s-48);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  overflow-y: auto;
}
.screen.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.screen.wird-verlassen { opacity: 0; transform: translateY(-10px); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.screen.ist-aktiv:not(.wird-verlassen) { animation: bildschirmEin .32s var(--ease); }

@keyframes bildschirmEin {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* margin: auto statt justify-content: center auf .screen — zentriert
   genauso, lässt bei zu großem Inhalt (z. B. das Kontaktformular auf
   niedrigen Viewports) aber den Anfang erreichbar statt ihn oben
   unerreichbar wegzuschneiden. */
.screen__inner { max-width: var(--inner-narrow); margin: auto; width: 100%; }
.screen__inner--breit { max-width: var(--inner-wide); }
.screen__kicker { margin-bottom: var(--s-12); }
.screen__frage {
  font-size: var(--t-frage);
  letter-spacing: -0.015em;
  max-width: 17ch;
}
.screen__hinweis { margin-top: var(--s-16); font-size: var(--t-lead); color: var(--ink-2); max-width: 46ch; }

/* ---------- Chips ---------- */
.chips { margin-top: var(--s-32); display: flex; flex-direction: column; gap: var(--s-12); }
.chip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  width: 100%; min-height: 56px; text-align: left;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: var(--s-16) var(--s-24);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease);
}
.chip:hover { border-color: var(--green); background: var(--paper); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip.ist-gewaehlt { background: var(--green); border-color: oklch(0.7 0.17 150); color: var(--ink); }
.chip__label { display: block; }
.chip__sub { display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.chip.ist-gewaehlt .chip__sub { color: oklch(0.3 0.09 155); }

/* Sonderoption (z. B. "Mehrere Standorte", "Etwas anderes"): optisch von
   den Kernoptionen abgesetzt, bleibt aber gleichwertig bedienbar. */
.chip--sonder { margin-top: var(--s-16); background: transparent; border-style: dashed; }
.chip--sonder:hover { background: var(--paper-2); border-style: dashed; }
.chip--sonder .chip__label { color: var(--ink-2); }
.chip--sonder.ist-gewaehlt { background: var(--green); border-style: solid; color: var(--ink); }
.chip--sonder.ist-gewaehlt .chip__label { color: var(--ink); }

/* Freitextfeld (nur C1 "Etwas anderes") */
.textfeld { margin-top: var(--s-16); }
.textfeld input {
  width: 100%; font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--rule-2);
  padding: var(--s-8) 2px;
}
.textfeld input:focus { outline: none; border-color: var(--green-deep); box-shadow: 0 1px 0 var(--green-deep); }
.textfeld input:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; box-shadow: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-12);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  background: var(--green); color: var(--ink);
  border: 1px solid oklch(0.7 0.17 150);
  padding: var(--s-16) var(--s-32);
  min-height: 52px;
  border-radius: 3px; text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px oklch(0.805 0.185 150 / 0.35); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--ink-2); background: transparent; border: none; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; padding: var(--s-8) 2px; min-height: 44px;
}
.btn-ghost:hover { color: var(--green-deep); }
.aktionen { margin-top: var(--s-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-24); }

/* ---------- Rechner (inszenierter Moment 1) ---------- */
.rechner-block { display: none; }
.rechner-block.ist-sichtbar { display: block; }
.rechner-lade { margin-top: var(--s-48); display: flex; align-items: center; gap: var(--s-16); color: var(--ink-2); }
.rechner-lade__punkte { display: flex; gap: 6px; }
.rechner-lade__punkte span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep);
  animation: punktPuls 1s ease-in-out infinite;
}
.rechner-lade__punkte span:nth-child(2) { animation-delay: .15s; }
.rechner-lade__punkte span:nth-child(3) { animation-delay: .3s; }
@keyframes punktPuls { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

[data-rechner-zeitraum] { margin-top: var(--s-12); }
.rechner-figur {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-fig); line-height: 0.95; color: var(--ink);
  letter-spacing: -0.01em; margin-top: var(--s-12);
}
.rechner-figur .u { color: var(--green-deep); }
.rechner-figur__rule { margin-top: var(--s-8); width: 0; max-width: 220px; height: 2px; background: var(--green); }
.rechner-block.ist-sichtbar .rechner-figur__rule { animation: rechnerLedgerRule .5s var(--ease) .12s forwards; }
@keyframes rechnerLedgerRule { from { width: 0; } to { width: 100%; } }
.rechner-ausleihen { margin-top: var(--s-12); font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-3); }
.rechner-hinweis { margin-top: var(--s-24); font-size: 1rem; color: var(--ink-2); max-width: 48ch; }
.rechner-beteiligung { margin-top: var(--s-16); font-size: 0.92rem; color: var(--ink-3); max-width: 48ch; }

/* ---------- Empfehlung (inszenierter Moment 2) ---------- */
.empf-karte { margin-top: var(--s-32); display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: var(--s-32); align-items: start; }
.empf-karte[hidden] { display: none; }
.empf-bild { background: var(--paper-2); border: 1px solid var(--rule-2); padding: 10px; display: grid; place-items: center; }
.empf-bild img { mix-blend-mode: multiply; max-height: 260px; width: auto; object-fit: contain; }
.empf-titel { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -0.01em; margin-top: var(--s-4); }
.empf-sub { margin-top: var(--s-8); color: var(--ink-2); max-width: 44ch; }
.empf-fakten { margin-top: var(--s-16); display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-32); font-family: var(--font-mono); font-size: 0.85rem; }
.empf-fakten div { display: flex; flex-direction: column; gap: 2px; }
.empf-fakten dt { color: var(--ink-3); letter-spacing: 0.03em; font-size: 0.72rem; text-transform: uppercase; }
.empf-fakten dd { margin: 0; color: var(--ink); font-weight: 600; }
.empf-s48 { margin-top: var(--s-16); font-size: 0.95rem; color: var(--ink-2); max-width: 50ch; }
.empf-s48[hidden] { display: none; }

/* Umfeld-Foto, aktuell nur Ast "fest" (einzige Sparte mit passenden,
   lizenzsauberen Motiven im Bildbestand). Rahmenstil 1:1 aus der
   Bildplatte der Segmentseiten (css/styles.css .plate) übernommen. */
.empf-atmo {
  margin-top: var(--s-32);
  max-width: 26rem;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  padding: 10px;
}
.empf-atmo[hidden] { display: none; }
.empf-atmo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; }
.empf-atmo figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-3); text-transform: uppercase;
  padding: var(--s-12) 2px 2px;
}

/* ---------- Formular (Kontakt) ---------- */
.formular { margin-top: var(--s-32); display: grid; gap: var(--s-16); max-width: 52ch; }
.feldgruppe { display: grid; gap: var(--s-16); }
.feld { display: grid; gap: var(--s-8); }
.feld[hidden] { display: none; }
.feld label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-12); font-size: 0.95rem; font-weight: 600; }
.feld label .pflicht, .feld label .opt {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; font-weight: 500;
}
.feld input, .feld textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--rule-2);
  padding: var(--s-12) 2px; border-radius: 0; min-height: 44px;
}
.feld textarea { resize: vertical; min-height: 5rem; border: 1px solid var(--rule-2); padding: var(--s-12); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--green-deep); box-shadow: 0 1px 0 var(--green-deep); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; box-shadow: none; }
.formular.ist-validiert input:invalid,
.formular.ist-validiert textarea:invalid,
.formular.ist-validiert select:invalid {
  border-color: var(--err);
}
.feld-fehler { margin-top: var(--s-4); font-family: var(--font-mono); font-size: 0.78rem; color: var(--err); }
.feld-fehler[hidden] { display: none; }
.feld-consent { display: flex; align-items: flex-start; gap: var(--s-12); font-size: 0.9rem; color: var(--ink-2); }
.feld-consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-deep); }
.feld-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { margin-top: var(--s-8); }
.trust-zeile { margin-top: var(--s-16); font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); max-width: 44ch; }

.form-status { margin-top: var(--s-12); font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; }
.form-status[data-state="pending"] { color: var(--ink-3); }
.form-status[data-state="success"] { color: var(--green-deep); }
.form-status[data-state="error"] { color: var(--err); }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Danke ---------- */
.danke-zusammenfassung { margin-top: var(--s-24); font-size: var(--t-lead); color: var(--ink-2); max-width: 52ch; }
.danke-zusammenfassung strong { color: var(--ink); font-weight: 600; }
.danke-produkt {
  margin-top: var(--s-24); display: inline-flex; align-items: center; gap: var(--s-16);
  background: var(--paper-2); border: 1px solid var(--rule-2); padding: var(--s-12) var(--s-24) var(--s-12) var(--s-12);
}
.danke-produkt[hidden] { display: none; }
.danke-produkt img { max-height: 72px; width: auto; mix-blend-mode: multiply; }
.danke-produkt [data-danke-produkt-name] { color: var(--ink-3); }
.danke-schritte { margin-top: var(--s-32); list-style: none; padding: 0; display: grid; gap: var(--s-16); max-width: 48ch; }
.danke-schritte[hidden], .danke-schritte li[hidden] { display: none; }
.danke-schritte li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--rule); align-items: start; }
.danke-schritte li:first-child { border-top: none; padding-top: 0; }
.danke-schritte b { display: block; font-weight: 600; }
.danke-schritte p { color: var(--ink-2); font-size: 0.95rem; margin-top: 2px; }
.danke-n { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; color: var(--green-deep); }
.danke-neustart { margin-top: var(--s-32); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  :root { --sheet-pad: 1.15rem; }
  .empf-karte { grid-template-columns: 1fr; gap: var(--s-16); }
  .empf-bild { max-width: 220px; }
  .tb-meta [data-fortschritt-label-voll] { display: none; }
  .tb-meta [data-fortschritt-label-kompakt] { display: inline; }
  .tb-restart { font-size: 0.62rem; }
}
@media (max-width: 480px) {
  .screen { padding-top: var(--s-24); padding-bottom: var(--s-32); }
  .screen__frage { max-width: 100%; }
  .chip { padding: var(--s-16); font-size: 1rem; }
  .btn { width: 100%; }
  .aktionen { flex-direction: column; align-items: stretch; }
  .aktionen .btn-ghost { text-align: center; }
  .topbar { gap: var(--s-8); padding-left: var(--s-16); padding-right: var(--s-16); }
  .danke-produkt { display: flex; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .screen { transform: none !important; }
  .btn:hover { transform: none; box-shadow: none; }
  .chip:hover { transform: none; }
  .rechner-block.ist-sichtbar .rechner-figur__rule { width: 100%; }
}
html { scroll-behavior: smooth; }