/* Entwurf 3 · Sauber: hell, Wasserblau, runde Formen, viel Weissraum. */
:root{
  --weiss:#ffffff; --eis:#eaf6f8; --tief:#0b3550; --leise:#4d6b7d; --aqua:#0e9bb3; --aqua-hell:#c9edf2; --ok:#12915a; --linie:rgb(11 53 80 / .14); --fehler:#c0392b;
  --sans:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1rem,4vw,4rem); --max:82rem; --hdr:4.5rem; --r:1.25rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 1rem);background:var(--weiss)}
body{margin:0;color:var(--tief);background:var(--weiss);font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
ul,ol{list-style:none}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:.1875rem solid var(--aqua);outline-offset:.1875rem}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:0;z-index:40;background:var(--tief);color:#fff;padding:.75rem 1rem;border-radius:.5rem}
.skip:focus{left:1rem;top:1rem}
.ph{background:linear-gradient(transparent 60%,#ffe680 60%)}
.klein{font-size:.82rem;color:var(--leise)}
.kicker,.feld-name{font-weight:600;font-size:.85rem;letter-spacing:.01em;color:var(--aqua)}
.feld-name{color:var(--leise)}
.tag{display:inline-block;margin-left:.4rem;padding:.1rem .55rem;border-radius:99rem;background:var(--aqua-hell);color:var(--tief);font-size:.72rem;font-weight:600;vertical-align:middle}
.ok{flex:none;position:relative;display:inline-block;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--ok)}
.ok::after{content:"";position:absolute;left:27%;top:30%;width:44%;height:22%;border-left:.16rem solid #fff;border-bottom:.16rem solid #fff;transform:rotate(-45deg)}
.ok.gross{width:3.6rem;height:3.6rem;animation:plopp .5s cubic-bezier(.22,1.4,.36,1) both}
.ok.gross::after{border-width:.3rem}
@keyframes plopp{from{transform:scale(.3);opacity:0}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1.5rem;border:.125rem solid var(--tief);border-radius:99rem;background:var(--tief);color:#fff;font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:background .15s linear,color .15s linear,transform .15s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--aqua);border-color:var(--aqua);transform:translateY(-.0625rem)}
.btn-hell{background:transparent;color:var(--tief)}
.btn-hell:hover{background:var(--tief);border-color:var(--tief);color:#fff}
.btn.voll{width:100%}

.hdr{position:sticky;top:0;z-index:30;background:rgb(255 255 255 / .92);backdrop-filter:blur(.6rem);-webkit-backdrop-filter:blur(.6rem);border-bottom:1px solid var(--linie)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;min-height:var(--hdr)}
.logo{display:inline-flex;align-items:center;gap:.7rem;min-height:2.75rem;text-decoration:none}
.logo-mark{width:2.3rem;height:2.3rem;border-radius:50% 50% 50% .3rem;background:var(--aqua);transform:rotate(-45deg)}
.logo b{display:block;font-weight:700;font-size:1.1rem;line-height:1.1;letter-spacing:-.01em}
.logo small{display:block;font-size:.76rem;color:var(--leise)}
.nav{display:flex;gap:.2rem 1.8rem}
.nav a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:500;font-size:.98rem;text-decoration:none;color:var(--leise)}
.nav a:hover{color:var(--tief)}
.hdr-tel{min-height:2.75rem;padding-block:.4rem}

.hero{padding:clamp(2rem,5vw,4.5rem) 0 clamp(2.5rem,6vw,5rem);background:radial-gradient(60rem 40rem at 85% 10%,var(--eis),transparent 70%)}
.hero-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:2.5rem clamp(1.5rem,5vw,5rem);align-items:center}
.marke-zeile{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem;border:1px solid var(--linie);border-radius:99rem;font-weight:600;font-size:.88rem;background:#fff}
.punkt{width:.55rem;height:.55rem;border-radius:50%;background:var(--ok)}
h1{margin:1.4rem 0 1.4rem;font-weight:700;font-size:clamp(3rem,7.6vw,6.4rem);line-height:.96;letter-spacing:-.04em}
h1 span{color:var(--aqua)}
.lead{max-width:34rem;color:var(--leise);font-size:clamp(1.1rem,.9rem + .7vw,1.4rem);line-height:1.4}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--linie);font-size:.92rem;color:var(--leise);line-height:1.3}
.fakten b{display:block;margin-bottom:.2rem;font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.03em;color:var(--tief)}
.blase{position:relative;border-radius:calc(var(--r) * 2);background:linear-gradient(160deg,#f3fbfc,var(--eis) 55%,#d8eff3)}
.buehne{aspect-ratio:1/1.02;--k-body:#0f8aa5;--k-tuer:#19a5c0;--k-dach:#ffffff;--k-sockel:#16425b;--k-schrift:#ffffff}
.kabine-ersatz{padding:5%}
.kabine-ersatz text{font-family:var(--sans)}
.karte-nachweis{position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem .7rem .8rem;border-radius:1rem;background:#fff;box-shadow:0 .9rem 2rem -1rem rgb(11 53 80 / .45);pointer-events:none}
.karte-nachweis small,.handy-status small{display:block;font-size:.74rem;color:var(--leise);line-height:1.2}
.karte-nachweis b,.handy-status b{display:block;font-weight:700;font-size:.98rem;line-height:1.25}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
html:not(.js) .chips{display:none}
.chip{min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--linie);border-radius:99rem;background:#fff;font-weight:600;font-size:.9rem;cursor:pointer;transition:background .15s linear,color .15s linear,border-color .15s linear}
.chip:hover{border-color:var(--aqua)}
.chip[aria-pressed=true]{background:var(--tief);border-color:var(--tief);color:#fff}
.chip.leise{border-style:dashed}

.sec{padding:clamp(3.5rem,8vw,7rem) 0}
.sec.eis{background:var(--eis)}
.sec.tief{background:var(--tief);color:#fff}
.sec.tief .kicker{color:#7fe0ee}
.sec.tief .lead{color:#c5dbe6}
h2{max-width:17em;margin-top:.7rem;font-weight:700;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h3{font-weight:700;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
.karte{padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--linie);border-radius:var(--r);background:#fff}

.reinigung{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2rem clamp(1.5rem,4vw,4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.griffe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;counter-reset:g}
.griffe li{counter-increment:g;position:relative;padding:1.2rem 1.2rem 1.2rem 4.2rem;border-radius:var(--r);background:var(--eis);color:var(--leise);font-size:.96rem;line-height:1.4}
.griffe li::before{content:counter(g);position:absolute;left:1.1rem;top:1.1rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;color:var(--aqua);font-weight:700}
.griffe b{display:block;margin-bottom:.2rem;font-size:1.1rem;color:var(--tief)}
.nachweis{padding:clamp(1.2rem,3vw,1.8rem);border-radius:var(--r);border:1px solid var(--linie);box-shadow:0 1.6rem 3rem -2rem rgb(11 53 80 / .4)}
.log{display:grid;margin:1rem 0}
.log li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.log li:first-child{border-top:1px solid var(--linie)}
.log .ok{width:1.3rem;height:1.3rem}
.log em{font-style:normal;font-weight:600;font-size:.82rem;color:var(--ok)}
.log span[data-l]{color:var(--leise)}

.qr-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:2.5rem clamp(1.5rem,6vw,6rem);align-items:center}
.handy{justify-self:center;width:min(100%,20rem);padding:1.1rem;border:.5rem solid #06202f;border-radius:2.6rem;background:#fff;color:var(--tief);box-shadow:0 2.5rem 4rem -2rem rgb(0 0 0 / .6)}
.handy-kopf{padding:.9rem 1rem;border-radius:1.4rem;background:var(--eis)}
.handy-kopf span{display:block;font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.handy-kopf small{font-size:.8rem;color:var(--leise)}
.handy-status{display:flex;align-items:center;gap:.7rem;padding:1rem .3rem;border-bottom:1px solid var(--linie)}
.handy-frage{margin:1rem .3rem .6rem;font-weight:700}
.handy-knoepfe{display:grid;gap:.5rem}
.handy-knoepfe button{min-height:3rem;padding:.5rem 1rem;border:1px solid var(--linie);border-radius:1rem;background:#fff;font-weight:600;text-align:left;cursor:pointer;transition:background .15s linear,color .15s linear}
.handy-knoepfe button:hover{border-color:var(--aqua)}
.handy-knoepfe button[aria-pressed=true]{background:var(--tief);border-color:var(--tief);color:#fff}
.handy-meldung{margin-top:.8rem;padding:.8rem 1rem;border-radius:1rem;background:#e3f6ec;color:#0b5c39;font-weight:600;font-size:.92rem;line-height:1.35;animation:plopp .35s cubic-bezier(.22,1.2,.36,1) both}
.handy-fuss{margin-top:.9rem;text-align:center;font-size:.78rem;color:var(--leise)}
.qr-text .lead{margin-top:1.2rem}
.haken-liste{display:grid;gap:.7rem;margin-top:1.6rem;color:#dbeaf1}
.haken-liste li{position:relative;padding-left:1.9rem}
.haken-liste li::before{content:"";position:absolute;left:.15rem;top:.45em;width:.8rem;height:.4rem;border-left:.15rem solid #7fe0ee;border-bottom:.15rem solid #7fe0ee;transform:rotate(-45deg)}
.qr-code{display:flex;align-items:center;gap:1.1rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgb(255 255 255 / .2)}
.qr-code svg{flex:none;width:6rem;height:6rem;padding:.5rem;border-radius:.8rem;background:#fff;color:var(--tief)}
.qr-code p{font-size:.9rem;color:#c5dbe6;line-height:1.4}
.qr-code b{display:block;font-size:1.1rem;color:#fff}

.preis-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:1.5rem clamp(1rem,3vw,2.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.feld{display:grid;gap:.5rem;align-content:start}
.feld.breit{grid-column:1/-1}
.zaehler{display:inline-flex;justify-self:start;border:1px solid var(--linie);border-radius:99rem;background:#fff;overflow:hidden}
.zaehler button{width:3rem;min-height:3rem;border:0;background:transparent;font-size:1.4rem;font-weight:500;line-height:1;cursor:pointer}
.zaehler button:hover:not(:disabled){background:var(--eis)}
.zaehler button:disabled{opacity:.3;cursor:default}
.zaehler input{width:3.6rem;border:0;background:transparent;text-align:center;font-weight:700;font-size:1.25rem;-moz-appearance:textfield;appearance:textfield}
.zaehler input::-webkit-outer-spin-button,.zaehler input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wahlreihe{display:flex;flex-wrap:wrap;gap:.5rem}
.wahlreihe label{position:relative;cursor:pointer}
.wahlreihe input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wahlreihe span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--linie);border-radius:99rem;background:#fff;font-weight:600;font-size:.92rem;transition:background .15s linear,color .15s linear}
.wahlreihe input:checked+span{background:var(--tief);border-color:var(--tief);color:#fff}
.wahlreihe input:focus-visible+span{outline:.1875rem solid var(--aqua);outline-offset:.1875rem}
.ergebnis{position:sticky;top:calc(var(--hdr) + 1.2rem);background:var(--eis);border-color:transparent}
.preis{margin-top:.2rem;font-weight:700;font-size:clamp(3rem,6.4vw,5rem);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.auswahl-text{margin-top:.6rem;color:var(--leise);font-weight:500}
.summe{display:grid;margin:1.3rem 0 1.4rem;border-top:1px solid var(--linie)}
.summe div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--linie)}
.summe dd{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.summe .total{font-weight:700;font-size:1.12rem}
.summe .total dd{font-weight:700}
.ergebnis .klein{margin-top:.9rem}
.helfer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem clamp(1rem,3vw,2.5rem);margin-top:1.5rem}
.helfer .karte{display:grid;gap:1rem;align-content:start}
.helfer-reihe{display:flex;flex-wrap:wrap;align-items:end;gap:1rem}
.eingabe{width:7rem;min-height:3rem;padding:0 1rem;border:1px solid var(--linie);border-radius:.9rem;background:#fff;font-weight:700;font-size:1.2rem}
.eingabe:focus{border-color:var(--aqua)}
.helfer-zahl{margin-left:auto}
.helfer-zahl b{display:grid;place-items:center;min-width:4.4rem;height:4.4rem;padding:0 .8rem;border-radius:50%;background:var(--tief);color:#fff;font-weight:700;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.helfer-text{font-weight:600;font-size:1.08rem;line-height:1.35}
.helfer-text:empty{display:none}
.helfer .btn{justify-self:start}
.plz.ist-ja{border-color:var(--ok);background:#f0faf5}
.plz.ist-ja .helfer-text{color:#0b6b41}

.anfrage-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(1.5rem,5vw,5rem);align-items:start}
.anfrage-in .lead{margin-top:1.2rem}
.kontakt{display:grid;margin-top:2rem;border-top:1px solid var(--linie)}
.kontakt div{display:grid;gap:.1rem;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.kontakt dt{font-size:.82rem;font-weight:600;color:var(--leise)}
.kontakt dd{font-weight:600;font-size:1.1rem}
.formkarte{box-shadow:0 2rem 4rem -2.5rem rgb(11 53 80 / .45)}
.form{display:grid;gap:1.2rem}
.fortschritt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;counter-reset:s}
.fortschritt li{counter-increment:s;padding-top:.7rem;border-top:.25rem solid var(--linie);font-weight:600;font-size:.86rem;color:var(--leise);transition:border-color .2s linear,color .2s linear}
.fortschritt li::before{content:counter(s) ". "}
.fortschritt .ist-aktiv{border-top-color:var(--aqua);color:var(--tief)}
.fortschritt .ist-erledigt{border-top-color:var(--ok);color:var(--ok)}
.form fieldset{display:grid;gap:1.1rem}
.form legend{margin-bottom:1rem;font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.form label{display:block;font-weight:600;font-size:.88rem;color:var(--leise)}
.form label>input{display:block;margin-top:.35rem}
.form .wahlreihe label{display:block}
.frei-w{font-weight:400;opacity:.8}
.form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=date]{width:100%;min-height:3rem;padding:.6rem .9rem;border:1px solid var(--linie);border-radius:.9rem;background:#fff;font-weight:500;font-size:1rem;color:var(--tief)}
.form input:focus{border-color:var(--aqua)}
.form input:user-invalid{border-color:var(--fehler)}
.form-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:.4rem}
.form-auswahl{display:grid;gap:.2rem;padding:1rem 1.1rem;border-radius:1rem;background:var(--eis)}
.form-auswahl b{font-size:1.15rem}
.form-auswahl span{color:var(--leise);font-size:.94rem}
.danke{display:grid;gap:1.1rem;justify-items:start}
.danke h3{font-size:clamp(1.5rem,3vw,2rem)}
.danke .form-auswahl{justify-self:stretch}
.weiter{display:grid;gap:.5rem;counter-reset:w;color:var(--leise)}
.weiter li{counter-increment:w;position:relative;padding-left:2.2rem}
.weiter li::before{content:counter(w);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--eis);color:var(--tief);font-weight:700;font-size:.8rem}

.ftr{border-top:1px solid var(--linie);color:var(--leise)}
.ftr-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-top:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom));font-size:.88rem}
.ftr b{color:var(--tief)}
.ftr nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.ftr a{display:inline-flex;align-items:center;min-height:2rem}
.mock-tag{position:fixed;right:1rem;bottom:1rem;z-index:35;padding:.6rem 1rem;border-radius:99rem;background:var(--tief);color:#fff;font-weight:600;font-size:.8rem;text-decoration:none;box-shadow:0 .8rem 1.6rem -.8rem rgb(11 53 80 / .7)}

@media (max-width:64rem){
  .hero-in,.reinigung,.qr-in,.preis-in,.anfrage-in{grid-template-columns:minmax(0,1fr)}
  .ergebnis{position:static}
  .blase{max-width:34rem;margin-inline:auto}
  .hero-modell .chips{justify-content:center}
}
@media (max-width:44rem){
  .nav,.hdr-tel{display:none}
  .griffe,.helfer,.wahl,.zwei{grid-template-columns:minmax(0,1fr)}
  .fakten{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .fakten li{display:flex;align-items:baseline;gap:.8rem}
  .fakten b{min-width:3.2rem}
  .mock-tag{right:.6rem;bottom:.6rem;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media print{.hdr{position:static}.mock-tag,.chips{display:none!important}}