/* =========================================================================
   Gebäude Solution — Unterhaltsreinigung-Landingpage Wuppertal
   Schwesterseite der Winterdienst-LP (Rezept „Frost & Glas"), hier als
   Tag-Variante (Florian, 28.09.2026): Kopf, Chat, Vergleich, Anfrage und
   Schluss in den Navy-Tönen des Logos, alle übrigen Sektionen hell.
   Helle Sektionen tragen .hell; der Block „Tag-Variante" am Ende setzt dort
   Tinte, Navy und Weiß ein. Schrift: Overpass + Overpass Mono (lokal).
   ========================================================================= */

:root{
  --n0:#040B16; --n1:#071427; --n2:#0A1A31; --n3:#0F2440; --navy:#154A7E;
  --blau:#057FC7; --eis:#8FD0F7; --eis-2:#C9EAFF; --eisweiss:#EAF6FF;
  --t-h:#EEF5FB; --t:#B6C8DA; --t-2:#93AAC1;
  --glas:rgba(255,255,255,.055); --glas-2:rgba(255,255,255,.085); --glas-3:rgba(255,255,255,.12);
  --glas-rand:rgba(201,234,255,.16); --glas-rand-2:rgba(201,234,255,.3);
  --papier:#F3F7FB; --papier-2:#E7EFF7; --tinte:#0A1A31; --tinte-2:#44566B; --linie:#D6E1EC;
  --gut:#5FD39A;

  --r-knopf:10px; --r-klein:14px; --r-karte:20px; --r-gross:26px;

  --f-text:"Overpass",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"Overpass Mono",ui-monospace,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-calm:cubic-bezier(.25,1,.3,1);
  --spring:linear(0,.28 7.6%,.79 17%,.99 22.4%,1.06 26%,1.08 30%,1.03 39%,1 50%,1 100%);

  --wrap:1220px;
  --sek:clamp(80px,9vw,136px);

  /* Frost: feines Rauschen, nur weiße Kristalle */
  --frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
@supports (animation-timing-function: linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
    --e-calm:linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
  }
}

/* ---------- Grundlage ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--n1)}
body{margin:0;font-family:var(--f-text);font-size:16.5px;line-height:1.65;color:var(--t);background:var(--n1);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-text);color:var(--t-h);font-weight:500;letter-spacing:-.02em}
p{margin:0}
p,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--eis);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp{display:inline-block;margin-inline:.4em}

/* Überschriften: farbiger Teil eigene Zeile, Eis-Verlauf (einziger Display-Trick) */
h2 em,h3 em{font-style:normal;display:block}
h2 em{background:linear-gradient(95deg,var(--eis) 0%,var(--eis-2) 60%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.h2{font-size:clamp(1.9rem,1.25rem + 2vw,2.5rem);line-height:1.12;letter-spacing:-.026em}
.kicker{display:block;margin:0 0 .8rem;font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--eis);line-height:1.4}
.lead{font-size:1.05rem;line-height:1.65;color:var(--t);max-width:40rem}
.kopfblock{max-width:46rem;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.kopfblock .lead{margin-top:1rem}
.kopfblock--mitte{margin-inline:auto;text-align:center}
.kopfblock--mitte .lead{margin-inline:auto}

.sek{padding-block:var(--sek);position:relative}
.s-n2{background:var(--n2)}
.s-glut{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(5,127,199,.14),rgba(5,127,199,0) 70%),var(--n1)}

/* ---------- Glas ---------------------------------------------------------- */
.glas{position:relative;isolation:isolate;border-radius:var(--r-karte);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.035) 55%,rgba(255,255,255,.05));
  border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -34px rgba(0,0,0,.7)}
/* Frostkante: Kristalle am Rand, tauen beim Einblenden */
.frost::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--frost);background-size:240px 240px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,transparent 55%,#000 100%);
          mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,transparent 55%,#000 100%);
  transition:opacity 2.4s var(--e-calm) .2s}
html.js .frost::after{opacity:.9}
.frost.is-da::after,.is-da .frost::after,.hero.ist-da .frost::after{opacity:.3}
.frost > *{position:relative;z-index:1}

/* ---------- Knöpfe: Eisweiß, keine Schatten ------------------------------- */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--h);
  padding:.5rem 1.35rem;border-radius:var(--r-knopf);border:1px solid transparent;cursor:pointer;
  font-family:var(--f-text);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .3s var(--ease),transform .18s var(--spring)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.975)}
.btn svg{width:20px;height:20px;flex:none}
.btn--p{background:var(--eisweiss);color:var(--n1)}
.btn--p:hover{background:#fff;box-shadow:0 0 0 5px rgba(143,208,247,.16)}
.btn--s{background:rgba(255,255,255,.06);color:var(--eisweiss);border-color:var(--glas-rand-2)}
.btn--s:hover{background:rgba(255,255,255,.12);border-color:var(--eis-2)}
.btn--wa{background:#25D366;color:#063A1C}
.btn--wa:hover{background:#3ADB78}
.btn--lg{--h:58px;font-size:1.03rem;padding-inline:1.4rem}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.papier .btn--p{background:var(--tinte);color:#fff}
.papier .btn--p:hover{background:var(--navy);box-shadow:0 0 0 5px rgba(21,74,126,.12)}

/* Haken, die sich zeichnen */
.haken{display:grid;gap:.62rem}
.haken li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.7rem;align-items:start;line-height:1.5;color:var(--t-h)}
.ck{width:24px;height:24px;margin-top:.02rem;border-radius:999px;background:rgba(143,208,247,.14);display:grid;place-items:center}
.ck svg{width:15px;height:15px}
.ck path{fill:none;stroke:var(--eis);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--e-calm) var(--ck-d,0ms)}
html:not(.js) .ck path,.is-da .ck path,.ist-da .ck path,.pop:not([hidden]) .ck path{stroke-dashoffset:0}
.haken li:nth-child(1){--ck-d:80ms}.haken li:nth-child(2){--ck-d:230ms}.haken li:nth-child(3){--ck-d:380ms}
.haken li:nth-child(4){--ck-d:530ms}.haken li:nth-child(5){--ck-d:680ms}.haken li:nth-child(6){--ck-d:830ms}
.papier .haken li{color:var(--tinte)}
.papier .ck{background:rgba(21,74,126,.1)}
.papier .ck path{stroke:var(--navy)}

/* Reveal: 10 px, einmal */
html.js .rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
html.js .rv.is-da{opacity:1;transform:none}
html.js .rv-g > *{opacity:0;transform:translateY(10px);transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
html.js .rv-g.is-da > *{opacity:1;transform:none}
.rv-g.is-da > :nth-child(2){transition-delay:80ms}.rv-g.is-da > :nth-child(3){transition-delay:160ms}
.rv-g.is-da > :nth-child(4){transition-delay:240ms}.rv-g.is-da > :nth-child(5){transition-delay:320ms}
.rv-g.is-da > :nth-child(6){transition-delay:400ms}
@media (max-width:760px){html.js .rv,html.js .rv-g > *{transform:translateY(6px)}}

/* ---------- Kopfzeile ----------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto;z-index:50;padding-block:1rem;
  transition:background .26s var(--ease),box-shadow .26s var(--ease),padding .26s var(--ease)}
.kopf__in{display:flex;align-items:center;gap:1.6rem}
.kopf__logo{display:block;flex:none;line-height:0}
.kopf__logo img{width:auto;height:46px}
.kopf__nav{display:flex;gap:1.55rem;margin-left:auto}
.kopf__nav a{position:relative;text-decoration:none;font-size:.95rem;font-weight:500;color:rgba(234,246,255,.86)}
.kopf__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--eis);transition:right .28s var(--ease)}
.kopf__nav a:hover::after{right:0}
.kopf__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;color:#fff;font-size:.98rem}
.kopf__tel svg{width:18px;height:18px;color:var(--eis)}
.kopf .btn{--h:46px;padding-inline:1.05rem;font-size:.95rem}
.kopf__ikon{display:none}
.kopf__ikon span{display:none}
.kopf.ist-fest{background:rgba(7,20,39,.74);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(201,234,255,.1);padding-block:.55rem}
.kopf.ist-fest .kopf__logo img{height:40px}

/* ---------- Hero ---------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--n0);min-height:min(920px,100svh);display:flex;align-items:center;
  padding:clamp(118px,11vw,150px) 0 clamp(120px,10vw,150px)}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:52% 60%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 50% 60% at 18% 40%,rgba(5,127,199,.16),rgba(5,127,199,0) 70%),
    linear-gradient(90deg,rgba(4,11,22,.94) 0%,rgba(4,11,22,.8) 36%,rgba(7,20,39,.35) 62%,rgba(4,11,22,.55) 82%,rgba(4,11,22,.8) 100%),
    linear-gradient(180deg,rgba(4,11,22,.6) 0%,rgba(4,11,22,0) 24%,rgba(4,11,22,0) 62%,var(--n1) 100%)}
.hero__raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,4vw,4rem);align-items:center;width:min(var(--wrap),100% - 40px);margin-inline:auto}
.hero h1.hero__kicker{display:block;margin:0 0 1rem;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--eis);padding-top:0}
.hero__ansage{font-size:clamp(2.45rem,1.4rem + 3.3vw,3.8rem);line-height:1.06;letter-spacing:-.036em;font-weight:500;color:#fff}
.hero__ansage em{font-style:normal;display:block;margin-top:.3em;background:linear-gradient(95deg,var(--eis) 0%,var(--eis-2) 55%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hero__text{margin-top:1.15rem;font-size:.97rem;line-height:1.6;max-width:31rem;color:var(--t)}
.hero .haken{margin-top:1.45rem}
.hero .haken li{font-size:.99rem}
.hero__vertrauen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;margin-top:1.6rem;font-size:.9rem;color:var(--t)}
.hero__vertrauen > span{display:inline-flex;align-items:center;gap:.45rem}
.hero__vertrauen > span > svg{width:17px;height:17px;color:var(--eis)}
.sterne{display:inline-flex;gap:2px;color:#F5B301}
.sterne svg{width:15px;height:15px;color:#F5B301}
.ul{position:relative;display:inline-block;white-space:nowrap}
.ul::after{content:"";position:absolute;left:-.02em;right:-.04em;top:calc(100% - .19em);height:.24em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11.5C40 7.5 92 5 198 3.2c-44 3.6-90 6.4-126 9.6C48 14.6 20 14.8 2 11.5Z' fill='%238FD0F7'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e-calm) .7s}
.hero.ist-da .ul::after,html:not(.js) .ul::after{clip-path:inset(0 0 0 0)}
html.js .hero .st{opacity:0;transform:translateY(10px);transition:opacity .6s var(--e-soft),transform .6s var(--e-soft)}
html.js .hero.ist-da .st{opacity:1;transform:none}
.hero.ist-da .st:nth-child(2){transition-delay:.08s}.hero.ist-da .st:nth-child(3){transition-delay:.16s}
.hero.ist-da .st:nth-child(4){transition-delay:.24s}.hero.ist-da .st:nth-child(5){transition-delay:.32s}
.hero.ist-da .st:nth-child(6){transition-delay:.4s}.hero.ist-da .st:nth-child(7){transition-delay:.48s}.hero.ist-da .st--karte{transition-delay:.22s}


/* ---------- Quiz-Karte (Glas) --------------------------------------------- */
.qk{position:relative;border-radius:var(--r-gross);padding:clamp(1.35rem,2.2vw,1.9rem);color:var(--t)}
.qk :is(h2,h3,h4){color:#fff}
.qk__kopf{padding-right:90px}
.qk__titel{font-size:1.32rem;line-height:1.2;letter-spacing:-.018em}
.qk__unter{margin-top:.3rem;font-size:.9rem;color:var(--t)}
.stoerer{position:absolute;top:-24px;right:18px;z-index:3;width:98px;height:98px;border-radius:999px;display:grid;place-content:center;text-align:center;padding:8px;
  background:radial-gradient(circle at 30% 25%,#fff,var(--eis-2) 55%,var(--eis) 100%);color:var(--n1);transform:rotate(8deg);
  box-shadow:0 12px 30px -10px rgba(143,208,247,.55),inset 0 0 0 1px rgba(255,255,255,.6)}
.stoerer b{display:block;font-size:1.65rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--n1)}
.stoerer span{display:block;margin-top:.15rem;font-size:.64rem;font-weight:700;line-height:1.15;color:var(--n1)}
.fortschritt{margin:1.15rem 0 1rem}
.fortschritt__zeile{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--t-h)}
.fortschritt__bahn{margin-top:.45rem;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.fortschritt__f{height:100%;width:33%;border-radius:999px;background:linear-gradient(90deg,var(--blau),var(--eis));transition:width .45s var(--e-soft)}
.schritt{display:none;border:0;margin:0;padding:0;min-width:0}
.schritt.ist-an{display:block;animation:reinSchritt .34s var(--e-soft)}
@keyframes reinSchritt{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.schritt__frage{font-size:1.02rem;font-weight:600;color:#fff;margin-bottom:.8rem;line-height:1.35;padding:0}
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.pick{display:flex;align-items:center;gap:.6rem;min-height:56px;padding:.55rem .75rem;border:1px solid var(--glas-rand);border-radius:var(--r-klein);
  background:rgba(255,255,255,.05);text-align:left;cursor:pointer;font-size:.9rem;font-weight:600;line-height:1.2;color:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .18s var(--spring)}
.pick:hover{border-color:var(--eis);background:rgba(143,208,247,.1)}
.pick:active{transform:scale(.98)}
.pick svg{width:26px;height:26px;flex:none;color:var(--eis)}
.pick.ist-gewaehlt{border-color:var(--eis);background:rgba(143,208,247,.16);box-shadow:inset 0 0 0 1px var(--eis)}
.pick--multi{position:relative;padding-right:2rem}
.pick--multi::after{content:"";position:absolute;right:.7rem;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;border:1.5px solid var(--glas-rand-2)}
.pick--multi.ist-gewaehlt::after{background:var(--eis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23071427' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--eis)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.95rem}
.chips__t{width:100%;font-size:.85rem;font-weight:600;color:var(--t-h);margin-bottom:.1rem}
.chip{min-height:44px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--glas-rand);background:rgba(255,255,255,.05);cursor:pointer;font-size:.85rem;font-weight:600;color:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.chip:hover{border-color:var(--eis)}
.chip.ist-gewaehlt{background:var(--eisweiss);border-color:var(--eisweiss);color:var(--n1)}
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.feld{display:grid;gap:.28rem}
.feld--voll{grid-column:1/-1}
.feld label{font-size:.8rem;font-weight:600;color:var(--t-h)}
.feld input{width:100%;min-height:48px;padding:.6rem .8rem;border:1px solid var(--glas-rand-2);border-radius:var(--r-knopf);background:rgba(4,11,22,.35);
  font:inherit;font-size:16px;color:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.feld input:focus{outline:none;border-color:var(--eis);box-shadow:0 0 0 3px rgba(143,208,247,.2)}
.feld input.ist-falsch{border-color:#FF8C8C;animation:ruetteln .38s var(--ease)}
@keyframes ruetteln{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}45%{transform:translateX(4px)}68%{transform:translateX(-2px)}86%{transform:translateX(2px)}}
.zustimmung{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.55rem;margin-top:.8rem;font-size:.78rem;line-height:1.45;color:var(--t)}
.zustimmung input{width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--eis)}
.zustimmung a{color:var(--eis-2)}
.topf{display:none!important}
.qk__steuer{display:flex;gap:.55rem;margin-top:1.05rem}
.qk__steuer .btn{--h:52px;flex:1}
.qk__steuer .zurueck{flex:0 0 auto;display:none;padding-inline:.95rem}
.qk__steuer .zurueck.ist-an{display:inline-flex}
.qk__fehler{display:none;margin-top:.7rem;padding:.55rem .75rem;border-radius:var(--r-knopf);background:rgba(255,120,120,.14);border:1px solid rgba(255,140,140,.35);color:#FFD7D7;font-size:.85rem;font-weight:600}
.qk__fehler.ist-an{display:block}
.qk__vertrauen{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .9rem;margin-top:.95rem;font-size:.85rem;font-weight:700;color:#fff}
.qk__vertrauen span{display:inline-flex;align-items:center;gap:.35rem}
.qk__vertrauen svg{width:15px;height:15px;color:var(--eis)}
.qk [hidden]{display:none!important}
.danke{text-align:center;padding:1.2rem .4rem .4rem}
.danke__ic{width:64px;height:64px;margin:0 auto 1rem;border-radius:999px;background:rgba(95,211,154,.16);display:grid;place-items:center}
.danke__ic svg{width:32px;height:32px}
.danke__ic path{fill:none;stroke:var(--gut);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:hakenZ .7s var(--e-calm) .15s forwards}
@keyframes hakenZ{to{stroke-dashoffset:0}}
.danke h3{font-size:1.3rem}
.danke p{margin-top:.6rem;font-size:.95rem}
.danke .btn{margin-top:1.1rem}
.btn.laedt{pointer-events:none;opacity:.85}
.btn.laedt::before{content:"";width:16px;height:16px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Glas-Leiste am Hero-Rand --------------------------------------- */
.leiste{position:relative;z-index:3;margin-top:-72px}
.leiste__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-karte)}
.leiste__i{display:flex;gap:.85rem;align-items:flex-start;padding:1.35rem 1.3rem}
.leiste__i + .leiste__i{border-left:1px solid var(--glas-rand)}
.leiste__i svg{width:28px;height:28px;flex:none;color:var(--eis)}
.leiste__i b{display:block;font-weight:500;font-size:1rem;color:#fff;line-height:1.3}
.leiste__i span{display:block;margin-top:.15rem;font-size:.86rem;line-height:1.45;color:var(--t)}
.leiste__i .lic{width:30px;height:30px;margin-top:-1px;overflow:visible}
.lic path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition-property:stroke-dashoffset;transition-duration:1.15s;transition-timing-function:var(--e-calm);transition-delay:var(--d,0ms)}
.lic .lic__x{transition-duration:.8s;transition-delay:calc(var(--d,0ms) + 450ms)}
html:not(.js) .lic path,.leiste__raster.is-da .lic path{stroke-dashoffset:0}
.lic__zeiger,.lic__flocke{transform-box:view-box;transform-origin:12px 12px}
/* Schleife erst 2,4 s nach dem Zeichnen und nur im Bild; Bewegung im ersten Viertel, jedes Icon eigener Takt */
.leiste.is-loop.loop-an .lic--haus .lic__f{animation:licFenster 8s var(--ease) infinite;animation-delay:calc(var(--w,0) * 140ms)}
.lic--haus .lic__f:nth-of-type(5){--w:1}.lic--haus .lic__f:nth-of-type(6){--w:2}.lic--haus .lic__f:nth-of-type(7){--w:3}.lic--haus .lic__f:nth-of-type(8){--w:4}
.leiste.is-loop.loop-an .lic--uhr .lic__zeiger{animation:licDreh 8s var(--e-soft) 2s infinite}
.leiste.is-loop.loop-an .lic--doku .lic__z{animation:licZeile 8s var(--e-calm) infinite;animation-delay:calc(4s + var(--z,0) * 160ms)}
.lic--doku .lic__z:nth-of-type(4){--z:1}.lic--doku .lic__z:nth-of-type(5){--z:2}
.leiste.is-loop.loop-an .lic--flocke .lic__flocke{animation:licFlocke 8s var(--e-soft) 6s infinite}
.leiste.loop-ruhe .lic path,.leiste.loop-ruhe .lic g{animation-play-state:paused!important}
@keyframes licFenster{0%,14%,100%{opacity:1}5%{opacity:.18}}
@keyframes licDreh{0%{transform:rotate(0)}18%,100%{transform:rotate(360deg)}}
@keyframes licZeile{0%{stroke-dashoffset:100}14%,100%{stroke-dashoffset:0}}
@keyframes licFlocke{0%{transform:rotate(0)}16%,100%{transform:rotate(60deg)}}
@media (hover:hover){.leiste__raster.is-da .leiste__i:hover .lic path{animation:licNeu .9s var(--e-calm) both}}
@keyframes licNeu{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---------- Bewertungen ----------------------------------------------------- */
.gpille{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem;border-radius:999px;background:var(--glas-2);border:1px solid var(--glas-rand);color:#fff;font-weight:700;font-size:.95rem}
.gpille svg{width:20px;height:20px}
.band{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band__spur{display:flex;gap:16px;width:max-content;padding-block:.4rem}
.band.laeuft .band__spur{animation:band 62s linear infinite}
.band:hover .band__spur{animation-play-state:paused}
@keyframes band{to{transform:translateX(calc(-50% - var(--naht,8px)))}}
.bkarte{width:min(360px,82vw);flex:none;padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;border-radius:var(--r-karte);
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--glas-rand)}
.bkarte p{font-size:.95rem;line-height:1.6;color:var(--t-h)}
.bkarte__fuss{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.avatar{width:38px;height:38px;border-radius:999px;background:rgba(143,208,247,.14);color:var(--eis-2);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.bkarte__fuss b{display:block;color:#fff;font-size:.92rem}
.bkarte__fuss span{font-size:.8rem;color:var(--t-2)}
.bkarte__g{margin-left:auto;width:20px;height:20px}
.band-hinweis{margin-top:1.3rem;text-align:center;font-size:.82rem;color:var(--t-2)}
.band-hinweis__link{display:table;margin:.3rem auto 0;font-weight:600;color:var(--eis-2)}

/* ---------- Leistungen: Karussell ------------------------------------------------ */
.lb{position:relative;--l:clamp(.85rem,.4rem + 1.4vw,1.35rem)}
.lb__spur{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--l)) / 3);gap:var(--l);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.2rem 0 .3rem}
.lb__spur::-webkit-scrollbar{display:none}
.lb__spur:focus-visible{outline:3px solid var(--eis);outline-offset:4px;border-radius:var(--r-karte)}
@media (hover:hover) and (pointer:fine){.lb__spur{cursor:grab}}
.lb__spur.zieht{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.lbk{scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-karte);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03) 62%,rgba(255,255,255,.05));border:1px solid var(--glas-rand)}
.lbk__bild{aspect-ratio:16/10;overflow:hidden;background:var(--n2)}
.lbk__bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-calm);-webkit-user-drag:none;user-select:none}
@media (hover:hover){.lbk:hover .lbk__bild img{transform:scale(1.04)}}
.lbk__text{display:flex;flex-direction:column;gap:.7rem;flex:1;padding:clamp(1.15rem,1rem + .6vw,1.5rem)}
.lbk h3{font-size:1.18rem;font-weight:500;line-height:1.3;color:var(--t-h)}
.lbk p{font-size:.94rem;line-height:1.62;color:var(--t)}
.lbk .haken{margin-top:.25rem;gap:.5rem}
.lbk .haken li{font-size:.92rem;line-height:1.45}
.lb__pfeil{position:absolute;top:var(--pfeil-y,120px);z-index:4;width:46px;height:46px;margin-top:-23px;border-radius:999px;
  display:grid;place-items:center;border:1px solid var(--glas-rand-2);background:rgba(7,20,39,.78);color:#fff;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease)}
.lb__pfeil svg{width:18px;height:18px}
.lb__pfeil--z{left:10px}.lb__pfeil--z svg{transform:rotate(180deg)}
.lb__pfeil--v{right:10px}
.lb__pfeil:hover{background:var(--eisweiss);color:var(--n1)}
.lb__fuss{display:flex;align-items:center;gap:.9rem;margin-top:1.15rem}
.lb__knopf{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .85rem;border-radius:var(--r-knopf);
  border:1px solid var(--glas-rand-2);background:rgba(255,255,255,.05);color:#fff;font-family:var(--f-text);font-size:.85rem;font-weight:600;cursor:pointer}
.lb__knopf:hover{background:rgba(255,255,255,.1)}
.lb__knopf svg{width:15px;height:15px}
.lb__bahn{flex:1;max-width:280px;height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.lb__bahn i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--eis),var(--eis-2));transition:width .5s var(--ease)}
.lb__zahl{font-family:var(--f-mono);font-size:.85rem;color:var(--t-2);font-variant-numeric:tabular-nums}
.lb.ist-still .lb__pfeil,.lb.ist-still .lb__fuss{display:none}
html:not(.js) .lb__pfeil,html:not(.js) .lb__fuss{display:none}

/* ---------- Anfrage per WhatsApp -------------------------------------------------- */
.wa__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.wa__buehne{display:flex;justify-content:center;padding-block:1rem}
.wa__text .lead{margin-top:1rem}
.wa__punkte{margin-top:1.5rem;gap:.85rem}
.wa__punkte b{color:#fff;font-weight:600}
.handy{position:relative;width:min(344px,100%);border-radius:46px;padding:10px;
  background:linear-gradient(152deg,#FFFFFF 0%,#DCE4EB 26%,#F8FAFC 50%,#C8D2DC 76%,#EEF2F6 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.34),0 34px 80px -30px rgba(0,0,0,.9),0 14px 34px -20px rgba(0,0,0,.6)}
.handy__taste{position:absolute;width:3px;border-radius:2px;background:#C3CDD7}
.handy__taste--l{left:-3px;top:118px;height:46px;box-shadow:0 58px 0 0 #C3CDD7}
.handy__taste--r{right:-3px;top:156px;height:68px}
.handy__schirm{position:relative;border-radius:36px;overflow:hidden;border:2px solid #0B1016;background:#F0F2F5;display:flex;flex-direction:column}
.handy__status{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.62rem 1.3rem .3rem;background:#0F5D52;color:#fff;font-size:.72rem;font-weight:600;line-height:1}
.handy__insel{position:absolute;left:50%;top:6px;width:76px;height:19px;margin-left:-38px;border-radius:999px;background:#05080B}
.handy__sym{display:flex;align-items:center;gap:4px}
.handy__sym svg{display:block;color:#fff}
.handy__kopf{display:flex;align-items:center;gap:.65rem;padding:.55rem .9rem .7rem;background:#0F5D52;color:#fff}
.handy__kopf img{width:38px;height:38px;flex:none;border-radius:999px;background:#fff;object-fit:contain;padding:3px}
.handy__kopf > div{flex:1;min-width:0}
.handy__kopf b{display:block;font-size:.95rem;color:#fff;font-weight:600;line-height:1.25}
.handy__online{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:#D3F5E0}
.handy__online::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ADB78}
.handy__ruf{width:19px;height:19px;flex:none;color:#fff}
.handy__verlauf{position:relative;height:clamp(318px,31vw,410px);overflow:hidden;padding:.75rem .7rem;
  background:#EFEAE2 radial-gradient(rgba(17,27,33,.07) 1px,transparent 1px) 0 0/14px 14px}
.chat__flow{display:flex;flex-direction:column;gap:.45rem;transition:transform .55s var(--e-soft)}
html:not(.js) .handy__verlauf{display:flex;flex-direction:column;justify-content:flex-end}
.chat__tag{align-self:center;padding:.22rem .65rem;border-radius:999px;background:rgba(255,255,255,.95);color:#3E4C54;font-size:.68rem;line-height:1.3;margin-bottom:.1rem}
.msg{max-width:84%;padding:.55rem .75rem .45rem;border-radius:12px;font-size:.86rem;line-height:1.45;color:#111B21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg--in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.msg--out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:4px}
.msg time{display:block;text-align:right;margin-top:.15rem;font-size:.68rem;color:#3E4C54}
.msg--out time::after{content:" \2713\2713";color:#1F8FC9;letter-spacing:-.08em}
.msg--foto{padding:.3rem .3rem .25rem}
.msg--foto img{display:block;width:176px;height:200px;object-fit:cover;border-radius:9px}
.msg--foto time{padding-right:.3rem}
.chat__status{display:flex;align-items:center;gap:.65rem;margin-top:.35rem;padding:.7rem .8rem;border-radius:14px;background:#fff;color:#111B21;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.chat__status b{display:block;font-size:.86rem;line-height:1.3;color:#111B21}
.chat__status > span:last-child > span{display:block;font-size:.74rem;line-height:1.35;color:#3E4C54}
.chat__haken{width:28px;height:28px;flex:none;border-radius:50%;background:#1E9E57;display:grid;place-items:center;color:#fff}
.chat__haken svg{width:16px;height:16px}
.handy.is-schritt .msg,.handy.is-schritt .chat__status{display:none}
.handy.is-schritt .msg.is-da{display:block;animation:blaseAuf .5s var(--e-soft) both}
.handy.is-schritt .chat__status.is-da{display:flex;animation:blaseAuf .5s var(--e-soft) both}
@keyframes blaseAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tippt{align-self:flex-start;display:none;gap:4px;padding:.65rem .8rem;background:#fff;border-radius:12px}
.tippt.ist-an{display:inline-flex}
.tippt i{width:6px;height:6px;border-radius:50%;background:#8696A0;animation:tippen 1s infinite}
.tippt i:nth-child(2){animation-delay:.15s}.tippt i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.handy__eingabe{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem .55rem;background:#F0F2F5}
.handy__eingabe span{flex:1;padding:.55rem .9rem;border-radius:999px;background:#fff;font-size:.8rem;color:#5E6E77}
.handy__eingabe i{width:36px;height:36px;border-radius:999px;background:#0F5D52;display:grid;place-items:center}
.handy__eingabe svg{width:18px;height:18px;color:#fff}
.handy__home{display:block;width:118px;height:4px;margin:.15rem auto .5rem;border-radius:999px;background:#1C2830}

/* ---------- Vergleich: Glas gegen Grau ----------------------------------------- */
.vgl__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.vglk{position:relative;border-radius:var(--r-gross);padding:1.8rem 1.7rem;display:flex;flex-direction:column}
.vglk__kopf{display:flex;align-items:center;gap:.9rem;min-height:58px;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--glas-rand)}
.vglk__kopf img{height:52px;width:auto}
.vglk--gut{border-color:var(--glas-rand-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(143,208,247,.22),0 40px 80px -40px rgba(5,127,199,.5)}
.vglk--grau{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--glas-rand)}
.vglk--grau .vglk__kopf b{display:block;font-weight:500;font-size:1.15rem;color:#fff;line-height:1.25}
.vglk--grau .vglk__kopf > div > span{display:block;font-size:.85rem;margin-top:.1rem;color:var(--t)}
.vglk__leer{width:48px;height:48px;border-radius:999px;background:rgba(201,234,255,.12);display:grid;place-items:center;flex:none}
.vglk__leer svg{width:24px;height:24px;color:var(--eis-2)}
.nein{display:grid;gap:.62rem;position:relative;z-index:1}
.nein li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.7rem;line-height:1.5;color:var(--t)}
.nein li::before{content:"";width:24px;height:24px;border-radius:999px;background:rgba(201,234,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%2393AAC1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.vgl__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.6rem;padding:1.3rem 1.5rem;border-radius:var(--r-karte)}
.vgl__fuss p{font-size:1rem;color:var(--t-h);max-width:40rem}
.vgl__fuss .knoepfe{margin-top:0}

/* ---------- Innen und außen (echte Fotos) --------------------------------------- */
.jahr__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.jahr__fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.jahr__fotos figure{margin:0;border-radius:var(--r-karte);overflow:hidden;aspect-ratio:3/4;border:1px solid var(--glas-rand)}
.jahr__fotos figure:nth-child(2),.jahr__fotos figure:nth-child(4){margin-top:34px}
.jahr__fotos img{width:100%;height:100%;object-fit:cover}
.jahr__zeile{margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--t-2)}
.jahr__zeile svg{width:16px;height:16px;color:var(--eis)}
.jahr .haken{margin-top:1.5rem}

/* ---------- Angebot als Glas-Gutschein ------------------------------------------ */
.gutschein{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:var(--r-gross)}
.gutschein::before{content:"";position:absolute;top:18px;bottom:18px;left:45%;width:0;border-left:2px dashed rgba(201,234,255,.26);z-index:2}
.gutschein__kerbe{position:absolute;left:45%;width:34px;height:34px;margin-left:-17px;border-radius:999px;background:var(--n1);z-index:3;border:1px solid var(--glas-rand)}
.gutschein__kerbe--o{top:-18px}.gutschein__kerbe--u{bottom:-18px}
.gutschein__links{padding:clamp(1.8rem,4vw,3rem)}
.gutschein__zahl{font-size:clamp(4.4rem,3rem + 5vw,7.4rem);font-weight:500;line-height:.95;letter-spacing:-.05em;background:linear-gradient(95deg,var(--eis) 0%,var(--eis-2) 55%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gutschein__zahl small{font-size:.34em;letter-spacing:-.02em;margin-left:.2em}
.gutschein__links h2{margin-top:.8rem;font-size:clamp(1.5rem,1.1rem + 1.2vw,1.95rem);line-height:1.2}
.gutschein__links p{margin-top:.8rem;font-size:.97rem}
.gutschein__rechts{padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center}
.gutschein__fussnote{margin-top:1.1rem;font-size:.8rem;line-height:1.5;color:var(--t-2)}

/* ---------- Ablauf auf der Eislinie --------------------------------------------- */
.ablauf__linie{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ablauf__linie::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,var(--blau),var(--eis));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e-calm) .2s}
.ablauf__linie.is-da::before{transform:scaleX(1)}
.schritt3{position:relative;padding-top:4.3rem}
.schritt3__nr{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:999px;display:grid;place-items:center;
  background:var(--n2);border:1px solid var(--glas-rand-2);box-shadow:0 0 0 7px var(--n1)}
.schritt3__nr svg{width:24px;height:24px;color:var(--eis)}
.schritt3 small{display:block;font-family:var(--f-mono);font-size:.78rem;color:var(--eis);margin-bottom:.3rem}
.schritt3 h3{font-size:1.12rem;line-height:1.3}
.schritt3 p{margin-top:.45rem;font-size:.93rem;line-height:1.55}

/* ---------- Einsatzgebiet ---------------------------------------------------------- */
.gebiet__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.gebiet .haken{margin-top:1.4rem}
.gebiet__karte{position:relative;margin:0 -14px}
.gebiet__karte img{width:100%;height:auto}

/* ---------- Anfrage ----------------------------------------------------------------- */
.anfrage{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(5,127,199,.16),rgba(5,127,199,0) 70%),var(--n0)}
.anfrage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.1;pointer-events:none;background:url("../img/hoehenlinien.svg") center/1400px auto no-repeat}
.anfrage__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.anfrage .haken{margin-top:1.5rem}
.anfrage__kontakt{margin-top:1.8rem;display:grid;gap:.6rem}
.anfrage__kontakt a{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;font-weight:600;font-size:1.02rem;min-height:44px}
.anfrage__kontakt a span{color:var(--t);font-weight:500;font-size:.88rem}
.anfrage__kontakt i{width:40px;height:40px;border-radius:999px;background:var(--glas-2);border:1px solid var(--glas-rand);display:grid;place-items:center;flex:none}
.anfrage__kontakt svg{width:19px;height:19px;color:var(--eis)}

/* ---------- Fragen ---------------------------------------------------------------- */
.fragen{overflow:hidden}
.fragen > .wrap{position:relative;z-index:1}
.faq__marke{position:absolute;right:-6%;top:50%;transform:translateY(-50%) rotate(-8deg);width:min(48vw,520px);height:auto;opacity:.045;pointer-events:none;z-index:0}
.faq__liste{display:grid;gap:.6rem;max-width:820px;margin-inline:auto}
.faq__i{border-radius:var(--r-klein);background:rgba(255,255,255,.04);border:1px solid var(--glas-rand)}
.faq__f{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:56px;padding:1.05rem 1.2rem;border:0;background:none;cursor:pointer;text-align:left;
  font-weight:500;font-size:1.03rem;line-height:1.35;color:#fff}
.faq__ic{width:32px;height:32px;flex:none;border-radius:999px;background:rgba(143,208,247,.12);display:grid;place-items:center;transition:background .24s var(--ease),transform .3s var(--spring)}
.faq__ic svg{width:15px;height:15px;color:var(--eis-2)}
.faq__i.ist-auf .faq__ic{background:var(--eisweiss);transform:rotate(45deg)}
.faq__i.ist-auf .faq__ic svg{color:var(--n1)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--e-calm)}
.faq__i.ist-auf .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 1.2rem 1.15rem;font-size:.96rem;line-height:1.65;max-width:44rem}
.faq__fuss{margin:2rem auto 0;max-width:820px;text-align:center;font-size:.95rem;line-height:1.6;color:var(--t)}
.faq__fuss a{color:var(--eis);font-weight:700;text-decoration:none;white-space:nowrap}
.faq__fuss a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Final-CTA ---------------------------------------------------------------- */
.final{position:relative;isolation:isolate;overflow:hidden;background:var(--n0);padding-block:clamp(90px,10vw,150px)}
.final__bild{position:absolute;inset:0;z-index:-2}
.final__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,11,22,.88) 0%,rgba(4,11,22,.55) 50%,rgba(4,11,22,.25) 100%),linear-gradient(180deg,var(--n1) 0%,rgba(4,11,22,0) 22%)}
.final__in{max-width:40rem;padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-gross)}
.final .h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.6rem)}
.final p{margin-top:1rem;font-size:1.02rem;color:var(--t-h)}

/* ---------- Fußzeile ------------------------------------------------------------------- */
.fuss{background:var(--n0);color:var(--t);padding:3.4rem 0 2.2rem;font-size:.92rem;border-top:1px solid rgba(201,234,255,.08)}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.fuss img{height:52px;width:auto}
.fuss p{margin-top:1rem;max-width:26rem;line-height:1.6}
.fuss h4{font-size:.95rem;color:#fff;margin-bottom:.4rem}
.fuss ul{display:grid;gap:0}
.fuss li{min-height:44px;display:flex;align-items:center}
.fuss a{text-decoration:none;color:var(--t)}
.fuss a:hover{color:#fff}
.fuss__unten{margin-top:2.2rem;padding-top:1rem;border-top:1px solid rgba(201,234,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 2rem;font-size:.84rem}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:0 1.3rem}
.fuss__unten nav a,.fuss__unten nav button{min-height:44px;display:inline-flex;align-items:center}
.fuss__unten button{background:none;border:0;padding:0;cursor:pointer;color:var(--t);font-size:.84rem}
.fuss__unten button:hover{color:#fff}

/* ---------- Kontaktknopf --------------------------------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--e-soft)}
.fab.weg{opacity:0;transform:translateY(12px)}
.fab.weg .fab__k{pointer-events:none}
.fab__aus{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.fab__l{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.5rem 1rem .5rem .6rem;border-radius:999px;background:var(--eisweiss);color:var(--n1);
  text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;
  transition:opacity .22s var(--ease),transform .3s var(--spring)}
.fab__l i{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:rgba(10,26,49,.08);flex:none}
.fab__l svg{width:19px;height:19px}
.fab__l--wa i{background:#25D366;color:#063A1C}
.fab__l--tel i{background:var(--n2);color:var(--eis)}
.fab.ist-auf .fab__l{opacity:1;transform:none;pointer-events:auto}
.fab__k{pointer-events:auto;width:60px;height:60px;border-radius:999px;border:1px solid var(--glas-rand-2);color:var(--n1);cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#fff,var(--eis-2) 60%,var(--eis) 100%);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:transform .2s var(--spring)}
.fab__k svg{width:26px;height:26px;transition:transform .3s var(--spring)}
.fab__k .i-zu{display:none}
.fab.ist-auf .fab__k .i-auf{display:none}
.fab.ist-auf .fab__k .i-zu{display:block}

/* ---------- Modal + Pop-up --------------------------------------------------------------- */
.modal,.pop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(2,6,13,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[hidden],.pop[hidden]{display:none}
.modal:not([hidden]),.pop:not([hidden]){animation:einblenden .3s var(--ease)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.modal__karte{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;animation:hoch .38s var(--spring);padding-top:14px}
@keyframes hoch{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal .qk{background:linear-gradient(150deg,#12294A,#0A1A31);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--glas-rand-2)}
.modal__zu,.pop__zu{position:absolute;top:26px;right:12px;z-index:4;width:40px;height:40px;border-radius:999px;border:1px solid var(--glas-rand-2);cursor:pointer;
  display:grid;place-items:center;background:rgba(4,11,22,.6);color:#fff}
.pop__zu{top:12px}
.modal__zu svg,.pop__zu svg{width:18px;height:18px}
.modal .qk .stoerer{top:-12px;right:64px}
.modal .qk__kopf{padding-right:150px}
body.overlay-offen{overflow:hidden}
.pop__karte{position:relative;width:min(430px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:var(--r-gross);text-align:center;
  background:linear-gradient(160deg,#12294A,#081628);border:1px solid var(--glas-rand-2);animation:hoch .38s var(--spring);color:var(--t)}
.pop__bild{position:relative;height:150px}
.pop__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:var(--r-gross) var(--r-gross) 0 0}
.pop__badge{position:absolute;left:50%;bottom:-1px;transform:translate(-50%,42%);width:98px;height:98px;padding:8px;border-radius:999px;display:grid;place-content:center;
  background:radial-gradient(circle at 30% 25%,#fff,var(--eis-2) 55%,var(--eis) 100%);color:var(--n1);box-shadow:0 0 0 4px #10254A}
.pop__badge b{font-weight:600;font-size:1.5rem;line-height:1;letter-spacing:-.03em;color:var(--n1)}
.pop__badge span{display:block;font-size:.62rem;font-weight:700;line-height:1.15;margin-top:.1rem;color:var(--n1)}
.pop__text{padding:3.6rem 1.6rem 1.5rem}
.pop__text h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;color:#fff}
.pop__text > p{margin-top:.6rem;font-size:.95rem;line-height:1.55;color:var(--t)}
.pop .haken{width:fit-content;margin:1rem auto 0;text-align:left}
.pop .haken li{font-size:.93rem}
.pop .haken li:nth-child(1){--ck-d:380ms}.pop .haken li:nth-child(2){--ck-d:530ms}.pop .haken li:nth-child(3){--ck-d:680ms}
.pop__knoepfe{display:grid;gap:.55rem;margin-top:1.2rem}
.pop__knoepfe .btn{width:100%}
.pop__trust{margin-top:.9rem;font-weight:700;font-size:.9rem;color:#fff}

/* ---------- Rechtsseiten + 404 --------------------------------------------------------- */
.r-seite{background:var(--papier);color:var(--tinte-2)}
.r-seite .kopf{background:rgba(7,20,39,.94);padding-block:.55rem}
.r-seite .kopf__logo img{height:40px}
.r-kopf{padding:clamp(120px,12vw,150px) 0 2.2rem;background:var(--n1)}
.r-kopf h1{font-size:clamp(2rem,1.4rem + 2vw,2.7rem);line-height:1.1;letter-spacing:-.03em;color:#fff}
.r-kopf p{margin-top:.6rem;max-width:40rem;color:var(--t)}
.r-zurueck{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.1rem;font-size:.9rem;font-weight:600;color:var(--eis-2);text-decoration:none}
.r-zurueck svg{width:17px;height:17px;transform:rotate(180deg)}
.r-text{max-width:46rem;padding:2.6rem 0 4.5rem}
.r-text h2{font-size:1.35rem;line-height:1.3;margin:2.2rem 0 .7rem;color:var(--tinte)}
.r-text h2:first-child{margin-top:0}
.r-text h3{font-size:1.08rem;line-height:1.35;margin:1.5rem 0 .5rem;color:var(--tinte)}
.r-text p,.r-text li{font-size:1rem;line-height:1.7;color:var(--tinte-2)}
.r-text p + p{margin-top:.7rem}
.r-text ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0 .8rem}
.r-text a{color:var(--navy)}
.r-box{margin:.8rem 0 1rem;padding:1.1rem 1.25rem;border-radius:var(--r-klein);background:#fff;border:1px solid var(--linie)}
.r-box p{margin:0}
.r-box p + p{margin-top:.2rem}
.r-text button.r-link{background:none;border:0;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit}
.fehlerseite{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 20px 60px;background:var(--n1)}
.fehlerseite h1{font-size:clamp(2rem,1.4rem + 2vw,2.8rem);line-height:1.12;color:#fff}
.fehlerseite p{margin:.8rem auto 0;max-width:30rem;color:var(--t)}
.fehlerseite .knoepfe{justify-content:center}

/* ---------- Responsiv ------------------------------------------------------------------ */
@media (max-width:1180px){
  .kopf__nav{display:none}
  .kopf__tel{margin-left:auto}
}
@media (max-width:1040px){
  .hero__raster,.jahr__raster,.gebiet__raster,.anfrage__raster{grid-template-columns:minmax(0,1fr)}
  .hero{min-height:0}
  .qk{max-width:560px}
  .leiste{margin-top:-40px}
  .leiste__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leiste__i:nth-child(3){border-left:0}
  .leiste__i:nth-child(n+3){border-top:1px solid var(--glas-rand)}
  .ablauf__linie{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .ablauf__linie::before{display:none}
  .gutschein{grid-template-columns:minmax(0,1fr)}
  .gutschein::before,.gutschein__kerbe{display:none}
  .jahr__fotos{max-width:640px}
  .vgl__raster{grid-template-columns:minmax(0,1fr)}
  .wa__raster{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:2rem}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap,.hero__raster{width:min(var(--wrap),100% - 32px)}
  .kopf{padding-block:.7rem}
  .kopf__in{gap:.6rem}
  .kopf__logo img{height:38px}
  .kopf.ist-fest .kopf__logo img{height:34px}
  .kopf__tel,.kopf .btn--p{display:none}
  .kopf__ikon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-knopf);background:rgba(255,255,255,.1);border:1px solid var(--glas-rand);color:#fff}
  .kopf__ikon:not(.kopf__ikon--wa){margin-left:auto}
  .kopf__ikon svg{width:21px;height:21px}
  .kopf__ikon--wa{background:#25D366;color:#063A1C;border-color:#25D366}
  .kopf__ikon--tel span{display:inline}
  .kopf__ikon--tel{width:auto;padding:0 .8rem;gap:.4rem;display:inline-flex;align-items:center;font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
  .kopf__ikon--tel svg{width:18px;height:18px;color:var(--eis)}
  .hero{padding-top:96px;padding-bottom:84px}
  .hero::before{background:linear-gradient(180deg,rgba(4,11,22,.7) 0%,rgba(4,11,22,.66) 45%,rgba(4,11,22,.9) 85%,var(--n1) 100%)}
  .hero__ansage{font-size:clamp(2.15rem,8.6vw,2.6rem)}
  .h2{font-size:clamp(1.5rem,6.5vw,1.85rem)}
  .knoepfe .btn{width:100%}
  .leiste{margin-top:-30px}
  .leiste__i{padding:1rem .85rem;gap:.55rem}
  .leiste__i .lic{width:22px;height:22px}
  .picks{grid-template-columns:minmax(0,1fr)}
  .felder{grid-template-columns:minmax(0,1fr)}
  .ablauf__linie{grid-template-columns:minmax(0,1fr)}
  .jahr__fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jahr__fotos figure:nth-child(4){margin-top:0}
  .jahr__fotos figure:nth-child(3){margin-top:-34px}
  .fuss__raster{grid-template-columns:minmax(0,1fr)}
  .stoerer{width:84px;height:84px;top:-18px;right:12px}
  .stoerer b{font-size:1.4rem}
  .qk__kopf{padding-right:78px}
  .vgl__fuss .knoepfe{width:100%}
  .final .h2{font-size:clamp(1.6rem,7.4vw,2rem)}
  .final__in{padding:1.3rem}
}

@media (max-width:1100px){
  .lb__spur{grid-auto-columns:calc((100% - var(--l)) / 2)}
}
@media (max-width:900px){
  .wa__raster{grid-template-columns:minmax(0,1fr);gap:2.4rem}
}
@media (max-width:620px){
  .lb__spur{grid-auto-columns:86%}
  .lb__pfeil{width:44px;height:44px;margin-top:-22px}
}

@media (max-width:380px){
  .hero__ansage{font-size:clamp(1.75rem,8.2vw,2.15rem)}
  .final__in{padding:1.1rem}
  .btn--lg{padding-inline:.9rem;font-size:.94rem}
}
@media (max-width:340px){
  .btn,.btn--lg{padding-inline:.7rem;font-size:.88rem;gap:.4rem}
}

/* ---------- Abschaltblock (BFSG) -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv,html.js .rv-g > *,html.js .hero .st{opacity:1;transform:none;transition:none}
  .ck path{stroke-dashoffset:0;transition:none}
  .ul::after{clip-path:none;transition:none}
  .frost::after{transition:none}
  .handy .msg,.handy .chat__status{animation:none!important;opacity:1;transform:none}
  .tippt{display:none!important}
  .lic path{stroke-dashoffset:0!important;transition:none!important;animation:none!important}
  .lic__zeiger,.lic__flocke{animation:none!important}
  .lbk__bild img{transition:none}
  .chat__flow,.lb__bahn i{transition:none}
  .band.laeuft .band__spur{animation:none}
  .band{overflow-x:auto}
  .ablauf__linie::before{transform:none;transition:none}
}

/* =========================================================================
   TAG-VARIANTE — helle Sektionen (.hell) und neue Bausteine der
   Unterhaltsreinigung: Reinigungsplan, Praxis-Teil, Glanz-Icon.
   ========================================================================= */
:root{--weiss:#fff;--schatten-karte:0 1px 2px rgba(10,26,49,.04),0 18px 36px -24px rgba(10,26,49,.06)}
body{background:var(--papier)}
.bg-weiss{background:#fff}
.bg-papier{background:var(--papier)}

.hell{color:var(--tinte-2)}
.hell :is(h2,h3,h4){color:var(--tinte)}
.hell .kicker{color:var(--navy)}
.hell h2 em{background:linear-gradient(95deg,var(--navy) 0%,var(--blau) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hell .lead,.hell p{color:var(--tinte-2)}
.hell .haken li{color:var(--tinte)}
.hell .haken b{color:var(--tinte);font-weight:600}
.hell .ck{background:rgba(21,74,126,.1)}
.hell .ck path{stroke:var(--navy)}
.hell .btn--p{background:var(--tinte);color:#fff}
.hell .btn--p:hover{background:var(--navy);box-shadow:0 0 0 5px rgba(21,74,126,.12)}
.hell .btn--s{background:#fff;color:var(--tinte);border-color:var(--linie)}
.hell .btn--s:hover{background:var(--papier);border-color:var(--navy)}
.hell :focus-visible{outline-color:var(--blau)}

/* Leiste: weiße Karte an der Hero-Kante */
.leiste__raster.karte-hell{background:#fff;border:1px solid var(--linie);box-shadow:0 1px 2px rgba(10,26,49,.05),0 26px 50px -30px rgba(10,26,49,.06)}
.karte-hell .leiste__i + .leiste__i{border-left-color:var(--linie)}
.karte-hell .leiste__i b{color:var(--tinte)}
.karte-hell .leiste__i span{color:var(--tinte-2)}
.karte-hell .leiste__i svg{color:var(--navy)}
.lic--glanz .lic__stern{transform-box:view-box;transform-origin:10.5px 11.5px}
.leiste.is-loop.loop-an .lic--glanz .lic__stern{animation:licGlanz 8s var(--e-soft) 6s infinite}
.leiste.is-loop.loop-an .lic--glanz .lic__funke{animation:licFunke 8s var(--ease) 6.2s infinite}
@keyframes licGlanz{0%{transform:rotate(0) scale(1)}8%{transform:rotate(45deg) scale(1.12)}16%,100%{transform:rotate(90deg) scale(1)}}
@keyframes licFunke{0%,100%{opacity:1}6%{opacity:.15}12%{opacity:1}}

/* Bewertungen hell */
.hell .gpille{background:#fff;border-color:var(--linie);color:var(--tinte)}
.hell .bkarte{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-karte)}
.hell .bkarte p{color:var(--tinte)}
.hell .bkarte__fuss b{color:var(--tinte)}
.hell .bkarte__fuss span{color:var(--tinte-2)}
.hell .avatar{background:rgba(21,74,126,.1);color:var(--navy)}
.hell .band-hinweis{color:var(--tinte-2)}
.hell .band-hinweis__link{color:var(--navy)}
.bewertungen.hell{padding-top:calc(var(--sek) * .8)}

/* Karussell hell */
.hell .lbk{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-karte)}
.hell .lbk__bild{background:var(--papier-2)}
.hell .lb__pfeil{background:rgba(255,255,255,.94);border-color:var(--linie);color:var(--tinte);box-shadow:0 8px 20px -12px rgba(10,26,49,.35)}
.hell .lb__pfeil:hover{background:var(--tinte);color:#fff}
.hell .lb__knopf{background:#fff;border-color:var(--linie);color:var(--tinte)}
.hell .lb__knopf:hover{background:var(--papier)}
.hell .lb__bahn{background:var(--papier-2)}
.hell .lb__bahn i{background:linear-gradient(90deg,var(--navy),var(--blau))}
.hell .lb__zahl{color:var(--tinte-2)}

/* Innen und außen hell */
.hell .jahr__fotos figure{border-color:var(--linie)}
.hell .jahr__zeile{color:var(--tinte-2)}
.hell .jahr__zeile svg{color:var(--navy)}

/* Angebot: Navy-Gutschein auf hellem Grund */
.gutschein--navy{background:linear-gradient(150deg,#12294A 0%,#0A1A31 70%);border:1px solid rgba(21,74,126,.5);box-shadow:0 24px 48px -30px rgba(10,26,49,.06)}
.gutschein--navy .gutschein__kerbe{background:#fff;border:0}
.gutschein--navy .haken li{color:var(--t-h)}

/* Ablauf hell */
.hell .schritt3__nr{background:#fff;border-color:var(--linie);box-shadow:0 0 0 7px var(--papier)}
.hell .schritt3__nr svg{color:var(--navy)}
.hell .schritt3 small{color:var(--navy)}
.hell .ablauf__linie::before{background:linear-gradient(90deg,var(--navy),var(--blau))}

/* Fragen hell */
.hell .faq__i{background:#fff;border-color:var(--linie)}
.hell .faq__f{color:var(--tinte)}
.hell .faq__ic{background:rgba(21,74,126,.08)}
.hell .faq__ic svg{color:var(--navy)}
.hell .faq__i.ist-auf .faq__ic{background:var(--tinte)}
.hell .faq__i.ist-auf .faq__ic svg{color:#fff}
.hell .faq__fuss{color:var(--tinte-2)}
.hell .faq__fuss a{color:var(--navy)}
.hell .faq__marke{opacity:.05}

/* ---------- Reinigungsplan (Beispielblatt mit Reitern) -------------------------- */
.plan__raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.plan .haken{margin-top:1.5rem}
.plan__buehne{display:flex;flex-direction:column;align-items:center;min-width:0}
.plan__reiter{display:inline-flex;gap:4px;padding:4px;margin-bottom:1.1rem;border-radius:999px;background:#fff;border:1px solid var(--linie);max-width:100%}
.plan__reiter button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem 1.05rem;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:var(--f-text);font-size:.92rem;font-weight:600;color:var(--tinte-2);white-space:nowrap;transition:background .22s var(--ease),color .22s var(--ease)}
.plan__reiter button svg{width:18px;height:18px;flex:none}
.plan__reiter button:hover{color:var(--tinte)}
.plan__reiter button[aria-selected="true"]{background:var(--tinte);color:#fff}
.planblatt{position:relative;width:min(560px,100%);background:#fff;border:1px solid var(--linie);border-radius:8px;padding:1.5rem 1.6rem 1.4rem;color:var(--tinte-2);
  box-shadow:0 44px 80px -44px rgba(10,26,49,.34);transform:rotate(-1.2deg);transition:transform .9s var(--e-calm)}
.plan__buehne.is-da .planblatt{transform:rotate(-.6deg)}
.planblatt__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:2px solid var(--tinte)}
.planblatt__kopf img{height:32px;width:auto}
.planblatt__kopf b{font-family:var(--f-mono);font-weight:500;font-size:.78rem;color:var(--tinte-2);text-align:right;line-height:1.35}
.planblatt [role="tabpanel"][hidden]{display:none}
.planblatt h3{margin-top:1rem;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;color:var(--tinte)}
.planblatt__meta{margin-top:.25rem;font-size:.8rem;color:var(--tinte-2)}
.planblatt__liste{margin-top:.8rem;display:grid}
.planzeile{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.58rem .1rem;border-bottom:1px solid var(--linie);font-size:.87rem;line-height:1.4;color:var(--tinte)}
.planzeile > svg{width:18px;height:18px}
.planzeile > svg rect{fill:none;stroke:var(--linie);stroke-width:1.6}
.planzeile > svg path{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .5s var(--e-calm) calc(var(--i,0) * 70ms + 200ms)}
.plan__buehne.is-da [role="tabpanel"]:not([hidden]) .planzeile > svg path{stroke-dashoffset:0}
.planzeile.laeuft{animation:zeileRein .42s var(--e-soft) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes zeileRein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.takt{font-family:var(--f-mono);font-size:.7rem;font-weight:500;line-height:1.2;padding:.28rem .6rem;border-radius:999px;white-space:nowrap}
.takt--jede{background:var(--tinte);color:#fff}
.takt--woche{background:rgba(5,127,199,.12);color:var(--navy)}
.takt--monat{background:#fff;color:var(--tinte-2);border:1px solid var(--linie)}
.planblatt__fuss{margin-top:1rem;font-size:.76rem;line-height:1.5;color:var(--tinte-2);padding-right:7.5rem}
.planblatt__stempel{position:absolute;right:1.2rem;bottom:1.1rem;padding:.35rem .7rem;border:2px solid #16704A;border-radius:6px;color:#16704A;font-family:var(--f-mono);font-weight:500;font-size:.78rem;transform:rotate(-8deg);opacity:.9}
.plan__legende{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-top:1.1rem;font-size:.82rem;color:var(--tinte-2)}
.plan__legende span{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Praxisreinigung ------------------------------------------------------ */
.praxis__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.praxis__bild{position:relative;margin:0}
.praxis__bild img{width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-gross)}
.praxis__chip{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem .7rem .75rem;border-radius:var(--r-klein);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--tinte);font-weight:600;font-size:.9rem;line-height:1.3;
  box-shadow:0 14px 34px -18px rgba(10,26,49,.4)}
.praxis__chip i{width:30px;height:30px;flex:none;border-radius:999px;background:#1E9E57;display:grid;place-items:center;color:#fff}
.praxis__chip svg{width:16px;height:16px}
.praxis__punkte{margin-top:1.7rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 1.5rem}
.ppunkt{display:grid;align-content:start;gap:.5rem}
.ppunkt__ic{width:44px;height:44px;border-radius:var(--r-klein);background:rgba(21,74,126,.08);display:grid;place-items:center;color:var(--navy)}
.ppunkt__ic svg{width:22px;height:22px}
.ppunkt h3{font-size:1.03rem;line-height:1.3}
.ppunkt p{font-size:.93rem;line-height:1.55}

/* ---------- Innen und außen: Link zur Winterdienst-Seite -------------------------- */
.jahr__winter{margin-top:1.6rem;display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:var(--r-karte);background:#fff;border:1px solid var(--linie)}
.jahr__winter i{width:44px;height:44px;flex:none;border-radius:var(--r-klein);background:var(--tinte);display:grid;place-items:center;color:var(--eis)}
.jahr__winter i svg{width:22px;height:22px}
.jahr__winter p{font-size:.93rem;line-height:1.5;color:var(--tinte-2)}
.jahr__winter p b{color:var(--tinte);font-weight:600}
.jahr__winter a{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;font-size:.92rem;color:var(--navy);text-decoration:none;white-space:nowrap}
.jahr__winter a svg{width:18px;height:18px;transition:transform .25s var(--spring)}
.jahr__winter a:hover svg{transform:translateX(3px)}

@media (max-width:1040px){
  .plan__raster,.praxis__raster{grid-template-columns:minmax(0,1fr)}
  .praxis__bild{max-width:640px}
}
@media (max-width:760px){
  .praxis__punkte{grid-template-columns:minmax(0,1fr)}
  .planblatt{padding:1.2rem 1.05rem 1.1rem;transform:none}
  .plan__buehne.is-da .planblatt{transform:none}
  .planzeile{grid-template-columns:18px minmax(0,1fr);row-gap:.3rem}
  .planzeile .takt{grid-column:2;justify-self:start}
  .planblatt__fuss{padding-right:0;margin-bottom:2.4rem}
  .plan__reiter{width:100%}
  .plan__reiter button{flex:1;justify-content:center;padding-inline:.5rem;font-size:.88rem}
  .plan__reiter button svg{display:none}
  .jahr__winter{flex-wrap:wrap}
  .jahr__winter a{margin-left:0}
  .leiste__raster.karte-hell .leiste__i{padding:1rem .85rem}
}
@media (max-width:1040px){
  .karte-hell .leiste__i:nth-child(n+3){border-top-color:var(--linie)}
}
@media (prefers-reduced-motion:reduce){
  .planblatt,.plan__buehne.is-da .planblatt{transition:none;transform:none}
  .planzeile.laeuft{animation:none}
  .planzeile > svg path{stroke-dashoffset:0;transition:none}
  .lic__stern,.lic__funke{animation:none!important}
}

/* ---------- Nachtrag 28.09.2026 (Florian): Pop-up-Knöpfe und Leiste mobil ---------------- */
.pop__knoepfe{grid-template-columns:minmax(0,1fr)}
.pop__knoepfe .btn{white-space:normal;text-align:center;line-height:1.25}
@media (max-width:420px){
  .pop__text{padding:3.4rem 1.1rem 1.3rem}
  .pop__knoepfe .btn{padding-inline:1rem}
  .pop__lang{display:none}
}
@media (max-width:760px){
  .leiste__i{flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.05rem .7rem 1.1rem}
  .leiste__i .lic{width:28px;height:28px;margin-top:0}
  .leiste__i b{font-size:.9rem;line-height:1.3}
  .leiste__i span{font-size:.78rem;line-height:1.4;margin-top:.2rem}
}
/* Hero: Google-Bewertung mittig unter den beiden Knöpfen */
.hero__aktion{width:fit-content;max-width:100%}
.hero__aktion .hero__vertrauen{justify-content:center;margin-top:1.25rem}
/* Handy-Mockup: Proportion wie ein echtes Smartphone, etwa 2 : 1 (Florian 28.09.2026) */
.handy{width:min(330px,100%)}
.handy__verlauf{height:clamp(460px,128vw,530px)}
@media (min-width:761px){.leiste__i .nw{display:inline;white-space:nowrap;margin:0;font-size:inherit;color:inherit}}
.leiste__i .nw{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}