/* VGV Hausverwaltung · „Glas & Linie“ (C4, Daniel 15.10.2026). Teil 1 von 2: Tokens stehen nur hier (test_mobil_grundlagen); Fortsetzung bausteine.css; formular.css nur auf der Kontaktseite. Bewegung ≤ 5 s unter prefers-reduced-motion:no-preference. Kontraste: docs/konzept/DESIGN_WOW.md */

/* == 1. Tokens (die EINE Stelle) */
:root{
/* Farbe */
--schrift-basis:1rem;--fokus-breite:.1875rem;--ink:#142C52;--blau:#2B569D;--blau-tief:#1F4580;--blau-hell:#5C86CF;--flaeche:#EBF3FF;--grund:#F4F7FD;
--linie:#9FB7DB;--linie-zart:#C9D8EE;--linie-hell:#ffffff2e;--ziegel:#A84B26;--sand:#F7EBE2;--gedaempft:#475A7A;
/* Wortteil der Kopfmarke, am Original gemessen; 6,3:1 auf Weiß, 5,6:1 auf dem Kopfglas */
--marke-grau:#605F5F;
--fehler:#B42318;--erfolg:#1D6B3A;--weiss:#FFFFFF;
/* Rollen (Flächen setzen sie lokal neu) */
--text:var(--ink);--link:var(--blau-tief);--fokus:var(--ink);--akzent:var(--ziegel);
/* Glas-Stufen: Mindestdeckung Weiß */
--deckend:0;--a:max(var(--deckend),.72);--glas-1:rgb(255 255 255/var(--a));--glas-1o:rgb(255 255 255/max(var(--deckend),.84));--glas-2:rgb(255 255 255/max(var(--deckend),.8));--glas-3:rgb(255 255 255/max(var(--deckend),.93));
--glas-blau:linear-gradient(160deg,rgb(255 255 255/max(var(--deckend),.85)),rgb(235 243 255/var(--a)) 60%,rgb(214 228 250/var(--a)));--unschaerfe-klein:blur(12px) saturate(160%);
--glas-dunkel:linear-gradient(150deg,rgb(20 44 82/max(var(--deckend),.93)),rgb(31 69 128/max(var(--deckend),.93)));
--unschaerfe:blur(22px) saturate(170%);
--lichtkante:linear-gradient(150deg,#fff,#ffffff40 35%,#9fb7db8c 70%,#ffffffe6);
/* Schatten (Tiefe) */
--schatten-1:0 1px 1px #142c520a,0 6px 16px -6px #142c5224,0 30px 60px -30px #2b569d61;
--schatten-2:0 2px 2px #142c520d,0 14px 30px -10px #142c5238,0 50px 90px -40px #2b569d80;
--schatten-knopf:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #00000026,0 10px 24px -10px #1f4580bf;
/* Radien */
--r-xl:28px;--r-l:20px;--r-m:14px;--r-s:10px;--r-voll:999px;
/* Abstände (4-px-Basis) */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
--rand:16px;--luft:clamp(48px,3rem + 4vw,120px);--spalt:clamp(12px,.5rem + 1vw,20px);--innen:clamp(22px,1rem + 1.6vw,44px);
/* Typografie */
--schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--titel:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--t-h1:clamp(2.25rem,1rem + 5vw,4.75rem);--t-h2:clamp(1.875rem,1rem + 3vw,3.5rem);--t-h2m:clamp(1.625rem,1rem + 1.6vw,2.5rem);
--t-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem);--t-lead:clamp(1.0625rem,1rem + .45vw,1.3125rem);
--t-text:clamp(var(--schrift-basis),.95rem + .25vw,1.125rem);--t-klein:.875rem;
/* Bewegung */
--kurve:cubic-bezier(.2,.75,.2,1);--kurve-feder:cubic-bezier(.3,1.5,.5,1);--kurve-zeichnen:cubic-bezier(.55,.1,.25,1);
--d-kurz:.2s;--d-mittel:.45s;--d-lang:.9s;--d-szene:2.8s;
color-scheme:light;
}
@media (min-width:600px){:root{--rand:24px}}
/* mobil: weniger Unschärfe, Wolken stehen */
@media (max-width:767px){:root{--unschaerfe:blur(14px) saturate(150%)}}
@media (min-width:1024px){:root{--rand:32px}}

/* == 2. Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
/* UR-42: einzige Quelle des Sprungziel-Abstands je Bedingung: Kopfhöhe (68 px, ab 600 px 74 px) + 12 px; Ausnahme max-height:480px (Kopf nicht mehr fest, 16 px, spätere Regel gewinnt) */
@media (min-width:600px){html{scroll-padding-top:86px}}
body{margin:0;background:var(--grund);color:var(--text);font:400 var(--t-text)/1.6 var(--schrift);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,legend{font-family:var(--titel);margin:0;text-wrap:balance;overflow-wrap:anywhere}
/* h1–h3: Handtrennung nur an Wortfugen (seiten/trennung.py); .fliess trennt automatisch; legend-Trennung nur in formular.css */
h1{hyphens:manual}
h2,h3{hyphens:manual}
/* lange Wörter brechen auf jeder Breite; „anywhere“ hält Rasterspalten in der Kachel */
/* UR-18: Fließtext trennt selten; Safari: -webkit-Formen */
p,li{hyphens:auto;overflow-wrap:anywhere;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;-webkit-hyphenate-limit-lines:2}
p{margin:0 0 1em;max-width:68ch}
p:last-child{margin-bottom:0}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
img,svg{max-width:100%;height:auto}
svg{display:block}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:700}
address{font-style:normal}
:focus-visible{outline:var(--fokus-breite) solid var(--fokus);outline-offset:3px;border-radius:6px}
main:focus{outline-style:none}
.sprunglink{position:absolute;left:var(--rand);top:-100px;z-index:100;background:var(--ink);color:var(--weiss);padding:12px 18px;border-radius:12px;font-weight:600}
.sprunglink:focus{top:12px;outline-color:var(--blau)}
.rahmen{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:calc(var(--luft) / 2)}
.oben-marke{position:absolute;top:0;left:0;width:1px;height:120px;pointer-events:none}
.bento{display:grid;gap:var(--spalt);grid-template-columns:minmax(0,1fr)}
.bento>*{min-width:0}
.brotkrumen{max-width:1240px;margin:0 auto;padding:var(--s-3) var(--rand) 0;font-size:var(--t-klein)}
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:0 var(--s-3)}
.brotkrumen li{display:flex;align-items:center}
.brotkrumen li+li::before{content:"/";margin-right:var(--s-3);color:var(--gedaempft)}
.brotkrumen a{display:inline-flex;align-items:center;min-height:44px}
/* UR-112: Inhaltslisten wie p */
.fliess ul,.fliess ol{padding-left:1.4em;max-width:68ch}.fliess ul{list-style:disc}.fliess ol{list-style:decimal}.fliess li{margin-bottom:.4em}
.fliess h2,.fliess h3{hyphens:auto;hyphenate-limit-chars:12 5 5;margin:1.4em 0 .5em;line-height:1.2;letter-spacing:-.02em}
.fliess h2{font-size:var(--t-h2m);line-height:1.08;letter-spacing:-.03em;font-weight:760}
.fliess h3{font-size:var(--t-h3)}
.fliess>:first-child{margin-top:0}
.stand{font-size:var(--t-klein);color:var(--gedaempft)}
/* Honigtopf-Feld: außerhalb des Sichtbereichs, per aria-hidden ausgeblendet */
.kontakt-falle { position: absolute; left: -999rem; }

/* == 3. Hintergrund: Farbwolken + Bauplan-Raster */
.hintergrund{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.wolke{position:absolute;width:72vmax;height:72vmax;border-radius:50%}
.wolke-1{left:-28vmax;top:-30vmax;background:radial-gradient(circle,#6f9be64c,#6f9be600 62%)}
.wolke-2{right:-30vmax;top:-10vmax;background:radial-gradient(circle,#2b569d33,#2b569d00 60%)}
.wolke-3{left:10vmax;bottom:-40vmax;background:radial-gradient(circle,#f7ebe2f2,#f7ebe200 62%)}
.raster{position:absolute;inset:0;opacity:.55;background:linear-gradient(#9fb7db38 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,#9fb7db38 1px,transparent 1px) 0 0/56px 56px;
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%)}

/* Fortschrittslinie: Scroll-Zeitleiste, sonst IO (vgv.js) */
.fortschritt{position:fixed;inset:0 0 auto;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(var(--fortschritt,0));pointer-events:none;
background:linear-gradient(90deg,var(--blau),var(--blau-hell) 60%,var(--ziegel));transition:transform .6s var(--kurve)}

/* == 4. Flächen: Glas, Marke, Lesebogen */
.kachel{position:relative;border-radius:var(--r-xl);padding:var(--innen);isolation:isolate;overflow:hidden}
.glas{background:linear-gradient(150deg,var(--glas-1o),var(--glas-1) 55%);-webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);
box-shadow:inset 0 1px 0 #fffffff2,inset 0 -1px 0 #142c520d,var(--schatten-1)}
.glas-blau{background:var(--glas-blau)}
/* feste Lichtkante: Verlaufsrahmen über Maske */
.kachel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:var(--lichtkante)}
.kachel::after,.fx-kante{-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.flaeche-blau,.flaeche-tinte,.kontakt{--text:var(--weiss);--link:var(--weiss);--fokus:var(--weiss);--akzent:var(--sand);color:var(--text)}
.flaeche-blau{background:radial-gradient(120% 90% at 0 0,#ffffff19,#fff0 55%),radial-gradient(90% 80% at 100% 100%,#142c528c,#142c5200 60%),linear-gradient(150deg,var(--blau),var(--blau-tief));
box-shadow:inset 0 1px 0 #ffffff59,var(--schatten-2)}
.flaeche-blau::after{background:linear-gradient(150deg,#ffffffb2,#ffffff14 40%,#ffffff4c)}
.flaeche-tinte{background:radial-gradient(80% 70% at 30% 45%,#2b569d8c,#2b569d00 70%),linear-gradient(160deg,#18335E,var(--ink));box-shadow:inset 0 1px 0 var(--linie-hell),var(--schatten-2)}
.flaeche-tinte::after{background:linear-gradient(150deg,#c9d8ee99,#c9d8ee0d 45%,#c9d8ee4c)}
/* Lesebogen: deckend weiß */
.bogen{--text:var(--ink);--link:var(--blau-tief);--fokus:var(--ink);background:var(--weiss);color:var(--text);box-shadow:0 1px 0 #142c520f,var(--schatten-1)}
.bogen::after{background:linear-gradient(150deg,#9fb7db99,#9fb7db26 50%,#9fb7db80)}
/* Zeigerlicht + Lichtkante (vgv.js, nur feiner Zeiger) */
.fx{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:var(--o,0);transition:opacity var(--d-mittel) var(--kurve)}
.fx::before,.fx-kante::before{content:"";position:absolute;left:0;top:0;border-radius:50%;transform:translate3d(var(--x,-999px),var(--y,-999px),0)}
.fx::before{width:460px;height:460px;margin:-230px 0 0 -230px;background:radial-gradient(circle,#fff9,#fff0 62%)}
.fx-kante{position:absolute;inset:0;border-radius:inherit;padding:1.5px}
.fx-kante::before{width:340px;height:340px;margin:-170px 0 0 -170px;background:radial-gradient(circle,#fff,#5c86cfe6 30%,#5c86cf00 65%)}
.flaeche-tinte .fx::before,.kontakt .fx::before{background:radial-gradient(circle,#ffffff1f,#fff0 62%)}
.flaeche-blau .fx::before{display:none}
:where(.kachel)>*{position:relative;z-index:1}

/* == 5. Kopf (Glas-Navigation) */
.kopf{position:sticky;top:0;z-index:50;padding:8px 10px 0;transition:transform var(--d-mittel) var(--kurve)}
@media (min-width:600px){.kopf{padding:10px var(--rand) 0}}
@media (max-height:480px){.kopf{position:relative}html{scroll-padding-top:16px}}
.kopf-leiste{position:relative;display:flex;align-items:center;gap:6px;max-width:1240px;margin-inline:auto;min-height:60px;padding:8px 7px 8px 9px;border-radius:22px;
background:var(--glas-3);-webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);box-shadow:inset 0 1px 0 #fffffff2,inset 0 0 0 1px #fff9,0 10px 30px -12px #142c5240}
.kopf-leiste::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 18px 40px -14px #142c5266;opacity:0;transition:opacity var(--d-mittel) var(--kurve)}
.kopf.kompakt{transform:translateY(-4px)}
.kopf.kompakt .kopf-leiste::before{opacity:1}
.marke{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none}
.marke img{display:block;height:40px;width:auto;max-width:none;flex:none}
.marke-text{font-size:.875rem;font-weight:600;line-height:1.1;color:var(--marke-grau);white-space:nowrap}
@media (min-width:600px){.marke img{height:48px}.marke-text{font-size:1.0625rem}}
.marke picture{flex:none}
.nav-gross{display:none}
.menue summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:10px 12px;border-radius:var(--r-voll);cursor:pointer;font-weight:600;font-size:.9375rem;background:#142c5212}
.menue summary::-webkit-details-marker{display:none}
.menue-striche,.menue-striche::before,.menue-striche::after{width:16px;height:2px;border-radius:2px;background:currentColor}
.menue-striche{position:relative}
.menue-striche::before,.menue-striche::after{content:"";position:absolute;left:0;transition:transform .3s var(--kurve)}
.menue-striche::before{top:-5px}.menue-striche::after{top:5px}
.menue[open] .menue-striche{background:transparent}
.menue[open] .menue-striche::before{transform:translateY(5px) rotate(45deg)}
.menue[open] .menue-striche::after{transform:translateY(-5px) rotate(-45deg)}
.menue-tafel{position:absolute;left:0;right:0;top:calc(100% + 8px);border-radius:22px;padding:10px 16px 16px;background:var(--weiss);box-shadow:var(--schatten-2)}
.menue-tafel li{border-bottom:1px solid #142c521a}
.menue-tafel nav a{display:flex;align-items:center;min-height:52px;font:600 1.125rem/1.2 var(--titel);color:var(--ink);text-decoration:none}
.menue-tafel nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--ziegel);text-decoration-thickness:3px;text-underline-offset:6px}
.menue-tafel .knopf{margin-top:14px;width:100%}
.kopf-telefon{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--r-voll);color:var(--ink);background:#142c5212;font-weight:600;font-size:.9375rem;white-space:nowrap;text-decoration:none;flex:none}
.kopf-telefon-nummer{display:none}
@media (min-width:940px){
.kopf .menue{display:none}
.nav-gross{display:block;margin-right:10px}
.nav-gross ul{display:flex}
.nav-gross a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--ink);font-weight:560;font-size:.9375rem;text-decoration:none;text-decoration-thickness:2px;text-decoration-color:var(--ziegel);text-underline-offset:6px;white-space:nowrap}
/* Unterstreichung statt absoluter Linie (wie .textlink) */
.nav-gross a:focus-visible,.nav-gross a[aria-current]{text-decoration-line:underline}
@media (hover:hover){.nav-gross a:hover{text-decoration-line:underline}}
}

/* == 6. Knöpfe und Textlinks */
.knopf,.kontakt-aktion a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:2px solid transparent;border-radius:var(--r-voll);
font:600 1rem/1.2 var(--schrift);text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;transition:transform .35s var(--kurve)}
.knopf::before,.kontakt-aktion a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity var(--d-kurz)}
@media (hover:hover){.knopf:hover::before,.kontakt-aktion a:hover::before{opacity:1}}
.knopf:active,.kontakt-aktion a:active{transform:scale(.97)}
.knopf-haupt{color:var(--weiss);background:linear-gradient(150deg,#3563AE,var(--blau) 45%,var(--blau-tief));box-shadow:var(--schatten-knopf)}
.knopf-haupt::before{background:var(--blau-tief)}
.knopf-hell,.kontakt-aktion a{color:var(--ink);background:var(--weiss);box-shadow:0 12px 26px -10px #050e1e99}
.knopf-hell::before,.kontakt-aktion a::before{background:var(--flaeche)}
.knopf-rand{color:var(--text);background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.knopf-rand::before{background:#ffffff1f}
.knopf-klein{min-height:44px;padding:10px 14px;font-size:.9375rem;flex:none}
.kopf-knopf[aria-current]{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.kopf-knopf[aria-current]::before{display:none}
.knopf-gross{min-height:56px;padding:14px 24px}
@media (max-width:409px){.kopf-leiste{gap:4px}.menue summary,.kopf-knopf{padding-inline:10px}}
@media (max-width:939px){.menue summary{gap:0;padding-inline:11px}.menue-text{width:0;overflow:hidden;white-space:nowrap}}
@media (max-width:379px){.marke img{height:36px}}
@media (max-width:359px){.kopf-knopf{display:none}}
@media (max-width:599px){.knopf,.kontakt-aktion a{white-space:normal;text-align:center}.kontakt-aktion a{width:100%}}
@media (min-width:600px){.knopf-gross{padding:16px 28px;font-size:1.0625rem}}
.knopf .pfeil{width:20px;height:20px;flex:none;transition:transform .35s var(--kurve)}
@media (hover:hover){.knopf:hover .pfeil{transform:translateX(4px)}}
.textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;hyphens:manual;color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.3em;transition:text-decoration-color .35s var(--kurve)}
/* Unterstreichung statt absoluter Linie: liegt unter jeder Zeile */
.textlink:focus-visible{text-decoration-color:var(--akzent);text-decoration-thickness:2px}
@media (hover:hover){.textlink:hover{text-decoration-color:var(--akzent);text-decoration-thickness:2px}}
.textlink::after{content:"→";display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font-size:.875rem;line-height:1;box-shadow:inset 0 0 0 1.5px currentColor;transition:transform .35s var(--kurve)}
@media (hover:hover){.textlink:hover::after{transform:translateX(4px)}}

/* == 7. Typografie */
h1{font-size:var(--t-h1);line-height:.98;letter-spacing:-.045em;font-weight:800;margin-bottom:var(--s-5)}
.h-gross{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em;font-weight:780;margin-bottom:20px}
.h-gross::after{content:"";display:block;width:64px;height:4px;margin-top:18px;border-radius:4px;background:linear-gradient(90deg,var(--akzent),color-mix(in srgb,var(--akzent) 55%,#fff));transform-origin:0 50%;transition:transform 1s .25s var(--kurve)}
.h-mittel{font-size:var(--t-h2m);line-height:1.05;letter-spacing:-.03em;font-weight:760;margin-bottom:18px}
.h-kachel{font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;font-weight:720;margin:0 0 12px}
.h-klein{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:.9375rem;font-weight:700;letter-spacing:.02em}
.h-klein::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--akzent)}
.einleitung{font-size:var(--t-lead);line-height:1.55}
.klein{font-size:var(--t-klein);line-height:1.5}
.etikett{font-weight:700;color:var(--text)}
.abschnitt-kopf{margin-bottom:clamp(24px,1rem + 1.5vw,44px)}
.kachel-fuss{margin-top:auto;padding-top:14px}
.stapel-kachel{display:flex;flex-direction:column}
.punkte{max-width:68ch}
.punkte li{position:relative;padding-left:26px;margin-bottom:.6em}
.punkte li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 18%,transparent)}
.symbol{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:20px;border-radius:18px;color:var(--blau);background:linear-gradient(150deg,#fff,var(--flaeche));
box-shadow:inset 0 1px 0 #fff,0 8px 20px -10px #1f458080,inset 0 0 0 1px #9fb7db8c}
.symbol svg{width:44px;height:44px}
.plakette{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-voll);font-size:.875rem;font-weight:650;background:#142c5259;box-shadow:inset 0 0 0 1px #fff6}
.plakette::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sand)}

/* == 8. Einstieg */
.einstieg{padding-top:clamp(16px,1rem + 2vw,56px)}
.t-held{display:contents}
.t-held::before,.t-held::after,.t-held>.fx{display:none}
.t-held h1{order:1;margin:var(--s-2) 0 0}
.t-held .einleitung{order:2;margin:var(--s-2) 0 0}
/* Hauptknopf der Startseite: mobil direkt unter H1 und Einleitung */
.t-held .einstieg-aktion{order:3;margin:var(--s-2) 0 0}
.t-bild{order:4;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:0;min-height:0}
.zeichnung{width:100%;margin:0;color:var(--blau)}
.einstieg-kachel h1{font-size:clamp(2.125rem,1rem + 3.6vw,4rem);margin-bottom:0}
.einstieg-kachel h1~*{margin-top:var(--s-3)}
.einstieg-kachel .einleitung{max-width:56ch;margin:var(--s-4) 0 0}
.einstieg-kachel .stand{margin:var(--s-4) 0 0}
@media (max-width:599px){.einstieg-aktion .knopf{width:100%}}
@media (min-width:768px){
.t-held .einstieg-aktion{margin:0}
.t-held{display:flex;flex-direction:column;grid-column:1/-1}
.t-held::before,.t-held::after{display:block}
.t-held h1,.t-held .einleitung{margin:0 0 var(--s-5)}
.t-held .einleitung{max-width:56ch}
.t-bild{padding:clamp(10px,.25rem + 1.2vw,24px)}
}


/* == 9. Inhaltsbausteine */
/* Leistungskarten (Selektoren statt Klassen: Wachen pinnen <h3>/<ul>) */
.leistung h3{margin:0 0 12px;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;font-weight:720}
.leistung h3 .symbol{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 16px}
.leistung ul{display:grid;grid-template-columns:minmax(0,1fr);gap:.6em}
.leistung li{position:relative;padding-left:26px}
.leistung li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 18%,transparent)}
/* Ablauf mit Lichtlinie */
.schritte-feld{position:relative}
.verbinder{position:absolute;z-index:0;left:51px;top:52px;bottom:52px;width:3px;border-radius:3px;overflow:hidden;background:#9fb7db73}
.verbinder::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--blau),var(--ziegel));transform-origin:50% 0}
.verbinder::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,#fff0,#fff,#fff0);opacity:0}
/* Häufige Fragen (details) */
.fragen{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.frage{border-radius:var(--r-l);background:var(--grund);box-shadow:inset 0 0 0 1px #9fb7db99}
.frage[open]{background:var(--weiss);box-shadow:inset 0 0 0 1.5px var(--linie),0 10px 24px -16px #142c5259}
.frage summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 18px;border-radius:var(--r-l);cursor:pointer}
.frage summary>h3{min-width:0;flex:1;margin:0;font:650 1.0625rem/1.35 var(--titel);letter-spacing:-.01em;overflow-wrap:anywhere}
.frage summary::-webkit-details-marker{display:none}
.frage summary:focus-visible{outline-offset:-3px}
.antwort{padding:0 18px 18px}

.illustration{display:grid;place-items:center}
.illustration svg{max-width:min(100%,420px)}
/* == 10. Kontaktmodul (dunkles Glas, deckender Schlusspunkt) */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(28px,1rem + 3vw,72px);background:radial-gradient(70% 90% at 100% 0,#5c86cf1f,#5c86cf00 70%),var(--glas-dunkel);
-webkit-backdrop-filter:var(--unschaerfe);backdrop-filter:var(--unschaerfe);box-shadow:inset 0 1px 0 #ffffff40,0 40px 80px -30px #142c5299}
.kontakt .einleitung{max-width:56ch;margin:0}.kontakt-aktion{margin:0}
@media (min-width:768px){.kontakt{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:56px}}

/* Kontaktweg am Ende der Leistungsseiten: dunkle Abschlusskachel */
.kontaktweg .kontakt-kachel{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--s-5);padding:clamp(28px,1rem + 3vw,72px) var(--innen);border-radius:var(--r-xl);text-align:center;color:var(--weiss);--text:var(--weiss);--link:var(--weiss);--fokus:var(--weiss);
background:radial-gradient(70% 90% at 100% 0,#5c86cf1f,#5c86cf00 70%),var(--glas-dunkel);box-shadow:inset 0 1px 0 #ffffff40,0 40px 80px -30px #142c5299}
.kontaktweg .kontakt-kachel .einleitung{max-width:52ch;margin:0}
.kontaktweg .kontakt-kachel p{margin:0}
.kontaktweg .kontakt-aktion a{min-height:56px;padding:16px 28px;font-size:1.0625rem}
.kontaktweg .kontakt-aktion a::after{content:"→" / "";font-size:1.25rem;line-height:1}
/* Ohne Einleitung und Nummer: schlanke helle Leiste mit blauem Knopf */
.kontaktweg .kontakt-kachel-knapp{padding:var(--s-4) var(--innen);gap:0;color:var(--ink);--text:var(--ink);--link:var(--blau-tief);--fokus:var(--ink);background:var(--glas-1o);box-shadow:inset 0 1px 0 #fffffff2,var(--schatten-1)}
.kontaktweg .kontakt-kachel-knapp .kontakt-aktion a{min-height:52px;color:var(--weiss);background:linear-gradient(150deg,#3563AE,var(--blau) 45%,var(--blau-tief));box-shadow:var(--schatten-knopf)}
.kontaktweg .kontakt-kachel-knapp .kontakt-aktion a::before{background:var(--blau-tief)}
/* Telefon und E-Mail als Link: Zielgröße ≥ 48 px, Unterstreichung bleibt */
.telefon-link,.kontakt-telefon a,.mail-link{display:inline-flex;align-items:center;min-height:48px;text-decoration:underline;text-underline-offset:.2em}
/* nur die Telefonnummer ist fett */
.telefon-link,.kontakt-telefon a{font-weight:650}
.menue-tafel .menue-telefon{display:flex;justify-content:center;margin-top:6px;color:var(--ink)}
.kontakt-telefon{margin:var(--s-3) 0 0}
.kontakt-telefon>span{display:inline-block;max-width:100%;margin-top:calc(3px + var(--fokus-breite) + 2px)}
/* Abstand = Fokus-Offset 3px + --fokus-breite + 2px */
.kontakt-telefon>a{margin-inline-end:calc(3px + var(--fokus-breite) + 2px)}

/* == 12. Fuß */
.fuss{--text:var(--weiss);--link:var(--flaeche);--fokus:var(--weiss);margin-top:calc(var(--luft) / 2);padding-block:48px;color:var(--weiss);background:var(--ink)}
.fuss-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
.fuss-seiten{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.fuss .fuss-knopf{color:var(--ink)}
.fuss .marke img{height:64px}
.fuss ul{display:flex;flex-wrap:wrap;gap:4px 24px}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);hyphens:manual}
.fuss .fuss-telefon{min-height:48px}
.fuss a.fuss-telefon{white-space:nowrap}
.fuss .kontakt-telefon{margin:0}
/* UR-23: Rechtslinks + Lesemodus in einem Behälter unter den Spalten */
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5)}
@media (min-width:1024px){.fuss-innen{grid-template-columns:auto minmax(0,1fr);gap:24px 40px}.fuss-unten{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--linie-hell)}}

/* == 13. Raster ab Tablet / Desktop */
@media (min-width:768px){
.bento-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento-2>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:1024px){
.bento-einstieg{grid-template-columns:repeat(12,minmax(0,1fr))}
.t-held{grid-column:1/span 7;grid-row:1/span 2;justify-content:center;padding-block:clamp(40px,2rem + 2vw,72px)}
.t-bild{grid-column:8/span 5}
.bento-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.s-5{grid-column:span 5}.s-6{grid-column:span 6}.s-7{grid-column:span 7}.s-4{grid-column:span 4}.s-8{grid-column:span 8}.s-12{grid-column:1/-1}
.klebt{position:sticky;top:110px}
.bento-12{align-items:start}
.gleich{align-items:stretch}
}
@media (min-width:1024px) and (max-width:1199px){.t-held h1{font-size:3.75rem}}

/* == 14. Bewegung (Bildschirm, reduced-motion: no-preference) */
@media screen and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:scroll()){
.fortschritt{transition:none;animation:fortschritt linear both;animation-timeline:scroll(root block)}
@keyframes fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* Einstieg: Linie für Linie, danach Fenster warm; Endlage = Grundzustand */
.zeichnung .strich{stroke-dasharray:1 2;animation:zeichnen 1.2s var(--kurve-zeichnen) var(--v,0s) both}
@keyframes zeichnen{from{stroke-dashoffset:1.02;fill-opacity:0}60%{fill-opacity:0}}
.s1{--v:.1s}.s2{--v:.4s}.s3{--v:.7s}.s4{--v:1s}.s5{--v:1.2s}
.zeichnung .deko,.zeichnung .sonne{animation:auf-sacht .9s ease .2s both}
.zeichnung .an{animation:auf .6s ease var(--v) both}
.an:nth-child(1){--v:1.9s}.an:nth-child(2){--v:2.05s}.an:nth-child(3){--v:2.2s}.an:nth-child(4){--v:2.35s}
.an:nth-child(5){--v:2.5s}.an:nth-child(6){--v:2.65s}.an:nth-child(7){--v:2.8s}.an:nth-child(8){--v:2.95s}
@keyframes auf{from{opacity:0}}
/* Sonne und Boden starten sichtbar (Bildkachel nie leer) */
@keyframes auf-sacht{from{opacity:.4}}
/* Keine Dauerschleife (2.2.2): einmal, Ende ≤ 5 s */
@media (min-width:768px){
.wolke-1{animation:ziehen-1 4.4s var(--kurve) both}
.wolke-2{animation:ziehen-2 4.4s var(--kurve) .2s both}
.wolke-3{animation:ziehen-3 4.4s var(--kurve) .4s both}
}
@keyframes ziehen-1{from{opacity:0;transform:translate3d(-8vmax,-6vmax,0) scale(.9)}}
@keyframes ziehen-2{from{opacity:0;transform:translate3d(8vmax,-4vmax,0) scale(1.1)}}
@keyframes ziehen-3{from{opacity:0;transform:translate3d(-6vmax,6vmax,0) scale(.92)}}
.zeichnung .baum,.zeichnung .wolke-a,.zeichnung .wolke-b{transform-box:fill-box;transform-origin:50% 100%}
.laeuft .zeichnung .baum{animation:wiegen 3.2s ease-in-out 1.4s}
.laeuft .zeichnung .wolke-a{animation:treiben 4.6s ease-in-out both}
.laeuft .zeichnung .wolke-b{animation:treiben 4.6s ease-in-out reverse both}
@keyframes wiegen{25%{transform:rotate(1.6deg)}75%{transform:rotate(-1.6deg)}}
@keyframes treiben{from{transform:translateX(-36px)}}
/* Einblenden: Grundzustand sichtbar; Bewegung hängt an der Scrollposition (view()) */
@supports (animation-timeline:view()){
[data-reveal]{animation:auftauchen linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
[data-reveal]:focus-within{animation:none}
@keyframes auftauchen{from{opacity:.3;transform:translate3d(0,24px,0)}}
}
.can-reveal [data-reveal]:not(.sofort) .h-gross::after,.can-reveal [data-reveal]:not(.sofort).h-gross::after{transform:scaleX(0)}
.can-reveal [data-reveal].ist-sichtbar .h-gross::after{transform:none}
/* Lichtlinie durch den Ablauf */
.can-reveal .verbinder::before{transform:scaleY(0);transition:transform 1.8s var(--kurve) .2s}
.can-reveal .leuchtet .verbinder::before{transform:none}
.can-reveal .leuchtet .verbinder::after{animation:licht-senk 1.8s ease-in-out .3s 1 both}
@keyframes licht-senk{from{opacity:1;transform:translateY(-100%)}to{opacity:0;transform:translateY(340%)}}
.menue[open] .menue-tafel{animation:tafel .35s var(--kurve)}
@keyframes tafel{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.frage[open] .antwort{animation:aufklappen .45s var(--kurve)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}}
.t-bild[data-neigung]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}

/* == 15. Rückfälle und Nutzerwünsche */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
/* deckend: ohne backdrop-filter, bei weniger Transparenz und mehr Kontrast */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root{--deckend:1}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){:root{--deckend:1;--unschaerfe:none;--unschaerfe-klein:none}.wolke{display:none}}
@media (prefers-contrast:more){
.hintergrund,.fx,.kachel::after{display:none}
.glas,.kopf-leiste,.menue-tafel,.bogen,.frage,.schritt{box-shadow:inset 0 0 0 2px var(--ink)}
.flaeche-blau{background:var(--blau-tief)}
.flaeche-tinte,.kontaktweg .kontakt-kachel{background:var(--ink)}
.kontaktweg .kontakt-kachel-knapp{background:var(--weiss)}
.kontaktweg .kontakt-kachel-knapp .kontakt-aktion a{background:var(--blau-tief)}
.hilfe{color:var(--ink)}
}
@media (forced-colors:active){
.marke{forced-color-adjust:none;padding:2px 6px;border-radius:12px;background:#fff}
.fuss .marke{background:#142c52}
.marke:focus-visible{outline-color:Highlight}
.kachel,.frage,.schritt,.kontaktweg .kontakt-kachel{border:1px solid CanvasText}
.nummer{border:2px solid CanvasText}
.hintergrund,.fx{display:none}
.menue-striche,.menue-striche::before,.menue-striche::after{background:CanvasText}
}
@media print{
.hintergrund,.fortschritt,.sprunglink,.nav-gross,.menue,.kopf-knopf,.kopf-telefon,.fx,.kachel::after,.knopf::before,.kontakt-aktion a::before,.t-held::before,.t-held::after,.verbinder,.t-bild,.plus{display:none}
/* UR-118 */
details.frage::details-content{content-visibility:visible;display:block}
.kopf{position:static}
[data-reveal]{animation:none;opacity:1}
.telefon-link,.kontakt-telefon a,.mail-link,.fuss .fuss-telefon{min-height:0}
.kopf-leiste{box-shadow:none}
.glas,.bogen,.flaeche-blau,.flaeche-tinte,.kontakt,.kontaktweg .kontakt-kachel,.fuss{--text:#000;--link:#000;--akzent:#000;--fokus:#000}
.kontaktweg .kontakt-kachel,.fuss{background:#fff;color:#000;box-shadow:none}
.glas,.bogen,.flaeche-blau,.flaeche-tinte,.kontakt,.schritt,.frage{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;color:#000;border:1px solid #000;box-shadow:none;break-inside:avoid}
.h-gross::after{background:#000}
.knopf,.kontakt-aktion a{color:#000;background:none;box-shadow:inset 0 0 0 2px #000}
.schritte .schritt:last-child .nummer{color:#000;background:#fff;box-shadow:inset 0 0 0 2px #000}
.kontaktweg .kontakt-kachel-knapp .kontakt-aktion a{color:#000;background:none;box-shadow:inset 0 0 0 2px #000}
.fliess a[href^="http"]:not(.knopf)::after{content:" (" attr(href) ")"}
.karte .nord{fill:#000;stroke:#000}.karte text.nord{stroke:none}.karte .legende-feld{stroke:#000;print-color-adjust:exact}
}
.karte-figur,.schritte,.stapel,.zahlliste,.zwei-spalten,.nummer{grid-template-columns:minmax(0,1fr)}