@font-face{font-family:"Archivo";src:url("schriften/archivo-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("schriften/source-sans-3-variable.woff2") format("woff2");font-weight:200 900;font-display:swap}

:root{
  --marine:#011B4F;--marine-2:#0A2A66;--grund:#F7F5F0;--wechsel:#EAEFF7;--karte:#FFFFFF;
  --blau:#0155FD;--blau-h:#0843C8;--hellblau:#8AB4FF;
  --h:#0A1230;--t:#3A4560;--ged:#5C6580;--t-m:#A9B8D6;--t-hell:#C9D5EC;
  --warm:#8A5A18;--warm-m:#E3B876;--sand:#F3E6CF;
  --linie:#E1E6F0;--linie-2:#D3DBEA;
  --r-karte:14px;--r-knopf:9px;--r-etikett:5px;
  --schatten:0 1px 2px rgba(1,27,79,.06),0 14px 34px -14px rgba(1,27,79,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --kopf-h:60px;--rand:20px;
}
@media (min-width:900px){:root{--rand:32px;--kopf-h:68px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px);-webkit-text-size-adjust:100%}
html.blatt-offen{overflow:hidden}
body{margin:0;background:var(--grund);color:var(--t);font:400 1.0625rem/1.6 "Source Sans 3",system-ui,sans-serif;overflow-x:clip}
@media (min-width:900px){body{font-size:1.125rem}}
img{max-width:100%;display:block}
picture{display:contents}
h1,h2,h3,h4{font-family:Archivo,system-ui,sans-serif;color:var(--h);margin:0;font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.875rem,1.3rem + 2.4vw,3rem)}
h3{font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
h4{font-size:1rem;font-weight:700;letter-spacing:0;line-height:1.3}
p{margin:0}
a{color:var(--blau)}
button{font:inherit}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.dunkel :focus-visible{outline-color:#fff}
.wrap{width:min(1200px,100% - 2*var(--rand));margin-inline:auto}
.abschnitt{padding-block:56px}
@media (min-width:900px){.abschnitt{padding-block:clamp(80px,8vw,112px)}}
.kopf-text{display:grid;gap:12px;max-width:720px;margin-bottom:28px}
@media (min-width:900px){.kopf-text{margin-bottom:44px}}
.kopf-text p{font-size:1.0625em;max-width:56ch}
.vorzeile{font:700 .875rem/1.3 Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--blau)}
.klein{font-size:.9375rem;color:var(--ged)}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Marine-Flächen wie in der Scroll-Werkstatt-Fassung */
.dunkel{background:radial-gradient(52rem 30rem at 86% -12%,rgba(1,85,253,.22),transparent 62%),radial-gradient(38rem 24rem at -8% 108%,rgba(138,180,255,.09),transparent 60%),var(--marine);color:var(--t-hell)}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel .vorzeile{color:var(--hellblau)}
.dunkel a{color:#fff}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:var(--r-knopf);border:2px solid transparent;font:700 1.0625rem/1 Archivo,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .15s var(--ease)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--primaer{background:var(--blau);color:#fff}
.btn--primaer:hover{background:var(--blau-h)}
.btn--weiss{background:#fff;color:var(--marine)!important}
.btn--weiss:hover{background:var(--hellblau)}
.btn--linie{background:transparent;border-color:var(--linie-2);color:var(--h)}
.btn--linie:hover{border-color:var(--h)}
.btn--hell{background:transparent;border-color:rgba(169,184,214,.5);color:#fff!important}
.btn--hell:hover{border-color:#fff}
.btn--breit{width:100%}


/* Einblenden */
.js [data-auf]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-auf].ist-da{opacity:1;transform:none}

/* ============ Kopfleiste ============ */
.kopf{position:sticky;top:0;z-index:50;background:var(--marine);border-bottom:1px solid rgba(138,180,255,.14);transition:transform .35s var(--ease)}
html.kopf-weg .kopf{transform:translateY(-102%)}
.kopf__innen{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--kopf-h)}
.kopf__logo{display:inline-flex;align-items:center;min-height:44px}
.kopf__logo img{height:28px;width:auto}
@media (min-width:900px){.kopf__logo img{height:32px}}
.kopf__nav{display:none;gap:2px}
.kopf__nav a{color:var(--t-m);text-decoration:none;font:600 .9375rem/1 Archivo,sans-serif;padding:12px;border-radius:var(--r-knopf);transition:color .2s,background-color .2s}
.kopf__nav a:hover{color:#fff;background:var(--marine-2)}
.kopf__rechts{display:flex;align-items:center;gap:8px}
.kopf .btn{min-height:44px;padding:0 18px;font-size:.9375rem}
.kopf__cta{display:none}
.kopf__menue{min-height:44px;padding:0 16px;border-radius:var(--r-knopf);border:1.5px solid rgba(169,184,214,.45);background:transparent;color:#fff;font:700 .9375rem Archivo,sans-serif;cursor:pointer}
.menue{position:absolute;top:100%;left:calc(-1*var(--rand));right:calc(-1*var(--rand));display:grid;padding:8px var(--rand) 16px;background:var(--marine);border-bottom:1px solid rgba(138,180,255,.2);box-shadow:0 20px 40px -18px rgba(1,27,79,.7)}
.menue[hidden]{display:none}
.menue a{color:#fff;text-decoration:none;font:700 1.125rem Archivo,sans-serif;padding:14px 0;border-bottom:1px solid rgba(138,180,255,.14)}
.menue a:last-child{border-bottom:0}
@media (min-width:600px){.kopf__cta{display:inline-flex}}
@media (min-width:1100px){.kopf__nav{display:flex}.kopf__menue,.menue{display:none!important}}

/* ============ 1 Kopfbereich ============ */
.hero{padding:30px 0 44px;position:relative;z-index:1}
/* Handy: Kopfzeilen, Hauptknopf, dann gleich das Geräte-Bild; Film und Eckdaten danach */
.hero__raster{display:grid;grid-template-areas:"kopf" "geraete" "mehr"}
.hero__kopf{grid-area:kopf}.hero__mehr{grid-area:mehr}.hero__geraete{grid-area:geraete}
@media (min-width:1000px){.hero{padding:72px 0 88px}.hero__raster{grid-template-columns:47fr 53fr;grid-template-areas:"kopf geraete" "mehr geraete";column-gap:48px}.hero__kopf{align-self:end}.hero__mehr{align-self:start}.hero__geraete{align-self:center}}
.hero h1{font-size:clamp(2.05rem,1.3rem + 3.3vw,3.4rem);line-height:1.06;letter-spacing:-.028em;margin:12px 0 16px}
.hero__lead{font-size:1.125rem;line-height:1.55;color:var(--t-hell);max-width:38ch}
@media (min-width:900px){.hero__lead{font-size:1.25rem}}
.hero__knopf{margin-top:24px}
.hero__knopf .btn{width:100%}
@media (min-width:600px){.hero__knopf .btn{width:auto}}
.hero__ruhe{margin-top:10px;font-size:.9375rem;color:var(--t-m)}
.film-knopf{display:flex;align-items:center;gap:14px;width:100%;max-width:420px;margin-top:18px;padding:8px 14px 8px 8px;border:1.5px solid rgba(138,180,255,.35);border-radius:12px;background:rgba(10,42,102,.55);color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s var(--ease)}
.film-knopf:hover{border-color:var(--hellblau);background:var(--marine-2)}
.film-knopf:active{transform:scale(.98)}
.film-knopf__bild{position:relative;flex:none;width:112px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#EEF1F6}
.film-knopf__bild img{width:100%;height:100%;object-fit:cover}
.film-knopf__bild i{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:var(--blau);color:#fff;box-shadow:0 6px 16px -4px rgba(1,27,79,.6)}
.film-knopf__text b{display:block;font:700 1.0625rem/1.25 Archivo,sans-serif;color:#fff}
.film-knopf__text small{display:block;font-size:.9375rem;color:var(--t-m);margin-top:2px}
.film{width:min(960px,100vw);max-width:100vw;max-height:100dvh;margin:auto;padding:0;border:0;border-radius:0;background:var(--marine);color:var(--t-hell);opacity:0;transform:scale(.97);transition:opacity .25s,transform .35s var(--ease)}
@media (min-width:700px){.film{border-radius:16px;width:min(960px,94vw)}}
.film.offen{opacity:1;transform:none}
.film::backdrop{background:rgba(0,8,26,.86)}
.film__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px}
.film__kopf h2{font-size:1.125rem;color:#fff}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#EEF1F6}
.film__fuss{display:grid;gap:10px;padding:14px 18px 18px}
.film__fuss .btn{justify-self:start}
.film__fuss .klein{color:var(--t-m)}
.hero__preis{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(138,180,255,.25);max-width:460px}
.hero__preis b{display:block;font:800 1.5rem/1.1 Archivo,sans-serif;color:#fff;letter-spacing:-.02em}
.hero__preis span{display:block;font-size:.9375rem;line-height:1.35;color:var(--t-m);margin-top:3px}
.hero__preis a{grid-column:1/-1;justify-self:start;display:inline-block;padding:10px 0;margin:-8px 0 -10px;font-weight:700;color:var(--hellblau)}
.hero__beleg{display:flex;align-items:center;gap:14px;margin-top:20px}
.hero__beleg span{display:flex;flex:none}
.hero__beleg img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--marine);background:var(--marine-2)}
.hero__beleg img + img{margin-left:-14px}
.hero__beleg p{font-size:.9375rem;line-height:1.45;color:var(--t-hell)}
.hero__beleg b{color:#fff;font-weight:700}

.hero__geraete{position:relative;z-index:2;margin:24px 0 4px}
@media (min-width:1000px){.hero__geraete{margin:0}}
.hero__geraete{display:flex;flex-direction:column}
/* Kennzeichnung direkt unter dem Bild, damit das Bild auf kleinen Handys höher sitzt */
.sf-leiste{order:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin-top:10px}
.sf-text{min-height:2.6em}
.sf-text b{display:block;font:700 1.0625rem/1.25 Archivo,sans-serif;color:#fff}
.sf-text span{display:block;font-size:.9375rem;line-height:1.35;color:var(--t-m)}
.sf-knoepfe{display:flex;gap:8px}
html:not(.js) .sf-knoepfe{display:none}
.sf-knoepfe button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(169,184,214,.45);background:transparent;color:#fff;cursor:pointer;transition:border-color .2s,background-color .2s}
.sf-knoepfe button:hover{border-color:#fff;background:rgba(10,42,102,.6)}
.sf-punkte{grid-column:1/-1;display:flex;gap:5px}
.sf-punkte i{position:relative;flex:1;max-width:34px;height:3px;border-radius:2px;background:rgba(169,184,214,.3);overflow:hidden}
.sf-punkte i.an{background:rgba(169,184,214,.55)}
.sf-laeuft .sf-punkte i.an::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:sfLauf 3.6s linear both}
@keyframes sfLauf{from{transform:scaleX(0)}to{transform:none}}
.sf-leiste .kennung{grid-column:1/-1}
/* Ruhige Kennzeichnung: gleicher Wortlaut wie vorher, aber als Hinweis in einer Zeile statt als oranger Kasten */
.kennung{display:flex;align-items:center;gap:6px;font-size:.875rem;line-height:1.35;color:var(--ged)}
.kennung svg{flex:none}
.dunkel .kennung{color:var(--t-m)}
.etikett{display:inline-flex;align-items:center;width:fit-content;font:700 .875rem/1 Archivo,sans-serif;padding:6px 8px;border-radius:var(--r-etikett);background:var(--sand);color:#5E3C0E}
.etikett--echt{background:#DDF2E4;color:#14532D}
.dunkel .etikett{background:rgba(227,184,118,.16);color:var(--warm-m)}
.geraete{position:relative;width:100%;aspect-ratio:3/2}
.geraete img{position:absolute;display:block}
.geraete::before{content:"";position:absolute;z-index:0;inset:4% 0 0 0;background:radial-gradient(58% 52% at 52% 56%,rgba(1,85,253,.32),transparent 70%);pointer-events:none}
.geraete-laptop{z-index:1;left:12.83%;top:10.25%;width:68.29%;height:62.99%}
.geraete-handy{z-index:2;left:78.26%;top:29.69%;width:16.93%;height:57.62%;border-radius:9%/4%}
/* Schaufenster: je Bildschirm alle Musterseiten übereinander, die gewählte ist sichtbar; das Handy folgt einen Hauch später */
.sf-flaeche{position:absolute;overflow:hidden;background:#161311}
.sf-flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .7s var(--ease)}
.sf-flaeche img.an{opacity:1}
.geraete-handy img{transition-delay:.14s}
.geraete-rahmen{z-index:3;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 26px 40px rgba(0,5,20,.45))}
.js .geraete{opacity:0;transform:translateY(22px)}
.geraete.da{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}

/* ============ 2 Gespräch und Musterseiten ============ */
.nutzen__raster > *,.kontakt__raster > *,.fragen__raster > *{min-width:0}
/* Galerie: jede Musterseite als Laptop mit kleinem Handy davor. Handy: fast bildschirmbreite Karten zum Wischen
   (natives Scrollen mit Einrasten, geht auch ohne JavaScript), darunter Zähler und Pfeile und „Ihr Betrieb?“ als
   eigener Aufruf. Rechner: Raster mit drei Spalten, „Ihr Betrieb?“ als neunte Karte. */
.galerie .kopf-text h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em}
.galerie__liste{list-style:none;margin:0 calc(-1*var(--rand));padding:4px var(--rand) 24px;display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,82%);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);scrollbar-width:none}
.galerie__liste::-webkit-scrollbar{display:none}
.galerie__liste > li{min-width:0;scroll-snap-align:start}
.galerie__nur-breit{display:none}
@media (min-width:900px){
  .galerie__liste{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px;overflow:visible;scroll-snap-type:none}
  .galerie__nur-breit{display:block}
}
.galerie__karte{display:grid;align-content:start;gap:2px;color:var(--h);text-decoration:none}
.galerie__los{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:700 .9375rem/1.2 Archivo,sans-serif;color:var(--blau)}
.galerie__steuer{display:none;align-items:center;gap:16px}
.js .galerie__steuer{display:flex}
.galerie__stand{flex:1;display:grid;gap:8px;font:700 .9375rem/1.2 Archivo,sans-serif;color:var(--h)}
.galerie__balken{display:block;height:3px;border-radius:2px;background:var(--linie-2);overflow:hidden}
.galerie__balken i{display:block;height:100%;width:var(--g,12.5%);background:var(--blau);transition:width .35s var(--ease)}
.galerie__pfeile{display:flex;gap:8px}
.galerie__pfeile button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie-2);background:#fff;color:var(--h);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,opacity .2s}
.galerie__pfeile button:hover{border-color:var(--h)}
.galerie__pfeile button:disabled{opacity:.4;cursor:default;border-color:var(--linie-2)}
.galerie__platz{display:grid;gap:14px;margin-top:24px;padding:20px;border-radius:var(--r-karte);border:1.5px dashed rgba(138,180,255,.55);background:radial-gradient(80% 60% at 50% 0%,rgba(1,85,253,.25),transparent 70%),var(--marine);color:var(--t-hell);line-height:1.5}
.galerie__platz b{display:block;margin-bottom:6px;font:800 1.375rem/1.15 Archivo,sans-serif;letter-spacing:-.02em;color:#fff}
.galerie__platz .btn{width:100%}
@media (min-width:900px){.js .galerie__steuer,.galerie__platz{display:none}}
.galerie__bild{position:relative;display:block;aspect-ratio:560/344;margin-bottom:14px;border-radius:9px;background:#E4E9F2;box-shadow:var(--schatten)}
.galerie__bild > img:first-child{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:9px;border:1px solid var(--linie)}
.galerie__handy{position:absolute;right:5%;bottom:-12%;width:23%;height:auto;aspect-ratio:190/431;object-fit:cover;object-position:top;border-radius:7px;border:2.5px solid #10131a;background:#fff;box-shadow:0 8px 18px -8px rgba(1,27,79,.55)}
.galerie__karte b{font:700 1rem/1.25 Archivo,sans-serif;color:var(--h);transition:color .2s}
.galerie__karte small{font-size:.875rem;line-height:1.3;color:var(--ged)}
a.galerie__karte:hover b{color:var(--blau)}
a.galerie__karte:focus-visible{outline-offset:4px;border-radius:10px}
.galerie__bild--handy{background:var(--sand)}
.galerie__bild--frei{display:grid;place-items:center;padding:10px;text-align:center;border:1.5px dashed #9FB4E6;background:radial-gradient(80% 60% at 50% 0%,rgba(1,85,253,.3),transparent 70%),var(--marine);box-shadow:none;color:#fff;font:800 1rem/1.2 Archivo,sans-serif}
.galerie__karte .etikett{margin-bottom:4px}
.galerie__hinweis{display:flex;align-items:flex-start;gap:8px;margin-top:18px}
.galerie__hinweis svg{flex:none;margin-top:3px}
@media (min-width:900px){.galerie__hinweis{margin-top:30px}}

/* Gespräch: aus Antworten wird die Seite. Mit JavaScript eine Scroll-Szene (steht fest, Schritte folgen dem Scrollweg,
   rückwärts läuft sie zurück); ohne JavaScript oder bei reduzierter Bewegung steht alles im Endzustand da. */
.gespraech{margin-bottom:48px}
@media (min-width:900px){.gespraech{margin-bottom:88px}}
.gespraech__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:900px){.gespraech__raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:center}.gespraech__raster .gespraech__hinweis{grid-column:2}}
.szenen .gespraech__rahmen{position:sticky;top:var(--rahmen-top,64px)}
.szenen .gespraech.flach .gespraech__rahmen{position:static}
.gespraech__raster .kopf-text{margin-bottom:16px}
.gespraech__buehne{display:grid;grid-template-columns:minmax(0,1fr) clamp(104px,30vw,150px);gap:12px;align-items:end}
@media (min-width:900px){.gespraech__buehne{grid-template-columns:minmax(0,1fr) 190px;gap:28px}}
.chat{display:grid;width:100%;padding:12px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten);font-size:.9375rem;line-height:1.35}
@media (min-width:480px){.chat{font-size:1rem;padding:14px}}
.chat__kopf{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #EDF0F5;margin-bottom:8px}
.chat__kopf img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;background:var(--wechsel)}
.chat__kopf b{display:block;font:700 .9375rem/1.2 Archivo,sans-serif;color:var(--h)}
.chat__kopf small{display:block;font-size:.875rem;line-height:1.25;color:var(--ged)}
.chat__liste{display:flex;flex-direction:column;gap:7px}
/* Chatfenster mit fester Höhe: Nachrichten beginnen oben; wird es voll, rückt der Verlauf nach oben weg wie im Messenger */
.szenen .chat__verlauf{--verlauf-h:clamp(210px,calc(100svh - 470px),320px);height:var(--verlauf-h);overflow:hidden}
.szenen .chat__verlauf.voll{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
.szenen .chat__liste{transition:transform .35s var(--ease)}
@media (min-width:900px){.szenen .chat__verlauf{--verlauf-h:380px}}
.blase{flex:none;max-width:90%;padding:8px 11px;border-radius:14px}
.blase--frage{align-self:flex-start;background:var(--wechsel);color:var(--h);border-bottom-left-radius:4px}
.blase--antwort{align-self:flex-end;background:var(--blau);color:#fff;border-bottom-right-radius:4px}
.tippt{flex:none;align-self:flex-end;display:none;gap:4px;padding:12px 13px;border-radius:14px;background:#DCE6FF}
.szenen .tippt{display:flex}
.tippt span{width:6px;height:6px;border-radius:50%;background:var(--blau);animation:punkt 1s infinite}
.tippt span:nth-child(2){animation-delay:.15s}.tippt span:nth-child(3){animation-delay:.3s}
.chat__fertig{flex:none;align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 14px 8px 9px;border-radius:999px;background:var(--marine);color:#fff;font:700 .9375rem/1.2 Archivo,sans-serif}
.chat__fertig i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blau);display:grid;place-items:center}
.szenen .chat__liste > *{animation:auf .4s var(--ease) both}
.szenen .chat__liste > .weg{display:none}
@keyframes punkt{0%,60%,100%{opacity:.35}30%{opacity:1}}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gespraech__hinweis{margin-top:12px;font-size:.875rem;color:var(--ged);text-align:center}

/* Mini-Handy: die Bau-Musterseite entsteht Schritt für Schritt */
.mini{margin:0;display:grid;gap:8px;justify-items:center}
.mini__geraet{position:relative;width:100%;aspect-ratio:.472}
.mini__schirm{position:absolute;left:6.1%;top:2.88%;width:87.8%;height:94.24%;overflow:hidden;border-radius:15%/7%;background:#161311}
.mini__seite{position:absolute;left:0;right:0;top:6.8%;bottom:0;overflow:hidden;background:#fff}
.mini__bahn{position:relative;transition:transform .8s var(--ease)}
.mini__bahn img{display:block;width:100%;height:auto}
.mini__rahmen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(1,27,79,.25))}
/* Baustelle: helle Platzhalter, die nach der passenden Antwort nach unten wegwischen. Lage in Anteilen der 2600 px langen Seite. */
.mini__bau{position:absolute;left:0;right:0;clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease);
  background:linear-gradient(#D5DDEA 0 0) 9% 18%/72% 5% no-repeat,linear-gradient(#D5DDEA 0 0) 9% 29%/58% 5% no-repeat,linear-gradient(#D5DDEA 0 0) 9% 40%/66% 5% no-repeat,linear-gradient(#E7C9AE 0 0) 9% 62%/52% 7% no-repeat,linear-gradient(#DCE3EE 0 0) 9% 74%/40% 6% no-repeat,#F1F4F9}
.mini__bau--start{top:2.77%;height:36.77%}
.mini__bau--rest{top:39.54%;height:60.46%;background:linear-gradient(#D5DDEA 0 0) 9% 4%/64% 1.6% no-repeat,linear-gradient(#DCE3EE 0 0) 7% 12%/41% 16% no-repeat,linear-gradient(#DCE3EE 0 0) 93% 12%/41% 16% no-repeat,linear-gradient(#DCE3EE 0 0) 7% 38%/41% 16% no-repeat,linear-gradient(#DCE3EE 0 0) 93% 38%/41% 16% no-repeat,linear-gradient(#DCE3EE 0 0) 7% 64%/41% 16% no-repeat,linear-gradient(#DCE3EE 0 0) 93% 64%/41% 16% no-repeat,#F1F4F9}
.mini:not([data-stand="kopf"]) .mini__bau--start,
.mini[data-stand="leistungen"] .mini__bau--rest,.mini[data-stand="anruf"] .mini__bau--rest,.mini[data-stand="fertig"] .mini__bau--rest{clip-path:inset(100% 0 0 0)}
.mini[data-stand="leistungen"] .mini__bahn{transform:translateY(-62.3%)}
/* Anruf-Knopf der Musterseite (rechts oben) leuchtet auf */
.mini__ring{position:absolute;left:62.4%;top:.3%;width:14.4%;height:2.15%;border-radius:4px;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--blau);opacity:0;transform:scale(1.6);transition:opacity .3s,transform .45s var(--ease)}
.mini[data-stand="anruf"] .mini__ring,.mini[data-stand="fertig"] .mini__ring{opacity:1;transform:none}
.mini__fertig{position:absolute;left:50%;bottom:7%;display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 7px;border-radius:999px;background:var(--blau);color:#fff;font:700 .875rem/1 Archivo,sans-serif;white-space:nowrap;box-shadow:0 8px 18px -6px rgba(1,27,79,.6);transform:translate(-50%,12px) scale(.8);opacity:0;transition:opacity .3s,transform .45s var(--ease)}
.mini[data-stand="fertig"] .mini__fertig{opacity:1;transform:translate(-50%,0)}
.mini__stand{display:grid;justify-items:center;text-align:center;font-size:.875rem;line-height:1.25;color:var(--ged)}
.mini__stand b{font:700 .875rem/1.25 Archivo,sans-serif;color:var(--h)}

.person__kennung{margin-top:6px}

/* ============ 3 Nutzen ============ */
.nutzen{background:var(--wechsel)}
.nutzen__raster{display:grid;gap:0}
@media (min-width:900px){.nutzen__raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}}
/* Anrufe: jede Kundenfrage eine eigene Zeile; beim Scrollen wird aus dem klingelnden Telefon ein Haken */
.anrufe{display:grid;gap:8px}
.anrufe__status{margin-bottom:4px}
.klingel{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--linie);font:700 .875rem/1 Archivo,sans-serif;color:var(--h);white-space:nowrap}
.klingel i{width:10px;height:10px;border-radius:50%;background:#E5484D;animation:klingeln 1.2s ease-in-out infinite}
.klingel .r{display:none}
.nutzen.ruhig .klingel i{background:#35D07F;animation:none}
.nutzen.ruhig .klingel .k{display:none}
.nutzen.ruhig .klingel .r{display:inline}
@keyframes klingeln{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
.antwort{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:#fff;border:1px solid var(--linie);border-radius:14px}
.antwort__zeichen{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blau);color:#fff;transition:background-color .35s,color .35s}
.antwort__zeichen svg{grid-area:1/1;transition:opacity .3s,transform .45s var(--ease)}
.antwort__zeichen .tel{opacity:0;transform:scale(.4)}
.js .antwort:not(.on) .antwort__zeichen{background:#FDECEA;color:#B42318}
.js .antwort:not(.on) .antwort__zeichen .tel{opacity:1;transform:none}
.js .antwort:not(.on) .antwort__zeichen .ok{opacity:0;transform:scale(.4)}
.antwort__frage{font:700 1.0625rem/1.3 Archivo,sans-serif;color:var(--h);padding-top:1px}
.antwort__text{margin-top:3px;font-size:.9375rem;line-height:1.4;color:var(--t);transition:opacity .5s}
.antwort__text b{color:var(--h)}
.js .antwort:not(.on) .antwort__text{opacity:.3}
/* Google und KI in einer Karte mit Umschalter; ohne JavaScript stehen beide untereinander */
.nutzen__google{margin-top:30px;font-size:1.25rem}
.fund{margin-top:12px;background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.fund__wahl{display:none;grid-template-columns:1fr 1fr;gap:4px;margin:10px 10px 0;padding:4px;border-radius:10px;background:var(--wechsel)}
.js .fund__wahl{display:grid}
.fund__wahl button{min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--ged);font:700 .9375rem/1 Archivo,sans-serif;cursor:pointer;transition:background-color .2s,color .2s}
.fund__wahl button[aria-selected="true"]{background:#fff;color:var(--h);box-shadow:0 1px 3px rgba(1,27,79,.16)}
.fund__teil{padding:14px 16px 12px}
.fund__teil + .fund__teil{border-top:1px solid var(--linie)}
.js .fund__teil + .fund__teil{border-top:0}
.fund__teil[hidden]{display:none}
.js .fund__teil{animation:auf .35s var(--ease) both}
.suche__feld{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--linie-2);font-size:.9375rem;color:var(--h);margin-bottom:12px}
.treffer small{display:block;color:#1E6B3A;font-size:.875rem}
.treffer b{display:block;color:#1A3FB0;font:600 1.0625rem/1.3 "Source Sans 3",sans-serif;margin:2px 0 4px}
.treffer p,.ki__antwort{font-size:.9375rem;color:var(--t)}
.ki__frage{margin-left:auto;width:fit-content;max-width:90%;background:var(--wechsel);color:var(--h);padding:8px 12px;border-radius:12px;border-bottom-right-radius:4px;margin-bottom:10px;font-size:.9375rem}
.fund__fuss{display:grid;gap:2px;margin:0 16px;padding:10px 0 4px;border-top:1px solid var(--linie)}
.fund__link{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:44px;font:700 1rem/1.2 Archivo,sans-serif;color:var(--blau);text-decoration:none}
.fund__link:hover{text-decoration:underline;text-underline-offset:3px}

/* ============ 4 Paket ============ */
.preise__raster > *{min-width:0}
@media (min-width:1000px){.preise__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.preise__raster .kopf-text{position:sticky;top:calc(var(--kopf-h) + 32px)}}
.paket{max-width:760px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten);overflow:hidden}
.paket__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;padding:22px}
.paket__kopf h3{font-size:1.5rem}
.paket__kopf p{font-size:.9375rem;color:var(--t-m);margin-top:4px}
.paket__preis{text-align:right}
.paket__preis b{display:block;font:800 2.5rem/1 Archivo,sans-serif;color:#fff;letter-spacing:-.03em}
.paket__preis span{display:block;font-size:.9375rem;color:var(--t-m);margin-top:5px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45}
.tick{width:22px;height:22px;border-radius:50%;background:var(--blau);display:grid;place-items:center;margin-top:2px}
.paket__kern{padding:20px 22px}
.paket__kern .tick{transition:transform .45s var(--ease);transition-delay:calc(var(--i,0) * 120ms + 250ms)}
.js .paket:not(.ist-da) .paket__kern .tick{transform:scale(0)}
.extras-kurz{border:1px solid var(--linie);border-radius:12px;background:#fff}
.extras-kurz summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;font:700 1rem/1.25 Archivo,sans-serif;color:var(--h)}
.extras-kurz summary::-webkit-details-marker{display:none}
.extras-kurz summary::after{content:"+";flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--wechsel);color:var(--blau);display:grid;place-items:center;font:700 1.25rem/1 Archivo,sans-serif}
.extras-kurz[open] summary::after{content:"\2212"}
.extras-zahl{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#E3ECFF;color:var(--blau);font:700 .875rem/1 Archivo,sans-serif}
.extras-kurz .extras-liste{padding:0 14px 6px}
html:not(.js) [data-blatt-auf]{display:none}
.extras-liste{list-style:none;margin:0;padding:0}
.extras-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid #E6EBF3;font-size:.9375rem;color:var(--t);line-height:1.35}
.extras-liste li:first-child{border-top:0}
.extras-liste b{font:700 .9375rem Archivo,sans-serif;color:var(--h);white-space:nowrap}
.gruendung{padding:12px 14px;border-radius:10px;background:var(--sand);color:#4A300A;font-size:.9375rem;line-height:1.45}
.alle{border-top:1px solid #EDF0F5}
.alle summary,.aufgaben summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 22px;font:700 1rem Archivo,sans-serif;color:var(--blau)}
.alle summary::-webkit-details-marker,.aufgaben summary::-webkit-details-marker{display:none}
.alle summary::after,.aufgaben summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--wechsel);color:var(--blau);display:grid;place-items:center;font:700 1.25rem/1 Archivo,sans-serif}
.alle[open] summary::after,.aufgaben[open] summary::after{content:"\2212"}
.alle__inhalt{padding:4px 22px 20px;display:grid;gap:18px}
.alle__inhalt h4{margin-bottom:8px}
.paket__fuss{display:grid;gap:12px;padding:18px 22px 22px;background:#F8FAFD;border-top:1px solid #EDF0F5}
.paket__jahr{font-size:1rem;color:var(--t)}
.paket__jahr b{font-family:Archivo,sans-serif;color:var(--h)}
@media (min-width:600px){.paket__fuss .btn{width:auto;justify-self:start}}

/* ============ 5 Betreuung ============ */
.betreuung{background:var(--wechsel)}
/* Handy: alle drei Stufen mit Preis nebeneinander zur Auswahl, darunter die gewählte Stufe. Ohne JavaScript stehen die
   Karten untereinander, am Rechner nebeneinander. */
.stufenwahl{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:12px;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)}
.js .stufenwahl{display:grid}
.stufenwahl button{display:grid;justify-items:center;align-content:center;gap:3px;min-height:72px;padding:6px 4px;border:0;border-radius:10px;background:transparent;color:var(--h);cursor:pointer;font:700 .9375rem/1.1 Archivo,sans-serif;transition:background-color .25s,color .25s}
.stufenwahl button b{font:800 1.5rem/1 Archivo,sans-serif;letter-spacing:-.02em}
.stufenwahl button small{font:600 .875rem/1 "Source Sans 3",sans-serif;color:var(--ged)}
.stufenwahl button[aria-pressed="true"]{background:var(--marine);color:#fff}
.stufenwahl button[aria-pressed="true"] small{color:var(--t-m)}
.spur{display:grid;gap:12px}
.js .stufe:not(.gewaehlt){display:none}
.js .stufe.gewaehlt{animation:auf .35s var(--ease) both}
.stufe{display:grid;gap:12px;align-content:start;padding:22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten)}
.stufe h3{font-size:1.375rem}
.stufe__preis b{font:800 2.25rem/1 Archivo,sans-serif;color:var(--h);letter-spacing:-.03em}
.stufe__preis span{font-size:1rem;color:var(--ged)}
.stufe__jahr{font-size:.9375rem;color:var(--ged);margin-top:-6px}
.stufe__fuer{font-weight:600;color:var(--h)}
.stufe .liste li{font-size:1rem}
.betreuung__regeln{margin-top:22px;max-width:70ch}
/* Handy: Name steht schon in der Auswahl darüber, die Karte wird dadurch kürzer */
@media (max-width:899px){.js .stufe h3{display:none}.stufe{padding:18px 18px 16px;gap:10px}}
.stufe{transition:border-color .25s,box-shadow .25s}
.stufe__knopf{display:none;justify-self:start;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--blau);font:700 1rem Archivo,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){
  .js .stufenwahl{display:none}
  .spur{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .js .stufe:not(.gewaehlt){display:grid}
  .js .stufe.gewaehlt{animation:none}
  .stufe.gewaehlt{border-color:var(--blau);box-shadow:0 0 0 1.5px var(--blau),var(--schatten)}
  .js .stufe__knopf{display:inline-flex}
  .stufe.gewaehlt .stufe__knopf{color:var(--h);text-decoration:none;cursor:default}
}
.jahr-block{margin-top:26px}
.jahr__titel{font-size:1.25rem;margin-bottom:12px}
.jahr__titel small{font:500 .9375rem "Source Sans 3",sans-serif;color:var(--ged)}
.jahr__band{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:var(--marine);color:#fff;font-size:.9375rem;line-height:1.35;margin-bottom:8px}
.jahr__band i{flex:none;width:10px;height:10px;border-radius:50%;background:#35D07F;box-shadow:0 0 0 4px rgba(53,208,127,.2)}
/* Jahr: Monatsleiste in einer Zeile als Überblick, darunter Summen und bis zu drei Beispiele. Keine leeren Monatskarten;
   der Block ist so hoch wie die längste Stufe (per Skript gemessen), damit beim Umschalten nichts springt. */
.kalender{list-style:none;margin:0;padding:12px 6px 10px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;border-radius:12px;background:#fff;border:1px solid var(--linie)}
.kalender li{display:grid;justify-items:center;align-content:start;gap:6px;min-height:48px}
.kalender b{font:700 .875rem/1.2 Archivo,sans-serif;color:var(--h)}
.kalender li.ruhig b{color:var(--ged)}
.kalender .l{display:none}
@media (min-width:600px){.kalender{padding-inline:10px}.kalender .k{display:none}.kalender .l{display:inline}}
.marken{display:grid;justify-items:center;gap:4px}
.marken i,.jahr__zahlen i{display:block;width:16px;height:5px;border-radius:3px;background:var(--blau)}
.marken i{transform-origin:left;animation:marke .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.marken i.m-i,.jahr__zahlen i.m-i{background:#C98A2B}
.marken i.m-b,.jahr__zahlen i.m-b{background:transparent;box-shadow:inset 0 0 0 1.5px var(--h)}
.jahr__zahlen i.m-r{background:#C9D5EC}
@keyframes marke{from{transform:scaleX(0)}to{transform:none}}
.jahr__inhalt{margin-top:14px}
.jahr__zahlen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jahr__zahlen li{display:flex;align-items:center;gap:10px;font-size:1rem;line-height:1.4;color:var(--t)}
.jahr__zahlen i{flex:none}
.jahr__zahlen b{font-family:Archivo,sans-serif;color:var(--h)}
.jahr__beispiele{margin-top:14px;border-top:1px solid var(--linie-2)}
.jahr__beispiele p{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--linie-2);font-size:1rem;line-height:1.4;color:var(--t)}
.jahr__beispiele b{font:700 .9375rem/1.5 Archivo,sans-serif;color:var(--h)}
.jahr__mehr{margin-top:8px;font-size:.9375rem;color:var(--ged)}
@media (min-width:900px){
  .jahr__inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:40px;align-content:start}
  .jahr__beispiele{margin-top:0}
  .jahr__mehr{grid-column:2}
}

/* ============ 6 Ablauf ============ */
/* Projektstand wie eine Sendungsverfolgung: fünf Stationen, bei jeder steht, wer dran ist. Mit JavaScript ist eine Station
   zu sehen; alle liegen in derselben Rasterzelle, die Karte ist so hoch wie die längste. Ohne JavaScript untereinander. */
.ablauf__raster{display:grid}
@media (min-width:900px){.ablauf__raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:center}}
.stand{display:grid;gap:18px;max-width:560px;padding:16px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten)}
@media (min-width:480px){.stand{padding:20px}}
.stand__leiste{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stand__leiste::before,.stand__leiste::after{content:"";position:absolute;left:10%;top:19px;width:80%;height:2px;background:var(--linie-2)}
.stand__leiste::after{width:calc(80% * var(--p,0));background:var(--blau);transition:width .45s var(--ease)}
html:not(.js) .stand__leiste,html:not(.js) .stand__knoepfe{display:none}
.stand__leiste button{position:relative;z-index:1;width:100%;min-height:44px;display:grid;justify-items:center;gap:6px;padding:7px 0 0;border:0;background:none;cursor:pointer;font:600 .875rem/1.2 Archivo,sans-serif;color:#5F6980}
.stand__punkt{width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:2px solid #C3CBDA;background:#fff;display:grid;place-items:center;transition:background-color .3s,border-color .3s,box-shadow .3s}
.stand__punkt svg{opacity:0;transition:opacity .25s}
.stand__leiste button.fertig{color:var(--t)}
.stand__leiste button.fertig .stand__punkt{background:var(--blau);border-color:var(--blau)}
.stand__leiste button.fertig .stand__punkt svg{opacity:1}
.stand__leiste button[aria-current="step"]{color:var(--h)}
.stand__leiste button[aria-current="step"] .stand__punkt{border-color:var(--blau);box-shadow:0 0 0 5px rgba(1,85,253,.16)}
.stand__stationen{display:grid;gap:22px}
.js .stand__stationen{gap:0}
.js .station{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.js .station.an{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.station{display:grid;gap:8px;align-content:start}
.station .station__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font:700 .875rem/1.2 Archivo,sans-serif;color:var(--ged)}
.wer{padding:6px 12px;border-radius:999px;font:700 .875rem/1.2 Archivo,sans-serif}
.wer--sie{background:var(--sand);color:var(--warm)}
.wer--wir{background:#E3ECFF;color:var(--blau-h)}
.wer--beide{background:var(--wechsel);color:var(--h)}
.station h3{font-size:1.5rem;letter-spacing:-.015em}
.station p{color:var(--t)}
.station .station__weiter{display:flex;gap:8px;margin-top:2px;font-size:.9375rem;line-height:1.45;color:var(--h)}
.station__weiter svg{flex:none;margin-top:3px;color:var(--blau)}
.stand__knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stand__knoepfe .btn{min-height:48px;padding:0 12px;font-size:1rem}
.stand__knoepfe .btn:disabled{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){.js .station,.js .station.an,.stand__leiste::after{transition:none}}
.direkt h3{font-size:1.25rem}

/* ============ 7 Wir ============ */
.wir{padding-top:0}
.wir__raster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:900px){.wir__raster{grid-template-columns:1fr 1fr 1.2fr;gap:20px}}
.person{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--schatten)}
.person img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;background:var(--wechsel)}
@media (min-width:900px){.person img{aspect-ratio:4/5}}
.person__text{padding:14px 16px 16px;display:grid;gap:4px}
.person__text h3{font-size:1.0625rem}

@media (max-width:479px){.person__text{padding:12px 12px 14px}.person__text h3{font-size:1rem;letter-spacing:-.015em}}
.person__rolle{font:700 .875rem/1.3 Archivo,sans-serif;color:var(--blau)}
.person__text p{font-size:.9375rem;color:var(--ged);line-height:1.45}
.ort{grid-column:1/-1;display:grid;gap:14px;align-content:start;padding:4px 0 0}
@media (min-width:900px){.ort{grid-column:auto;padding:8px 0 0 8px}}
.ort h3{font-size:1.375rem}
/* Orte als Text, nicht als Kapseln: sie sind nicht antippbar und sollen nicht wie Knöpfe aussehen */
.orte{display:flex;flex-wrap:wrap;gap:2px 0;color:var(--h);font-weight:600;font-size:1rem;line-height:1.5}
.orte span:not(:last-child)::after{content:"·";margin:0 9px;color:var(--ged);font-weight:400}
.ort a{display:inline-flex;align-items:center;min-height:44px;font:800 1.25rem Archivo,sans-serif;color:var(--h);text-decoration:none}

/* ============ 8 Fragen ============ */
.fragen__raster{display:grid;gap:8px}
@media (min-width:900px){.fragen__raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}.fragen__raster .kopf-text{position:sticky;top:calc(var(--kopf-h) + 24px)}}
.frage{background:#fff;border:1px solid var(--linie);border-radius:12px;margin-bottom:10px}
.frage summary{list-style:none;cursor:pointer;position:relative;padding:17px 54px 17px 18px;font:700 1.0625rem/1.35 Archivo,sans-serif;color:var(--h)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--wechsel);color:var(--blau);display:grid;place-items:center;font:700 1.25rem/1 Archivo,sans-serif}
.frage[open] summary::after{content:"\2212"}
.frage p{padding:0 18px 18px}

/* ============ 9 Kontakt ============ */
.kontakt{padding-block:64px 72px}
.kontakt__raster{display:grid;gap:24px;align-items:start}
@media (min-width:1000px){.kontakt__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.kontakt .kopf-text p{color:var(--t-hell)}
.formular{background:#fff;color:var(--t);border-radius:var(--r-karte);padding:clamp(20px,4vw,34px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);display:grid;gap:18px}
.formular a{color:var(--blau)}
.formular fieldset{border:0;margin:0;padding:0;min-width:0}
.formular legend{font:700 .9375rem Archivo,sans-serif;color:var(--h);margin-bottom:8px;padding:0}
.anliegen{display:grid;gap:8px}
@media (min-width:700px){.anliegen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.anliegen label{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1.5px solid var(--linie-2);border-radius:var(--r-knopf);cursor:pointer;font-weight:600;color:var(--h);line-height:1.25;transition:border-color .2s,background-color .2s}
.anliegen label:has(input:checked){border-color:var(--blau);background:#F0F5FF}
.anliegen input{accent-color:var(--blau);width:20px;height:20px;margin:0;flex:none}
.felder{display:grid;gap:16px}
@media (min-width:700px){.felder{grid-template-columns:1fr 1fr}.feld--breit{grid-column:1/-1}}
.feld{display:grid;gap:6px;align-content:start}
.feld label{font:700 .9375rem Archivo,sans-serif;color:var(--h)}
.feld label small{font:500 .875rem "Source Sans 3",sans-serif;color:var(--ged)}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1.0625rem;color:var(--h);padding:12px 14px;border:1.5px solid #9FAEC9;border-radius:var(--r-knopf);background:#fff;transition:border-color .2s,box-shadow .2s}
.feld textarea{min-height:130px;resize:vertical;line-height:1.5}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(1,85,253,.18)}
.feld__fehler{display:none;color:#B42318;font-size:.9375rem;font-weight:600}
.feld.fehlt input,.feld.fehlt textarea{border-color:#B42318}
.feld.fehlt .feld__fehler{display:block}
.feld[hidden]{display:none}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__fuss{display:grid;gap:14px}
.formular__fuss .btn{width:100%}
@media (min-width:700px){.formular__fuss{grid-template-columns:1fr auto;align-items:center}.formular__fuss .btn{width:auto}}
.formular .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.danke{display:none;gap:10px;padding:22px;border-radius:12px;background:#EEF8F1;border:1px solid #BFE5CB}
.danke h3{color:#14532D}
.formular.gesendet .danke{display:grid}
.danke--vorschau{background:#FFF6E3;border-color:#E8C98F}
.danke--vorschau h3{color:#5A3A0C}
.danke a{font-weight:700;color:var(--blau)}
.nobr{white-space:nowrap}
.feld input,.feld textarea{scroll-margin:calc(var(--kopf-h) + 44px) 0 76px 0}
.formular.gesendet .formular__inhalt{display:none}
.fehlermeldung{display:none;padding:12px 14px;border-radius:10px;background:#FDECEA;color:#8A1C12;font-weight:600}
.fehlermeldung.zeigen{display:block}
.direkt{display:grid;gap:18px}
.direkt__weg small{display:block;font-size:.9375rem;color:var(--t-m)}
.direkt__weg a{display:inline-flex;align-items:center;min-height:44px;font:800 1.3125rem/1.3 Archivo,sans-serif;color:#fff;text-decoration:none;word-break:break-word}
.direkt__gesichter{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(138,180,255,.25)}
.direkt__gesichter span{display:flex;flex:none}
.direkt__gesichter img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--marine)}
.direkt__gesichter img + img{margin-left:-12px}
.direkt__gesichter p{font-size:.9375rem;color:var(--t-hell)}

/* Fuß */
/* Die Aktionsleiste ist über Kontakt und Fuß ausgeblendet, der Fuß braucht deshalb keinen Abstand für sie */
.fuss{background:var(--marine);color:var(--t-m);padding:40px 0 calc(40px + env(safe-area-inset-bottom));font-size:.9375rem;border-top:1px solid rgba(138,180,255,.14)}
@media (min-width:900px){.fuss{padding-bottom:48px}}
.fuss__raster{display:grid;gap:20px}
@media (min-width:900px){.fuss__raster{grid-template-columns:1.2fr 1fr 1fr}}
.fuss img{height:30px;width:auto;margin-bottom:12px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* Aktionsleiste Handy */
.aktion{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:var(--marine);border-top:1px solid rgba(138,180,255,.2);transform:translateY(110%);transition:transform .35s var(--ease)}
.aktion.zeigen{transform:none}
.aktion .btn{flex:1;min-height:50px;padding:0 12px;font-size:1rem}
/* Unter „Anrufen“ steht, ob gerade jemand rangeht (Telefonzeiten aus DATEN.zeiten) */
.aktion__anruf{flex-direction:column;gap:4px}
.aktion__anruf small{display:flex;align-items:center;gap:6px;white-space:nowrap;font:500 .875rem/1 "Source Sans 3",sans-serif;color:var(--t-hell)}
.aktion__anruf small::before{content:"";flex:none;width:8px;height:8px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--t-m)}
.aktion__anruf.erreichbar small::before{border-color:#3DD68C;background:#3DD68C}
@media (min-width:900px){.aktion{display:none}}

/* ============ Preisrechner als Blatt ============ */
.blatt{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:90dvh;padding:0;border:0;border-radius:18px 18px 0 0;background:#fff;color:var(--t);box-shadow:0 -20px 50px -20px rgba(1,27,79,.5);transform:translateY(100%);transition:transform .4s var(--ease)}
.blatt[open]{display:flex;flex-direction:column}
.blatt.offen{transform:none}
.blatt::backdrop{background:rgba(1,27,79,.5);opacity:0;transition:opacity .3s}
.blatt.offen::backdrop{opacity:1}
@media (min-width:900px){.blatt{inset:0;margin:auto;width:min(560px,92vw);height:fit-content;max-height:88vh;border-radius:16px;transform:translateY(24px);opacity:0;transition:transform .35s var(--ease),opacity .25s}.blatt.offen{transform:none;opacity:1}}
.blatt__kopf{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid #EDF0F5}
.blatt__kopf::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#D3DBEA}
@media (min-width:900px){.blatt__kopf::before{display:none}}
.blatt__kopf h2{font-size:1.375rem}
.zu{width:44px;height:44px;border-radius:50%;border:0;background:var(--wechsel);color:var(--h);font:700 1.5rem/1 Archivo,sans-serif;cursor:pointer}
.blatt__inhalt{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 22px;display:grid;gap:22px}
.blatt fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.blatt legend{font:700 1.0625rem Archivo,sans-serif;color:var(--h);margin-bottom:10px;padding:0}
.option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:13px 14px;background:#fff;border:1.5px solid var(--linie-2);border-radius:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.option:has(input:checked){border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.option input{width:22px;height:22px;accent-color:var(--blau);margin:0}
.option b{display:block;font:700 1rem/1.3 Archivo,sans-serif;color:var(--h)}
.option small{display:block;font-size:.9375rem;color:var(--ged);line-height:1.35}
.option__preis{grid-column:2;font:800 1rem Archivo,sans-serif;color:var(--h)}
.option--fest{cursor:default;background:#F8FAFD}
.dabei{font:700 .875rem Archivo,sans-serif;padding:5px 8px;border-radius:var(--r-etikett);background:#DDF2E4;color:#14532D}
.option--menge{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.option--menge .menge{grid-column:2;grid-row:1/3}
.option--menge .option__preis{grid-column:1}
.menge{display:inline-flex;align-items:center;gap:6px}
.menge button{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--linie-2);background:#fff;color:var(--h);font:700 1.25rem/1 Archivo,sans-serif;cursor:pointer}
.menge output{min-width:22px;text-align:center;font:800 1.0625rem Archivo,sans-serif;color:var(--h)}
.umschalter{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--wechsel);border-radius:12px}
.umschalter button{min-height:52px;border:0;background:transparent;border-radius:var(--r-knopf);padding:8px 10px;color:var(--h);cursor:pointer;display:grid;gap:2px;text-align:center;font:700 1rem/1.2 Archivo,sans-serif}
.umschalter button small{font:600 .875rem "Source Sans 3",sans-serif;color:var(--ged)}
.umschalter button[aria-pressed="true"]{background:var(--marine);color:#fff}
.umschalter button[aria-pressed="true"] small{color:var(--t-m)}
.blatt__angebot{padding:12px 14px;border-radius:10px;background:var(--sand);color:#4A300A;font-size:.9375rem;line-height:1.45}
.blatt__fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 12px;padding:12px 20px calc(14px + env(safe-area-inset-bottom));background:var(--marine);color:var(--t-m)}
/* Summen: einmalig und laufend getrennt, das erste Jahr als Zusammenfassung */
.summen{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0;padding-bottom:10px;border-bottom:1px solid rgba(138,180,255,.25)}
.summen dt{font-size:.875rem;line-height:1.2;color:var(--t-m)}
.summen dd{margin:2px 0 0;font:800 1.125rem/1.2 Archivo,sans-serif;color:#fff}
.summen small{display:block;font-size:.875rem;line-height:1.3;color:var(--t-m)}
.summen__jahr small{display:block;font-size:.875rem;line-height:1.3}
.summen__jahr b{display:block;font:800 1.625rem/1.1 Archivo,sans-serif;color:#fff;letter-spacing:-.02em}
.blatt__fuss .btn{min-height:48px;padding:0 16px;font-size:1rem}

/* Bewegung reduziert: alles steht im Endzustand */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-auf],.js .geraete{opacity:1;transform:none}
}


.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:1}
.hl-zeichen{position:absolute;z-index:0;pointer-events:none;display:block;height:auto;aspect-ratio:1;width:130vw;right:-48vw;top:-2%;opacity:.16}
.hl-n{fill:#fff}.hl-w{fill:#3D7BFF}
@media (min-width:900px){.hl-zeichen{width:auto;height:min(80vh,860px);right:4vw;top:max(64px,9vh);opacity:.21}}
@media (min-width:1000px){.hl-zeichen{top:-40px;height:660px;right:calc(max(32px, (100vw - 1200px) / 2) + (min(1200px, 100vw - 64px) - 48px) * .265 - 330px);opacity:.17}}
/* ===== Entwurf „klarer“ 30.09.2026: Gespräch, Telefonfragen, Google/KI, Paket, Betreuung, Ablauf ===== */
.nobr{white-space:nowrap}

/* ---------- 2 Gespräch ---------- */
.gs{position:relative}
.gs__raster{display:grid;gap:24px;align-items:start;align-content:start}
.gs__kopf{margin-bottom:0}
.gs__kopf b{color:var(--h);font-weight:600}
.gs-weg{list-style:none;margin:6px 0 0;padding:0;display:none;gap:10px}
.gs-weg li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#fff;border:2px solid var(--linie);color:var(--ged);font:700 1.0625rem/1.2 Archivo,sans-serif;transition:border-color .3s,background-color .3s,color .3s,opacity .3s}
.gs-weg li small{display:block;font:500 .875rem/1.3 "Source Sans 3",sans-serif;color:var(--ged)}
.gs-weg li .gs-nr{background:var(--linie-2);color:var(--ged)}
.gs-weg li.da{color:var(--h)}
.gs-weg li.da .gs-nr{background:var(--blau);color:#fff}
.gs-weg li.jetzt{border-color:var(--blau);background:#F2F6FF}
.gs-nr{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blau);color:#fff;font:800 .875rem/1 Archivo,sans-serif;transition:background-color .3s}
.gs-nr--hell{background:#fff;color:var(--blau)}

.gs__buehne{display:grid;gap:14px;justify-items:center;background:var(--grund)}
.gs-chat{width:100%;max-width:440px;background:#fff;border-radius:18px;box-shadow:var(--schatten);padding:12px 14px 14px;display:grid;gap:10px}
.gs-chat__kopf{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--linie)}
.gs-chat__kopf img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.gs-chat__kopf b{display:block;font:700 1.0625rem/1.2 Archivo,sans-serif;color:var(--h)}
.gs-chat__kopf small{display:block;font-size:.9375rem;color:var(--ged)}
.gs-chat__liste{display:grid;gap:8px}
.gs-paar{display:grid;gap:8px}
.gs-blase{max-width:88%;padding:10px 14px;border-radius:16px;font-size:1.0625rem;line-height:1.35;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gs-blase--frage{justify-self:start;background:#EEF1F7;color:var(--h);border-bottom-left-radius:5px}
.gs-blase--antwort{justify-self:end;display:flex;align-items:flex-start;gap:10px;background:var(--blau);color:#fff;border-bottom-right-radius:5px;font-weight:600}
.gs-blase--antwort .gs-nr{margin-top:-1px}
.gs-tippt{justify-self:end;display:none;gap:4px;padding:12px 14px;border-radius:16px;background:#E4ECFF}
.gs-tippt i{width:7px;height:7px;border-radius:50%;background:var(--blau);opacity:.35;animation:gs-tippt 1s infinite}
.gs-tippt i:nth-child(2){animation-delay:.15s}.gs-tippt i:nth-child(3){animation-delay:.3s}
@keyframes gs-tippt{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* Schritte (nur mit Skript und Bewegung; sonst steht alles da) */
.js .gs:not(.flach) .gs-paar:not(.frage-da){display:none}
.js .gs:not(.flach) .gs-paar:not(.antwort-da) .gs-blase--antwort{display:none}
.js .gs:not(.flach) .gs-paar.frage-da:not(.antwort-da) .gs-tippt{display:flex}
.gs-paar.neu .gs-blase{animation:gs-rein .45s var(--ease) both}
@keyframes gs-rein{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* Handy mit nachgebauter Seite */
.gs-handy{margin:0;display:grid;justify-items:center;gap:10px;width:100%}
/* Das Handy ist immer 230 px breit gebaut und wird als Ganzes verkleinert (--s), damit der Inhalt nicht umbricht */
.gs-handy__geraet{width:230px;margin-bottom:calc((var(--s,1) - 1) * 230px * 17 / 9);transform:scale(var(--s,1));transform-origin:top center;aspect-ratio:9/17;padding:7px;border-radius:34px;background:linear-gradient(145deg,#1D2640 0%,#0B1024 55%,#1A2238 100%);box-shadow:0 30px 60px -20px rgba(1,27,79,.45),0 10px 20px -10px rgba(1,27,79,.3),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.gs-handy__schirm{position:relative;height:100%;border-radius:27px;overflow:hidden;background:#FBFBFD;display:flex;flex-direction:column}
.gs-leiste{position:relative;flex:none;height:30px;display:flex;align-items:center;padding:4px 22px 0;font:700 .6875rem/1 "Source Sans 3",sans-serif;color:var(--h)}
.gs-leiste i{position:absolute;left:50%;top:7px;width:64px;height:18px;margin-left:-32px;border-radius:10px;background:#05070F}
.gs-seite{flex:1;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:16px;padding:16px 9px 12px}
.gs-wb-held{min-height:120px;align-content:end}
.gs-teil__leer{min-height:52px;align-content:center}
.gs-teil--start .gs-teil__leer{min-height:120px}
.gs-teil{position:relative;border-radius:12px;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.gs-teil__leer{display:grid;gap:6px;padding:12px;border-radius:12px;border:1.5px dashed #C9D2E3;background:#F3F5FA}
.gs-teil__leer i{display:block;height:9px;border-radius:5px;background:#DDE3EE}
.gs-teil__leer i.kurz{width:55%}
.gs-teil__inhalt{display:none}
.gs-teil.da .gs-teil__leer{display:none}
.gs-teil.da .gs-teil__inhalt{display:block}
.gs-teil.jetzt{box-shadow:0 0 0 3px var(--blau),0 10px 24px -8px rgba(1,85,253,.45);transform:scale(1.02);z-index:1}
.gs-teil.jetzt .gs-teil__inhalt{animation:gs-bau .5s var(--ease) both}
@keyframes gs-bau{from{opacity:0;transform:scale(.94)}}
.gs-marke{position:absolute;right:-4px;top:-9px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 2px;border-radius:20px;background:#fff;box-shadow:0 2px 8px rgba(1,27,79,.18);font:700 .6875rem/1 Archivo,sans-serif;color:var(--h)}
.gs-marke .gs-nr{width:18px;height:18px;font-size:.6875rem}
.gs-teil:not(.da) .gs-marke{background:#F3F5FA;box-shadow:none;color:#8C95AA}
.gs-teil:not(.da) .gs-marke .gs-nr{background:#C9D2E3}
/* Wolfsteich Bau, stark vereinfacht */
.gs-wb-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 14px 8px;color:#161616;border-bottom:1px solid #ECEFF4}
.gs-wb-logo{display:flex;align-items:center;gap:6px;font:800 .75rem/1 Archivo,sans-serif;color:#161616}
.gs-wb-logo i{width:16px;height:10px;border-radius:2px;background:#F2C200;box-shadow:inset 0 0 0 2px #161616}
.gs-wb-held{display:grid;gap:6px;padding:14px 12px 16px;border-radius:10px;background:linear-gradient(150deg,#1E1E1E 0%,#2B2B2B 60%,#3A3320 100%);color:#fff;border-bottom:4px solid #F2C200}
.gs-wb-held b{font:800 .9375rem/1.12 Archivo,sans-serif;letter-spacing:-.01em}
.gs-wb-held span{font-size:.6875rem;line-height:1.3;color:#D8D8D8}
.gs-teil--leistungen .gs-teil__inhalt{padding:10px;border-radius:12px;background:#fff;border:1px solid #E6E9F0}
.gs-teil--leistungen small{display:block;font:700 .625rem/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ged);margin-bottom:8px}
.gs-chips{display:flex;flex-wrap:wrap;gap:5px}
.gs-chips span{padding:4px 8px;border-radius:20px;background:#F0F2F7;font:600 .6875rem/1.1 "Source Sans 3",sans-serif;color:#161616}
.gs-chips span.an{background:#F2C200;color:#161616}
.gs-wb-knopf{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:30px;background:#F2C200;color:#161616;font:800 .75rem/1 Archivo,sans-serif}
.gs-fertig{position:absolute;left:50%;bottom:12px;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:30px;background:var(--blau);color:#fff;font:700 .875rem/1 Archivo,sans-serif;box-shadow:0 8px 18px -6px rgba(1,85,253,.6);transform:translate(-50%,20px) scale(.8);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.gs.fertig .gs-fertig,.gs.flach .gs-fertig,html:not(.js) .gs-fertig{transform:translate(-50%,0);opacity:1}
.gs-stand{min-height:2.7em;max-width:34ch;text-align:center;font:700 1rem/1.35 Archivo,sans-serif;color:var(--h)}
.gs-stand .gs-nr{width:22px;height:22px;font-size:.75rem;vertical-align:middle;position:relative;top:-2px;margin:0 2px}
.gs__hinweis{font-size:.9375rem;color:var(--ged)}
/* fliegende Antwort */
.gs-flug{position:fixed;z-index:60;pointer-events:none;margin:0;padding:10px 14px;border-radius:16px;background:var(--blau);color:#fff;font:600 1.0625rem/1.35 "Source Sans 3",sans-serif;box-shadow:0 18px 40px rgba(1,27,79,.3);transform-origin:0 0}

/* Handy: Frage und Antwort oben, Handy darunter; nur das aktuelle Paar bleibt stehen */
@media (max-width:899px){
  .js .gs:not(.flach) .gs-paar:not(.aktuell){display:none}
  .js .gs:not(.flach) .gs-chat{min-height:var(--chat-h,auto)}
  .gs__buehne{position:relative}
  .js .gs:not(.flach) .gs__buehne{position:sticky;top:var(--gs-top,70px);padding-block:6px}
}
@media (min-width:900px){
  .gs__raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px}
  .gs-weg{display:grid}
  .js .gs:not(.flach) .gs__kopf,.js .gs:not(.flach) .gs__buehne{position:sticky;top:var(--gs-top,100px)}
  .gs__buehne{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:28px;background:none}
  .gs-chat{max-width:none;min-height:430px;align-content:start}
  .gs-handy{width:230px}
  .gs-stand{max-width:none}
}
html:not(.js) .gs-weg li,.gs.flach .gs-weg li{color:var(--h)}
.gs.messen .gs__kopf,.gs.messen .gs__buehne{position:static!important}

/* ---------- 3a Telefonfragen ---------- */
.fr{background:var(--wechsel)}
.fr__spalten{display:none}
.fr__liste{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.fr-zeile{display:grid;gap:10px}
.fr-frage{justify-self:start;position:relative;display:flex;align-items:center;gap:10px;max-width:100%;padding:12px 18px 12px 12px;border-radius:22px;border-bottom-left-radius:6px;background:var(--marine);color:#fff;font:700 1.1875rem/1.25 Archivo,sans-serif;letter-spacing:-.01em;box-shadow:0 14px 30px -14px rgba(1,27,79,.55)}
.fr-frage__zeichen{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(138,180,255,.18);color:var(--hellblau)}
.fr-pfeil{justify-self:start;margin-left:22px;color:var(--blau);transform:rotate(90deg)}
.fr-antwort{display:grid;gap:8px}
.fr-karte{position:relative;display:grid;gap:6px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--linie),var(--schatten);color:var(--h);transition:box-shadow .4s}
.fr-karte small{font:700 .75rem/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ged)}
.fr-karte b{font:700 1.0625rem/1.3 "Source Sans 3",sans-serif}
.fr-offen{display:flex;align-items:center;gap:8px;font-weight:600;color:#1E7A45}
.fr-offen i{width:10px;height:10px;border-radius:50%;background:#22A35A}
.fr-chips{display:flex;flex-wrap:wrap;gap:6px}
.fr-chips span{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:30px;background:#F0F2F7;font-weight:600;font-size:.9375rem}
.fr-chips span.an{background:var(--blau);color:#fff}
.fr-zeile2{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--blau)}
.fr-zeile2 b{color:var(--h)}
.fr-foto{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1.5px dashed var(--linie-2);font-weight:600;color:var(--t)}
.fr-senden{justify-self:start;padding:9px 18px;border-radius:30px;background:#F2C200;color:#161616;font:800 .9375rem/1 Archivo,sans-serif}
.fr-haken{position:absolute;right:-10px;top:-10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blau);color:#fff;box-shadow:0 6px 14px rgba(1,85,253,.4)}
.fr-text{font-size:1rem;color:var(--t);padding-left:4px}
.fr-text b{color:var(--h)}
.fr-schluss{display:grid;gap:14px;justify-items:center;margin-top:36px}
.fr-meldung{display:flex;align-items:center;gap:14px;width:min(480px,100%);padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 24px 50px -20px rgba(1,27,79,.4),0 4px 12px rgba(1,27,79,.08)}
.fr-meldung__zeichen{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--blau);color:#fff}
.fr-meldung > div{flex:1;min-width:0}
.fr-meldung__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fr-meldung__kopf b{font:800 1.125rem/1.2 Archivo,sans-serif;color:var(--h)}
.fr-meldung__kopf span{font-weight:600;color:var(--ged);font-variant-numeric:tabular-nums}
.fr-meldung p:last-child{color:var(--t);font-weight:600}
.fr-feierabend{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:40px;background:var(--marine);color:#fff;font:800 1.25rem/1 Archivo,sans-serif;letter-spacing:-.01em}
.fr-feierabend svg{color:var(--hellblau)}
.fr__hinweis{margin-top:22px;text-align:center}
/* Einblenden */
.js .fr-zeile .fr-frage,.js .fr-zeile .fr-pfeil,.js .fr-zeile .fr-antwort{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .fr-zeile .fr-pfeil{transition-delay:.25s}
.js .fr-zeile .fr-antwort{transition-delay:.45s}
.js .fr-zeile .fr-haken{transform:scale(0);transition:transform .4s var(--ease) .85s}
.js .fr-zeile.da .fr-frage,.js .fr-zeile.da .fr-antwort{opacity:1;transform:none}
.js .fr-zeile.da .fr-pfeil{opacity:1;transform:rotate(90deg)}
.js .fr-zeile.da .fr-haken{transform:none}
.js .fr-zeile.da .fr-karte{box-shadow:0 0 0 2px var(--blau),var(--schatten)}
.js .fr-schluss .fr-meldung{opacity:0;transform:translateY(-30px) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .fr-schluss .fr-feierabend{opacity:0;transform:scale(.7);transition:opacity .4s var(--ease) .35s,transform .5s cubic-bezier(.34,1.56,.64,1) .35s}
.js .fr-schluss.da .fr-meldung,.js .fr-schluss.da .fr-feierabend{opacity:1;transform:none}
@media (min-width:900px){
  .fr__spalten{display:grid;grid-template-columns:minmax(0,5fr) 56px minmax(0,6fr);gap:0 18px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--linie-2)}
  .fr__spalten span{display:flex;align-items:center;gap:8px;font:700 .9375rem/1.2 Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ged)}
  .fr__spalten span:last-child{grid-column:3}
  .fr__liste{gap:22px}
  .fr-zeile{grid-template-columns:minmax(0,5fr) 56px minmax(0,6fr);gap:0 18px;align-items:center}
  .fr-frage{font-size:1.375rem;justify-self:end}
  .fr-pfeil{justify-self:center;margin:0;transform:none}
  .js .fr-zeile .fr-pfeil{transform:translateX(-10px)}
  .js .fr-zeile.da .fr-pfeil{transform:none}
  .fr-schluss{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:22px}
}

/* ---------- 3b Google und KI ---------- */
.gf__raster{display:grid;gap:18px}
.gf-karte{display:grid;align-content:start;gap:12px;padding:20px 18px 22px;border-radius:18px;background:#fff;color:var(--t);box-shadow:0 30px 60px -30px rgba(0,8,30,.6)}
.gf-karte h3{display:flex;align-items:center;gap:10px;font-size:1.375rem;color:var(--h)!important;padding-bottom:12px;border-bottom:1px solid var(--linie)}
.gf-karte__zeichen{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#EEF3FF;color:var(--blau)}
.gf-schritt{display:flex;align-items:center;gap:10px;font:700 1rem/1.2 Archivo,sans-serif;color:var(--h)}
.gf-schritt span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--marine);color:#fff;font-size:.875rem}
.gf-suche{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border-radius:30px;border:1.5px solid var(--linie-2);box-shadow:0 2px 8px rgba(1,27,79,.08);color:var(--ged);font-size:1.0625rem}
.gf-tippen{color:var(--h)}
.am-tippen::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--blau);animation:gf-cursor .8s steps(1) infinite}
@keyframes gf-cursor{50%{opacity:0}}
.gf-treffer{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#F6F8FC;border-left:4px solid var(--blau)}
.gf-treffer small{color:#1E7A45;font-size:.9375rem}
.gf-treffer b{font:600 1.125rem/1.3 "Source Sans 3",sans-serif;color:#1A0DAB}
.gf-treffer p{font-size:1rem;line-height:1.45}
.gf-frage{margin-left:8%;padding:12px 16px;border-radius:18px;border-bottom-right-radius:5px;background:var(--marine);color:#fff;font-weight:600;font-size:1.0625rem;line-height:1.4}
.gf-antwort{position:relative;padding:14px 16px 14px 50px;border-radius:14px;background:#F6F8FC;border-left:4px solid var(--blau);font-size:1.0625rem;line-height:1.5}
.gf-antwort b{color:var(--h)}
.gf-antwort__zeichen{position:absolute;left:14px;top:15px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--blau);color:#fff}
.gf__fuss{display:grid;gap:16px;margin-top:22px}
.gf-kennung{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.5;color:var(--t-hell);max-width:70ch}
.gf-kennung svg{flex:none;margin-top:3px;color:var(--hellblau)}
.gf__fuss .btn{justify-self:start;white-space:normal;text-align:left;min-height:52px}
.js .gf-karte .gf-ergebnis{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .gf-karte.fertig .gf-ergebnis{opacity:1;transform:none}
@media (min-width:900px){
  .gf__raster{grid-template-columns:1fr 1fr;gap:24px}
  .gf-karte{padding:26px 26px 28px}
  .gf__fuss{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}

/* ---------- 4 Paket ---------- */
.pr__raster{display:grid;gap:8px}
.pr-anleitung{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.pr-anleitung li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--h)}
.pr-nr{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blau);color:#fff;font:800 1rem/1 Archivo,sans-serif}
.pr-nr--hell{background:#fff;color:var(--marine)}
.pr-rechner{display:grid;gap:18px;min-width:0}
.pr-paket{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--schatten)}
.pr-paket__kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:20px 18px}
.pr-paket__kopf h3{font-size:1.5rem}
.pr-paket__kopf p{font-size:1rem;color:var(--t-m)}
.pr-dabei{display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:20px;background:rgba(53,208,127,.18);color:#7BE3AC!important;font:700 .875rem/1.2 Archivo,sans-serif!important;letter-spacing:.04em;text-transform:uppercase}
.pr-paket__preis{text-align:right}
.pr-paket__preis b{display:block;font:800 2rem/1 Archivo,sans-serif;color:#fff;letter-spacing:-.02em}
.pr-paket__preis span{display:block;margin-top:4px;font-size:.9375rem;color:var(--t-m)}
.pr-paket__kern{display:grid;gap:14px;padding:18px}
.pr-alle{border-radius:12px;border:2px solid var(--linie-2)}
.pr-alle summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px 0 16px;cursor:pointer;list-style:none;font:700 1.0625rem/1.2 Archivo,sans-serif;color:var(--h)}
.pr-alle summary::-webkit-details-marker{display:none}
.pr-alle summary i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#EEF3FF;color:var(--blau);transition:transform .3s var(--ease)}
.pr-alle[open] summary i{transform:rotate(45deg)}
.pr-alle[open]{border-color:var(--blau)}
.pr-alle__inhalt{display:grid;gap:18px;padding:4px 16px 18px}
.pr-alle__inhalt h4{margin-bottom:8px}
.pr-extras{margin:0;padding:18px;border:0;border-radius:18px;background:#fff;box-shadow:var(--schatten);display:grid;gap:12px;min-width:0}
.pr-extras legend{float:left;width:100%;display:flex;gap:12px;align-items:flex-start;margin-bottom:6px;padding:0;font:800 1.375rem/1.2 Archivo,sans-serif;color:var(--h)}
.pr-extras legend small{display:block;margin-top:4px;font:500 1rem/1.4 "Source Sans 3",sans-serif;color:var(--ged)}
.pr-extras legend + *{clear:both}
.pr-option{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"kasten text" ". preis";gap:4px 14px;align-items:start;padding:16px 16px 14px;border-radius:14px;border:2px solid var(--linie-2);background:#fff;cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.pr-option:hover{border-color:#9DB5E8}
.pr-option input{position:absolute;opacity:0;width:1px;height:1px}
.pr-kasten{grid-area:kasten;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:2.5px solid #76839F;background:#fff;color:transparent;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.pr-option__text{grid-area:text;display:grid;gap:3px}
.pr-option__text b{font:700 1.0625rem/1.3 Archivo,sans-serif;color:var(--h)}
.pr-option__text small{font-size:.9375rem;line-height:1.4;color:var(--ged)}
.pr-option__preis{grid-area:preis;font:800 1.125rem/1.2 Archivo,sans-serif;color:var(--h)}
.pr-option:has(input:checked),.pr-option.an{border-color:var(--blau);background:#F2F6FF;box-shadow:0 0 0 1px var(--blau)}
.pr-option input:checked + .pr-kasten{background:var(--blau);border-color:var(--blau);color:#fff;transform:scale(1.06)}
.pr-option input:focus-visible + .pr-kasten{outline:3px solid var(--blau);outline-offset:3px}
.pr-option--menge{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "preis" "menge";cursor:default}
.pr-option--menge.an{border-color:var(--blau)}
.pr-menge{grid-area:menge;display:flex;align-items:center;gap:10px;margin-top:6px}
.pr-menge button{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:2px solid var(--linie-2);background:#fff;color:var(--blau);cursor:pointer;transition:border-color .2s,background-color .2s}
.pr-menge button:hover{border-color:var(--blau)}
.pr-menge button:disabled{color:#B7C0D3;cursor:default;border-color:var(--linie)}
.pr-menge output{min-width:2ch;text-align:center;font:800 1.375rem/1 Archivo,sans-serif;color:var(--h)}
.pr-menge__wort{font-size:.9375rem;color:var(--ged)}
/* Festpreis bleibt beim Ankreuzen unten im Blick (am Handy über der Aktionsleiste) */
.pr-summe{position:sticky;bottom:calc(82px + env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;background:var(--marine);color:var(--t-hell);box-shadow:0 20px 40px -20px rgba(1,27,79,.6)}
.pr-summe__zahl{display:grid;gap:2px}
.pr-summe__zahl small{font-size:1rem;color:var(--t-m)}
.pr-summe__zahl b{font:800 2.25rem/1.05 Archivo,sans-serif;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-summe__zahl span{font-size:1rem;color:var(--t-hell)}
.pr-weiter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:14px;background:#fff;border:2px solid var(--linie-2);color:var(--t);text-decoration:none;transition:border-color .2s}
.pr-weiter:hover{border-color:var(--blau)}
.pr-weiter b{color:var(--h)}
.pr-weiter svg{flex:none;color:var(--blau)}
@media (max-width:399px){
  .pr-paket__kopf{grid-template-columns:auto minmax(0,1fr)}
  .pr-paket__preis{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px}
}
@media (max-width:599px){
  .pr-summe{padding:12px 16px;gap:12px}
  .pr-summe .pr-nr{display:none}
  .pr-summe__zahl{grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px}
  .pr-summe__zahl small{grid-column:1/-1;font-size:.9375rem}
  .pr-summe__zahl b{font-size:1.75rem}
  .pr-summe__zahl span{font-size:.9375rem;line-height:1.3}
}
@media (min-width:600px){
  .pr-option{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"kasten text preis"}
  .pr-option--menge{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"text menge preis";align-items:center}
  .pr-menge{margin-top:0}
  .pr-option__preis{text-align:right;white-space:nowrap}
  .pr-option:not(.pr-option--menge) .pr-option__preis{max-width:12ch;white-space:normal}
}
@media (min-width:900px){
  .pr__raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .pr__kopf{position:sticky;top:calc(var(--kopf-h) + 32px)}
  .pr-summe{bottom:16px}
  .pr-paket__kopf{padding:24px 26px}
  .pr-paket__kern{padding:22px 26px 26px}
  .pr-extras{padding:24px 26px}
  .pr-alle__inhalt{grid-template-columns:1fr 1fr}
  .pr-alle__inhalt .klein{grid-column:1/-1}
}

/* ---------- 5 Betreuung ---------- */
.bt-zahlweise{margin:0 0 22px;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.bt-zahlweise legend{grid-column:1/-1;margin-bottom:10px;padding:0;font:700 1.125rem/1.2 Archivo,sans-serif;color:var(--h)}
.bt-zahlweise label{position:relative;cursor:pointer}
.bt-zahlweise input{position:absolute;opacity:0}
.bt-zahlweise label > span{display:grid;gap:2px;min-height:64px;align-content:center;padding:10px 14px 10px 44px;border-radius:14px;border:2px solid var(--linie-2);background:#fff;transition:border-color .2s,background-color .2s}
.bt-zahlweise label > span::before{content:"";position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2.5px solid #76839F;background:#fff;transition:border .2s}
.bt-zahlweise b{font:700 1.0625rem/1.2 Archivo,sans-serif;color:var(--h)}
.bt-zahlweise small{font-size:.9375rem;color:var(--ged)}
.bt-zahlweise input:checked + span{border-color:var(--blau);background:#F2F6FF}
.bt-zahlweise input:checked + span::before{border:6px solid var(--blau)}
.bt-zahlweise input:focus-visible + span{outline:3px solid var(--blau);outline-offset:3px}
.bt-anleitung{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:600;color:var(--h)}
.bt-anleitung svg{flex:none;color:var(--blau)}
.bt-stufen{display:grid;gap:16px}
.bt-stufe{position:relative;display:grid;align-content:start;gap:8px;padding:0 0 22px;border-radius:18px;background:#fff;border:3px solid transparent;box-shadow:var(--schatten);overflow:hidden;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.bt-stufe > :not(.bt-stufe__wahl):not(.bt-stufe__eingabe){margin-inline:20px}
/* Das (unsichtbare) Auswahlfeld liegt über der ganzen Karte: Antippen irgendwo auf der Karte wählt die Stufe */
.bt-stufe__eingabe{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bt-stufe__wahl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 16px 16px 20px;margin-bottom:6px;cursor:pointer}
.bt-stufe__zeichen{display:grid;place-items:center;width:46px;height:46px;border-radius:14px}
.bt-stufe__name{font:800 1.5rem/1.1 Archivo,sans-serif;letter-spacing:-.01em}
.bt-knopf{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:30px;border:2px solid currentColor;font:700 .9375rem/1 Archivo,sans-serif;white-space:nowrap}
.bt-knopf i{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;transition:border-width .2s}
.bt-knopf .an{display:none}
.bt-stufe.gewaehlt .bt-knopf .an{display:inline}
.bt-stufe.gewaehlt .bt-knopf .aus{display:none}
.bt-stufe.gewaehlt .bt-knopf i{border-width:6px;background:#fff}
/* drei Stufen, drei Farben: hell, blau, marine */
.bt-stufe--1 .bt-stufe__wahl{background:#EEF2F9;color:var(--h)}
.bt-stufe--1 .bt-stufe__zeichen{background:#fff;color:var(--marine)}
.bt-stufe--2 .bt-stufe__wahl{background:var(--blau);color:#fff}
.bt-stufe--2 .bt-stufe__zeichen{background:rgba(255,255,255,.18);color:#fff}
.bt-stufe--3 .bt-stufe__wahl{background:var(--marine);color:#fff}
.bt-stufe--3 .bt-stufe__zeichen{background:rgba(138,180,255,.18);color:var(--hellblau)}
.bt-stufe.gewaehlt .bt-knopf{background:#fff;color:var(--blau);border-color:#fff}
.bt-stufe--1.gewaehlt .bt-knopf{background:var(--blau);border-color:var(--blau);color:#fff}
.bt-stufe--1.gewaehlt .bt-knopf i{background:var(--blau);border-color:#fff}
.bt-stufe.gewaehlt .bt-knopf i{border-color:var(--blau)}
.bt-stufe.gewaehlt{border-color:var(--blau);box-shadow:0 24px 50px -24px rgba(1,85,253,.55)}
.bt-stufe:not(.gewaehlt):hover{border-color:#9DB5E8}
.bt-stufe:has(.bt-stufe__eingabe:focus-visible){outline:3px solid var(--blau);outline-offset:4px}
/* schmale Handys: Knopf „Auswählen“ unter den Namen */
@media (max-width:419px){
  .bt-stufe__wahl{grid-template-columns:auto minmax(0,1fr)}
  .bt-knopf{grid-column:1/-1;justify-self:start}
}
.bt-stufe__preis{display:flex;align-items:baseline;gap:8px}
.bt-stufe__preis b{font:800 2.25rem/1 Archivo,sans-serif;color:var(--h);letter-spacing:-.02em}
.bt-stufe__preis span{font-size:1.0625rem;color:var(--ged)}
.bt-stufe__alt{font-size:.9375rem;color:var(--ged);margin-top:-4px}
.bt-stufe__fuer{font-weight:700;color:var(--h);margin:6px 0 4px}
.bt-jahr{margin-top:34px;padding:22px 18px;border-radius:18px;background:#fff;box-shadow:var(--schatten)}
.bt-jahr h3{font-size:1.375rem;margin-bottom:16px}
.bt-jahr h3 span{color:var(--blau)}
.bt-kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.bt-kacheln li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:#F2F6FF;animation:bt-kachel .45s var(--ease) both;animation-delay:calc(var(--k,0) * 60ms)}
@keyframes bt-kachel{from{opacity:0;transform:translateY(8px)}}
.bt-kacheln li > b{flex:none;min-width:64px;text-align:center;font:800 2.25rem/1 Archivo,sans-serif;color:var(--blau);letter-spacing:-.03em}
.bt-kacheln__haken{display:grid!important;place-items:center}
.bt-kacheln li > span{display:grid;gap:2px;font-size:.9375rem;line-height:1.35;color:var(--t)}
.bt-kacheln strong{font:700 1.0625rem/1.2 Archivo,sans-serif;color:var(--h)}
.bt-beispiel{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding-top:16px;border-top:1px solid var(--linie);font-size:1.0625rem;line-height:1.5}
.bt-beispiel svg{flex:none;margin-top:2px;color:var(--blau)}
.bt-beispiel b{color:var(--h)}
.bt-summe{margin-top:22px;padding:22px 18px;border-radius:18px;background:var(--marine);color:var(--t-hell)}
.bt-summe h3{color:#fff;font-size:1.375rem;margin-bottom:12px}
.bt-summe dl{margin:0;display:grid}
.bt-summe dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(138,180,255,.2)}
.bt-summe dt{font-weight:600;color:#fff}
.bt-summe dt small{display:block;font-weight:400;font-size:.9375rem;color:var(--t-m)}
.bt-summe dd{margin:0;font:800 1.25rem/1.1 Archivo,sans-serif;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.bt-summe__gesamt{border-bottom:0!important}
.bt-summe__gesamt dt{font:800 1.125rem/1.2 Archivo,sans-serif}
.bt-summe__gesamt dd{font-size:1.875rem;color:#fff}
.bt-summe__los{display:grid;gap:10px;margin-top:10px}
.bt-summe__los .btn{width:100%}
.bt-summe__los p{font-size:.9375rem;color:var(--t-m)}
@media (min-width:900px){
  .bt-stufen{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .bt-stufe.gewaehlt{transform:translateY(-6px)}
  .bt-jahr{padding:28px 30px}
  .bt-unten{display:grid}
  .bt-summe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 40px;align-items:end;padding:28px 30px}
  .bt-summe h3{grid-column:1/-1}
  .bt-summe__los{margin:0 0 12px}
}

/* ---------- 6 Ablauf ---------- */
.ab-liste{list-style:none;margin:0;padding:0;display:grid;gap:22px;position:relative}
.ab-schritt{position:relative;display:grid;gap:0;border-radius:18px;background:#fff;box-shadow:var(--schatten);overflow:hidden}
.ab-nr{position:absolute;left:14px;top:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blau);color:#fff;font:800 1.25rem/1 Archivo,sans-serif;box-shadow:0 0 0 5px rgba(255,255,255,.9),0 8px 18px -6px rgba(1,85,253,.6)}
.ab-bild{margin:0;aspect-ratio:16/10;background:#EEF2F9;overflow:hidden}
.ab-bild img{width:100%;height:100%;object-fit:cover}
.ab-text{display:grid;gap:8px;padding:18px 18px 20px}
.ab-text h3{font-size:1.375rem}
.ab-wer{display:inline-block;padding:5px 12px;border-radius:20px;font:700 .875rem/1.2 Archivo,sans-serif}
.ab-wer--sie{background:var(--sand);color:#6B4510}
.ab-wer--beide{background:#E4ECFF;color:#123B9C}
.ab-wer--wir{background:#DDF3E6;color:#1E6B3E}
.ab-danach{display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding-top:12px;border-top:1px solid var(--linie);font-weight:600;color:var(--h)}
.ab-danach svg{flex:none;margin-top:3px;color:var(--blau)}
.ab-los{display:grid;gap:14px;justify-items:start;margin-top:30px;padding:22px 20px;border-radius:18px;background:var(--wechsel)}
.ab-los p{font-size:1.0625rem}
.ab-los b{color:var(--h)}
/* Szenen im Stil des Werbevideos */
.ab-szene{position:relative;height:100%;display:flex;align-items:center;justify-content:center;gap:18px;padding:22px;background:radial-gradient(120% 90% at 80% 0%,rgba(1,85,253,.14),transparent 60%),linear-gradient(160deg,#EAF0FB,#F7F5F0);color:var(--h)}
.ab-szene small{display:block;font:700 .6875rem/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ged)}
.ab-mini-form{display:grid;gap:7px;width:150px;padding:14px;border-radius:14px;background:#fff;box-shadow:var(--schatten)}
.ab-mini-form i,.ab-text-blatt i,.ab-browser__seite i{display:block;height:9px;border-radius:5px;background:#E1E6F0}
.ab-mini-form i.kurz,.ab-text-blatt i.kurz,.ab-browser__seite i.kurz{width:60%}
.ab-mini-form span{margin-top:4px;padding:8px;border-radius:20px;background:var(--blau);color:#fff;text-align:center;font:700 .75rem/1 Archivo,sans-serif}
.ab-meldung{position:absolute;right:14px;top:18px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#fff;box-shadow:0 14px 30px -10px rgba(1,27,79,.35);font-size:.8125rem;line-height:1.2}
.ab-meldung svg{color:var(--blau)}
.ab-meldung b{display:block;font:800 .875rem/1.2 Archivo,sans-serif}
.ab-uhr{position:relative;display:grid;justify-items:center;gap:2px;padding:16px 20px;border-radius:18px;background:#fff;box-shadow:var(--schatten);color:var(--blau)}
.ab-uhr b{font:800 2.25rem/1 Archivo,sans-serif;color:var(--h)}
.ab-uhr small{color:var(--ged)}
.ab-angebot{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:var(--schatten);color:var(--blau)}
.ab-angebot b{display:block;font:800 1.125rem/1.1 Archivo,sans-serif;color:var(--h)}
.ab-angebot__haken{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blau);color:#fff}
.ab-blasen{display:grid;gap:6px;width:150px}
.ab-blasen span{padding:8px 10px;border-radius:12px;border-bottom-left-radius:4px;background:#fff;font-size:.75rem;line-height:1.3;box-shadow:0 4px 12px rgba(1,27,79,.08)}
.ab-blasen span.r{justify-self:end;background:var(--blau);color:#fff;border-radius:12px;border-bottom-right-radius:4px}
.ab-szene__pfeil{color:var(--blau)}
.ab-text-blatt{position:relative;display:grid;gap:7px;width:120px;padding:14px;border-radius:12px;background:#fff;box-shadow:var(--schatten)}
.ab-text-blatt svg{position:absolute;right:-10px;bottom:-10px;padding:6px;box-sizing:content-box;border-radius:50%;background:var(--blau);color:#fff}
.ab-browser{width:min(240px,70%);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--schatten)}
.ab-browser__leiste{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#E9EDF5}
.ab-browser__leiste > i{width:7px;height:7px;border-radius:50%;background:#C3CBDA}
.ab-browser__leiste span{flex:1;margin-left:6px;padding:3px 8px;border-radius:10px;background:#fff;font-size:.6875rem;color:var(--ged)}
.ab-browser__seite{display:grid;gap:7px;padding:14px}
.ab-browser__seite i.gross{height:34px;border-radius:8px;background:linear-gradient(120deg,#0A2A66,#0155FD)}
.ab-freigabe,.ab-online{position:absolute;right:16%;bottom:16%;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:30px;background:var(--blau);color:#fff;font:800 .875rem/1 Archivo,sans-serif;box-shadow:0 10px 22px -8px rgba(1,85,253,.7)}
.ab-online{background:#1E8A4C;box-shadow:0 10px 22px -8px rgba(30,138,76,.7)}
.ab-online i{width:9px;height:9px;border-radius:50%;background:#7BE3AC;box-shadow:0 0 0 4px rgba(123,227,172,.3)}
@media (min-width:760px){
  .ab-liste{gap:26px}
  .ab-liste::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(var(--blau),#9DB5E8)}
  .ab-schritt{grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-left:64px;align-items:stretch}
  .ab-nr{left:-64px;top:26px;box-shadow:0 0 0 6px var(--grund)}
  .ab-bild{aspect-ratio:auto;min-height:230px}
  .ab-text{align-content:center;padding:26px 30px}
  .ab-los{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-left:64px}
}
@media (min-width:1100px){
  .ab-schritt:nth-child(even) .ab-bild{order:2}
}
.ab-schritt{overflow:visible}
.ab-schritt > .ab-bild{border-radius:18px 18px 0 0}
@media (min-width:760px){
  .ab-schritt > .ab-bild{border-radius:18px 0 0 18px}
}
@media (min-width:1100px){
  .ab-schritt:nth-child(even) > .ab-bild{border-radius:0 18px 18px 0}
}

/* ===== Nacharbeit nach der Prüfung (30.09. abends) ===== */
/* Schritte links sind Wegweiser, keine Karten zum Anklicken */
.gs-weg li{padding:8px 0 8px 14px;border:0;border-left:3px solid transparent;border-radius:0;background:none}
.gs-weg li.jetzt{border-left-color:var(--blau);background:linear-gradient(90deg,#E4ECFF,rgba(228,236,255,0))}
.gs-weg li .gs-nr{background:var(--linie-2);color:#3E4763}
/* Schildchen im Mini-Handy: größer und dunkler, auch solange der Teil noch fehlt */
.gs-marke{font-size:.75rem}
.gs-teil:not(.da) .gs-marke{background:#E6EAF2;color:#3E4763}
.gs-teil:not(.da) .gs-marke .gs-nr{background:#6E7A96}
/* Wenn die Szene nicht mitlaufen kann (kleine Handys, ohne Skript): „wird zu“ direkt unter der Antwort */
.gs-wirdzu{display:none;justify-self:end;align-items:center;gap:6px;margin:-2px 4px 4px 0;font-weight:600;font-size:.9375rem;color:var(--blau)}
.gs-wirdzu b{color:var(--h)}
.gs.flach .gs-wirdzu,html:not(.js) .gs-wirdzu{display:flex}
html:not(.js) .gs-teil__leer{display:none}
html:not(.js) .gs-teil__inhalt{display:block}
/* Handy: Chatkopf knapper, damit das Mini-Handy größer werden kann */
@media (max-width:899px){
  .gs-chat{padding:10px 12px 12px;gap:8px}
  .gs-chat__kopf{padding-bottom:8px}
  .gs-chat__kopf img{width:32px;height:32px}
  .gs-chat__kopf div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .gs-stand{min-height:0}
}
/* „Auch nach Feierabend.“ ist eine Aussage, kein Knopf */
.fr-feierabend{padding:0;background:none;color:var(--h);font-size:1.375rem}
.fr-feierabend svg{color:var(--blau)}
/* Tastatur: fokussierte Kästchen und Plus/Minus nicht hinter der mitlaufenden Preisleiste verstecken */
.pr-option input,.pr-menge button{scroll-margin-bottom:230px}
@media (min-width:900px){.pr-option input,.pr-menge button{scroll-margin-bottom:160px}}
/* wenig Bildschirmhöhe (z. B. 320 × 568): Preisleiste läuft nicht mit, sonst liegen drei Leisten übereinander */
@media (max-height:699px){.pr-summe{position:relative;bottom:auto}}
/* antippen am Handy, anklicken am Rechner */
.nur-rechner{display:none}
@media (hover:hover) and (pointer:fine){.nur-handy{display:none}.nur-rechner{display:inline}}
/* Zahlweise steht jetzt unter den Stufen */
.bt-zahlweise{margin:30px 0 0}
/* Fokus sichtbar auch ohne :has() und auf dunklem Grund */
.bt-stufe__eingabe:focus-visible + .bt-stufe__wahl{outline:3px solid var(--h);outline-offset:-3px}
.bt-summe :focus-visible{outline-color:#fff}
/* ohne Skript: keine Knöpfe und Summen, die nichts tun */
html:not(.js) .bt-knopf,html:not(.js) .bt-summe,html:not(.js) .bt-anleitung{display:none}
html:not(.js) .bt-stufe:has(.bt-stufe__eingabe:checked){border-color:var(--blau)}
/* Hinweis im Formular nach „Mit dieser Auswahl anfragen“ */
.auswahl-hinweis{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#E4ECFF;color:var(--h);font-weight:600;line-height:1.45}
.auswahl-hinweis svg{flex:none;margin-top:2px;color:var(--blau)}
/* Ablauf Schritt 1: Meldung nicht über das Formular legen */
.ab-szene--1{justify-content:flex-start;padding-left:9%}
/* Aktionsleiste unter 360 px: Beschriftung darf umbrechen statt abgeschnitten zu werden */
@media (max-width:359px){.aktion .btn{white-space:normal;text-align:center;line-height:1.15;padding:0 8px;font-size:.9375rem}}



/* ---------- Betreuung als Vergleichstabelle (Disney-Übernahme 30.08.): drei Stufen nebeneinander ---------- */
.bt-tabelle{border-radius:18px;background:#fff;box-shadow:var(--schatten)}
.bt-koepfe{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;border-radius:18px 18px 0 0;background:#fff;border-bottom:1px solid var(--linie)}
.bt-koepfe__leer{display:none}
.bt-spalte{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:10px 4px;border-radius:12px;border:2px solid var(--linie-2);background:#fff;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.bt-spalte:hover{border-color:var(--blau)}
.bt-spalte input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bt-spalte__zeichen{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EEF2F9;color:var(--marine)}
.bt-spalte__zeichen svg{width:20px;height:20px}
.bt-spalte__name{font:800 1.0625rem/1.1 Archivo,sans-serif;color:var(--h)}
.bt-spalte__preis b{display:block;font:800 1.25rem/1.1 Archivo,sans-serif;color:var(--h);letter-spacing:-.02em;white-space:nowrap}
.bt-spalte__preis small{display:block;font-size:.875rem;color:var(--ged)}
.bt-spalte__preis .bt-spalte__jahr{margin-top:4px;font-size:.8125rem;white-space:nowrap}
.bt-spalte__preis .bt-spalte__jahr[hidden]{display:none}
.bt-wahl{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:5px 9px;border-radius:20px;border:2px solid var(--blau);color:var(--blau);font:700 .875rem/1 Archivo,sans-serif}
.bt-wahl i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;transition:border-width .2s}
.bt-wahl .an{display:none}
.bt-spalte.gewaehlt{border-color:var(--blau);background:var(--blau)}
.bt-spalte.gewaehlt .bt-spalte__name,.bt-spalte.gewaehlt .bt-spalte__preis b{color:#fff}
.bt-spalte.gewaehlt .bt-spalte__preis small{color:#E1E9FF}
.bt-spalte.gewaehlt .bt-spalte__zeichen{background:rgba(255,255,255,.2);color:#fff}
.bt-spalte.gewaehlt .bt-wahl{background:#fff;border-color:#fff}
.bt-spalte.gewaehlt .bt-wahl i{border-width:5px}
.bt-spalte.gewaehlt .bt-wahl .an{display:inline}
.bt-spalte.gewaehlt .bt-wahl .aus{display:none}
.bt-spalte input:focus-visible ~ .bt-wahl{outline:3px solid var(--h);outline-offset:3px}
html:not(.js) .bt-spalte:has(input:checked){border-color:var(--blau)}
.bt-zeilen{list-style:none;margin:0;padding:0 8px 6px}
.bt-zeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 6px;padding:10px 0;border-bottom:1px solid var(--linie)}
.bt-zeile:last-child{border-bottom:0}
.bt-zeile__was{grid-column:1/-1;margin-bottom:6px;text-align:center;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--t)}
.bt-zelle{display:grid;place-items:center;min-height:34px;padding:4px 2px;border-radius:8px;text-align:center;font:700 .875rem/1.2 Archivo,sans-serif;color:var(--h);transition:background-color .2s}
.bt-zelle--ja{color:var(--blau)}
.bt-zelle--nein{color:#8C95AA;font-size:1.25rem}
.bt-tabelle[data-stufe="0"] .bt-zelle:nth-of-type(1),.bt-tabelle[data-stufe="1"] .bt-zelle:nth-of-type(2),.bt-tabelle[data-stufe="2"] .bt-zelle:nth-of-type(3){background:#E8EFFF}
.bt-fuer{margin-top:12px;font-size:1.0625rem;color:var(--t)}
.bt-fuer b{color:var(--h)}
/* nur Handy-Fassung: Beispiel steht allein, Zahlweise näher an der Tabelle */
.bt > .wrap > .bt-beispiel{margin-top:18px;padding-top:0;border-top:0}
@media (max-width:899px){.bt-zahlweise{margin-top:22px}}
@media (min-width:768px){
  .bt-koepfe,.bt-zeile{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:0 10px}
  .bt-koepfe{padding:12px 14px}
  .bt-koepfe__leer{display:block}
  .bt-zeilen{padding:0 14px 8px}
  .bt-zeile{align-items:center;padding:8px 0}
  .bt-zeile__was{grid-column:auto;margin:0;text-align:left;font-size:1rem}
  .bt-spalte{padding:14px 8px}
  .bt-spalte__name{font-size:1.25rem}
  .bt-spalte__preis b{font-size:1.5rem}
}

/* ---------- Paket: Erweiterungen als kompakte Zeilen, Preis rechts ---------- */
/* nur unter 900 px, am Rechner bleibt das Paket wie im ersten Entwurf */
@media (max-width:899px){
.pr-option{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"kasten text preis";align-items:center;gap:2px 12px;padding:12px 14px}
.pr-kasten{width:28px;height:28px;border-radius:7px}
.pr-option__preis{text-align:right;white-space:nowrap;font-size:1.0625rem}
.pr-option--menge{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text preis" "menge menge"}
.pr-menge{margin-top:4px}
}
@media (min-width:600px) and (max-width:899px){.pr-option--menge{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"text menge preis"}.pr-menge{margin-top:0}}
@media (max-width:599px){
  .pr-anleitung{display:none}
  .pr-paket__kern,.pr-extras{padding:14px}
  .pr-extras legend{font-size:1.25rem}
  .pr-option__text small{font-size:.9375rem;line-height:1.35}
}

/* ---------- Gespräch am Handy: knapper; Fassungen B und C mit Knopf statt Scrollweg ---------- */
.gs.knopf .gs__buehne{position:static!important}
.gs-steuer{display:flex;justify-content:center;width:100%}
.gs-steuer[hidden]{display:none}
.gs-steuer .btn{width:100%;max-width:380px}
@media (max-width:899px){
  .gs__raster{gap:16px}
  .gs__hinweis{font-size:.875rem;line-height:1.45}
}

/* ---------- Fassung A „Kompakt“: alles untereinander, gestrafft ---------- */
@media (max-width:899px){
  html[data-v="a"] .fr__liste{gap:16px}
  html[data-v="a"] .fr-zeile{gap:0}
  html[data-v="a"] .fr-pfeil{display:none}
  html[data-v="a"] .fr-frage{position:relative;z-index:1;margin:0 0 -12px 8px;padding:8px 14px 8px 8px;font-size:1.0625rem}
  html[data-v="a"] .fr-frage__zeichen{width:28px;height:28px}
  html[data-v="a"] .fr-karte{padding:20px 14px 12px}
  html[data-v="a"] .fr-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-v="a"] .fr-schluss{margin-top:22px}
  html[data-v="a"] .gf-karte{padding:16px 14px;gap:9px}
  html[data-v="a"] .gf-karte h3{font-size:1.1875rem;padding-bottom:8px}
}
@media (min-width:600px) and (max-width:899px){
  html[data-v="a"] .fr__liste,html[data-v="a"] .gf__raster{grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:759px){
  html[data-v="a"] .ab-bild{display:none}
  html[data-v="a"] .ab-liste{gap:20px}
  html[data-v="a"] .ab-liste::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(var(--blau),#9DB5E8)}
  html[data-v="a"] .ab-schritt{grid-template-columns:44px minmax(0,1fr);gap:0 14px;background:none;box-shadow:none;border-radius:0}
  html[data-v="a"] .ab-nr{position:relative;left:auto;top:auto;box-shadow:0 0 0 5px var(--grund)}
  html[data-v="a"] .ab-text{padding:4px 0 0;gap:6px}
  html[data-v="a"] .ab-text h3{font-size:1.1875rem}
  html[data-v="a"] .ab-danach{padding-top:8px}
}

/* ---------- Fassung B „Wischen“: Fragen, Google/KI und Ablauf als Wischreihen ---------- */
.wisch-steuer{display:none}
@media (max-width:899px){
  html[data-v="b"] [data-wisch]{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding:6px var(--rand) 12px;scroll-padding-inline:var(--rand)}
  html[data-v="b"] [data-wisch]::-webkit-scrollbar{display:none}
  /* position:relative: sonst entkommen absolut gesetzte Vorlesetexte (.nur-sr) dem Beschnitt und machen die Seite breit */
  html[data-v="b"] [data-wisch]{position:relative}
  html[data-v="b"] [data-wisch] > *{position:relative;scroll-snap-align:start;min-width:0}
  html[data-v="b"] .wisch-steuer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
  html[data-v="b"] .fr-zeile{align-content:start;padding:14px;border-radius:18px;background:#fff;box-shadow:var(--schatten)}
  html[data-v="b"] .fr-karte{box-shadow:0 0 0 2px var(--linie)}
  html[data-v="b"] .fr-frage{font-size:1.0625rem}
  html[data-v="b"] .ab-liste::before{display:none}
  html[data-v="b"] .ab-schritt{margin-left:0;grid-template-columns:none;align-content:start}
  /* Nummer sitzt auf der Kante zwischen Bild (180 px hoch) und Text, verdeckt so nichts im Bild */
  html[data-v="b"] .ab-nr{left:16px;top:158px}
  html[data-v="b"] .ab-bild{aspect-ratio:auto;height:180px;min-height:0;border-radius:18px 18px 0 0}
  html[data-v="b"] .ab-schritt .ab-text{padding-top:30px}
  html[data-v="b"] .ab-schritt:nth-child(even) .ab-bild{order:0}
  html[data-v="b"] .ab-text{padding:16px 16px 18px}
  html[data-v="b"] .ab-los{margin-left:0}
}
@media (min-width:600px) and (max-width:899px){html[data-v="b"] [data-wisch]{grid-auto-columns:47%}}
.wisch-stand{display:grid;gap:6px;font-weight:700;color:var(--h)}
.wisch-balken{display:block;width:120px;height:4px;border-radius:4px;background:var(--linie-2)}
.wisch-balken i{display:block;height:100%;width:25%;border-radius:4px;background:var(--blau);transition:width .3s var(--ease)}
.wisch-pfeile{display:flex;gap:8px}
.wisch-pfeile button{display:grid;place-items:center;width:48px;height:48px;padding:0 0 3px;border-radius:50%;border:2px solid var(--linie-2);background:#fff;color:var(--blau);font:700 1.75rem/1 Archivo,sans-serif;cursor:pointer}
.wisch-pfeile button:disabled{opacity:.4;cursor:default}
.dunkel .wisch-stand{color:#fff}
.dunkel .wisch-balken{background:rgba(169,184,214,.35)}
.dunkel .wisch-pfeile button{background:transparent;color:#fff;border-color:rgba(169,184,214,.5)}

/* ---------- Fassung C „Aufklappen“: Fragen, Google/KI und Ablauf zum Aufklappen ---------- */
html[data-v="c"] details > summary{list-style:none;cursor:pointer}
html[data-v="c"] details > summary::-webkit-details-marker{display:none}
html[data-v="c"] .fr__spalten{display:none!important}
html[data-v="c"] .fr__liste{gap:12px}
html[data-v="c"] .fr-zeile{display:block}
.fr-auf{border-radius:18px;background:#fff;box-shadow:var(--schatten);overflow:hidden}
html[data-v="c"] .fr-auf .fr-frage{display:flex;width:100%;max-width:none;min-height:60px;border-radius:0;box-shadow:none;font-size:1.125rem}
.fr-frage__text{flex:1}
.fr-auf__knopf{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:20px;background:rgba(255,255,255,.16);font:700 .875rem/1 Archivo,sans-serif;color:#fff}
.fr-auf__knopf svg,.gf-auf__knopf svg,.ab-auf__knopf svg{transition:transform .3s var(--ease)}
.fr-auf[open] .fr-auf__knopf svg,.gf-auf[open] .gf-auf__knopf svg,.ab-auf[open] .ab-auf__knopf svg{transform:rotate(45deg)}
.fr-auf .fr-antwort{padding:16px 14px 14px}
.gf-auf{display:block}
.gf-auf summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.gf-auf summary h3{padding-bottom:0;border-bottom:0}
.gf-auf > :not(summary){margin-top:12px}
.gf-auf__knopf{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#EEF3FF;color:var(--blau)}
html[data-v="c"] .ab-liste{gap:12px}
html[data-v="c"] .ab-liste::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(var(--blau),#9DB5E8)}
html[data-v="c"] .ab-schritt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;margin-left:0;background:none;box-shadow:none;border-radius:0}
html[data-v="c"] .ab-nr{position:relative;left:auto;top:8px;box-shadow:0 0 0 5px var(--grund)}
.ab-auf{border-radius:16px;background:#fff;box-shadow:var(--schatten);overflow:hidden}
.ab-auf summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:12px 14px}
.ab-auf__kopf{display:grid;gap:6px;justify-items:start}
.ab-auf__kopf h3{font-size:1.1875rem}
.ab-auf__knopf{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#EEF3FF;color:var(--blau)}
html[data-v="c"] .ab-auf .ab-bild{display:none}
html[data-v="c"] .ab-auf .ab-text{padding:0 14px 14px;gap:6px}
html[data-v="c"] .ab-los{margin-left:0}
@media (min-width:700px){
  html[data-v="c"] .fr__liste{grid-template-columns:1fr 1fr;align-items:start}
  html[data-v="c"] .gf__raster{grid-template-columns:1fr 1fr;align-items:start}
}
@media (min-width:760px){
  html[data-v="c"] .ab-auf .ab-bild{display:block;aspect-ratio:16/6;min-height:0;border-radius:0}
  html[data-v="c"] .ab-auf .ab-text{padding:14px 18px 18px}
}

/* ---------- zweite Kürzungsrunde ---------- */
/* Tabellenköpfe stehen fest (vier Zeilen brauchen kein Mitlaufen) */
.bt-koepfe{position:static}
/* Zahlweise einzeilig */
@media (max-width:899px){.bt-zahlweise label > span{min-height:54px;padding:8px 12px 8px 42px}.bt-zahlweise small{font-size:.875rem;line-height:1.25}}
.pr-kachel-hinweis{display:none}
@media (max-width:599px){
  /* Erweiterungen als Kacheln in zwei Spalten: Kästchen, Name, Preis; Beschreibung nur ab 600 px */
  .pr-extras{grid-template-columns:1fr 1fr;gap:10px}
  .pr-extras legend{grid-column:1/-1}
  .pr-option{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"kasten ." "text text" "preis preis";align-items:start;align-content:start;gap:8px 10px;padding:12px}
  .pr-option__text small{display:none}
  .pr-option__text b{font-size:1rem;line-height:1.25;hyphens:auto}
  .pr-option__preis{text-align:left}
  .pr-option--menge{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text preis" "menge menge"}
  .pr-kachel-hinweis{display:block;grid-column:1/-1;order:10;font-size:.9375rem;line-height:1.4;color:var(--ged)}
  /* paarweise Kacheln: Umzug und „Weitere Leistung“ (mit Anzahl) über die volle Breite ans Ende */
  .pr-extras label.pr-option:last-of-type{grid-column:1/-1;order:8;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"kasten text preis";align-items:center}
  .pr-option--menge{order:9}
  .pr-menge__wort{display:none}
  .pr-paket__kern{gap:10px}
  .pr-paket__kern .liste{gap:6px}
  .pr-weiter{padding:12px 14px}
  /* Betreuung knapper */
  .bt-zeile{padding:8px 0}
  .bt-zeile__was{font-size:.9375rem;margin-bottom:4px}
  .bt-summe{padding:16px 14px}
  .bt-summe h3{font-size:1.1875rem;margin-bottom:4px}
  .bt-summe dl > div{padding:8px 0}
  .bt-summe__gesamt dd{font-size:1.5rem}
  .betreuung__regeln{margin-top:14px}
}



/* ---------- Betreuung: jede Stufe behält ihre Farbe, die Wahl zeigt ein Ring und „Gewählt“ ---------- */
.bt-koepfe{padding:12px 10px 10px;gap:8px}
.bt-spalte{border:0}
.bt-spalte.bt-spalte--1{background:#EEF2F9}
.bt-spalte.bt-spalte--2{background:var(--blau)}
.bt-spalte.bt-spalte--3{background:var(--marine)}
.bt-spalte--1 .bt-spalte__name,.bt-spalte--1 .bt-spalte__preis b{color:var(--h)!important}
.bt-spalte--2 .bt-spalte__name,.bt-spalte--2 .bt-spalte__preis b,.bt-spalte--3 .bt-spalte__name,.bt-spalte--3 .bt-spalte__preis b{color:#fff}
.bt-spalte--1 .bt-spalte__preis small{color:var(--ged)!important}
.bt-spalte--2 .bt-spalte__preis small{color:#E1E9FF}
.bt-spalte--3 .bt-spalte__preis small{color:var(--t-hell)}
.bt-spalte--1 .bt-spalte__zeichen{background:#fff!important;color:var(--marine)!important}
.bt-spalte--2 .bt-spalte__zeichen{background:rgba(255,255,255,.2);color:#fff}
.bt-spalte--3 .bt-spalte__zeichen{background:rgba(138,180,255,.2);color:var(--hellblau)}
.bt-wahl{font-size:.9375rem;border-color:currentColor}
.bt-spalte--1 .bt-wahl{color:var(--blau)}
.bt-spalte--2 .bt-wahl,.bt-spalte--3 .bt-wahl{color:#fff}
.bt-spalte{transition:transform .25s var(--ease),box-shadow .25s}
.bt-spalte.gewaehlt{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blau),0 16px 30px -14px rgba(1,27,79,.55);transform:translateY(-3px)}
.bt-spalte.gewaehlt .bt-wahl{background:#fff;border-color:#fff;color:var(--blau)}
.bt-spalte--1.gewaehlt .bt-wahl{background:var(--blau);border-color:var(--blau);color:#fff}
.bt-spalte--1.gewaehlt .bt-wahl i{border-color:#fff;background:var(--blau)}
.bt-spalte:not(.gewaehlt):hover{box-shadow:0 0 0 3px #fff,0 0 0 5px #9DB5E8}
/* weniger kleine Schrift in der Tabelle */
.bt-zeile__was{font-size:1rem!important;font-weight:600;color:var(--h)}
.bt-zelle{font-size:1rem}
.bt-spalte__preis small{font-size:.9375rem}

/* ---------- D Gespräch am Handy: wie die Livegang-Seite Chat links, Handy rechts ---------- */
@media (max-width:899px){
  html[data-v="d"] .gs__buehne{grid-template-columns:minmax(0,1fr) clamp(108px,32vw,150px);align-items:end;justify-items:stretch;gap:12px}
  html.js[data-v="d"] .gs:not(.flach) .gs-paar.frage-da{display:grid}
  html[data-v="d"] .gs-chat{max-width:none;min-height:0!important;padding:10px}
  html[data-v="d"] .gs-chat__kopf div{display:block}
  html[data-v="d"] .gs-chat__kopf b{font-size:1rem}
  html[data-v="d"] .gs-chat__kopf small{font-size:.875rem}
  html.js[data-v="d"] .gs:not(.flach) .gs-chat__liste{height:clamp(200px,calc(100svh - 480px),300px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
  html[data-v="d"] .gs-paar{gap:6px}
  html[data-v="d"] .gs-blase{max-width:94%;padding:8px 11px;font-size:.9375rem}
  html[data-v="d"] .gs-blase--antwort{gap:7px}
  html[data-v="d"] .gs-blase--antwort .gs-nr{width:22px;height:22px;font-size:.875rem}
  html[data-v="d"] .gs-handy{width:100%;justify-items:start;gap:6px}
  html[data-v="d"] .gs-handy__geraet{transform-origin:top left;margin-right:calc((var(--s,1) - 1) * 230px)}
  /* verkleinertes Handy: Schildchen nur als große Nummer */
  html[data-v="d"] .gs-marke{gap:0;padding:0;font-size:0;background:none!important;box-shadow:none!important;right:-10px;top:-16px}
  html[data-v="d"] .gs-marke .gs-nr{width:42px;height:42px;font-size:1.5rem;box-shadow:0 0 0 3px #fff}
  html[data-v="d"] .gs-stand{font-size:.875rem;line-height:1.3;text-align:left;min-height:var(--stand-h,0px);max-width:none}
  /* Hinweis unter die Szene, damit die Überschrift mit stehen bleiben kann */
  html[data-v="d"] .gs__kopf .gs__hinweis{display:none}
  html[data-v="d"] .gs__hinweis--unten{display:block;margin-top:12px}
}
.gs__hinweis--unten{display:none}

/* ---------- D Telefonfragen: Frage antippen, im Handy leuchtet die Antwort auf ---------- */
.fq{display:grid;grid-template-columns:minmax(0,1fr) clamp(118px,36vw,170px);grid-template-areas:"fragen geraet" "antwort antwort";gap:14px;align-items:start}
.fq__fragen{grid-area:fragen;display:grid;gap:8px;align-content:start}
.fq__hinweis{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;line-height:1.3;color:var(--h)}
.fq__hinweis svg{flex:none;color:var(--blau)}
.fq-frage{display:flex;align-items:center;gap:9px;width:100%;min-height:56px;padding:10px 12px;border-radius:16px;border:2px solid var(--linie-2);background:#fff;color:var(--h);font:700 .9375rem/1.25 Archivo,sans-serif;text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .15s var(--ease)}
.fq-frage:hover{border-color:var(--blau)}
.fq-frage:active{transform:scale(.98)}
.fq-frage__zeichen{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EEF3FF;color:var(--blau)}
.fq-frage[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.fq-frage[aria-pressed="true"] .fq-frage__zeichen{background:rgba(138,180,255,.2);color:var(--hellblau)}
.fq__handy{display:contents}
.fq__geraet{grid-area:geraet;width:100%}
.fq__rahmen{transform-origin:top left;margin-right:calc((var(--s,1) - 1) * 230px)}
.fq-seite{position:relative;display:grid;gap:12px;align-content:start;padding:14px 10px}
.fq-teil{position:relative;display:grid;gap:5px;padding:10px;border-radius:12px;background:#fff;border:1px solid #E6E9F0;color:#161616;font-size:.75rem;line-height:1.3;opacity:.5;transition:opacity .35s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.fq-teil small{font:700 .625rem/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ged)}
.fq-teil b{font-size:.8125rem;font-weight:700}
.fq-teil .fr-offen{font-size:.75rem;gap:6px}
.fq-teil .fr-offen i{width:8px;height:8px}
.fq-teil .fr-chips{gap:4px}
.fq-teil .fr-chips span{padding:3px 8px;font-size:.6875rem}
.fq-teil .fr-zeile2 b{font-size:.75rem}
.fq-teil .fr-foto{padding:5px 8px;font-size:.75rem;gap:6px}
.fq-teil .fr-senden{padding:6px 12px;font-size:.75rem}
.fq-teil.an{opacity:1;box-shadow:0 0 0 3px var(--blau),0 10px 24px -8px rgba(1,85,253,.45);transform:scale(1.03);z-index:1}
.fq-haken{position:absolute;right:-9px;top:-9px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blau);color:#fff;transform:scale(0);transition:transform .35s var(--ease) .1s}
.fq-teil.an .fq-haken{transform:none}
.fq-meldung{position:absolute;left:8px;right:8px;top:34px;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 14px 30px -8px rgba(1,27,79,.4);font-size:.75rem;line-height:1.25;opacity:0;transform:translateY(-130%);transition:transform .5s var(--ease),opacity .3s}
.fq-meldung b{display:block;font:800 .8125rem/1.2 Archivo,sans-serif;color:var(--h)}
.fq-meldung small{display:block;font-size:.6875rem;color:var(--ged)}
.fq-meldung__zeichen{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--blau);color:#fff}
.fq.mit-meldung .fq-meldung{opacity:1;transform:none}
.fq__antwort{grid-area:antwort;display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:#fff;border-left:4px solid var(--blau);box-shadow:var(--schatten);font-size:1.0625rem;line-height:1.45;color:var(--t)}
.fq__antwort-wort{font:700 .875rem/1.2 Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--blau)}
.fq__antwort-text b{color:var(--h)}
@media (min-width:900px){
  .fq{grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"fragen geraet" "antwort geraet";column-gap:56px;row-gap:18px;max-width:920px}
  .fq-frage{min-height:64px;padding:12px 16px;font-size:1.1875rem}
  .fq__hinweis{font-size:1.0625rem}
  .fq__antwort{align-self:start;font-size:1.125rem}
}

/* ---------- D Google und KI: zugeklappt wie ein Suchfeld, zum Ausprobieren ---------- */
.gf-probe-raster{display:grid;gap:14px}
.gf-probe{border-radius:18px;background:#fff;color:var(--t);box-shadow:0 30px 60px -30px rgba(0,8,30,.6);overflow:hidden}
.gf-probe summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "feld" "knopf";align-items:center;gap:12px;padding:16px}
@media (min-width:560px){.gf-probe summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kopf kopf" "feld knopf";gap:12px 14px}}
.gf-probe summary::-webkit-details-marker{display:none}
.gf-probe__kopf{grid-area:kopf;display:flex;align-items:center;gap:10px;font:800 1.25rem/1.2 Archivo,sans-serif;color:var(--h)}
/* Beispiel steht fest da, kein leeres Eingabefeld: es sah aus, als könne man etwas eintippen */
.gf-probe__feld{grid-area:feld;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;padding:10px 14px;border-radius:14px;background:#F1F4FA;font-size:1rem;line-height:1.35;color:var(--h)}
.gf-probe__wer{font:700 .875rem/1.2 Archivo,sans-serif;color:var(--ged)}
.gf-probe__text{min-width:0;font-weight:600;color:var(--h)}
.gf-probe__text.am-tippen{color:var(--ged)}
.gf-probe__knopf{grid-area:knopf;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;white-space:nowrap;border-radius:30px;background:var(--blau);color:#fff;font:800 1rem/1 Archivo,sans-serif;box-shadow:0 8px 18px -8px rgba(1,85,253,.7)}
.gf-probe .k-zu{display:none}
.gf-probe[open] .k-zu{display:inline}
.gf-probe[open] .k-auf{display:none}
.gf-probe[open] .gf-probe__knopf{background:#EEF3FF;color:var(--blau);box-shadow:none}
.gf-probe summary:focus-visible .gf-probe__knopf{outline:3px solid var(--blau);outline-offset:3px}
/* Einladung zum Antippen, bis man es einmal ausprobiert hat */
.gf-probe:not(.probiert) .gf-probe__knopf{animation:gf-einladen 2.6s ease-in-out infinite}
#gf-ki-p:not(.probiert) .gf-probe__knopf{animation-delay:1.3s}
@keyframes gf-einladen{0%,55%,100%{transform:none}65%{transform:scale(1.08)}75%{transform:none}85%{transform:scale(1.04)}}
.gf-probe__ergebnis{display:grid;gap:10px;padding:0 16px 18px}
.js .gf-probe .gf-probe__ergebnis{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .gf-probe.fertig .gf-probe__ergebnis{opacity:1;transform:none}
@media (min-width:900px){.gf-probe-raster{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- D Ablauf am Handy: Wischreihe mit Schrittleiste oben und Weiter-Knopf in jeder Karte ---------- */
.ab-leiste,.ab-weiter{display:none}
@media (max-width:759px){
  html[data-v="d"] .ab-leiste{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0 0 10px;padding:0;list-style:none}
  html[data-v="d"] .ab-leiste::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:3px;border-radius:3px;background:var(--linie-2)}
  .ab-leiste button{position:relative;display:grid;justify-items:center;gap:4px;width:100%;min-height:66px;padding:0;border:0;background:none;color:var(--ged);font:700 .875rem/1.1 Archivo,sans-serif;cursor:pointer}
  .ab-leiste__nr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--linie-2);background:#fff;color:var(--ged);font:800 1.125rem/1 Archivo,sans-serif;transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
  .ab-leiste button.fertig .ab-leiste__nr{background:#DDE7FF;border-color:#DDE7FF;color:var(--blau)}
  .ab-leiste button[aria-current] .ab-leiste__nr{background:var(--blau);border-color:var(--blau);color:#fff;box-shadow:0 0 0 4px rgba(1,85,253,.18)}
  .ab-leiste button[aria-current]{color:var(--h)}
  html[data-v="d"] .ab-liste{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding:4px var(--rand) 12px;scroll-padding-inline:var(--rand)}
  html[data-v="d"] .ab-liste::-webkit-scrollbar{display:none}
  html[data-v="d"] .ab-liste > *{position:relative;scroll-snap-align:start;min-width:0}
  html[data-v="d"] .ab-nr{display:none}
  html[data-v="d"] .ab-schritt{display:flex;flex-direction:column}
  html[data-v="d"] .ab-bild{aspect-ratio:auto;height:160px;min-height:0;border-radius:18px 18px 0 0}
  html[data-v="d"] .ab-text{flex:1;align-content:start;padding:14px 16px 16px}
  html[data-v="d"] .ab-weiter{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:48px;margin-top:6px;padding:0 16px;border-radius:30px;border:2px solid var(--blau);background:#fff;color:var(--blau);font:800 1rem/1.1 Archivo,sans-serif;text-decoration:none;cursor:pointer}
  html[data-v="d"] .ab-weiter--los{background:var(--blau);color:#fff}
  html[data-v="d"] .ab-los{display:none}
}

/* ---------- Fehlerbehebung 30.09. spät ---------- */
/* Klammer um Überschrift und Bühne: sonst unsichtbar (die Rasterspalten bleiben wie gebaut) */
.gs__klammer{display:contents}
.gs.messen .gs__klammer{position:static!important}
/* D am Handy: Überschrift und Bühne bleiben als EIN Block stehen, damit der Chat am Ende nicht unter die Überschrift rutscht */
@media (max-width:899px){
  html.js[data-v="d"] .gs.mit-kopf:not(.flach) .gs__klammer{display:grid;gap:16px;position:sticky;top:var(--gs-kopf-top,70px);z-index:1}
  html.js[data-v="d"] .gs.mit-kopf:not(.flach) .gs__kopf,html.js[data-v="d"] .gs.mit-kopf:not(.flach) .gs__buehne{position:static}
}
/* Erweiterungen: Umzug mit Preis unter dem Namen; auf sehr schmalen Handys eine Kachel je Zeile */
@media (max-width:599px){
  .pr-extras label.pr-option:last-of-type{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"kasten text" "kasten preis";align-items:center}
  .pr-extras label.pr-option:last-of-type .pr-option__preis{text-align:left}
}
@media (max-width:374px){
  .pr-extras{grid-template-columns:1fr}
  .pr-extras label.pr-option{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"kasten text preis";align-items:center}
  .pr-extras label.pr-option .pr-option__preis{text-align:right}
}
/* unter 900 px immer „antippen“ (manche Handys melden sich als Gerät mit Maus) */
@media (max-width:899px){.nur-handy{display:inline!important}.nur-rechner{display:none!important}}
/* Preisleiste: Rahmen um Erweiterungen und Festpreis */
.pr-wahl{display:grid;gap:18px;min-width:0}

/* Fassung D: ab 900 px die Rechner-Fassung des ersten Entwurfs, darunter die Handy-Fassung */
@media (min-width:900px){html[data-v="d"] .d-schmal{display:none!important}}
@media (max-width:899px){html[data-v="d"] .d-breit{display:none!important}}

/* reduzierte Bewegung: alles steht sofort */
@media (prefers-reduced-motion:reduce){.gf-probe .gf-probe__knopf{animation:none!important}}
@media (prefers-reduced-motion:reduce){
  .gs-paar.neu .gs-blase,.gs-teil.jetzt .gs-teil__inhalt,.bt-kacheln li{animation:none}
}

/* Texte, die am Rechner (ab 900 px) anders lauten als am Handy */
.bis900{display:none}
@media (max-width:899px){.ab900{display:none}.bis900{display:inline}}


.bt-oben{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin:0 0 18px}
.bt-oben .bt-anleitung{margin:0}
.bt-umschalter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.bt-umschalter__titel{font:700 1.0625rem/1.2 Archivo,sans-serif;color:var(--h)}
.bt-umschalter__feld{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:2px solid var(--linie-2)}
.bt-umschalter label{position:relative;cursor:pointer}
.bt-umschalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bt-umschalter label > span{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:700 1rem/1 Archivo,sans-serif;color:var(--h);transition:background-color .2s,color .2s}
.bt-umschalter small{padding:4px 8px;border-radius:999px;background:#E8F0FF;color:var(--blau-h);font:700 .8125rem/1 "Source Sans 3",system-ui,sans-serif}
.bt-umschalter label:hover > span{background:#F2F6FF}
.bt-umschalter input:checked + span{background:var(--blau);color:#fff}
.bt-umschalter input:checked + span small{background:rgba(255,255,255,.2);color:#fff}
.bt-umschalter input:focus-visible + span{outline:3px solid var(--blau);outline-offset:3px}
html:not(.js) .bt-umschalter{display:none}
@media (max-width:899px){
  .bt-oben{gap:12px}
  .bt-umschalter,.bt-umschalter__feld{width:100%}
  .bt-umschalter__feld label{flex:1}
  .bt-umschalter label > span{justify-content:center;padding:0 10px}
}@media (max-width:479px){
  .bt-umschalter label > span{flex-direction:column;gap:3px;min-height:52px}
  .bt-umschalter small,.bt-umschalter input:checked + span small{padding:0;background:none;white-space:nowrap;font-size:.75rem}
  .bt-umschalter small{color:var(--blau-h)}
  .bt-umschalter input:checked + span small{color:#fff}
}

.bt-jahr{padding:0 0 24px;overflow:hidden;border:3px solid var(--blau);box-shadow:0 24px 50px -24px rgba(1,85,253,.45)}
.bt-jahr h3{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 24px 14px 18px;transition:background-color .25s,color .25s}
.bt-jahr h3 span,.bt-jahr h3 [data-stufe-name]{color:inherit}
.bt-jahr > .bt-kacheln,.bt-jahr > .bt-beispiel{margin-inline:26px}
.bt-jahr__zeichen{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;transition:background-color .25s,color .25s}
.bt-jahr__zeichen i{display:none;line-height:0}
.bt-jahr[data-stufe="1"] .bt-jahr__zeichen i[data-z="1"],.bt-jahr[data-stufe="2"] .bt-jahr__zeichen i[data-z="2"],.bt-jahr[data-stufe="3"] .bt-jahr__zeichen i[data-z="3"]{display:block}
.bt-jahr[data-stufe="1"] h3{background:#EEF2F9;color:var(--h)}
.bt-jahr[data-stufe="1"] .bt-jahr__zeichen{background:#fff;color:var(--marine)}
.bt-jahr[data-stufe="2"] h3{background:var(--blau);color:#fff}
.bt-jahr[data-stufe="2"] .bt-jahr__zeichen{background:rgba(255,255,255,.18);color:#fff}
.bt-jahr[data-stufe="3"] h3{background:var(--marine);color:#fff}
.bt-jahr[data-stufe="3"] .bt-jahr__zeichen{background:rgba(138,180,255,.18);color:var(--hellblau)}
.bt-jahr[data-stufe="3"] .bt-kacheln li{background:#EEF2F9}
.bt-jahr[data-stufe="3"] .bt-kacheln li > b{color:var(--marine)}

.wir .ort{align-self:stretch;display:flex;flex-direction:column;gap:16px;padding:26px 22px;border-radius:var(--r-karte);background:var(--marine);color:var(--t-hell);box-shadow:var(--schatten)}
.wir .ort h3{color:#fff;font-size:1.5rem;line-height:1.15}
.wir .ort a[data-kontakt]{color:#fff;font-size:1.625rem}
.wir .ort .klein{color:var(--t-hell)}
.wir .ort a.btn{margin-top:auto;min-height:52px;font:700 1.0625rem/1 Archivo,sans-serif}
@media (min-width:900px){.wir .ort{padding:32px 30px}.wir .ort h3{font-size:1.75rem}}.wir .ort{position:relative;overflow:hidden;isolation:isolate}
.wir .ort > :not(.ort__zeichen){position:relative;z-index:1}
.ort__zeichen{position:absolute;z-index:0;right:-14%;bottom:64px;width:78%;height:auto;aspect-ratio:1;opacity:.16;pointer-events:none}
@media (max-width:899px){.ort__zeichen{width:min(46%,220px);right:-6%;top:-12%;bottom:auto;opacity:.12}}
/* Prüfung 05.10.2026: Die Galerie-Überschrift klebte am Hinweis unter dem Gespräch */
#galerie{margin-top:clamp(48px,4rem + 2vw,104px)}
/* Google-Profil inklusive bei Pflege und Aktiv (05.10.2026) */
.bt-stufe__plus{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:7px 12px;border-radius:999px;background:#E6F4EA;color:#14532D;font-weight:700;font-size:.9375rem;width:fit-content}
.bt-stufe__plus svg{flex:none;color:#15803D}
.pr-option__preis s{color:var(--ged);font-weight:600;margin-right:4px}

/* Kopfbereich auf Tablets quer und niedrigen Rechnerfenstern: Gerätebild oben neben der Überschrift statt mittig
   neben der ganzen Spalte, sonst ist es im ersten Bildschirm unten abgeschnitten */
@media (min-width:1000px){.hero__geraete{align-self:start;margin-top:28px}}

/* Seitenwechsel ohne weißes Aufblitzen (Regel R36), bei reduzierter Bewegung ohne Überblendung */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}