/* Gemminger Kanalservice – Entwurf Keko IT-Dienstleistungen */


/* Überschriften, Menü, Knöpfe: Outfit (geometrisch, nach Beispiel des Nutzers), selbst gehostet, variable Schrift */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/outfit-latin.woff2) format("woff2")}
/* Beschreibungen/Fließtext: Lato 300 (Wunsch des Nutzers), fett 700 für Hervorhebungen */
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/lato-300.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/lato-700.woff2) format("woff2")}


:root{
  --ink:#1c2530;
  --muted:#58626d;
  --blue:#061d3a;
  --blue-dark:#030f20;
  --blue-soft:#eef3fa;
  --paper:#f4f2ed;
  --line:#dedad1;
  --signal:#d9480f;
  --signal-dark:#b93c0b;
  --kopf:88px;
  --wisch:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Lato",system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.65;color:var(--ink);background:#fff}
b,strong{font-weight:700}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3,.menu-seiten a,.anruf-nr,.big-phone,.score b,.steps li::before,.menu-leistungen b,.hauptnav a,.faq summary,.cdata span,.foot h3,.vorteile li,.towns a{font-family:"Outfit",system-ui,sans-serif}
h1,h2,h3{line-height:1.15;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
h3{font-size:1.15rem;font-weight:700;margin-bottom:6px}
p+p{margin-top:12px}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
/* Auf großen Bildschirmen breiter, damit Texte in die Länge laufen statt schmal untereinander (Wunsch des Nutzers) */
:root{--breite:1160px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Startbereich wie bei Agentur-Seiten: Überschrift mit Ort, vier Punkte mit Haken, Knopf zu den Leistungen */
.hero-zeichnung .hero-text{max-width:620px}
.hero-zeichnung h1{max-width:none;font-weight:700;margin-bottom:24px}
.hero-punkte{list-style:none;display:grid;gap:12px;margin:0 0 32px}
.hero-punkte li{display:flex;align-items:center;gap:14px;font-size:1.18rem;font-weight:600;line-height:1.35;color:var(--ink)}
.hero-punkte svg{flex:0 0 26px;width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-punkte svg path{stroke-width:2.6}
.hero-zeichnung .hero-aktion .btn-call{min-width:260px}
@media (max-width:680px){.hero-punkte li{font-size:1.05rem}.hero-zeichnung .hero-aktion .btn-call{width:100%}}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* Knöpfe – ohne Symbole */
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 1rem/1.2 "Outfit",sans-serif;text-decoration:none;padding:16px 26px;border-radius:3px;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.btn-call{background:var(--blue);color:#fff}
.btn-call:hover{background:var(--blue-dark)}

/* Anruf-Block statt Knöpfen: Nummer groß zum Antippen, WhatsApp als Text-Link darunter */
.anruf{display:grid;justify-items:start;gap:14px}
.anruf-nr{display:grid;gap:4px;text-decoration:none;color:var(--blue);font-size:clamp(2.1rem,4.2vw,2.9rem);font-weight:800;letter-spacing:-.025em;line-height:1;padding-bottom:6px;background:linear-gradient(var(--blue),var(--blue)) left bottom/0 3px no-repeat;transition:background-size .35s var(--wisch),color .2s}
.anruf-nr small{font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--muted)}
.anruf-nr:hover{background-size:100% 3px;color:var(--blue-dark)}
.anruf-wa{color:var(--ink);font-weight:600;text-underline-offset:4px;text-decoration-color:#b9c2cc}
.anruf-wa:hover{color:var(--blue);text-decoration-color:currentColor}
.text-links{display:flex;flex-wrap:wrap;gap:10px 28px}
.text-links a{color:#fff;font-weight:600;text-underline-offset:4px}
.btn-line{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-line:hover{background:var(--ink);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Kopf: Logo links, rechts Notdienst-Nummer und Menü-Knopf. Bleibt beim Scrollen oben. */
.top{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 10px 24px -20px rgba(16,40,80,0);transition:box-shadow .3s}
/* Schatten unter dem Kopf erst, wenn man nach unten gescrollt hat (Wunsch: oben keine Linie) */
.top.gescrollt{box-shadow:0 10px 24px -20px rgba(16,40,80,.35)}
.top .wrap{display:flex;align-items:center;gap:28px;height:88px}
.logo{margin-right:auto}
.logo img{height:52px;width:auto}
.top-slogan{margin-right:auto;max-width:380px;text-align:center;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--muted)}
@media (max-width:1180px){.top-slogan{display:none}}
/* Telefon im Kopf nur als Symbol (Nummer steht im Startbereich und im Kontakt) */
.top-phone{display:grid;place-items:center;width:48px;height:48px;border-radius:3px;background:var(--blue-soft);color:var(--blue);transition:background-color .2s,color .2s}
.top-phone:hover{background:var(--blue);color:#fff}
.top-phone svg{width:22px;height:22px;fill:currentColor}
/* WhatsApp-Symbol (Wunsch des Kunden): in WhatsApp-Grün, damit man es sofort erkennt */
/* Symbole ohne Rahmen und ohne Fläche, beide in Blau (Wunsch: schlicht und seriös) */
.top-phone{width:40px;background:none}
.top-phone:hover{background:none;color:var(--blue-dark);opacity:.75}
.top-wa{margin-right:-16px}
.top-wa svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top-wa .wa-hoerer{fill:currentColor;stroke-width:1}
/* Menü-Knopf nur als drei blaue Striche, ohne Kasten (Wunsch: schlicht); das Wort „Menü“ bleibt für Screenreader */
.menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:48px;padding:0;background:none;border:0;color:var(--blue);cursor:pointer;transition:color .2s}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--blue-dark)}
.menu-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;overflow:visible}
.menu-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-btn path{transition:transform .3s ease,opacity .2s;transform-origin:12px 12px}
.menu-btn[aria-expanded="true"] .m1{transform:rotate(45deg) translateY(5px)}
.menu-btn[aria-expanded="true"] .m2{opacity:0}
.menu-btn[aria-expanded="true"] .m3{transform:rotate(-45deg) translateY(-5px)}

/* Menü über die ganze Seite in Blau: erst wischt ein helleres Blau von oben herunter, direkt dahinter die dunkelblaue Menüfläche.
   Links die Seiten groß, darunter der Notdienst. Rechts die Leistungen als Felder mit eigener kleiner Zeichnung. */
.menu{position:relative;z-index:55}
.menu::before{content:"";position:fixed;inset:var(--kopf) 0 0;background:#5b8fd4;pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--wisch) .12s}
.menu.offen::before{clip-path:inset(0);transition-delay:0s}
.menu-flaeche{position:fixed;top:var(--kopf);left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;color:#fff;background:linear-gradient(140deg,#1d5099 0%,#163f7c 55%,#0f2f60 100%);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--wisch),visibility 0s linear .5s}
.menu.offen .menu-flaeche{clip-path:inset(0);visibility:visible;transition:clip-path .5s var(--wisch) .1s,visibility 0s}
.menu-flaeche.wird-gewischt{transition:none}
html.menue-offen{overflow:hidden}
html.menue-offen .callbar{display:none}
.menu-innen{min-height:100%;max-width:1200px;margin:0 auto;padding:56px 24px 48px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:44px 80px;align-content:center}
.menu ul{list-style:none}
.menu a{text-decoration:none;color:#fff}
.menu-seiten a{display:inline-block;padding:5px 0;font-family:"Outfit",sans-serif;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.025em;line-height:1.12;background:linear-gradient(#9cc3f0,#9cc3f0) left bottom/0 3px no-repeat;transition:background-size .35s var(--wisch),color .2s}
.menu-seiten a:hover,.menu-seiten a[aria-current]{background-size:100% 3px;color:#cfe2f8}
.menu-notdienst{margin-top:36px;color:#b9cfe9;font-size:.95rem}
.menu-notdienst a{display:block;margin-top:2px;font-family:"Outfit",sans-serif;font-weight:800;font-size:1.9rem;letter-spacing:-.01em}
.menu-titel{margin-bottom:14px;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#9cc3f0}
.menu-leistungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.menu-leistungen a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;height:100%;padding:18px 20px;border-radius:8px;background:rgba(255,255,255,.07);transition:background-color .2s}
.menu-leistungen a:hover,.menu-leistungen a[aria-current]{background:rgba(255,255,255,.16)}
.ml-bild{display:block;height:76px}
.ml-bild svg{width:100%;height:100%}
.ml-text{min-width:0;max-width:100%}
.ml-text b{display:block;font-family:"Outfit",sans-serif;font-size:1.08rem;font-weight:700;line-height:1.25;hyphens:manual;overflow-wrap:anywhere}
.ml-text small{display:block;margin-top:2px;font-size:.88rem;line-height:1.35;color:#b9cfe9;hyphens:manual;overflow-wrap:anywhere}
/* Zeichnungen im Menü hell, damit sie auf Blau gut aussehen */
.menu .zeichnung{--d-l:#dce8f7;--d-f:rgba(255,255,255,.14);--d-t:#8dbbe9;--d-p:rgba(255,255,255,.08);--d-wz:#e3c3a0}
.menu .zeichnung .w{fill:rgba(255,255,255,.2)}
.menu .zeichnung .h{stroke:rgba(6,29,58,.9)}
.menu .zeichnung .tx{fill:#dce8f7}
/* Einträge gleiten beim Öffnen nacheinander von unten herein */
.menu.offen li,.menu.offen .menu-notdienst,.menu.offen .menu-titel{animation:menu-rein .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .05s)}
.menu.offen .menu-notdienst{--i:7}
@keyframes menu-rein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .menu::before,.menu-flaeche,.menu.offen .menu-flaeche,.menu-seiten a,.menu-btn path{transition:none}
  .menu.offen li,.menu.offen .menu-notdienst,.menu.offen .menu-titel{animation:none}
}
/* Bereiche */
.sec{padding:84px 0}
/* Weiche Übergänge zwischen den Abschnitten: Die Farben laufen über eine lange Strecke sanft an und wieder aus
   (S-Kurve mit vielen Zwischenstufen statt gerader Verlauf), so entsteht an keiner Stelle eine sichtbare Kante. */
:root{--blende:min(300px,45%);--kante:280px}
.sec.paper{background:linear-gradient(180deg,rgba(244,242,237,0) calc(var(--blende) * 0),rgba(244,242,237,0.0001) calc(var(--blende) * 0.0208),rgba(244,242,237,0.0007) calc(var(--blende) * 0.0417),rgba(244,242,237,0.0022) calc(var(--blende) * 0.0625),rgba(244,242,237,0.0051) calc(var(--blende) * 0.0833),rgba(244,242,237,0.0096) calc(var(--blende) * 0.1042),rgba(244,242,237,0.0161) calc(var(--blende) * 0.125),rgba(244,242,237,0.0246) calc(var(--blende) * 0.1458),rgba(244,242,237,0.0355) calc(var(--blende) * 0.1667),rgba(244,242,237,0.0488) calc(var(--blende) * 0.1875),rgba(244,242,237,0.0645) calc(var(--blende) * 0.2083),rgba(244,242,237,0.0828) calc(var(--blende) * 0.2292),rgba(244,242,237,0.1035) calc(var(--blende) * 0.25),rgba(244,242,237,0.1267) calc(var(--blende) * 0.2708),rgba(244,242,237,0.1522) calc(var(--blende) * 0.2917),rgba(244,242,237,0.18) calc(var(--blende) * 0.3125),rgba(244,242,237,0.2099) calc(var(--blende) * 0.3333),rgba(244,242,237,0.2417) calc(var(--blende) * 0.3542),rgba(244,242,237,0.2752) calc(var(--blende) * 0.375),rgba(244,242,237,0.3103) calc(var(--blende) * 0.3958),rgba(244,242,237,0.3466) calc(var(--blende) * 0.4167),rgba(244,242,237,0.384) calc(var(--blende) * 0.4375),rgba(244,242,237,0.4222) calc(var(--blende) * 0.4583),rgba(244,242,237,0.461) calc(var(--blende) * 0.4792),rgba(244,242,237,0.5) calc(var(--blende) * 0.5),rgba(244,242,237,0.539) calc(var(--blende) * 0.5208),rgba(244,242,237,0.5778) calc(var(--blende) * 0.5417),rgba(244,242,237,0.616) calc(var(--blende) * 0.5625),rgba(244,242,237,0.6534) calc(var(--blende) * 0.5833),rgba(244,242,237,0.6897) calc(var(--blende) * 0.6042),rgba(244,242,237,0.7248) calc(var(--blende) * 0.625),rgba(244,242,237,0.7583) calc(var(--blende) * 0.6458),rgba(244,242,237,0.7901) calc(var(--blende) * 0.6667),rgba(244,242,237,0.82) calc(var(--blende) * 0.6875),rgba(244,242,237,0.8478) calc(var(--blende) * 0.7083),rgba(244,242,237,0.8733) calc(var(--blende) * 0.7292),rgba(244,242,237,0.8965) calc(var(--blende) * 0.75),rgba(244,242,237,0.9172) calc(var(--blende) * 0.7708),rgba(244,242,237,0.9355) calc(var(--blende) * 0.7917),rgba(244,242,237,0.9512) calc(var(--blende) * 0.8125),rgba(244,242,237,0.9645) calc(var(--blende) * 0.8333),rgba(244,242,237,0.9754) calc(var(--blende) * 0.8542),rgba(244,242,237,0.9839) calc(var(--blende) * 0.875),rgba(244,242,237,0.9904) calc(var(--blende) * 0.8958),rgba(244,242,237,0.9949) calc(var(--blende) * 0.9167),rgba(244,242,237,0.9978) calc(var(--blende) * 0.9375),rgba(244,242,237,0.9993) calc(var(--blende) * 0.9583),rgba(244,242,237,0.9999) calc(var(--blende) * 0.9792),rgba(244,242,237,1) calc(var(--blende) * 1),rgba(244,242,237,1) calc(100% - var(--blende) * 1),rgba(244,242,237,0.9999) calc(100% - var(--blende) * 0.9792),rgba(244,242,237,0.9993) calc(100% - var(--blende) * 0.9583),rgba(244,242,237,0.9978) calc(100% - var(--blende) * 0.9375),rgba(244,242,237,0.9949) calc(100% - var(--blende) * 0.9167),rgba(244,242,237,0.9904) calc(100% - var(--blende) * 0.8958),rgba(244,242,237,0.9839) calc(100% - var(--blende) * 0.875),rgba(244,242,237,0.9754) calc(100% - var(--blende) * 0.8542),rgba(244,242,237,0.9645) calc(100% - var(--blende) * 0.8333),rgba(244,242,237,0.9512) calc(100% - var(--blende) * 0.8125),rgba(244,242,237,0.9355) calc(100% - var(--blende) * 0.7917),rgba(244,242,237,0.9172) calc(100% - var(--blende) * 0.7708),rgba(244,242,237,0.8965) calc(100% - var(--blende) * 0.75),rgba(244,242,237,0.8733) calc(100% - var(--blende) * 0.7292),rgba(244,242,237,0.8478) calc(100% - var(--blende) * 0.7083),rgba(244,242,237,0.82) calc(100% - var(--blende) * 0.6875),rgba(244,242,237,0.7901) calc(100% - var(--blende) * 0.6667),rgba(244,242,237,0.7583) calc(100% - var(--blende) * 0.6458),rgba(244,242,237,0.7248) calc(100% - var(--blende) * 0.625),rgba(244,242,237,0.6897) calc(100% - var(--blende) * 0.6042),rgba(244,242,237,0.6534) calc(100% - var(--blende) * 0.5833),rgba(244,242,237,0.616) calc(100% - var(--blende) * 0.5625),rgba(244,242,237,0.5778) calc(100% - var(--blende) * 0.5417),rgba(244,242,237,0.539) calc(100% - var(--blende) * 0.5208),rgba(244,242,237,0.5) calc(100% - var(--blende) * 0.5),rgba(244,242,237,0.461) calc(100% - var(--blende) * 0.4792),rgba(244,242,237,0.4222) calc(100% - var(--blende) * 0.4583),rgba(244,242,237,0.384) calc(100% - var(--blende) * 0.4375),rgba(244,242,237,0.3466) calc(100% - var(--blende) * 0.4167),rgba(244,242,237,0.3103) calc(100% - var(--blende) * 0.3958),rgba(244,242,237,0.2752) calc(100% - var(--blende) * 0.375),rgba(244,242,237,0.2417) calc(100% - var(--blende) * 0.3542),rgba(244,242,237,0.2099) calc(100% - var(--blende) * 0.3333),rgba(244,242,237,0.18) calc(100% - var(--blende) * 0.3125),rgba(244,242,237,0.1522) calc(100% - var(--blende) * 0.2917),rgba(244,242,237,0.1267) calc(100% - var(--blende) * 0.2708),rgba(244,242,237,0.1035) calc(100% - var(--blende) * 0.25),rgba(244,242,237,0.0828) calc(100% - var(--blende) * 0.2292),rgba(244,242,237,0.0645) calc(100% - var(--blende) * 0.2083),rgba(244,242,237,0.0488) calc(100% - var(--blende) * 0.1875),rgba(244,242,237,0.0355) calc(100% - var(--blende) * 0.1667),rgba(244,242,237,0.0246) calc(100% - var(--blende) * 0.1458),rgba(244,242,237,0.0161) calc(100% - var(--blende) * 0.125),rgba(244,242,237,0.0096) calc(100% - var(--blende) * 0.1042),rgba(244,242,237,0.0051) calc(100% - var(--blende) * 0.0833),rgba(244,242,237,0.0022) calc(100% - var(--blende) * 0.0625),rgba(244,242,237,0.0007) calc(100% - var(--blende) * 0.0417),rgba(244,242,237,0.0001) calc(100% - var(--blende) * 0.0208),rgba(244,242,237,0) calc(100% - var(--blende) * 0))}
.preisband,.contact{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) calc(var(--kante) * 0),rgba(0,0,0,0.0001) calc(var(--kante) * 0.0208),rgba(0,0,0,0.0007) calc(var(--kante) * 0.0417),rgba(0,0,0,0.0022) calc(var(--kante) * 0.0625),rgba(0,0,0,0.0051) calc(var(--kante) * 0.0833),rgba(0,0,0,0.0096) calc(var(--kante) * 0.1042),rgba(0,0,0,0.0161) calc(var(--kante) * 0.125),rgba(0,0,0,0.0246) calc(var(--kante) * 0.1458),rgba(0,0,0,0.0355) calc(var(--kante) * 0.1667),rgba(0,0,0,0.0488) calc(var(--kante) * 0.1875),rgba(0,0,0,0.0645) calc(var(--kante) * 0.2083),rgba(0,0,0,0.0828) calc(var(--kante) * 0.2292),rgba(0,0,0,0.1035) calc(var(--kante) * 0.25),rgba(0,0,0,0.1267) calc(var(--kante) * 0.2708),rgba(0,0,0,0.1522) calc(var(--kante) * 0.2917),rgba(0,0,0,0.18) calc(var(--kante) * 0.3125),rgba(0,0,0,0.2099) calc(var(--kante) * 0.3333),rgba(0,0,0,0.2417) calc(var(--kante) * 0.3542),rgba(0,0,0,0.2752) calc(var(--kante) * 0.375),rgba(0,0,0,0.3103) calc(var(--kante) * 0.3958),rgba(0,0,0,0.3466) calc(var(--kante) * 0.4167),rgba(0,0,0,0.384) calc(var(--kante) * 0.4375),rgba(0,0,0,0.4222) calc(var(--kante) * 0.4583),rgba(0,0,0,0.461) calc(var(--kante) * 0.4792),rgba(0,0,0,0.5) calc(var(--kante) * 0.5),rgba(0,0,0,0.539) calc(var(--kante) * 0.5208),rgba(0,0,0,0.5778) calc(var(--kante) * 0.5417),rgba(0,0,0,0.616) calc(var(--kante) * 0.5625),rgba(0,0,0,0.6534) calc(var(--kante) * 0.5833),rgba(0,0,0,0.6897) calc(var(--kante) * 0.6042),rgba(0,0,0,0.7248) calc(var(--kante) * 0.625),rgba(0,0,0,0.7583) calc(var(--kante) * 0.6458),rgba(0,0,0,0.7901) calc(var(--kante) * 0.6667),rgba(0,0,0,0.82) calc(var(--kante) * 0.6875),rgba(0,0,0,0.8478) calc(var(--kante) * 0.7083),rgba(0,0,0,0.8733) calc(var(--kante) * 0.7292),rgba(0,0,0,0.8965) calc(var(--kante) * 0.75),rgba(0,0,0,0.9172) calc(var(--kante) * 0.7708),rgba(0,0,0,0.9355) calc(var(--kante) * 0.7917),rgba(0,0,0,0.9512) calc(var(--kante) * 0.8125),rgba(0,0,0,0.9645) calc(var(--kante) * 0.8333),rgba(0,0,0,0.9754) calc(var(--kante) * 0.8542),rgba(0,0,0,0.9839) calc(var(--kante) * 0.875),rgba(0,0,0,0.9904) calc(var(--kante) * 0.8958),rgba(0,0,0,0.9949) calc(var(--kante) * 0.9167),rgba(0,0,0,0.9978) calc(var(--kante) * 0.9375),rgba(0,0,0,0.9993) calc(var(--kante) * 0.9583),rgba(0,0,0,0.9999) calc(var(--kante) * 0.9792),rgba(0,0,0,1) calc(var(--kante) * 1),rgba(0,0,0,1) calc(100% - var(--kante) * 1),rgba(0,0,0,0.9999) calc(100% - var(--kante) * 0.9792),rgba(0,0,0,0.9993) calc(100% - var(--kante) * 0.9583),rgba(0,0,0,0.9978) calc(100% - var(--kante) * 0.9375),rgba(0,0,0,0.9949) calc(100% - var(--kante) * 0.9167),rgba(0,0,0,0.9904) calc(100% - var(--kante) * 0.8958),rgba(0,0,0,0.9839) calc(100% - var(--kante) * 0.875),rgba(0,0,0,0.9754) calc(100% - var(--kante) * 0.8542),rgba(0,0,0,0.9645) calc(100% - var(--kante) * 0.8333),rgba(0,0,0,0.9512) calc(100% - var(--kante) * 0.8125),rgba(0,0,0,0.9355) calc(100% - var(--kante) * 0.7917),rgba(0,0,0,0.9172) calc(100% - var(--kante) * 0.7708),rgba(0,0,0,0.8965) calc(100% - var(--kante) * 0.75),rgba(0,0,0,0.8733) calc(100% - var(--kante) * 0.7292),rgba(0,0,0,0.8478) calc(100% - var(--kante) * 0.7083),rgba(0,0,0,0.82) calc(100% - var(--kante) * 0.6875),rgba(0,0,0,0.7901) calc(100% - var(--kante) * 0.6667),rgba(0,0,0,0.7583) calc(100% - var(--kante) * 0.6458),rgba(0,0,0,0.7248) calc(100% - var(--kante) * 0.625),rgba(0,0,0,0.6897) calc(100% - var(--kante) * 0.6042),rgba(0,0,0,0.6534) calc(100% - var(--kante) * 0.5833),rgba(0,0,0,0.616) calc(100% - var(--kante) * 0.5625),rgba(0,0,0,0.5778) calc(100% - var(--kante) * 0.5417),rgba(0,0,0,0.539) calc(100% - var(--kante) * 0.5208),rgba(0,0,0,0.5) calc(100% - var(--kante) * 0.5),rgba(0,0,0,0.461) calc(100% - var(--kante) * 0.4792),rgba(0,0,0,0.4222) calc(100% - var(--kante) * 0.4583),rgba(0,0,0,0.384) calc(100% - var(--kante) * 0.4375),rgba(0,0,0,0.3466) calc(100% - var(--kante) * 0.4167),rgba(0,0,0,0.3103) calc(100% - var(--kante) * 0.3958),rgba(0,0,0,0.2752) calc(100% - var(--kante) * 0.375),rgba(0,0,0,0.2417) calc(100% - var(--kante) * 0.3542),rgba(0,0,0,0.2099) calc(100% - var(--kante) * 0.3333),rgba(0,0,0,0.18) calc(100% - var(--kante) * 0.3125),rgba(0,0,0,0.1522) calc(100% - var(--kante) * 0.2917),rgba(0,0,0,0.1267) calc(100% - var(--kante) * 0.2708),rgba(0,0,0,0.1035) calc(100% - var(--kante) * 0.25),rgba(0,0,0,0.0828) calc(100% - var(--kante) * 0.2292),rgba(0,0,0,0.0645) calc(100% - var(--kante) * 0.2083),rgba(0,0,0,0.0488) calc(100% - var(--kante) * 0.1875),rgba(0,0,0,0.0355) calc(100% - var(--kante) * 0.1667),rgba(0,0,0,0.0246) calc(100% - var(--kante) * 0.1458),rgba(0,0,0,0.0161) calc(100% - var(--kante) * 0.125),rgba(0,0,0,0.0096) calc(100% - var(--kante) * 0.1042),rgba(0,0,0,0.0051) calc(100% - var(--kante) * 0.0833),rgba(0,0,0,0.0022) calc(100% - var(--kante) * 0.0625),rgba(0,0,0,0.0007) calc(100% - var(--kante) * 0.0417),rgba(0,0,0,0.0001) calc(100% - var(--kante) * 0.0208),rgba(0,0,0,0) calc(100% - var(--kante) * 0));mask-image:linear-gradient(180deg,rgba(0,0,0,0) calc(var(--kante) * 0),rgba(0,0,0,0.0001) calc(var(--kante) * 0.0208),rgba(0,0,0,0.0007) calc(var(--kante) * 0.0417),rgba(0,0,0,0.0022) calc(var(--kante) * 0.0625),rgba(0,0,0,0.0051) calc(var(--kante) * 0.0833),rgba(0,0,0,0.0096) calc(var(--kante) * 0.1042),rgba(0,0,0,0.0161) calc(var(--kante) * 0.125),rgba(0,0,0,0.0246) calc(var(--kante) * 0.1458),rgba(0,0,0,0.0355) calc(var(--kante) * 0.1667),rgba(0,0,0,0.0488) calc(var(--kante) * 0.1875),rgba(0,0,0,0.0645) calc(var(--kante) * 0.2083),rgba(0,0,0,0.0828) calc(var(--kante) * 0.2292),rgba(0,0,0,0.1035) calc(var(--kante) * 0.25),rgba(0,0,0,0.1267) calc(var(--kante) * 0.2708),rgba(0,0,0,0.1522) calc(var(--kante) * 0.2917),rgba(0,0,0,0.18) calc(var(--kante) * 0.3125),rgba(0,0,0,0.2099) calc(var(--kante) * 0.3333),rgba(0,0,0,0.2417) calc(var(--kante) * 0.3542),rgba(0,0,0,0.2752) calc(var(--kante) * 0.375),rgba(0,0,0,0.3103) calc(var(--kante) * 0.3958),rgba(0,0,0,0.3466) calc(var(--kante) * 0.4167),rgba(0,0,0,0.384) calc(var(--kante) * 0.4375),rgba(0,0,0,0.4222) calc(var(--kante) * 0.4583),rgba(0,0,0,0.461) calc(var(--kante) * 0.4792),rgba(0,0,0,0.5) calc(var(--kante) * 0.5),rgba(0,0,0,0.539) calc(var(--kante) * 0.5208),rgba(0,0,0,0.5778) calc(var(--kante) * 0.5417),rgba(0,0,0,0.616) calc(var(--kante) * 0.5625),rgba(0,0,0,0.6534) calc(var(--kante) * 0.5833),rgba(0,0,0,0.6897) calc(var(--kante) * 0.6042),rgba(0,0,0,0.7248) calc(var(--kante) * 0.625),rgba(0,0,0,0.7583) calc(var(--kante) * 0.6458),rgba(0,0,0,0.7901) calc(var(--kante) * 0.6667),rgba(0,0,0,0.82) calc(var(--kante) * 0.6875),rgba(0,0,0,0.8478) calc(var(--kante) * 0.7083),rgba(0,0,0,0.8733) calc(var(--kante) * 0.7292),rgba(0,0,0,0.8965) calc(var(--kante) * 0.75),rgba(0,0,0,0.9172) calc(var(--kante) * 0.7708),rgba(0,0,0,0.9355) calc(var(--kante) * 0.7917),rgba(0,0,0,0.9512) calc(var(--kante) * 0.8125),rgba(0,0,0,0.9645) calc(var(--kante) * 0.8333),rgba(0,0,0,0.9754) calc(var(--kante) * 0.8542),rgba(0,0,0,0.9839) calc(var(--kante) * 0.875),rgba(0,0,0,0.9904) calc(var(--kante) * 0.8958),rgba(0,0,0,0.9949) calc(var(--kante) * 0.9167),rgba(0,0,0,0.9978) calc(var(--kante) * 0.9375),rgba(0,0,0,0.9993) calc(var(--kante) * 0.9583),rgba(0,0,0,0.9999) calc(var(--kante) * 0.9792),rgba(0,0,0,1) calc(var(--kante) * 1),rgba(0,0,0,1) calc(100% - var(--kante) * 1),rgba(0,0,0,0.9999) calc(100% - var(--kante) * 0.9792),rgba(0,0,0,0.9993) calc(100% - var(--kante) * 0.9583),rgba(0,0,0,0.9978) calc(100% - var(--kante) * 0.9375),rgba(0,0,0,0.9949) calc(100% - var(--kante) * 0.9167),rgba(0,0,0,0.9904) calc(100% - var(--kante) * 0.8958),rgba(0,0,0,0.9839) calc(100% - var(--kante) * 0.875),rgba(0,0,0,0.9754) calc(100% - var(--kante) * 0.8542),rgba(0,0,0,0.9645) calc(100% - var(--kante) * 0.8333),rgba(0,0,0,0.9512) calc(100% - var(--kante) * 0.8125),rgba(0,0,0,0.9355) calc(100% - var(--kante) * 0.7917),rgba(0,0,0,0.9172) calc(100% - var(--kante) * 0.7708),rgba(0,0,0,0.8965) calc(100% - var(--kante) * 0.75),rgba(0,0,0,0.8733) calc(100% - var(--kante) * 0.7292),rgba(0,0,0,0.8478) calc(100% - var(--kante) * 0.7083),rgba(0,0,0,0.82) calc(100% - var(--kante) * 0.6875),rgba(0,0,0,0.7901) calc(100% - var(--kante) * 0.6667),rgba(0,0,0,0.7583) calc(100% - var(--kante) * 0.6458),rgba(0,0,0,0.7248) calc(100% - var(--kante) * 0.625),rgba(0,0,0,0.6897) calc(100% - var(--kante) * 0.6042),rgba(0,0,0,0.6534) calc(100% - var(--kante) * 0.5833),rgba(0,0,0,0.616) calc(100% - var(--kante) * 0.5625),rgba(0,0,0,0.5778) calc(100% - var(--kante) * 0.5417),rgba(0,0,0,0.539) calc(100% - var(--kante) * 0.5208),rgba(0,0,0,0.5) calc(100% - var(--kante) * 0.5),rgba(0,0,0,0.461) calc(100% - var(--kante) * 0.4792),rgba(0,0,0,0.4222) calc(100% - var(--kante) * 0.4583),rgba(0,0,0,0.384) calc(100% - var(--kante) * 0.4375),rgba(0,0,0,0.3466) calc(100% - var(--kante) * 0.4167),rgba(0,0,0,0.3103) calc(100% - var(--kante) * 0.3958),rgba(0,0,0,0.2752) calc(100% - var(--kante) * 0.375),rgba(0,0,0,0.2417) calc(100% - var(--kante) * 0.3542),rgba(0,0,0,0.2099) calc(100% - var(--kante) * 0.3333),rgba(0,0,0,0.18) calc(100% - var(--kante) * 0.3125),rgba(0,0,0,0.1522) calc(100% - var(--kante) * 0.2917),rgba(0,0,0,0.1267) calc(100% - var(--kante) * 0.2708),rgba(0,0,0,0.1035) calc(100% - var(--kante) * 0.25),rgba(0,0,0,0.0828) calc(100% - var(--kante) * 0.2292),rgba(0,0,0,0.0645) calc(100% - var(--kante) * 0.2083),rgba(0,0,0,0.0488) calc(100% - var(--kante) * 0.1875),rgba(0,0,0,0.0355) calc(100% - var(--kante) * 0.1667),rgba(0,0,0,0.0246) calc(100% - var(--kante) * 0.1458),rgba(0,0,0,0.0161) calc(100% - var(--kante) * 0.125),rgba(0,0,0,0.0096) calc(100% - var(--kante) * 0.1042),rgba(0,0,0,0.0051) calc(100% - var(--kante) * 0.0833),rgba(0,0,0,0.0022) calc(100% - var(--kante) * 0.0625),rgba(0,0,0,0.0007) calc(100% - var(--kante) * 0.0417),rgba(0,0,0,0.0001) calc(100% - var(--kante) * 0.0208),rgba(0,0,0,0) calc(100% - var(--kante) * 0))}
.hero-zeichnung{background:linear-gradient(180deg,rgba(238,243,250,0) calc(var(--blende) * 0),rgba(238,243,250,0.0001) calc(var(--blende) * 0.0208),rgba(238,243,250,0.0007) calc(var(--blende) * 0.0417),rgba(238,243,250,0.0022) calc(var(--blende) * 0.0625),rgba(238,243,250,0.0051) calc(var(--blende) * 0.0833),rgba(238,243,250,0.0096) calc(var(--blende) * 0.1042),rgba(238,243,250,0.0161) calc(var(--blende) * 0.125),rgba(238,243,250,0.0246) calc(var(--blende) * 0.1458),rgba(238,243,250,0.0355) calc(var(--blende) * 0.1667),rgba(238,243,250,0.0488) calc(var(--blende) * 0.1875),rgba(238,243,250,0.0645) calc(var(--blende) * 0.2083),rgba(238,243,250,0.0828) calc(var(--blende) * 0.2292),rgba(238,243,250,0.1035) calc(var(--blende) * 0.25),rgba(238,243,250,0.1267) calc(var(--blende) * 0.2708),rgba(238,243,250,0.1522) calc(var(--blende) * 0.2917),rgba(238,243,250,0.18) calc(var(--blende) * 0.3125),rgba(238,243,250,0.2099) calc(var(--blende) * 0.3333),rgba(238,243,250,0.2417) calc(var(--blende) * 0.3542),rgba(238,243,250,0.2752) calc(var(--blende) * 0.375),rgba(238,243,250,0.3103) calc(var(--blende) * 0.3958),rgba(238,243,250,0.3466) calc(var(--blende) * 0.4167),rgba(238,243,250,0.384) calc(var(--blende) * 0.4375),rgba(238,243,250,0.4222) calc(var(--blende) * 0.4583),rgba(238,243,250,0.461) calc(var(--blende) * 0.4792),rgba(238,243,250,0.5) calc(var(--blende) * 0.5),rgba(238,243,250,0.539) calc(var(--blende) * 0.5208),rgba(238,243,250,0.5778) calc(var(--blende) * 0.5417),rgba(238,243,250,0.616) calc(var(--blende) * 0.5625),rgba(238,243,250,0.6534) calc(var(--blende) * 0.5833),rgba(238,243,250,0.6897) calc(var(--blende) * 0.6042),rgba(238,243,250,0.7248) calc(var(--blende) * 0.625),rgba(238,243,250,0.7583) calc(var(--blende) * 0.6458),rgba(238,243,250,0.7901) calc(var(--blende) * 0.6667),rgba(238,243,250,0.82) calc(var(--blende) * 0.6875),rgba(238,243,250,0.8478) calc(var(--blende) * 0.7083),rgba(238,243,250,0.8733) calc(var(--blende) * 0.7292),rgba(238,243,250,0.8965) calc(var(--blende) * 0.75),rgba(238,243,250,0.9172) calc(var(--blende) * 0.7708),rgba(238,243,250,0.9355) calc(var(--blende) * 0.7917),rgba(238,243,250,0.9512) calc(var(--blende) * 0.8125),rgba(238,243,250,0.9645) calc(var(--blende) * 0.8333),rgba(238,243,250,0.9754) calc(var(--blende) * 0.8542),rgba(238,243,250,0.9839) calc(var(--blende) * 0.875),rgba(238,243,250,0.9904) calc(var(--blende) * 0.8958),rgba(238,243,250,0.9949) calc(var(--blende) * 0.9167),rgba(238,243,250,0.9978) calc(var(--blende) * 0.9375),rgba(238,243,250,0.9993) calc(var(--blende) * 0.9583),rgba(238,243,250,0.9999) calc(var(--blende) * 0.9792),rgba(238,243,250,1) calc(var(--blende) * 1),rgba(238,243,250,1) calc(100% - var(--blende) * 1),rgba(238,243,250,0.9999) calc(100% - var(--blende) * 0.9792),rgba(238,243,250,0.9993) calc(100% - var(--blende) * 0.9583),rgba(238,243,250,0.9978) calc(100% - var(--blende) * 0.9375),rgba(238,243,250,0.9949) calc(100% - var(--blende) * 0.9167),rgba(238,243,250,0.9904) calc(100% - var(--blende) * 0.8958),rgba(238,243,250,0.9839) calc(100% - var(--blende) * 0.875),rgba(238,243,250,0.9754) calc(100% - var(--blende) * 0.8542),rgba(238,243,250,0.9645) calc(100% - var(--blende) * 0.8333),rgba(238,243,250,0.9512) calc(100% - var(--blende) * 0.8125),rgba(238,243,250,0.9355) calc(100% - var(--blende) * 0.7917),rgba(238,243,250,0.9172) calc(100% - var(--blende) * 0.7708),rgba(238,243,250,0.8965) calc(100% - var(--blende) * 0.75),rgba(238,243,250,0.8733) calc(100% - var(--blende) * 0.7292),rgba(238,243,250,0.8478) calc(100% - var(--blende) * 0.7083),rgba(238,243,250,0.82) calc(100% - var(--blende) * 0.6875),rgba(238,243,250,0.7901) calc(100% - var(--blende) * 0.6667),rgba(238,243,250,0.7583) calc(100% - var(--blende) * 0.6458),rgba(238,243,250,0.7248) calc(100% - var(--blende) * 0.625),rgba(238,243,250,0.6897) calc(100% - var(--blende) * 0.6042),rgba(238,243,250,0.6534) calc(100% - var(--blende) * 0.5833),rgba(238,243,250,0.616) calc(100% - var(--blende) * 0.5625),rgba(238,243,250,0.5778) calc(100% - var(--blende) * 0.5417),rgba(238,243,250,0.539) calc(100% - var(--blende) * 0.5208),rgba(238,243,250,0.5) calc(100% - var(--blende) * 0.5),rgba(238,243,250,0.461) calc(100% - var(--blende) * 0.4792),rgba(238,243,250,0.4222) calc(100% - var(--blende) * 0.4583),rgba(238,243,250,0.384) calc(100% - var(--blende) * 0.4375),rgba(238,243,250,0.3466) calc(100% - var(--blende) * 0.4167),rgba(238,243,250,0.3103) calc(100% - var(--blende) * 0.3958),rgba(238,243,250,0.2752) calc(100% - var(--blende) * 0.375),rgba(238,243,250,0.2417) calc(100% - var(--blende) * 0.3542),rgba(238,243,250,0.2099) calc(100% - var(--blende) * 0.3333),rgba(238,243,250,0.18) calc(100% - var(--blende) * 0.3125),rgba(238,243,250,0.1522) calc(100% - var(--blende) * 0.2917),rgba(238,243,250,0.1267) calc(100% - var(--blende) * 0.2708),rgba(238,243,250,0.1035) calc(100% - var(--blende) * 0.25),rgba(238,243,250,0.0828) calc(100% - var(--blende) * 0.2292),rgba(238,243,250,0.0645) calc(100% - var(--blende) * 0.2083),rgba(238,243,250,0.0488) calc(100% - var(--blende) * 0.1875),rgba(238,243,250,0.0355) calc(100% - var(--blende) * 0.1667),rgba(238,243,250,0.0246) calc(100% - var(--blende) * 0.1458),rgba(238,243,250,0.0161) calc(100% - var(--blende) * 0.125),rgba(238,243,250,0.0096) calc(100% - var(--blende) * 0.1042),rgba(238,243,250,0.0051) calc(100% - var(--blende) * 0.0833),rgba(238,243,250,0.0022) calc(100% - var(--blende) * 0.0625),rgba(238,243,250,0.0007) calc(100% - var(--blende) * 0.0417),rgba(238,243,250,0.0001) calc(100% - var(--blende) * 0.0208),rgba(238,243,250,0) calc(100% - var(--blende) * 0))}
@media (max-width:680px){:root{--blende:min(160px,40%);--kante:150px}}
.intro{max-width:680px;margin-bottom:40px}
.intro p{color:var(--muted)}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted)}

/* Startbereich */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.kicker{font-weight:600;color:var(--blue);margin-bottom:14px}
.hero h1{margin-bottom:20px}
.lead{font-size:1.15rem;color:#3a4550;max-width:560px;margin-bottom:30px}
.hero .note,.lp-head .note{margin-top:18px;font-size:.95rem;color:var(--muted);max-width:520px}
.hero-text{max-width:620px}
/* Startseite: helle Fläche, Text links, gezeichnete Einsatz-Szene rechts */
.hero-zeichnung{padding:72px 0 120px}
.hero-zeichnung .wrap{grid-template-columns:.9fr 1.3fr;gap:40px}
.hero-zeichnung .hero-szene{order:2}
.hero-szene svg{width:100%;height:auto}
.hero-zeichnung h1{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.015em;max-width:15ch;margin-bottom:22px}
/* ruhiger Abschluss im Startbereich: Nummer als Knopf, daneben ein schlichter Textlink */
.hero-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.hero-aktion .btn-call{font-size:1.2rem;padding:17px 30px;letter-spacing:.01em}
.hero-link{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:6px}
.hero-link:hover{color:var(--blue)}
/* zusätzliche Bausteine der großen Szene */
.zeichnung :is(.bl,.gelb,.haut,.loch){stroke:var(--d-l);stroke-width:3;stroke-linejoin:round}
.zeichnung .bl{fill:var(--blue)}
/* detaillierte Szene: Ärmel der Warnjacke mit Reflexstreifen, Schuhsohlen, Schrift auf dem Fahrzeug */
.zeichnung .jacke-o{fill:none;stroke:var(--d-l);stroke-width:20;stroke-linecap:round}
.zeichnung .jacke{fill:none;stroke:var(--d-a);stroke-width:14;stroke-linecap:round}
.zeichnung .jacke-ref{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:0 50 7 200;opacity:.9}
.zeichnung .sohle{fill:none;stroke:#fff;stroke-width:2;opacity:.7}
.zeichnung .tx-weiss{fill:#fff;font:700 8.5px "Outfit",sans-serif;letter-spacing:.8px}
/* Startbereich am PC: eine Straße über die ganze Bildschirmbreite (Panorama), darunter der Kanal im Schnitt.
   Am Handy/Tablet bleibt die kleine Szene über dem Text. Regeln für den PC stehen am Ende der Datei. */
.hero-pano{display:none}
.zeichnung .erde{fill:#f2ebdf}
.zeichnung .ans-o{fill:none;stroke:var(--d-l);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.zeichnung .ans{fill:none;stroke:var(--d-f);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.zeichnung .fluss{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 30;opacity:.8;animation:fluss 2.4s linear infinite}
@keyframes fluss{to{stroke-dashoffset:-44}}
@media (prefers-reduced-motion:reduce){.zeichnung .fluss{animation:none}}
.zeichnung .hgf{fill:#e3ecf8;stroke:#a9bfdd;stroke-width:2.5;stroke-linejoin:round}
.zeichnung .hgs :is(path,rect),.zeichnung path.hgs{fill:#fff;stroke:#a9bfdd;stroke-width:2.5;stroke-linejoin:round}
.zeichnung .hg-linie{fill:none;stroke:#a9bfdd;stroke-width:3;stroke-linecap:round}
.zeichnung .sonne{fill:#fff3c9;stroke:#f1d27e;stroke-width:2.5}
.zeichnung .hg-wolke{fill:#fff;stroke:#c6d6ec;stroke-width:2.5;stroke-linejoin:round}
.zeichnung .lampe{fill:#ffe9a6;opacity:.45;animation:lampe 3s ease-in-out infinite alternate}
@keyframes lampe{from{opacity:.25}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.zeichnung .lampe{animation:none}}
/* Zeichnung „Rund um die Uhr erreichbar“: besorgte Frau am Telefon, nachts */
.intro-bild{width:min(100%,400px);margin:0 auto 26px}
.intro-bild svg{width:100%;height:auto}
.zeichnung :is(.kleid,.haar,.nacht){stroke:var(--d-l);stroke-width:3;stroke-linejoin:round}
.zeichnung .kleid{fill:#b9a7de}
.zeichnung .haar{fill:#5b3a29}
.zeichnung :is(.nacht,.nacht-o){fill:#1d3a66}
.zeichnung .aermel-o{fill:none;stroke:var(--d-l);stroke-width:30;stroke-linecap:round}
.zeichnung .aermel{fill:none;stroke:#b9a7de;stroke-width:24;stroke-linecap:round}
.zeichnung .gelb{fill:#f2c230}
.zeichnung .haut{fill:#f1c9a5}
.zeichnung .loch{fill:#1d2d44}
.zeichnung .ref{fill:#fff;opacity:.9}
.zeichnung .arm-o{fill:none;stroke:var(--d-l);stroke-width:17;stroke-linecap:round}
.zeichnung .arm{fill:none;stroke:var(--d-a);stroke-width:11;stroke-linecap:round}
.zeichnung .hg-k{fill:#dfe9f6}
.zeichnung .hg :is(path,circle){fill:none;stroke:#b3c6e0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.zeichnung .schatten{fill:var(--d-l);opacity:.1}
.zeichnung .tx2{fill:var(--blue);font:700 15px "Outfit",sans-serif;letter-spacing:1.5px}
.zeichnung .blink{animation:blink 1.6s ease-in-out infinite}
.zeichnung .spaet{animation-delay:1.4s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.zeichnung .blink{animation:none}}
.photo{margin:0}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.photo figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}

/* Leistungen auf der Startseite: links die Namen, rechts Bild und Text der gewählten Leistung */
.leistungen{background:var(--paper)}
.lst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:72px;align-items:start}
.lst-item{display:contents}
.lst-name{grid-column:1;grid-row:var(--r);margin:0;font-size:inherit}
.lst-name button{display:block;width:100%;padding:14px 0;background:none;border:0;text-align:left;cursor:pointer;font:800 clamp(1.5rem,2.5vw,2.1rem)/1.15 "Outfit",sans-serif;letter-spacing:-.02em;color:#868d94;transition:color .25s}
.lst-name button small{display:block;margin-top:4px;font-size:.95rem;font-weight:500;letter-spacing:0;color:var(--muted);opacity:0;max-height:0;overflow:hidden;transition:opacity .25s,max-height .3s}
.lst-name button:hover,.lst-name button[aria-expanded="true"]{color:var(--ink)}
.lst-name button[aria-expanded="true"] small{opacity:1;max-height:2em}
.lst-panel{grid-column:2;grid-row:1/span 6;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.lst-panel.aktiv{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.lst-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.lst-panel p{margin-top:20px;font-size:1.08rem;color:#3a4550;max-width:520px}
.mehr{display:inline-block;margin-top:14px;font-weight:700;color:var(--blue);text-underline-offset:4px}
.mehr:hover{color:var(--blue-dark)}

/* Startseite: kurzer Einstieg in der Mitte */
.mitte{text-align:center;margin-left:auto;margin-right:auto}
.intro-mitte .wrap{max-width:860px;text-align:center}
.intro-mitte p{font-size:1.15rem;color:#3a4550}

/* Startseite: „Problem? Rufen Sie an“ – drei Fälle mit eigenen Zeichnungen */
.probleme{padding:60px 0}
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;text-align:center}
.prob .zeichnung{height:118px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px}
.prob .zeichnung svg{height:100%;width:auto}
.prob h3{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
.prob p{color:var(--muted)}
.prob p{max-width:30ch;margin:0 auto}
/* eine gemeinsame Nummer für alle drei Fälle */
.prob-anruf{margin-top:44px;text-align:center;font-size:1.1rem;font-weight:600;color:#3a4550}
.prob-anruf a{display:block;width:fit-content;margin:6px auto 0;padding-bottom:4px;font-family:"Outfit",sans-serif;font-weight:700;font-size:clamp(2rem,4vw,2.6rem);letter-spacing:-.01em;color:var(--blue);text-decoration:none;background:linear-gradient(var(--blue),var(--blue)) center bottom/0 3px no-repeat;transition:background-size .35s var(--wisch)}
.prob-anruf a:hover{background-size:100% 3px}

/* Startseite: Wir sind für Sie da – Text links, Foto rechts */
.da .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.da p{max-width:60ch}
.tipps{margin:12px 0 20px 22px}
.tipps li{margin-bottom:6px}
.da .mehr{margin-top:0}
.da-bild{margin:0}
.da-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 40%;border-radius:3px}
.da-bild figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}

/* Startseite: Leistungen als gezeichnete Kacheln (Fotos kommen später vom Kunden).
   Die zwei wichtigsten Leistungen stehen breit vorne, darunter die übrigen acht in Viererreihen. Ohne Zoom. */
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none}
.kacheln .breit{grid-column:span 2}
.kachel{display:grid;grid-template-rows:auto 1fr;height:100%;padding:26px 24px 24px;border-radius:6px;background:#fff;color:var(--ink);text-decoration:none;transition:background-color .25s}
.kachel:hover,.kachel:focus-visible{background:var(--blue-soft)}
.kachel-bild{display:flex;align-items:flex-end;justify-content:center;height:112px;margin-bottom:20px}
.kachel-bild svg{height:100%;width:auto;max-width:100%}
.kachel-text{display:grid;align-content:start;gap:4px}
.kachel b{font-family:"Outfit",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;hyphens:manual;overflow-wrap:anywhere}
.kachel small{font-size:.95rem;line-height:1.45;color:var(--muted)}
.kachel em{overflow-wrap:anywhere;font-style:normal;font-weight:700;margin-top:10px;color:var(--blue);text-decoration:underline;text-underline-offset:4px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.kachel:hover em,.kachel:focus-visible em{opacity:1;transform:none}
@media (hover:none){.kachel em{opacity:1;transform:none}}
.breit .kachel{grid-template-rows:none;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;padding:32px}
.breit .kachel-bild{height:150px;margin:0}
.breit .kachel b{font-size:1.6rem}

/* Zeichnung statt Foto (bis die Fotos des Kunden da sind): auf einer hellblauen Fläche */
.zeichen-bild{display:grid;place-items:center;aspect-ratio:1/1;padding:14%;border-radius:50%;background:var(--blue-soft)}
.paper .zeichen-bild{background:#fff}
.zeichen-bild svg{width:100%;height:auto;max-height:100%}

/* Startseite: Unser Versprechen – Foto links, Liste rechts */
.versprechen .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.v-bild{margin:0}
.v-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.v-lead{font-size:1.15rem;color:#3a4550}
.haken{list-style:none;margin-top:20px}
.haken li{padding:14px 0;border-top:1px solid var(--line);color:var(--muted)}
.haken li:last-child{border-bottom:1px solid var(--line)}
.haken b{color:var(--ink)}

/* Startseite: dunkles Band zu den Kosten */
.preisband{position:relative;overflow:hidden;padding:300px 0;background:#0f2a52;color:#fff;text-align:center}
.preisband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.preisband .wrap{position:relative;z-index:1;max-width:820px}
.preisband h2{color:#fff}
.preisband p{color:#d6e2f2;font-size:1.12rem}

/* Listen ohne Nummern */
.rows{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;list-style:none}
.rows li{display:grid;grid-template-columns:1fr;padding:22px 0;border-top:1px solid var(--line)}
.rows p{color:var(--muted)}
.rows h3 a{color:var(--ink);text-decoration:none}
.rows h3 a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* Notfall-Hinweis */
.alarm .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.alarm ol{margin:6px 0 0 22px}
.alarm li{margin-bottom:8px}
.alarm .side{background:#fff;padding:30px}
.alarm .side p{color:var(--muted);margin-bottom:18px}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;list-style:none;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font-weight:800;font-size:2.4rem;line-height:1;color:var(--blue);margin-bottom:12px}
.steps p{color:var(--muted)}

/* Bilder */
.pics{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:28px;align-items:start}
.pic{margin:0}
.pic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pic figcaption{margin-top:12px}
.pic figcaption span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:2px}
.pic figcaption p{color:var(--muted);font-size:.95rem}
.more{margin-top:36px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;align-items:start}

/* Hinweis „Beispielfoto“ auf jedem Foto, dezent oben rechts */
.foto{position:relative;display:block}
.kachel .foto{position:absolute;inset:0}
.bsp,.ba::after{position:absolute;top:10px;right:10px;z-index:3;padding:3px 8px;border-radius:3px;background:rgba(12,28,52,.72);color:#fff;font:600 .72rem/1.3 "Outfit",sans-serif;letter-spacing:.04em;pointer-events:none}
.ba::after{content:"Beispielfoto";top:auto;bottom:10px}

/* Vorher/Nachher */
.ba{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#ddd;touch-action:pan-y;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.ba .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .tag{position:absolute;top:12px;background:rgba(28,37,48,.85);color:#fff;font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:2px;pointer-events:none}
.ba .tl{left:12px}.ba .tr{right:12px}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--pos);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);display:grid;place-items:center;font-size:.9rem;color:var(--ink);pointer-events:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:has(input:focus-visible) .knob{outline:3px solid var(--signal)}

/* Bewertungen */
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.score b{font-weight:800;font-size:2.6rem;line-height:1}
.stars{color:#b7791f;letter-spacing:2px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:34px 0 34px}
.quote{margin:0}
.quote blockquote{font-size:1.02rem}
.quote blockquote::before{content:"„"}
.quote blockquote::after{content:"“"}
.quote figcaption{margin-top:12px;font-size:.92rem;color:var(--muted)}
.quote figcaption b{color:var(--ink)}

/* Einsatzgebiet */
.area .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.towns{columns:2;column-gap:32px;list-style:none;margin:20px 0 22px}
.towns li{padding:9px 0;border-top:1px solid var(--line);break-inside:avoid}
.towns a{color:var(--ink);text-decoration:none;font-weight:600}
.towns a:hover{color:var(--blue);text-decoration:underline}
.towns small{color:var(--muted);font-weight:400;margin-left:6px}
.map svg{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 1px 2px rgba(60,64,67,.25),0 2px 8px rgba(60,64,67,.12)}
.map a:hover path[fill="#ea4335"]{fill:#c5221f}
.map figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}

/* Fragen */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.5rem;font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:720px}

/* Kontakt */
.contact{background:var(--blue);color:#fff;padding:310px 0 300px}
.contact h2,.contact h3{color:#fff}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px}
.contact p{color:#d7e2f2}
.big-phone{display:inline-block;font-weight:800;letter-spacing:-.02em;font-size:clamp(2rem,5vw,3rem);color:#fff;text-decoration:none;margin:10px 0 22px}
.contact .btn-line{background:transparent;border-color:#fff;color:#fff}
.contact .btn-line:hover{background:#fff;color:var(--blue)}
.cdata{list-style:none;border-top:1px solid rgba(255,255,255,.25)}
.cdata li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.cdata span{color:#b9cbe6}
.cdata a{color:#fff}

/* Unterseiten */
.page-head{padding:56px 0 48px}
.page-head .lead{margin-bottom:26px}
.local .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.local p{max-width:66ch}
.aside{background:var(--paper);padding:28px}
.aside ul{columns:2;column-gap:18px;list-style:none;margin:10px 0 22px}
.aside li{padding:3px 0}
.checks{list-style:none;max-width:780px}
.checks li{padding:14px 0;border-top:1px solid var(--line)}
.checks li:last-child{border-bottom:1px solid var(--line)}
.links{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin-top:10px}
.links a{font-weight:600}

/* Leistungsseiten */
.lp-head{padding:56px 0 72px}
.lp-head .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.lp-head h1{margin-bottom:20px}
.lp-bild{margin:0}
.lp-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.lp-text .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:start}
.lp-text p{max-width:62ch;font-size:1.05rem}
.lp-zeichen h2{font-size:1.35rem;letter-spacing:-.01em}
.lp-zeichen ul{list-style:none}
.lp-zeichen li{padding:12px 0;border-top:1px solid var(--line)}
.lp-zeichen li:last-child{border-bottom:1px solid var(--line)}
.weitere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 40px;list-style:none}
.weitere a{display:grid;gap:2px;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.weitere b{font-size:1.1rem;overflow-wrap:anywhere}
.weitere span{color:var(--muted);font-size:.95rem}
.weitere a:hover b{color:var(--blue)}

/* Abfluss-Check */
.check{max-width:760px}
.check fieldset{border:0;margin-bottom:30px}
.check legend{font-weight:800;font-size:1.2rem;margin-bottom:12px}
.check label{display:flex;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line);cursor:pointer}
.check label:last-of-type{border-bottom:1px solid var(--line)}
.check input{width:20px;height:20px;accent-color:var(--blue);flex:none}
.check-hint{color:#b42318;font-weight:600;margin-top:12px}
.result{max-width:760px;margin-top:40px;padding:30px;background:var(--paper);border-left:6px solid var(--blue)}
.result.rot{border-left-color:#c0281c}
.result.gelb{border-left-color:#c77700}
.result.gruen{border-left-color:#2f7d45}
.result .lbl{font-size:.85rem;color:var(--muted)}
.result h3{font-size:1.5rem;margin:2px 0 10px}
.result ul{margin:12px 0 20px 22px}
.result li{margin-bottom:6px}
.result .small{font-size:.9rem;color:var(--muted);margin-top:14px}
.result .box{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}

/* Rechtstexte */
.legal{max-width:780px}
.legal h2{font-size:1.25rem;margin:34px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:10px}
.legal .stand{color:var(--muted);margin-top:30px;font-size:.9rem}

/* Fuß */
.foot{padding:48px 0 30px;font-size:.95rem;color:var(--muted)}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot img{height:44px;width:auto;margin-bottom:14px}
.foot h3{font-size:.95rem;color:var(--ink);margin-bottom:8px}
.foot ul{list-style:none}
.foot li{padding:2px 0}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--blue)}
.foot .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}

/* Selbst gezeichnete Illustrationen im leeren Rand links und rechts – nur, wenn dort wirklich Platz ist */
body{overflow-x:clip}
.sec,.hero,.page-head,.lp-head,.contact{position:relative}
/* Zeichenstil – gilt für die Randbilder (.deko) und für Zeichnungen im Inhalt (.zeichnung) */
.deko,.zeichnung{--d-l:#21508f;--d-f:#dbe6f4;--d-a:#e8743f;--d-t:#8dbbe9;--d-p:#eef3fa;--d-wz:#8a6748}
:is(.deko,.zeichnung) svg{display:block;overflow:visible}
:is(.deko,.zeichnung) :is(.l,.fl,.w,.a,.t){stroke:var(--d-l);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:is(.deko,.zeichnung) .l{fill:none}
:is(.deko,.zeichnung) .fl{fill:var(--d-f)}
:is(.deko,.zeichnung) .w{fill:#fff}
:is(.deko,.zeichnung) .a{fill:var(--d-a)}
:is(.deko,.zeichnung) .t{fill:var(--d-t)}
:is(.deko,.zeichnung) .d{fill:var(--d-l)}
:is(.deko,.zeichnung) .p{fill:var(--d-p)}
:is(.deko,.zeichnung) .h{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.85}
:is(.deko,.zeichnung) .s{fill:none;stroke:var(--d-l);stroke-width:2;stroke-linecap:round;opacity:.55}
:is(.deko,.zeichnung) .sa{fill:none;stroke:var(--d-l);stroke-width:10;stroke-linecap:round}
:is(.deko,.zeichnung) .sb{fill:none;stroke:var(--d-t);stroke-width:4.5;stroke-linecap:round}
:is(.deko,.zeichnung) .wz{fill:none;stroke:var(--d-wz);stroke-width:3;stroke-linecap:round}
:is(.deko,.zeichnung) .tx{fill:var(--d-l);font:800 14px "Outfit",sans-serif;letter-spacing:2px}
:is(.deko,.zeichnung) .licht{fill:var(--d-a);opacity:.25;animation:deko-licht 2.4s ease-in-out infinite alternate}
:is(.deko,.zeichnung) .spray{fill:none;stroke:var(--d-t);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;animation:deko-spray .7s linear infinite}
:is(.deko,.zeichnung) .tropfen{transform-box:fill-box;transform-origin:center;animation:deko-tropfen 3.2s ease-in infinite}
/* auf dunklen Flächen (Kontakt, Kosten-Band) hell gezeichnet */
:is(.contact,.preisband) .deko{--d-l:#cddcf1;--d-f:rgba(255,255,255,.12);--d-t:rgba(141,187,233,.55);--d-p:rgba(255,255,255,.06);--d-wz:#e3c3a0}
:is(.contact,.preisband) .deko .w{fill:rgba(255,255,255,.18)}
:is(.contact,.preisband) .deko .h{stroke:var(--blue)}
.deko{display:none}
/* Links und rechts neben dem Inhalt je zwei Zeichnungen übereinander, damit die breiten Ränder nicht leer wirken */
@media (min-width:1400px){
  .deko{
    --w:min(250px,calc((100% - var(--breite)) / 2 - 40px));
    display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:24px;position:absolute;z-index:1;top:30px;bottom:30px;width:var(--w);
    left:calc(((100% - var(--breite)) / 2 - var(--w)) / 2);pointer-events:none;
  }
  .deko-r{left:auto;right:calc(((100% - var(--breite)) / 2 - var(--w)) / 2)}
  .deko svg{width:100%;height:auto;max-height:calc(50% - 12px);flex:0 1 auto}
  .deko svg:nth-child(2){width:78%}
  .deko-r svg:nth-child(1){width:84%}
}
@keyframes deko-licht{from{opacity:.12}to{opacity:.38}}
@keyframes deko-spray{to{stroke-dashoffset:-13}}
@keyframes deko-tropfen{0%{transform:translateY(-6px);opacity:0}15%{opacity:1}70%{transform:translateY(26px);opacity:1}85%,100%{transform:translateY(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){:is(.deko,.zeichnung) :is(.licht,.spray,.tropfen){animation:none}}

/* Handy-Leiste */
.callbar{display:none}

@media (max-width:1000px){
  /* Menü am Handy/Tablet: Seiten oben, darunter die Leistungen als Felder in zwei Spalten, Zeichnung über dem Namen */
  .menu-innen{grid-template-columns:minmax(0,1fr);align-content:start;gap:30px;padding:28px 18px calc(36px + env(safe-area-inset-bottom))}
  .menu-seiten a{font-size:clamp(1.8rem,7vw,2.5rem);padding:3px 0}
  .menu-notdienst{margin-top:20px}
  .menu-notdienst a{font-size:1.6rem}
  .menu-leistungen{gap:10px}
  .menu-leistungen a{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:8px;padding:14px 10px}
  .ml-bild{height:50px;width:80px}
  .ml-text b{font-size:.98rem}
  .ml-text small{font-size:.8rem}
}
@media (max-width:900px){
  .hero .wrap,.alarm .wrap,.area .wrap,.contact .wrap,.local .wrap,.lp-head .wrap,.lp-text .wrap{grid-template-columns:1fr;gap:40px}
  .hero .photo,.lp-bild{max-width:480px}
  .rows{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .pics,.gallery{grid-template-columns:1fr 1fr}
  .pics .pic:first-child{grid-column:1/-1}
  .quotes{grid-template-columns:1fr;gap:28px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .weitere{grid-template-columns:repeat(2,minmax(0,1fr))}
  .da .wrap,.versprechen .wrap{grid-template-columns:1fr;gap:40px}
  .da-bild,.v-bild{max-width:480px}
  .v-bild{order:2}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zeichen-bild{width:min(100%,380px)}
  .prob{grid-template-columns:1fr;gap:44px}
  /* Leistungen: jede klappt unter ihrem Namen auf */
  .lst{display:block;border-bottom:1px solid var(--line)}
  .lst-item{display:block;border-top:1px solid var(--line)}
  .lst-name button{padding:18px 40px 18px 0;position:relative;color:var(--ink);font-size:1.4rem}
  .lst-name button::after{content:"+";position:absolute;right:4px;top:16px;font-weight:400;color:var(--blue)}
  .lst-name button[aria-expanded="true"]::after{content:"–"}
  .lst-name button small{opacity:1;max-height:none}
  .lst-panel{display:none;opacity:1;visibility:visible;transition:none;padding-bottom:26px}
  .lst-panel.aktiv{display:block}
  .lst-panel img{aspect-ratio:3/2}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .top .wrap{height:72px;gap:12px}
  .logo img{height:40px}
  .top-phone{width:44px;height:44px}
  .menu-btn{height:44px}
  .sec{padding:60px 0}
  .hero{padding:36px 0 52px}
  .hero-zeichnung{padding:24px 0 80px}
  .hero-zeichnung .hero-szene{order:0;margin:0 -8px}
  .lp-head{padding:36px 0 52px}
  .hero .btns .btn,.lp-head .btns .btn{width:100%}
  .steps{grid-template-columns:1fr;gap:26px}
  .pics,.gallery,.weitere,.kacheln{grid-template-columns:minmax(0,1fr)}
  .kacheln .breit{grid-column:auto}
  .breit .kachel{grid-template-columns:1fr;gap:0;padding:26px 24px 24px}
  .breit .kachel-bild{height:120px;margin-bottom:20px}
  .breit .kachel b,.kachel b{font-size:1.45rem}
  .kachel small{font-size:1.02rem}
  .top-wa{margin-right:-10px}
  .top-phone{width:40px}
  .preisband{padding:180px 0}
  .prob .zeichnung{height:96px}
  .towns,.aside ul{columns:1}
  .map{display:none}
  .kicker{font-size:.95rem}
  .cdata li{grid-template-columns:1fr;gap:2px}
  .foot .wrap{grid-template-columns:1fr}
  .contact{padding:180px 0 170px}
  .alarm .side{padding:24px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);transform:translateY(110%);transition:transform .2s}
  .callbar.show{transform:none}
  .callbar .btn{flex:1;padding:14px 10px}
  body{padding-bottom:76px}
}
/* Große Bildschirme: breiter und größer (steht am Ende, damit es die Grundregeln überschreibt) */
@media (min-width:1680px){
  :root{--breite:1400px}
  html{font-size:18px}body{font-size:18.5px}
  .intro.mitte{max-width:1100px}
  .hero-zeichnung .wrap{grid-template-columns:1fr 1.15fr}
  .breit .kachel{grid-template-columns:.6fr 1.4fr}
  .intro{max-width:960px}.intro-mitte .wrap{max-width:1160px}.preisband .wrap{max-width:1100px}.faq{max-width:1060px}.faq details p{max-width:960px}
  .hero-text{max-width:760px}.lead{max-width:720px}.hero .note,.lp-head .note{max-width:680px}
  .da p{max-width:84ch}.lp-text p{max-width:84ch}.local p{max-width:90ch}.checks{max-width:1000px}.check,.result{max-width:960px}.legal{max-width:1000px}
  .prob p{max-width:40ch}
}

/* Startbereich am PC: Text links, darunter die durchgehende Straße mit Kanal (steht am Ende, damit es Vorrang hat) */
@media (min-width:1100px){
  .hero-zeichnung{padding:64px 0 300px}
  .hero-zeichnung .wrap{position:relative;z-index:1;display:block;max-width:1160px}
  .hero-zeichnung .hero-szene{display:none}
  .hero-pano{display:block;position:absolute;left:0;right:0;bottom:0;height:660px;z-index:0;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}
  .hero-pano svg{display:block;width:100%;height:100%}
}

/* Straßen-Panorama ohne jede Bewegung (Wunsch des Nutzers): Wasser, Spüldüse, Kameralicht, Laternen, Blinklicht, Tropfen stehen still */
.hero-pano *{animation:none!important}
.hero-pano .fluss{stroke-dasharray:14 30}

/* ===== Aufbau nach Referenz kanal-beyerle.de (Wunsch des Kunden): Fotos statt Zeichnungen ===== */
/* Leiste ganz oben mit Notfalltelefon (nur PC) */
.infoleiste{display:none;background:#0f2a52;color:#dbe6f4;font-size:.88rem}
.infoleiste .wrap{display:flex;justify-content:flex-end;gap:28px;padding-top:7px;padding-bottom:7px}
.infoleiste a{color:#fff;text-decoration:none;font-weight:600}
.infoleiste a:hover{text-decoration:underline;text-underline-offset:3px}
/* Menü-Links im Kopf (PC), mit Strich oben beim aktiven Punkt */
.hauptnav{display:none}
@media (min-width:1100px){
  .infoleiste{display:block}
  .hauptnav{display:flex;align-items:stretch;align-self:stretch;margin-left:auto}
  .hauptnav a{display:flex;align-items:center;padding:0 18px;border-top:3px solid transparent;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;transition:color .2s,border-color .2s}
  .hauptnav a:hover{color:var(--blue)}
  .hauptnav a[aria-current]{border-top-color:var(--blue);color:var(--blue)}
  .top .top-phone,.top .menu-btn{display:none}
  .logo{margin-right:0}
}
/* Notdienst-Reiter am rechten Rand (PC) */
.notdienst-reiter{display:none}
@media (min-width:900px){
  .notdienst-reiter{display:block;position:fixed;right:0;top:50%;z-index:55;transform:translateY(-50%);writing-mode:vertical-rl;padding:22px 12px;background:var(--signal);color:#fff;font:700 .95rem "Outfit",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:6px 0 0 6px;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
  .notdienst-reiter:hover{background:var(--signal-dark)}
}

/* Hinweis „Beispielbild“: gut lesbar auf jedem Foto */
.bsp{background:rgba(255,255,255,.94);color:#0f2a52;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;padding:4px 9px}
.bsp-gross{top:16px;right:16px;font-size:.85rem;padding:7px 14px;box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}

/* Slideshow: links Text auf Dunkelblau, rechts das Foto (die Fotos sind hochkant, so bleiben sie scharf) */
.slider{background:#0f2a52;color:#fff}
.slides{position:relative;height:560px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.slide.aktiv{opacity:1;visibility:visible}
.slide-text{display:flex;flex-direction:column;justify-content:center;padding:40px 56px 40px max(24px,calc((100vw - var(--breite)) / 2 + 24px))}
.slide-nr{font:600 .9rem "Outfit",sans-serif;letter-spacing:.14em;color:#8dbbe9;margin-bottom:14px}
.slide-text h2{color:#fff;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.12;margin-bottom:16px}
.slide-text p{color:#dbe6f4;font-size:1.12rem;max-width:520px;margin-bottom:28px}
.slide-text .btn{align-self:flex-start}
.btn-hell{background:#fff;color:#0f2a52}
.btn-hell:hover{background:#dbe6f4}
.slide-bild{margin:0;position:relative;overflow:hidden;min-height:0}
.slide-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.slider-steuerung{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.slider-pfeil{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:none;color:#fff;cursor:pointer}
.slider-pfeil:hover{background:rgba(255,255,255,.12)}
.slider-pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slider-punkte{display:flex;gap:10px}
.slider-punkte button{width:34px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer}
.slider-punkte button[aria-current]{background:#fff}
.slider-hinweis{text-align:center;font-size:.85rem;color:#b9cfe9;padding:0 0 14px}

/* Notdienst-Kasten unter der Slideshow */
.notdienst-kasten{padding:44px 0 0}
.nk-innen{max-width:900px;margin:0 auto;padding:30px 36px;background:var(--signal);color:#fff;text-align:center;border-radius:4px}
.nk-innen h2{color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:8px}
.nk-innen h2 a{color:#fff;text-decoration:none;white-space:nowrap}
.nk-innen p{color:#fff;opacity:.95}

/* farbige Bänder wie bei der Referenz */
.band{background:var(--blue);color:#fff;text-align:center;padding:76px 0;margin-top:44px}
.band h1,.band h2{color:#fff}
.band-intro h1{font-size:clamp(1.7rem,3vw,2.4rem);max-width:980px;margin:0 auto 20px}
.band-intro p{max-width:920px;margin:0 auto;color:#dbe6f4;font-size:1.08rem}
.band-vorteile{margin-top:0}
.band-vorteile h2{margin-bottom:40px}
.vorteile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;max-width:1100px;margin:0 auto}
.vorteile li{display:flex;flex-direction:column;align-items:center;gap:16px;font-weight:600;line-height:1.4}
.vorteile svg{width:64px;height:64px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Leistungen als Foto-Kacheln (hell überdeckt, Name in Blau) */
.komp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none}
.komp a{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3.4;overflow:hidden;border-radius:4px;text-decoration:none;text-align:center}
.komp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.komp a::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.8);transition:background-color .3s}
.komp a:hover::before,.komp a:focus-visible::before{background:rgba(255,255,255,.62)}
.komp-text{position:relative;z-index:2;display:grid;gap:4px;padding:16px}
.komp-text b{font:700 1.12rem/1.2 "Outfit",sans-serif;color:var(--blue);hyphens:manual;overflow-wrap:anywhere}
.komp-text small{font-size:.86rem;line-height:1.35;color:#3a4550}
.komp .bsp{top:8px;right:8px;font-size:.62rem;padding:3px 7px}

/* Fotos in den Abschnitten */
.da-bild,.lp-bild{position:relative}
.menu-leistungen a{grid-template-columns:minmax(0,1fr)}

@media (max-width:1100px){
  .komp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .slides{height:590px}
  .slide{grid-template-columns:1fr;grid-template-rows:280px minmax(0,1fr)}
  .slide-bild{order:-1}
  .slide-text{padding:26px 20px 30px;justify-content:flex-start}
  .slide-text h2{font-size:1.7rem}
  .slide-text p{font-size:1rem;margin-bottom:20px}
  .komp{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .komp-text{padding:10px}
  .komp-text b{font-size:.98rem}
  .komp-text small{display:none}
  .band{padding:56px 0}
  .nk-innen{padding:24px 18px}
}
/* Leistungs-Kacheln überarbeitet: Foto gut sichtbar, unten dunkler Verlauf mit weißer Schrift (statt blass überdeckt) */
.komp{gap:18px}
.komp a{display:flex;align-items:flex-end;justify-content:flex-start;aspect-ratio:3/3.5;text-align:left;border-radius:6px;box-shadow:0 10px 24px -16px rgba(15,42,82,.55)}
.komp a::before{background:linear-gradient(180deg,rgba(10,31,62,0) 30%,rgba(10,31,62,.55) 58%,rgba(10,31,62,.94) 100%);transition:opacity .3s}
.komp a::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(6,29,58,0);transition:background-color .3s}
.komp a:hover::before,.komp a:focus-visible::before{background:linear-gradient(180deg,rgba(10,31,62,0) 30%,rgba(10,31,62,.55) 58%,rgba(10,31,62,.94) 100%)}
.komp a:hover::after,.komp a:focus-visible::after{background:rgba(6,29,58,.22)}
.komp-text{width:100%;gap:6px;padding:18px 18px 20px}
.komp-text b{color:#fff;font-size:1.14rem;line-height:1.2}
.komp-text small{color:#d6e2f2;font-size:.88rem}
.komp-text b::after{content:"";display:block;width:28px;height:3px;margin-top:10px;background:var(--signal);border-radius:2px;transition:width .3s}
.komp a:hover .komp-text b::after,.komp a:focus-visible .komp-text b::after{width:48px}
.komp .bsp{z-index:3;top:10px;right:10px;left:auto;font-size:.6rem;padding:3px 7px;background:rgba(255,255,255,.9)}
@media (max-width:760px){.komp a{aspect-ratio:3/3.6}.komp-text{padding:12px}.komp-text b{font-size:.98rem}}

/* Blaue Bänder mit welligem oberem und unterem Rand (Wunsch des Nutzers) */
.band{position:relative;margin-top:96px;margin-bottom:64px;z-index:1}
.band-vorteile{margin-top:110px}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:64px;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.band::before{top:-63px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23061d3a' d='M0 64V34C180 6 360 0 560 18S940 62 1140 46 1340 14 1440 22V64Z'/%3E%3C/svg%3E")}
.band::after{bottom:-63px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23061d3a' d='M0 0V30C200 58 400 64 600 46S980 4 1180 18 1360 48 1440 40V0Z'/%3E%3C/svg%3E")}
@media (max-width:760px){.band{margin-top:64px;margin-bottom:40px}.band::before,.band::after{height:34px}.band::before{top:-33px}.band::after{bottom:-33px}}
/* nur oben wellig (Wunsch des Nutzers), unten gerader Abschluss */
.band::after{content:none}
.band{margin-bottom:0}

/* Slideshow ohne blauen Kasten (Wunsch des Nutzers): dasselbe Foto unscharf und abgedunkelt über die ganze Breite,
   rechts das scharfe Foto, das weich in den Hintergrund übergeht; der Text steht direkt auf dem Foto-Hintergrund */
.slide{overflow:hidden;background:#0b1f3d}
.slide-hg{position:absolute;inset:-40px;z-index:0;background-size:cover;background-position:center 30%;filter:blur(26px) brightness(.5) saturate(1.15)}
.slide::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,22,46,.72) 0%,rgba(8,22,46,.35) 45%,rgba(8,22,46,0) 70%)}
.slide-text,.slide-bild{position:relative;z-index:1}
.slide-text h2,.slide-text p{text-shadow:0 2px 14px rgba(0,0,0,.35)}
.slide-bild{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.slider,.slider-steuerung{background:#0b1f3d}
@media (max-width:760px){
  .slide-bild{-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}
  .slide::before{background:linear-gradient(180deg,rgba(8,22,46,0) 30%,rgba(8,22,46,.55) 100%)}
}

/* Handy-Menü in derselben Schrift und Art wie die Menü-Links am PC: Raleway, halbfett, Großbuchstaben */
.menu-seiten a{font-family:"Outfit",system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.menu-titel,.menu-notdienst{font-family:"Outfit",system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.menu-notdienst a{font-family:"Outfit",system-ui,sans-serif;font-weight:700;text-transform:none;letter-spacing:0}
.ml-text b{font-family:"Outfit",system-ui,sans-serif;font-weight:700}
@media (max-width:1000px){
  .menu-seiten{display:grid;gap:0}
  .menu-seiten a{display:block;font-size:1.15rem;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .menu-seiten a[aria-current]{color:#fff;box-shadow:inset 3px 0 0 #fff;padding-left:12px;text-decoration:none}
  .menu-notdienst{font-size:.78rem}
  .menu-notdienst a{font-size:1.5rem;margin-top:4px}
}

/* Knopf in der Slideshow durchsichtig (Wunsch des Nutzers): nur weißer Rahmen und weiße Schrift */
.slide-text .btn-hell{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.slide-text .btn-hell:hover{background:rgba(255,255,255,.2);border-color:#fff}

/* Slideshow-Steuerung ohne Pfeile und ohne blaue Leiste (Wunsch des Nutzers):
   nur die Striche, durchsichtig unten im Bild, zum Anklicken */
.slider{position:relative}
.slider-steuerung{position:absolute;left:0;right:0;bottom:22px;z-index:4;padding:0;border:0;background:none!important;pointer-events:none}
.slider-punkte{pointer-events:auto;gap:12px;padding:10px 4px}
.slider-punkte button{position:relative;width:44px;height:4px;background:rgba(255,255,255,.45);box-shadow:0 1px 6px rgba(0,0,0,.35);transition:background-color .3s,width .3s}
.slider-punkte button::before{content:"";position:absolute;inset:-12px -2px}
.slider-punkte button:hover{background:rgba(255,255,255,.75)}
.slider-punkte button[aria-current]{background:#fff;width:60px}
@media (max-width:760px){.slider-steuerung{bottom:16px}}

/* Notdienst-Kasten überarbeitet: weiße Karte, die über den unteren Rand der Slideshow ragt,
   links Telefon-Symbol, Mitte Text, rechts die Nummer als oranger Knopf */
.notdienst-kasten{position:relative;z-index:5;margin-top:-52px;padding:0}
.nk-innen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;max-width:1040px;margin:0 auto;padding:26px 30px;background:#fff;color:var(--ink);text-align:left;border-radius:10px;border-left:6px solid var(--signal);box-shadow:0 22px 46px -20px rgba(10,31,62,.5)}
.nk-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(217,72,15,.1);color:var(--signal)}
.nk-icon svg{width:26px;height:26px;fill:currentColor}
.nk-text h2{color:var(--ink);font-size:1.4rem;margin-bottom:4px}
.nk-text p{color:var(--muted);margin:0;opacity:1;font-size:1rem}
.nk-nummer{display:block;padding:12px 24px;border-radius:6px;background:var(--signal);color:#fff;text-decoration:none;font:700 1.35rem/1.15 "Outfit",sans-serif;white-space:nowrap;text-align:center;transition:background-color .2s}
.nk-nummer small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.nk-nummer:hover{background:var(--signal-dark)}
.slider-steuerung{bottom:74px}
@media (max-width:760px){
  .notdienst-kasten{margin-top:-28px}
  .nk-innen{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:24px 20px;border-left:0;border-top:5px solid var(--signal)}
  .nk-nummer{width:100%}
  .slider-steuerung{bottom:44px}
}

/* Ziffern gleich hoch und gleich breit (Raleway zeigt sonst „Mediävalziffern“, die unruhig wirken) */
html{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* Striche der Slideshow: alle gleich groß, der aktive füllt sich weiß bis zum nächsten Bild */
.slider-punkte button,.slider-punkte button[aria-current]{width:46px;height:4px;background:rgba(255,255,255,.4)}
.slider-punkte button::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#fff}
.slider-punkte button.lauf::after{animation:strich-fuellen 6s linear forwards}
.slider.pause .slider-punkte button.lauf::after{animation-play-state:paused}
@keyframes strich-fuellen{to{width:100%}}
@media (prefers-reduced-motion:reduce){.slider-punkte button[aria-current]::after{width:100%}}
/* am Handy liegen die Striche am unteren Rand des Fotos, nicht auf dem Knopf */
@media (max-width:760px){.slides{height:610px}.slider-steuerung{top:244px;bottom:auto}}

/* Ziffern auch dort gleich hoch, wo „font“ die Schrift neu setzt */
*,*::before,*::after{font-feature-settings:"lnum" 1}
/* großer Notdienst-Kasten entfällt; stattdessen klein „Notdienst“ rechts neben Kontakt (Wunsch des Nutzers) */
.slider-steuerung{bottom:22px}
@media (min-width:1100px){
  .hauptnav .nav-notdienst{align-self:center;margin-left:10px;padding:7px 14px;border:0;border-radius:4px;background:var(--signal);color:#fff;font-size:.8rem;letter-spacing:.06em}
  .hauptnav .nav-notdienst:hover{background:var(--signal-dark);color:#fff}
}
.band-intro{margin-top:110px}
@media (max-width:760px){.band-intro{margin-top:72px}}
/* „24/7 Notdienst“ im Menü: kein Knopf, nur rote Schrift (Wunsch des Nutzers) */
@media (min-width:1100px){
  .hauptnav .nav-notdienst{align-self:stretch;margin-left:0;padding:0 18px;border-radius:0;background:none;color:#d42020;font-size:.95rem;font-weight:700;letter-spacing:.02em}
  .hauptnav .nav-notdienst:hover{background:none;color:#a81414}
}
@media (min-width:1100px){.hauptnav a{white-space:nowrap;padding:0 13px}.hauptnav .nav-notdienst{padding:0 0 0 13px}}
@media (min-width:1100px) and (max-width:1240px){.hauptnav a{padding:0 9px;font-size:.88rem}}

/* ===== Slideshow nach Beispiel des Nutzers: Foto dunkel über die ganze Breite, Text links, Striche mit Beschriftung ===== */
.slider{background:#06101f}
.slides{height:min(680px,calc(100vh - 88px));min-height:560px}
.slide{display:block;background:#06101f}
.slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,10,22,.9) 0%,rgba(4,10,22,.74) 38%,rgba(4,10,22,.48) 72%,rgba(4,10,22,.38) 100%),linear-gradient(0deg,rgba(4,10,22,.75) 0%,rgba(4,10,22,0) 38%)}
.slide-foto{position:absolute;inset:0;z-index:0}
.slide-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.slide>.bsp-gross{position:absolute;z-index:3}
.slide-inhalt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:96px}
.slide-inhalt h2{color:#fff;text-transform:uppercase;line-height:1.02;letter-spacing:.005em;margin-bottom:30px;font-size:clamp(2.3rem,5vw,4.3rem);hyphens:manual}
.slide-inhalt h2 b{display:block;font-weight:700}
.slide-inhalt h2 span{display:block;font-weight:200}
.slide-inhalt p{color:#e8eef6;font:400 1.22rem/1.5 "Outfit",sans-serif;max-width:640px;margin-bottom:36px}
.slide-inhalt .btn{align-self:flex-start}
.slide-inhalt .btn-hell{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.85)}
.slide-inhalt .btn-hell:hover{background:rgba(255,255,255,.2);border-color:#fff}
.slider-steuerung{top:auto;bottom:36px;left:0;right:0}
.slider-steuerung .wrap{display:block}
.slider-punkte{display:flex;justify-content:flex-start;gap:30px;padding:0}
.slider-punkte button,.slider-punkte button[aria-current]{position:relative;width:auto;min-width:118px;height:auto;padding:16px 0 0;border:0;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.75);font:600 .9rem/1.2 "Outfit",sans-serif;text-align:left;cursor:pointer}
.slider-punkte button[aria-current],.slider-punkte button:hover{color:#fff;background:none}
.slider-punkte button::before{content:"";position:absolute;inset:auto;left:0;right:0;top:0;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.slider-punkte button::after{content:"";position:absolute;left:0;top:0;bottom:auto;height:3px;width:0;border-radius:2px;background:#fff}
.slider-punkte button.lauf::after{animation:strich-fuellen 6s linear forwards}
@media (prefers-reduced-motion:reduce){.slider-punkte button[aria-current]::after{width:100%}}
@media (max-width:760px){
  .slides{height:620px;min-height:0}
  .slide{grid-template-rows:none}
  .slide::before{background:linear-gradient(180deg,rgba(4,10,22,.45) 0%,rgba(4,10,22,.7) 45%,rgba(4,10,22,.92) 100%)}
  .slide-inhalt{justify-content:flex-end;padding-bottom:110px}
  .slide-inhalt h2{font-size:2.1rem;margin-bottom:18px}
  .slide-inhalt p{font-size:1.02rem;margin-bottom:24px}
  .slider-steuerung{top:auto;bottom:28px}
  .slider-punkte{gap:14px}
  .slider-punkte button,.slider-punkte button[aria-current]{min-width:0;flex:1;font-size:.72rem;padding-top:12px}
}
/* Kontaktbereich wie die blauen Bänder: oben Welle statt weichem Verlauf, unten gerade (Wunsch des Nutzers) */
.contact{-webkit-mask-image:none;mask-image:none;margin-top:110px;padding:84px 0 90px;position:relative}
.contact::before{content:"";position:absolute;left:0;right:0;top:-63px;height:64px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23061d3a' d='M0 64V30C220 4 430 2 640 22S1010 60 1220 44 1380 16 1440 24V64Z'/%3E%3C/svg%3E")}
@media (max-width:760px){.contact{margin-top:72px;padding:60px 0 64px}.contact::before{height:34px;top:-33px}}

/* Handy-Menü schlichter (Wunsch des Nutzers):
   aktive Seite ohne Leiste/Unterstrich, Leistungen nur klein als Liste statt Kacheln */
.menu-seiten a[aria-current],.menu-seiten a:hover{background-size:0 3px;box-shadow:none;padding-left:0;color:#fff}
.menu-seiten a[aria-current]{opacity:1}
.menu-seiten a:not([aria-current]){opacity:.82}
.menu-leistungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.menu-leistungen a,.menu-leistungen a:hover,.menu-leistungen a[aria-current]{display:block;padding:9px 0;border-radius:0;background:none;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.menu-leistungen .ml-text b{font:500 .95rem/1.3 "Outfit",sans-serif;color:#e6eef8;letter-spacing:0}
.menu-leistungen a:hover .ml-text b,.menu-leistungen a[aria-current] .ml-text b{color:#fff}
.menu-leistungen .ml-text small{display:none}

/* eigene Seiten: Link „Alle Fragen ansehen“ und Kontakt-Karten */
.mehr-link{margin-top:32px;text-align:center}
.kontakt-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none}
.kontakt-karten li{display:flex;flex-direction:column;gap:8px;padding:28px 26px;border-radius:10px;background:var(--blue-soft);border-top:4px solid var(--blue)}
.kk-titel{font:600 .8rem "Outfit",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.kk-wert{font:700 1.45rem/1.25 "Outfit",sans-serif;color:var(--ink);text-decoration:none}
.kk-wert:hover{color:var(--blue)}
.kk-info{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.kontakt-karten{grid-template-columns:1fr}}

/* ===== Wisch-Effekt beim Scrollen (Wunsch des Nutzers) =====
   Fotos: ein blauer Balken fährt von links herein, deckt das Bild ab und gibt es nach rechts frei.
   Leistungs-Kacheln: werden nacheinander von links freigewischt, die Schrift gleitet hinterher.
   Nur mit JavaScript (Klasse .js), sonst sind alle Bilder sofort sichtbar. */
.js .da-bild,.js .lp-bild{overflow:hidden}
.js .da-bild img,.js .lp-bild img{clip-path:inset(0 100% 0 0);transform:scale(1.06);transition:clip-path .01s linear calc(var(--d,0s) + .55s),transform 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .55s)}
.js .da-bild::after,.js .lp-bild::after{content:"";position:absolute;inset:0;z-index:6;background:var(--blue);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.js .da-bild.sichtbar::after,.js .lp-bild.sichtbar::after{animation:wisch-balken 1.15s cubic-bezier(.77,0,.18,1) var(--d,0s) both}
.js .da-bild.sichtbar img,.js .lp-bild.sichtbar img{clip-path:inset(0 0 0 0);transform:none}
.js .da-bild .bsp,.js .lp-bild .bsp{opacity:0;transition:opacity .4s ease calc(var(--d,0s) + 1s)}
.js .da-bild.sichtbar .bsp,.js .lp-bild.sichtbar .bsp{opacity:1}
@keyframes wisch-balken{0%{transform:scaleX(0);transform-origin:left center}46%{transform:scaleX(1);transform-origin:left center}54%{transform:scaleX(1);transform-origin:right center}100%{transform:scaleX(0);transform-origin:right center}}

.js .komp a{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1) var(--d,0s),box-shadow .3s}
.js .komp a.sichtbar{clip-path:inset(0 0 0 0)}
.js .komp a img{transform:translateX(-8%) scale(1.08);transition:transform 1.3s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .komp a.sichtbar img{transform:none}
.js .komp-text{opacity:0;transform:translateX(-18px);transition:opacity .6s ease calc(var(--d,0s) + .45s),transform .6s ease calc(var(--d,0s) + .45s)}
.js .komp a.sichtbar .komp-text{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .da-bild img,.js .lp-bild img,.js .komp a,.js .komp a img,.js .komp-text,.js .da-bild .bsp,.js .lp-bild .bsp{clip-path:none;transform:none;opacity:1;transition:none}
  .js .da-bild::after,.js .lp-bild::after{display:none}
}
/* Kachel hat einen dunklen Grund, falls ein Foto noch lädt (nie leere weiße Fläche) */
.komp a{background:#0f2a52}

/* Überschriften weniger fett, Fließtext etwas kräftiger (Wunsch des Nutzers) */
h1,h2{font-weight:600;letter-spacing:-.01em}
h3{font-weight:600}
.band-intro h1{font-weight:600}
body{font-weight:400}
.band p,.slide-inhalt p,.nk-text p,.komp-text small,.kk-info{font-weight:400}
/* Dunkelblau aus dem Logo (#061D3A) als Hausfarbe (Wunsch des Nutzers); Menü-Fläche passend dazu */
.menu-flaeche{background:linear-gradient(150deg,#0b2b55 0%,#061d3a 55%,#030f20 100%)}
.hauptnav a:hover,.hauptnav a[aria-current]{color:#061d3a}
.hauptnav a[aria-current]{border-top-color:#061d3a}
/* Slideshow füllt den ganzen Bildschirm unter dem Kopf (Wunsch des Nutzers) */
.slides{height:calc(100vh - 88px);height:calc(100svh - 88px);min-height:520px}
@media (max-width:680px){.slides{height:calc(100vh - 72px);height:calc(100svh - 72px);min-height:560px}}

/* Blaue Bänder wischen beim Runterscrollen von links herein (samt Welle), der Inhalt gleitet hinterher */
.js .band{clip-path:inset(-80px 100% 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.js .band.sichtbar{clip-path:inset(-80px 0 0 0)}
.js .band .wrap>*{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .band.sichtbar .wrap>*{opacity:1;transform:none}
.js .band.sichtbar .wrap>:nth-child(1){transition-delay:.5s}
.js .band.sichtbar .wrap>:nth-child(2){transition-delay:.68s}
.js .band.sichtbar .wrap>:nth-child(3){transition-delay:.86s}
@media (prefers-reduced-motion:reduce){.js .band,.js .band .wrap>*{clip-path:none;opacity:1;transform:none;transition:none}}

/* Leistungs-Kacheln richtig hereingleiten lassen (Wunsch des Nutzers):
   erste Reihe von links, zweite Reihe von rechts, nacheinander, mit Ausblenden statt reinem Freiwischen */
.js .komp a{clip-path:none;opacity:0;transform:translateX(-160px) scale(.96);transition:opacity .8s ease var(--d,0s),transform 1.1s cubic-bezier(.16,.84,.24,1) var(--d,0s),box-shadow .3s}
.js .komp li:nth-child(n+6) a{transform:translateX(160px) scale(.96)}
.js .komp a.sichtbar,.js .komp li:nth-child(n+6) a.sichtbar{opacity:1;transform:none}
@media (max-width:1100px){
  .js .komp li a{transform:translateX(-120px) scale(.96)}
  .js .komp li:nth-child(even) a{transform:translateX(120px) scale(.96)}
  .js .komp li a.sichtbar{transform:none}
}
@media (prefers-reduced-motion:reduce){.js .komp a,.js .komp li a{opacity:1;transform:none;transition:none}}

/* keine orangen Akzente mehr (Wunsch des Nutzers): Strich unter den Kachel-Namen weg,
   Notdienst-Reiter im selben Rot wie „24/7 Notdienst“ im Menü, Fokusrahmen dunkelblau */
.komp-text b::after{content:none}
:root{--signal:#d42020;--signal-dark:#a81414}
:focus-visible{outline-color:var(--blue)}

/* ===== Leistungen mit Zeichnungen statt wiederholter Beispielfotos (Wunsch des Nutzers) =====
   Dunkelblaue Kachel (Logo-Farbe), oben die Zeichnung der Leistung hell gezeichnet, unten Name und Kurztext.
   Keine Orange-Töne, keine Bewegung in den Zeichnungen. */
.komp-bild,.lp-zeichnung{--d-l:#dce8f7;--d-f:rgba(255,255,255,.13);--d-a:#5d8fd0;--d-t:#8dbbe9;--d-p:rgba(255,255,255,.07);--d-wz:#c9b08f}
:is(.komp-bild,.lp-zeichnung) .w{fill:rgba(255,255,255,.18)}
:is(.komp-bild,.lp-zeichnung) .h{stroke:rgba(6,29,58,.9)}
:is(.komp-bild,.lp-zeichnung) .tx{fill:#dce8f7}
:is(.komp-bild,.lp-zeichnung) .gelb{fill:#e9eef5}
:is(.komp-bild,.lp-zeichnung) *{animation:none!important}
.komp a{flex-direction:column;align-items:stretch;justify-content:space-between;background:linear-gradient(160deg,#0d2c55 0%,#061d3a 60%,#04142a 100%)}
.komp a::before{background:radial-gradient(120% 70% at 50% 18%,rgba(93,143,208,.22),rgba(6,29,58,0) 70%)}
.komp a:hover::before,.komp a:focus-visible::before{background:radial-gradient(120% 70% at 50% 18%,rgba(93,143,208,.36),rgba(6,29,58,0) 70%)}
.komp a:hover::after,.komp a:focus-visible::after{background:rgba(255,255,255,.04)}
.komp-bild{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:26px 22px 4px;min-height:0}
.komp-bild svg{width:auto;max-width:78%;height:auto;max-height:118px}
.js .komp a img{transform:none}
.lp-zeichnung{display:grid;place-items:center;aspect-ratio:1/1;width:100%;max-width:520px;margin:0;padding:13%;border-radius:14px;background:linear-gradient(160deg,#0d2c55 0%,#061d3a 60%,#04142a 100%);box-shadow:0 24px 50px -24px rgba(6,29,58,.55)}
.lp-zeichnung svg{width:100%;height:auto;max-height:100%}
@media (max-width:760px){.komp-bild{padding:16px 12px 0}.komp-bild svg{max-height:78px}}

/* Kontaktformular (sendet per WhatsApp) */
.formular-wrap{max-width:960px}
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:8px;padding:34px;border-radius:12px;background:#fff;box-shadow:0 20px 44px -26px rgba(6,29,58,.45)}
.formular label{display:grid;gap:6px}
.formular label>span{font:600 .9rem "Outfit",sans-serif;color:var(--ink)}
.formular .breit{grid-column:1/-1}
.formular input:not([type=checkbox]),.formular select,.formular textarea{width:100%;padding:13px 14px;border:1px solid #cfd8e3;border-radius:6px;background:#f7f9fc;font:400 1rem "Lato",sans-serif;color:var(--ink);transition:border-color .2s,background-color .2s}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.formular textarea{resize:vertical}
.formular .zustimmung{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--muted)}
.formular .zustimmung input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue)}
.formular .zustimmung span{font:400 .92rem "Lato",sans-serif;color:var(--muted)}
.formular-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.formular-status{margin:0;font-weight:700}
.formular-status.ok{color:#137a3a}
.formular-status.fehler{color:#c21c1c}
@media (max-width:760px){.formular{grid-template-columns:1fr;padding:22px 18px}.formular-fuss .btn{width:100%}}

/* Die Welle des ersten Bandes ist ein Rohr, darin fährt der TV-Kamera-Roboter und findet einen Riss (Wunsch des Nutzers).
   main.js zeichnet das Rohr und bewegt den Roboter. */
.band-intro{margin-top:172px}
.js .band-intro{clip-path:inset(-220px 100% 0 0)}
.js .band-intro.sichtbar{clip-path:inset(-220px 0 0 0)}
.wellen-fahrt{position:absolute;left:0;right:0;top:-183px;height:184px;overflow:hidden;pointer-events:none;z-index:2}
.rohr{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.rohr .r-wand{fill:#5d8fd0}
.rohr .r-innen{fill:#eef4fb}
.rohr .r-tiefe{fill:#061d3a;opacity:.07}
.rohr .r-wasser{fill:#8dbbe9;opacity:.6}
.rohr .r-glanz{fill:none;stroke:#cfe0f5;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:22 14;animation:kante-lauf 2.2s linear infinite}
.rohr .r-kante{fill:none;stroke:#061d3a;stroke-width:2.5;stroke-linejoin:round}
.rohr .r-kante-i{fill:none;stroke:#061d3a;stroke-width:1.5;opacity:.5}
.rohr .r-muffe{fill:#86addf;stroke:#061d3a;stroke-width:2;stroke-linejoin:round}
.rohr .r-fuge{fill:none;stroke:#061d3a;stroke-width:1.2;opacity:.16}
.rohr .riss-linie{fill:none;stroke:#061d3a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.rohr .kabel{fill:none;stroke:#061d3a;stroke-width:2.6;stroke-linecap:round;transition:opacity .8s ease}
.rohr .kabel.weg{opacity:0}
.rohr .sucher{opacity:0;transition:opacity .35s ease}
.rohr .sucher-ecken{fill:none;stroke:#d42020;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transform:scale(1.5);transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.rohr .riss-ring{fill:none;stroke:#d42020;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rohr .sucher-text{fill:#d42020;font:700 13px "Outfit",sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.gefunden .rohr .sucher{opacity:1}
.gefunden .rohr .sucher-ecken{transform:none}
.gefunden .rohr .riss-linie{stroke:#d42020;stroke-width:2.6}
.gefunden .rohr .riss-ring{animation:riss-puls 1.1s ease-out 3}
@keyframes riss-puls{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes kante-lauf{to{stroke-dashoffset:-36}}
.fahrer{position:absolute;left:0;top:0;width:190px;aspect-ratio:290/118;margin-left:-69.45px;margin-top:-76px;transform-origin:69.45px 76px;
  --d-l:#061d3a;--d-f:#dbe6f4;--d-a:#5d8fd0;will-change:transform;opacity:0;transition:opacity .4s ease}
.fahrer.an{opacity:1}
.fahrer svg{width:100%;height:100%;overflow:visible}
.fahrer .licht{fill:#ffe08a;animation:fahrer-licht 1.8s ease-in-out infinite alternate}
.fahrer.scan .licht{animation:fahrer-scan .45s ease-in-out infinite alternate}
.fahrer .gelb{animation:blink 1.1s ease-in-out infinite}
.fahrer .rad{transform-box:fill-box;transform-origin:center;animation:rad-dreh .8s linear infinite;animation-play-state:paused;opacity:.9}
.fahrer.faehrt .rad{animation-play-state:running}
@keyframes rad-dreh{to{transform:rotate(360deg)}}
@keyframes fahrer-licht{from{opacity:.3}to{opacity:.55}}
@keyframes fahrer-scan{from{opacity:.4}to{opacity:.9}}
@media (max-width:760px){
  .band-intro{margin-top:100px}
  .wellen-fahrt{top:-113px;height:114px}
  .rohr .r-kante{stroke-width:2}
  .rohr .sucher-text{font-size:10px;letter-spacing:1.2px}
  .rohr .kabel{stroke-width:2}
  .fahrer{width:104px;margin-left:-38.01px;margin-top:-41.6px;transform-origin:38.01px 41.6px}
}
@media (prefers-reduced-motion:reduce){.rohr .r-glanz,.rohr .riss-ring,.fahrer .licht,.fahrer .gelb,.fahrer .rad{animation:none}}

/* Eigene Slideshow-Bilder: Ausschnitt je Bild (am Computer --pos, am Handy --pos-m), siehe SLIDE_BILD in build.js */
.slide-foto img{object-position:var(--pos,50% 50%)}
@media (max-width:680px){.slide-foto img{object-position:var(--pos-m,var(--pos,50% 50%))}}


/* Kontakt-Karten neu (Wunsch des Nutzers: passend zum Seitenstil): dunkelblau wie die Leistungs-Kacheln,
   Linien-Symbol im Kreis, Welle unten, ganze Karte klickbar, roter Live-Punkt beim Notdienst */
.kontakt-karten{gap:22px;margin:0;padding:0}
.kontakt-karten li{display:flex;padding:0;background:none;border:0;border-radius:0}
.kk{position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;gap:6px;padding:30px 28px 58px;border-radius:6px;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,#0d2c55 0%,#061d3a 60%,#04142a 100%);box-shadow:0 14px 30px -20px rgba(6,29,58,.75);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.kk::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 80% at 88% 0%,rgba(93,143,208,.26),rgba(6,29,58,0) 62%);opacity:.75;transition:opacity .35s}
.kk>*:not(.kk-welle){position:relative;z-index:1}
.kk:hover,.kk:focus-visible{transform:translateY(-5px);box-shadow:0 24px 42px -24px rgba(6,29,58,.85)}
.kk:hover::before,.kk:focus-visible::before{opacity:1}
.kk-icon{width:54px;height:54px;margin-bottom:14px;border-radius:50%;display:grid;place-items:center;background:rgba(93,143,208,.16);border:1.5px solid rgba(141,187,233,.45);transition:background-color .35s,border-color .35s}
.kk:hover .kk-icon{background:rgba(93,143,208,.3);border-color:rgba(185,209,240,.8)}
.kk-icon svg{width:26px;height:26px;fill:none;stroke:#dce8f7;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kk .kk-titel{display:flex;align-items:center;gap:8px;font:600 .78rem "Outfit",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8dbbe9}
.kk-live{width:8px;height:8px;border-radius:50%;background:#e23a3a;animation:kk-puls 1.8s ease-out infinite}
@keyframes kk-puls{0%{box-shadow:0 0 0 0 rgba(226,58,58,.65)}70%,100%{box-shadow:0 0 0 9px rgba(226,58,58,0)}}
.kk .kk-wert{font:600 1.5rem/1.25 "Outfit",sans-serif;color:#fff}
.kk .kk-info{color:#c9d7ea;font-size:.95rem;line-height:1.55}
.kk-aktion{align-self:flex-start;margin-top:auto;padding:18px 0 5px;font:600 .95rem "Outfit",sans-serif;color:#fff;
  background:linear-gradient(#5d8fd0,#5d8fd0) left bottom/34px 2px no-repeat;transition:background-size .4s cubic-bezier(.2,.7,.2,1)}
.kk:hover .kk-aktion,.kk:focus-visible .kk-aktion{background-size:100% 2px}
.kk-welle{position:absolute;left:0;right:0;bottom:0;width:100%;height:46px;pointer-events:none}
.kk-welle .w1{fill:rgba(93,143,208,.16)}
.kk-welle .w2{fill:rgba(93,143,208,.12)}
/* Einblenden beim Scrollen: nacheinander von unten (Verzögerung je Karte setzt main.js) */
.js .kontakt-karten .kk{opacity:0;transform:translateY(46px);transition:opacity .8s ease var(--d,0s),transform 1s cubic-bezier(.16,.84,.24,1) var(--d,0s),box-shadow .35s}
.js .kontakt-karten .kk.sichtbar{opacity:1;transform:none}
.js .kontakt-karten .kk.sichtbar:hover,.js .kontakt-karten .kk.sichtbar:focus-visible{transform:translateY(-5px);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
@media (max-width:900px){.kk{padding:26px 22px 54px}.kk .kk-wert{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){.js .kontakt-karten .kk{opacity:1;transform:none;transition:none}.kk-live{animation:none}}

/* Abschnitt "Wir sind fuer Sie da" ohne Beispielbild (Wunsch des Nutzers): Text allein, eine Spalte */
.da .wrap{grid-template-columns:minmax(0,820px)}
.da p{max-width:none}
/* Zoom je Slideshow-Bild auf das Wichtige (--zoom, --fokus aus SLIDE_BILD), z. B. den Bodenablauf bei der Rohrreinigung */
.slide-foto{overflow:hidden}
.slide-foto img{transform:scale(var(--zoom,1));transform-origin:var(--fokus,50% 50%)}@media (max-width:680px){.slide-foto img{transform:scale(var(--zoom-m,var(--zoom,1)));transform-origin:var(--fokus-m,var(--fokus,50% 50%))}}

/* Breite Nahaufnahmen (Wurzelfräsen, Rohrortung): größer in Kachel und Bildbox, damit Details erkennbar sind (Wunsch des Nutzers) */
.komp-bild svg.breit{max-width:96%;max-height:150px}
.lp-zeichnung:has(svg.breit){padding:5%}
@media (max-width:760px){.komp-bild svg.breit{max-height:110px}}
/* Organische Baumwurzeln und Fräse (Wurzelfräsen, Rohrortung) */
:is(.komp-bild,.lp-zeichnung,.zeichnung) .wz-f{fill:#a07a52;stroke:#e6d2ad;stroke-width:1.1;stroke-linejoin:round}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .wz-g{fill:none;stroke:#e9d6b2;stroke-width:1.2;stroke-linecap:round;opacity:.75}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .wz-h{fill:none;stroke:#cfae84;stroke-width:.9;stroke-linecap:round;opacity:.95}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .wz-zopf{stroke:#b89068;stroke-width:.8;opacity:.8}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .wz-spalt{stroke:#020a16;stroke-width:3;stroke-linecap:round}
.fraese .welle{fill:#7b8aa0;stroke:#dce8f7;stroke-width:1.6}
.fraese .welle-w{fill:none;stroke:#dce8f7;stroke-width:1.2;opacity:.7}
.fraese .feder{fill:none;stroke:#c9d4e3;stroke-width:2.2;stroke-linecap:round}
.fraese .rolle{fill:#1f3d63;stroke:#dce8f7;stroke-width:1.8}
.fraese .motor{fill:#5d6f88;stroke:#dce8f7;stroke-width:2}
.fraese .motor-glanz{fill:none;stroke:#e8eef6;stroke-width:2.2;stroke-linecap:round;opacity:.65}
.fraese .rippen{fill:none;stroke:#2b3d55;stroke-width:2.2;stroke-linecap:round}
.fraese .schild{fill:#5d8fd0;stroke:#dce8f7;stroke-width:1.2}
.fraese .kragen{fill:#8da0b9;stroke:#dce8f7;stroke-width:1.6}
.fraese .kopf{fill:#b9c6d7;stroke:#f3f7fc;stroke-width:2;stroke-linejoin:round}
.fraese .schneide{fill:none;stroke:#4a5d78;stroke-width:2;stroke-linecap:round}
.fraese .zahn{fill:#f3f7fc;stroke:#4a5d78;stroke-width:1;stroke-linejoin:round}
.fraese .spitze{fill:#f3f7fc;stroke:#4a5d78;stroke-width:1.2}
.fraese .dreh{fill:none;stroke:#8dbbe9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .span{fill:none;stroke:#e6d2ad;stroke-width:2;stroke-linecap:round}
:is(.komp-bild,.lp-zeichnung,.zeichnung) .staub{fill:none;stroke:#e6d2ad;stroke-width:2.4;stroke-linecap:round}
/* Handy: nichts darf über den rechten Rand ragen (hereinfliegende Kacheln, Rohr-Animation),
   sonst wird die Seite breiter und lässt sich seitlich wischen */
html{overflow-x:hidden}
main,footer{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html{overflow-x:clip}main,footer{overflow-x:clip}}