/* ==========================================================================
   Onboarding-Funnel — moritzkreis.de
   Merge-Prinzip: Route + Fortschritt aus v2-hoehenweg (persistenter
   Hintergrund/Mechanik), Screenflow + Dialogsprache aus v3-dialog
   (Fragen, Chips, Kacheln, Pakete, Formular). Tokens/Fonts unverändert
   aus shared/base.css. Textmarker-Technik (.mk) aus projekte.css
   übernommen — gleiche Klassen, gleiche Mechanik, neuer Akzent-Modifier.
   ========================================================================== */

body { overflow-x: hidden; }
.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;
}

/* ---------- JS-/Ladefehler-Fallback (Fix 1) --------------------------------
   Kein onerror-Attribut moeglich (CSP script-src 'self', keine Inline-
   Handler erlaubt) — #funnelFallback ist deshalb per Default sichtbar
   (echtes HTML, immer im Markup) und wird erst ausgeblendet, sobald
   funnel.v3.js erfolgreich startet (root.classList.add('js') ist dessen
   allererste Anweisung). #hwChrome ist umgekehrt per Default versteckt und
   erscheint erst, wenn html.js gesetzt ist. Deckt so ohne weitere Datei
   sowohl "kein JS" als auch "funnel.v3.js laedt nicht" ab. */
#hwChrome { display: none; }
html.js #hwChrome { display: block; }
html.js #funnelFallback { display: none; }
.js-fallback { max-width: 640px; margin-inline: auto; padding: clamp(2rem, 8vw, 4rem) clamp(1.1rem, 5vw, 2rem); position: relative; z-index: 1; }
.js-fallback__kicker { font-family: var(--lauf); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 .6rem; }
.js-fallback h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -.03em; margin: 0 0 .9rem; }
.js-fallback p { color: var(--gedaempft); margin: 0 0 .9rem; }
.js-fallback__zeile { font-size: 1.1rem; }
.js-fallback__zeile a { font-weight: 700; color: var(--tinte); text-decoration: underline 1.5px var(--haarlinie); text-underline-offset: .2em; }
.js-fallback__zeile a:hover { text-decoration-color: var(--tinte); }

/* ---------- atmosphärischer Grund: Terrain-Fotos (v2) -------------------- */
.hw-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.hw-bg__img {
  position: absolute; top: -12%; left: -6%; width: 112%; height: 128%;
  max-width: none; object-fit: cover; opacity: .5; transition: opacity .8s var(--ease);
}
.hw-bg__img--sw { opacity: 0; }
.hw-weg--software .hw-bg__img--web { opacity: 0; }
.hw-weg--software .hw-bg__img--sw { opacity: .5; }
.hw-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.74); }

/* ---------- App-Rahmen ---------------------------------------------------- */
.app { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; padding-inline: clamp(1.1rem, 5vw, 2rem); }

.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem .3rem; min-height: 2.75rem; }
.zurueck {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--lauf); font-size: .85rem; font-weight: 600;
  color: var(--gedaempft); background: none; border: 0; padding: .5rem .3rem; margin-left: -.3rem; cursor: pointer;
  min-height: 44px; transition: color .2s var(--ease);
}
.zurueck:hover { color: var(--tinte); }
.zurueck[hidden] { visibility: hidden; }
.hw-top__reset {
  font-family: var(--lauf); font-size: .78rem; color: var(--gedaempft); background: none; border: 0;
  text-decoration: underline 1px var(--haarlinie); text-underline-offset: .25em; cursor: pointer; padding: .5rem .3rem; min-height: 44px;
}
.hw-top__reset:hover { color: var(--tinte); text-decoration-color: var(--rf, var(--f-marke)); }

/* ---------- Route: Fortschrittsmechanik (v2) ------------------------------ */
.hw-route { position: relative; }
.hw-route__svg { position: relative; display: block; width: 100%; height: clamp(112px, 26vw, 176px); }
.hw-route__ghost { fill: none; stroke: var(--haarlinie); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hw-route__progress {
  /* Fix Fortschrittsroute: KEIN vector-effect: non-scaling-stroke hier —
     zusammen mit preserveAspectRatio="none" (nicht-uniforme X/Y-Skalierung
     des viewBox) ignoriert Chromium sonst stroke-dasharray/-dashoffset auf
     diesem Pfad komplett und zeichnet ihn immer voll durch, unabhaengig vom
     tatsaechlichen Fortschritt. stroke-width wird stattdessen in
     routeAufbauen() pro Layout aus dem CTM-Scale zurueckgerechnet, damit die
     Linie trotzdem ueberall ~2.4px breit bleibt. */
  fill: none; stroke: var(--rf, var(--tinte)); stroke-linecap: round; stroke-linejoin: round;
}
.hw-route__punkt { fill: var(--papier); stroke: var(--tinte); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.hw-route__punkt[data-status="besucht"] { fill: var(--tinte); }
.hw-route__punkt[data-status="aktiv"] { fill: var(--rf, var(--f-marke)); stroke: var(--tinte); }
.hw-gipfel { fill: none; stroke: var(--haarlinie); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease), fill .5s var(--ease); }
.hw-gipfel[data-aktiv="1"] { stroke: var(--rf, var(--tinte)); }
.hw-gipfel[data-gewaehlt="1"] { fill: var(--rf, var(--f-marke)); stroke: var(--rk, var(--k-marke)); }
.hw-spur { fill: none; stroke: var(--haarlinie); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease); }
.hw-spur[data-gewaehlt="1"] { stroke: var(--rk, var(--k-marke)); stroke-dasharray: none; stroke-width: 2; }

.hw-status { padding: .5rem 0 0; }
.hw-status__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); margin: 0; }
.hw-status__weg { color: var(--rk, var(--tinte)); font-weight: 600; }
.hw-zeigarnik { margin: .5rem 0 0; font-size: .8rem; color: var(--k-fertig); font-weight: 500; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.hw-zeigarnik[hidden] { display: none; }
.hw-zeigarnik::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--f-fertig); flex: none; box-shadow: 0 0 0 1px rgba(22,20,15,.4); }
.hw-zeigarnik__save { color: var(--gedaempft); font-weight: 400; }
.hw-zeigarnik__save::before { content: "· "; }

/* ---------- Bühne / Screens ------------------------------------------------ */
.stage { position: relative; flex: 1; display: flex; }
.screen { display: flex; flex-direction: column; justify-content: center; width: 100%; padding-block: clamp(1.3rem, 4vw, 2rem) clamp(2.5rem, 8vh, 4rem); }
.js .screen.tritt-ein { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .js .screen.tritt-ein { opacity: 1; transform: none; } }
/* Fix 5: wrapper.focus() ist programmatisch (Screen-Wechsel), soll aber
   keinen sichtbaren Fokusrahmen um den ganzen Content ziehen. Nur echte
   Tastaturnavigation (:focus-visible) bekommt einen Ring. */
.screen:focus { outline: none; }
.screen:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 2px; }

.frage {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 7.6vw, 2.7rem);
  line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; margin: 0 0 .55rem;
}
.unter { font-size: clamp(1.02rem, 2.7vw, 1.12rem); color: var(--gedaempft); max-width: 42ch; margin: 0 0 clamp(1.5rem, 5vw, 2.1rem); }

/* ---------- Textmarker (.mk) — 1:1 aus projekte.css, plus dynamischer
   Akzent-Modifier (.mk--akzent folgt --rf, das v2s akzentSetzen() setzt) --- */
mark.mk, .mk {
  color: var(--tinte); background-color: transparent; font-weight: 600; padding: 0 .12em;
  background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .55s var(--ease);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mk--akzent { background-image: linear-gradient(var(--rf, var(--f-marke)), var(--rf, var(--f-marke))); }
.js .mk { background-size: 0% 100%; }
.js .mk.ist-markiert { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .mk { transition: none; } }

/* ---------- Hinweis-Kurzsatz „Kurz vorweg" + Ersteinschätzung-Banner ------ */
.hinweis { display: flex; gap: .6rem; align-items: flex-start; font-size: .87rem; color: var(--gedaempft); background: var(--flaeche); border-radius: 6px; padding: .8rem 1rem; margin: 0 0 1.4rem; }
.hinweis b { color: var(--tinte); }
.hinweis--akzent { background: var(--rt, var(--t-marke)); color: var(--tinte); }
.hinweis--akzent b { color: var(--rk, var(--k-marke)); }

/* ---------- Chips ---------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.chips--voll .chip { flex: 1 1 100%; }
.chip {
  font-family: var(--lauf); font-size: 1rem; font-weight: 600; color: var(--tinte); background: var(--papier);
  border: 1.5px solid var(--haarlinie); border-radius: 999px; padding: .85rem 1.35rem; min-height: 48px;
  cursor: pointer; text-align: left; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.chip:hover { border-color: var(--tinte); }
/* Fix 11: deutlicherer gewählter Zustand — kräftige Füllung statt Tönung,
   plus Häkchen. Bestehende Tokens (--rk/--papier), kein neues Farbschema. */
.chip.ist-gewaehlt { border-color: var(--rk, var(--k-marke)); background: var(--rk, var(--k-marke)); color: var(--papier); }
.chip.ist-gewaehlt::before {
  content: ""; display: inline-block; width: 5px; height: 9px; margin-right: .55rem; margin-bottom: 1px;
  border: solid var(--papier); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chip:active { transform: scale(.98); }
.chip:disabled { opacity: .45; cursor: not-allowed; }

.chipgruppe { margin: 0 0 clamp(1.3rem, 4vw, 1.8rem); border: 0; padding: 0; }

/* ---------- Stil-Kacheln — Browser-Mini-Mockup je Stil (Set A) -------------
   1:1 aus mockups/stil-kacheln.html uebernommen: angedeutetes Browserfenster
   (Kopfleiste mit drei Punkten + Tab-Titel) je Stil, darunter eine
   Beschriftungszeile statt Scrim (Kontrast var(--tinte) auf var(--papier),
   siehe base.css-Kommentar: 18.9:1). ------------------------------------- */
.stil-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .stil-kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel {
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 1 / 1;
  border: 1.5px solid var(--haarlinie); border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer;
  background-color: var(--papier); container-type: inline-size;
  transition: border-color .2s var(--ease), transform .15s var(--ease);
}
.kachel:hover { border-color: var(--tinte); }
.kachel:active { transform: scale(.98); }
.kachel.ist-gewaehlt { border-color: var(--rk, var(--k-marke)); box-shadow: inset 0 0 0 2px var(--rk, var(--k-marke)); }
.kachel.ist-gewaehlt::before {
  content: ""; position: absolute; top: .5rem; right: .5rem; z-index: 3; width: 22px; height: 22px; border-radius: 999px;
  background: var(--rk, var(--k-marke)); box-shadow: 0 0 0 2px var(--papier);
}
.kachel.ist-gewaehlt::after {
  content: ""; position: absolute; top: calc(.5rem + 7px); right: calc(.5rem + 8px); z-index: 4;
  width: 6px; height: 10px; border: solid var(--papier); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Mockup-Flaeche: Browserleiste + Mini-Beispielseite (Logo, Headline, Bildflaeche, Button) */
.kachel__mockup { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.browserbar {
  display: flex; align-items: center; gap: clamp(3px, 2.4cqi, 6px); flex: none;
  height: clamp(15px, 15cqi, 27px); padding-inline: clamp(6px, 5cqi, 12px);
  background: var(--flaeche); border-bottom: 1px solid var(--haarlinie);
}
.browserbar .punkt { width: clamp(3px, 2.6cqi, 6px); height: clamp(3px, 2.6cqi, 6px); border-radius: 50%; flex: none; }
.browserbar .punkt:nth-child(1) { background: #e2564f; }
.browserbar .punkt:nth-child(2) { background: #e0ab2c; }
.browserbar .punkt:nth-child(3) { background: #59b054; }
.browserbar__titel {
  margin-left: clamp(2px, 2cqi, 6px); font-size: clamp(6px, 5.4cqi, 10px); font-weight: 600;
  color: var(--gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: clamp(7px, 7cqi, 16px); gap: clamp(4px, 4cqi, 9px);
  background: var(--sbg); color: var(--sfg); font-family: var(--sfont);
}
.mini__logo {
  display: inline-flex; align-items: center; gap: clamp(3px, 2.5cqi, 6px);
  font-size: clamp(6.5px, 5.6cqi, 11px); font-weight: 700; align-self: flex-start;
}
.mini__headline {
  font-size: clamp(9.5px, 10cqi, 18px); font-weight: 700; line-height: 1.08; margin: 0;
  letter-spacing: var(--shls, normal); text-transform: var(--shtt, none);
}
.mini__bild { flex: 1; min-height: 0; border-radius: var(--sradius, 3px); position: relative; overflow: hidden; }
.mini__btn {
  align-self: var(--sbtnpos, flex-start); font-family: inherit; font-weight: 700;
  font-size: clamp(6px, 5.4cqi, 10px); padding: clamp(3px, 2.8cqi, 6px) clamp(8px, 6.4cqi, 13px);
  border-radius: var(--sbtnradius, 999px); border: var(--sbtnborder, 0); pointer-events: none;
}

/* Stil: Reduziert & klar */
.stil-klar {
  --sbg: #ffffff; --sfg: var(--tinte); --sfont: system-ui, -apple-system, "Segoe UI", sans-serif;
  --sradius: 2px; --sbtnpos: flex-end;
}
.stil-klar .mini__logo::before { content: ""; width: clamp(5px, 4.5cqi, 9px); height: clamp(5px, 4.5cqi, 9px); background: var(--tinte); flex: none; }
.stil-klar .mini__bild { background: var(--flaeche); border: 1px solid var(--haarlinie); }
.stil-klar .mini__btn { background: var(--tinte); color: #fff; }

/* Stil: Verspielt & bunt */
.stil-verspielt {
  --sbg: #ffffff; --sfg: var(--tinte); --sfont: system-ui, -apple-system, "Segoe UI", sans-serif;
  --sradius: 10px; --sbtnradius: 999px;
}
.stil-verspielt .mini__logo {
  width: clamp(12px, 11cqi, 21px); height: clamp(12px, 11cqi, 21px); border-radius: 50%;
  background: var(--k-marke); color: #fff; justify-content: center; transform: rotate(-8deg);
  font-size: clamp(6.5px, 5.8cqi, 11px);
}
.stil-verspielt .mini__headline { transform: rotate(-1.5deg); transform-origin: left center; }
.stil-verspielt .mini__bild { background: var(--flaeche); }
.stil-verspielt .mini__bild .forme { position: absolute; }
.stil-verspielt .mini__bild .forme--1 { width: 58%; height: 58%; top: -8%; left: -6%; border-radius: 50%; background: var(--f-energie); }
.stil-verspielt .mini__bild .forme--2 { width: 46%; height: 46%; bottom: -10%; right: 4%; border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; background: var(--f-netz); }
.stil-verspielt .mini__bild .forme--3 { width: 34%; height: 34%; bottom: 8%; left: 12%; border-radius: 30%; background: var(--f-ki); transform: rotate(18deg); }
.stil-verspielt .mini__bild .forme--4 { width: 26%; height: 26%; top: 14%; right: 12%; border-radius: 50%; background: var(--f-betrieb); }
.stil-verspielt .mini__btn { background: var(--k-marke); color: #fff; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--tinte); }

/* Stil: Editorial & seriös */
.stil-editorial {
  --sbg: #ffffff; --sfg: var(--tinte); --sfont: Georgia, "Times New Roman", serif;
  --sradius: 0; --sbtnpos: flex-start; --sbtnradius: 0; --sbtnborder: 1px solid var(--tinte);
}
.stil-editorial .mini__logo { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: clamp(5.5px, 4.8cqi, 9px); border-bottom: 1px solid var(--haarlinie); padding-bottom: clamp(3px, 2.4cqi, 5px); width: 100%; }
.stil-editorial .mini__headline { letter-spacing: -.01em; }
.stil-editorial .mini__bild { background: var(--flaeche); border-top: 2px solid var(--k-betrieb); border-bottom: 1px solid var(--haarlinie); }
.stil-editorial .mini__btn { background: transparent; color: var(--tinte); text-decoration: underline; text-underline-offset: .25em; padding-inline: 0; }

/* Stil: Technisch & präzise */
.stil-technisch {
  --sbg: var(--tinte); --sfg: #fff; --sfont: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sradius: 0; --sbtnpos: flex-start; --sbtnradius: 0; --sbtnborder: 1px solid #fff;
  --shtt: uppercase; --shls: .01em;
}
.stil-technisch .mini__logo { color: var(--f-betrieb); }
.stil-technisch .mini__logo::before { content: "["; }
.stil-technisch .mini__logo::after { content: "]"; }
.stil-technisch .mini__bild {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 1px, transparent 1px, transparent 33%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 1px, transparent 1px, transparent 33%);
  border: 1px solid rgba(255,255,255,.3);
}
.stil-technisch .mini__btn { background: transparent; color: #fff; }
.stil-technisch .mini__btn::before { content: "> "; opacity: .6; }

/* Beschriftungszeile unter dem Mockup (statt Scrim), Kontrast s.o. */
.kachel__label {
  flex: none; display: block; padding: clamp(.32rem, 2.6cqi, .55rem) clamp(.5rem, 3.4cqi, .7rem);
  background: var(--papier); border-top: 1px solid var(--haarlinie);
  color: var(--tinte); font-family: var(--lauf); font-weight: 700;
  font-size: clamp(.66rem, 3cqi, .82rem); line-height: 1.15; text-align: left;
}

/* ---------- Weiter-Button --------------------------------------------------- */
.weiter, .hw-btn--ghost {
  -webkit-appearance: none; appearance: none; font-family: var(--lauf); font-size: 1.03rem; font-weight: 700;
  border-radius: 999px; padding: 1rem 1.75rem; min-height: 52px; cursor: pointer;
  transition: background-color .2s var(--ease), opacity .2s var(--ease), transform .15s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.weiter { color: var(--papier); background: var(--tinte); border: 0; width: 100%; margin-top: clamp(1.3rem, 4vw, 1.9rem); }
.weiter:hover { background: #000; }
.weiter:active { transform: scale(.99); }
.weiter:disabled { opacity: .35; cursor: not-allowed; }
@media (min-width: 480px) { .weiter { width: auto; min-width: 15rem; } }
.hw-btn--ghost { background: none; color: var(--tinte); border: 1.5px solid var(--haarlinie); font-weight: 600; }
.hw-btn--ghost:hover { border-color: var(--tinte); }
.aktionen { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.3rem, 4vw, 1.9rem); }
.aktionen .weiter { margin-top: 0; }

/* Fix 10: auf sehr kurzen Screens (sw-problem, 390px) bleibt die CTA ohne
   Scrollen erreichbar — sticky ans Viewport-Ende, mit Deckung nach oben. */
@media (max-width: 480px) {
  .aktionen--sticky {
    position: sticky; bottom: 0; z-index: 2; background: var(--papier);
    padding-block: .75rem .9rem; margin-top: .75rem;
    box-shadow: 0 -12px 16px -8px var(--papier), 0 -1px 0 var(--haarlinie);
  }
  .hinweis--kompakt { padding: .6rem .8rem; font-size: .82rem; margin: 0 0 1rem; }
}

/* ---------- Pakete ---------------------------------------------------------- */
.tiers { display: flex; flex-direction: column; gap: .85rem; margin: 0 0 .5rem; list-style: none; padding: 0; }
.tier {
  position: relative; display: block; border: 1.5px solid var(--haarlinie); border-radius: 6px;
  padding: 1.1rem 1.25rem 1.1rem 3rem; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tier__input { position: absolute; left: 1.15rem; top: 1.3rem; width: 18px; height: 18px; margin: 0; accent-color: var(--rk, var(--k-marke)); }
.tier:has(.tier__input:checked) { border-width: 2px; border-color: var(--rk, var(--k-marke)); background: var(--rt, var(--t-marke)); }
.tier:has(.tier__input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 3px; }
.tier__kopf { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.tier__titel { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; }
.tier__badge { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--papier); background: var(--rk, var(--k-marke)); border-radius: 999px; padding: .2rem .55rem; }
.tier__badge--anker { background: var(--tinte); }
.tier__preis { font-family: var(--display); font-weight: 500; font-size: 1.02rem; margin: 0 0 .3rem; }
.tier__preis small { font-family: var(--lauf); font-weight: 500; color: var(--gedaempft); font-size: .8rem; }
.tier__leistung { display: block; font-size: .88rem; color: var(--gedaempft); max-width: 42ch; }
.tiers-hinweis { font-size: .8rem; color: var(--gedaempft); margin: 0 0 1rem; }

/* ---------- Rechner ---------------------------------------------------------- */
.rechner__ergebnis { margin-top: clamp(1.4rem, 5vw, 1.9rem); min-height: 6.5rem; }
.rechner__lade { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--gedaempft); }
.rechner__lade .punkte::after { content: "…"; display: inline-block; animation: punkte-lauf 1.2s steps(4) infinite; }
@keyframes punkte-lauf { to { content: "…"; } }
@media (prefers-reduced-motion: reduce) { .rechner__lade .punkte::after { animation: none; } }
.rechner__zahl { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 9.5vw, 3.2rem); letter-spacing: -.03em; line-height: 1; margin: 0 0 .5rem; }
.rechner__zahl span { font-size: .5em; font-weight: 500; color: var(--gedaempft); }
.rechner__annahme { font-size: .8rem; color: var(--gedaempft); }
.rechner__annahme b { color: var(--tinte); font-weight: 600; }
[data-rechner-block] { display: none; }
[data-rechner-block].ist-aktiv { display: block; }

/* ---------- Multi-Select + Weiter-Gate -------------------------------------- */
.multi-hinweis { font-size: .8rem; color: var(--gedaempft); margin: -.9rem 0 1rem; }

/* ---------- Formular ---------------------------------------------------------- */
.form__feld { margin: 0 0 1.15rem; }
.form__feld label { display: block; font-size: .82rem; font-weight: 600; color: var(--tinte); margin: 0 0 .4rem; }
.form__feld .optional { font-weight: 400; color: var(--gedaempft); }
.form__feld input, .form__feld textarea {
  -webkit-appearance: none; appearance: none; width: 100%; font-family: var(--lauf); font-size: 1rem; color: var(--tinte);
  background: var(--papier); border: 1.5px solid var(--haarlinie); border-radius: 6px; padding: .8rem .9rem; min-height: 48px;
}
.form__feld textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.form__feld input:focus-visible, .form__feld textarea:focus-visible { border-color: var(--tinte); }
/* Fix 7: sichtbarer Zustand für feldbezogene Fehler (aria-invalid). */
.form__feld input[aria-invalid="true"], .form__feld textarea[aria-invalid="true"] { border-color: var(--k-achtung); }
.form__consent input[aria-invalid="true"] { outline: 2px solid var(--k-achtung); outline-offset: 2px; }
.form__feldfehler { display: block; color: var(--k-achtung); font-size: .8rem; margin-top: .4rem; }
.form__feldfehler[hidden] { display: none; }
.form__zaehler { display: block; margin-top: .35rem; font-size: .76rem; color: var(--gedaempft); text-align: right; }
.form__trust { font-size: .8rem; color: var(--k-fertig); font-weight: 600; margin: 0 0 .3rem; }
.form__trust-mensch { font-size: .8rem; color: var(--gedaempft); font-weight: 500; margin: 0 0 1.25rem; }
.form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .83rem; color: var(--gedaempft); margin: 0 0 .3rem; cursor: pointer; }
.form__consent input { margin-top: .2rem; accent-color: var(--rk, var(--k-marke)); flex: none; width: 18px; height: 18px; }
.form__consent a { color: var(--tinte); text-decoration: underline 1px var(--haarlinie); text-underline-offset: .2em; }
.form__fehler { color: var(--k-achtung); font-size: .85rem; margin: -.6rem 0 1rem; }
.form__fehler[hidden] { display: none; }
.form__status { font-size: .88rem; margin: 1rem 0 0; }
.form__status a { color: inherit; font-weight: 700; text-decoration: underline 1.5px currentColor; text-underline-offset: .2em; }
.form__status--fehler { color: var(--k-achtung); }
.form__status--ok { color: var(--k-fertig); }

/* ---------- Danke -------------------------------------------------------------- */
.danke__liste { list-style: none; margin: 0 0 1.75rem; padding: 0; max-width: 44ch; }
.danke__liste li { position: relative; padding: .6rem 0 .6rem 1.4rem; border-top: 1px solid var(--haarlinie); font-size: .95rem; }
.danke__liste li:last-child { border-bottom: 1px solid var(--haarlinie); }
.danke__liste li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 7px; height: 7px; background: var(--rf, var(--f-marke)); }
.danke__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.danke__chip { font-size: .78rem; border: 1px solid var(--haarlinie); border-radius: 999px; padding: .35rem .75rem; color: var(--gedaempft); }

.brandmark { position: fixed; left: clamp(1.1rem, 5vw, 2rem); bottom: .9rem; z-index: 1; margin: 0; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); opacity: .6; text-decoration: none; }
.brandmark:hover { color: var(--tinte); opacity: 1; }

@media (max-width: 420px) {
  .tier { padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-route__progress, .hw-gipfel, .hw-spur, .hw-route__punkt, .hw-bg__img { transition: none !important; }
}