/* =========================================================================
   Blitzblank Gebäudereinigung · Landingpage
   Mobil zuerst (min-width). Bewusste Ausnahme zu Handbuch 15.2 ("nur
   max-width"), T-13: Besucher kommen überwiegend mobil aus Google Ads; die
   Grundregeln gelten deshalb ohne Media Query für 320-430 px, Desktop baut
   nur darauf auf. Ein Umbau auf max-width würde jede Regel doppelt
   anfassen und die gemessenen Handywerte (Zeilen, Abstände, Kontrast) neu
   riskieren, ohne sichtbaren Gewinn. Breakpoints bleiben im belegten Set
   (640/768/900/1024) und stehen beim jeweiligen Bereich.
   Tiefe B: weiche Schatten, nie Box in Box.
   z-index: Header 900 · FAB 940 · Modal 1100 · Cookie 1200
   R4 (03.11.2026): R2/R3/R3b-Überschreibblöcke eingefaltet, tote Altregeln entfernt (M-1).
   ========================================================================= */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}

:root{
  --marke:#0b3a6e; --marke-tief:#082a52; --akzent:#1565c0; --akzent-soft:#e8f1fb;
  --blitz:#f2c14e; --creme:#eef4fb;
  --tinte:#1d1d1f; --tinte-2:#6e6e73; --tinte-3:#86868b;
  --flaeche:#fff; --flaeche-2:#f5f5f7; --linie:#e3e3e8; --linie-2:#c9c9cf;
  --wa-gruen:#1a9e4f;
  /* Schatten: Tinte, nie Schwarz; ohne negativen Spread höchstens .06 (D-06) */
  --sch-1:0 1px 2px rgba(10,30,56,.04),0 6px 18px rgba(10,30,56,.03);
  --sch-2:0 2px 6px rgba(10,30,56,.04),0 18px 44px rgba(10,30,56,.06);
  --sch-3:0 30px 60px -28px rgba(10,30,56,.14);
  --r:24px; --r-kachel:20px; --r-k:12px; --r-f:10px; --r-insel:32px;
  --pad:16px; --breite:1200px;
  --kopf:60px;
  --schrift:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --d-kurz:.2s; --d-mittel:.35s; --d-lang:.8s;
}
@media (min-width:768px){:root{--pad:28px}}
@media (min-width:1024px){:root{--pad:40px;--kopf:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 1rem/1.6 var(--schrift);color:var(--tinte);background:var(--flaeche);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--akzent)}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h3,.h3{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
:focus-visible{outline:3px solid var(--blitz);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-60px;z-index:1300;background:var(--marke);color:#fff;padding:.6rem 1rem;border-radius:10px}
.sprung:focus{top:12px}
/* Sprungziele und Fehlerfelder frei vom festen Kopf (T-09, T-19) */
section[id],[id].anker{scroll-margin-top:calc(var(--kopf) + 12px)}
input,select,textarea,.kachel{scroll-margin-top:calc(var(--kopf) + 20px)}

.wrap{width:100%;max-width:calc(var(--breite) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.ico{width:20px;height:20px;flex:none}

/* ---------- Typo ---------------------------------------------------------- */
/* Kicker nur als Text (D-05) */
.kicker{display:block;margin-bottom:.85rem;font:600 .9375rem/1.35 var(--schrift);color:var(--akzent)}
.h2{font:600 clamp(1.5rem,7vw,2.85rem)/1.12 var(--schrift);letter-spacing:-.022em;color:var(--tinte);text-wrap:balance}
.h2 .br-d{display:none}
.lead{margin-top:1rem;font-size:1.0625rem;line-height:1.6;color:var(--tinte-2);max-width:40rem}
.kopfzeile{max-width:46rem}
.kopfzeile--mitte{margin-inline:auto;text-align:center}
.kopfzeile--mitte .lead{margin-inline:auto}
@media (min-width:900px){
  .h2 .br-d{display:inline}
  .wa-sek__raster .h2,.ablauf-raster .h2,.anf .h2,.geb .h2{font-size:clamp(1.75rem,2.9vw,2.65rem)}
}

/* Sektionen; dunkle Inseln eingerückt mit Radius (D-12, D-26) */
.sek{padding-block:clamp(80px,10vw,152px)}
.sek--grau{background:var(--flaeche-2)}
.sek--dunkel{margin-inline:8px;border-radius:var(--r-insel);
  background:radial-gradient(60% 90% at 85% 10%,rgba(21,101,192,.55),transparent 70%),linear-gradient(160deg,var(--marke) 0%,var(--marke-tief) 100%);color:#fff}
.sek--dunkel .kicker{color:var(--blitz)}
.sek--dunkel .h2{color:#fff}
.sek--dunkel .lead{color:rgba(255,255,255,.82)}
.sek--grau .lead{color:#5f5f64} /* Kontrast R4: 4,48 → ≥ 5 auf Grau */
.sek--dunkel + .sek,.sek + .sek--dunkel{margin-top:8px}
@media (min-width:768px){.sek--dunkel{margin-inline:16px}.sek--dunkel + .sek,.sek + .sek--dunkel{margin-top:16px}}

/* ---------- Knöpfe (ohne Schatten, D-06) -------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:54px;padding:.85rem 1.6rem;
  border-radius:999px;border:1.5px solid transparent;font:600 1rem/1.2 var(--schrift);text-decoration:none;cursor:pointer;
  transition:background var(--d-kurz) ease,border-color var(--d-kurz) ease,transform var(--d-kurz) var(--ease);white-space:nowrap}
.knopf:active{transform:scale(.98)}
.knopf--marke{background:var(--marke);color:#fff}
.knopf--marke:hover{background:var(--akzent)}
/* WhatsApp in Marken-Grün mit Symbol statt greller Vollfläche (D-23) */
.knopf--wa{background:var(--akzent-soft);color:var(--marke);border-color:#cfe0f3}
.knopf--wa .ico{color:var(--wa-gruen)}
.knopf--wa:hover{border-color:var(--akzent)}
.sek--dunkel .knopf--wa{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.sek--dunkel .knopf--wa .ico{color:#6fdc98}
.sek--dunkel .knopf--wa:hover{border-color:#fff}
.knopf--rahmen{border-color:var(--linie-2);color:var(--tinte);background:#fff}
.knopf--rahmen:hover{border-color:var(--tinte)}
.knopf--hell{background:#fff;color:var(--marke)}
.knopf--hell:hover{background:var(--creme)}
.textlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--akzent);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:4px;min-height:44px}
.textlink:hover{color:var(--marke)}
.sek--dunkel .textlink{color:#fff}
.cta-paar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem;margin-top:2.2rem}
.cta-paar--mitte{justify-content:center}

/* ---------- Header ---------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .25s ease}
.kopf.ist-gescrollt{box-shadow:0 1px 0 var(--linie),0 8px 22px rgba(10,30,56,.05)}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:var(--kopf)}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--marke);min-width:0}
/* Logo ohne Kachel (D-14), mobil ≥ 32 px, PC ≥ 40 px (D-18) */
.logo__zeichen{display:block;flex:none}
.logo__zeichen img{height:36px;width:auto}
.logo__text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.logo__name{font:700 1.0625rem/1.1 var(--schrift);letter-spacing:-.01em;color:var(--marke)}
.logo__unter{font:500 .75rem/1.3 var(--schrift);color:var(--tinte-2);white-space:nowrap}
@media (max-width:399px){.logo__unter{font-size:.6875rem}} /* Chef C2: «Gebäudereinigung» auch am Handy sichtbar */
.kopf__navi{display:none}
.kopf__aktionen{display:flex;align-items:center;gap:.5rem;flex:none}
.kopf--schlicht .kopf__aktionen{margin-left:auto}
.rund{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;text-decoration:none;
  transition:transform var(--d-kurz) var(--ease),background var(--d-kurz) ease}
.rund:hover{transform:translateY(-1px)}
.rund--tel{background:var(--marke);color:#fff}
.rund--tel:hover{background:var(--akzent)}
.rund--wa{background:var(--akzent-soft);color:var(--wa-gruen);box-shadow:inset 0 0 0 1.5px #cfe0f3}
.rund .ico{width:21px;height:21px}
.kapsel{display:none}
.kapsel--immer{display:inline-flex;min-height:44px;padding:.55rem 1.1rem;font-size:.9375rem}
@media (min-width:1024px){
  .logo__zeichen img{height:44px}
  .logo__name{font-size:1.1875rem}
  .logo__unter{font-size:.8125rem}
  .kopf__navi{display:flex;gap:1.9rem}
  .kopf__navi a{font:500 .9688rem/1 var(--schrift);color:var(--tinte);text-decoration:none;padding:.6rem 0;position:relative}
  .kopf__navi a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;border-radius:2px;background:var(--blitz);
    transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  .kopf__navi a:hover::after{transform:scaleX(1)}
  .kapsel{display:inline-flex;min-height:48px;padding:.7rem 1.35rem;font-size:.9688rem}
}

/* ---------- Hero (F1) ---------------------------------------------------- */
.held{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  background:
    radial-gradient(52% 80% at 74% 58%,rgba(56,132,224,.55) 0%,rgba(21,101,192,0) 70%),
    radial-gradient(38% 60% at 100% 0,rgba(242,193,78,.16) 0%,rgba(242,193,78,0) 70%),
    linear-gradient(112deg,#082a52 0%,#0b3a6e 48%,#1450a0 100%)}
.held::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
.held__in{display:grid;grid-template-columns:minmax(0,1fr);padding-top:18px}
.held__text{position:relative;z-index:2}
.held__h1{font:600 .9375rem/1.35 var(--schrift);color:rgba(255,255,255,.92);letter-spacing:0;text-wrap:balance}
.held__h2{margin-top:.5rem;font:600 clamp(2rem,9vw,3.6rem)/1.06 var(--schrift);letter-spacing:-.03em;color:#fff}
.held__h2 .z{display:block;white-space:nowrap}
.held__h2 .a{color:var(--blitz)}
.ul{position:relative;display:inline-block}
.ul svg{position:absolute;left:-1%;width:102%;height:.24em;bottom:-.12em;overflow:visible;pointer-events:none}
.ul path{fill:none;stroke:var(--blitz);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.js .ul path{stroke-dasharray:260;stroke-dashoffset:260;animation:strich var(--d-lang) .45s var(--ease) forwards}
@keyframes strich{to{stroke-dashoffset:0}}
.held__satz{margin-top:.65rem;font-size:.9688rem;line-height:1.48;color:rgba(255,255,255,.84);max-width:34rem}
.held__punkte{margin-top:.7rem;display:grid;gap:.3rem}
.held__punkte li{display:flex;align-items:center;gap:.55rem;font:500 .9375rem/1.35 var(--schrift);color:#fff}
.held__punkte .ico{width:20px;height:20px;color:var(--blitz)}
/* Vertrauenszeile einzeilig 320–1440 (D-03) */
.held__vertrauen{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font:500 .875rem/1.3 var(--schrift);color:rgba(255,255,255,.84);white-space:nowrap}
.held__vertrauen .ico{width:18px;height:18px;color:var(--blitz)}
@media (max-width:359px){.held__vertrauen{font-size:.8125rem}}
.held__tel{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.9rem;min-height:52px;padding:.75rem 1.5rem;
  border-radius:999px;border:1.5px solid rgba(255,255,255,.42);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;
  font:600 1.0625rem/1 var(--schrift);letter-spacing:.01em;transition:background var(--d-kurz) ease,border-color var(--d-kurz) ease}
.held__tel:hover{background:rgba(255,255,255,.13);border-color:#fff}
.held__tel .ico{color:var(--blitz)}
/* Echtes Foto (R3b). Mobil randlos und groß, Raumart-Chip unten über dem Bogen (R4) */
.held__bild{position:relative;z-index:1;margin:18px calc(-1*var(--pad)) 0}
.held__bild img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 55%}
.held__bild figcaption{position:absolute;left:var(--pad);bottom:52px;display:inline-flex;gap:.35rem;align-items:center;padding:.38rem .75rem;border-radius:999px;
  background:rgba(8,42,82,.86);color:#fff;font:500 .75rem/1.2 var(--schrift)}
.held__bild figcaption span{font-weight:700;color:var(--blitz);text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem}
@media (prefers-reduced-motion:reduce){html.js .ul path{animation:none;stroke-dashoffset:0}}
@media (min-width:640px) and (max-width:1023px){
  .held__bild{max-width:620px;margin:24px auto 0}
  .held__bild img{border-radius:18px;box-shadow:0 0 0 3px rgba(255,255,255,.92)}
  .held__bild figcaption{left:14px;bottom:76px}
}
@media (min-width:1024px){
  .held__in{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:1.5rem;padding-top:56px;padding-bottom:130px}
  .held__h1{font-size:1.0625rem}
  .held__h2{margin-top:.8rem}
  .held__satz{margin-top:1.15rem;font-size:1.0625rem;line-height:1.55;max-width:none} /* D-02: ≤ 2 Zeilen */
  .held__punkte{margin-top:1.15rem;gap:.5rem}
  .held__punkte li{font-size:1.0625rem}
  .held__vertrauen{margin-top:1.15rem;font-size:.9688rem}
  .held__tel{margin-top:1.6rem;min-height:56px;padding-inline:1.9rem}
  .held__bild{margin:0 0 0 1.5rem}
  .held__bild::before{content:"";position:absolute;inset:22px -18px -18px 22px;border-radius:22px;background:var(--blitz);opacity:.92;z-index:-1}
  /* D-R3-3: Schatten in Tinte, Token --sch-3 (14 % bei −28 px), kein Schwarz */
  .held__bild img{aspect-ratio:5/4;border-radius:20px;box-shadow:0 0 0 4px #fff,var(--sch-3)}
  .held__bild figcaption{left:18px;bottom:18px;font-size:.8125rem;padding:.45rem .9rem}
}
@media (min-width:1024px) and (max-width:1179px){.held__h2{font-size:3rem}}

/* ---------- Bogen + Kachel-Formular ------------------------------------- */
.hf{position:relative;z-index:3;margin-top:-34px}
.bogen{display:block;width:100%;height:40px;filter:drop-shadow(0 -10px 18px rgba(6,24,48,.16))}
.hf__weiss{background:#fff;margin-top:-1px;padding:0 0 3rem}
@media (min-width:640px){.hf{margin-top:-58px}.bogen{height:44px}.hf__weiss{padding-top:.2rem}}
@media (min-width:1024px){
  .hf{margin-top:-120px}
  .bogen{height:90px}
  .hf__weiss{padding:.4rem 0 4rem}
}

/* ---------- Formular (beide Instanzen) ---------------------------------- */
.fk{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.fk__kopf,.fk__felder{min-width:0}
.fk__titel{font:600 clamp(1.5rem,6.6vw,1.875rem)/1.12 var(--schrift);letter-spacing:-.02em;color:var(--tinte);text-wrap:balance}
.fk__wa{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem;min-height:44px;font:600 .9375rem/1.3 var(--schrift);
  color:#0f58b0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.fk__wa span{text-wrap:balance}
.fk__wa .ico{color:var(--wa-gruen);width:22px;height:22px}
.fortschritt{margin-top:.6rem}
.fortschritt[hidden]{display:none}
.fortschritt__z{font:500 .875rem/1.3 var(--schrift);color:var(--tinte-2)}
.fortschritt__bahn{margin-top:.45rem;height:4px;border-radius:4px;background:var(--linie);overflow:hidden;max-width:220px}
.fortschritt__bahn span{display:block;height:100%;width:25%;border-radius:4px;background:var(--akzent);transition:width var(--d-mittel) var(--ease)}
.zurueck{display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;padding:.35rem 0;min-height:40px;background:none;border:0;cursor:pointer;
  font:600 .875rem/1 var(--schrift);color:var(--tinte-2);text-decoration:underline;text-underline-offset:3px}
.zurueck[hidden]{display:none}
.zurueck:hover{color:var(--tinte)}
@media (min-width:1024px){
  .fk{grid-template-columns:290px minmax(0,1fr);gap:2.6rem;align-items:start}
  .fk__titel{font-size:2rem}
}
.anf__form .fk{grid-template-columns:minmax(0,1fr);gap:.6rem}
@media (min-width:900px){
  .hf .fk{padding:2rem 2.2rem;border-radius:var(--r);background:#fff;box-shadow:var(--sch-2),var(--sch-3);border-top:4px solid var(--blitz)}
}
@media (min-width:900px) and (max-width:1199px){.hf .fk{padding:1.6rem 1.3rem}}

/* Schrittleiste: 4 echte Schritte, Gold = erledigt/aktuell. Mobil Segmentleiste, Hero ab 1024 senkrecht (R4) */
.fk__weg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:.85rem 0 .35rem;padding:0;counter-reset:weg;max-width:420px}
.fk__weg li{counter-increment:weg;display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:34px;padding:0 .25rem;
  background:var(--flaeche-2);color:var(--tinte-2);font:600 .75rem/1.1 var(--schrift);white-space:nowrap;transition:background var(--d-mittel) ease,color var(--d-mittel) ease}
.fk__weg li::before{content:counter(weg);font-weight:700}
.fk__weg li:first-child{border-radius:999px 0 0 999px}
.fk__weg li:last-child{border-radius:0 999px 999px 0}
.fk__weg li:first-child,.fk[data-schritt="2"] .fk__weg li:nth-child(-n+2),.fk[data-schritt="3"] .fk__weg li:nth-child(-n+3),.fk[data-schritt="4"] .fk__weg li{background:var(--blitz);color:var(--marke-tief)}
@media (max-width:359px){.fk__weg li{font-size:.6875rem;gap:.2rem;padding:0 .15rem}}
.fk__weg ~ .fortschritt .fortschritt__bahn{display:none}
.fk__weg ~ .fortschritt{margin-top:.2rem}
@media (min-width:1024px){
  .hf .fk__weg{position:relative;grid-template-columns:minmax(0,1fr);gap:0;margin:1.3rem 0 .9rem}
  .hf .fk__weg::before{content:"";position:absolute;left:15px;top:20px;bottom:20px;width:2px;background:var(--linie)}
  .hf .fk__weg li{position:relative;justify-content:flex-start;gap:.85rem;min-height:44px;padding:0;border-radius:0;background:none;font-size:.9688rem;font-weight:500}
  .hf .fk__weg li::before{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;
    border:1.5px solid var(--linie-2);font-size:.8125rem;color:var(--tinte-2)}
  .hf .fk__weg li:first-child,.hf .fk[data-schritt="2"] .fk__weg li:nth-child(-n+2),.hf .fk[data-schritt="3"] .fk__weg li:nth-child(-n+3),.hf .fk[data-schritt="4"] .fk__weg li{background:none;color:var(--marke);font-weight:600}
  .hf .fk__weg li:first-child::before,.hf .fk[data-schritt="2"] .fk__weg li:nth-child(-n+2)::before,.hf .fk[data-schritt="3"] .fk__weg li:nth-child(-n+3)::before,.hf .fk[data-schritt="4"] .fk__weg li::before{background:var(--blitz);border-color:var(--blitz);color:var(--marke-tief)}
}

.schritt[hidden]{display:none}
.schritt__frage{font:600 1.0625rem/1.35 var(--schrift);color:var(--tinte);margin-bottom:.8rem}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.kacheln--3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}.kacheln--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* R4: Kacheln links ausgerichtet mit Pfeil, Linien-Icon ohne Kreis (bricht das Icon-Kachel-Raster) */
.kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.3rem;min-height:112px;
  padding:.8rem .85rem .8rem;border:1.5px solid var(--linie);border-radius:var(--r-kachel);background:#fff;cursor:pointer;text-align:left;
  transition:border-color var(--d-kurz) ease,box-shadow var(--d-kurz) ease,transform var(--d-kurz) var(--ease),background var(--d-kurz) ease}
.kachel:hover{border-color:var(--akzent);box-shadow:var(--sch-1);transform:translateY(-2px)}
.kachel:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.kachel__ico{display:block;margin:0 0 .2rem;color:var(--akzent);transition:color var(--d-kurz) ease}
.kachel__ico .ico{width:30px;height:30px}
.kachel:hover .kachel__ico,.kachel.ist-gewaehlt .kachel__ico{color:var(--marke)}
.kachel::after{content:"";position:absolute;right:.9rem;top:1.05rem;width:8px;height:8px;border-top:2px solid var(--linie-2);border-right:2px solid var(--linie-2);
  transform:rotate(45deg);transition:border-color var(--d-kurz) ease,transform var(--d-kurz) var(--ease)}
.kachel:hover::after,.kachel.ist-gewaehlt::after{border-color:var(--marke);transform:translateX(2px) rotate(45deg)}
/* Titel ohne Trennstrich (D-15) */
.kachel__t{font:600 .9375rem/1.2 var(--schrift);color:var(--tinte);hyphens:manual}
.kachel__u{font:400 .75rem/1.3 var(--schrift);color:var(--tinte-2)}
.kachel.ist-gewaehlt{border-color:var(--marke);background:var(--akzent-soft);box-shadow:0 0 0 3px rgba(21,101,192,.16)}
.kachel.ist-passend{border-color:var(--akzent)}
.kachel__marke{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.2rem .55rem;border-radius:999px;
  background:var(--blitz);color:var(--marke-tief);font:600 .6875rem/1.3 var(--schrift)}
@media (max-width:359px){.kacheln--6 .kachel__t{font-size:.8125rem;letter-spacing:-.01em}}
@media (min-width:1024px){.kachel__t{font-size:1rem}}

.feld{display:grid;gap:.35rem;margin-bottom:.9rem}
.feld label,.feld .label{font:500 .875rem/1.3 var(--schrift);color:var(--tinte)}
.feld input[type=text],.feld input[type=tel],.feld input[type=email]{width:100%;min-height:54px;padding:.8rem .95rem;border:1.5px solid var(--linie-2);
  border-radius:var(--r-f);background:#fff;font:400 16px/1.3 var(--schrift);color:var(--tinte);transition:border-color var(--d-kurz) ease,box-shadow var(--d-kurz) ease}
.feld input::placeholder{color:#8e8e93}
.feld input:focus{outline:0;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(21,101,192,.18)}
.feld.ist-fehler input{border-color:#c0392b}
.feld__fehler{font:500 .8125rem/1.35 var(--schrift);color:#b0281a}
.feld__fehler:empty{display:none}
.felder-2{display:grid;grid-template-columns:minmax(0,1fr);column-gap:.9rem}
@media (min-width:640px){.felder-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{min-height:44px;padding:.55rem .95rem;border-radius:999px;border:1.5px solid var(--linie-2);background:#fff;cursor:pointer;
  font:500 .875rem/1.2 var(--schrift);color:var(--tinte);transition:border-color var(--d-kurz) ease,background var(--d-kurz) ease}
.chip:hover{border-color:var(--akzent)}
.chip[aria-pressed=true]{border-color:var(--marke);background:var(--akzent-soft);color:var(--marke)}
.foto{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:.2rem 0 1rem}
.foto__knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.6rem 1.1rem;border-radius:var(--r-k);
  border:1.5px dashed var(--linie-2);background:var(--flaeche-2);cursor:pointer;font:600 .9375rem/1.2 var(--schrift);color:var(--tinte)}
.foto__knopf:hover{border-color:var(--akzent)}
.foto__knopf .ico{color:var(--akzent)}
.foto input{position:absolute;width:1px;height:1px;opacity:0}
.foto input:focus-visible + .foto__knopf{outline:3px solid var(--akzent);outline-offset:2px}
.foto__hinweis{font:400 .8125rem/1.35 var(--schrift);color:var(--tinte-2)}
.foto__name{font:500 .8125rem/1.35 var(--schrift);color:var(--akzent);flex-basis:100%}
.foto__name:empty{display:none}
.einw{display:flex;gap:.65rem;align-items:flex-start;margin:.3rem 0 1rem;font:400 .8125rem/1.45 var(--schrift);color:var(--tinte-2)}
.einw input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--marke)}
.einw a{color:var(--akzent)}
.hp{display:none!important}
.navi{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.navi .knopf{min-width:200px;border-radius:var(--r-k)}
@media (max-width:639px){.navi .knopf{flex:1;min-width:0}}
.mikro{margin-top:.7rem;font:500 .8125rem/1.45 var(--schrift);color:var(--tinte-2)}
.formfehler{margin-top:.8rem;padding:.8rem 1rem;border-radius:var(--r-k);background:#fdf0ee;color:#8a1f12;font:500 .9063rem/1.45 var(--schrift)}
.formfehler[hidden]{display:none}
.formfehler a{color:#8a1f12;font-weight:600}
.formfehler .knopf{margin-top:.6rem;min-height:46px;padding:.6rem 1.1rem;font-size:.9375rem}
.ist-sendet .knopf[type=submit]{opacity:.7;pointer-events:none}

/* ---------- Leistungen: Karussell mobil, ab 1024 Raster 2 groß + 4 (R4) ----------- */
.leist__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.karussell{position:relative;margin-top:2.4rem}
.karussell__bahn{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);padding:.4rem var(--pad) 1.6rem;margin-inline:calc(-1*var(--pad));scrollbar-width:none;overscroll-behavior-x:contain}
.karussell__bahn::-webkit-scrollbar{display:none}
@media (min-width:640px){.karussell__bahn{grid-auto-columns:calc((100% - 2*var(--pad) - 1rem)/2)}}
.lk{scroll-snap-align:start;display:flex;flex-direction:column;padding:1.5rem 1.4rem 1.5rem;border-radius:var(--r);background:#fff;box-shadow:var(--sch-1);
  transition:box-shadow var(--d-mittel) ease,transform var(--d-mittel) var(--ease)}
.lk:hover{box-shadow:var(--sch-2),var(--sch-3);transform:translateY(-3px)}
.lk__ico{display:block;margin-bottom:1.25rem;line-height:0} /* R5: Symbol ohne Kachel, keine 01–06 */
.lk__ico .ico{width:32px;height:32px;color:var(--akzent)}
.lk h3{font:600 1.375rem/1.2 var(--schrift);letter-spacing:-.015em;color:var(--tinte)}
.lk p{margin-top:.55rem;font-size:1rem;line-height:1.6;color:var(--tinte-2)} /* D-19 */
.lk ul{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--linie);display:grid;gap:.4rem}
.lk li{display:flex;align-items:flex-start;gap:.5rem;font:500 .9375rem/1.4 var(--schrift);color:var(--tinte)}
.lk li .ico{width:18px;height:18px;margin-top:.12rem;color:var(--akzent)}
.lk--dunkel{background:var(--marke);box-shadow:none}
.lk--dunkel h3,.lk--dunkel li{color:#fff}
.lk--dunkel p{color:rgba(255,255,255,.82)}
.lk--dunkel .lk__ico .ico,.lk--dunkel li .ico{color:var(--blitz)}
.lk--dunkel ul{border-top-color:rgba(255,255,255,.16)}
.lk--creme{background:var(--creme);box-shadow:none}
.lk--creme ul{border-top-color:#d5e3f3}
.karussell__pfeile{display:flex;gap:.5rem}
.pfeil{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie-2);background:#fff;cursor:pointer;
  transition:border-color var(--d-kurz) ease,opacity var(--d-kurz) ease}
.pfeil:hover{border-color:var(--tinte)}
.pfeil[disabled]{opacity:.35;cursor:default}
.pfeil .ico{width:20px;height:20px}
.punkte{display:flex;justify-content:center;gap:.4rem;margin-top:.2rem}
.punkte span{width:7px;height:7px;border-radius:50%;background:var(--linie-2);transition:background var(--d-kurz) ease,width var(--d-kurz) ease}
.punkte span.ist-an{background:var(--akzent);width:20px;border-radius:4px}
@media (min-width:1024px){
  .karussell__pfeile,.karussell .punkte{display:none!important}
  .karussell{margin-top:2.8rem}
  .karussell__bahn{grid-auto-flow:row;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding:0;gap:1.25rem}
  .lk{grid-column:span 3;padding:1.6rem 1.4rem}
  .lk h3{font-size:1.1875rem}
  .lk--gross{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:2rem;align-content:start;padding:2rem 2rem 1.9rem}
  .lk--gross > *{grid-column:1}
  .lk--gross h3{font-size:clamp(1.375rem,1.95vw,1.75rem)}
  .lk--gross p{font-size:1.0625rem}
  .lk--gross ul{grid-column:2;grid-row:1/span 3;align-self:center;margin-top:0;padding-top:0;padding-left:1.6rem;border-top:0;border-left:1px solid var(--linie);align-content:start}
  .lk--gross .lk__ico{margin-bottom:1.6rem}
  .lk--dunkel ul{border-left-color:rgba(255,255,255,.16)}
  .lk--creme ul{border-left-color:#d5e3f3}
}
@media (min-width:1024px) and (max-width:1199px){ /* R5 D-R4-4: keine Einzelwörter bei 1024 */
  .lk{grid-column:span 6}
  .lk--gross{grid-column:span 12;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
}
@media (min-width:1200px){ /* R5 D-R4-4: Haken-Spalte breiter, kein Einzelwort bei 1440 */
  .lk--gross{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:1.5rem}
  .lk--gross ul{padding-left:1.35rem}
}
@media (min-width:1200px){
  .leist__kopf .kopfzeile{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);column-gap:4rem;align-items:end}
  .leist__kopf .kopfzeile .kicker,.leist__kopf .kopfzeile .h2{grid-column:1}
  .leist__kopf .kopfzeile .lead{grid-column:2;grid-row:1/span 2;align-self:end;margin-top:0}
}

/* ---------- Signatur „Glanz baut sich auf“: Schema zum Antippen (L2, flach, R4) --- */
.sig__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2.2rem}
@media (min-width:1024px){
  .sig > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4rem;align-items:start}
  .sig .h2{font-size:clamp(1.75rem,2.75vw,2.65rem)}
  .sig .kopfzeile{grid-column:1}
  .sig__raster{display:contents}
  .sig__schnitt{grid-column:2;grid-row:1/span 2;align-self:center}
  .sig__text{grid-column:1;margin-top:2rem}
}
.sig__schnitt{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:clip;grid-template-rows:repeat(2,minmax(52px,auto)) minmax(64px,auto) auto;gap:8px;margin:0;padding:1.4rem;
  border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.sch{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-width:0;padding:.7rem 1rem;border-radius:12px;font:600 .9375rem/1.3 var(--schrift);
  transition:background var(--d-mittel) ease,color var(--d-mittel) ease,border-color var(--d-mittel) ease,transform .6s var(--ease),opacity .6s var(--ease)}
.sch b{flex:none;padding:.22rem .6rem;border-radius:999px;background:rgba(0,0,0,.55);font:600 .75rem/1.2 var(--schrift);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.sch{grid-column:1}
.sch--v2{grid-row:1;background:var(--blitz);color:var(--marke-tief);border:2px solid transparent}
.sch--v1{grid-row:2;background:#f7d688;color:var(--marke-tief);border:2px solid transparent}
.sch--alt{grid-row:2;z-index:1;background:repeating-linear-gradient(135deg,#6f6a60 0 8px,#615c53 8px 16px);color:#f3efe6;border:2px dashed rgba(255,255,255,.45)}
.sch--belag{grid-row:3;background:var(--creme);color:var(--marke-tief)}
.sig__schnitt figcaption{grid-row:4;margin-top:.4rem;font-size:.75rem;color:rgba(255,255,255,.66)}
/* Glanzkante auf der obersten Lage, flach */
.sch--v2{position:relative;overflow:hidden}
.sch--v2::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;background:rgba(255,255,255,.55);transform:skewX(-18deg);opacity:0;transition:left .9s var(--ease),opacity .3s ease}
/* Stufen: 0 Vorher · 1 Grundreinigung · 2 erste Lage · 3 zweite Lage · 4 Glanz */
.sig__schnitt[data-stufe="0"] .sch--v1,.sig__schnitt[data-stufe="0"] .sch--v2,
.sig__schnitt[data-stufe="1"] .sch--v1,.sig__schnitt[data-stufe="1"] .sch--v2,
.sig__schnitt[data-stufe="2"] .sch--v2{background:transparent;color:transparent;border:2px dashed rgba(255,255,255,.18)}
.sig__schnitt[data-stufe="0"] .sch--v2::after,.sig__schnitt[data-stufe="1"] .sch--v2::after,.sig__schnitt[data-stufe="2"] .sch--v2::after{display:none}
.sig__schnitt:not([data-stufe="0"]) .sch--alt{transform:translate(18px,-58px) rotate(-3deg);opacity:0;pointer-events:none}
.sig__schnitt[data-stufe="4"] .sch--v2::after{left:110%;opacity:1}
/* R5 D-R4-7: Endstufe in Ruhe erkennbar (stehender Lichtstreif + Glanzkante), auch bei reduzierter Bewegung */
.sig__schnitt[data-stufe="4"] .sch--v2,.sig__schnitt[data-stufe="4"] .sch--v1{background-image:linear-gradient(105deg,transparent 0 52%,rgba(255,255,255,.42) 60%,transparent 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.sig__schnitt[data-stufe="4"] .sch--v2{border-color:rgba(255,255,255,.55)}
.sig__schritte{display:grid;gap:.25rem}
.sig__stufe{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.2rem .85rem;align-items:center;min-height:56px;padding:.65rem .7rem;margin:0;
  width:100%;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;font:500 1rem/1.35 var(--schrift);color:rgba(255,255,255,.72);
  transition:background var(--d-kurz) ease,color var(--d-kurz) ease}
.sig__stufe::before{content:"";grid-row:1/span 2;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.3);transition:background var(--d-kurz) ease,box-shadow var(--d-kurz) ease}
.sig__stufe span{grid-column:2}
.sig__stufe b{grid-column:2;font:600 .8125rem/1.3 var(--schrift);color:rgba(255,255,255,.66)}
.sig__stufe:hover{background:rgba(255,255,255,.06);color:#fff}
.sig__stufe.ist-fertig{color:#fff}
.sig__stufe.ist-fertig::before{background:var(--blitz)}
.sig__stufe.ist-fertig b{color:var(--blitz)}
.sig__stufe[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff}
.sig__stufe[aria-pressed="true"]::before{background:var(--blitz);box-shadow:0 0 0 4px rgba(242,193,78,.28)}
.sig__stufe[aria-pressed="true"] b{color:var(--blitz)}
.sig__hinweis{margin-bottom:.6rem;font:500 .875rem/1.4 var(--schrift);color:rgba(255,255,255,.72)}
html:not(.js) .sig__hinweis{display:none}
.sig__link{margin-top:1.2rem}
@media (min-width:1024px){
  .sig__schnitt{grid-template-rows:repeat(2,minmax(96px,auto)) minmax(132px,auto) auto;gap:10px;padding:2.2rem}
  .sch{padding:.9rem 1.3rem;font-size:1.0625rem}
  .sig__schnitt:not([data-stufe="0"]) .sch--alt{transform:translate(24px,-108px) rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){.sig *,.sig *::after{transition:none!important}}

/* ---------- Bewertungen (per Schalter aus, J-01) --------------------------- */
.bew__raster{display:grid;gap:1rem;margin-top:2.4rem}
@media (min-width:900px){.bew__raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.bk{padding:1.5rem 1.4rem;border-radius:var(--r);background:#fff;box-shadow:var(--sch-1)}
.bk__kopf{display:flex;align-items:center;gap:.7rem}
.bk__g{width:22px;height:22px;flex:none}
.bk__name{font:600 .9688rem/1.3 var(--schrift)}
.bk__text{margin-top:.8rem;font-size:.9688rem;line-height:1.6;color:var(--tinte-2)}
[data-platzhalter]{outline:2px dashed #d08b00;outline-offset:4px}
.bew__hinweis{margin-top:1.4rem;max-width:52rem;font:400 .8125rem/1.55 var(--schrift);color:var(--tinte-2)}
.bew__link{margin-top:.6rem}

/* ---------- Ansprechpartner: Tafel in CI-Grün, Typo statt Szene (R4, M-3) -------- */
.ap{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.ap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4rem}}
/* R5: Visitenkarte im Papier des Logos (Creme), kein Goldstreifen, kein zweites Dunkelgrün nach dem Glanz */
.ap__tafel{position:relative;padding:1.8rem 1.6rem 1.7rem;border-radius:var(--r);background:var(--creme);color:var(--marke);border:1px solid #d5e3f3;box-shadow:var(--sch-2)}
.ap__marke{display:flex;align-items:center;gap:.8rem}
.ap__zeichen{display:block;width:52px;flex:none}
.ap__zeichen img{width:52px;height:auto}
.ap__firma{font:700 1.25rem/1.05 var(--schrift);letter-spacing:-.01em;color:var(--marke)}
.ap__firma small{display:block;margin-top:.2rem;font:500 .8125rem/1.2 var(--schrift);letter-spacing:.02em;color:#4f5b6b}
.ap__rolle{margin-top:2.2rem;font:600 .8125rem/1.3 var(--schrift);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.ap__name{margin-top:.3rem;font:600 clamp(1.6rem,6.4vw,2.25rem)/1.12 var(--schrift);letter-spacing:-.02em;text-wrap:balance;color:var(--tinte)}
.ap__adr{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid #cbdcef;font-size:1rem;line-height:1.5;color:#4f5b6b}
.ap__tel{display:inline-flex;align-items:center;gap:.6rem;margin-top:.7rem;min-height:48px;font:600 clamp(1.35rem,5.6vw,1.75rem)/1 var(--schrift);letter-spacing:.01em;color:var(--marke);text-decoration:none}
.ap__tel .ico{width:26px;height:26px;color:var(--akzent)}
.ap__tel:hover{text-decoration:underline;text-underline-offset:5px}
@media (min-width:900px){.ap__tafel{padding:2.6rem 2.6rem 2.4rem}.ap__rolle{margin-top:3rem}}

/* ---------- WhatsApp-Handy (Beispiel, echtes Foto R4) ------------------------ */
.wa-sek__raster{display:grid;gap:2.6rem;align-items:center}
@media (min-width:900px){.wa-sek__raster{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:5rem}} /* R4: Textkante = Rasterkante */
@media (min-width:1200px){.wa-sek__raster{grid-template-columns:minmax(0,1fr) 360px;padding-right:calc(var(--pad) + 4rem)}}
.haken{display:grid;gap:.5rem;margin-top:1.3rem}
.haken li{display:flex;align-items:center;gap:.55rem;font:500 1rem/1.4 var(--schrift)}
.haken .ico{color:var(--akzent)}
.handy-rahmen{margin:0}
.handy__hinweis{margin-top:.9rem;text-align:center;font:500 .8125rem/1.3 var(--schrift);color:#5c5c61}
.handy{width:min(100%,340px);margin-inline:auto;padding:12px;border-radius:44px;background:#1b1f1d;box-shadow:var(--sch-2),var(--sch-3),inset 0 0 0 2px #2f3532}
.handy__schirm{border-radius:34px;overflow:hidden;background:#efe7dc}
.handy__kopf{display:flex;align-items:center;gap:.6rem;padding:1.6rem .9rem .7rem;background:#075e54;color:#fff}
.handy__ava{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--creme);flex:none}
.handy__ava img{width:24px}
.handy__wer{font:600 .875rem/1.2 var(--schrift)}
.handy__wer small{display:block;font:400 .6875rem/1.3 var(--schrift);opacity:.8}
.chat{display:grid;gap:.45rem;padding:.9rem .7rem 1.1rem}
.bl{max-width:84%;padding:.5rem .7rem .4rem;border-radius:12px;font:400 .8125rem/1.45 var(--schrift);color:#111;box-shadow:0 1px 1px rgba(10,30,56,.06)}
.bl--k{justify-self:end;background:#d9fdd3;border-top-right-radius:4px}
.bl--b{justify-self:start;background:#fff;border-top-left-radius:4px}
.bl--bild{padding-top:.3rem}
.bl__foto{display:block;width:calc(100% + .8rem);max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0 -.4rem .45rem;border-radius:9px;background:#8f8b82}
.bl__zeit{display:block;margin-top:.1rem;text-align:right;font:400 .6875rem/1.2 var(--schrift);color:#5b6b63}

/* ---------- Vergleich als Tabelle, mobil Zeile für Zeile nebeneinander (R4) ------ */
#vergleich .kopfzeile--mitte{max-width:52rem}
.vgl{max-width:960px;margin:2.8rem auto 0}
.vt,.vt thead,.vt tbody{display:block;width:100%} /* Rollen per ARIA im HTML, Raster je Zeile */
.vt thead tr,.vt tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 .6rem}
.vt__leer{display:none}
.vt th,.vt td{text-align:left;vertical-align:top}
.vt thead th{position:relative;padding:1.4rem .9rem .9rem;border-radius:var(--r-kachel) var(--r-kachel) 0 0}
.vt__kopf{display:flex;align-items:center;gap:.6rem;font:600 1rem/1.2 var(--schrift);color:var(--tinte)}
.vk__logo{width:auto;height:34px;flex:none}
.vk__unter{display:block;margin-top:.15rem;font:400 .75rem/1.3 var(--schrift);color:#5c5c61}
.vk__leer{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e6e6ea;color:#8e8e93;flex:none}
.vk__leer .ico{width:18px;height:18px}
.vk__marke{position:absolute;top:-.8rem;left:.9rem;padding:.3rem .7rem;border-radius:999px;background:var(--blitz);color:var(--marke);
  font:600 .75rem/1.2 var(--schrift);white-space:nowrap}
.vt tbody th{grid-column:1/-1;padding:1rem 0 .35rem;font:600 .8125rem/1.3 var(--schrift);letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-2)}
.vt tbody td{display:flex;align-items:flex-start;gap:.45rem;padding:.75rem .9rem;font:600 .9375rem/1.4 var(--schrift);color:var(--tinte)}
.vt tbody td .ico{width:20px;height:20px;margin-top:.05rem}
.vt th,.vt td{min-width:0;hyphens:manual;-webkit-hyphens:manual} /* R5 D-R4-3: keine Auto-Trennung, Text passt bei 320 ohne */
@media (max-width:399px){.vt tbody td{padding:.7rem .6rem;gap:.35rem;font-size:.875rem}.vt tbody td .ico{width:18px;height:18px}.vt thead th{padding:1.3rem .6rem .8rem}.vt__kopf{font-size:.9375rem;gap:.45rem}.vk__marke{left:.6rem;padding:.25rem .55rem;font-size:.6875rem}}
.vt__wir{background:var(--akzent-soft)}
.vt__wir .ico{color:var(--akzent)}
.vt__die{background:var(--flaeche-2)}
.vt td.vt__die{font-weight:500;color:#48484a}
.vt__die .ico{color:#8e8e93}
.vt tbody td{border-radius:var(--r-k)}
.vgl__zug{margin:1.6rem auto 0;max-width:46rem;font-size:.9688rem;color:var(--tinte-2);text-align:center}
#vergleich .cta-paar{justify-content:center}
@media (min-width:900px){
  .vt thead tr,.vt tbody tr{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:0 1rem}
  .vt__leer{display:block}
  .vt thead th{padding:1.8rem 1.4rem 1.1rem}
  .vt__kopf{font-size:1.125rem}
  .vk__logo{height:40px}
  .vt tbody th{grid-column:auto;align-self:center;padding:1.1rem 0;border-top:1px solid var(--linie);text-transform:none;letter-spacing:0;font:500 1rem/1.35 var(--schrift)}
  .vt tbody td{padding:1.1rem 1.4rem;border-radius:0;font-size:1rem}
  .vt tbody tr:last-of-type td{border-radius:0 0 var(--r-kachel) var(--r-kachel)}
  .vt thead .vt__wir,.vt tbody .vt__wir{background:#fff;box-shadow:inset 2px 0 0 var(--marke),inset -2px 0 0 var(--marke)}
  .vt thead .vt__wir{box-shadow:inset 2px 0 0 var(--marke),inset -2px 0 0 var(--marke),inset 0 2px 0 var(--marke)}
  .vt tbody tr:last-of-type .vt__wir{box-shadow:inset 2px 0 0 var(--marke),inset -2px 0 0 var(--marke),inset 0 -2px 0 var(--marke)}
  .vt thead .vt__die{background:var(--flaeche-2)}
  .vk__marke{left:1.4rem}
}

/* ---------- Ablauf: Foto + Zahlenanker links, große Ziffern rechts (R4) ---------- */
.ablauf__anker{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.6rem}
.ablauf__anker span{display:flex;align-items:baseline;gap:.5rem;font:600 1rem/1.2 var(--schrift);color:var(--tinte-2)}
.ablauf__anker b{font:700 clamp(3rem,12vw,4.5rem)/1 var(--schrift);letter-spacing:-.04em;color:var(--marke)}
.ablauf__anker span + span b{color:var(--akzent)}
.ablauf{counter-reset:schritt;margin-top:2.4rem;display:grid}
.as{counter-increment:schritt;display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1rem;padding:1.4rem 0;border-top:1px solid var(--linie-2)}
.as:last-child{border-bottom:1px solid var(--linie-2)}
.as__nr::before{content:"0" counter(schritt);font:700 2.25rem/1 var(--schrift);letter-spacing:-.04em;color:var(--marke)}
.as:first-child .as__nr::before{color:var(--akzent)}
.as h3{font:600 1.25rem/1.3 var(--schrift);letter-spacing:-.01em}
.as p{margin-top:.35rem;color:var(--tinte-2)}
/* R5: Leiste statt Foto (D-R4-8) */
@media (min-width:700px){
  .ablauf-raster--leiste .ablauf__links{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 4rem}
  .ablauf-raster--leiste .ablauf__links .kopfzeile{max-width:34rem}
  .ablauf-raster--leiste .ablauf__anker{margin-top:0}
  .ablauf-raster--leiste .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;margin-top:3rem}
  .ablauf-raster--leiste .as{grid-template-columns:minmax(0,1fr);gap:.9rem;padding:1.6rem 0 2rem;border-top:2px solid var(--linie-2)}
  .ablauf-raster--leiste .as:last-child{border-bottom:0}
  .ablauf-raster--leiste .as:first-child{border-top-color:var(--akzent)}
}
@media (min-width:1024px){
  .ablauf-raster--leiste .ablauf{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2.25rem;margin-top:4rem}
  .ablauf-raster--leiste .as__nr::before{font-size:3.5rem}
  .ablauf-raster--leiste .as h3{font-size:1.375rem;text-wrap:balance}
  .ablauf-raster--leiste .as p{font-size:1.0625rem}
}

/* ---------- Einsätze: kuratierte Abzüge im ruhigen Raster (R3) ----------------- */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:2.2rem;padding:.9rem;border-radius:calc(var(--r) + 6px);background:var(--creme)}
.gal__k{margin:0;padding:.45rem .45rem .7rem;border-radius:var(--r-kachel);background:#fff;box-shadow:0 1px 2px rgba(10,30,56,.06),0 22px 34px -22px rgba(10,30,56,.14)} /* M-2 */
.gal__bild{overflow:hidden;border-radius:calc(var(--r-kachel) - 5px);aspect-ratio:4/5;background:var(--flaeche-2)}
.gal__bild img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-lang) var(--ease)}
.gal__k:hover .gal__bild img{transform:scale(1.03)}
.gal__k figcaption{margin:.6rem .25rem 0;font:600 .8125rem/1.3 var(--schrift);color:var(--tinte);hyphens:manual;-webkit-hyphens:manual} /* R5 D-R4-10 */
.gal__art{display:block;margin-bottom:.15rem;font:600 .6875rem/1 var(--schrift);letter-spacing:.06em;text-transform:uppercase;color:var(--akzent)}
@media (max-width:360px){.gal__k figcaption{font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.gal__k:hover .gal__bild img{transform:none}}
@media (min-width:1024px){
  .gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;padding:1.4rem}
  .gal__k{padding:.6rem .6rem .9rem}
  .gal__k figcaption{font-size:.875rem}
}

/* ---------- Einsatzgebiet: Karte mobil früh, Orte als Pillen (R4) ---------------- */
.geb{display:grid;gap:2rem;align-items:start}
.geb p + p{margin-top:.9rem}
.geb__titel{font:600 1rem/1.3 var(--schrift);color:var(--tinte)}
.orte{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.orte li{display:inline-flex;align-items:baseline;gap:.35rem;padding:.45rem .85rem;border-radius:999px;background:#fff;border:1px solid var(--linie);font:600 .9375rem/1.2 var(--schrift);color:var(--tinte)}
.orte small{font:500 .75rem/1.2 var(--schrift);color:var(--tinte-2)}
.orte__sitz{background:var(--marke)!important;border-color:var(--marke)!important;color:#fff!important}
.orte__sitz small{color:var(--blitz)}
.geb__rest .cta-paar{margin-top:1.8rem}
@media (min-width:1024px){
  .geb{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:4rem;row-gap:1.6rem}
  .geb__kopf{grid-column:1;grid-row:1}
  .geb__rest{grid-column:1;grid-row:2}
  .karte{grid-column:2;grid-row:1/span 2;align-self:center}
}
.karte{border-radius:var(--r);overflow:hidden;background:#fff}
.karte svg{width:100%;height:auto;
  -webkit-mask-image:radial-gradient(75% 75% at 45% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(75% 75% at 45% 50%,#000 62%,transparent 100%)}
.karte .ort text{font:600 18px/1 var(--schrift);fill:var(--tinte);paint-order:stroke;stroke:#eef3f9;stroke-width:4px;stroke-linejoin:round}
.karte .ort circle{fill:var(--akzent);r:7px}
.karte .ort--sitz text{font-size:19px;font-weight:700;fill:var(--marke);stroke:#fff}
.karte .ort--sitz circle{fill:var(--marke);stroke:var(--blitz);stroke-width:4;r:11px}
.karte .fluss{fill:none;stroke:#9cc3d6;stroke-width:6;stroke-linecap:round}
.karte .fluss--t{stroke-width:4}
.karte .fluss__name{font:italic 500 17px/1 var(--schrift);fill:#4d7a93}
.karte .schild{fill:#fff;stroke:var(--linie)}
.karte__legende{padding:.6rem 1.1rem .7rem;font:500 .8125rem/1.4 var(--schrift);color:var(--tinte-2);text-align:center}
@media (max-width:1023px){.karte{margin-inline:calc(-1*var(--pad) + 8px)}}

/* ---------- Anfrage unten: große Zahlen links, Formular mit grünem Kopf (R4) ------- */
.anf{display:grid;gap:2rem}
.anf__zahlen{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:1.25rem;margin-top:1.8rem;border-top:1px solid var(--linie)}
.anf__zahlen li{display:grid;grid-column:1/-1;grid-template-columns:9.5rem minmax(0,1fr);grid-template-columns:subgrid;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--linie)}
.anf__zahlen b{font:700 2.25rem/1 var(--schrift);letter-spacing:-.035em;color:var(--marke);white-space:nowrap}
.anf__zahlen span{font-size:.9688rem;line-height:1.45;color:var(--tinte-2)}
.anf__form{border-radius:var(--r);background:#fff;box-shadow:var(--sch-2),var(--sch-3);overflow:hidden}
.anf__form .fk__kopf{margin:0 0 .4rem;padding:1.2rem 1.2rem 1rem;background:var(--marke);color:#fff}
.anf__form .fk__felder{padding:0 1.2rem 1.4rem}
.anf__formtitel{font:600 1.25rem/1.25 var(--schrift);letter-spacing:-.01em;color:#fff}
.anf__form .fk__weg{max-width:none;margin:.8rem 0 .2rem}
.anf__form .fk__weg li{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.anf__form .fk__weg li:first-child,.anf__form .fk[data-schritt="2"] .fk__weg li:nth-child(-n+2),.anf__form .fk[data-schritt="3"] .fk__weg li:nth-child(-n+3),.anf__form .fk[data-schritt="4"] .fk__weg li{background:var(--blitz);color:var(--marke-tief)}
.anf__form .fortschritt__z{color:rgba(255,255,255,.85)}
.anf__form .zurueck{color:#fff}
.anf__form .fk__wa{color:#fff}
.anf__form .fk__wa .ico{color:#6fdc98}
@media (min-width:640px){.anf__form .fk__kopf{padding:1.5rem 2rem 1.2rem}.anf__form .fk__felder{padding:0 2rem 2rem}}
@media (min-width:1024px){
  .anf{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4rem;align-items:start}
  .anf .kopfzeile{position:sticky;top:110px}
  .anf__zahlen b{font-size:2.75rem}
}

/* ---------- FAQ: zweispaltig, Akkordeon als Karte (R4) -------------------------- */
.faq-raster{display:grid;gap:2rem}
.faq{padding:.4rem 1.2rem;border-radius:var(--r);background:#fff;box-shadow:var(--sch-2)}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:last-of-type{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;cursor:pointer;list-style:none;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:600 1.125rem/1.4 var(--schrift);color:var(--tinte)}
.faq summary .ico{width:22px;height:22px;flex:none;color:var(--akzent);transition:transform var(--d-mittel) var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq__a{padding:0 2.5rem 1.4rem 0;color:#5c5c61}
.faq__mehr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.4rem;padding:1.3rem 1.4rem;border-radius:var(--r);background:var(--akzent-soft)}
.faq__mehr p{font-size:.9375rem;color:#5c5c61}
.faq__mehr b{display:block;font:600 1rem/1.35 var(--schrift);color:var(--tinte)}
.faq__mehr .ico{color:var(--wa-gruen)}
@media (max-width:1023px){.faq__links{display:contents}.faq__links .faq__mehr{display:flex;order:2}.faq{order:1}}
@media (min-width:768px){.faq{padding:.6rem 2.2rem}}
@media (min-width:1024px){
  .faq-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4rem;align-items:start}
  .faq-raster .h2{font-size:clamp(1.75rem,2.6vw,2.2rem)}
  .faq__links{position:sticky;top:calc(var(--kopf) + 40px)}
  .faq__links .faq__mehr{display:flex;margin-top:2rem}
}

/* ---------- Schluss-CTA: echtes Foto unter CI-Grün, eine Hauptaktion (R4) ------- */
.schluss{text-align:center;margin-bottom:8px;overflow-x:clip;
  background:linear-gradient(180deg,rgba(8,42,82,.84),rgba(8,42,82,.93)),url("../img/einsatz-treppe-quer-640.webp") center 40%/cover no-repeat,var(--marke-tief)}
.schluss .kopfzeile{margin-inline:auto}
.schluss__text{max-width:46rem;margin-inline:auto}
.schluss .knopf--hell .ico{color:var(--marke)}
.knopf--gross{min-height:64px;padding:1rem 2rem;font-size:1.25rem;letter-spacing:.01em}
.schluss__aktionen{flex-direction:column;align-items:stretch;gap:.9rem;max-width:22rem;margin-inline:auto}
.schluss__aktionen .knopf{min-height:60px;justify-content:center;font-size:1.125rem}
.schluss__aktionen .knopf--wa{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.schluss__aktionen .knopf--wa .ico{color:#7fe0a3}
.schluss__aktionen .knopf--wa:hover{border-color:#fff}
.schluss__form{justify-content:center;margin-top:.4rem;font-size:.9688rem}
@media (min-width:640px){
  .schluss__aktionen{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;max-width:none;gap:1rem}
  .schluss__aktionen .knopf{min-width:15rem}
  .schluss__form{grid-column:1/-1;justify-self:center}
}
@media (min-width:768px){.schluss{margin-bottom:16px}}
@media (min-width:1024px){
  .schluss{background-image:linear-gradient(180deg,rgba(8,42,82,.84),rgba(8,42,82,.93)),url("../img/einsatz-treppe-quer-1200.webp")}
  .schluss .h2{font-size:clamp(2.4rem,3.6vw,3.4rem)}
}

/* ---------- Footer: Logo auf Creme-Kachel (D-R3-2), Kontakt groß (R4) ----------- */
.fuss{padding:3.2rem 0 2rem;background:var(--marke-tief);color:rgba(255,255,255,.82);font-size:.9375rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss__oben{display:grid;gap:2rem}
.fuss .logo__zeichen{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--creme)}
.fuss .logo__zeichen img{height:38px}
.fuss .logo__name{color:#fff;font-size:1.25rem}
.fuss .logo__unter{color:rgba(255,255,255,.72);display:block}
.fuss__adr{margin-top:1rem;font-size:1.0625rem;line-height:1.5;color:#fff}
.fuss__titel{font:600 .875rem/1.3 var(--schrift);color:var(--blitz);margin-bottom:.5rem}
.fuss__tel{display:inline-flex;align-items:center;min-height:48px;font:600 1.625rem/1 var(--schrift);letter-spacing:.01em}
.fuss__wa{display:flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600}
.fuss__wa .ico{color:#6fdc98}
.fuss__liste{display:flex;flex-wrap:wrap;gap:0 1.3rem}
.fuss__liste a{display:inline-flex;align-items:center;min-height:44px}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);font-size:.875rem}
.fuss__unten nav{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.2rem}
.fuss__unten nav a{display:inline-flex;align-items:center;min-height:44px}
.fuss__unten button{background:none;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;min-height:44px}
.fuss__unten button:hover{text-decoration:underline}
@media (min-width:900px){
  .fuss__oben{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
  .fuss__liste{display:grid;gap:0}
}
/* ---------- FAB (alle Breiten) · R3: keine Sticky-Leiste unten (Dauerregel 28.10.2026, nie-wieder Nr. 16) ---- */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:940;display:grid;gap:10px;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--d-mittel) ease,transform var(--d-mittel) var(--ease)}
.fab.zeig{opacity:1;transform:none}
.fab.zeig a{pointer-events:auto}
.fab a{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;text-decoration:none;
  transition:transform var(--d-kurz) var(--ease)}
.fab a:hover{transform:scale(1.06)}
.fab .ico{width:22px;height:22px}
/* Gelber Ring: Kontrast ≥ 3:1 auch auf dunklen Inseln (D-17) */
.fab__tel{background:var(--marke);color:#fff;box-shadow:0 0 0 3px var(--blitz),var(--sch-2)}
.fab__wa{background:#fff;color:var(--wa-gruen);box-shadow:0 0 0 3px var(--blitz),var(--sch-2)}
@media (min-width:1024px){
  .fab{right:24px;bottom:24px;gap:12px}
  .fab a{width:56px;height:56px}
  .fab .ico{width:24px;height:24px}
  .fab a::before{content:attr(data-tipp);position:absolute;right:68px;top:50%;transform:translate(6px,-50%);padding:.4rem .7rem;border-radius:8px;
    background:var(--tinte);color:#fff;font:500 .8125rem/1 var(--schrift);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d-kurz) ease,transform var(--d-kurz) ease}
  .fab a:hover::before,.fab a:focus-visible::before{opacity:1;transform:translate(0,-50%)}
}

/* ---------- Reveal (einmal) --------------------------------------------- */
html.js .reveal{opacity:0;transform:translateY(6px);transition:opacity var(--d-lang) ease,transform var(--d-lang) var(--ease)}
@media (min-width:1024px){html.js .reveal{transform:translateY(10px)}}
html.js .reveal.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- Rechtsseiten / Danke ------------------------------------------ */
.seitenkopf{padding:3rem 0 2rem;background:var(--flaeche-2)}
.seitenkopf h1{font:600 clamp(1.9rem,6vw,2.8rem)/1.12 var(--schrift);letter-spacing:-.02em}
.seitenkopf p{margin-top:.6rem;color:var(--tinte-2)}
.text-seite{max-width:780px;padding-block:2.5rem 4rem}
.text-seite h2{font:600 1.375rem/1.3 var(--schrift);margin:2.2rem 0 .7rem;letter-spacing:-.01em}
.text-seite h3{font:600 1.0625rem/1.35 var(--schrift);margin:1.5rem 0 .5rem}
.text-seite p{margin:0 0 .9rem;color:#3a3a3c}
.text-seite ul{margin:0 0 1rem;padding-left:1.2rem;list-style:disc;color:#3a3a3c}
.text-seite li{margin-bottom:.3rem}
.text-seite a{word-break:break-word}
.rechtskopf{border-bottom:1px solid var(--linie)}
.rechtsseite .sek,.rechtsseite .text-seite{padding-top:0}
.danke__sek{min-height:calc(100svh - var(--kopf) - 90px);display:grid;align-items:center;padding:3.5rem 0 4rem;background:linear-gradient(180deg,var(--akzent-soft),#fff 70%)}
.danke__in{max-width:640px;text-align:center}
.danke__haken{width:112px;height:112px;margin:0 auto 1.6rem}
.danke__haken svg{width:100%;height:100%}
.danke__haken circle{fill:var(--marke);stroke:var(--blitz);stroke-width:4}
.danke__haken path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:haken var(--d-lang) .25s var(--ease) forwards}
@keyframes haken{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.danke__haken path{animation:none;stroke-dashoffset:0}}
.danke__h1{font:700 clamp(2.4rem,10vw,3.6rem)/1.05 var(--schrift);letter-spacing:-.03em;color:var(--marke)}
.danke__text{margin-top:1rem;font-size:1.0938rem;color:var(--tinte)}
.danke__zwei{margin-top:1.4rem;color:var(--tinte-2)}
.danke__zurueck{margin-top:1.6rem}


/* Chef C1: Orte als Fließtext statt Pillen */
.orte-text{margin-top:.6rem;max-width:34rem;font:400 1rem/1.55 var(--schrift);color:var(--tinte)}
/* Chef C4: am Handy keine schwebenden Knöpfe, Anrufen/WhatsApp stehen fest im Kopf */
@media (max-width:767px){.fab{display:none!important}}
@media (max-width:399px){.logo__ort{display:none}} /* Chef C2: am Handy nur «Gebäudereinigung», passt neben die Kopf-Knöpfe */

/* R9: WhatsApp-Link unter „Worum geht es?“ */
.schritt[data-schritt="1"] .fk__wa{margin:-.25rem 0 .75rem}
/* R9: Google-Zeile im Hero */
.held__vertrauen--google{gap:.45rem}
.held__g{width:18px;height:18px;flex:none}
.held__sterne{display:inline-flex;gap:1px}
.held__stern{width:15px;height:15px;color:#f2c14e;fill:currentColor}
.held__vertrauen--google b{color:#fff;font-weight:700}
/* R9: Zahlen am Handy rechtsbündig an den Text */
@media (max-width:767px){
  .anf__zahlen{grid-template-columns:5.25rem minmax(0,1fr);column-gap:.9rem}
  .anf__zahlen b{text-align:right}
}
/* R9: Hero-Freisteller nach Vali-Norm (Mann + Fahrzeug) */
.held__bild--frei{margin:14px calc(-.5*var(--pad)) 0}
.held__bild--frei img{aspect-ratio:auto;object-fit:contain;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 18px 22px rgba(0,0,0,.3))}
.held__bild--frei::before{display:none!important}
.ki-hinweis{position:absolute;right:6px;bottom:2px;font-size:11px;line-height:1.2;color:rgba(255,255,255,.75);background:rgba(8,42,82,.45);padding:2px 7px;border-radius:6px}
.held__bild--frei figcaption.ki-hinweis{left:auto;bottom:2px;gap:0;text-transform:none;letter-spacing:0;font-weight:400}
@media (min-width:1024px){.held__bild--frei{margin:0 -1rem 0 1rem;align-self:end}}
.held__bild--frei figcaption.ki-hinweis{font-size:11px;padding:2px 7px;border-radius:6px;background:rgba(8,42,82,.45);color:rgba(255,255,255,.75);right:6px}
@media (max-width:1023px){
  .held__bild--frei{margin:14px 0 0;padding-bottom:40px}
  .held__bild--frei figcaption.ki-hinweis{bottom:42px}
}
/* R9: Einsatzgebiet nach RGN-Standard: OSM-Karte, weich in den Sektionsgrund ausgeblendet */
.geb__karte{position:relative;margin:0 calc(-1*var(--pad))}
.geb__karte img{display:block;width:100%;height:auto}
@supports (mask-image:linear-gradient(#000,transparent)){
  .geb__karte img{-webkit-mask-image:radial-gradient(110% 100% at 50% 50%,#000 52%,transparent 90%);mask-image:radial-gradient(110% 100% at 50% 50%,#000 52%,transparent 90%)}
}
.geb__osm{margin-top:.25rem;padding-inline:var(--pad);font:400 .6875rem/1.3 var(--schrift);color:var(--tinte-2);text-align:right}
@media (min-width:1024px){
  .geb{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:2rem}
  .geb__kopf{grid-row:1}
  .geb__karte{grid-column:2;grid-row:1;align-self:center;margin:-3rem -4rem -3rem 0}
  .geb__osm{padding-inline:0 4rem}
}

/* R10 (04.11.2026, Florian): Mobil Hero-Inhalt zentriert, Haken-Liste als linksbündiger Block in der Mitte;
   Freisteller größer und unten vom Bogen angeschnitten; Desktop größer; WhatsApp-Link mobil unter den Kacheln. */
@media (max-width:1023px){
  .held__text{text-align:center;display:flex;flex-direction:column;align-items:center}
  .held__satz{margin-inline:auto}
  .held__punkte{width:fit-content;margin-inline:auto;text-align:left}
  .held__vertrauen{justify-content:center}
  .held__bild--frei{margin:12px -10% -30px -3%;padding-bottom:0}
  .schritt[data-schritt="1"]:not([hidden]){display:flex;flex-direction:column}
  .schritt[data-schritt="1"] .kacheln{order:2}
  .schritt[data-schritt="1"] .fk__wa{order:3;align-self:center;margin:.9rem 0 0}
}
@media (min-width:640px) and (max-width:1023px){.held__bild--frei{max-width:720px;margin:16px auto -44px}}
@media (min-width:1024px){.held__bild--frei{margin:0 -5.5rem -3rem -.5rem}}
/* R10: Karte ragt am Desktop 24 px über den Rand – Seitenüberlauf verhindern */
#einsatzgebiet{overflow-x:clip}
