/* =========================================================================
   Glanzsauberman · Malerarbeiten-LP
   Rezept „Putz & Krepp“: warmes Putzweiß, tiefes Nachtblau aus dem Logo,
   Gold als einzige Akzentfarbe, Malerkrepp nur als Deko im Schluss.
   Radien: 10 (klein) · 20 (Karten/Bilder) · Kreis.  Schatten ≤ 6 %.
   Umbau 15.10.2026: Quiz-Karte im Hero, Leistungs-Tabs, Anbieter-Vergleich,
   Einsatzgebiet mit Karte, runde Kopf-Icons mobil.
   ========================================================================= */
:root{
  --ink:#0E1A28; --ink-2:#16263A;
  --paper:#F7F4EF; --paper-2:#EFE8DD; --weiss:#FFFFFF;
  --text:#1B2430; --muted:#56606C; --linie:rgba(14,26,40,.12);
  --gold:#D4A33B; --gold-hover:#E2B350; --gold-hell:#E8C173; --gold-d:#94701C;
  --krepp:rgba(62,143,216,.16); --krepp-text:#1D5A92;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-klein:10px; --r-karte:20px;
  --schatten:0 1px 2px rgba(14,26,40,.04), 0 10px 28px rgba(14,26,40,.05);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1200px; --rand:clamp(20px,5vw,40px);
  --abstand:clamp(76px,9vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
/* R2b DL-01: das hidden-Attribut gewinnt immer (sonst schlägt z. B. .form__steuer{display:flex} es) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a[href^="tel:"],.nowrap{white-space:nowrap}
p{margin:0 0 1em}
p,li,figcaption,legend,td,th{text-wrap:pretty}
h1,h3,.faq__f{text-wrap:balance}
h1,h2,h3{margin:0;font-weight:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:calc(var(--wrap) + 2*var(--rand));margin:0 auto;padding-inline:var(--rand)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-klein);text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---------- Typo ---------------------------------------------------------- */
h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2.05rem,1.3rem + 2.5vw,3.3rem);line-height:1.07;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
h2 em{display:block;font-style:normal;color:var(--gold-d)}
h3{font-weight:700;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.s-dunkel h2,.s-dunkel h3{color:#fff}
.s-dunkel h2 em{color:var(--gold-hell)}

/* Kicker: nur Text in der Akzentfarbe, ohne Strich, ohne Fläche */
.kick{display:block;margin:0 0 14px;font:600 1rem/1.35 var(--font-body);letter-spacing:0;text-transform:none;color:#7A5A12}
.kick--hell{color:var(--gold-hell)}

/* ---------- Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:14px 22px;border:1.5px solid transparent;border-radius:var(--r-klein);font:700 1rem/1.2 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg:last-child:not(:first-child){transform:translateX(3px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-hover)}
.btn--glas{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--glas:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.btn--dunkel{background:var(--ink);color:#fff}
.btn--dunkel:hover{background:var(--ink-2)}
.btn--linie{background:transparent;color:var(--ink);border-color:rgba(14,26,40,.22)}
.btn--linie:hover{border-color:var(--ink);background:#fff}
.btn--gross{min-height:58px;padding:16px 26px;font-size:1.05rem}
.btn--klein{min-height:44px;padding:10px 16px;font-size:.95rem}
.btn.laedt{pointer-events:none;color:transparent;position:relative}
.btn.laedt svg{opacity:0}
.btn.laedt::after{content:"";position:absolute;width:20px;height:20px;border:2.5px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Häkchen-Listen ------------------------------------------------ */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.haken li{position:relative;padding-left:34px;font-weight:600}
.haken li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:rgba(212,163,59,.18)}
.haken__svg{position:absolute;left:4px;top:calc(.2em + 4px);width:14px;height:14px;fill:none;stroke:var(--gold-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease)}
.haken--hell li::before{background:rgba(212,163,59,.24)}
.haken--hell .haken__svg{stroke:var(--gold-hell)}
.haken.ist-gezeichnet .haken__svg{stroke-dashoffset:0}

/* ---------- Kopf ---------------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .3s,box-shadow .3s}
.kopf__in{display:flex;align-items:center;gap:28px;height:88px;transition:height .3s var(--ease)}
.kopf__logo{display:block;flex:none}
.kopf__logo img{height:66px;width:auto;transition:height .3s var(--ease)}
.kopf__nav{display:flex;gap:26px;margin-left:auto}
.kopf__nav a{color:rgba(255,255,255,.88);font-weight:600;font-size:.95rem;text-decoration:none;position:relative;padding:6px 0}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kopf__nav a:hover::after{transform:scaleX(1)}
.kopf__cta{display:flex;align-items:center;gap:14px}
.kopf__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.kopf__wa{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;transition:border-color .2s,color .2s}
.kopf__wa:hover{border-color:var(--gold);color:var(--gold-hell)}
.kopf.ist-gescrollt{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(14,26,40,.06),0 8px 24px rgba(14,26,40,.05)}
.kopf.ist-gescrollt .kopf__in{height:72px}
.kopf.ist-gescrollt .kopf__logo img{height:54px}
.kopf.ist-gescrollt .kopf__nav a,.kopf.ist-gescrollt .kopf__tel,.kopf.ist-gescrollt .kopf__wa{color:var(--ink)}
.kopf.ist-gescrollt .kopf__wa{border-color:rgba(14,26,40,.2)}
.kopf.ist-gescrollt .kopf__wa:hover{border-color:var(--gold-d);color:var(--gold-d)}

/* ---------- Hero: Text links, Anfrage-Karte rechts (mobil darunter) ------ */
.hero{position:relative;display:flex;align-items:center;min-height:min(88svh,820px);padding:120px 0 72px;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,17,28,.92) 0%,rgba(9,17,28,.8) 34%,rgba(9,17,28,.52) 58%,rgba(9,17,28,.36) 80%),linear-gradient(180deg,rgba(9,17,28,.5) 0%,rgba(9,17,28,0) 26%,rgba(9,17,28,0) 72%,rgba(9,17,28,.45) 100%)}
.hero__in{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,460px);gap:clamp(36px,4vw,64px);align-items:center}
.hero__text{max-width:680px;min-width:0}
.hero__kick{font-size:1.08rem;margin-bottom:8px}
.hero__beruf{margin:0 0 20px;font-size:.92rem;font-weight:600;line-height:1.5;color:rgba(255,255,255,.74)}
.hero__titel{font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,1.2rem + 2.6vw,3.6rem);line-height:1.02;letter-spacing:-.022em;color:#fff;margin:0 0 22px}
.hero__titel em{display:block;font-style:normal;color:var(--gold-hell)}
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich__linie{position:absolute;left:-3%;bottom:-.06em;width:106%;height:.26em;overflow:visible;fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:zeichnen 1s .75s var(--ease) forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.hero__lead{font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:22px}
.hero__liste{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;margin-bottom:28px;font-size:.98rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.hero__wa{margin:14px 0 0;font-size:.97rem}
.hero__wa a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:rgba(255,255,255,.86);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.hero__wa a:hover{color:#fff;text-decoration-color:var(--gold)}
.hero__karte{min-width:0}
.hero__karte:empty{display:none}
.hero__karte .lead-form{box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 56px rgba(0,0,0,.32)}
.js .hs{opacity:0;transform:translateY(10px);animation:hs-rein .8s var(--ease) forwards}
.js .hero__text>.hs:nth-child(2){animation-delay:.06s}
.js .hero__text>.hs:nth-child(3){animation-delay:.12s}
.js .hero__text>.hs:nth-child(4){animation-delay:.2s}
.js .hero__text>.hs:nth-child(5){animation-delay:.28s}
.js .hero__text>.hs:nth-child(6){animation-delay:.36s}
.js .hero__text>.hs:nth-child(7){animation-delay:.42s}
.js .hero__karte.hs{animation-delay:.24s}
@keyframes hs-rein{to{opacity:1;transform:none}}

/* ---------- Abschnitte allgemein ----------------------------------------- */
section{position:relative}
.leist,.proj,.ablauf,.kunden,.faq,.unt,.anfrage{padding:var(--abstand) 0}
.leist{padding-top:calc(var(--abstand) - 8px)}
.s-dunkel{background:var(--ink);color:rgba(255,255,255,.78)}
.kopfzeile{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 48px;align-items:end;margin-bottom:44px}
.kopfzeile--solo{grid-template-columns:1fr}
.kopfzeile__text{margin:0;color:var(--muted);font-size:1.08rem;max-width:46ch}

/* ---------- Leistungen als Tabs ------------------------------------------ */
.tabs__liste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tabs__tab{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border:1.5px solid rgba(14,26,40,.16);border-radius:99px;background:#fff;color:var(--ink);font-weight:700;font-size:.98rem;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.tabs__tab:hover{border-color:var(--gold)}
.tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html:not(.js) .tabs__liste{display:none}
.lk{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--schatten)}
.js .tabs__panel{display:none}
.js .tabs__panel.ist-an{display:grid;animation:schritt-rein .38s var(--ease)}
html:not(.js) .tabs__panel+.tabs__panel{margin-top:18px}
.lk__bild{min-height:340px;overflow:hidden;background:var(--paper-2)}
.lk__bild img{width:100%;height:100%;object-fit:cover}
.lk__text{align-self:center;padding:clamp(24px,3.4vw,44px)}
.lk__text h3{margin-bottom:10px;font-size:1.35rem}
.lk__text p{margin:0;color:var(--muted)}
.zwischen{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;margin-top:22px;padding:24px 28px;background:var(--paper-2);border-radius:var(--r-karte)}
.zwischen p{margin:0;max-width:52ch}
.zwischen strong{color:var(--ink)}
.zwischen__knoepfe{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Der Unterschied: Anbieter-Vergleich (dunkel) ----------------- */
.unt__raster{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,80px);align-items:center}
.unt h2{font-size:clamp(2rem,1.25rem + 2vw,2.9rem)}
.unt__lead{font-size:1.08rem;margin:20px 0 0;max-width:56ch}
.vgl{width:100%;margin:30px 0 0;border-collapse:separate;border-spacing:0;font-size:.98rem;line-height:1.45}
.vgl th,.vgl td{padding:14px 16px;text-align:left;vertical-align:top;border-top:1px solid rgba(255,255,255,.1)}
.vgl thead th,.vgl thead td{border-top:0;vertical-align:bottom;padding-top:16px;padding-bottom:14px}
.vgl tbody th{width:30%;font-weight:600;color:rgba(255,255,255,.74)}
.vgl__wir{width:38%;background:rgba(212,163,59,.1);color:#fff;font-weight:700}
.vgl thead .vgl__wir{border-radius:14px 14px 0 0}
.vgl tbody tr:last-child .vgl__wir{border-radius:0 0 14px 14px}
.vgl td.vgl__wir{position:relative;padding-left:44px}
.vgl__haken{position:absolute;left:16px;top:16px;color:var(--gold-hell)}
.vgl__andere{color:rgba(255,255,255,.6)}
.vgl thead .vgl__andere{font-weight:600;padding-right:4px}
.vgl__marke{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.vgl__marke img{flex:none;width:42px;height:auto}
.unt__abschluss{margin-top:28px}
.unt__abschluss p{margin:0 0 22px;max-width:58ch}
.unt__bilder{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.unt__fig{margin:0;position:relative}
.unt__fig--zwei{margin-top:64px}
.unt__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-karte)}
.unt__fig figcaption{margin-top:12px;font-size:.92rem;color:rgba(255,255,255,.68)}
.unt__fig figcaption span{display:block;margin-bottom:2px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hell)}

/* ---------- Projekte ------------------------------------------------------ */
.proj{background:#fff}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:16px}
.gal{position:relative;margin:0;border-radius:var(--r-karte);overflow:hidden;background:var(--paper-2)}
.gal--gross{grid-column:span 2;grid-row:span 2}
.gal--hoch{grid-row:span 2}
.gal--breit{grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:7px 12px;border-radius:var(--r-klein);background:rgba(14,26,40,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:.86rem;font-weight:600;line-height:1.35}

/* ---------- Ablauf -------------------------------------------------------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.schritte::before,.schritte::after{content:"";position:absolute;top:27px;left:28px;right:calc(25% - 28px);height:2px}
.schritte::before{background:repeating-linear-gradient(90deg,rgba(14,26,40,.2) 0 8px,transparent 8px 15px)}
.schritte::after{background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.schritte.ist-da::after{transform:scaleX(1)}
.schritte li{position:relative}
.schritte__nr{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:50%;background:#fff;border:1.5px solid var(--linie);font:500 1.45rem/1 var(--font-display);color:var(--ink);box-shadow:var(--schatten)}
.schritte h3{margin-bottom:6px}
.schritte p{margin:0;color:var(--muted)}
.preis{display:grid;grid-template-columns:auto 1fr auto;gap:22px 26px;align-items:center;margin-top:52px;padding:28px 30px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.preis__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(212,163,59,.16);color:var(--gold-d)}
.preis h3{margin-bottom:4px}
.preis p{margin:0;color:var(--muted);max-width:62ch}

/* ---------- Für wen & Einsatzgebiet -------------------------------------- */
.kunden{background:#fff}
.kunden__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kk{padding:30px 30px 32px;background:var(--paper);border-radius:var(--r-karte)}
.kk__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-klein);background:#fff;color:var(--ink);box-shadow:var(--schatten)}
.kk h3{margin:20px 0 8px}
.kk p{margin:0;color:var(--muted)}
.gebiet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px 56px;align-items:center;margin-top:64px}
.gebiet__titel{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1.3rem;font-weight:700;color:var(--ink)}
.gebiet__titel svg{flex:none;color:var(--gold-d)}
.gebiet__intro{margin:0 0 14px;color:var(--muted)}
.gebiet__orte{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;color:var(--ink);font-size:.98rem;line-height:1.55}
.gebiet__orte strong{font-weight:700}
.gebiet__adresse{margin:0 0 6px;color:var(--muted)}
.gebiet__adresse strong{color:var(--ink)}
.gebiet__zeiten{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.gebiet__zeiten svg{flex:none;color:var(--gold-d)}
.gebiet__karte{display:block;min-width:0}
.gebiet__karte img{width:100%;max-width:600px;height:auto;margin-inline:auto}
/* R1 J-35: OSM-Namensnennung direkt an der Karte */
.gebiet__quelle{grid-column:2;width:100%;max-width:600px;margin:-12px auto 0;font-size:.8rem;line-height:1.4;color:var(--muted);text-align:right}
.gebiet__quelle a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:980px){.gebiet__quelle{grid-column:auto;max-width:560px;margin:-10px 0 0}}

/* ---------- Anfrage (dunkel) --------------------------------------------- */
.anfrage__raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start}
.anfrage__lead{font-size:1.1rem;margin:20px 0 28px;max-width:44ch}
.kontaktwege{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:440px}
.kontaktwege a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-karte);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:700;text-decoration:none;white-space:normal;transition:background-color .2s,border-color .2s}
.kontaktwege a:hover{background:rgba(255,255,255,.09);border-color:rgba(212,163,59,.5)}
.kontaktwege a>span:first-child{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(212,163,59,.16);color:var(--gold-hell)}
.kontaktwege a>span:last-child{min-width:0}
.kontaktwege small{display:block;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.6)}
.kontaktwege .kontaktwege__zeit{margin-top:2px}
.anfrage__karte{min-width:0}

/* ---------- Quiz-Karte (Hero und #anfrage) ------------------------------- */
.qk{position:relative}
.lead-form{padding:clamp(22px,2.6vw,30px) clamp(18px,1.8vw,22px);background:#fff;color:var(--text);border-radius:var(--r-karte);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.qk__titel{margin:0 0 4px;font:500 clamp(1.35rem,1.2rem + .5vw,1.6rem)/1.2 var(--font-display);color:var(--ink)}
.qk__unter{margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--muted)}
.fortschritt{height:6px;margin-bottom:10px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.fortschritt__f{height:100%;width:25%;border-radius:99px;background:var(--gold);transition:width .5s var(--ease)}
.f-schritt{margin:0 0 12px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.schritt{display:none;margin:0;padding:0;border:0;min-width:0}
.schritt.ist-an{display:block;animation:schritt-rein .38s var(--ease)}
@keyframes schritt-rein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.schritt legend{display:block;margin:0 0 12px;padding:0;font:700 1.06rem/1.35 var(--font-body);color:var(--ink)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.schritt[data-feld="wann"] .picks{grid-template-columns:1fr}
.pick{display:flex;align-items:center;gap:8px;min-height:54px;padding:10px 10px 10px 12px;border:1.5px solid rgba(14,26,40,.14);border-radius:var(--r-klein);background:#fff;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.25;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,transform .12s var(--ease)}
.pick svg{flex:none;color:var(--gold-d)}
.pick:hover{border-color:var(--gold);background:#FFFBF2}
.pick:active{transform:scale(.98)}
.pick.ist-gewaehlt{border-color:var(--gold);background:#FFF5DF;box-shadow:inset 0 0 0 1px var(--gold)}
.pick--breit{grid-column:1/-1}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld{display:block;min-width:0}
.feld>span{display:block;margin-bottom:6px;font-size:.9rem;font-weight:600;color:var(--ink)}
.feld--voll{grid-column:1/-1}
.feld input,.feld textarea{width:100%;padding:12px 14px;border:1.5px solid rgba(14,26,40,.16);border-radius:var(--r-klein);background:#fff;color:var(--text);font:400 1rem/1.4 var(--font-body);transition:border-color .15s,box-shadow .15s}
.feld textarea{resize:vertical;min-height:80px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,163,59,.25)}
.feld input::placeholder,.feld textarea::placeholder{color:#8B939C}
.ist-falsch{border-color:#B8402B !important;animation:wackeln .35s}
@keyframes wackeln{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--muted)}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--gold-d)}
.check a{color:var(--ink)}
.topf-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.qk__fehler{display:none;margin:14px 0 0;padding:10px 14px;border-radius:var(--r-klein);background:#FCEDEA;color:#8A2A1B;font-size:.92rem}
.qk__fehler.ist-an{display:block}
.qk__fehler a{font-weight:700;color:inherit}
.form__steuer{display:flex;align-items:center;gap:10px;margin-top:18px}
.zurueck{visibility:hidden;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:10px 4px;border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.zurueck.ist-an{visibility:visible}
.zurueck:hover{color:var(--ink)}
.zurueck--unten{display:none}
.weiter,.senden{margin-left:auto}
/* R1 ID-01/T-01: Schritt 4 auf schmalen Karten – Absendeknopf in eigener Zeile, „Zurück“ darunter.
   R2b DL-03: „Zurück“ darunter ist ein zweiter Knopf, der im DOM nach Senden steht (gleiche Tab- und Sichtfolge);
   der obere Zurück-Knopf ist dort display:none. DL-02: Rückfallzweig auch für die Hero-Karte ab 981 px. */
.lead-form{container-type:inline-size}
.senden__text{display:inline}
@container (max-width:439px){
  .form__steuer.ist-letzter{flex-wrap:wrap;row-gap:4px}
  .form__steuer.ist-letzter .senden{flex:1 1 100%;margin-left:0}
  .form__steuer.ist-letzter .zurueck{display:none}
  .form__steuer.ist-letzter .zurueck--unten{display:inline-flex;margin-inline:auto}
}
@container (max-width:335px){.senden__extra{display:none}}
@supports not (container-type:inline-size){
  @media (max-width:700px){
    .form__steuer.ist-letzter{flex-wrap:wrap;row-gap:4px}
    .form__steuer.ist-letzter .senden{flex:1 1 100%;margin-left:0}
    .form__steuer.ist-letzter .zurueck{display:none}
    .form__steuer.ist-letzter .zurueck--unten{display:inline-flex;margin-inline:auto}
  }
  @media (min-width:981px){
    .hero__karte .form__steuer.ist-letzter{flex-wrap:wrap;row-gap:4px}
    .hero__karte .form__steuer.ist-letzter .senden{flex:1 1 100%;margin-left:0}
    .hero__karte .form__steuer.ist-letzter .zurueck{display:none}
    .hero__karte .form__steuer.ist-letzter .zurueck--unten{display:inline-flex;margin-inline:auto}
  }
  @media (max-width:409px){.senden__extra{display:none}}
}
.formstate{padding:18px 0 6px;text-align:center}
.formstate:focus{outline:none}
.formstate__haken{width:64px;height:64px;margin:0 auto 14px;fill:none;stroke:var(--gold-d);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.formstate__haken circle{stroke-dasharray:152;stroke-dashoffset:152;animation:zeichnen .7s var(--ease) forwards}
.formstate__haken path{stroke-dasharray:40;stroke-dashoffset:40;animation:zeichnen .45s .55s var(--ease) forwards}
/* R4 C-02: .formstate p (0-1-1) schlug den Titel (0-1-0), er war grau statt Ink */
.formstate .formstate__titel{font:500 1.5rem/1.2 var(--font-display);color:var(--ink);margin-bottom:8px}
.formstate p{color:var(--muted)}
.formstate a{color:var(--ink);font-weight:700}
.qk__vertrauen{margin:12px 4px 0;text-align:center;font-size:.88rem;color:rgba(255,255,255,.7)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq__raster{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start}
.faq__text{margin:20px 0 0;color:var(--muted)}
.faq__text a{color:var(--ink);font-weight:700}
.faq__liste{border-top:1px solid var(--linie)}
.faq__item{border-bottom:1px solid var(--linie)}
.faq__f{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;border:0;background:none;color:var(--ink);font-weight:700;font-size:1.08rem;line-height:1.4;text-align:left;cursor:pointer}
.faq__plus{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper-2);transition:transform .35s var(--ease),background-color .2s}
.faq__f[aria-expanded="true"] .faq__plus{transform:rotate(45deg);background:var(--gold)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__a.ist-offen{grid-template-rows:1fr}
html:not(.js) .faq__a{grid-template-rows:1fr}
.faq__a p{margin:0 0 22px;color:var(--muted);max-width:62ch}

/* ---------- Schluss ------------------------------------------------------- */
.fin{padding:clamp(84px,10vw,132px) 0;background:var(--paper-2);text-align:center;overflow:hidden}
.fin::before,.fin::after{content:"";position:absolute;width:300px;height:36px;background:var(--krepp);opacity:.55;pointer-events:none;clip-path:polygon(0 0,100% 0,98.6% 30%,100% 60%,98.8% 100%,0 100%,1.3% 70%,0 40%)}
.fin::before{top:48px;left:-40px;transform:rotate(-8deg)}
.fin::after{bottom:52px;right:-50px;transform:rotate(-6deg)}
.fin__in{position:relative}
.fin h2{max-width:21ch;margin:0 auto}
.fin p{max-width:52ch;margin:20px auto 32px;color:var(--muted);font-size:1.1rem}
.fin__knoepfe{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* ---------- Fuß ----------------------------------------------------------- */
.fuss{padding:68px 0 28px;background:var(--ink);color:rgba(255,255,255,.7);font-size:.97rem}
.fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fuss__marke img{width:128px;margin-bottom:16px}
.fuss__marke p{max-width:34ch}
.fuss__gebiet{font-size:.9rem;color:rgba(255,255,255,.6)}
.fuss__titel{margin-bottom:12px;color:#fff;font-weight:700}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gold-hell)}
.fuss__liste{list-style:none;margin:-10px 0 0;padding:0;display:grid}
.fuss__liste a{display:inline-flex;align-items:center;min-height:44px}
.fuss__kontakt a{display:inline-flex;align-items:center;min-height:44px}
.fuss__unten{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
.fuss__unten p{margin:0}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:0 22px}
.fuss__unten nav a,.fuss__unten button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.fuss__unten button:hover{color:var(--gold-hell)}

/* ---------- Reveal-Engine ------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--vz,0s)}
.js .rv.ist-da{opacity:1;transform:none}

/* ---------- Rechtsseiten -------------------------------------------------- */
.seite-recht .kopf{background:rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(14,26,40,.06)}
.seite-recht .kopf__in{height:72px}
.seite-recht .kopf__logo img{height:54px}
.seite-recht .kopf__tel{color:var(--ink)}
.r-kopf{padding:140px 0 40px;background:var(--paper-2)}
.r-kopf h1{font:500 clamp(2.2rem,1.6rem + 2vw,3.2rem)/1.1 var(--font-display);color:var(--ink);margin:14px 0 8px}
.r-kopf p{margin:0;color:var(--muted)}
.r-zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);font-weight:600;text-decoration:none}
.r-zurueck:hover{color:var(--ink)}
.r-inhalt{padding:48px 0 96px;background:#fff}
.r-text{max-width:760px}
.r-text h2{font-size:clamp(1.45rem,1.25rem + .8vw,1.85rem);margin:40px 0 12px}
.r-text h3{font-size:1.1rem;margin:26px 0 8px}
.r-text p,.r-text li{color:var(--text)}
.r-text a{color:var(--krepp-text)}
/* R4 C-01: Knöpfe in .r-text (404) behalten die Knopfschrift, sonst schlägt .r-text a (0-1-1) .btn--gold/.btn--linie (0-1-0);
   vertical-align:top, weil die inline-flex-Knöpfe sonst an verschiedenen Grundlinien hängen (Text bzw. Symbol zuerst, 4,6 px Versatz) */
.r-text a.btn--gold,.r-text a.btn--linie{color:var(--ink)}
.r-text a.btn{vertical-align:top}
/* R3 J-42: die langen Google-Adressen in §8 brechen bei 320/340 sonst nicht um (adscookies: Querscrollen 24/5 px,
   privacy: 8 px über die Textspalte), deshalb nur diese beiden Links */
.r-text a[href="https://business.safety.google/adscookies/"],.r-text a[href="https://business.safety.google/privacy/"]{overflow-wrap:anywhere}
.r-box{padding:20px 22px;margin:0 0 16px;border-radius:var(--r-karte);background:var(--paper)}
.r-box p{margin:0 0 6px}
.r-link{padding:0;border:0;background:none;color:var(--krepp-text);text-decoration:underline;cursor:pointer;font:inherit}

/* ---------- Responsiv ----------------------------------------------------- */
@media (max-width:1100px){
  .faq__raster{grid-template-columns:1fr}
  .kopf__nav{display:none}
  .kopf__cta{margin-left:auto}
}
@media (max-width:980px){
  .hero{align-items:flex-end;min-height:0;padding:112px 0 56px}
  .hero__in{grid-template-columns:1fr;gap:30px}
  .hero__karte{max-width:640px}
  .kopfzeile,.unt__raster,.anfrage__raster,.faq__raster{grid-template-columns:1fr}
  .kopfzeile{align-items:start;margin-bottom:32px}
  .lk{grid-template-columns:1fr}
  .lk__bild{min-height:0;height:280px}
  .schritte{grid-template-columns:1fr 1fr;row-gap:36px}
  .schritte::before,.schritte::after{display:none}
  .kunden__raster{grid-template-columns:1fr}
  .kk{display:grid;grid-template-columns:52px 1fr;column-gap:18px}
  .kk h3{margin:4px 0 6px}
  .kk p{grid-column:2}
  .gebiet{grid-template-columns:1fr;margin-top:48px}
  .gebiet__karte img{max-width:560px;margin-inline:0}
  .fuss__raster{grid-template-columns:1fr 1fr}
  .unt__bilder{max-width:560px}
}
@media (max-width:700px){
  body{font-size:1rem}
  /* R1 ID-12: fließend, damit alle H2 auch bei 361–399 px zweizeilig bleiben */
  h2,.unt h2{font-size:min(1.72rem,6.9vw);line-height:1.1}
  .leist,.proj,.ablauf,.kunden,.faq,.unt,.anfrage{padding:56px 0}
  .kopfzeile{margin-bottom:24px}
  .unt__raster{gap:32px}
  .kopf__in{height:70px;gap:12px}
  .kopf__logo img{height:50px}
  .kopf.ist-gescrollt .kopf__in{height:64px}
  .kopf.ist-gescrollt .kopf__logo img{height:46px}
  .kopf__cta{gap:10px}
  .kopf__anfrage{display:none}
  .kopf__tel{padding:9px 12px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-klein);font-size:.92rem}
  .kopf__tel--rund{justify-content:center;width:44px;height:44px;padding:0;border-radius:50%}
  .kopf__tel--rund .kopf__nr{display:none}
  .kopf.ist-gescrollt .kopf__tel,.seite-recht .kopf__tel{border-color:rgba(14,26,40,.2)}
  .hero{padding:96px 0 40px}
  .hero__bild{object-position:72% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(9,17,28,.55) 0%,rgba(9,17,28,.74) 26%,rgba(9,17,28,.9) 50%,rgba(9,17,28,.96) 100%)}
  .hero__kick{font-size:.98rem}
  .hero__beruf{font-size:.84rem;margin-bottom:16px}
  .hero__titel{font-size:clamp(2rem,9.1vw,2.6rem);margin-bottom:18px}
  .hero__lead{margin-bottom:20px}
  .hero__liste{grid-template-columns:1fr;gap:8px;margin-bottom:24px}
  .hero__knoepfe .btn{width:100%}
  .hero__in{gap:24px}
  .tabs__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .tabs__tab{min-height:46px;padding:8px 6px;font-size:.92rem}
  .lk__bild{height:176px}
  .lk__text{padding:18px 18px 20px}
  .lk__text h3{font-size:1.2rem;margin-bottom:6px}
  .zwischen{padding:18px;margin-top:14px;gap:12px}
  .zwischen__knoepfe,.zwischen__knoepfe .btn{width:100%}
  .vgl{display:block;margin-top:20px;font-size:.95rem}
  .vgl thead,.vgl tbody{display:block}
  .vgl tr{display:grid;grid-template-columns:1.45fr 1fr}
  .vgl__ecke{display:none}
  .vgl th,.vgl td{padding:10px 12px}
  .vgl thead th{padding-top:12px;padding-bottom:10px}
  .vgl tbody th{grid-column:1/-1;width:auto;padding:14px 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .vgl tbody td{border-top:0}
  .vgl__wir{width:auto}
  .vgl thead .vgl__wir{border-radius:12px 12px 0 0}
  .vgl tbody tr .vgl__wir{border-radius:0}
  .vgl tbody tr:last-child .vgl__wir{border-radius:0 0 12px 12px}
  .vgl td.vgl__wir{padding-left:38px}
  .vgl__haken{left:12px;top:12px}
  .vgl__marke img{width:34px}
  .unt__abschluss{margin-top:18px}
  .unt__abschluss p{margin-bottom:18px}
  .unt__bilder{gap:10px}
  .unt__fig--zwei{margin-top:0}
  .unt__fig img{aspect-ratio:4/3}
  .unt__fig figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);margin:0;padding:5px 9px;border-radius:var(--r-klein);background:rgba(14,26,40,.74);color:#fff;font-size:.76rem;line-height:1.3}
  .unt__fig figcaption span{font-size:.66rem;margin-bottom:1px}
  .galerie{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .gal figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:.78rem;padding:5px 9px}
  .schritte{grid-template-columns:1fr;row-gap:0}
  .schritte li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding-bottom:26px}
  .schritte li:not(:last-child)::before{content:"";position:absolute;left:27px;top:60px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,rgba(14,26,40,.2) 0 8px,transparent 8px 15px)}
  .schritte__nr{grid-row:span 2;margin-bottom:0}
  .schritte h3{align-self:end;margin-top:6px}
  .preis{grid-template-columns:1fr;padding:24px 22px}
  .preis .btn{width:100%}
  .gebiet{margin-top:40px;gap:18px}
  .gebiet__orte{gap:6px;font-size:.95rem;line-height:1.5}
  .lead-form{padding:20px 18px 22px}
  .picks,.felder{grid-template-columns:1fr}
  .pick{min-height:52px}
  .form__steuer .btn{flex:1}
  .fin__knoepfe .btn{width:100%}
  .fuss__raster{grid-template-columns:1fr;gap:24px}
  .kk{display:block;padding:24px 22px 26px}
  .kk h3{margin:16px 0 6px}
}
@media (max-width:380px){
  .tabs__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{padding-inline:16px}
  .btn--gross{padding-inline:16px;font-size:1rem}
}
@media (max-width:360px){
  .faq__f{gap:12px;font-size:1rem}
  .preis{padding-inline:18px}
  .gal figcaption{padding:5px 7px;font-size:.75rem}
  h2,.unt h2{font-size:min(1.4rem,6.75vw)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js .rv,.js .hs{opacity:1;transform:none}
  .strich__linie,.haken__svg{stroke-dashoffset:0}
}


/* =========================================================================
   Reinigungs-LPs (Unterhalt / Fenster), Ergänzung 09.11.2026
   Gerüst und Design-Tokens 1:1 von der Maler-LP, hier nur neue Bausteine.
   Ebenen (Lastenheft): Fortschritt 1000 · Kopf 900 · FAB 940 · Pop-up 1100 · Cookie 1200
   ========================================================================= */
.kopf{z-index:900}
.leist,.proj,.ablauf,.kunden,.faq,.unt,.anfrage,.bew,.plan,.gebiet-s,.vn-s{padding:var(--abstand) 0}

/* Hero: ein Hintergrundbild je Variante (CSS, nur die passende Datei lädt) */
.hero__bg{position:absolute;inset:0;z-index:-2;background-color:var(--ink);background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
.hero__titel{font-size:clamp(2.3rem,1.2rem + 2.4vw,3.4rem)}
.hero__titel em{font-size:.62em;line-height:1.18;margin-top:.28em}
.hero__google{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 22px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.9)}
.hero__google a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.hero__google .sterne{color:var(--gold-hell);letter-spacing:1px}
.hero__google small{font-weight:500;font-size:.85rem;color:rgba(255,255,255,.66)}
.hero__liste{grid-template-columns:1fr;row-gap:8px}

/* WhatsApp-Textlink in der Formularkarte */
.qk__wa{margin:12px 4px 0;text-align:center;font-size:.95rem}
.qk__wa a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.feld select{width:100%;padding:12px 14px;border:1.5px solid rgba(14,26,40,.16);border-radius:var(--r-klein);background:#fff;color:var(--text);font:400 1rem/1.4 var(--font-body)}
.feld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,163,59,.25)}
.ort-hinweis{margin:10px 0 0;font-size:.88rem;color:var(--muted)}
.feld input.ist-falsch{border-color:#C0392B}

/* § 35a-Streifen (nur Fenster) */
.steuer{background:var(--paper-2);border-bottom:1px solid var(--linie)}
.steuer__in{display:flex;align-items:center;gap:14px;padding:18px 0;font-size:.98rem;color:var(--ink)}
.steuer__in svg{flex:none;color:var(--gold-d)}
.steuer__in p{margin:0}
.steuer__in small{display:block;color:var(--muted);font-size:.86rem}

/* Bewertungen */
.bew{background:var(--paper)}
.bew__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:32px}
.bew__kopf h2{margin:0}
.bew__score{display:flex;align-items:center;gap:14px;padding:14px 20px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.bew__note{font:500 2.2rem/1 var(--font-display);color:var(--ink)}
.bew__score p{margin:0;font-size:.95rem;line-height:1.4;color:var(--muted)}
.bew__score .sterne{display:block;color:var(--gold-d);letter-spacing:2px;font-size:1.05rem}
.bew__liste{list-style:none;margin:0;padding:4px 2px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.bew__karte{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:24px 22px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.bew__karte .sterne{color:var(--gold-d);letter-spacing:2px}
.bew__karte blockquote{margin:0;flex:1;font-size:1rem;line-height:1.6;color:var(--text)}
.bew__karte footer{font-size:.9rem;color:var(--muted)}
.bew__karte footer b{color:var(--ink)}
.bew__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:10px}
.bew__fuss a{font-weight:700;color:var(--ink)}
.bew__hinweis{margin:0;font-size:.82rem;color:var(--muted);max-width:70ch}

/* Leistungs-Panel ohne Foto (Checkliste statt Bild) */
.lk--ohne-bild .lk__bild{display:grid;place-items:center;background:var(--paper-2)}
.lk__check{list-style:none;margin:0;padding:32px;display:grid;gap:12px;font-weight:600;color:var(--ink)}
.lk__check li{display:flex;gap:10px;align-items:flex-start}
.lk__check svg{flex:none;margin-top:3px;color:var(--gold-d)}
.lk__text ul{margin:14px 0 0;padding-left:1.1em;color:var(--muted)}
.lk__text li{margin:4px 0}

/* Reinigungsplan (Unterhalt) */
.plan{background:#fff}
.plan__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan__karte{padding:28px 26px 30px;background:var(--paper);border-radius:var(--r-karte)}
.plan__karte h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:1.2rem}
.plan__karte h3 svg{color:var(--gold-d)}
.plan__karte ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan__karte li{position:relative;padding-left:26px;color:var(--text)}
.plan__karte li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.4px solid var(--gold-d);border-bottom:2.4px solid var(--gold-d);transform:rotate(-45deg)}
.plan__hinweis{margin:22px 0 0;color:var(--muted);font-size:.95rem}

/* Vorher/Nachher (Fenster) */
.vn-s{background:#fff}
.vn__raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.vn{position:relative;overflow:hidden;border-radius:var(--r-karte);aspect-ratio:600/683;background:var(--paper-2);user-select:none;touch-action:pan-y}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vn__vorher{clip-path:inset(0 calc(100% - var(--vn,50%)) 0 0)}
.vn__linie{position:absolute;top:0;bottom:0;left:var(--vn,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.vn__griff{position:absolute;top:50%;left:var(--vn,50%);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.vn__marke{position:absolute;top:14px;padding:5px 10px;border-radius:999px;background:rgba(14,26,40,.78);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.04em;pointer-events:none}
.vn__marke--l{left:14px}.vn__marke--r{right:14px}
.vn input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vn input[type=range]:focus-visible+.vn__fokus{outline:3px solid var(--gold);outline-offset:3px}
.vn__fokus{position:absolute;inset:0;border-radius:var(--r-karte);pointer-events:none}
.vn__text p{color:var(--muted)}
.vn__text figcaption{margin-top:10px;font-size:.88rem;color:var(--muted)}

/* Kosten-Stellschrauben (ohne Zahlen) */
.schrauben{margin-top:52px;padding:30px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.schrauben__kopf{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.schrauben__kopf h3{margin:0}
.schrauben__kopf p{margin:2px 0 0;color:var(--muted)}
.schrauben__raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.schrauben__raster li{padding:18px;background:var(--paper);border-radius:var(--r-klein)}
.schrauben__raster b{display:block;margin-bottom:10px;color:var(--ink)}
.skala{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.skala i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(212,163,59,.25),var(--gold))}
.schrauben__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:22px}
.schrauben__fuss p{margin:0;color:var(--muted);max-width:62ch}

/* Vergleich: ein Bild statt zwei */
.unt__bilder--eins{grid-template-columns:1fr;max-width:340px;justify-self:center}

/* Einsatzgebiet ohne Karte */
.gebiet-s{background:var(--paper)}
.gebiet--text{grid-template-columns:1fr 1fr;margin-top:0;align-items:start}
.gebiet__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gebiet__chips li{padding:9px 14px;background:#fff;border-radius:999px;box-shadow:var(--schatten);font-weight:600;color:var(--ink)}
.gebiet__chips li.ist-sitz{background:var(--ink);color:#fff}
.gebiet__box{padding:28px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.gebiet__box h3{margin:0 0 12px;font-size:1.2rem}
.gebiet__box p{margin:0 0 10px;color:var(--muted)}

/* WhatsApp-FAB */
.fab{position:fixed;right:18px;bottom:18px;z-index:940;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:999px;background:#25D366;color:#073B1E;font-weight:700;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .15s var(--ease)}
.fab:hover{transform:translateY(-2px)}
.fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
body.kekse-offen .fab{display:none}

/* Pop-up (einmal je Besuch, Regel 20.10.2026) */
.pop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px;background:rgba(9,17,28,.55)}
.pop__karte{position:relative;width:min(440px,100%);padding:30px 26px 26px;background:#fff;border-radius:var(--r-karte);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.pop__karte h2{margin:0 0 10px;font-size:1.55rem;max-width:none;text-align:left}
.pop__karte p{margin:0 0 18px;color:var(--muted)}
.pop__knoepfe{display:grid;gap:10px}
.pop__zu{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.pop__zu:hover{background:var(--paper)}
.btn--wa{background:#25D366;color:#073B1E}

@media (max-width:980px){
  .plan__raster{grid-template-columns:1fr}
  .vn__raster{grid-template-columns:1fr}
  .schrauben__raster{grid-template-columns:1fr 1fr}
  .gebiet--text{grid-template-columns:1fr}
  .bew__liste{grid-auto-columns:minmax(260px,46%)}
}
@media (max-width:700px){
  .kopf__tel--rund{width:auto;padding:0 12px;border-radius:var(--r-klein)}
  .kopf__nr{display:inline}
  .bew__liste{grid-auto-columns:86%}
  .schrauben{padding:22px}
  .schrauben__raster{grid-template-columns:1fr}
  .fab{right:14px;bottom:14px;width:56px;padding:0;justify-content:center}
  .fab span{display:none}
  .fuss{padding-bottom:96px}
  .steuer__in{align-items:flex-start}
  .hero__titel em{font-size:.7em}
}
@media (max-width:380px){
  .kopf__logo img{height:40px;width:auto}
  .kopf__tel--rund{font-size:.85rem;padding:0 9px}
}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}

/* Nachbesserung Messlauf 1 (09.11.2026) */
.pop__karte{box-sizing:border-box;max-width:calc(100vw - 32px)}
.pop__knoepfe .btn{width:100%;justify-content:center;padding-left:14px;padding-right:14px}
.bew__fuss a,.gebiet__box a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:360px){
  .pop__karte{padding:28px 18px 20px}
  .unt__fig figcaption{font-size:.8rem}
  .unt__fig figcaption span{letter-spacing:.02em}
}
@media (max-width:700px){.unt__text{min-width:0}.vgl tr{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.vgl th,.vgl td{overflow-wrap:break-word;hyphens:auto}}
@media (max-width:360px){.unt__fig figcaption{font-size:.7rem;hyphens:auto;overflow-wrap:break-word}.unt__fig figcaption span{font-size:.58rem;letter-spacing:0}}

/* Hero-Bilder je Variante (genau eins lädt) */
html[data-lstg="fenster"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-1170.webp);background-position:62% 30%}
@media (max-width:1000px){html[data-lstg="fenster"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-900.webp)}}
@media (max-width:700px){html[data-lstg="fenster"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-mobil.webp);background-position:55% 30%}}
html[data-lstg="fenster-region"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-1170.webp);background-position:62% 30%}
@media (max-width:1000px){html[data-lstg="fenster-region"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-900.webp)}}
@media (max-width:700px){html[data-lstg="fenster-region"] .hero__bg{background-image:url(../img/hero-fensterreinigung-attendorn-mobil.webp);background-position:55% 30%}}
html[data-lstg="glasdach"] .hero__bg{background-image:url(../img/hero-glasdach-reinigung-1400.webp);background-position:50% 50%}
@media (max-width:1000px){html[data-lstg="glasdach"] .hero__bg{background-image:url(../img/hero-glasdach-reinigung-900.webp)}}
@media (max-width:700px){html[data-lstg="glasdach"] .hero__bg{background-image:url(../img/hero-glasdach-reinigung-mobil.webp);background-position:50% 50%}}