/* Weser Räumung & Entsorgung. Farben als Variablen. Schrift Inter (lokal, kein Fremdserver). */
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  --petrol:#0B5D5E; --petrol-dunkel:#084647; --wasser:#3FB6A8; --tinte:#10292B;
  --hell:#E8F4F2; --papier:#F4F7F6; --weiss:#fff;
  --text:#10292B; --text2:#3E5254; --linie:#D3DFDE;
  --r:6px; --breite:1160px;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"Inter",system-ui,"Segoe UI",Arial,sans-serif; font-size:17px; line-height:1.6; color:var(--text); background:var(--weiss); }
img, svg { max-width:100%; display:block; }
a { color:var(--petrol); text-underline-offset:3px; }
a:hover { color:var(--petrol-dunkel); }
:focus-visible { outline:3px solid var(--wasser); outline-offset:3px; border-radius:3px; }
.wrap { width:min(var(--breite), 100% - 40px); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:8px; background:var(--tinte); color:#fff; padding:10px 14px; z-index:100; }
.skip:focus { left:8px; }
.nur-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

h1, h2, h3 { line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h1 { font-weight:800; text-transform:uppercase; font-size:clamp(2.05rem, 4.6vw, 3.7rem); letter-spacing:-.015em; line-height:1.03; }
h2 { font-weight:800; font-size:clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-weight:700; font-size:1.2rem; }
p { margin:0 0 1em; }
.lead { font-size:1.2rem; line-height:1.55; }
.wasser { color:var(--wasser); }

/* Knöpfe */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:700; font-size:1rem; line-height:1; padding:16px 22px; min-height:52px; border-radius:var(--r); border:2px solid transparent; text-decoration:none; cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; }
.btn svg { width:20px; height:20px; flex:none; }
.btn-primaer { background:var(--wasser); color:var(--tinte); }
.btn-primaer:hover { background:#58C7BA; color:var(--tinte); }
.btn-dunkel { background:var(--petrol); color:#fff; }
.btn-dunkel:hover { background:var(--petrol-dunkel); color:#fff; }
.btn-rand { border-color:currentColor; color:#fff; background:transparent; }
.btn-rand:hover { background:rgba(255,255,255,.12); color:#fff; }
.btn-rand-dunkel { border-color:var(--petrol); color:var(--petrol); background:transparent; }
.btn-rand-dunkel:hover { background:var(--hell); color:var(--petrol-dunkel); }
.knoepfe { display:flex; flex-wrap:wrap; gap:12px; }

/* Kopf */
.kopf { background:#fff; border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:50; }
.kopf .wrap { display:flex; align-items:center; gap:24px; min-height:76px; }
.logo img { height:46px; width:auto; }
.nav { display:flex; gap:26px; margin-left:auto; align-items:center; }
.nav a { color:var(--text); font-weight:600; text-decoration:none; font-size:.97rem; padding:8px 0; border-bottom:2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color:var(--wasser); color:var(--text); }
.kopf-tel { white-space:nowrap; }
.menue-knopf { display:none; margin-left:auto; background:none; border:2px solid var(--linie); border-radius:var(--r); font:inherit; font-weight:700; padding:10px 14px; color:var(--text); }

/* Einstieg */
.hero { background:var(--tinte); color:#fff; padding:clamp(40px,6vw,76px) 0 clamp(48px,6vw,84px); }
.hero-raster { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center; }
.hero p.lead { color:#D5E4E2; max-width:34em; }
.hero .hinweis { margin:18px 0 0; color:#B5CBC8; font-size:.97rem; }
.hero.klein { padding:clamp(36px,5vw,64px) 0; }
.hero.klein .hero-raster { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.hero.klein .paar .bild img { aspect-ratio:4/5; }

/* Vorher-Nachher-Regler */
.vn { position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); background:#000; --pos:50%; isolation:isolate; max-height:78vh; width:100%; }
.vn img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vn .nach { clip-path:inset(0 0 0 var(--pos)); }
.vn-griff { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; }
.vn-griff::after { content:""; position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D5E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.vn input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.vn:focus-within .vn-griff::after { outline:3px solid var(--wasser); outline-offset:2px; }
.etikett { position:absolute; top:12px; background:rgba(16,41,43,.86); color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:4px; pointer-events:none; }
.etikett.l { left:12px; } .etikett.r { right:12px; background:var(--wasser); color:var(--tinte); }
.bildtext { font-size:.9rem; color:#B5CBC8; margin:10px 0 0; }

/* Faktenband */
.fakten { background:var(--petrol); color:#fff; }
.fakten ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fakten li { padding:24px 22px; border-left:1px solid rgba(255,255,255,.22); }
.fakten li:first-child { border-left:0; }
.fakten b { display:block; font-size:1.6rem; font-weight:800; line-height:1.1; margin-bottom:4px; }
.fakten span { color:#CFE6E3; font-size:.95rem; line-height:1.4; display:block; }

/* Abschnitte */
.abschnitt { padding:clamp(52px,7vw,96px) 0; }
.abschnitt.grau { background:var(--papier); }
.abschnitt.dunkel { background:var(--tinte); color:#fff; }
.abschnitt.dunkel .text2, .abschnitt.dunkel p { color:#D5E4E2; }
.kopfzeile { max-width:44em; margin-bottom:clamp(28px,4vw,48px); }
.kopfzeile p { color:var(--text2); font-size:1.1rem; }

.vorteile { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 28px; list-style:none; margin:0; padding:0; }
.vorteile li { border-top:4px solid var(--petrol); padding-top:16px; }
.vorteile h3 { margin-bottom:.35em; }
.vorteile p { margin:0; color:var(--text2); font-size:.98rem; line-height:1.55; }
.vorteile .aufruf { background:var(--petrol); color:#fff; border:0; padding:22px; border-radius:var(--r); display:flex; flex-direction:column; gap:14px; justify-content:space-between; }
.vorteile .aufruf p { color:#D8ECE9; }
.vorteile .aufruf h3 { color:#fff; }

.leistungen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.leistung { display:flex; flex-direction:column; background:#fff; border:1px solid var(--linie); border-radius:var(--r); overflow:hidden; }
.leistung img { aspect-ratio:4/3; width:100%; object-fit:cover; }
.leistung .inhalt { padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.leistung h3 { margin:0; font-size:1.35rem; }
.leistung p { margin:0; color:var(--text2); font-size:1rem; }
.leistung a.mehr { margin-top:auto; font-weight:700; padding-top:8px; }

.schritte { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; counter-reset:s; }
.schritte li { counter-increment:s; border-top:1px solid rgba(255,255,255,.28); padding-top:18px; }
.schritte li::before { content:counter(s,decimal-leading-zero); display:block; font-size:2.6rem; font-weight:800; color:var(--wasser); line-height:1; margin-bottom:14px; }
.schritte h3 { color:#fff; font-size:1.15rem; margin-bottom:.4em; }
.schritte p { margin:0; font-size:.97rem; color:#C9DCD9; }

.zwei { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.zwei.oben { align-items:start; }
.haken { list-style:none; margin:0 0 1.2em; padding:0; }
.haken li { position:relative; padding:7px 0 7px 34px; }
.haken li::before { content:""; position:absolute; left:0; top:11px; width:22px; height:22px; background:var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat; border-radius:50%; }
.paar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.bild { position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:#ddd; }
.bild img { width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.bild.quadrat img { aspect-ratio:1/1; }
.bild.breit img { aspect-ratio:16/10; }
.bild figcaption { position:absolute; left:10px; top:10px; right:auto; }
.bild .etikett.r { left:10px; right:auto; }
.galerie { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.unterschrift { color:var(--text2); font-size:.92rem; margin:10px 0 0; }

.spalten2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.spalten2 > div { border-left:4px solid var(--wasser); padding:4px 0 4px 22px; }
.spalten2 h3 { margin-bottom:.4em; }
.orte { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0; }
.orte li { background:var(--hell); color:var(--petrol-dunkel); font-weight:600; padding:7px 14px; border-radius:999px; font-size:.95rem; }

/* Fragen */
.fragen { max-width:52em; }
.fragen details { border-top:1px solid var(--linie); }
.fragen details:last-child { border-bottom:1px solid var(--linie); }
.fragen summary { list-style:none; cursor:pointer; padding:20px 44px 20px 0; font-weight:700; font-size:1.08rem; position:relative; }
.fragen summary::-webkit-details-marker { display:none; }
.fragen summary::after { content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:3px solid var(--petrol); border-bottom:3px solid var(--petrol); transform:translateY(-70%) rotate(45deg); transition:transform .2s; }
.fragen details[open] summary::after { transform:translateY(-30%) rotate(225deg); }
.fragen details p { margin:0 0 20px; max-width:44em; color:var(--text2); }

/* Anfrage */
.anruf-abschnitt { background:var(--petrol); color:#fff; padding:clamp(48px,6vw,88px) 0; }
.anruf-abschnitt .zwei { align-items:start; }
.anruf-abschnitt p { color:#D8ECE9; }
.anruf-abschnitt h2 { color:#fff; }
.anruf-abschnitt .tel { display:block; font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; color:#fff; text-decoration:none; margin:6px 0 20px; letter-spacing:-.01em; }
.formular { background:#fff; color:var(--text); border-radius:var(--r); padding:clamp(20px,3vw,32px); }
.formular.seite { border:1px solid var(--linie); }
.formular label { display:block; font-weight:600; font-size:.95rem; margin:0 0 16px; }
.formular input[type=text], .formular input[type=tel], .formular input[type=email], .formular select, .formular textarea { display:block; width:100%; margin-top:6px; font:inherit; font-size:1rem; padding:13px 14px; border:2px solid #B9C9C8; border-radius:var(--r); background:#fff; color:var(--text); min-height:50px; }
.formular textarea { min-height:110px; resize:vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color:var(--petrol); outline:3px solid rgba(63,182,168,.35); outline-offset:0; }
.formular input[type=file] { display:block; margin-top:6px; width:100%; font:inherit; font-size:.95rem; padding:12px; border:2px dashed #9DB5B3; border-radius:var(--r); background:var(--papier); }
.formular input[type=file]::file-selector-button { font:inherit; font-weight:700; margin-right:12px; padding:10px 16px; border:0; border-radius:var(--r); background:var(--petrol); color:#fff; cursor:pointer; }
.formular input[type=file]::file-selector-button:hover { background:var(--petrol-dunkel); }
.formular .hinweis { font-size:.9rem; color:var(--text2); margin:-8px 0 16px; font-weight:400; }
.formular .zeile { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.formular .haekchen { display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:.93rem; }
.formular .haekchen input { width:22px; height:22px; margin:3px 0 0; flex:none; accent-color:var(--petrol); }
.formular .btn { width:100%; }
.formular .status { margin:14px 0 0; font-weight:600; min-height:1.4em; }
.formular .status.fehler { color:#A3262A; } .formular .status.ok { color:var(--petrol); }
.hp { position:absolute !important; left:-9999px; height:0; width:0; opacity:0; }

/* Text-Seiten */
.seite-text { padding:clamp(40px,6vw,80px) 0; }
.seite-text .wrap { max-width:820px; }
.seite-text h1 { text-transform:none; font-size:clamp(1.9rem,4vw,2.8rem); }
.seite-text h2 { font-size:1.35rem; margin-top:1.8em; }
.seite-text p, .seite-text li { color:var(--text2); }

/* Fuß */
.fuss { background:var(--tinte); color:#C3D6D3; padding:56px 0 28px; font-size:.97rem; }
.fuss a { color:#fff; }
.fuss-raster { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.fuss h2 { font-size:1rem; color:#fff; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.9em; }
.fuss ul { list-style:none; margin:0; padding:0; } .fuss li { padding:3px 0; }
.fuss .logo img { height:44px; margin-bottom:16px; }
.fuss-unten { border-top:1px solid rgba(255,255,255,.18); margin-top:36px; padding-top:20px; font-size:.88rem; color:#9DB5B2; }

/* Schwebende Knöpfe (PC) und feste Leiste (Handy) */
.schwebe { position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; z-index:60; }
.schwebe .btn { box-shadow:0 6px 18px rgba(16,41,43,.35); padding:14px 18px; min-height:48px; }
.leiste { display:none; }

@media (max-width:1000px) {
  .hero-raster, .hero.klein .hero-raster, .zwei { grid-template-columns:minmax(0,1fr); }
  .hero .vn { max-width:460px; }
  .vorteile { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .leistungen, .galerie { grid-template-columns:minmax(0,1fr); }
  .leistung { flex-direction:row; } .leistung img { aspect-ratio:auto; width:38%; height:auto; }
  .schritte { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fakten ul { grid-template-columns:repeat(2,minmax(0,1fr)); } .fakten li:nth-child(3) { border-left:0; } .fakten li:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.22); }
  .fuss-raster { grid-template-columns:1fr 1fr; } .fuss-raster > :first-child { grid-column:1/-1; }
  .spalten2 { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  body { font-size:16.5px; padding-bottom:68px; }
  h1 { font-size:clamp(1.5rem,7.4vw,2.2rem); overflow-wrap:break-word; hyphens:auto; }
  .knoepfe .btn { width:100%; }
  .fakten li { padding:18px 14px; } .fakten b { font-size:1.25rem; } .fakten span { font-size:.88rem; }
  .anruf-abschnitt .tel { font-size:1.7rem; }
  .nav { display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--linie); flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 16px; margin:0; }
  .nav.offen { display:flex; } .nav a { padding:14px 0; width:100%; font-size:1.05rem; }
  .menue-knopf { display:block; } .kopf-tel { display:none; }
  .logo img { height:38px; }
  .leistung { flex-direction:column; } .leistung img { width:100%; aspect-ratio:4/3; }
  .vorteile, .schritte { grid-template-columns:minmax(0,1fr); }
  .formular .zeile { grid-template-columns:minmax(0,1fr); }
  .paar { grid-template-columns:1fr 1fr; }
  .fuss-raster { grid-template-columns:minmax(0,1fr); }
  .schwebe { display:none; }
  .leiste { display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--linie); box-shadow:0 -4px 18px rgba(16,41,43,.15); }
  .leiste a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:62px; font-weight:700; font-size:.85rem; text-decoration:none; color:var(--tinte); }
  .leiste a svg { width:22px; height:22px; }
  .leiste a.anruf { background:var(--petrol); color:#fff; } .leiste a.anfrage { background:var(--wasser); color:var(--tinte); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ===== One-Page-Fassung ===== */
html { scroll-padding-top:88px; }
.hero { position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; right:-6%; bottom:-14%; width:62%; aspect-ratio:95/66; background-repeat:no-repeat; background-size:contain; background-position:right bottom; pointer-events:none; }
.hero > .wrap { position:relative; }
.hero h1 { font-size:clamp(1.85rem,3.75vw,3.4rem); }

/* Ladeanimation mit Logo */
.lader { position:fixed; inset:0; z-index:300; background:var(--tinte); display:grid; place-items:center; animation:laderweg .45s ease 2.4s forwards; }
.lader.weg { opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s; }
.lader-innen { text-align:center; color:#fff; width:min(300px,70vw); }
.lader-zeichen { width:130px; height:auto; margin:0 auto 22px; overflow:visible; }
.lader-zeichen path { transform-box:fill-box; transform-origin:center; }
.lader .v1 { animation:v1 .8s cubic-bezier(.2,.8,.2,1) both; }
.lader .v2 { animation:v2 .8s cubic-bezier(.2,.8,.2,1) .15s both; }
.lader-name { font-weight:800; font-size:2.4rem; letter-spacing:.04em; line-height:1; animation:hoch .6s ease .45s both; }
.lader-zusatz { font-weight:600; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:#9DB5B2; margin-top:10px; animation:hoch .6s ease .6s both; }
.lader-balken { height:3px; background:rgba(255,255,255,.14); margin-top:28px; border-radius:2px; overflow:hidden; }
.lader-balken span { display:block; height:100%; width:0; background:var(--wasser); animation:balken 1s cubic-bezier(.3,.7,.2,1) .2s forwards; }
@keyframes v1 { from { opacity:0; transform:translate(-46px,-24px) rotate(-6deg); } }
@keyframes v2 { from { opacity:0; transform:translate(46px,24px) rotate(6deg); } }
@keyframes hoch { from { opacity:0; transform:translateY(14px); } }
@keyframes balken { to { width:100%; } }
@keyframes laderweg { to { opacity:0; visibility:hidden; } }

/* Einblenden beim Scrollen */
.js [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.js [data-reveal].sichtbar { opacity:1; transform:none; }

/* Laufband mit Leistungen */
.lauf { background:var(--wasser); color:var(--tinte); overflow:hidden; border-block:1px solid rgba(16,41,43,.15); }
.lauf-spur { display:flex; width:max-content; animation:lauf 42s linear infinite; }
.lauf:hover .lauf-spur { animation-play-state:paused; }
.lauf ul { display:flex; list-style:none; margin:0; padding:0; flex:none; }
.lauf li { padding:15px 0 15px 28px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; white-space:nowrap; }
.lauf li::after { content:""; display:inline-block; width:8px; height:8px; margin-left:28px; background:var(--tinte); transform:rotate(45deg); opacity:.55; }
@keyframes lauf { to { transform:translateX(-50%); } }

/* Leistungs-Kacheln */
.kacheln { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.kachel { position:relative; background:#fff; border:1px solid var(--linie); border-radius:var(--r); padding:26px 24px 22px; display:flex; flex-direction:column; gap:8px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.kachel:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,41,43,.12); border-color:var(--petrol); }
.kachel .nr { font-size:2.8rem; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--petrol); margin-bottom:6px; }
.kachel h3 { margin:0; font-size:1.25rem; }
.kachel p { margin:0; color:var(--text2); font-size:.98rem; }
.kachel .mehr { margin-top:auto; padding-top:12px; font-weight:700; }

/* Konfigurator */
.konfig { background:#fff; color:var(--text); border-radius:var(--r); padding:clamp(20px,3vw,32px); }
.konfig fieldset { border:0; margin:0; padding:0; min-width:0; }
.konfig legend { font-weight:800; font-size:1.3rem; padding:0; margin-bottom:16px; }
.konfig-js fieldset { display:none; }
.konfig-js fieldset.aktiv { display:block; animation:rein .3s ease; }
@keyframes rein { from { opacity:0; transform:translateX(16px); } }
.konfig-schritte { display:none; list-style:none; margin:0 0 22px; padding:0; gap:8px; }
.konfig-js .konfig-schritte { display:flex; }
.konfig-schritte li { flex:1; display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color:#6B8082; border-top:4px solid var(--linie); padding-top:8px; }
.konfig-schritte li b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--linie); color:var(--text2); font-size:.78rem; }
.konfig-schritte li.aktiv, .konfig-schritte li.fertig { color:var(--petrol); border-top-color:var(--petrol); }
.konfig-schritte li.aktiv b, .konfig-schritte li.fertig b { background:var(--petrol); color:#fff; }
.chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.chip { position:relative; display:block; margin:0 !important; font-weight:400 !important; }
.chip input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span { display:flex; align-items:center; min-height:54px; padding:12px 16px; border:2px solid #B9C9C8; border-radius:var(--r); font-weight:700; background:#fff; transition:background-color .15s, border-color .15s, color .15s; }
.chip:hover span { border-color:var(--petrol); }
.chip input:checked + span { background:var(--petrol); border-color:var(--petrol); color:#fff; }
.chip input:focus-visible + span { outline:3px solid var(--wasser); outline-offset:2px; }
.konfig-frage { font-weight:700; margin:6px 0 10px; }
.konfig-zusammen { margin:6px 0 16px; padding:12px 14px; background:var(--hell); border-radius:var(--r); font-size:.95rem; }
.konfig-nav { display:flex; flex-wrap:wrap; gap:10px; }
.konfig-nav .btn { width:auto; flex:1 1 150px; }
.konfig-js .konfig-nav [data-senden], .konfig-js .konfig-nav [data-whatsapp] { display:none; }
.konfig-js[data-schritt="3"] .konfig-nav [data-senden], .konfig-js[data-schritt="3"] .konfig-nav [data-whatsapp] { display:inline-flex; }
.konfig-js[data-schritt="3"] .konfig-nav [data-weiter] { display:none; }
.konfig [hidden] { display:none !important; }
.konfig label.fehler-feld span { border-color:#A3262A; }

.kontakt-liste { margin:0; display:grid; gap:4px 0; }
.kontakt-liste dt { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wasser); margin-top:14px; }
.kontakt-liste dd { margin:0; font-size:1.05rem; }
.kontakt-liste a { color:#fff; }
.abschnitt.dunkel .tel, .anruf-abschnitt .tel { display:block; font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; color:#fff; text-decoration:none; margin:6px 0 20px; letter-spacing:-.01em; }

@media (max-width:1000px) { .kacheln { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero::before { width:90%; } }
@media (max-width:760px) {
  .kacheln { grid-template-columns:minmax(0,1fr); }
  .lader-zeichen { width:100px; }
  .chips { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  html { scroll-padding-top:72px; }
}
@media (prefers-reduced-motion:reduce) {
  .lader { display:none; }
  .lauf-spur { animation:none; }
  .js [data-reveal] { opacity:1; transform:none; }
}

/* Korrekturen Konfigurator und Handy-Überschrift */
.konfig .hinweis, .anruf-abschnitt .konfig p { color:var(--text2); }
.konfig .status { color:var(--text); }
.konfig .btn { min-height:54px; }
.konfig .btn svg { width:20px; height:20px; }
@media (max-width:760px) {
  .hero h1 { font-size:clamp(1.25rem,6.3vw,2.1rem); hyphens:manual; overflow-wrap:normal; }
  h1 { overflow-wrap:normal; }
}

/* ===== Modernes Design, Schwebe-Knöpfe, Popup (v3) ===== */
:root { --r:14px; --r-gross:24px; --wa:#25D366; --wa-dunkel:#0A3D24; }
body { font-size:17.5px; }
h2 { font-size:clamp(1.9rem,3.9vw,3rem); letter-spacing:-.02em; }
.abschnitt { padding:clamp(64px,9vw,124px) 0; }
.kopfzeile { max-width:46em; }
.btn { border-radius:999px; padding:16px 26px; }
.btn-primaer { box-shadow:0 10px 26px rgba(63,182,168,.38); }
.btn-primaer:hover { transform:translateY(-2px); }
.btn-dunkel { box-shadow:0 10px 24px rgba(11,93,94,.28); }
.btn-dunkel:hover { transform:translateY(-2px); }
.btn { transition:background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn-wa { background:var(--wa); color:var(--wa-dunkel); }
.btn-wa:hover { background:#4BE083; color:var(--wa-dunkel); }

/* Fortschrittsbalken */
.fortschritt { position:fixed; top:0; left:0; height:3px; width:100%; background:linear-gradient(90deg,var(--wasser),#7fe0d3); transform:scaleX(0); transform-origin:left; z-index:120; }

/* Kopf: Glas */
.kopf { background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid rgba(16,41,43,.08); }

/* Einstieg */
.hero { background:radial-gradient(820px 520px at 88% 12%, rgba(63,182,168,.26), transparent 62%), radial-gradient(700px 520px at -5% 105%, rgba(11,93,94,.62), transparent 62%), var(--tinte); padding-bottom:clamp(96px,10vw,150px); }
.hero h1 { letter-spacing:-.025em; }
.hero-visual { position:relative; }
.vn { border-radius:var(--r-gross); box-shadow:0 34px 70px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.14); }
.glas { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; color:#fff; font-weight:700; font-size:.92rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(0,0,0,.3); animation:schweben 5s ease-in-out infinite; }
.glas i { width:9px; height:9px; border-radius:50%; background:#5CF0A0; box-shadow:0 0 0 4px rgba(92,240,160,.25); }
.glas.g1 { left:-26px; bottom:92px; }
.glas.g2 { right:-14px; bottom:34px; animation-delay:-2.4s; }
@keyframes schweben { 50% { transform:translateY(-9px); } }

/* Kennzahlen als schwebende Karten */
.fakten { background:transparent; color:var(--text); margin-top:-64px; position:relative; z-index:4; }
.fakten ul { gap:16px; }
.fakten li { background:#fff; border:0; border-radius:var(--r-gross); box-shadow:0 22px 50px rgba(16,41,43,.16); padding:26px 24px; }
.fakten li:first-child { border-left:0; }
.fakten b { color:var(--petrol); font-size:1.9rem; }
.fakten span { color:var(--text2); }

/* Laufband als große Schrift */
.lauf { background:transparent; border:0; margin-top:clamp(40px,6vw,80px); }
.lauf li { font-size:clamp(2.2rem,5.6vw,4.4rem); padding:0 0 0 .7em; color:transparent; -webkit-text-stroke:1.6px var(--petrol); letter-spacing:-.01em; line-height:1.15; }
.lauf li:nth-child(even) { color:var(--petrol); -webkit-text-stroke:0; }
.lauf li::after { width:.28em; height:.28em; margin-left:.7em; background:var(--wasser); opacity:1; vertical-align:middle; }
.lauf-spur { animation-duration:60s; }

/* Leistungen: Bento */
.kacheln { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.kachel { border-radius:var(--r-gross); padding:28px 26px 24px; border:1px solid var(--linie); background:#fff; overflow:hidden; }
.kachel::after { content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--hell); opacity:0; transition:opacity .25s, transform .25s; transform:scale(.6); }
.kachel:hover::after { opacity:1; transform:scale(1); }
.kachel > * { position:relative; z-index:1; }
.kachel:first-child, .kachel:last-child { grid-column:span 2; }
.kachel:first-child { background:linear-gradient(140deg,var(--petrol),#083c3d); color:#fff; border-color:transparent; }
.kachel:first-child p { color:#D2E8E5; }
.kachel:first-child .nr { -webkit-text-stroke-color:var(--wasser); }
.kachel:first-child .mehr { color:#fff; }
.kachel:first-child::after { background:rgba(255,255,255,.08); }
.kachel:last-child { background:var(--hell); border-color:transparent; }
.kachel:first-child h3, .kachel:last-child h3 { font-size:1.55rem; }
.kachel .mehr { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* Vorteile: Bento mit Symbolen */
.vorteile { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.vorteile li { border:1px solid var(--linie); border-top:1px solid var(--linie); background:#fff; border-radius:var(--r-gross); padding:26px 24px; transition:transform .2s, box-shadow .2s; }
.vorteile li:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(16,41,43,.1); }
.vorteile li:nth-child(2) { grid-column:span 2; background:linear-gradient(140deg,var(--petrol),#083c3d); color:#fff; border-color:transparent; }
.vorteile li:nth-child(2) p { color:#D2E8E5; }
.vorteile li:nth-child(2) .ic { background:rgba(255,255,255,.14); color:#7fe0d3; }
.vorteile .ic { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--hell); color:var(--petrol); margin-bottom:16px; }
.vorteile .ic svg { width:24px; height:24px; }
.vorteile .aufruf { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; background:var(--tinte); padding:28px 32px; border:0; }
.vorteile .aufruf h3 { font-size:1.5rem; margin:0 0 .2em; } .vorteile .aufruf p { margin:0; }
.vorteile .aufruf:hover { transform:none; box-shadow:none; }

/* Ablauf: Zeitleiste */
.schritte { gap:0; }
.schritte li { border-top:0; padding:0 22px 0 0; position:relative; }
.schritte li::after { content:""; position:absolute; left:0; right:0; top:2.4rem; height:2px; background:linear-gradient(90deg,var(--wasser),rgba(63,182,168,.1)); z-index:0; }
.schritte li::before { position:relative; z-index:1; display:inline-block; background:var(--tinte); padding-right:14px; font-size:3rem; }
.schritte h3 { margin-top:26px; }

/* Anfrage-Abschnitt */
.anruf-abschnitt { background:radial-gradient(700px 420px at 100% 0, rgba(63,182,168,.3), transparent 60%), linear-gradient(135deg,#0B5D5E,#083c3d); }
.konfig { border-radius:var(--r-gross); box-shadow:0 34px 70px rgba(0,0,0,.35); }
.chip span { border-radius:var(--r); }
.formular input[type=text], .formular input[type=tel], .formular input[type=email], .formular select, .formular textarea { border-radius:var(--r); }

.galerie .bild, .paar .bild, .spalten2 > div { border-radius:var(--r-gross); }
.spalten2 > div { background:var(--papier); border-left:0; padding:28px; }
.fragen details { border:1px solid var(--linie); border-radius:var(--r); margin-bottom:10px; padding:0 22px; background:#fff; }
.fragen details:last-child { border-bottom:1px solid var(--linie); }
.fragen summary { padding:20px 36px 20px 0; }
.fragen details[open] { border-color:var(--petrol); box-shadow:0 10px 26px rgba(16,41,43,.08); }

/* Schwebe-Knöpfe am PC */
.schwebe { right:26px; bottom:26px; gap:14px; align-items:flex-end; }
.sb { position:relative; display:flex; align-items:center; justify-content:flex-end; height:62px; max-width:62px; border-radius:999px; overflow:hidden; white-space:nowrap; text-decoration:none; font-weight:800; box-shadow:0 12px 30px rgba(16,41,43,.38); transition:max-width .35s cubic-bezier(.3,.7,.2,1), transform .2s; }
.sb:hover, .sb:focus-visible { max-width:260px; transform:translateY(-2px); }
.sb-text { padding:0 6px 0 24px; opacity:0; transition:opacity .2s .05s; font-size:.98rem; }
.sb:hover .sb-text, .sb:focus-visible .sb-text { opacity:1; }
.sb-icon { flex:none; width:62px; height:62px; display:grid; place-items:center; }
.sb-icon svg { width:30px; height:30px; }
.sb-wa { background:var(--wa); color:var(--wa-dunkel); }
.sb-wa .sb-icon { color:#fff; }
.sb-wa::before { content:""; position:absolute; right:0; top:0; width:62px; height:62px; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:puls 2.6s ease-out infinite; pointer-events:none; }
.sb-tel { background:var(--petrol); color:#fff; }
@keyframes puls { 0% { box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%,100% { box-shadow:0 0 0 20px rgba(37,211,102,0); } }

/* Popup */
.popup { position:fixed; left:24px; bottom:24px; z-index:90; width:min(350px,calc(100vw - 32px)); background:#fff; color:var(--text); border-radius:var(--r-gross); box-shadow:0 26px 60px rgba(16,41,43,.35); padding:20px 20px 18px; border:1px solid rgba(16,41,43,.08); }
.popup[hidden] { display:none; }
.popup.zeigen { animation:popein .5s cubic-bezier(.2,.9,.25,1.1); }
.popup.weg { animation:popaus .3s ease forwards; }
@keyframes popein { from { opacity:0; transform:translateY(30px) scale(.96); } }
@keyframes popaus { to { opacity:0; transform:translateY(20px) scale(.96); } }
.popup-kopf { display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:1.15rem; }
.popup-logo { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--petrol); }
.popup-logo svg { width:24px; height:auto; }
.popup p { margin:0 0 14px; color:var(--text2); font-size:1rem; line-height:1.5; }
.popup p b { color:var(--petrol); }
.popup-knoepfe { display:flex; gap:8px; flex-wrap:wrap; }
.popup-knoepfe .btn { flex:1 1 130px; padding:12px 14px; min-height:46px; font-size:.95rem; }
.popup-zu { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:transparent; font-size:1.7rem; line-height:1; color:var(--text2); cursor:pointer; }
.popup-zu:hover { background:var(--papier); color:var(--text); }

@media (max-width:1000px) {
  .kacheln, .vorteile { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kachel:first-child, .kachel:last-child, .vorteile li:nth-child(2) { grid-column:span 2; }
  .vorteile .aufruf { flex-direction:column; align-items:flex-start; }
  .schritte li::after { display:none; } .schritte li::before { padding-right:0; }
  .glas.g1 { left:8px; } .glas.g2 { right:8px; }
}
@media (max-width:760px) {
  .kacheln, .vorteile { grid-template-columns:minmax(0,1fr); }
  .kachel:first-child, .kachel:last-child, .vorteile li:nth-child(2), .vorteile .aufruf { grid-column:auto; }
  .fakten { margin-top:-40px; } .fakten li { padding:18px 16px; border-radius:18px; } .fakten b { font-size:1.4rem; }
  .glas { display:none; }
  .lauf li { font-size:2.2rem; }
  .leiste { grid-template-columns:1fr 1fr 1.2fr; gap:8px; padding:8px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid rgba(16,41,43,.1); }
  .leiste a { min-height:56px; border-radius:16px; flex-direction:row; gap:8px; font-size:.9rem; }
  .leiste a svg { width:22px; height:22px; }
  .leiste a.wa { background:var(--wa); color:var(--wa-dunkel); }
  .leiste a.anruf { background:var(--petrol); color:#fff; }
  .popup { left:12px; right:12px; bottom:84px; width:auto; }
}
@media (prefers-reduced-motion:reduce) { .glas, .sb-wa::before { animation:none; } .popup.zeigen { animation:none; } .fortschritt { display:none; } }