/* ===== SCHRIFT AUS DEM EIGENEN HAUS (16.08.2026) =====
   Bis heute holten alle elf Seiten Hanken Grotesk von fonts.googleapis.com.
   Damit ging die IP JEDES Besuchers an Google, bevor die Seite ueberhaupt
   erschien — und zwar noch bevor jemand irgendetwas anklicken konnte.

   NUTZER-ENTSCHEID 16.08.: Das passt nicht zu parkbro. Wir betreiben einen
   EIGENEN Wege-Rechner in der Schweiz, ausdruecklich aus Datenschutzgruenden,
   und fuehren dort bewusst kein Zugriffsprotokoll. Gleichzeitig jedem
   Besucher eine Verbindung zu Google aufzuzwingen, widerspricht dem.

   Die Schrift steht unter der SIL Open Font License — Selbst-Hosten ist
   ausdruecklich erlaubt. Die Lizenz liegt als schrift/OFL.txt daneben; sie
   MUSS mitgeliefert werden, das verlangt die OFL.

   Nur die vier Schnitte, die wirklich vorkommen (400, 600, 700, 800). Der
   frueher mitgeladene 500er wurde nirgends benutzt. Format ist TTF: WOFF2
   waere rund halb so gross, aber dafuer fehlt hier das Werkzeug — der
   Server liefert die Dateien gzip-komprimiert aus, das holt den groessten
   Teil davon wieder herein.

   `font-display: swap` sorgt dafuer, dass der Text SOFORT lesbar ist und
   nicht erst nach dem Laden erscheint. ===== */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('schrift/HankenGrotesk-400Regular.ttf') format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('schrift/HankenGrotesk-600SemiBold.ttf') format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('schrift/HankenGrotesk-700Bold.ttf') format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;
  src:url('schrift/HankenGrotesk-800ExtraBold.ttf') format('truetype')}


/* ===== parkbro Startseite V6 (14.08.2026) — 1:1 nach der Claude-Design-
   Vorlage desgin1.zip (Nutzer-Entscheide 14.08.): Vorlagen-Blau #3757B8,
   warme Neutraltoene, Pill-CTAs, zentriertes Layout, interaktive
   Parkvorgang-Simulation. Fakten-Korrekturen gegenueber der Vorlage:
   Servicegebuehr echt (15 %, min. 0.70 — data.js serviceFee), Storno-Satz
   nach NEUER Regel (Stunden+Tages gratis bis 1 h vor Start; Monat 7 Tage).
   Schrift-Kanon bleibt Hanken Grotesk (Gesetz 13c). Logo: «Der freie
   Platz» (1b: p mittig + gruener Punkt, Nutzer-Entscheid 14.08. —
   Kommentar korrigiert 20.08., der Code darunter zeichnete immer 1b). ===== */
:root{
  --accent:#3757B8; --accent-tief:#2C468F;
  --ok:#14874E; --ok-hell:#22C373;
  --ink:#1D1C1A; --sub:#55524C; --text2:#77736B; --muted:#8A867E;
  --bg:#FBFAF8; --tint:#EFF4FC; --tint2:#E2EBFA; --line:#E7E4DD; --dash:#D5D1C8;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light;background:var(--bg)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-tief)}
button{font-family:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(55,87,184,.45);outline-offset:2px}
/* Abstand fuer Anker-Spruenge. parkbro.js meldet die tatsaechliche Hoehe
   der klebenden Leisten als --anker-h; die 76 px sind der Notnagel, wenn
   das Skript fehlt. */
[id]{scroll-margin-top:var(--anker-h,76px)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes checkDraw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- Kopfzeile --- */
header.top{max-width:1040px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand svg{display:block}
.wm{font-size:20px;font-weight:700;letter-spacing:-.02em}
.top-right{display:flex;align-items:center;gap:14px}
.nav-verm{font-size:15px;font-weight:600}
.langsel{position:relative;display:inline-block}
.langsel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:700;font-size:13px;color:var(--accent);min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;user-select:none}
.langsel>summary::-webkit-details-marker{display:none}
.langsel>summary .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.langsel[open]>summary .chev{transform:rotate(180deg)}
.langsel .lang-menu{position:absolute;top:calc(100% + 6px);right:0;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px rgba(40,40,35,.14);padding:6px;z-index:60;min-width:78px}
.langsel .lang-menu button{border:0;background:transparent;font-weight:700;font-size:13px;color:var(--ink);min-height:44px;padding:0 14px;border-radius:9px;cursor:pointer;text-align:left;display:flex;align-items:center}
.langsel .lang-menu button:hover,.langsel .lang-menu button:active{background:var(--tint)}
.langsel .lang-menu button.on{background:var(--accent);color:#fff}

/* --- Bausteine --- */
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(40px,9vw,64px);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
h2{font-size:clamp(26px,4.5vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border:none;border-radius:999px;background:var(--accent);color:#fff;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(30,40,80,.18);transition:transform 100ms ease-out,filter 150ms ease-out;text-decoration:none}
.pill:hover{filter:brightness(1.08);color:#fff}
.pill:active{transform:scale(.97)}
.aufklapp{border:none;background:transparent;padding:8px 0 0;font-size:13.5px;font-weight:600;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.aufklapp .pfeil{display:inline-block;transition:transform 320ms var(--ease);font-size:11px}
.aufklapp[aria-expanded="true"] .pfeil{transform:rotate(180deg)}
.klappe{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)}
.klappe.offen{grid-template-rows:1fr}
.klappe>div{overflow:hidden;min-height:0}

/* --- Hero --- */
.hero{max-width:680px;margin:0 auto;padding:clamp(48px,9vh,110px) 24px 28px;text-align:center}
.hero .kicker{display:block;margin-bottom:14px;animation:heroIn 400ms var(--ease) backwards}
.hero h1{margin-bottom:18px;animation:heroIn 400ms var(--ease) 60ms backwards}
.hero .sub{margin:0 auto 30px;max-width:440px;font-size:18px;line-height:1.55;color:var(--sub);text-wrap:pretty;animation:heroIn 400ms var(--ease) 120ms backwards}
.hero .pill{animation:heroIn 400ms var(--ease) 180ms backwards}
.hero .micro{margin-top:14px;font-size:13px;color:var(--muted);animation:heroIn 400ms var(--ease) 240ms backwards}

/* --- Parkvorgang-Simulation --- */
.demo-sec{max-width:680px;margin:0 auto;padding:20px 24px 56px}
.demo-hint{margin-bottom:16px;text-align:center;font-size:14px;color:var(--muted)}
.sim{max-width:420px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 12px 40px rgba(40,40,35,.09);padding:22px;min-height:320px}
.sim-step{animation:stepIn 380ms var(--ease)}
.sim-h{margin-bottom:14px;font-size:15px;font-weight:600}
.spotbtn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:none;border-radius:14px;background:var(--tint);cursor:pointer;text-align:left;transition:transform 100ms ease-out,background-color 150ms ease-out;margin-bottom:10px}
.spotbtn:hover{background:var(--tint2)}
.spotbtn:active{transform:scale(.98)}
.spotbtn .n{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.spotbtn .s{display:block;font-size:13px;color:var(--text2);margin-top:2px}
.spotbtn .p{display:block;font-size:15px;font-weight:600;color:var(--ink);text-align:right}
.spotbtn .frei{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ok);margin-top:2px}
.spotbtn .frei i{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal}
.sim-back{border:none;background:transparent;padding:4px 0;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer}
.sim-name{font-size:17px;font-weight:700}
.sim-sub{margin:2px 0 18px;font-size:13.5px;color:var(--text2)}
.dauer{display:flex;align-items:center;justify-content:space-between;background:var(--tint);border-radius:14px;padding:10px 14px;margin-bottom:16px}
.dauer .lbl{font-size:14px;font-weight:600;color:var(--sub)}
.dauer .st{display:flex;align-items:center;gap:14px}
.dauer button{width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:var(--accent);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(40,40,35,.08);transition:transform 100ms ease-out}
.dauer button:active{transform:scale(.92)}
.dauer .val{font-size:16px;font-weight:700;min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.sim-totalrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sim-total{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sim-incl{font-size:13px;color:var(--text2)}
.sim-drin{margin:4px 0 0;font-size:13.5px;color:var(--text2)}
.sim-buchen{display:flex;width:100%;align-items:center;justify-content:center;min-height:52px;margin-top:14px;border:none;border-radius:999px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(30,40,80,.18);transition:transform 100ms ease-out,filter 150ms ease-out}
.sim-buchen:hover{filter:brightness(1.08)}
.sim-buchen:active{transform:scale(.97)}
.sim-note{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted);text-wrap:pretty}
.sim-done{text-align:center;padding:26px 4px 10px}
.sim-check{width:72px;height:72px;border-radius:50%;background:rgba(20,135,78,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:pop 400ms cubic-bezier(.34,1.3,.64,1)}
.sim-done-t{margin-bottom:6px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.sim-done-p{margin-bottom:6px;font-size:14.5px;color:var(--sub);text-wrap:pretty}
.sim-done-s{margin-bottom:22px;font-size:13px;color:var(--muted)}
.sim-again{border:none;background:transparent;padding:8px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer}

/* --- Drei Tipps --- */
.how{max-width:720px;margin:0 auto;padding:40px 24px 56px}
.how h2{margin-bottom:28px;text-align:center}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.how-card{background:var(--tint);border-radius:16px;padding:22px 20px}
.how-card .nr{margin-bottom:8px;font-size:13px;font-weight:700;color:var(--accent)}
.how-card p{font-size:15px;line-height:1.5;color:#3C3A35;text-wrap:pretty}

/* --- Preis --- */
.preis{max-width:680px;margin:0 auto;padding:24px 24px 64px;text-align:center}
.preis h2{margin-bottom:12px}
.preis .lead{margin:0 auto 26px;max-width:420px;font-size:16px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.preis-card{max-width:360px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.08);padding:22px;text-align:left}
.preis-card .bsp{margin-bottom:2px;font-size:14px;font-weight:600;color:var(--sub)}
.preis-card .betrag{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px}
.preis-card .chf{font-size:28px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.preis-card .incl{font-size:13px;color:var(--text2)}
.preis-card .detail{margin:6px 0 0;font-size:13.5px;color:var(--text2)}
.preis-storno{margin:34px auto 0;max-width:420px;font-size:14px;line-height:1.6;color:var(--text2);text-wrap:pretty}

/* --- Community --- */
.comm{padding:48px 0 64px;overflow:hidden}
.comm-kopf{max-width:680px;margin:0 auto;padding:0 24px;text-align:center}
.comm-kopf .kicker{display:block;margin-bottom:14px}
.comm-kopf h2{margin-bottom:12px}
.comm-kopf .lead{margin:0 auto 34px;max-width:460px;font-size:16px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.comm-strip{overflow:hidden;width:100%}
.comm-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.comm-strip:hover .comm-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.comm-strip{overflow-x:auto}}
.comm-set{display:flex;gap:16px;padding-right:16px}
.comm-card{flex:none;width:240px;height:170px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.comm-card.illu{background:var(--tint);gap:0}
.comm-card.illu svg{width:100%;height:100%;display:block}
.comm-card.sign{background:var(--accent)}
.comm-card.sign .tile{background:#fff;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px}
.comm-card.sign .cap{color:rgba(255,255,255,.88);font-size:13px;font-weight:600;text-align:center;padding:0 12px}
.comm-card.slot{background:#FDFCFA;border:2px dashed var(--dash)}
.comm-card.slot .cap{font-size:13px;font-weight:600;color:var(--muted);text-align:center;padding:0 12px}
.comm-cta{max-width:680px;margin:30px auto 0;padding:0 24px;text-align:center;font-size:14px;line-height:1.6;color:var(--text2);text-wrap:pretty}
.comm-cta a{font-weight:600}

/* --- Vermieten-Anreisser --- */
.verm{background:var(--tint2)}
.verm-in{max-width:680px;margin:0 auto;padding:64px 24px;text-align:center}
.verm h2{margin-bottom:12px}
.verm .lead{margin:0 auto 26px;max-width:440px;font-size:16px;line-height:1.55;color:#4A4842;text-wrap:pretty}
.verm .micro{margin-top:12px;font-size:13px;color:var(--text2)}
.verm-liste{max-width:400px;margin:14px auto 0;text-align:left;display:flex;flex-direction:column;gap:8px}
.verm-liste p{font-size:14.5px;line-height:1.5;color:#4A4842}
.verm-mehr{display:block;margin-top:18px;font-size:14.5px;font-weight:600}

/* --- FAQ --- */
.faq{max-width:560px;margin:0 auto;padding:60px 24px 72px}
.faq h2{margin-bottom:22px;font-size:clamp(24px,4vw,30px);text-align:center}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:14px;background:var(--tint);overflow:hidden}
.faq-q{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border:none;background:transparent;cursor:pointer;font-size:15.5px;font-weight:600;text-align:left;color:var(--ink);min-height:44px}
.faq-q .pfeil{display:inline-block;transition:transform 320ms var(--ease);color:var(--accent);font-size:12px}
.faq-item.offen .faq-q .pfeil{transform:rotate(180deg)}
.faq-a{padding:0 18px 16px;font-size:14.5px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.faq-mehr{display:block;margin-top:18px;text-align:center;font-size:14.5px;font-weight:600}

/* --- Warteliste (Funktionen 1:1 aus V5) --- */
.wait-sec{background:var(--tint)}
.wait-in{max-width:560px;margin:0 auto;padding:60px 24px 72px}
.wait-in .kicker{display:block;text-align:center;margin-bottom:12px}
.wait-in h2{text-align:center;margin-bottom:12px}
.wait-lead{text-align:center;font-size:15.5px;color:var(--sub);text-wrap:pretty}
.founding-wrap{display:grid;grid-template-rows:1fr;margin-top:20px;transition:grid-template-rows 360ms var(--ease),margin-top 360ms var(--ease),opacity 240ms var(--ease)}
.founding-wrap.aus,#foundingBox.aus{grid-template-rows:0fr;margin-top:0;opacity:0;pointer-events:none}
.founding{display:flex;gap:14px;align-items:flex-start;margin-top:20px;padding:16px;background:#fff;border:1.5px solid var(--tint2);border-radius:16px}
.founding-clip{overflow:hidden;min-height:0}
.founding-wrap .founding{margin-top:0}
.f-badge{flex:none;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.founding b{display:block;font-size:15px;color:var(--accent-tief);letter-spacing:-.2px}
.founding p{font-size:13.5px;color:var(--sub);margin-top:2px;line-height:1.55}
.wait-count{margin-top:14px;font-size:15px;color:var(--sub);text-align:center}
.wait-count b{color:var(--accent-tief);font-variant-numeric:tabular-nums}
.wait-card{margin-top:20px;background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.08);padding:20px 16px}
.roles{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px}
@media(min-width:520px){.roles{grid-template-columns:repeat(3,1fr)}}
.roles input{position:absolute;opacity:0;pointer-events:none}
.roles label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 6px;border:1.5px solid var(--line);border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--sub);line-height:1.25}
.roles input:checked+label{border-color:var(--accent);color:var(--accent);background:rgba(55,87,184,.06)}
.roles input:focus-visible+label{outline:3px solid rgba(55,87,184,.45)}
.wait-row{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.wait-row{grid-template-columns:1.6fr 1fr}}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.field input{width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-family:inherit}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--sub)}
.consent input{margin-top:3px;accent-color:var(--accent)}
.req{color:var(--accent);font-weight:800}
.wait-btn{margin-top:16px;width:100%}
.wait-micro{text-align:center;margin-top:9px;font-size:12px;color:var(--muted)}
.wait-ok{display:none;margin-top:14px;padding:13px 15px;border-radius:12px;background:rgba(20,135,78,.12);color:var(--ok);font-weight:700;font-size:14.5px}
.hp{position:absolute;left:-9999px;top:-9999px}
.confirm-done{text-align:center;padding:6px 0 2px}
.cd-ico{width:56px;height:56px;border-radius:50%;background:rgba(20,135,78,.12);color:var(--ok);font-size:26px;font-weight:800;line-height:56px;margin:0 auto 12px}
.cd-t{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--accent-tief)}
.cd-p{color:var(--sub);margin:8px auto 0;max-width:44ch}
.cd-share{margin:16px 0 8px;font-weight:700}
.cd-link{display:inline-block;background:var(--tint);border:1.5px dashed var(--accent);border-radius:10px;padding:9px 16px;font-weight:800;color:var(--accent)}
.share-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--sub)}
.share-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.share-btn{flex:1;min-width:110px;text-align:center;padding:10px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer;font-family:inherit}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-note{margin-top:10px;font-size:12px;color:var(--sub)}

/* --- Fusszeile --- */
footer{max-width:680px;margin:0 auto;padding:56px 24px 110px;text-align:center}
.foot-wm{margin-bottom:10px;font-size:14px;font-weight:700}
.foot-ch{margin-bottom:14px;font-size:13px;color:var(--muted)}
.foot-links{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.foot-links a{color:var(--text2)}
.foot-note{display:block;margin-top:16px;font-size:11.5px;color:var(--muted);opacity:.85;line-height:1.55}

/* --- Sticky-Leiste (Mobile, wenn Hero-CTA aus dem Bild) --- */
/* Lesefortschritt (Nutzer-Entscheid 17.08., Platzierung ueberarbeitet).
   ERSTER VERSUCH war am oberen Fensterrand — falsch: dort haelt man ihn
   fuer die Ladeanzeige des Browsers, und er stand im Nichts. Er sitzt
   jetzt auf der UNTERKANTE der klebenden Leiste. Dort verlaeuft ohnehin
   schon eine 1-px-Trennlinie; sie ist die Spur, der blaue Balken fuellt
   sie. Kein zusaetzliches Element im Blick, keine Deko — er gehoert
   sichtbar zur Navigation. parkbro.js setzt --leisten-h und scaleX. */
.fortschritt{position:absolute;inset:-1px 0;background:var(--tint);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  will-change:transform;transition:opacity 240ms var(--ease)}
.familie{position:sticky}                    /* Bezug fuer die Fuellung */
.fam-in{position:relative;z-index:1}         /* Schrift bleibt oben drauf */

.sticky-bar{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,250,248,.88);backdrop-filter:blur(12px);box-shadow:0 -6px 24px rgba(40,40,35,.08);z-index:50;transform:translateY(110%);opacity:0;transition:transform 360ms var(--ease),opacity 240ms var(--ease)}
.sticky-bar.show{transform:none;opacity:1}
.sticky-bar .pill{width:100%;min-height:50px;font-size:16px;box-shadow:none}
@media(min-width:721px){.sticky-bar{display:none}}

/* --- QR-Banner (?s=…, Scan-Ziel der QR-Schilder) --- */
.qr-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--accent);color:#fff;padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:none;text-align:center;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.qr-banner b{display:block;margin-bottom:6px}
.qr-banner a.btn-qr{display:inline-block;margin:6px 6px 0;background:#fff;color:var(--accent);padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none}
.qr-banner a.alt{display:inline-block;margin:6px 6px 0;color:#fff;text-decoration:underline;font-size:14px}
/* --- Familien-Navigation (Nutzer 14.08.): auf jeder Seite sehen, WO man
   ist, und von dort auf jede andere Seite springen. Aktive Seite traegt
   die Akzent-Unterstreichung. --- */
/* Die Familien-Navigation klebt direkt unter der Kopfzeile (Nutzer-Entscheid
   17.08.: «wenn ich runterscrolle geht die Navigation verloren»). Damit ist
   sie jederzeit erreichbar, ohne dass jemand erst hochscrollen muss.
   z-index eins unter der Kopfzeile (40), damit sie darunter durchlaeuft. */
.familie{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:var(--kopf-h,76px);z-index:39}
.fam-in{max-width:1040px;margin:0 auto;padding:0 24px;display:flex;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fam-link{flex:none;padding:11px 0;font-size:14px;font-weight:600;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.fam-link:hover{color:var(--accent)}
.fam-link.aktiv{color:var(--accent);border-bottom-color:var(--accent)}


/* ===== Ergaenzungen 14.08. — Apple-Bewegung (Nutzer-Entscheide) ===== */
header.top{position:sticky;top:0;z-index:40;max-width:none;width:100%;padding:0;display:block;transition:background-color 250ms ease-out,box-shadow 250ms ease-out}
header.top>.kopf-in{max-width:1040px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
header.top.glas{background:rgba(251,250,248,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(40,40,35,.06),0 8px 24px rgba(40,40,35,.06)}
.hero{will-change:transform,opacity;transform-origin:50% 0}
.brand .gruen{animation:pop 400ms cubic-bezier(.34,1.3,.64,1) 700ms backwards;transform-origin:center;transform-box:fill-box}
.how-card,.preis-card,.iv-card,.iv-stat{transition:transform 250ms var(--ease),box-shadow 250ms var(--ease)}
.how-card:hover,.iv-card:hover,.iv-stat:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(40,40,35,.10)}
.preis-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(40,40,35,.12)}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(30,40,80,.24)}

/* ===== Bausteine fuer Partner / Verwaltungen ===== */
.abschnitt{max-width:720px;margin:0 auto;padding:56px 24px}
.abschnitt.eng{max-width:600px}
.getoent{background:var(--tint2)}
.getoent .abschnitt{padding:64px 24px}
.mitte{text-align:center}
.mitte .kicker{display:block;margin-bottom:12px}
.mitte h2{margin-bottom:12px}
.lead{margin:0 auto 26px;max-width:460px;font-size:16px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:26px}
.karten.vier{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.iv-card{background:var(--tint);border-radius:16px;padding:22px 20px;text-align:left}
.getoent .iv-card{background:var(--bg)}
.iv-card .ic{width:34px;height:34px;margin-bottom:12px;color:var(--accent)}
.iv-card .ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.iv-card b{display:block;font-size:15.5px;letter-spacing:-.2px;margin-bottom:5px}
.iv-card p{font-size:14.5px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.iv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:26px;text-align:left}
.iv-stat{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:0 10px 32px rgba(40,40,35,.07)}
.iv-stat .n{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.iv-stat .l{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--sub);text-wrap:pretty}
.mk-src{margin-top:22px;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center;text-wrap:pretty}
.b2b-form{max-width:460px;margin:30px auto 0;background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.08);padding:22px 20px;text-align:left}
.b2b-form h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.b2b-form .field{margin-bottom:12px}
.b2b-form textarea{width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-family:inherit;resize:vertical}
.b2b-form .pill{width:100%;margin-top:6px}
.fine-center{margin-top:10px;text-align:center;font-size:12.5px;color:var(--muted)}
.b2b-ok{display:none;margin-top:14px;padding:13px 15px;border-radius:12px;background:rgba(20,135,78,.12);color:var(--ok);font-weight:700;font-size:14.5px}
.b2b-alt{margin-top:14px;text-align:center;font-size:14px;color:var(--sub)}
.b2b-alt a{font-weight:600}
.ueber{max-width:600px;margin:0 auto;padding:56px 24px 64px}
.ueber p{font-size:16px;line-height:1.6;color:var(--sub);text-wrap:pretty}
.sig{margin-top:16px;font-size:14.5px;color:var(--text2)}
.sig a{font-weight:600}

/* ===== Verwaltungen ===== */
.liste{max-width:520px;margin:26px auto 0;list-style:none;display:flex;flex-direction:column;gap:11px}
.liste li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.55;color:#3C3A35;text-wrap:pretty}
.liste li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
.garantie{max-width:520px;margin:18px auto 0;font-size:14.5px;line-height:1.55;color:var(--ok);font-weight:700;text-align:center;text-wrap:pretty}
.rechnung{max-width:460px;margin:30px auto 0;background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.08);padding:20px;text-align:left}
.rechnung .cap{font-size:14px;font-weight:700;color:var(--sub);margin-bottom:12px}
.rechnung .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--sub)}
.rechnung .row span:last-child{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rechnung .row.total{border-bottom:0;padding-top:12px;font-weight:700;color:var(--ink)}
.rechnung .row.total span:last-child{color:var(--accent);font-size:17px}
.rechnung .fine{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;max-width:520px;margin:22px auto 0;padding:14px 16px;border:1.5px solid rgba(20,135,78,.25);background:rgba(20,135,78,.07);border-radius:14px;font-size:14px;color:var(--sub)}
.vertrauen span{position:relative;padding-left:17px}
.vertrauen span::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
.b2b-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.b2b-bar{flex:1;height:4px;border-radius:2px;background:var(--tint2);overflow:hidden}
.b2b-bar i{display:block;height:100%;width:50%;background:var(--accent);border-radius:2px;transition:width 320ms var(--ease)}
.b2b-row{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.b2b-row{grid-template-columns:1fr 1fr}}
.b2b-form select{width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-family:inherit}
.b2b-backbtn{display:block;width:100%;margin-top:10px;border:0;background:transparent;color:var(--accent);font-weight:600;font-size:14px;cursor:pointer;padding:8px;font-family:inherit}
.pill.sec{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none;min-height:48px;font-size:15px;padding:0 24px}
.pill.sec:hover{background:var(--tint);color:var(--accent-tief);filter:none;box-shadow:none}
.pdf-dl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:520px;margin:26px auto 0;padding:16px 18px;background:var(--tint);border-radius:16px}
.pdf-dl .ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.5px}
.pdf-dl .tx{flex:1;min-width:180px}
.pdf-dl .tx b{display:block;font-size:15px;letter-spacing:-.2px}
.pdf-dl .tx div{font-size:13.5px;color:var(--sub);line-height:1.5;margin-top:2px}
.vw-photo{max-width:600px;margin:34px auto 0}
.vw-photo img{width:100%;height:auto;border-radius:18px;display:block}
.vw-photo figcaption{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--sub);text-align:center;text-wrap:pretty}
.vw-credit{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.iv-card .nr{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:8px}
.cta-again{margin-top:34px;text-align:center}

/* ===== FAQ-Seite ===== */
.faq-seite{max-width:640px;margin:0 auto;padding:8px 24px 72px}
.faq-group{font-size:clamp(20px,3.5vw,24px);font-weight:700;letter-spacing:-.02em;margin:40px 0 14px;color:var(--accent-tief)}
.faq-group:first-of-type{margin-top:12px}
.faq-item{border-radius:14px;background:var(--tint);margin-bottom:10px;overflow:hidden}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-size:15.5px;font-weight:600;color:var(--ink);min-height:44px}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"\25BE";color:var(--accent);font-size:12px;transition:transform 320ms var(--ease);flex:none}
.faq-item[open]>summary::after{transform:rotate(180deg)}
.faq-item>summary:hover{color:var(--accent)}
.faq-a{padding:0 18px 16px;font-size:14.5px;line-height:1.6;color:var(--sub);text-wrap:pretty;animation:stepIn 320ms var(--ease)}
.faq-more{margin-top:48px;padding:32px 24px;background:var(--tint2);border-radius:18px;text-align:center}
.faq-more h2{margin-bottom:10px}
.faq-more p{font-size:15.5px;line-height:1.55;color:var(--sub);max-width:400px;margin:0 auto 16px;text-wrap:pretty}
.faq-mail{display:block;font-size:17px;font-weight:700;margin-bottom:20px}

/* ===== Rechtliches (Lesetext) ===== */
.reader{max-width:680px;margin:0 auto;padding:44px 24px 80px}
.reader .kicker{display:block;margin-bottom:12px}
.reader h1{font-size:clamp(30px,5.5vw,42px);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.reader-lead{font-size:17px;line-height:1.6;color:var(--sub);margin-bottom:30px;text-wrap:pretty}
.reader h3{font-size:clamp(22px,3.6vw,27px);font-weight:700;letter-spacing:-.02em;margin:6px 0 18px;scroll-margin-top:84px}
.reader>p{font-size:15px;line-height:1.65;color:var(--sub);margin-top:14px;text-wrap:pretty}
.reader>p strong{color:var(--ink)}
.reader .klein{font-size:12.5px;color:var(--muted);margin-top:4px}
.chapter{display:block;margin:44px 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.jump{background:var(--tint);border-radius:16px;padding:20px;margin-bottom:34px}
.jump b{display:block;font-size:14px;margin-bottom:12px}
.jump a{display:block;padding:11px 0;border-bottom:1px solid var(--tint2);font-size:15.5px;font-weight:600}
.jump a:last-child{border-bottom:0}
.jump a span{display:block;font-size:13.5px;font-weight:400;color:var(--sub);margin-top:2px}
.rechtsblock{background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.07);padding:24px}
.rechtsblock .chapter{margin-top:8px}
.rechtsblock .chapter:not(:first-child){margin-top:38px}
.qa{padding:14px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0;padding-bottom:0}
.qa b{display:block;font-size:15.5px;letter-spacing:-.2px;margin-bottom:6px}
.qa p{font-size:14.5px;line-height:1.6;color:var(--sub);text-wrap:pretty}
.qa p+p{margin-top:8px}
.qa .klein{font-size:13px;color:var(--sub)}
.backtop{margin-top:40px;text-align:center;font-size:14.5px;font-weight:600}

/* ===== Einzelkarten-Seiten (Pruefung, Bestaetigung) ===== */
body.mitte-seite{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.karte{width:100%;max-width:420px;background:#fff;border-radius:22px;box-shadow:0 14px 44px rgba(40,40,35,.10);padding:32px 28px;text-align:center;animation:heroIn 400ms var(--ease) backwards}
.karte-brand{justify-content:center;margin-bottom:22px}
.karte h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.karte p{font-size:15px;line-height:1.6;color:var(--sub);text-wrap:pretty}
.karte hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.karte .pill{margin-top:20px;width:100%}
.karte .stark{color:var(--ink);font-weight:700;margin-top:4px}
.karte .note{font-size:13.5px;color:var(--muted);margin-top:12px}
.zweck{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.status{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;padding:16px 18px;border-radius:16px;background:var(--tint);color:var(--ink);animation:stepIn 380ms var(--ease)}
.status.warte{background:var(--tint);color:var(--sub)}
.status.ok,.status.gueltig{background:rgba(20,135,78,.12);color:var(--ok)}
.status.fehler,.status.ungueltig{background:#FEE4E2;color:#B42318}
.detail{margin-top:12px}
.foot{font-size:13px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.tick{width:64px;height:64px;border-radius:50%;background:rgba(20,135,78,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:pop 400ms cubic-bezier(.34,1.3,.64,1)}
.linkbox{display:inline-block;margin-top:6px;background:var(--tint);border:1.5px dashed var(--accent);border-radius:12px;padding:10px 18px;font-weight:800;color:var(--accent);word-break:break-all}
.share{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.share a,.share button{flex:1;min-width:104px;text-align:center;padding:11px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer;font-family:inherit;transition:border-color 150ms ease-out,color 150ms ease-out}
.share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent)}

/* --- Rechner (Preishilfe, von der alten Startseite hierher gezuegelt) --- */
.calc-sec{max-width:680px;margin:0 auto;padding:24px 24px 56px}
.calc-sec .kicker{display:block;text-align:center;margin-bottom:12px}
.calc-sec h2{text-align:center;margin-bottom:10px}
.calc-sec .lead{margin:0 auto 24px;max-width:460px;font-size:15.5px;line-height:1.55;color:var(--sub);text-align:center;text-wrap:pretty}
.calc-card{max-width:460px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 10px 32px rgba(40,40,35,.08);padding:20px 18px}
.ask-q{display:block;font-weight:700;font-size:16px;margin-bottom:12px}
.ask-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chf-lbl{font-weight:800;color:var(--sub)}
#cCost{width:104px;font:inherit;font-weight:800;font-size:17px;padding:10px 12px;border:2px solid var(--accent);border-radius:12px;text-align:right;color:var(--accent-tief);background:#fff}
.ask-row select{flex:1;min-width:130px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:14.5px;font-family:inherit}
.payoff{margin:16px 0 0;background:var(--tint);border-radius:16px;padding:16px 18px}
.payoff-big #bigNum{font-weight:800;font-size:42px;color:var(--accent);margin-right:10px;vertical-align:-2px;font-variant-numeric:tabular-nums}
.payoff-big #bigPer{font-weight:700;font-size:17px}
.payoff-sub{margin:8px 0 0;color:var(--sub);font-size:14.5px}
.payoff-win{margin:10px 0 0;font-weight:800;color:var(--ok)}
.est-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.55}
.risk-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;max-width:460px;margin:18px auto 0;padding:14px 16px;border:1.5px solid rgba(20,135,78,.25);background:rgba(20,135,78,.07);border-radius:14px;font-size:14px;color:var(--sub)}
.risk-strip b{color:var(--ok);font-size:14.5px}
.risk-strip span{position:relative;padding-left:17px}
.risk-strip span::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
/* --- Schutzliste --- */
.shield{max-width:600px;margin:0 auto;padding:40px 24px 56px}
.shield-word{font-size:clamp(24px,4vw,30px);font-weight:800;letter-spacing:-.6px;color:var(--accent-tief);text-align:center}
.shield-lead{margin:10px auto 0;max-width:460px;font-size:15.5px;color:var(--sub);text-align:center;text-wrap:pretty}
.shield-list{margin-top:16px}
.shield-list>div{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.shield-list>div:last-child{border-bottom:0}
.shield-list .tick{flex:none;width:30px;height:30px;border-radius:10px;background:rgba(20,135,78,.12);color:var(--ok);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-top:1px}
.shield-list b{display:block;font-size:15.5px;letter-spacing:-.2px;margin-bottom:3px}
.shield-list p{font-size:14px;line-height:1.55;color:var(--sub)}
.shield-more{margin-top:18px;font-size:15px;text-align:center}
.shield-more a{font-weight:700}
.shield-foot{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.55;text-align:center}
.honest-p{max-width:560px;margin:0 auto;padding:0 24px 48px;font-size:16px;line-height:1.6;color:var(--sub);text-align:center;text-wrap:pretty}


/* ===== Angleichung an die Demo-Karte: keine Rahmen, getönte Felder ===== */
.calc-card,.wait-card,.rechnung,.b2b-form{border-radius:20px;box-shadow:0 12px 40px rgba(40,40,35,.09);padding:22px}
#cCost{border:0;background:var(--tint);border-radius:14px;color:var(--accent-tief);width:112px;padding:13px 14px}
.ask-row select{border:0;background:var(--tint);border-radius:14px;padding:13px 14px;font-size:15px}
.ask-row{gap:10px}
.payoff{border-radius:14px;padding:18px}
.payoff-big{display:flex;align-items:baseline;gap:10px}
.payoff-big #bigNum{margin:0;font-size:38px;line-height:1;vertical-align:baseline}
.payoff-big #bigPer{font-size:16.5px;line-height:1.35}
.risk-strip,.vertrauen{border:0;background:var(--tint);border-radius:16px;justify-content:center;text-align:center;padding:16px 18px}
.field input,.b2b-form select,.b2b-form textarea{border:0;background:var(--tint);border-radius:14px;padding:13px 14px}
.roles label{border:0;background:var(--tint);border-radius:14px;min-height:52px;font-size:14px;transition:background-color 250ms ease-out,color 250ms ease-out}
.roles input:checked+label{background:var(--accent);color:#fff}
.consent{align-items:center}
#foundingBox{margin-top:18px}

.angebot-hinweis{max-width:520px;margin:26px auto 14px;text-align:center;font-size:15.5px;line-height:1.5;color:var(--accent-tief)}

.karten.vier{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
@media(min-width:560px){.karten.vier{grid-template-columns:1fr 1fr}}
.ueber p{text-align:center;max-width:520px;margin-left:auto;margin-right:auto}
.ueber .sig{text-align:center}
.bw-t{font-size:clamp(20px,3.4vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--accent-tief);margin-bottom:14px}
.bw-p{font-size:16px;line-height:1.65;color:var(--sub);text-wrap:pretty}
.bw-p+.bw-p{margin-top:14px}


/* Kapitel der FAQ: auf dem Handy eine scrollbare Chip-Reihe, auf dem Desktop eine Spalte */
.faq-nav{display:flex;gap:8px;margin:0 -24px 22px;padding:2px 24px 6px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
.faq-nav::-webkit-scrollbar{display:none}
.faq-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  background:var(--tint);color:var(--text2);font-size:14px;font-weight:600;white-space:nowrap;scroll-snap-align:start;
  transition:background-color 250ms var(--ease),color 250ms var(--ease),transform 120ms var(--ease)}
.faq-nav a:active{transform:scale(.96)}
.faq-nav a.an{background:var(--accent);color:#fff}
.faq-nav a.letzt{background:transparent;color:var(--accent)}

/* ==================================================================
   DESKTOP-EBENE (ab 1000 px)
   Grundsatz: Fliesstext bleibt schmal. Die Breite wird gefuellt, indem
   die Behauptung links und ihr Beweis rechts steht — nie durch
   gestreckten Text, nie durch Dekoration.
   Muster A Buehne · B Paar · C Referenz · D Karte in der Mitte
   ================================================================== */
@media(min-width:1000px){

  /* --- Schale --- */
  header.top>.kopf-in,.fam-in{max-width:1120px;padding-left:40px;padding-right:40px}

  /* --- A · Buehne: Versprechen links, Werkzeug rechts --- */
  .buehne{max-width:1120px;margin:0 auto;padding:clamp(36px,6vh,80px) 40px 76px;
    display:grid;grid-template-columns:1fr 470px;column-gap:64px;align-items:center}
  .buehne .hero{max-width:none;margin:0;padding:0;text-align:left;transform:none!important;opacity:1!important}
  .buehne .hero .sub{margin:0 0 30px;max-width:440px}
  .buehne .demo-sec{max-width:none;margin:0;padding:0}
  .buehne .demo-hint{text-align:left;margin-bottom:12px}
  .buehne .sim{max-width:none;margin:0}

  /* --- B · Paar: Aussage links, Karte rechts --- */
  .preis,.verm-in,.wait-in,.calc-sec{max-width:1120px;padding-left:40px;padding-right:40px;
    display:grid;column-gap:64px;row-gap:0;text-align:left}
  .preis>*,.verm-in>*,.wait-in>*,.calc-sec>*{grid-column:1}
  .preis h2,.verm-in h2,.wait-in h2,.calc-sec h2,
  .preis .lead,.verm-in .lead,.calc-sec .lead,.wait-in .kicker,.calc-sec .kicker{text-align:left}

  .preis{grid-template-columns:1fr 380px;padding-top:84px;padding-bottom:96px;align-items:center}
  .preis h2{margin-bottom:16px}
  .preis .lead{margin:0;max-width:470px}
  .preis-storno{margin:22px 0 0;max-width:470px}
  .preis-card{grid-column:2;grid-row:1/span 30;max-width:none;margin:0;align-self:center;padding:26px}

  .verm-in{grid-template-columns:1fr 300px;padding-top:88px;padding-bottom:88px;align-items:center}
  .verm-in h2{margin-bottom:16px}
  .verm-in .lead{margin:0;max-width:480px}
  .verm-in .pill{grid-column:2;grid-row:1/span 30;align-self:center;justify-self:center;white-space:nowrap}
  .verm-in .micro{margin:14px 0 0;max-width:480px}
  .verm-in .aufklapp{margin-top:20px}

  .wait-in{grid-template-columns:1fr 440px;padding-top:88px;padding-bottom:96px;align-items:start}
  .wait-in .kicker{margin-bottom:14px}
  .wait-in h2{margin-bottom:16px}
  .wait-in .wait-lead{margin:0;max-width:440px;text-align:left}
  .wait-card{grid-column:2;grid-row:1/span 30;margin:0;align-self:start;padding:26px 24px}
  #foundingBox{margin-top:26px;max-width:440px}

  .calc-sec{grid-template-columns:1fr 470px;padding-top:72px;padding-bottom:80px;align-items:center}
  .calc-sec h2{margin-bottom:14px}
  .calc-sec .lead{margin:0;max-width:460px}
  .calc-card{grid-column:2;grid-row:1/span 30;max-width:none;margin:0;align-self:center;padding:26px 24px}

  /* Paare auf Verwaltungen und Partner — ohne Eingriff im Markup */
  .abschnitt:has(.rechnung),.abschnitt:has(.b2b-form),.abschnitt:has(.iv-form-wrap){
    max-width:1120px;padding-left:40px;padding-right:40px;
    display:grid;column-gap:64px;row-gap:0;text-align:left;align-items:center}
  .abschnitt:has(.rechnung){grid-template-columns:1fr 420px}
  .abschnitt:has(.b2b-form),.abschnitt:has(.iv-form-wrap){grid-template-columns:1fr 460px;align-items:start}
  .abschnitt:has(.rechnung)>*,.abschnitt:has(.b2b-form)>*,.abschnitt:has(.iv-form-wrap)>*{grid-column:1}
  .abschnitt:has(.rechnung) h2,.abschnitt:has(.b2b-form) h2,.abschnitt:has(.iv-form-wrap) h2,
  .abschnitt:has(.rechnung) .lead,.abschnitt:has(.b2b-form) .lead,.abschnitt:has(.iv-form-wrap) .lead,
  .abschnitt:has(.rechnung) .kicker,.abschnitt:has(.b2b-form) .kicker,.abschnitt:has(.iv-form-wrap) .kicker{text-align:left}
  .abschnitt:has(.rechnung) .lead,.abschnitt:has(.b2b-form) .lead,.abschnitt:has(.iv-form-wrap) .lead{margin-left:0;margin-right:0;max-width:470px}
  .abschnitt:has(.rechnung) .liste,.abschnitt:has(.b2b-form) .liste{max-width:470px;margin-left:0;margin-right:0}
  /* Der Schluss-Satz gehoert auf dieselbe Kante wie alles darueber —
     mittig gesetzt sass er als einziger Block quer zur Spalte. */
  .abschnitt:has(.rechnung) .garantie,.abschnitt:has(.b2b-form) .garantie{
    max-width:470px;margin-left:0;margin-right:0;text-align:left}
  .abschnitt .rechnung,.abschnitt .b2b-form,.abschnitt .iv-form-wrap{
    grid-column:2;grid-row:1/span 30;max-width:none;margin:0;align-self:start}
  .abschnitt .rechnung{align-self:center;padding:26px}
  .abschnitt .b2b-form{padding:26px 24px}
  .angebot-hinweis{margin-left:0;margin-right:0;text-align:left;max-width:470px}
  /* Linke Spalte des Anfrage-Paars: eine gemeinsame Kante */
  .abschnitt:has(.b2b-form) .vertrauen{justify-content:flex-start;text-align:left;max-width:470px;margin-left:0;margin-right:0}
  .abschnitt:has(.b2b-form) .angebot-hinweis{margin-top:20px;margin-bottom:0}
  .abschnitt:has(.b2b-form) .b2b-alt{margin:14px 0 0;max-width:470px;text-align:left}
  .abschnitt:has(.b2b-form) .vw-photo{margin:28px 0 0;max-width:470px}
  .abschnitt:has(.b2b-form) .vw-photo figcaption{text-align:left}
  .abschnitt:has(.b2b-form) .vw-photo figcaption span{display:block}
  .abschnitt:has(.b2b-form) .vw-credit{margin-top:6px}

  /* --- C · Referenz: Kapitel links, Inhalt rechts --- */
  .faq-seite{max-width:1120px;padding:16px 40px 96px;
    display:grid;grid-template-columns:220px 1fr;column-gap:64px;row-gap:0;align-items:start}
  .faq-seite>*{grid-column:2}
  .faq-nav{display:flex;grid-column:1;grid-row:1/span 200;position:sticky;top:96px;align-self:start;
    flex-direction:column;gap:2px;padding-top:6px}
  .faq-nav a{padding:8px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text2);line-height:1.35}
  .faq-nav a:hover{background:var(--tint);color:var(--accent);text-decoration:none}
  .faq-nav a.an{background:var(--tint);color:var(--accent-tief)}
  .faq-nav a.letzt{margin-top:10px;color:var(--accent)}
  .faq-group{scroll-margin-top:96px}
  .faq-group:first-of-type{margin-top:6px}
  .faq-more{margin-top:56px;padding:40px 32px}

  .reader{max-width:1120px;padding:56px 40px 96px;
    display:grid;grid-template-columns:250px 1fr;column-gap:64px;row-gap:0;align-items:start}
  .reader>*{grid-column:2}
  .reader>.kicker,.reader>h1,.reader>.reader-lead{grid-column:1/-1}
  .reader>.reader-lead{max-width:720px}
  .reader>.jump{grid-column:1;grid-row:4/span 200;position:sticky;top:96px;align-self:start;margin:0}
  .reader>h3,.reader>p,.reader>.rechtsblock,.reader>.ds-block,.reader>.chapter,.reader>.backtop{max-width:720px}

  /* --- D · Karte in der Mitte bleibt in der Mitte --- */
  .karte{max-width:480px;padding:40px 36px}
  .karte h1{font-size:27px}
  .karte p{font-size:15.5px}

  /* --- Raster duerfen atmen --- */
  .how{max-width:1000px;padding:64px 40px 72px}
  .how-grid{gap:22px}
  .how-card{padding:28px 26px}
  .how-card p{font-size:15.5px}
  .abschnitt{max-width:820px;padding:72px 40px}
  .getoent .abschnitt{padding:80px 40px}
  .abschnitt:has(.karten){max-width:1080px}
  .karten{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .karten.vier{max-width:none;margin-left:0;margin-right:0;grid-template-columns:repeat(4,minmax(0,1fr))}
  .iv-card{padding:26px 24px}
  .shield{max-width:1000px}
  .shield-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:0;margin-top:24px}
  .shield-list>div{align-items:flex-start}
  .faq{max-width:1000px;padding:80px 40px 88px}
  .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
  .faq-list>*{align-self:start}
  .comm{padding:72px 0 88px}
  .comm-card{width:300px;height:200px}
  .comm-kopf,.comm-cta{max-width:720px}

  /* --- Hero der Unterseiten: linksbuendig auf der Seitenkante.
     Eine zentrierte schmale Spalte mit zwei gleich breiten leeren
     Raendern liest sich als unfertig; eine linke Kante als Absicht.
     (Die Startseite ist ausgenommen: ihr Hero steht in der Buehne.) --- */
  /* Zentriert und symmetrisch — aber breit genug, dass die Raender
     als Absicht lesen und nicht als Leerstelle. */
  main>.hero{max-width:980px;padding-left:40px;padding-right:40px;text-align:center}
  main>.hero .kicker{display:block;margin-bottom:16px}
  main>.hero h1{max-width:none;font-size:clamp(46px,5.6vw,72px)}
  main>.hero .sub{margin:0 auto;max-width:600px;font-size:19px}
  main>.hero .pill{margin-top:30px}
  main>.hero .micro{margin-top:14px}

  /* --- Prosa-Abschnitt: Aussage links, Ausfuehrung rechts --- */
  .abschnitt:has(.bw-t),.abschnitt:has(.bw-t).eng{max-width:1120px;padding-left:40px;padding-right:40px;text-align:left;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:72px;row-gap:0;align-items:start}
  .abschnitt:has(.bw-t) .bw-t{grid-column:1;grid-row:1;max-width:400px;margin-bottom:0}
  .abschnitt:has(.bw-t) .bw-p{grid-column:2;max-width:540px}
  .abschnitt:has(.bw-t) .bw-p+.bw-p{margin-top:16px}

  /* --- Hero als Auftakt, nicht als leerer Bildschirm ---
     Wirkt eine Flaeche leer, fehlt eine Aussage. Also ruecken wir die
     naechste Aussage in den ersten Blick, statt Deko einzusetzen. --- */
  .hero{padding-top:clamp(40px,5.5vh,64px);padding-bottom:18px}
  .hero .sub{margin-bottom:26px}
  .hero+.calc-sec{padding-top:28px}
  .hero+.abschnitt{padding-top:52px}
  .hero+.getoent>.abschnitt{padding-top:60px}
  .hero+.faq-seite{padding-top:8px}
  .hero+.reader{padding-top:24px}

  /* --- Ueber-Block: gleiche linke Kante wie die Paare darueber --- */
  .ueber{max-width:1120px;padding:96px 40px 88px;text-align:left}
  .ueber .mitte{text-align:left}
  .ueber .kicker{display:block}
  .ueber h2{text-align:left;margin-bottom:14px}
  .ueber p{text-align:left;max-width:660px;margin-left:0;margin-right:0}
  .ueber .sig{text-align:left;margin-top:20px}
  .abschnitt.mitte:has(.b2b-form)+.ueber{padding-top:104px}
  /* Einzeiler nach dem Ueber-Block: kein eigener Abschnitts-Rahmen,
     sondern eine Fusszeile des Ueber-Blocks auf derselben Kante. */
  .ueber:has(+.abschnitt.mitte){padding-bottom:24px}
  .ueber+.abschnitt.mitte{max-width:1120px;padding:0 40px 72px;text-align:left}
  .ueber+.abschnitt.mitte>*{margin-left:0;margin-right:0;max-width:660px;text-align:left}

  /* --- Fusszeile: Marke links, Wege rechts --- */
  footer{max-width:1120px;padding:72px 40px 88px;text-align:left;
    display:grid;grid-template-columns:1fr auto;column-gap:64px;row-gap:0;align-items:start}
  footer>*{grid-column:1}
  .foot-ch{margin-bottom:0}
  .foot-links{grid-column:2;grid-row:1/span 30;display:grid;grid-template-columns:1fr 1fr;
    gap:10px 40px;justify-content:start;justify-items:start;align-self:start;font-size:13.5px}
  .foot-note{max-width:520px}
}

/* ==================================================================
   LESBARE ZEILE — gilt UEBERALL, nicht erst ab 1300 px
   (Nutzer-Entscheid 15.08.2026). Grund: schon bei 1280 px liefen Zeilen
   auf 149 Zeichen (vermieten .shield-foot) und 104 (Rechtstext).
   Lesbar sind rund 60 bis 70. Der Deckel VERKLEINERT nur, was zu breit
   ist — schmalere Bloecke bleiben unberuehrt, unter 1000 px aendert sich
   nichts. Zwei Gruppen, weil der Deckel die Ausrichtung nicht kippen
   darf: mittig Gesetztes behaelt seine automatischen Raender,
   linksbuendiges bleibt am linken Rand stehen.
   Ohne Umschaltpunkt: der Deckel greift ueberall, wo er ueberhaupt
   greifen kann. Auf dem Handy ist die Spalte ohnehin schmaler als
   58 Zeichen — dort aendert sich nachweislich nichts.
   ================================================================== */
.hero .sub,.hero .micro,.comm-cta,.shield-foot,.honest-p,.fine-center,
.garantie{max-width:62ch;margin-left:auto;margin-right:auto}
.mitte h2{max-width:32ch;margin-left:auto;margin-right:auto}
.faq-a,.preis-storno,.foot-note,.ueber p,.iv-card p,.bw-p,
.reader p,.reader li,.qa p,.qa li{max-width:58ch}

/* Der Deckel darf die Ausrichtung nicht kippen (Fund 17.08.2026):
   ueberall dort, wo die Ueberschrift auf breiten Schirmen LINKS steht,
   rueckte der 32ch-Kasten von oben mittig ein — Kicker und Text standen
   an der Kante, die Ueberschrift bis zu 290 px daneben. Die automatischen
   Raender gelten nur noch, wo wirklich mittig gesetzt wird. Steht weiter
   unten als die Regel oben, weil beide Selektoren gleich stark sind. */
@media(min-width:1000px){
  .ueber h2,
  .ueber+.abschnitt.mitte>h2,
  .abschnitt:has(.rechnung) h2,
  .abschnitt:has(.b2b-form) h2,
  .abschnitt:has(.iv-form-wrap) h2,
  .buehne .hero .micro{margin-left:0;margin-right:0}
}

/* ==================================================================
   BREITE BILDSCHIRME — die Flaeche nutzen (Nutzer-Entscheid 15.08.2026)
   Ab 1300 px nimmt der Seitenrahmen 92 % der Breite statt fester
   1120/1180 px. In PROZENT, nie in Pixeln: `body` wird darueber gezoomt,
   eine Pixel-Schranke waere dort zu breit und wuerde Querscrollen
   ausloesen.
   Was hier breiter wird, ist der RAHMEN — Spalten, Karten, Bilder,
   Formulare. Der Fliesstext wird gleich darunter wieder gedeckelt,
   damit die Zeile lesbar bleibt. Beides gehoert zusammen; wer den
   Rahmen oeffnet, ohne den Text zu decken, macht die Seite unlesbar.
   ================================================================== */
@media(min-width:1300px){
  /* Ein Rahmen fuer alle Abschnitte.
     ALLE Abschnitte teilen sich EINE Rahmenbreite, damit die linken
     Kanten uebereinander stehen — drei verschiedene Breiten sahen
     unruhig aus. min(92%, 1600px) heisst: hoechstens 1600 px, aber nie
     mehr als 92 % der Breite. Der Prozentteil ist die Sicherung: `body`
     wird auf grossen Bildschirmen gezoomt, eine reine Pixel-Schranke
     koennte dort ueber den Rand hinauslaufen. */
  header.top>.kopf-in,.fam-in,.buehne,.preis,.verm-in,.wait-in,.calc-sec,.how,
  .faq-seite,.reader,.faq,.abschnitt:has(.karten),
  .abschnitt:has(.rechnung),.abschnitt:has(.b2b-form),.abschnitt:has(.iv-form-wrap),
  .abschnitt:has(.bw-t),.abschnitt:has(.bw-t).eng,.ueber,.ueber+.abschnitt.mitte,
  footer{max-width:min(92%,1600px)}
  /* Die Karte neben dem Text darf etwas mitwachsen, sonst steht sie
     einsam am rechten Rand. */
  .buehne{grid-template-columns:minmax(0,1fr) minmax(470px,36%)}

  /* Drei Fragen gehoeren in EINE Reihe. Im breiten Rahmen stellte sie
     das zweispaltige Gitter als 2+1 — eine verwaiste Kachel, genau das,
     was Regel 1 verbietet. */
  .faq-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ==================================================================
   BEWEGUNG II — mehr Uebergaenge, gleiche Regeln
   Alles <= 400 ms, eine Kurve (--ease). Jede Bewegung hat einen Grund:
   Kontinuitaet zwischen Seiten, Kontinuitaet beim Oeffnen, Fokus zeigen.
   ================================================================== */

/* --- Seitenwechsel: die Marke bleibt stehen, der Inhalt wechselt --- */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:vtRaus 200ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtRein 380ms cubic-bezier(.22,1,.36,1) 60ms both}
@keyframes vtRaus{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtRein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
header.top{view-transition-name:marke}
.familie{view-transition-name:familie}
::view-transition-group(marke),::view-transition-group(familie){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* --- Erster Eindruck: jede Seite kommt herein, nicht herein-geschnitten --- */
main{animation:seiteRein 400ms cubic-bezier(.22,1,.36,1) both}
@keyframes seiteRein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .kicker,.hero h1,.hero .sub,.hero .pill,.hero .micro{animation-fill-mode:backwards}

/* --- Familien-Navigation: die Linie waechst, sie erscheint nicht --- */
.fam-link{position:relative;transition:color 250ms var(--ease)}
.fam-link,.fam-link.aktiv{border-bottom-color:transparent}
.fam-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform 320ms var(--ease)}
.fam-link:hover::after,.fam-link.aktiv::after,.fam-link[aria-current="page"]::after{transform:scaleX(1)}

/* --- Sprachwahl: klappt auf, statt zu erscheinen --- */
.langsel>summary{transition:background-color 250ms var(--ease),border-color 250ms var(--ease),color 250ms var(--ease)}
.langsel>summary:hover{background:var(--tint);border-color:var(--accent)}
.langsel>summary .chev{transition:transform 320ms var(--ease)}
.langsel[open] .lang-menu{animation:menuRein 250ms var(--ease) both;transform-origin:top right}
@keyframes menuRein{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.langsel .lang-menu button{transition:background-color 250ms var(--ease),color 250ms var(--ease)}

/* --- Eingaben: der Fokus wandert sichtbar --- */
.field input,.b2b-form select,.b2b-form textarea,.ask-row input,.ask-row select{
  transition:background-color 250ms var(--ease),box-shadow 250ms var(--ease)}
.field input:focus,.b2b-form select:focus,.b2b-form textarea:focus,.ask-row input:focus,.ask-row select:focus{
  background:#fff;box-shadow:0 0 0 2px var(--accent) inset;outline:none}
.roles label{transition:background-color 250ms var(--ease),color 250ms var(--ease),transform 120ms var(--ease)}
.roles label:active{transform:scale(.97)}

/* --- Aufklapper und Fragen: gleiche Kurve wie alles andere --- */
.aufklapp,.faq-q,.faq-item>summary{transition:color 250ms var(--ease),background-color 250ms var(--ease)}
.aufklapp .pfeil,.faq-q .pfeil{transition:transform 320ms var(--ease)}
.faq-item,.faq-item>summary{transition:background-color 250ms var(--ease)}
.faq-item:hover{background:var(--tint2)}

/* --- Community: das Band laeuft aus dem Bild, statt abgeschnitten zu enden --- */
.comm-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.comm-card{transition:transform 320ms var(--ease),box-shadow 320ms var(--ease)}
.comm-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 16px 36px rgba(40,40,35,.14)}

/* --- Links und Fusszeile: kein Farbsprung --- */
a,.foot-links a,.verm-mehr,.shield-more a,.faq-mehr{transition:color 250ms var(--ease)}
.pill{transition:transform 120ms var(--ease),filter 250ms var(--ease),box-shadow 250ms var(--ease)}

/* --- Wer weniger Bewegung will, bekommt keine --- */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  main{animation:none}
  .comm-card:hover{transform:none}
}


/* ==================================================================
   BEWEGUNG III — Touch, Fortschritt, lebende Zahlen
   Dieselben Regeln: <= 400 ms, eine Kurve. Auf dem Handy ersetzt
   :active den Hover — ohne Rueckmeldung fuehlt sich Tippen tot an.
   ================================================================== */

/* --- Kein grauer iOS-Blitz, kein 300-ms-Warten --- */
a,button,summary,label,.faq-item>summary,.faq-q,.aufklapp,.how-card,.iv-card,.comm-card,.fam-link,.roles label{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* --- Tippen hat eine Antwort --- */
.how-card,.iv-card,.preis-card,.faq-item,.comm-card,.jump a,.foot-links a,.fam-link,.b2b-alt a,.faq-mail{
  transition:transform 200ms var(--ease),background-color 250ms var(--ease),box-shadow 250ms var(--ease),color 250ms var(--ease)}
.how-card:active,.iv-card:active,.preis-card:active,.comm-card:active{transform:scale(.985)}
.faq-item>summary:active,.faq-q:active,.aufklapp:active,.jump a:active,.fam-link:active{transform:scale(.98)}
.pill:active{transform:scale(.97)}
.langsel>summary:active{transform:scale(.96)}

/* --- Fortschritt: wo der Browser es kann, laeuft die Linie ohne JS ---
   Frueher stand hier ein ZWEITER Balken als body::after ganz oben — beim
   Umbau am 17.08. faellt er weg, sonst laufen zwei Linien gleichzeitig.
   Die Bewegung uebernimmt jetzt derselbe `.fortschritt`, den parkbro.js
   anlegt: auf dem Compositor statt auf dem Hauptfaden, also fluessiger.
   Kann der Browser es nicht (Firefox stable, Stand 08.2026), setzt
   parkbro.js scaleX von Hand — sichtbar ist die Linie in beiden Faellen. */
@supports (animation-timeline: scroll()){
  .fortschritt{animation:fortschritt linear both;animation-timeline:scroll(root)}
  @keyframes fortschritt{to{transform:scaleX(1)}}
}

/* ==================================================================
   HANDY: die klebenden Leisten duerfen nicht den halben Schirm fressen
   (Nutzer-Entscheid 17.08., nach Messung). Kopfzeile 76 + Navigation 46
   = 122 px; auf einem iPhone SE (667 hoch) sind das 18 % — die Praxis-
   Grenze liegt bei 15 %. Zwei Massnahmen, beide NUR unter 721 px.
   ================================================================== */
@media(max-width:720px){

  /* 1) «Smart sticky»: beim Runterscrollen faehrt die Kopfzeile weg, die
     Navigation rueckt an ihre Stelle. Beim kleinsten Hochwischen kommt
     sie zurueck. Wer runterscrollt liest, wer hochwischt will navigieren
     (dasselbe Muster wie Medium, YouTube, Shopify).
     Verschoben wird mit transform, nicht mit top — das laeuft auf der
     Grafikkarte. Die Fortschritts-Linie kann NICHT mit: ihr transform
     traegt bereits den Fuellstand, also wandert sie ueber top. */
  header.top,.familie{transition:transform 260ms var(--ease)}
  body.kopf-weg header.top{transform:translateY(-100%)}
  body.kopf-weg .familie{transform:translateY(calc(-1 * var(--kopf-h,76px)))}

  /* 2) Alle fuenf Punkte ohne Wischen — auf JEDEM Handy gleich
     (Nutzer-Vorgabe 17.08.: «so dass es auf allen Handys gleich
     aussieht»). Eine feste Groesse kann das nicht: Italienisch
     («Amministrazioni») braucht bei 13 px rund 377 px Breite, also mehr
     als ein Android mit 360 oder ein altes SE mit 320 hat — dort waere
     wieder gewischt worden, und die Leiste haette je nach Geraet anders
     ausgesehen. Deshalb skalieren Schrift, Abstand und Rand stufenlos
     mit der Bildschirmbreite. Die Struktur bleibt damit ueberall
     dieselbe; nur die Groesse folgt dem Geraet, und das sieht niemand,
     weil niemand zwei Handys nebeneinanderhaelt.
     Die obere Schranke ist der gemessene Wert fuer 390 px, die untere
     die Lesbarkeits-Grenze fuer Navigationstext. */
  .fam-in{gap:clamp(9px,3.3vw,13px);
    padding-left:clamp(12px,4vw,16px);padding-right:clamp(12px,4vw,16px);
    overflow-x:hidden}
  .fam-link{font-size:clamp(11px,3.35vw,13px)}
}

/* --- Zahlen, die sich aendern, zeigen es --- */
@keyframes zahlPuls{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.puls{animation:zahlPuls 320ms var(--ease);transform-origin:left center;display:inline-block}

/* --- Ruhigeres Scrollen auf dem Handy --- */
.comm-strip{content-visibility:auto;contain-intrinsic-size:auto 200px;overscroll-behavior-x:contain}
.sticky-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

@media(prefers-reduced-motion:reduce){
  /* Die Zeile `body:not(.mitte-seite)::after{display:none}` stand hier bis
     zum 17.08. und zielte auf den alten Fortschritts-Balken, den es nicht
     mehr gibt — sie lief also ins Leere. Die neue Fuellung bleibt bewusst
     SICHTBAR: sie bewegt sich nicht von allein, sondern folgt dem Finger,
     und ist damit eine Auskunft und keine Zierde. Den Uebergang nimmt die
     globale Regel ganz oben ohnehin heraus. */
  .puls{animation:none}
}


/* ===== WILLKOMMENSSEITE (willkommen.html) — die Tuer der Marke.
   Neu 15.08.2026 (Nutzer-Auftrag): eine ruhige erste Seite mit dem
   Parkfeld-Bild aus dem Design-Projekt (Claude Design, site/_auto-
   vorschau.html). Der Knopf «Ich will parkieren» parkiert das Auto ein
   und spielt daraus den Uebergang zur Parkieren-Seite.
   Gestaltung nach parkbro-regeln.md: dieselben Farbtoken, Pillen-Knopf,
   Hanken Grotesk, ruhige Kurve var(--ease).
   WICHTIG: alle Auto-Teile stehen unter .hero-stage — allgemeine Namen
   wie .body, .roof oder .plate duerfen sonst nichts treffen. ===== */
.willk{max-width:1120px;margin:0 auto;padding:clamp(22px,5vh,54px) 24px 40px;
  display:grid;gap:34px;align-items:center}
@media(min-width:1000px){.willk{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,5vw,84px);padding:clamp(36px,6vh,80px) 40px 72px}}

/* --- Breite Bildschirme: die Tuer nutzt die Flaeche (Nutzer-Entscheid
   15.08.2026: «bei einem breiten Bildschirm sieht es links und rechts
   immer sehr leer aus»). Nur auf dieser Seite, ueber body.tuer.
   Die Breite steht in PROZENT, nicht in Pixeln: body wird auf grossen
   Bildschirmen gezoomt, eine Pixel-Schranke waere dort zu breit und
   wuerde Querscrollen ausloesen — Prozent rechnen im gezoomten Raum
   immer richtig.
   Die Textspalte waechst NICHT mit: sie bleibt bei hoechstens 520 px,
   sonst wird die Zeile zu lang zum Lesen. Die gewonnene Flaeche geht
   an die Buehne — dort ist sie ein Bild und kein Text. --- */
@media(min-width:1300px){
  body.tuer .willk,
  body.tuer header.top>.kopf-in,
  body.tuer footer{max-width:92%}
  body.tuer .willk{grid-template-columns:minmax(360px,520px) minmax(0,1fr);
    gap:clamp(48px,4vw,88px)}
  body.tuer .hero-stage{height:clamp(460px,60vh,620px)}
}
/* Die Zeichnung waechst mit der Buehne: sonst schwimmen drei kleine
   Felder in einer grossen leeren Flaeche. Die Aussenfelder duerfen dabei
   angeschnitten werden — eine Parkreihe hoert am Bildrand ja nicht auf. */
@media(min-width:1600px){ body.tuer .stage-in{transform:scale(1.10)} }
@media(min-width:1900px){ body.tuer .stage-in{transform:scale(1.20)} }
@media(min-width:2300px){ body.tuer .stage-in{transform:scale(1.34)} }
.willk-text{text-align:center}
@media(min-width:1000px){.willk-text{text-align:left}}
.willk-text .kicker{display:block;margin-bottom:14px;animation:heroIn 400ms var(--ease) backwards}
.willk-text h1{margin-bottom:18px;animation:heroIn 400ms var(--ease) 60ms backwards}
.willk-text .sub{margin:0 auto 28px;max-width:430px;font-size:18px;line-height:1.55;
  color:var(--sub);text-wrap:pretty;animation:heroIn 400ms var(--ease) 120ms backwards}
@media(min-width:1000px){.willk-text .sub{margin-left:0}}
.willk-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
  animation:heroIn 400ms var(--ease) 180ms backwards}
@media(min-width:1000px){.willk-cta{justify-content:flex-start}}
/* Auf schmalen Geraeten untereinander — nebeneinander stehen die beiden
   Wege zu eng am Rand. */
@media(max-width:559px){.willk-cta{flex-direction:column;gap:16px}}
.willk-alt{font-size:15px;font-weight:600}
.willk-micro{margin-top:16px;font-size:13px;color:var(--muted);
  animation:heroIn 400ms var(--ease) 240ms backwards}

/* --- Buehne: unser freies Feld zwischen zwei vergebenen --- */
.hero-stage{position:relative;height:clamp(420px,56vh,540px);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--tint),var(--bg));
  box-shadow:0 18px 48px rgba(40,40,35,.14);user-select:none;cursor:pointer;
  animation:heroIn 500ms var(--ease) 120ms backwards}
.stage-in{position:absolute;inset:0;transform-origin:50% 50%}
.stage-in::before,.stage-in::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:182px;height:308px;border:7px solid var(--tint2);border-bottom:none;border-radius:12px 12px 0 0}
.stage-in::before{left:calc(50% - 315px)}
.stage-in::after{left:calc(50% + 133px)}
@media(max-width:880px){.hero-stage{height:400px;width:100%;max-width:440px;margin:0 auto}}
.hero-stage .spot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:182px;height:308px;border:7px solid var(--accent);border-bottom:none;
  border-radius:12px 12px 0 0;box-sizing:border-box;opacity:0;
  animation:spotFade .5s ease .05s both;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  transition:border-color 320ms var(--ease)}
.hero-stage .spot.belegt{border-color:var(--ok-hell)}
/* Bestaetigungs-Ring: schlaegt genau dann auf, wenn das Auto steht */
.hero-stage .ring{position:absolute;left:50%;top:50%;width:182px;height:308px;
  transform:translate(-50%,-50%) scale(.6);border:3px solid var(--ok-hell);
  border-radius:14px;opacity:0;pointer-events:none}
.hero-stage .carwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:224px}
.hero-stage .car{position:relative;width:118px;height:224px;
  animation:loopPark 33s linear infinite;will-change:transform}
@keyframes loopPark{
  0%{transform:translate(0,620px) rotate(-4deg);opacity:0}
  2%{opacity:1}
  6%{transform:translate(-42px,-72px) rotate(-7deg)}
  8%{transform:translate(-42px,-72px) rotate(-7deg)}
  12%{transform:translate(30px,30px) rotate(4.5deg)}
  14%{transform:translate(30px,30px) rotate(4.5deg)}
  17%{transform:translate(-10px,-56px) rotate(-3deg)}
  20%{transform:translate(2px,6px) rotate(1deg)}
  22%{transform:translate(0,0) rotate(0)}
  27%{transform:translate(0,0) rotate(0)}
  31%{transform:translate(6px,620px) rotate(3deg);opacity:1}
  32%{opacity:0}
  33%{transform:translate(6px,620px) rotate(3deg);opacity:0}
  33.5%{transform:translate(-360px,300px) rotate(48deg);opacity:0}
  35%{opacity:1}
  39%{transform:translate(-34px,-78px) rotate(-9deg)}
  41%{transform:translate(-34px,-78px) rotate(-9deg)}
  45%{transform:translate(32px,32px) rotate(5deg)}
  47%{transform:translate(32px,32px) rotate(5deg)}
  50%{transform:translate(-8px,-46px) rotate(-2.5deg)}
  53%{transform:translate(0,0) rotate(0)}
  59%{transform:translate(0,0) rotate(0)}
  64%{transform:translate(4px,620px) rotate(2deg);opacity:1}
  65%{opacity:0}
  66%{transform:translate(4px,620px) rotate(2deg);opacity:0}
  66.5%{transform:translate(360px,300px) rotate(-48deg);opacity:0}
  68%{opacity:1}
  72%{transform:translate(42px,-70px) rotate(9deg)}
  74%{transform:translate(42px,-70px) rotate(9deg)}
  78%{transform:translate(-30px,28px) rotate(-5deg)}
  80%{transform:translate(-30px,28px) rotate(-5deg)}
  83%{transform:translate(10px,-44px) rotate(3deg)}
  86%{transform:translate(0,0) rotate(0)}
  92%{transform:translate(0,0) rotate(0)}
  97%{transform:translate(-6px,620px) rotate(-3deg);opacity:1}
  98%{opacity:0}
  100%{transform:translate(-6px,620px) rotate(-3deg);opacity:0}
}
@keyframes spotFade{0%{opacity:0}100%{opacity:1}}
@keyframes steerLoop{
  0%{transform:rotate(-12deg)} 6%{transform:rotate(-20deg)}
  8%{transform:rotate(12deg)} 12%{transform:rotate(18deg)}
  14%{transform:rotate(-14deg)} 17%{transform:rotate(-10deg)}
  20%{transform:rotate(4deg)} 22%{transform:rotate(0)} 27%{transform:rotate(0)}
  31%{transform:rotate(8deg)} 33.5%{transform:rotate(-20deg)}
  39%{transform:rotate(-18deg)} 41%{transform:rotate(14deg)}
  45%{transform:rotate(16deg)} 47%{transform:rotate(-12deg)}
  50%{transform:rotate(-8deg)} 53%{transform:rotate(0)} 59%{transform:rotate(0)}
  64%{transform:rotate(6deg)} 66.5%{transform:rotate(20deg)}
  72%{transform:rotate(18deg)} 74%{transform:rotate(-14deg)}
  78%{transform:rotate(-16deg)} 80%{transform:rotate(12deg)}
  83%{transform:rotate(8deg)} 86%{transform:rotate(0)} 92%{transform:rotate(0)}
  97%{transform:rotate(-8deg)} 100%{transform:rotate(-8deg)}
}
.hero-stage .wheel{position:absolute;width:15px;height:48px;background:#0b0b0b;border-radius:6px;
  border:1px solid rgba(255,255,255,.55);box-sizing:border-box}
.hero-stage .wheel.fl{top:30px;left:-7px;box-shadow:inset 2px 0 0 rgba(255,255,255,.08);
  animation:steerLoop 33s linear infinite;will-change:transform}
.hero-stage .wheel.fr{top:30px;right:-7px;box-shadow:inset -2px 0 0 rgba(255,255,255,.08);
  animation:steerLoop 33s linear infinite;will-change:transform}
.hero-stage .wheel.bl{bottom:30px;left:-7px;box-shadow:inset 2px 0 0 rgba(255,255,255,.08)}
.hero-stage .wheel.br{bottom:30px;right:-7px;box-shadow:inset -2px 0 0 rgba(255,255,255,.08)}
.hero-stage .karosse{position:absolute;inset:0;background:var(--accent);
  border-radius:54px 54px 48px 48px/72px 72px 62px 62px;
  box-shadow:0 9px 18px rgba(40,40,35,.22)}
/* Der Lack wechselt ueber Deckkraft, nicht ueber die Farbe selbst: Deckkraft
   rechnet die Grafikkarte, einen Farbwechsel muesste der Hauptfaden 60-mal
   pro Sekunde neu ausrechnen — genau das machte die Schleife stockend. */
.hero-stage .lack{position:absolute;inset:0;border-radius:54px 54px 48px 48px/72px 72px 62px 62px;opacity:0;will-change:opacity}
.hero-stage .lack.b{background:var(--ink);animation:lackB 33s linear infinite}
.hero-stage .lack.c{background:var(--ok);animation:lackC 33s linear infinite}
@keyframes lackB{0%,32.8%{opacity:0}33%,65.8%{opacity:1}66%,100%{opacity:0}}
@keyframes lackC{0%,65.8%{opacity:0}66%,100%{opacity:1}}
/* Die Plastik der Karosse liegt jetzt hier oben, sonst wuerden die
   Lack-Schichten sie verdecken. */
.hero-stage .gloss{position:absolute;inset:0;border-radius:54px 54px 48px 48px/72px 72px 62px 62px;
  box-shadow:inset 0 4px 9px rgba(255,255,255,.4),inset 0 -24px 36px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.14);
  background:linear-gradient(116deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 60%,rgba(0,0,0,.18) 100%)}
.hero-stage .panel-t{position:absolute;top:40px;left:9px;right:9px;height:2px;background:rgba(0,0,0,.16);border-radius:2px}
.hero-stage .panel-b{position:absolute;bottom:40px;left:9px;right:9px;height:2px;background:rgba(0,0,0,.16);border-radius:2px}
.hero-stage .notch-l{position:absolute;top:112px;left:2px;width:6px;height:2px;background:rgba(0,0,0,.18)}
.hero-stage .notch-r{position:absolute;top:112px;right:2px;width:6px;height:2px;background:rgba(0,0,0,.18)}
.hero-stage .mirror-l{position:absolute;top:60px;left:-10px;width:13px;height:16px;background:#2a3b49;
  border-radius:5px 3px 3px 6px;transform:rotate(-10deg);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.35)}
.hero-stage .mirror-r{position:absolute;top:60px;right:-10px;width:13px;height:16px;background:#2a3b49;
  border-radius:3px 5px 6px 3px;transform:rotate(10deg);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.35)}
.hero-stage .grille{position:absolute;top:15px;left:39px;right:39px;height:5px;background:rgba(0,0,0,.3);border-radius:3px}
.hero-stage .light-l{position:absolute;top:11px;left:14px;width:24px;height:9px;
  background:linear-gradient(180deg,#ffffff,#cfe0ff);border-radius:5px;
  box-shadow:0 0 12px rgba(207,224,255,.85);transform:rotate(-4deg)}
.hero-stage .light-r{position:absolute;top:11px;right:14px;width:24px;height:9px;
  background:linear-gradient(180deg,#ffffff,#cfe0ff);border-radius:5px;
  box-shadow:0 0 12px rgba(207,224,255,.85);transform:rotate(4deg)}
.hero-stage .shield{position:absolute;top:44px;left:15px;right:15px;height:48px;
  background:linear-gradient(158deg,#2a3b49 0%,#16212b 65%);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.hero-stage .shieldglow{position:absolute;top:46px;left:24px;width:16px;height:42px;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  clip-path:polygon(30% 0,70% 0,90% 100%,10% 100%)}
.hero-stage .roof{position:absolute;top:94px;left:12px;right:12px;height:58px;
  background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.12));border-radius:12px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.12)}
.hero-stage .pano{position:absolute;top:100px;left:20px;right:20px;height:44px;
  background:linear-gradient(180deg,#1b2833,#101922);border-radius:8px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.hero-stage .rear{position:absolute;bottom:44px;left:15px;right:15px;height:34px;
  background:linear-gradient(200deg,#16212b 0%,#263743 100%);
  clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
.hero-stage .tail{position:absolute;bottom:11px;left:14px;right:14px;height:9px;
  background:linear-gradient(180deg,#ff6a5f,#c22a20);border-radius:5px;
  box-shadow:0 0 10px rgba(255,69,58,.55)}
.hero-stage .nummer{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);
  width:8px;height:5px;background:rgba(0,0,0,.35);border-radius:2px}
/* Wer keine Bewegung will, sieht das Auto still im Feld stehen. */
@media (prefers-reduced-motion: reduce){
  .hero-stage .car,.hero-stage .wheel.fl,.hero-stage .wheel.fr,.hero-stage .lack{animation:none}
  .hero-stage .car{opacity:1}
}

/* --- Uebergang zur Parkieren-Seite: der blaue Vorhang.
   Er haengt bewusst an <html> und nicht an <body>, weil body auf grossen
   Bildschirmen gezoomt wird — im gezoomten Raum wuerden die gemessenen
   Bildschirm-Koordinaten des Parkfelds nicht mehr stimmen. --- */
/* Der Vorhang waechst ueber transform, nicht mehr ueber clip-path: eine
   Form, die sich Bild fuer Bild aendert, muss der Hauptfaden jedes Mal
   neu zeichnen — ueber den ganzen Bildschirm. Eine Vergroesserung rechnet
   die Grafikkarte. Der Kasten ist absichtlich 60 px groesser als das
   Fenster, damit seine runden Ecken am Ende ausserhalb liegen.
   Im Vorhang steht die Wortmarke allein — wie in der Fusszeile: das
   pb-Zeichen braucht seine blaue Kachel, um lesbar zu sein. */
.pb-vorhang{position:fixed;z-index:9000;background:var(--accent,#3757B8);
  border-radius:12px;pointer-events:none;will-change:transform}
.pb-marke{position:fixed;inset:0;z-index:9001;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;color:#fff;font-size:clamp(30px,3.4vw,44px);
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
/* Zeichen und Wort in denselben Verhaeltnissen wie in der Kopfzeile
   (dort 30 px Zeichen zu 20 px Schrift, Abstand 9 px) — hier in em, damit
   das Ganze mit der Bildschirmbreite mitwaechst. Auf Blau bekommt das
   pb-Zeichen eine WEISSE Kachel: die Kachel traegt das gruene b, ohne sie
   bliebe nur ein weisses P uebrig. */
.pb-marke .lockup{display:flex;align-items:center;gap:.45em}
.pb-marke .lockup svg{display:block;width:1.5em;height:1.5em;flex:none}
.pb-marke .lockup span{font-size:1em;font-weight:700;letter-spacing:-.02em;line-height:1}

/* ===== Grosse Bildschirme: alles waechst mit (Nutzer-Entscheid 15.08.2026)
   Bis 1300 px aendert sich NICHTS — Handy, Tablet und Laptop bleiben exakt
   wie geprueft. Darueber waechst die Seite in vier ruhigen Stufen mit:
   Inhalt, Schrift, Knoepfe und Abstaende im selben Verhaeltnis, damit das
   Layout genau so bleibt und nur groesser wird. Gedeckelt bei 1.32 —
   weiter waere die Textzeile zu lang zum Lesen.
   Warum in Stufen und nicht stufenlos: zoom rechnet clamp() nicht.
   Aeltere Browser ohne zoom-Unterstuetzung zeigen einfach die heutige
   Groesse — nichts bricht. ===== */
@media (min-width: 1300px) { body { zoom: 1.08 } }
@media (min-width: 1600px) { body { zoom: 1.16 } }
@media (min-width: 1900px) { body { zoom: 1.24 } }
@media (min-width: 2300px) { body { zoom: 1.32 } }

/* ===== Simulator V2 (19.08.2026): spielt die ECHTE App nach — Karte mit
   Verfuegbarkeits-Pillen, Zeitraum-Blatt, Pruefen & Buchen. Rueckbau:
   dieser Block + der simRender-Teil in parkieren.html. ===== */
.sim-progress{display:flex;gap:5px;justify-content:center;margin-bottom:12px}
.sim-progress i{width:30px;height:4px;border-radius:99px;background:var(--line)}
.sim-progress i.an{background:var(--accent)}
.sim-karte{position:relative;height:250px;border-radius:14px;background:#EFEDE9;overflow:hidden;margin-bottom:10px}
.sim-strasse{position:absolute;background:#fff;border-radius:3px}
.sim-ort{position:absolute;left:14px;top:12px;color:#B5B0A6;font-size:13px;font-weight:600}
.sim-pin{position:absolute;border:0;cursor:pointer;background:#fff;border-radius:999px;padding:7px 12px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(40,40,35,.16);transition:transform 150ms ease-out}
.sim-pin:hover{transform:translateY(-2px)}
/* Druck-Rückmeldung wie in der App (Verhaltens-Regel: jeder Knopf
   quittiert den Druck sofort) — Nutzer-Fund 19.08.: die neuen
   Simulator-Bauteile hatten als einzige keine. Muster wie Zeile
   «.faq-item>summary:active …» weiter oben. */
.sim-pin:active{transform:translateY(-1px) scale(.94)}
.sim-back,.sim-again{transition:transform 120ms var(--ease)}
/* Die Teilen-Knöpfe haben schon Farb-Übergänge — transform kommt DAZU,
   sonst überschriebe eine zweite transition-Regel die erste. */
.share-btn,.share a,.share button{transition:border-color 150ms ease-out,color 150ms ease-out,transform 120ms var(--ease)}
.sim-back:active,.sim-again:active,.share-btn:active,.share a:active,.share button:active{transform:scale(.96)}
.sim-pin.belegt{background:var(--sub);color:var(--bg)}
/* belegt ist im Simulator bewusst tot — dann darf er auch nicht wie
   ein Knopf reagieren (kein Anheben, kein Zeiger, kein Druck-Effekt). */
.sim-pin.belegt{cursor:default}
.sim-pin.belegt:hover,.sim-pin.belegt:active{transform:none}
/* Instagram-Knopf der Community-Sektion (Nutzer 19.08.: «schöner lösen
   mit einem instagram button»). Getönte Pille nach Kanon §5 — kein
   Rahmen, Druck-Rückmeldung wie überall. Der Handle ist sprachneutral. */
.comm-ig-wrap{text-align:center;margin-top:12px}
.comm-ig{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--tint);color:var(--accent);font-weight:700;font-size:15px;text-decoration:none;transition:transform 120ms var(--ease)}
.comm-ig:hover{transform:translateY(-2px)}
.comm-ig:active{transform:scale(.97)}
.comm-ig svg{flex:none}
.sim-map-hint{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:12px;padding:8px 12px;font-size:12.5px;color:var(--text2);box-shadow:0 6px 18px rgba(40,40,35,.10);text-align:center}
.sim-map-hint b{color:var(--ink)}
.sim-kachel{background:var(--tint);border-radius:14px;padding:12px 14px;margin-bottom:9px}
.sim-zrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sim-zrow + .sim-zrow{margin-top:6px}
.sim-kick{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;min-width:34px}
.sim-wert{font-size:15px;font-weight:700;color:var(--ink)}
.sim-gruen{color:#14874E;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:6px}
.sim-gruen::before{content:"";width:7px;height:7px;border-radius:99px;background:#22C373}
.sim-leise{color:var(--text2);font-size:13px}
.sim-chips{display:flex;gap:7px;flex-wrap:wrap}
.sim-chip{border:0;background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.sim-chip.an{background:var(--accent);color:#fff}