/* ═══════════════════════════════════════════════════════════════
   DENTOVO — Mobil-Ebene („App-Gefühl")
   Wird nur bis 760 px geladen (media-Attribut am <link>) und liegt
   NACH allen anderen Styles. Gleicher Inhalt wie am Desktop, nur
   anders präsentiert: Tab-/Aktionsleiste im Daumenbereich, Glas-
   Kopfleiste, iOS-„inset grouped"-Listen, Karten zum Wischen,
   Segmented Controls, Funnel als Vollbild-Flow, Dunkelmodus.
   Desktop bleibt unberührt.

   Präfix #app (= <body id="app">): Astro hängt an jeden Scoped-
   Selektor ein Attribut an — mit der ID liegt diese Ebene sicher
   obenauf, ohne !important.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --hdr-h:52px;
  --tab-h:56px;
  --act-h:70px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --gutter:16px;                         /* 16 px Rand, überall */
  --app-bg:#F2F6F8;                      /* iOS „grouped background", kühl getönt */
  --cell:#FFFFFF;
  --sep:rgba(14,26,43,.12);              /* Haarlinien */
  --press:rgba(14,26,43,.06);            /* Tipp-Feedback auf Zeilen */
  --glass:rgba(246,249,250,.8);
  --seg-bg:rgba(118,128,140,.13);
  --faint:#A3AEB7;                       /* Chevrons */
  --r-cell:14px;
  --sys:-apple-system,BlinkMacSystemFont,'SF Pro Text',var(--sans);
  --snap:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.3,1.3,.5,1);
  --card-sh:0 0 0 .5px var(--sep);       /* Haarlinie statt Schatten (Feinschliff 10/2026) */
  color-scheme:light;
}

/* ─── Dunkelmodus: komplett durchgestaltet (nur Mobil-Ebene) ─── */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --ink:#EDF2F4; --ink-2:#B7C3CB; --ink-3:#8F9CA6;
    --bg:#000; --bg-2:#000;
    --surface:#14191C; --surface-tint:#1B2226;
    --brand-deep:#3FD6C6; --brand-ink:#A3F1E6; --brand-soft:rgba(15,181,166,.17);
    --ok:#3DD39B; --ok-soft:rgba(61,211,155,.14);
    --risk:#FF7A57; --risk-deep:#FF9172; --risk-soft:rgba(255,122,87,.15);
    --gold:#F2B95A; --gold-soft:rgba(242,185,90,.13);
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.26);
    --sh-xs:none; --sh-sm:none; --sh:none; --sh-lift:none; --sh-float:none; --sh-deep:none;
    --sh-brand:0 10px 28px -14px rgba(15,181,166,.6);
    --grad-hero:radial-gradient(700px 420px at 85% -10%,rgba(56,217,196,.16),transparent 60%),
                radial-gradient(560px 380px at 0% 0%,rgba(15,181,166,.08),transparent 55%);
    --app-bg:#000; --cell:#14191C;
    --sep:rgba(255,255,255,.11); --press:rgba(255,255,255,.07);
    --glass:rgba(18,22,24,.72); --seg-bg:rgba(120,132,142,.24);
    --faint:#5F6B74;
    --card-sh:0 0 0 .5px var(--sep);
  }
}

/* ─── Grundlagen ─── */
html{scroll-padding-top:calc(var(--hdr-h) + var(--safe-t) + 8px);-webkit-text-size-adjust:100%;}
#app{
  background:var(--app-bg);
  font-size:17px;line-height:1.47;
  overflow-x:clip;                        /* nie horizontaler Überlauf */
  -webkit-tap-highlight-color:transparent;
}
#app:has(> .tabbar){padding-bottom:calc(var(--tab-h) + var(--safe-b));}
#app:has(> .m-action){padding-bottom:calc(var(--act-h) + var(--safe-b));}
#app a,#app button,#app summary,#app label{-webkit-tap-highlight-color:transparent;}
#app ::selection{background:var(--brand-soft);color:var(--ink);}
.js #app::before{display:none;}           /* Film-Korn: am Handy weg (Scroll-Performance) */
#app .scrollprog{display:none;}
#app :where(.section,.gap,#check,.co__group){scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 10px);}
#app [data-magnetic]{transform:none !important;}  /* Magnet-Effekt ist für Mauszeiger */
#app .m-only{display:revert;}

/* Typo: große iOS-Titel, Fließtext 15–17 px */
#app h2{font-size:28px;line-height:1.14;letter-spacing:-.022em;font-weight:600;}
#app h3{letter-spacing:-.02em;}
#app .lead{font-size:17px;line-height:1.47;}
#app p.lead{border-top:0;padding-top:0;}   /* Quiz.css-„.lead" (Formular) nicht auf Absätze übertragen */
#app .eyebrow{font-size:12px;letter-spacing:.12em;}
#app .s-index{font-size:12px;}
#app .section{padding-block:40px;}
#app .band,#app .spar{background:transparent;}
#app .container{padding-inline:var(--gutter);}

/* Tipp-Feedback: alles Antippbare gibt nach (federnd) */
#app .btn,#app .choice,#app .tab,#app .qa-x,#app .qa-back,#app .m-call,#app .m-action-call,#app .qa-share,
#app .faq__item summary,#app .ft__col a,#app .co__nav a,#app .seg button,#app .calc__stepper button,#app .kt__chips li{
  transition:transform .18s var(--snap),background-color .18s,opacity .18s,border-color .18s,color .18s,box-shadow .2s;
}
#app .btn:active,#app .qa-share:active,#app .co__nav a:active{transform:scale(.96);}
#app .choice:active,#app .risk:active{transform:scale(.98);}
#app .qa-x:active,#app .qa-back:active,#app .m-call:active,#app .m-action-call:active,#app .calc__stepper button:active{transform:scale(.9);}
#app .faq__item summary:active,#app .ft__col a:active,#app .kt__chips li:active{background-color:var(--press);}
/* Hover-Effekte bleiben am Finger sonst „hängen" */
#app .btn-primary:hover{transform:none;box-shadow:var(--sh-brand);}
#app .choice:not(.is-sel):hover{border-color:var(--line-2);box-shadow:none;transform:none;}
#app .btn{min-height:50px;font-size:17px;}

/* ═══ Kopfleiste: Milchglas, 52 px ═══ */
#app .nav{
  padding-top:var(--safe-t);
  background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:.5px solid transparent;
  transition:background-color .3s,border-color .3s,color .3s;
}
#app .nav.stuck{border-bottom-color:var(--sep);}
#app .nav__in{height:var(--hdr-h);gap:4px;}
#app .brand{font-size:19px;gap:8px;}
#app .brand__mark{width:30px;height:30px;border-radius:9px;}
#app .brand__mark svg{width:22px;height:22px;}
#app .nav__burger,#app .nav__mobile{display:none;}
#app .m-call{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-deep);
}
#app .m-back{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:44px;margin-left:-8px;color:var(--brand-deep);
}
#app .m-back:active{opacity:.4;}
/* über dunklen Abschnitten: Glas dunkel, Schrift hell */
#app .nav.on-dark{background:rgba(7,18,15,.62);color:#F2F7F6;border-bottom-color:transparent;}
#app .nav.on-dark .m-call{background:rgba(255,255,255,.14);color:#fff;}
#app .nav.on-dark .m-back{color:var(--mint);}

/* ═══ Tab-Leiste unten (Übersichtsseite) ═══ */
#app .tabbar{
  display:grid;grid-template-columns:repeat(5,1fr);
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tab-h) + var(--safe-b));padding:0 4px var(--safe-b);
  background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-top:.5px solid var(--sep);
  transition:transform .32s var(--snap);
}
#app .tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;
  font-family:var(--sys);font-size:10.5px;font-weight:500;letter-spacing:.01em;color:var(--ink-3);
}
#app .tab svg{width:26px;height:26px;transition:transform .25s var(--spring),fill-opacity .2s;fill:currentColor;fill-opacity:0;}
#app .tab:active svg{transform:scale(.86);}
#app .tab[aria-current="true"]{color:var(--brand-deep);}
#app .tab[aria-current="true"] svg{fill-opacity:.16;}

/* ═══ Feste Aktionsleiste (Detail-/Landingpages) ═══ */
#app .m-action{
  display:flex;align-items:center;gap:10px;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px var(--gutter) calc(10px + var(--safe-b));
  background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-top:.5px solid var(--sep);
  transition:transform .32s var(--snap);
}
#app .m-action .btn{flex:1;padding:15px 18px;}
#app .m-action-call{
  flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-deep);
}
#app .m-action-call svg{width:21px;height:21px;}
/* Leisten weichen: Tastatur offen, Formularfeld im Fokus, Ziel-Abschnitt im Bild, Vollbild-Check */
#app .tabbar.hide,#app .m-action.hide,#app .m-action.away,
html.kb-open #app .tabbar,html.kb-open #app .m-action,
html.qa-lock #app .tabbar,html.qa-lock #app .m-action{transform:translateY(115%);}

/* ═══ Startseite: Hero ═══ */
#app .hero{padding-top:18px;padding-bottom:28px;}
#app .hero [data-reveal]{opacity:1;transform:none;transition:none;}   /* sofort sichtbar: schnelles LCP, kein Nachblenden über dem Falz */
#app .hero__grid{gap:20px;}
#app .hero__kick{font-size:11px;letter-spacing:.14em;margin-bottom:14px;}
#app .hero__kick-rule{width:22px;}
#app .hero h1{font-size:40px;line-height:.98;letter-spacing:-.045em;}
#app .hero .lead{margin-top:14px;font-size:17px;}
#app .hero__cobrand{font-size:13px;margin-bottom:10px;}
#app .hero__hook{margin-top:16px;padding:14px;border:0;border-radius:var(--r-cell);background:var(--cell);box-shadow:var(--card-sh);}
#app .hero__hook p{font-size:15px;}

/* ═══ Check (Inline-Karte) ═══ */
#app .quiz{border:0;border-radius:22px;box-shadow:var(--card-sh);scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 10px);}
#app .quiz__bar{margin:14px 16px 0;}
#app .quiz__body,#app .quiz__calc,#app .quiz__done,#app .result{padding:20px 16px;}
#app .quiz__meta{margin-bottom:14px;}
#app .quiz__back{min-height:44px;font-size:15px;}
#app .quiz__count{font-size:13px;}
#app .quiz__q h2{font-size:24px;line-height:1.12;}
#app .quiz__help{font-size:15px;line-height:1.45;}
#app .quiz__choices{gap:10px;margin-top:18px;}
#app .choice{min-height:64px;padding:12px 14px;border-radius:16px;gap:12px;}
#app .choice__ic{width:40px;height:40px;border-radius:11px;}
#app .choice__label{font-size:17px;}
#app .choice__hint{font-size:13px;}
#app .choice__mark{width:24px;height:24px;}
#app .choice.is-sel .choice__mark{transform:scale(1);animation:qa-tick .32s var(--spring);}
#app .quiz__assure{display:block;font-size:13px;margin-top:18px;text-align:center;line-height:1.45;}
#app .quiz__assure svg{display:inline-block;vertical-align:-2px;margin-right:4px;}
#app .quiz__returning{font-size:13px;}
@keyframes qa-tick{0%{transform:scale(.6);}100%{transform:scale(1);}}

/* ═══ Check als Vollbild-Flow (React setzt .quiz--sheet) ═══ */
html.qa-lock,html.qa-lock body{overflow:hidden;}
#app .quiz--sheet{
  position:fixed;left:0;right:0;top:var(--vvt,0px);z-index:90;
  height:100vh;height:100dvh;height:var(--vvh,100dvh);
  display:flex;flex-direction:column;
  border-radius:0;box-shadow:none;background:var(--app-bg);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:qa-up .44s var(--snap) both;
}
#app .quiz--sheet.is-closing{animation:qa-down .24s ease-in both;}
@keyframes qa-up{from{transform:translateY(32px);opacity:0;}}
@keyframes qa-down{to{transform:translateY(40px);opacity:0;}}
#app .quiz--sheet > .quiz__bar,#app .quiz--sheet .quiz__meta,#app .quiz--sheet .quiz__next{display:none;}
#app .quiz--sheet > .quiz__body,#app .quiz--sheet > .quiz__calc,#app .quiz--sheet > .quiz__done,#app .quiz--sheet > .result{flex:1 0 auto;}

/* Kopf: Schließen · Titel · Schritt + Fortschritt */
#app .qa-top{
  position:sticky;top:0;z-index:4;flex:none;
  display:grid;grid-template-columns:52px 1fr 52px;align-items:center;
  height:calc(var(--hdr-h) + var(--safe-t));padding:var(--safe-t) 8px 0;
  background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
}
#app .qa-x{
  justify-self:start;display:grid;place-items:center;width:36px;height:36px;margin-left:4px;border-radius:50%;
  background:var(--seg-bg);color:var(--ink-2);
}
#app .qa-x::after{content:'';position:absolute;width:44px;height:44px;}  /* Tap-Ziel ≥ 44 px */
#app .qa-x{position:relative;}
#app .qa-title{text-align:center;font-family:var(--sys);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
#app .qa-step{justify-self:end;padding-right:8px;font-family:var(--sys);font-size:13px;font-weight:500;color:var(--ink-3);}
#app .qa-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sep);overflow:hidden;}
#app .qa-prog > span{display:block;height:100%;background:var(--grad-brand);transform-origin:left;transition:transform .5s var(--snap);border-radius:0 3px 3px 0;}

#app .quiz--sheet .quiz__body{padding:26px var(--gutter) 22px;}
#app .quiz--sheet .quiz__q h2{font-size:30px;line-height:1.08;letter-spacing:-.035em;}
#app .quiz--sheet .quiz__help{margin-top:10px;font-size:16px;}
#app .quiz--sheet .quiz__choices{gap:10px;margin-top:22px;}
#app .quiz--sheet .choice{min-height:70px;padding:14px 16px;background:var(--cell);border-color:transparent;box-shadow:var(--card-sh);}
#app .quiz--sheet .choice.is-sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:var(--sh-brand);}
#app .quiz--sheet .choice__ic{background:var(--brand-soft);border:0;}
#app .quiz--sheet .quiz__assure{margin-top:22px;}

/* Fuß: Zurück + Weiter im Daumenbereich */
#app .qa-foot{
  position:sticky;bottom:0;z-index:4;flex:none;
  display:flex;align-items:center;gap:10px;
  padding:10px var(--gutter) calc(10px + var(--safe-b));
  background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-top:.5px solid var(--sep);
  transition:transform .32s var(--snap);
}
#app .qa-back{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--seg-bg);color:var(--ink);
}
#app .qa-back:disabled{opacity:.3;}
#app .qa-next{flex:1;padding:15px 18px;}
#app .qa-next:disabled{opacity:.42;box-shadow:none;}
#app .qa-next svg{width:20px;height:20px;}
#app .qa-foot--result{margin:22px calc(-1 * var(--gutter)) 0;}
#app .qa-foot--result.is-away,#app .quiz--sheet:has(input:focus) .qa-foot{transform:translateY(115%);}

/* Übergänge zwischen den Schritten: View Transitions API … */
#app .quiz--sheet .quiz__q,#app .quiz--sheet > .quiz__calc,#app .quiz--sheet > .result,#app .quiz--sheet > .quiz__done{view-transition-name:qa-stage;}
::view-transition-old(root),::view-transition-new(root){animation:none;}
::view-transition-old(qa-stage){animation:qa-out-fwd .3s var(--snap) both;}
::view-transition-new(qa-stage){animation:qa-in-fwd .38s var(--snap) both;}
html[data-qdir="back"]::view-transition-old(qa-stage){animation-name:qa-out-back;}
html[data-qdir="back"]::view-transition-new(qa-stage){animation-name:qa-in-back;}
@keyframes qa-out-fwd{to{transform:translateX(-28%);opacity:0;}}
@keyframes qa-in-fwd{from{transform:translateX(36%);opacity:0;}}
@keyframes qa-out-back{to{transform:translateX(28%);opacity:0;}}
@keyframes qa-in-back{from{transform:translateX(-36%);opacity:0;}}
/* … sonst CSS (Schritt wird neu eingesetzt und gleitet herein) */
html.qa-vt #app .quiz__q{animation:none;}
#app .quiz--sheet .quiz__q{animation:qa-slide-fwd .36s var(--snap) both;}
html[data-qdir="back"] #app .quiz--sheet .quiz__q{animation-name:qa-slide-back;}
@keyframes qa-slide-fwd{from{opacity:0;transform:translateX(26px);}}
@keyframes qa-slide-back{from{opacity:0;transform:translateX(-26px);}}

#app .quiz--sheet > .quiz__calc{display:flex;flex-direction:column;align-items:center;justify-content:center;}
#app .quiz--sheet > .result{padding:18px var(--gutter) 0;}
#app .quiz--sheet > .quiz__done{display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* ═══ Ergebnis als App-Zusammenfassung ═══ */
#app .result__top{gap:10px;}
#app .ins-badge{font-size:13px;padding:.4em .8em;}
#app .qa-sum{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin:16px 0 18px;padding:22px 16px 18px;border-radius:22px;
  background:var(--cell);box-shadow:var(--card-sh);
}
#app .quiz:not(.quiz--sheet) .qa-sum{background:var(--surface-tint);box-shadow:none;}
#app .qa-sum__lbl{font-family:var(--sys);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
#app .qa-sum__num{display:block;margin-top:6px;font-family:var(--display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-.045em;color:var(--risk-deep);}
#app .qa-sum__sub{margin-top:6px;font-size:15px;color:var(--ink-2);}
#app .qa-share{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;min-height:40px;padding:8px 16px;border-radius:999px;
  background:var(--seg-bg);font-family:var(--sys);font-size:15px;font-weight:600;color:var(--brand-deep);
}
#app .qa-share.is-done{color:var(--ok);}
#app .result__head h2{font-size:24px;line-height:1.12;margin-top:4px;}
#app .result__head .lead{font-size:16px;}
#app .result__timing{border:0;border-radius:var(--r-cell);font-size:15px;}

/* Kostenrisiken: Karten zum Wischen, nächste lugt hervor */
#app .riskgrid.qa-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:20px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 12px;
  scroll-padding-inline:var(--gutter);scrollbar-width:none;
}
#app .qa-track::-webkit-scrollbar{display:none;}
#app .qa-track .risk{flex:0 0 86%;scroll-snap-align:start;border:0;border-radius:20px;background:var(--cell);box-shadow:var(--card-sh);padding:18px 16px;}
#app .quiz:not(.quiz--sheet) .qa-track .risk{background:var(--surface-tint);box-shadow:none;}
#app .risk__top h3{font-size:18px;}
#app .risk__cost,#app .risk__legend{font-size:13px;}
#app .risk__note{font-size:14px;min-height:0;}
#app .risk__with{font-size:14px;}
#app .m-dots{display:flex;justify-content:center;gap:7px;margin-top:2px;}
#app .m-dots i{width:7px;height:7px;border-radius:4px;background:var(--line-2);transition:width .25s var(--snap),background-color .25s;}
#app .m-dots i.on{width:18px;background:var(--brand);}

#app .result__bonus,#app .result__notes,#app .result__pitch,#app .done__gkv{border:0;border-radius:var(--r-cell);font-size:15px;}
#app .result__notes summary{min-height:48px;font-size:15px;}
#app .compare{border:0;border-radius:20px;background:var(--cell);padding:18px 14px;box-shadow:var(--card-sh);}
#app .quiz:not(.quiz--sheet) .compare{background:var(--surface-tint);box-shadow:none;}
#app .compare__num{font-size:30px;}
#app .compare__arrow{transform:none;justify-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);}
#app .compare__arrow svg{width:18px;height:18px;transform:rotate(90deg);}
#app .compare__lbl,#app .compare__sub{font-size:13px;}
#app .reco,#app .honest{border-radius:22px;padding:22px 18px;}
#app .reco h3{font-size:24px;}
#app .reco p,#app .reco__price{font-size:16px;}
#app .reco__highlights li,#app .honest__reasons li{font-size:15px;}
#app .tips .tip{border:0;border-radius:var(--r-cell);}
#app .result__disclaimer{font-size:13px;padding-inline:2px;}

/* ═══ iOS-Formular ═══ */
#app .lead{scroll-margin-top:calc(var(--hdr-h) + var(--safe-t) + 10px);}
#app .lead h3{font-size:24px;}
#app .lead form{gap:16px;}
#app .f > span{font-size:13px;font-weight:600;color:var(--ink-3);padding-inline:2px;}
#app .f input{font-size:17px;min-height:52px;padding:14px;border-radius:12px;}   /* 17 px: kein Safari-Zoom */
#app .f em{font-size:14px;}
#app .consent{font-size:14px;gap:12px;padding:4px 0;}
#app .consent input{width:24px;height:24px;margin-top:0;}
#app .consent-err,#app .form-err{font-size:14px;}
#app .lead__fine{font-size:13px;}
#app .lead .btn{width:100%;}
#app .quiz__restart{min-height:44px;font-size:15px;}

/* Erfolgsmeldung: Häkchen zeichnet sich */
#app .done__check{width:84px;height:84px;background:var(--ok);color:#fff;box-shadow:0 14px 30px -14px rgba(22,158,115,.8);animation:qa-pop .55s var(--spring) both;}
#app .done__check svg{width:44px;height:44px;stroke-width:2.6;}
#app .done__check svg path{stroke-dasharray:21;stroke-dashoffset:21;animation:qa-draw .45s .3s var(--snap) forwards;}
@keyframes qa-pop{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes qa-draw{to{stroke-dashoffset:0;}}
#app .quiz__done h2{font-size:28px;}
#app .quiz__done .lead{font-size:17px;}
#app .quiz--sheet .quiz__done .btn-ghost{background:transparent;border:0;box-shadow:none;color:var(--brand-deep);}

/* ═══ 01 Das Problem (dunkel) ═══ */
#app .gap{padding-block:44px 40px;border-radius:28px;margin-inline:8px;}
#app .gap__head h2{font-size:32px;max-width:none;line-height:1.04;}
#app .gap__grid{gap:24px;margin-top:22px;}
#app .gap__left .lead{font-size:17px;}
#app .gap__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;}
#app .gap__stats > div{padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.06);}
#app .gap__stats dt{font-size:26px;}
#app .gap__stats dd{font-size:12px;max-width:none;}
#app .gap__panel{padding:20px 18px;border-radius:20px;}
#app .gap__total{font-size:46px;}

/* ═══ Kostenüberblick-Teaser: gruppierte Zeilen ═══ */
#app .kt{display:flex;flex-direction:column;align-items:stretch;gap:16px;}
#app .kt__copy{display:contents;}
#app .kt__copy .eyebrow{order:0;margin-bottom:-10px;padding-inline:4px;}
#app .kt__copy h2{order:1;padding-inline:4px;}
#app .kt__copy .lead{order:2;margin:-6px 0 0;padding-inline:4px;font-size:16px;}
#app .kt__chips{order:3;}
#app .kt__copy .btn{order:4;width:100%;font-size:16px;padding-inline:18px;}

/* ─── iOS „inset grouped": Karte mit eingerückten Haarlinien ─── */
#app .kt__chips,#app .trust__grid,#app .spar__steps,#app .faq,#app .ft__col,#app .fp-steps,#app .fp-benefits,#app .fp-legal,#app .co__list{
  display:block;gap:0;background:var(--cell);border-radius:var(--r-cell);overflow:hidden;border:0;box-shadow:none;
}
#app .kt__chips li,#app .trust__grid li,#app .spar__steps li,#app .faq__item,#app .fp-step,#app .fp-benefits li,#app .fp-legal li,#app .co__row{
  position:relative;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;
}
#app .kt__chips li+li::before,#app .trust__grid li+li::before,#app .spar__steps li+li::before,#app .faq__item+.faq__item::before,
#app .fp-step+.fp-step::before,#app .fp-benefits li+li::before,#app .fp-legal li+li::before,#app .co__row+.co__row::before,
#app .ft__col a+a::before{
  content:'';position:absolute;top:0;right:0;left:var(--sep-l,16px);height:.5px;background:var(--sep);
}
/* Zeilen in Gruppen nicht einzeln einfliegen lassen */
#app .trust__grid li,#app .faq__item,#app .co__group,#app .fp-step{opacity:1;transform:none;}

#app .kt__chips li{padding:14px 16px;min-height:50px;}
#app .kt__chips span{font-weight:500;font-size:16px;}
#app .kt__chips b{font-size:16px;}

/* ═══ 02 So funktioniert's: Karten zum Wischen ═══ */
#app .steps__head,#app .faq__head,#app .rechner-head,#app .fp-head{text-align:left;max-width:none;margin:0 0 16px;padding-inline:4px;}
#app .steps{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;
  scroll-padding-inline:var(--gutter);scrollbar-width:none;
}
#app .steps::-webkit-scrollbar{display:none;}
#app .step{flex:0 0 82%;scroll-snap-align:start;padding:20px 18px;border:0;border-radius:22px;box-shadow:var(--card-sh);transition-delay:0ms !important;}
#app .step__ill{width:72px;height:72px;margin:-4px 0 6px -6px;}
#app .step__n{font-size:12px;}
#app .step h3{font-size:20px;}
#app .step p{font-size:15px;line-height:1.45;}
#app .steps__cta{margin-top:18px;}
#app .steps__cta .btn{width:100%;}

/* ═══ 03 Vertrauen: Liste mit farbigen Symbol-Kacheln (wie iOS-Einstellungen) ═══ */
#app .trust{gap:18px;}
#app .trust__ill{width:64px;height:64px;margin:0 0 10px -6px;}
#app .trust__copy h2{font-size:30px;}
#app .trust__copy .lead{font-size:16px;}
#app .trust__seal{font-size:14px;margin-top:16px;}
#app .trust__grid{--sep-l:62px;}
#app .trust__grid li{padding:14px 16px;gap:14px;}
#app .trust__grid .tick{width:32px;height:32px;border-radius:8px;color:transparent;background-position:center;background-repeat:no-repeat;background-size:18px;}
#app .trust__grid .tick svg{display:none;}
#app .trust__grid li:nth-child(1) .tick{background-color:#0B8C80;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h16v10.5H4zM9 8.5V6.5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 6.5v2M4 13h16'/%3E%3C/svg%3E");}
#app .trust__grid li:nth-child(2) .tick{background-color:#2F6FDE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.6' fill='white'/%3E%3C/svg%3E");}
#app .trust__grid li:nth-child(3) .tick{background-color:#169E73;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 7.2a6 6 0 1 0 0 9.6M4.5 10.4h8.5M4.5 13.6h8.5'/%3E%3C/svg%3E");}
#app .trust__grid li:nth-child(4) .tick{background-color:#5B5FC7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");}
#app .trust__grid b{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;}
#app .trust__grid p{font-size:15px;line-height:1.45;margin-top:2px;}

/* ═══ Spar-Tipp ═══ */
#app .spar__grid{display:flex;flex-direction:column;align-items:stretch;gap:16px;}
#app .spar__copy{display:contents;}
#app .spar__eyebrow{order:0;margin-bottom:-10px;padding-inline:4px;}
#app .spar h2{order:1;font-size:30px;padding-inline:4px;}
#app .spar .lead{order:2;margin-top:-6px;font-size:16px;padding-inline:4px;}
#app .spar__steps{order:3;--sep-l:62px;}
#app .spar__cta{order:4;margin-top:0;width:100%;}
#app .spar__note{order:5;margin-top:-6px;font-size:13px;padding-inline:4px;}
#app .spar__steps li{padding:14px 16px;gap:14px;}
#app .spar__steps b{font-family:var(--sans);font-size:17px;}
#app .spar__steps p{font-size:15px;}

/* ═══ 04 FAQ: gruppierte Aufklapper mit Chevron ═══ */
#app .faq__item summary{padding:14px 16px;min-height:52px;font-family:var(--sans);font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:-.01em;}
#app .faq__plus{width:auto;height:auto;background:none;transform:none;}
#app .faq__item[open] .faq__plus{transform:none;}
#app .faq__plus svg{display:none;}
#app .faq__plus::before{
  content:'';display:block;width:9px;height:9px;margin-right:2px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--snap),border-color .2s;
}
#app .faq__item[open] .faq__plus::before{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--brand-deep);}
#app .faq__item > p{padding:0 16px 16px;font-size:15.5px;line-height:1.55;}

/* ═══ Fußbereich: gruppierte Link-Listen ═══ */
#app .ft{margin-top:28px;padding-top:30px;padding-bottom:12px;border-radius:28px 28px 0 0;}
#app .ft__in{grid-template-columns:1fr;gap:16px;}
#app .ft__claim{font-size:15px;}
#app .ft__gkv{margin-top:16px;padding:16px;border-radius:var(--r-cell);gap:12px 14px;}
#app .ft__gkv-txt{font-size:15px;}
#app .ft__gkv-txt b{font-size:18px;line-height:1.2;}
#app .ft__gkv-btn{min-height:48px;font-size:16px;}
#app .ft__gkv:active{transform:scale(.98);}
#app .ft__disc{font-size:13px;max-width:none;color:rgba(255,255,255,.66);}
#app .ft__h{color:rgba(255,255,255,.66);}
#app .ft__bottom{color:rgba(255,255,255,.62);}
#app .ft__col{background:rgba(255,255,255,.06);}
#app .ft__h{display:block;padding:14px 16px 6px;margin:0;font-size:12px;}
#app .ft__col a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;
  min-height:46px;padding:11px 16px;font-size:16px;position:relative;
}
#app .ft__col a::after{
  content:'';flex:none;width:7px;height:7px;margin-right:3px;
  border-right:2px solid rgba(255,255,255,.3);border-top:2px solid rgba(255,255,255,.3);transform:rotate(45deg);
}
#app .ft__col a+a::before{background:rgba(255,255,255,.1);}
#app .ft__hours{display:block;padding:8px 16px 14px;font-size:13px;color:rgba(255,255,255,.64);}
#app .ft__bottom{margin-top:20px;padding-top:16px;font-size:13px;justify-content:center;}
#app .ft__mega{font-size:30vw;margin-top:14px;margin-bottom:-14px;}

/* ═══ Zahnkosten ═══ */
#app .kosten-hero{padding-top:22px;}
#app .kosten-hero h1,#app .fp-hero h1,#app .prose h1,#app .nf h1{font-size:34px;line-height:1.04;letter-spacing:-.035em;}
#app .kosten-hero .lead{font-size:17px;}
#app .kosten-facts{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:22px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 12px;
  scroll-padding-inline:var(--gutter);scrollbar-width:none;
}
#app .kosten-facts::-webkit-scrollbar{display:none;}
#app .kosten-facts > div{flex:0 0 80%;scroll-snap-align:start;border:0;border-radius:18px;padding:16px;box-shadow:var(--card-sh);}
#app .kosten-facts p{font-size:14px;}
#app .rechner-head .lead{font-size:16px;}

/* Kostenrechner als iOS-Formular */
#app .calc{padding:0;background:transparent;border:0;box-shadow:none;}
#app .calc__grid{gap:14px;}
#app .calc__controls{gap:20px;padding:16px;background:var(--cell);border-radius:var(--r-cell);}
#app .calc__field > span{font-size:14px;}
#app .calc__field small{font-size:13px;}
#app .calc__select select{font-size:17px;min-height:50px;border-radius:12px;}
#app .calc__field input[type="range"]{height:28px;background:transparent;}
#app .calc__field input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--seg-bg);}
#app .calc__field input[type="range"]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px;}
#app .calc__stepper button{width:44px;height:44px;}
#app .calc__out{border-radius:20px;padding:20px 18px;}
#app .calc__disclaimer{font-size:13px;padding-inline:4px;}
/* Segmented Control mit gleitendem Daumen (app.js setzt --i / --n) */
#app .seg{position:relative;gap:0;padding:2px;border-radius:10px;background:var(--seg-bg);}
#app .seg button{position:relative;z-index:1;min-height:36px;padding:7px 4px;border-radius:8px;font-family:var(--sys);font-size:13.5px;font-weight:500;color:var(--ink-2);}
#app .seg button.is-on{background:var(--cell);color:var(--ink);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);}
#app .seg.has-thumb::before{
  content:'';position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n,3));
  border-radius:8px;background:var(--cell);box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .34s var(--spring);
}
#app .seg.has-thumb button.is-on{background:transparent;box-shadow:none;}

/* Schwebende Live-Pille (Rechner): Zwischenergebnis, Tipp springt zum Ergebnis */
#app .m-pill{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  position:fixed;left:50%;bottom:calc(var(--act-h) + var(--safe-b) + 12px);z-index:55;
  padding:9px 10px 9px 16px;border-radius:999px;
  background:rgba(14,26,43,.9);color:#F5F8F9;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-family:var(--sys);font-size:14px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .36s var(--spring),opacity .2s;
}
#app .m-pill.show{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto;}
#app .m-pill:active{transform:translate(-50%,0) scale(.96);}
#app .m-pill b{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}
#app .m-pill .dot{width:3px;height:3px;border-radius:50%;background:rgba(245,248,249,.45);}
#app .m-pill .go{margin-left:2px;padding:7px 12px;border-radius:999px;background:var(--mint);color:#04211D;font-weight:600;font-size:13px;}

/* Kostenübersicht: Kategorien als Segment-Leiste (sticky), eine Kategorie pro Ansicht */
#app .co{gap:14px;}
#app .co__nav{
  top:calc(var(--hdr-h) + var(--safe-t));flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter));padding:8px var(--gutter);background:var(--glass);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
}
#app .co__nav::-webkit-scrollbar{display:none;}
#app .co__nav a{flex:none;min-height:36px;display:inline-flex;align-items:center;padding:7px 14px;border:0;background:var(--seg-bg);font-family:var(--sys);font-size:14px;font-weight:500;color:var(--ink-2);}
#app .co__nav a[aria-selected="true"]{background:var(--ink);color:var(--app-bg);font-weight:600;}
#app .co.m-tabs .co__group:not(.is-on){display:none;}
#app .co.m-tabs .co__group.is-on{animation:qa-fade .3s var(--snap) both;}
@keyframes qa-fade{from{opacity:0;transform:translateY(6px);}}
#app .co__cat{font-size:22px;border:0;padding:0 4px;margin:6px 0 10px;}
#app .co__cat-ic{width:32px;height:32px;border-radius:8px;background:var(--brand);color:#fff;}
#app .co__row{padding:14px 16px;}
#app .co__name{font-size:17px;}
#app .co__short{font-size:15px;}
#app .co__why{font-size:14px;}
#app .co__why summary{min-height:32px;}
#app .co__badge{font-size:12px;}

/* ═══ Für Praxen ═══ */
#app .fp-hero__cta,#app .fp-contact__row,#app .nf__cta{flex-direction:column;align-items:stretch;}
#app .fp-hero__cta .btn,#app .fp-contact__row .btn,#app .nf__cta .btn{width:100%;}
#app .fp-steps{--sep-l:62px;}
#app .fp-step{display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:2px;padding:14px 16px;}
#app .fp-step__n{grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;font-size:15px;box-shadow:none;}
#app .fp-step h3{margin-top:0;font-size:17px;font-family:var(--sans);font-weight:600;}
#app .fp-step p{grid-column:2;margin-top:0;font-size:15px;}
#app .fp-benefits{--sep-l:62px;}
#app .fp-benefits li{padding:14px 16px;gap:14px;}
#app .fp-tick{width:32px;height:32px;border-radius:8px;background:var(--ok);color:#fff;}
#app .fp-benefits b{font-family:var(--sans);font-weight:600;font-size:17px;}
#app .fp-benefits p{font-size:15px;}
#app .fp-legal{--sep-l:50px;}
#app .fp-legal li{padding:14px 16px;}
#app .fp-legal span{font-size:15px;line-height:1.5;}
#app .fp-legal__note{font-size:14px;padding-inline:4px;}

/* ═══ Bestandskunden: Einstiege + Seite „Vertrag prüfen lassen" ═══ */
#app .hero__bestand{margin-top:12px;font-size:14px;}
#app .hero__bestand a{display:inline-block;padding:10px 4px;}
#app .bt{background:transparent;padding-bottom:40px;}
#app .bt__card{align-items:flex-start;border:0;border-radius:var(--r-cell);box-shadow:none;background:var(--cell);padding:16px;gap:12px 14px;}
#app .bt__txt h2{font-size:18px;line-height:1.2;}
#app .bt__txt p{font-size:15px;}
#app .bt__cta{min-height:46px;font-size:16px;}

#app .vp-lead{margin-top:14px;font-size:17px;}
#app .vp-points{margin-top:18px;gap:0;background:var(--cell);border-radius:var(--r-cell);overflow:hidden;}
#app .vp-points li{position:relative;border:0;border-radius:0;box-shadow:none;background:transparent;padding:14px 16px;}
#app .vp-points li+li::before{content:'';position:absolute;top:0;right:0;left:65px;height:.5px;background:var(--sep);}
#app .vp-points b{font-family:var(--sans);font-weight:600;font-size:17px;}
#app .vp-points p{font-size:15px;}
#app .vp-call{display:flex;justify-content:center;min-height:44px;margin-top:12px;font-size:15px;}
#app .vp-app{border:0;border-radius:22px;box-shadow:var(--card-sh);padding:20px 16px;}
#app .vp-app__head h2{font-size:24px;line-height:1.12;}
#app .vp-app__head p{font-size:15px;}
#app .vp-facts{gap:8px;}
#app .vp-facts > div{padding:14px 16px;border-radius:14px;}
#app .vp-facts dt{font-size:20px;}
#app .vp-facts dd{font-size:14px;}
#app .bf__anliegen legend,#app .bf__f > span{font-size:13px;color:var(--ink-3);}
#app .bf__opt{min-height:56px;align-items:center;border-radius:14px;}
#app .bf__opt:active{transform:scale(.98);}
#app .bf__f input{font-size:17px;min-height:52px;border-radius:12px;}   /* 17 px: kein Safari-Zoom */
#app .bf__consent{font-size:14px;gap:12px;}
#app .bf__consent input{width:24px;height:24px;margin-top:0;}
#app .bf__fine{font-size:13px;}
#app .bf em,#app .bf__err{font-size:14px;}
@media (prefers-color-scheme:dark){
  #app .bf__f input:focus{background:var(--surface);}
}

/* ═══ Querverweis krankenkasse-guenstiger (Danke-Screen) ═══ */
#app .done__gkv{margin:4px 0 18px;font-size:15px;}
#app .done__gkv-txt{font-size:15px;}
#app .done__gkv:active{transform:scale(.98);}

/* ═══ Rechtstexte (Inhalt unverändert, nur lesefreundlich) ═══ */
#app .prose{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;}
#app .prose h1{font-size:30px;hyphens:manual;-webkit-hyphens:manual;}
#app .prose h2{font-size:21px;margin-top:30px;}
#app .prose h3{font-size:18px;}
#app .prose p,#app .prose li{font-size:16px;line-height:1.6;}
#app .prose .note{border:0;border-radius:var(--r-cell);}

/* ═══ 404 ═══ */
#app .nf{padding-block:44px;}
#app .nf__code{font-size:72px;}

/* ═══ Einwilligungs-Hinweis: als Karte über der Leiste (Text unverändert) ═══ */
#app .cm{
  left:8px;right:8px;bottom:calc(8px + var(--safe-b));
  border:0;border-radius:20px;padding:16px;font-size:14.5px;line-height:1.5;
  background:var(--cell);box-shadow:0 18px 50px -12px rgba(0,0,0,.42),0 0 0 .5px var(--sep);
  animation:qa-up .4s var(--snap) both;
}
#app:has(> .tabbar) .cm{bottom:calc(var(--tab-h) + var(--safe-b) + 8px);}
#app:has(> .m-action) .cm{bottom:calc(var(--act-h) + var(--safe-b) + 8px);}
#app .cm .cm-h{font-size:16px;}
#app .cm-b{gap:10px;margin-top:12px;}
#app .cm-b button{height:46px;font-size:16px;}
#app .cm-more{min-height:36px;font-size:14px;}
#app .cm-opts input{width:22px;height:22px;}

/* ═══ Dunkelmodus: Flächen, die fest hell bzw. auf --ink gebaut sind ═══ */
@media (prefers-color-scheme:dark){
  #app .reco,#app .calc__out{background:#0B1916;box-shadow:inset 0 0 0 1px rgba(56,217,196,.16);}
  #app .ft{background:#0C1113;}
  #app .gap{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
  #app .choice.is-sel .choice__ic,#app .f input:focus,#app .calc__select select:focus{background:var(--surface);}
  #app .calc__out .btn-primary{background:#fff;color:#064F49;}
  #app .ins-badge--recommend_limited,#app .b-fz{color:var(--gold);}
  #app .quiz__bar{background:rgba(255,255,255,.12);}
  #app .m-pill{background:rgba(44,52,58,.92);}
  #app svg rect[fill="#fff"]{fill:#222B30;}
  #app svg rect[fill="#D6E0E6"]{fill:#3C474E;}
  #app .done__check{box-shadow:none;}
  #app .co__nav a[aria-selected="true"]{color:#000;}
  #app .cm{box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 .5px var(--sep);}
}

/* ═══ Bewegung reduzieren ═══ */
@media (prefers-reduced-motion:reduce){
  #app .tabbar,#app .m-action,#app .qa-foot,#app .tab svg,#app .seg.has-thumb::before,#app .m-pill,#app .faq__plus::before,#app .qa-prog > span{transition:none;}
  #app .quiz--sheet,#app .quiz--sheet .quiz__q,#app .co.m-tabs .co__group.is-on,#app .cm{animation:none;}
  ::view-transition-old(qa-stage),::view-transition-new(qa-stage){animation:none;}
}

/* ═══ Schnellanfrage über dem Check ═══ */
#app .qf{border-radius:var(--r-cell);}
#app .qf__title{font-size:21px;line-height:1.2;}
#app .qf__sub{font-size:14px;}

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL (10/2026) — wie ortgies-consulting.de:
   keine Tab-/Aktionsleiste unten, Haarlinien-Zeilen statt
   „inset grouped"-Kästen und Wischkarten, ruhige Flächen.
   Steht bewusst am Ende und überschreibt die Blöcke oben.
   ═══════════════════════════════════════════════════════════════ */
#app{background:var(--bg);}
#app .band,#app .bt{background:transparent;}

/* Listen: Zeilen zwischen Haarlinien, ohne weiße Kastenfläche */
#app .kt__chips,#app .trust__grid,#app .spar__steps,#app .faq,#app .fp-steps,#app .fp-benefits,#app .fp-legal,#app .co__list{
  background:none;border-radius:0;overflow:visible;
  border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);
  --sep-l:0px;
}
#app .kt__chips li,#app .trust__grid li,#app .spar__steps li,#app .fp-step,#app .fp-benefits li,#app .fp-legal li,#app .co__row{padding-inline:2px;}
#app .faq__item summary{padding-inline:2px;}
#app .faq__item > p{padding-inline:2px;}

/* Vertrauen: schlichte Häkchen statt farbiger Symbol-Kacheln */
#app .trust__grid .tick{width:22px;height:22px;border-radius:0;background:none !important;color:var(--brand-deep);}
#app .trust__grid .tick svg{display:block;}

/* So funktioniert's: untereinander mit Haarlinie statt Wischkarten */
#app .steps{display:grid;gap:0;overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none;border-bottom:.5px solid var(--sep);}
#app .step{flex:none;padding:16px 2px;border:0;border-top:.5px solid var(--sep);border-radius:0;box-shadow:none;background:none;}
#app .step__ill{width:52px;height:52px;margin:0 0 4px -4px;transform:none;}

/* Bestandskunden-Hinweis: Zeile statt Kasten */
#app .bt__card{background:none;border-radius:0;padding:16px 2px;border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);}

/* Ergebnis im Check: Kostenrisiken als schmale Slides mit Haarlinie, Vergleich/Empfehlung als Zeilen */
#app .qa-track .risk,#app .quiz:not(.quiz--sheet) .qa-track .risk{background:none;box-shadow:none;border-radius:0;border-top:.5px solid var(--sep);padding:14px 2px 16px;}
#app .compare,#app .quiz:not(.quiz--sheet) .compare{background:none;box-shadow:none;border-radius:0;border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);padding:16px 0;}
#app .compare__arrow{background:none;}
#app .reco,#app .honest{background:none;box-shadow:none;border-radius:0;padding:18px 0 0;border-top:.5px solid var(--sep);}
#app .tips .tip{border-radius:0;background:none;border-top:.5px solid var(--sep);padding-inline:0;}
#app .result__notes{border-radius:0;background:none;border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);}
#app .result__bonus{border-radius:0;background:none;padding:0 0 0 12px;border-left:2px solid var(--brand);}
@media (prefers-color-scheme:dark){
  #app .reco{background:none;box-shadow:none;}
}