/* AsN Objektbetreuung · Landingpage Rohrreinigung Offenbach · Entwurf D (Aufbau wie Vali) */
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* Farben aus dem Kundenlogo */
  --navy-950:#001633; --navy-900:#001A3B; --navy:#002048; --navy-700:#04274B;
  --blau:#0083E4; --blau-hell:#08A4EF; --blau-tief:#0074D3; --blau-text:#0068C0; --blau-kicker-dunkel:#4FC0F6; --blau-linie:#0397ED; --welle:#01A1F1;
  --signal:#FF6B57; --wa:#25D366; --wa-text:#05301A;
  --text:#0B1B33; --text-2:#45566F; --linie:#DCE5F0;
  --flaeche:#FFFFFF; --flaeche-2:#F2F6FB; --flaeche-3:#E7EFF8;
  --font-display:"Montserrat",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif;
  --r-10:10px; --r-14:14px; --r-20:20px; --r-26:26px; --r-pill:999px;
  --schatten-1:0 1px 2px rgba(0,22,51,.05),0 4px 14px rgba(0,22,51,.05);
  --schatten-2:0 2px 6px rgba(0,22,51,.05),0 18px 40px rgba(0,22,51,.06);
  --rahmen:1200px; --rand:clamp(16px,4vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text);background:var(--flaeche);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;cursor:pointer}
p,li,figcaption,summary,dd{text-wrap:pretty}
svg{flex-shrink:0}
.rahmen{width:100%;max-width:calc(var(--rahmen) + 2*var(--rand));margin-inline:auto;padding-inline:var(--rand)}
.skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:#fff;color:var(--navy);padding:10px 14px;border-radius:var(--r-10)}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--blau-hell);outline-offset:3px;border-radius:6px}

/* Typo */
.kicker{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:0;color:var(--blau-text);margin-bottom:12px}
.kicker--hell{color:var(--blau-kicker-dunkel)}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,1.1rem + 2.4vw,2.85rem);line-height:1.12;letter-spacing:-.022em;color:var(--navy);text-wrap:balance}
.h2 .farbe{color:var(--blau-tief)}
.h2--hell{color:#fff}
.h2--hell .farbe{color:var(--blau-hell)}
.lead{font-size:1.08rem;color:var(--text-2);max-width:56ch}
.klein{font-size:.88rem;color:var(--text-2);margin-top:12px}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:var(--r-10);background:var(--blau-tief);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none;border:0;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;box-shadow:0 6px 18px rgba(0,116,211,.06)}
.knopf svg{width:20px;height:20px}
.knopf:hover{background:#0063B8;transform:translateY(-1px)}
.knopf:active{transform:translateY(1px) scale(.99)}
.knopf--hell{background:var(--blau-hell);color:var(--navy-950);box-shadow:0 10px 28px rgba(8,164,239,.06)}
.knopf--hell:hover{background:#36B8F5}
.knopf--wa{background:var(--wa);color:var(--wa-text);box-shadow:0 6px 18px rgba(37,211,102,.06)}
.knopf--wa:hover{background:#3BDB78}
.knopf--gross{min-height:58px;font-size:1.06rem;padding:14px 26px}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:900;color:#fff;transition:background-color .25s,box-shadow .25s}
.kopf.ist-unten{background:var(--navy-950);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.kopf__innen{display:flex;align-items:center;gap:28px;height:76px}
.kopf__logo{display:flex;align-items:center;min-height:44px}
.kopf__logo img{height:46px;width:auto}
.kopf__nav{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:.96rem}
.kopf__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;opacity:.88;position:relative}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--blau-hell);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.kopf__nav a:hover{opacity:1}.kopf__nav a:hover::after{transform:scaleX(1)}
.kopf__tel{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:10px 16px;border:1.5px solid rgba(255,255,255,.28);border-radius:var(--r-10)}
.kopf__tel svg{width:18px;height:18px;color:var(--blau-hell)}
.kopf__tel-rund,.kopf__wa-rund{display:none}
.kopf__notdienst{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:.86rem;padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.puls{position:relative;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,107,87,.22);flex-shrink:0}

/* Held */
.held{position:relative;color:#fff;padding:120px 0 150px;overflow:hidden;isolation:isolate}
.held__flaeche{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(48% 70% at 76% 52%,rgba(30,136,255,.42) 0%,rgba(0,83,185,.28) 40%,rgba(0,34,74,0) 74%),
  radial-gradient(36% 56% at 100% 0,rgba(8,164,239,.26) 0%,rgba(8,164,239,0) 70%),
  linear-gradient(112deg,var(--navy-950) 0%,var(--navy) 46%,#003A8F 100%)}
.held__flaeche::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,rgba(0,22,51,0),rgba(0,22,51,.35))}
.held__innen{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);align-items:center;gap:20px}
.held__text{position:relative;z-index:2;max-width:660px}
.held__titel{font-family:var(--font-display);font-weight:800;font-size:clamp(2.15rem,1rem + 2.7vw,3.15rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:22px}
.held__titel .zeile{display:block;text-wrap:balance}
.held__titel .farbe{color:var(--blau-hell)}
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich svg{position:absolute;left:-2%;right:-4%;bottom:-.16em;width:106%;height:.24em;color:var(--blau-hell);overflow:visible}
.strich path{stroke-dasharray:170;stroke-dashoffset:170;animation:zeichnen 1s .7s cubic-bezier(.65,0,.35,1) forwards}
.held__lead{font-size:1.12rem;color:rgba(255,255,255,.84);max-width:46ch;margin-bottom:22px}
.haken{display:grid;gap:11px;margin-bottom:30px}
.haken li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:1.02rem}
.haken svg{width:26px;height:26px;padding:4px;border-radius:50%;background:rgba(8,164,239,.16);fill:none;stroke:var(--blau-hell);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.haken path{stroke-dasharray:24;stroke-dashoffset:24;animation:zeichnen .5s cubic-bezier(.65,0,.35,1) forwards}
.haken li:nth-child(1) path{animation-delay:.5s}.haken li:nth-child(2) path{animation-delay:.68s}.haken li:nth-child(3) path{animation-delay:.86s}
.held__aktion{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.notdienst{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:20px;padding:9px 16px 9px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.95rem;line-height:1.3}
.notdienst b{font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:.01em;color:#fff}
.notdienst__zusatz{color:rgba(255,255,255,.82);padding-left:10px;border-left:1px solid rgba(255,255,255,.28)}
.notdienst--box{margin-bottom:18px}
.held__wa{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.held__wa svg{width:22px;height:22px;color:var(--wa)}
.held__wa:hover{text-decoration-color:#fff}
.held__bild{position:relative;margin-right:calc(-1 * var(--rand) - 40px)}
.held__bild img{width:100%;aspect-ratio:1400/1045;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-composite:intersect}
.held__bild figcaption{position:absolute;right:15%;bottom:14%;font-size:.74rem}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* Leistungen · Tafel überlappt den Held */
.leistungen{position:relative;z-index:5;margin-top:-104px;padding-bottom:88px}
.tafel{background:#fff;border-radius:var(--r-26);box-shadow:0 30px 70px rgba(0,22,51,.06),0 2px 6px rgba(0,22,51,.05);padding:40px 0 36px;position:relative;overflow:hidden}
.tafel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--blau-tief),var(--blau-hell) 60%,var(--welle))}
.leiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 40px 32px;padding-bottom:28px;border-bottom:1px solid var(--linie)}
.leiste li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--blau-hell)}
.leiste b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.25;color:var(--navy)}
.leiste span{font-size:.92rem;color:var(--text-2);line-height:1.4;text-wrap:balance}
.tafel__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 40px 28px}
.rund{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;color:var(--navy);display:grid;place-items:center;transition:background-color .18s,color .18s,border-color .18s,opacity .18s}
.rund svg{width:20px;height:20px}
.rund:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.rund:disabled{opacity:.45;cursor:default;background:#fff;color:var(--navy);border-color:var(--linie)}
.spur-rahmen{position:relative}
.rund--seite{position:absolute;top:var(--pfeil-y,50%);z-index:2;transform:translateY(-50%);border-color:#fff;box-shadow:var(--schatten-2)}
.rund--links{left:14px}.rund--rechts{right:14px}
.zaehler--mobil{display:none}
.zaehler{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--text-2);min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.zaehler b{color:var(--navy)}
.spur{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:40px;padding:4px 40px 10px;scrollbar-width:none;overscroll-behavior-x:contain}
.spur::-webkit-scrollbar{display:none}
li.karte{flex:0 0 calc((100% - 2*20px) / 3.25);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--flaeche-2);border-radius:var(--r-20);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
li.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.karte__bild{position:relative}
.karte__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
li.karte h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--navy);margin:22px 20px 8px}
li.karte p{font-size:.96rem;color:var(--text-2);margin:0 20px 18px}
.karte__link{margin:auto 20px 12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--blau-text);text-decoration:none}
.karte__link svg{width:18px;height:18px;transition:transform .2s}
.karte__link:hover svg{transform:translateX(4px)}

/* WhatsApp-Sektion */
.schreiben{background:var(--flaeche-2);padding:96px 0;overflow:hidden}
.schreiben__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.handy{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 0}
.handy::before{content:"";position:absolute;width:min(460px,100%);aspect-ratio:1;border-radius:50%;background:var(--flaeche-3);top:50%;left:50%;transform:translate(-50%,-50%)}
.handy__hinweis{position:relative;margin-top:18px;font-size:.86rem;color:var(--text-2);text-align:center}
.handy__geraet{position:relative;width:340px;max-width:calc(100% - 16px);aspect-ratio:71.6/147.6;padding:11px;border-radius:58px;background:#0B0E14;box-shadow:0 0 0 2px #454D5B,0 0 0 4px #1B2029,0 40px 80px rgba(0,22,51,.06);container-type:inline-size}
.handy__geraet::before,.handy__geraet::after{content:"";position:absolute;width:4px;background:#2A313D}
.handy__geraet::before{left:-8px;top:22%;height:17%;border-radius:3px 0 0 3px;background:linear-gradient(#2A313D 0 44%,transparent 44% 56%,#2A313D 56%)}
.handy__geraet::after{right:-8px;top:27%;height:11%;border-radius:0 3px 3px 0}
.handy__schirm{position:relative;height:100%;border-radius:47px;overflow:hidden;display:flex;flex-direction:column;background:#F6F6F6;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,var(--font-body),sans-serif;font-size:4.3cqw;color:#111B21}
.handy__status{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:3.5em;padding:.45em 1.7em 0 2.2em;color:#000}
.handy__uhr{font-weight:600;font-size:1.06em;letter-spacing:-.01em}
.handy__insel{position:absolute;left:50%;top:.8em;width:7.6em;height:2.15em;margin-left:-3.8em;border-radius:999px;background:#000}
.handy__symbole{display:flex;align-items:center;gap:.32em}
.handy__symbole svg{height:.86em;width:auto;fill:currentColor}
.handy__kopf{display:flex;align-items:center;gap:.55em;flex-shrink:0;padding:.25em .9em .6em .65em;border-bottom:1px solid rgba(0,0,0,.08)}
.handy__zurueck{width:.72em;height:1.2em;color:#007AFF;flex-shrink:0}
.handy__avatar{width:2.55em;height:2.55em;border-radius:50%;background:var(--navy);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.handy__avatar img{width:2.15em;height:auto}
.handy__name{flex:1;min-width:0;line-height:1.22}
.handy__name b{display:block;font-weight:600;font-size:1.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handy__name small{display:block;font-size:.78em;color:#5E6E78}
.handy__icon{width:1.5em;height:1.5em;color:#007AFF;flex-shrink:0;margin-left:.55em}
.handy__verlauf{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.25em;padding:.6em .62em .7em;overflow:hidden;background:#EFEAE2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M60 12l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M96 18h14v10H96zM100 18v-3h6v3'/%3E%3Cpath d='M10 70c6-8 14-8 20 0s14 8 20 0'/%3E%3Ccircle cx='80' cy='66' r='9'/%3E%3Cpath d='M87 73l8 8'/%3E%3Cpath d='M28 100l8-8 8 8-8 8z'/%3E%3Cpath d='M66 100h18M75 91v18'/%3E%3Cpath d='M104 92c4 0 7 3 7 7s-7 11-7 11-7-7-7-11 3-7 7-7z'/%3E%3C/g%3E%3C/svg%3E") 0 0/11em}
.handy__datum{align-self:center;margin-bottom:.3em;padding:.22em .75em;border-radius:.55em;background:rgba(255,255,255,.94);font-size:.76em;font-weight:500;color:#54656F;box-shadow:0 1px .5px rgba(11,20,26,.06)}
.blase{position:relative;max-width:80%;padding:.36em .6em .4em;border-radius:.6em;font-size:1em;line-height:1.28;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.06)}
.blase--start{margin-top:.32em}
.blase--aus{align-self:flex-end;background:#D9FDD3}
.blase--ein{align-self:flex-start;background:#fff}
.blase--aus.blase--start{border-top-right-radius:0}
.blase--ein.blase--start{border-top-left-radius:0}
.blase--start::after{content:"";position:absolute;top:0;width:.55em;height:.8em;background:inherit}
.blase--aus.blase--start::after{right:-.5em;clip-path:polygon(0 0,100% 0,0 100%)}
.blase--ein.blase--start::after{left:-.5em;clip-path:polygon(0 0,100% 0,100% 100%)}
.blase__zeit{float:right;display:inline-flex;align-items:center;gap:.2em;margin:.62em -.1em -.35em .7em;font-size:.7em;line-height:1;color:#5E6E78}
.blase__zeit svg{width:1.4em;height:.86em;color:#53BDEB}
.blase--foto{width:46%;padding:.2em}
.blase--foto img{display:block;width:100%;height:auto;border-radius:.45em}
.blase--foto .blase__zeit{position:absolute;right:.8em;bottom:.65em;float:none;margin:0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.blase--foto .blase__zeit svg{color:#fff}
.handy__eingabe{display:flex;align-items:center;gap:.75em;flex-shrink:0;padding:.5em .85em .4em;border-top:1px solid rgba(0,0,0,.06);color:#007AFF}
.handy__eingabe>svg{width:1.5em;height:1.5em;flex-shrink:0}
.handy__feld{flex:1;height:2.2em;display:flex;align-items:center;justify-content:flex-end;padding:0 .5em;border-radius:999px;background:#fff;border:1px solid #DADADA}
.handy__feld svg{width:1.3em;height:1.3em}
.handy__home{display:grid;place-items:center;flex-shrink:0;height:1.9em}
.handy__home::before{content:"";width:9.4em;height:.36em;border-radius:999px;background:#111}
.handy__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:.92em;color:#111B21}
.handy__senden{display:none;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#007AFF;flex-shrink:0}
.handy__senden svg{width:1.05em;height:1.05em;fill:#fff;margin-left:.12em}
.handy__eingabe.tippt>svg:not(:first-child){display:none}
.handy__eingabe.tippt .handy__senden{display:grid}
.handy__eingabe.tippt .handy__text::after{content:"";display:inline-block;width:.09em;height:1.05em;margin-left:.05em;vertical-align:-.18em;background:#007AFF;animation:schreibmarke 1s steps(1) infinite}
.blase--aus{transform-origin:100% 100%}.blase--ein{transform-origin:0 100%}
.blase.ungelesen .blase__zeit svg{color:#8696A0}
.blase--tippt{display:flex;align-items:center;gap:.26em;padding:.72em .8em}
.blase--tippt i{width:.42em;height:.42em;border-radius:50%;background:#8696A0;animation:tippen 1.2s ease-in-out infinite}
.blase--tippt i:nth-child(2){animation-delay:.15s}.blase--tippt i:nth-child(3){animation-delay:.3s}
.js .handy.chat .handy__verlauf{justify-content:flex-start}
.js .handy.chat .blase:not(.ist-da){display:none}
.js .handy.chat .blase.ist-da{animation:blase-rein .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes blase-rein{from{opacity:0;transform:translateY(.5em) scale(.94)}to{opacity:1;transform:none}}
@keyframes tippen{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-.2em)}}
@keyframes schreibmarke{50%{opacity:0}}
.schreiben__text .lead{margin:18px 0 26px}
.zeilen{border-top:1px solid var(--linie);margin-bottom:30px}
.zeilen li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--linie)}
.zeilen__icon{width:44px;height:44px;border-radius:var(--r-14);background:#fff;display:grid;place-items:center;box-shadow:var(--schatten-1);flex-shrink:0}
.zeilen__icon svg{width:22px;height:22px;fill:none;stroke:var(--blau-tief);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zeilen b{display:block;font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.02rem;margin-bottom:2px}
.zeilen span{color:var(--text-2);font-size:.97rem}

/* Vor dem Einsatz */
.vorab{background:#fff;padding:96px 0}
.vorab__kopf{max-width:720px;margin-bottom:40px}
.vorab__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vorab__punkt{background:var(--flaeche-2);border-radius:var(--r-20);padding:28px 26px 30px}
.vorab__icon{width:52px;height:52px;border-radius:var(--r-14);background:#fff;display:grid;place-items:center;box-shadow:var(--schatten-1);color:var(--blau-tief)}
.vorab__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vorab__punkt h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--navy);margin:20px 0 8px}
.vorab__punkt p{color:var(--text-2);font-size:.98rem}

/* Ablauf */
.ablauf{position:relative;background:linear-gradient(160deg,var(--navy-950),var(--navy) 60%,#00306E);color:#fff;padding:96px 0;overflow:hidden;isolation:isolate}
.ablauf__kopf{text-align:center;margin-bottom:56px}
.schritte{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.schritte::before{content:"";position:absolute;top:38px;left:16.6%;right:16.6%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--blau-tief),var(--blau-hell),var(--welle));opacity:.55;box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.schritt{position:relative;text-align:center;padding:0 8px}
.schritt__icon{position:relative;width:84px;height:84px;margin:0 auto 22px;border-radius:50%;background:var(--navy-950);border:2px solid rgba(8,164,239,.55);display:grid;place-items:center;outline:8px solid rgba(0,22,51,.9);transition:border-color .5s ease}
.schritt__icon svg{width:34px;height:34px;fill:none;stroke:currentColor;color:var(--blau-hell);transition:color .5s ease;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.schritt.ist-aktiv .schritt__icon{border-color:var(--blau-hell)}
.schritt.ist-aktiv .schritt__icon svg{color:#fff}
.schritt h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:10px}
.schritt p{color:rgba(255,255,255,.8);max-width:32ch;margin-inline:auto}
.ablauf__aktion{text-align:center;margin-top:50px}

/* Einzugsgebiet (Karte wie Website D) */
.gebiet{background:#fff;padding:96px 0}
.gebiet__kopf{margin-bottom:8px}
.gebiet__kopf .farbe{white-space:nowrap}
.orte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;margin:28px 0 0}
.orte div{padding:14px 0;border-top:1px solid var(--linie)}
.orte dt{font-family:var(--font-display);font-weight:700;color:var(--navy);margin-bottom:2px}
.orte dd{margin:0;color:var(--text-2)}

/* Fragen */
.fragen{background:var(--flaeche-2);padding:96px 0}
.fragen__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.fragen__links{position:sticky;top:104px}
.anrufkarte{margin-top:30px;background:#fff;border-radius:var(--r-20);padding:24px;box-shadow:var(--schatten-1)}
.anrufkarte p{color:var(--text-2);margin-bottom:16px}
.akkordeon{display:grid;gap:12px}
.frage{background:#fff;border-radius:var(--r-20);box-shadow:var(--schatten-1);border:1px solid transparent;transition:border-color .2s}
.frage[open]{border-color:var(--linie)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--navy);text-wrap:balance}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--flaeche-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23002048' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.frage[open] summary::after{transform:rotate(45deg)}
.frage p{padding:0 22px 22px;color:var(--text-2);max-width:62ch}

/* Schluss */
.schluss{position:relative;padding:120px 0;color:#fff;isolation:isolate;overflow:hidden}
.schluss__bild{position:absolute;inset:0;z-index:-2}
.schluss__bild img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.schluss::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,22,51,.9) 0%,rgba(0,22,51,.62) 46%,rgba(0,22,51,.08) 78%)}
.schluss__box{max-width:540px;background:rgba(0,26,59,.9);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-26);padding:40px}
.schluss__box > p{color:rgba(255,255,255,.84);margin:16px 0 26px}
.schluss__knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* Fuß */
.fuss{background:var(--navy-950);color:rgba(255,255,255,.78);padding:64px 0 0;font-size:.95rem}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:36px;padding-bottom:40px}
.fuss__marke img{width:230px}
.fuss__titel{font-family:var(--font-display);font-weight:700;color:#fff;margin-bottom:10px;font-size:.98rem}
.fuss a{text-decoration:none}.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__recht,.fuss__kontakt{display:flex;flex-direction:column;align-items:flex-start;margin-top:-10px}
.fuss__recht a,.fuss__kontakt a{display:inline-flex;align-items:center;min-height:44px}
.fuss__unten{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;padding-bottom:26px;font-size:.84rem;color:rgba(255,255,255,.6)}

/* Rechtsseiten und 404 */
.kopf--fest{background:var(--navy-950);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.recht{max-width:760px;margin-inline:auto;padding:136px var(--rand) 88px}
.recht h1{font-family:var(--font-display);font-weight:800;font-size:min(clamp(1.9rem,1.3rem + 2vw,2.6rem),calc((100vw - 2 * var(--rand)) / 12.4));line-height:1.12;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px}
.recht__stand{color:var(--text-2);font-size:.92rem;margin-bottom:36px}
.recht h2{font-family:var(--font-display);font-weight:700;font-size:1.32rem;line-height:1.3;color:var(--navy);margin:40px 0 12px;text-wrap:balance}
.recht h3{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.35;color:var(--navy);margin:26px 0 8px}
.recht p,.recht address,.recht ul{margin:0 0 12px;max-width:72ch}
.recht address{font-style:normal}
.recht ul{padding-left:1.2em;list-style:disc}
.recht li{margin-bottom:6px}
.recht a{color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.fehler{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px var(--rand) 80px;background:linear-gradient(160deg,var(--navy-950),var(--navy) 60%,#00306E);color:#fff}
.fehler__code{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,3rem + 6vw,7rem);line-height:1;color:var(--blau-hell);margin-bottom:12px}
.fehler h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);line-height:1.15;margin-bottom:14px}
.fehler p{color:rgba(255,255,255,.84);max-width:46ch;margin:0 auto 28px}
.fehler__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.fuss--klein .fuss__unten{border-top:0}

/* Schnellkontakt */
.schwebe{position:fixed;right:24px;top:50%;z-index:940;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(calc(-50% + 12px));pointer-events:none;transition:opacity .25s,transform .25s}
.schwebe.ist-da{opacity:1;transform:translateY(-50%)}
.schwebe.ist-da a{pointer-events:auto}
.schwebe a{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,22,51,.06);transition:transform .18s}
.schwebe a:hover{transform:scale(1.06)}
.schwebe svg{width:26px;height:26px}
.schwebe__tel{background:var(--blau-tief);color:#fff}
.schwebe__wa{background:var(--wa);color:var(--wa-text)}

/* Einblenden */
.js .zeige{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .zeige.ist-da{opacity:1;transform:none}
.js .held .zeige{transition-duration:.7s}
.js .held .zeige:nth-child(2){transition-delay:.08s}.js .held .zeige:nth-child(3){transition-delay:.16s}.js .held .zeige:nth-child(4){transition-delay:.24s}.js .held .zeige:nth-child(5){transition-delay:.32s}
.js .schritte .zeige:nth-child(2),.js .vorab__liste .zeige:nth-child(2){transition-delay:.1s}
.js .schritte .zeige:nth-child(3),.js .vorab__liste .zeige:nth-child(3){transition-delay:.2s}


/* Einzugsgebiet: Lead, Karte über die volle Inhaltsbreite, darunter alle Orte als Text */
.gebiet{--text-3:var(--text-2)}
.gebiet__lead{max-width:780px;margin:18px 0 36px}
.gebiet__karte{margin-bottom:8px}
/* Karte Einsatzgebiet (Entwurf A „Präzise Karte“, gezeichnet von assets/js/karte.js). Längen in px sind im SVG
   Nutzereinheiten, --px ist ein Bildschirmpixel. Ohne JS bleibt die Karte weg, der Text daneben trägt allein. */
.gebiet__karte{min-width:0}
html:not(.js) .gebiet__karte{display:none}
figure.karte{position:relative;margin:0;border-radius:var(--r-26);overflow:hidden;background:var(--k-panel);border:1px solid var(--k-rand);
  --k-e:cubic-bezier(.25,1,.3,1);--k-feder:cubic-bezier(.34,1.45,.5,1);
  --k-panel:#FFFFFF;--k-rand:var(--linie);--k-text:#0B1B33;--k-text-2:#4A5B72;--k-halo:#FFFFFF;--k-punkt:#002048;--k-punkt-ring:#FFFFFF;--k-of:#0083E4;--k-of-ring:#FFFFFF;--k-fluss:#9CCDF3;--k-fluss-main:#6DB6EE;--k-fluss-name:#3E8FD0;--k-strasse:#E3E8EF;--k-gebiet:#0083E4;--k-gebiet-rand:rgba(0,131,228,.42)}
.karte__svg{display:block;width:100%;height:auto;overflow:hidden;--px:1px}
.karte-quelle{margin-top:10px;font-size:11.5px;line-height:1.4;color:var(--text-3);text-wrap:balance}
.karte-quelle a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.k-name,.k-zusatz,.k-fluss-name{font-kerning:normal}
.k-name{font-family:var(--font-display);font-weight:600;fill:var(--k-text)}
.k-name--of{font-weight:700}
.k-zusatz{font-family:var(--font-body);font-weight:500;fill:var(--k-text-2)}
.k-halo .k-name,.k-halo .k-zusatz{paint-order:stroke;stroke:var(--k-halo);stroke-width:calc(var(--px) * 3.6);stroke-linejoin:round}
.k-mess{visibility:hidden}
.k-punkt{fill:var(--k-punkt);stroke:var(--k-punkt-ring);stroke-width:calc(var(--px) * 1.6)}
.k-of__kern{fill:var(--k-of);stroke:var(--k-of-ring);stroke-width:calc(var(--px) * 2.4)}
.k-of__puls{fill:var(--k-of);opacity:0;transform-box:fill-box;transform-origin:center}
.k-fluss{fill:none;stroke:var(--k-fluss);stroke-width:calc(var(--px) * 1.7);stroke-linecap:round;stroke-linejoin:round}
.k-fluss--main{stroke:var(--k-fluss-main);stroke-width:calc(var(--px) * 3.6)}
.k-fluss-name{font-family:var(--font-body);font-weight:600;fill:var(--k-fluss-name);letter-spacing:.32em}
.k-strasse{fill:none;stroke:var(--k-strasse);stroke-width:calc(var(--px) * 2.2);stroke-linecap:round;stroke-linejoin:round}
.k-gebiet-rand{fill:none;stroke:var(--k-gebiet-rand);stroke-width:calc(var(--px) * 1.3);stroke-dasharray:calc(var(--px) * 5) calc(var(--px) * 4)}
.k-gebiet-stop{stop-color:var(--k-gebiet)}
.k-massstab line{stroke:var(--k-text-2);stroke-width:calc(var(--px) * 1.3)}
.k-massstab text{font-family:var(--font-body);font-weight:500;fill:var(--k-text-2)}
/* Aufbau beim Hinscrollen: Straßen, Fläche, Flüsse, Orte nach Entfernung; Offenbach pulsiert, solange die Karte zu sehen ist */
figure.karte .an-fade{opacity:0;transition:opacity .9s var(--k-e) var(--d,0s)}
figure.karte .an-zieh{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur,1.6s) cubic-bezier(.45,0,.2,1) var(--d,0s)}
figure.karte .an-pop{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--k-e) var(--d,0s),transform .6s var(--k-feder) var(--d,0s)}
figure.karte .an-label{opacity:0;transform:translateY(calc(var(--px) * 5));transition:opacity .5s var(--k-e) var(--d,0s),transform .7s var(--k-e) var(--d,0s)}
figure.karte .an-auf{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform 1.5s cubic-bezier(.3,.8,.25,1) var(--d,0s)}
figure.karte.ist-da .an-fade,figure.karte.ist-da .an-pop,figure.karte.ist-da .an-label{opacity:1;transform:none}
figure.karte.ist-da .an-zieh{stroke-dashoffset:0}
figure.karte.ist-da .an-auf{transform:scale(1)}
@keyframes k-puls{0%{transform:scale(1);opacity:.42}100%{transform:scale(4.2);opacity:0}}
figure.karte.ist-da .k-of__puls{animation:k-puls 2.8s cubic-bezier(.2,.6,.3,1) var(--d,1s) infinite}
figure.karte.ist-da .k-of__puls--2{animation-delay:calc(var(--d,1s) + 1.4s)}
figure.karte.ruht *{animation-play-state:paused!important}
figure.karte .k-punkt--still{fill:var(--k-text-2)}

/* Breakpoints, nur max-width, absteigend */
@media (max-width:1399px){
  .schwebe{display:none}
}
@media (max-width:1260px){
  .kopf__notdienst{display:none}
  .kopf--fest .kopf__tel{margin-left:auto}
}
@media (max-width:1080px){
  .kopf__nav{display:none}
  .kopf__notdienst{display:inline-flex;margin-left:auto}
  .leiste{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .vorab__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kopf__notdienst + .kopf__tel{margin-left:0}
  li.karte{flex-basis:calc((100% - 20px) / 2.2)}
  .fuss__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .kopf__innen{height:60px;gap:12px}
  .kopf__logo img{height:38px}
  .kopf__tel{display:none}
  .kopf__notdienst{font-size:.8rem;padding:6px 10px}
  .kopf__tel-rund{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-10);background:rgba(255,255,255,.1);color:var(--blau-hell)}
  .kopf__tel-rund svg{width:22px;height:22px}
  .kopf__wa-rund{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-10);background:rgba(255,255,255,.1);color:var(--wa)}
  .kopf__wa-rund svg{width:22px;height:22px}
  .held{padding:84px 0 56px}
  .held__innen{grid-template-columns:minmax(0,1fr);gap:10px}
  .held__text{max-width:none}
  .held__bild{margin:0 calc(-1 * var(--rand));justify-self:center;width:min(100% + 2 * var(--rand),520px)}
  .held__bild img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 82%,transparent 100%)}
  .held__bild figcaption{right:var(--rand);bottom:10%}
  .leistungen{margin-top:-96px;padding-bottom:64px}
  .schreiben__raster{grid-template-columns:minmax(0,1fr);gap:48px}
  .schreiben__text{order:-1}
  .fragen__raster{grid-template-columns:minmax(0,1fr);gap:32px}
  .fragen__links{position:static}
  .orte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body{font-size:16px}
  .held__titel{font-size:min(calc((100vw - 2 * var(--rand)) / 10.6),2.9rem)}
  .held__titel .zeile{white-space:nowrap}
  .held{padding-top:76px}
  .held__titel{margin-bottom:16px}
  .held__lead{font-size:1.04rem;margin-bottom:18px}
  .haken{gap:9px;margin-bottom:22px}
  .haken li{font-size:.98rem}
  .held__aktion{gap:14px}
  .held__aktion .knopf--gross{min-height:54px}
  .held__bild{margin-inline:calc(12px - var(--rand));width:auto}
  .held__aktion,.held__aktion .knopf{width:100%}
  .knopf--gross{font-size:1rem;padding:14px 16px}
  .tafel{padding:22px 0 24px;border-radius:var(--r-20)}
  .leiste{margin:0 20px 24px;padding-bottom:22px;gap:16px 14px}
  .leiste li{padding-left:10px}
  .leiste b{font-size:.98rem}
  .leiste span{font-size:.86rem}
  .vorab__liste{grid-template-columns:minmax(0,1fr);gap:16px}
  .vorab__punkt{padding:24px 20px 26px}
  .notdienst{font-size:.9rem;margin-bottom:16px}
  .recht{padding-top:100px}
  .tafel__kopf{flex-direction:column;align-items:flex-start;padding:0 20px 22px;gap:18px}
  .spur{gap:14px;padding:4px 20px 8px;scroll-padding-inline:20px}
  li.karte{flex-basis:84%}
  .schreiben,.vorab,.gebiet,.ablauf,.fragen{padding:72px 0}
  .handy__geraet{width:300px}
  .zaehler--mobil{display:block;text-align:right;margin-bottom:12px}
  .tafel__kopf .zaehler{min-width:0;text-align:left}
  .rund--seite{width:44px;height:44px}
  .rund--links{left:4px}.rund--rechts{right:4px}
  .ablauf__kopf{margin-bottom:40px}
  .schritte{grid-template-columns:minmax(0,1fr);gap:34px}
  .schritte::before{top:40px;bottom:40px;left:41px;right:auto;width:6px;height:auto;background:linear-gradient(180deg,var(--blau-tief),var(--blau-hell),var(--welle))}
  .schritt{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:18px;text-align:left;padding:0}
  .schritt__icon{grid-row:span 2;margin:0}
  .schritt h3{align-self:end;margin-bottom:4px}
  .schritt p{margin:0}
  .ablauf__aktion .knopf{width:100%}
  .schluss{padding:300px 0 32px}
  .schluss::before{background:linear-gradient(180deg,rgba(0,22,51,.05) 0%,rgba(0,22,51,.5) 34%,rgba(0,22,51,.92) 62%)}
  .schluss__bild img{object-position:72% 30%;height:56%}
  .schluss__bild{background:var(--navy-950)}
  .schluss__box{padding:26px 18px;background:rgba(0,26,59,.9)}
  .schluss__knoepfe .knopf,.anrufkarte .knopf{font-size:.95rem;padding:12px 14px;gap:8px}
  .schluss__knoepfe .knopf{width:100%}
  .fuss__raster{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:600px){
  .orte{grid-template-columns:minmax(0,1fr)}
  figure.karte{margin-inline:calc(var(--rand) * -1);border-radius:0;border-inline:0}
}
/* Notdienst-Badge im Held: auf schmalen Handys einzeilig halten, unter 375 px sauber zweizeilig ohne hängenden Trennstrich */
@media (max-width:480px){
  .notdienst{font-size:.82rem;gap:6px 8px;padding:8px 12px 8px 11px}
  .notdienst b{font-size:.92rem}
  .notdienst__zusatz{padding-left:8px}
}
@media (max-width:420px){
  .kopf__notdienst{display:none}
  .kopf__wa-rund{margin-left:auto}
}
@media (max-width:400px){
  #gebiet-titel{font-size:min(calc(1.1rem + 2.4vw),calc((100vw - 2 * var(--rand)) / 12.6))}
  #vorab-titel{font-size:min(calc(1.1rem + 2.4vw),calc((100vw - 2 * var(--rand)) / 13.4))}
}
@media (max-width:374px){
  .notdienst{border-radius:16px}
  .notdienst__zusatz{flex-basis:100%;border-left:0;padding-left:18px}
}
/* Ruhiger Status-Punkt (28.10.: Notdienst weniger dominant, Kundenwunsch 25.10.) */
.puls--ruhig{background:var(--blau-hell);box-shadow:0 0 0 4px rgba(8,164,239,.22)}

/* Blick ins Rohr · Vorher-Nachher-Wischer (28.10.) */
.rohrblick{background:radial-gradient(60% 80% at 72% 50%,#0B2645 0%,#061B33 55%,#04152A 100%);color:#fff;padding:clamp(80px,9vw,128px) 0;overflow:hidden}
.rohrblick__raster{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,72px);align-items:center}
.rohrblick__lead{font-size:1.08rem;color:rgba(255,255,255,.82);max-width:42ch;margin:18px 0 28px}
.wischer{--pos:50%;position:relative;margin:0;border-radius:var(--r-26);overflow:hidden;aspect-ratio:1600/893;background:#061B33;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wischer__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wischer__vor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wischer__griff{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:rgba(255,255,255,.9);pointer-events:none}
.wischer__griff svg{position:absolute;top:50%;left:50%;width:52px;height:52px;padding:13px;margin:-26px 0 0 -26px;border-radius:50%;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 8px 24px rgba(0,10,25,.35);transition:transform .24s cubic-bezier(.4,0,.6,1)}
.wischer:hover .wischer__griff svg,.wischer.ist-aktiv .wischer__griff svg{transform:scale(1.08)}
.wischer__marke{position:absolute;top:16px;padding:6px 12px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:700;font-size:.8rem;color:#fff;background:rgba(0,22,51,.55);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.wischer__marke--vor{left:16px}.wischer__marke--nach{right:16px}
.wischer__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.wischer:has(.wischer__regler:focus-visible){outline:3px solid var(--blau-hell);outline-offset:4px}
.wischer__hinweis{margin-top:12px;font-size:.84rem;color:rgba(255,255,255,.72)}

/* Leistungen am PC als Raster 3 × 2 (Chef-Abnahme C-01) */
@media (min-width:1180px){
  .spur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding:4px 40px 10px}
  li.karte{flex:none}
  .rund--seite,.tafel__kopf .zaehler,.zaehler--mobil{display:none}
}
@media (max-width:900px){
  .rohrblick__raster{grid-template-columns:minmax(0,1fr)}
  .rohrblick__text{order:0}
}
@media (max-width:700px){
  .rohrblick{padding:72px 0}
  .wischer{margin-inline:calc(var(--rand) * -1 + 4px);border-radius:var(--r-20)}
  .wischer__marke{top:10px;font-size:.74rem;padding:5px 10px}
  .wischer__marke--vor{left:10px}.wischer__marke--nach{right:10px}
  .wischer__griff svg{width:46px;height:46px;margin:-23px 0 0 -23px;padding:11px}
  .wischer__hinweis{font-size:.8rem}
  .rohrblick__text .knopf{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .zeige{opacity:1!important;transform:none!important}
  figure.karte *{transition:none!important;animation:none!important}
  figure.karte .an-fade,figure.karte .an-pop,figure.karte .an-label{opacity:1;transform:none}
  figure.karte .an-zieh{stroke-dashoffset:0}
  figure.karte .an-auf{transform:none}
}