/* =========================================================================
   Steinreinigung Lütteke — Stein- und Terrassenreinigung Münster
   Design-Rezept „Kalkstein & Basalt": warme helle Flächen, tiefes Anthrazit
   als Anker, das Logo-Rot als einziger Akzent, Display-Schrift condensed
   und versal. Gewerk-Textur: Pflasterverband statt Punktraster.
   Kein Framework, keine Library.
   ========================================================================= */

/* --- 1. Schriften (lokal, variable Achsen festgesetzt) ------------------- */
@font-face{
  font-family:'Figtree';src:url('../fonts/figtree-var.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'BricolageCond';src:url('../fonts/bricolage-cond-var.woff2') format('woff2-variations');
  font-weight:500 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 2. Marken-Token ----------------------------------------------------- */
:root{
  /* Logo: Grün #34A936 und Rot #E73D2B. Das Rot ist der Akzent, für Text und
     Knöpfe auf 5,0:1 gegen Weiß gezogen; auf Dunkel die helle Fassung. */
  --rot:#CF3421;
  --rot-tief:#B52A19;
  --rot-hell:#FF8A7A;          /* Akzent auf dunklen Flächen, 7,2:1 auf Basalt */
  --rot-logo:#E73D2B;
  --gruen:#25802B;             /* Haken-Signal, 5,0:1 auf Weiß */
  --gruen-hell:#6BD46F;        /* Haken auf Dunkel */
  --gruen-tief:#1F7025;        /* Grün-Schrift auf grün getönter Fläche, 5,4:1 auf dem Chip-Grund (D2-01) */
  --basalt:#1C1F22;            /* Marken-Dunkel */
  --basalt-2:#262A2E;
  --ink:#1C1F22;
  --text:#454A4F;              /* Fließtext, 8,4:1 auf Weiß */
  --muted:#5A5F64;             /* Nebentext, 6,4:1 */
  --muted-2:#6F757A;           /* nur groß oder als Deko-Text */
  --bg:#FFFFFF;
  --bg-alt:#F8F6F2;            /* Kalkstein, 98 % Helligkeit */
  --bg-alt-2:#F2EFE9;
  --line:#E6E2DA;
  --line-2:#EFECE6;
  --wa:#25D366;
  --wa-ink:#0B2E18;
  --gold:#F0B429;

  /* Radien: Button deutlich eckiger als die Karte */
  --r-btn:10px; --r-klein:14px; --r-karte:20px; --r-gross:26px; --r-pille:999px;

  /* Schatten 1,5–6 %, Karten tragen einen Rand */
  --sh-1:0 1px 2px rgba(28,31,34,.04);
  --sh-2:0 1px 2px rgba(28,31,34,.04),0 14px 32px rgba(28,31,34,.06);
  --sh-3:0 2px 6px rgba(28,31,34,.04),0 28px 60px rgba(28,31,34,.06);

  /* Feder-Kurven, Charakter „solide" */
  --e-kurve:cubic-bezier(.22,.72,.3,1);
  --e-soft:.45s cubic-bezier(.22,.61,.36,1);
  --e-calm:.75s cubic-bezier(.22,.61,.36,1);
  --e-snap:.5s cubic-bezier(.34,1.26,.64,1);

  --wrap:1180px;
  --kopf:78px;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-soft:.45s linear(0,.22 7%,.62 18%,.86 28%,.98 38%,1.02 48%,1 62%,1);
    --e-calm:.75s linear(0,.13 8%,.44 21%,.72 34%,.9 46%,.99 58%,1.01 70%,1);
    --e-snap:.5s linear(0,.28 8%,.74 20%,1.04 34%,1.08 44%,1.01 60%,1);
  }
}

/* --- 3. Grundlagen ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:4px} /* Radius 4: Fokusring, begründete Ausnahme */
/* Auf dunklen Flächen erreicht das Marken-Rot keine 3:1 — dort Weiß */
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) :focus-visible{outline-color:#fff}
.qk:not(.qk--dunkel) :focus-visible{outline-color:var(--rot)}
section[id]{scroll-margin-top:calc(var(--kopf) + 8px)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media (max-width:620px){.wrap{width:min(100% - 1.75rem,var(--wrap))}}
/* Wortgruppe mit Bindestrich zusammenhalten: der Schrift fehlt das geschützte Trennzeichen U+2011 */
.nw{white-space:nowrap}

.sec{position:relative;padding-block:clamp(3.15rem,2.2rem + 4vw,5.5rem)}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--basalt);color:#fff}
.sec--eng{padding-block:clamp(2.4rem,1.8rem + 2.4vw,3.6rem)}

/* --- 4. Typo-Stufen ------------------------------------------------------ */
/* Display: condensed, versal, Gewicht 600 — über die Breitenachse derselben
   Schrift (rgn-display-typografie-condensed). Laufweite 0, padding-top gegen
   Umlaut-Kollision bei enger Zeile. */
.t-display,.t-h2,.t-h3{font-family:'BricolageCond',sans-serif;letter-spacing:0}
.t-display,.t-h2{text-transform:uppercase}
/* H3 in Textkarten (Ablauf, Preise, Fuge) bleibt in Satzschreibung — nur Kachel-H3 im Bild sind versal */
.t-h3{text-transform:none}
.t-display{font-weight:700;font-size:clamp(2.35rem,1.4rem + 4.1vw,3.9rem);line-height:1.02;margin:0;padding-top:.06em}
.t-h2{font-weight:600;font-size:clamp(1.7rem,1.18rem + 2.25vw,2.6rem);line-height:1.06;margin:0 0 .9rem;padding-top:.06em}
.t-h3{font-weight:600;font-size:1.25rem;line-height:1.12;margin:0 0 .5rem;padding-top:.04em}
/* Der Kicker sitzt in der h1 und darf NICHT versal werden — voller Gegen-Scope */
.kicker,.hero__kicker{
  display:block;margin-bottom:.75rem;font-family:'Figtree',sans-serif;text-transform:none;
  font-size:.9375rem;font-weight:600;color:var(--rot);letter-spacing:-.004em;line-height:1.4;padding-top:0;
}
/* Dunkle Flächen dieser Seite — jede Textrollen-Regel läuft gegen genau diese Liste:
   .sec--dark .hero .wa-sek .anfrage .final .fuss .fg--top .pt__weg .qk--dunkel .rkopf
   Helle Inseln darin (.qk ohne --dunkel, .promo, .kekse__c, .wa__preis, .chat__status, .msg) setzen unten zurück. */
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) :is(.kicker,.hero__kicker){color:var(--rot-hell)}
h2 em,h3 em,.t-display em{font-style:normal;display:block}
.hl{color:var(--rot);display:block}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) .hl{color:var(--rot-hell)}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) :is(h2,h3,.t-h2,.t-h3){color:#fff}

@supports (text-wrap:balance){
  .t-display,.t-h2,.t-h3,.hero__sub,.qk__kopf h2,.qk__frage,.btile__txt h3,.lbox__bild h3,.fq__b,
  .e404 h1,.rkopf h1,.bk__k h3,.vgk__kopf b,.pk h3,.fg h3{text-wrap:balance}
}
@supports (text-wrap:pretty){
  p,li,.t-lead,.hero__p{text-wrap:pretty}
}
.t-lead{font-size:1.0625rem;line-height:1.66;color:var(--text);margin:0 0 1.5rem;max-width:44rem}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) .t-lead{color:rgba(255,255,255,.8)}
.kopf{max-width:44rem;margin-bottom:clamp(1.75rem,1.3rem + 1.6vw,2.6rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .t-lead{margin-inline:auto}

/* --- 5. Gewerk-Textur und Deko ------------------------------------------- */
/* Pflasterverband: zwei versetzte Steinreihen als leises Linienraster */
.tex-pflaster{position:relative;isolation:isolate;overflow:hidden}
.tex-pflaster::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/muster-pflaster.svg");background-size:160px 80px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,transparent);
}
.tex-pflaster.sec--dark::before{filter:invert(1);opacity:.5}
.deko-glow{position:relative;overflow:hidden;isolation:isolate}
.deko-glow::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(46vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(207,52,33,.09),transparent 68%);
}
.deko-glow--tr::after{top:-16%;right:-10%}
.deko-glow--bl::after{bottom:-20%;left:-12%}
/* Logo-Wasserzeichen: nur die beiden Bänder, angeschnitten am Rand */
.wz{position:relative;overflow:hidden;isolation:isolate}
.wz::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-9%;top:50%;transform:translateY(-50%) rotate(-6deg);
  width:min(54vw,760px);aspect-ratio:499/148;
  background:url("../img/wasserzeichen.png") center/contain no-repeat;opacity:.05;
}
.sec--dark.wz::before{opacity:.07;filter:brightness(0) invert(1)}
@media (max-width:900px){.wz::before{width:min(88vw,440px);right:-24%;opacity:.045}}

/* --- 6. Knöpfe (nie zweizeilig, kein Schatten außer farbigem Schein) ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem clamp(.9rem,.65rem + .9vw,1.35rem);
  border-radius:var(--r-btn);border:1px solid transparent;
  font-size:clamp(.84rem,.72rem + .38vw,.9375rem);
  font-weight:600;letter-spacing:-.006em;cursor:pointer;
  transition:background var(--e-soft),color var(--e-soft),border-color var(--e-soft),transform var(--e-snap);
  text-align:center;line-height:1.25;white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1rem clamp(1rem,.7rem + 1.2vw,1.6rem);font-size:clamp(.875rem,.76rem + .42vw,1rem)}
@media (max-width:359px){.btn--lg{padding-inline:.75rem;font-size:.8125rem}}
.btn--voll{width:100%}
.btn--p{background:var(--rot);color:#fff;box-shadow:0 8px 20px rgba(207,52,33,.06)}
.btn--p:hover{background:var(--rot-tief)}
/* Geist-Knopf: Grundfassung dunkel auf hell. Dunkle Flächen drehen auf Weiß,
   helle Inseln darin (Quiz-Karte, Pop-up) drehen wieder zurück. */
.btn--geist{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--geist:hover{border-color:var(--rot);color:var(--rot)}
.btn--klar{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--klar:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 8px 20px rgba(37,211,102,.06)}
.btn--wa:hover{background:#1FBE5B}
.btn--hell{background:#fff;color:var(--basalt)}
.btn--hell:hover{background:var(--bg-alt)}

/* --- 7. Haken-Listen ----------------------------------------------------- */
.checks{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem}
.checks li{position:relative;padding-left:1.85rem;font-size:.9375rem;line-height:1.55;color:var(--text)}
.checks li::before{
  content:"";position:absolute;left:0;top:.3em;width:1.15rem;height:1.15rem;border-radius:50%;
  background-color:var(--gruen);
  -webkit-mask:url("../img/i-check.svg") center/.72rem no-repeat;mask:url("../img/i-check.svg") center/.72rem no-repeat;
}
.checks li b,.checks li strong{color:var(--ink);font-weight:600}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) .checks li{color:rgba(255,255,255,.8)}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) .checks li b{color:#fff}
:is(.sec--dark,.hero,.wa-sek,.anfrage,.final,.fuss,.fg--top,.pt__weg,.qk--dunkel,.rkopf) .checks li::before{background-color:var(--gruen-hell)}
.hk{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;
  background:rgba(107,212,111,.18);color:var(--gruen-hell);flex:none}
.hk svg{width:.72rem;height:.72rem}

/* --- 8. Reveal (Animation, nicht Transition) ----------------------------- */
[data-rv]{opacity:0}
[data-rv].is-da{
  animation-name:rvRein;animation-duration:var(--rv-dauer,.72s);
  animation-timing-function:var(--e-kurve);animation-fill-mode:both;
  animation-delay:calc(var(--rv-d,0) * 150ms);
}
@keyframes rvRein{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
@media (max-width:620px){@keyframes rvRein{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}}
.bild-fade{opacity:0;transition:opacity .55s var(--e-kurve)}
.bild-fade.is-da{opacity:1}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;translate:none}
  [data-rv].is-da{animation-name:none}
  .bild-fade{opacity:1}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* Laufbänder: keine Animation, dafür horizontal scrollbar (JS klont dann nicht) */
  .lauf{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .lauf__spur{animation:none!important;transform:none!important;width:max-content}
  .lauf__spur > *{scroll-snap-align:start}
}

/* --- 9. Kopfzeile -------------------------------------------------------- */
.kopfz{
  position:fixed;inset:0 0 auto;z-index:900;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--e-soft),border-color var(--e-soft),box-shadow var(--e-soft);
}
.kopfz__in{display:flex;align-items:center;gap:1.5rem;height:var(--kopf)}
.kopfz__logo{display:flex;align-items:center;margin-right:auto;padding:0;border-radius:var(--r-btn);
  background:transparent;transition:background var(--e-soft),padding var(--e-soft)}
.kopfz__logo img{height:44px;width:auto;max-width:none;transition:height var(--e-soft)}
.kopfz__nav{display:flex;gap:1.6rem}
.kopfz__nav a{font-size:.9375rem;font-weight:500;color:#fff;opacity:.92;transition:opacity var(--e-soft),color var(--e-soft)}
.kopfz__nav a:hover{opacity:1}
.kopfz__tel{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap}
.kopfz__tel svg{width:16px;height:16px}
.kopfz__mob{display:none;gap:.4rem}
.kopfz__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);
  background:#fff;color:var(--ink);border:1px solid rgba(28,31,34,.08);box-shadow:0 2px 10px rgba(20,22,24,.06)}
.kopfz__ic svg{width:18px;height:18px}
.kopfz__ic--wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}

.kopfz.is-scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.kopfz.is-scrolled .kopfz__in{height:66px}
.kopfz.is-scrolled .kopfz__logo{background:transparent;padding:0}
.kopfz.is-scrolled .kopfz__logo img{height:38px}
.kopfz.is-scrolled .kopfz__nav a,.kopfz.is-scrolled .kopfz__tel{color:var(--ink)}
.kopfz.is-scrolled .kopfz__ic{background:var(--bg-alt);color:var(--ink);border-color:var(--line);backdrop-filter:none}
.kopfz.is-scrolled .kopfz__ic--wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}
@media (max-width:980px){
  .kopfz__nav,.kopfz__tel{display:none}
  .kopfz__mob{display:flex;flex:none}
  .kopfz .btn--p{display:none}
  .kopfz__in{gap:.6rem}
  /* Logo gibt nach, wenn vier Knöpfe nicht mehr daneben passen (320–375 px); ab 390 px wie bisher */
  .kopfz__logo{flex:0 1 148px;min-width:0;display:flex;align-items:center;min-height:44px}
  .kopfz__logo img,.kopfz.is-scrolled .kopfz__logo img{width:100%;height:auto;max-width:none}
  .kopfz.is-scrolled .kopfz__logo{flex-basis:128px}
}

/* --- 9b. Mobilmenü (unter 980 px) ------------------------------------------ */
/* Knopf mit drei Strichen rechts neben Telefon, WhatsApp, Mail; Panel weiß unter dem Kopf,
   „Jetzt anfragen“ als roter Knopf am Ende. Desktop unverändert. */
.kopfz__burger{display:none;padding:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.burger{position:relative;display:block;width:18px;height:14px}
.burger i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),opacity .15s linear}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}
.kopfz__burger[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.kopfz__burger[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.kopfz__burger[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menue,.menue__grund{display:none}
/* Scroll-Sperre am html: body{overflow:hidden} greift nicht, weil html overflow-x:clip trägt */
html.menue-auf{overflow:hidden}
@media (max-width:980px){
  .kopfz__burger{display:grid}
  .menue__grund:not([hidden]){display:block;position:fixed;inset:0;z-index:890;background:rgba(20,22,24,.45);touch-action:none}
  .menue:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:895;
    top:calc(var(--menue-top,67px) + 8px);left:auto;right:1.25rem;width:min(24rem,100% - 2.5rem);
    max-height:calc(100dvh - var(--menue-top,67px) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;
    padding:.4rem 1.1rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);
    box-shadow:0 30px 80px -30px rgba(16,20,30,.45),0 6px 18px rgba(20,22,24,.12);
    animation:menueRein .16s cubic-bezier(.22,.61,.36,1) both}
  .menue a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;
    padding:.2rem .15rem;border-bottom:1px solid var(--line);font-size:1.0625rem;font-weight:600;color:var(--ink)}
  .menue a:not(.btn) svg{width:16px;height:16px;flex:none;color:var(--muted)}
  .menue a:not(.btn):hover{color:var(--rot)}
  .menue__cta{margin-top:1.1rem;width:100%;min-height:50px;font-size:1rem}
  body.menue-auf .fab{opacity:0;visibility:hidden;pointer-events:none}
}
@media (max-width:620px){.menue:not([hidden]){left:.875rem;right:.875rem;width:auto}}
@keyframes menueRein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menue:not([hidden]){animation:none}.burger i{transition:none}}

/* --- 10. Hero (Variante B: Vollbild + Overlay, links Text, rechts Quiz) --- */
.hero{position:relative;isolation:isolate;padding-top:calc(var(--kopf) + 2.2rem);padding-bottom:clamp(3rem,2rem + 3vw,4.75rem);overflow:clip}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
/* Verlauf von der Textseite: links satt, rechts luftiger (dort sitzt die weiße Karte) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(98deg,rgba(20,22,24,.93) 0%,rgba(20,22,24,.84) 36%,rgba(20,22,24,.55) 70%,rgba(20,22,24,.45) 100%);
}
@media (max-width:980px){
  .hero::before{background:linear-gradient(180deg,rgba(20,22,24,.82),rgba(20,22,24,.74) 60%,rgba(20,22,24,.88))}
  .hero__bg img{object-position:62% 40%}
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr);gap:clamp(2rem,1rem + 3.5vw,4rem);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}}
.hero__txt{color:#fff;max-width:37rem}
.hero__kicker{margin-bottom:.9rem;font-size:clamp(.84rem,.62rem + .9vw,.9375rem)}
.hero h1{margin:0}
.hero__sub{
  font-family:'BricolageCond',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(2.35rem,1.4rem + 4.1vw,3.9rem);line-height:1.0;margin:0 0 1.05rem;padding-top:.06em;color:#fff;
}
.hero__sub .hl{color:var(--rot-hell);display:block}
/* Unterstrich unter dem Schlüsselwort der weißen Zeile: Pinselstrich, zeichnet einmal */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:-.02em;right:-.02em;top:calc(100% - .02em);height:.16em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1 6C25 3 60 2 99 3.5' fill='none' stroke='%23FF8A7A' stroke-width='3.2' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:ulZeichnen .9s var(--e-kurve) .55s forwards}
@keyframes ulZeichnen{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.ul::after{clip-path:none;animation:none}}
.hero__p{font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.82);margin:0 0 1.35rem;max-width:31rem}
.hero__bul{list-style:none;margin:0 0 1.35rem;padding:0;display:grid;gap:.68rem}
.hero__bul li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem;line-height:1.45;color:rgba(255,255,255,.9)}
.hero__bul b{color:#fff;font-weight:600}
.hero__sterne{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;font-size:.875rem;color:rgba(255,255,255,.86);flex-wrap:wrap}
.hero__sterne a{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hero__sterne a:hover{text-decoration:underline;text-underline-offset:3px}
.sterne{color:var(--gold);letter-spacing:.06em;font-size:.9375rem}
.hero__sterne img{width:17px;height:17px}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
@media (max-width:560px){
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}

/* --- 11. Quiz-Karte (helle Insel — voller Gegen-Scope) ------------------- */
.qk{
  position:relative;background:#fff;color:var(--ink);border-radius:var(--r-gross);
  box-shadow:0 4px 10px rgba(20,22,24,.08),0 30px 70px rgba(20,22,24,.28);
  padding:1.6rem 1.5rem 1.25rem;max-width:480px;width:100%;margin-inline:auto;overflow:visible;
}
.qk__kopf{margin-bottom:1rem;padding-right:4.6rem}
.ovl__c .qk__kopf{padding-right:2.75rem}
.qk__kopf h2{font-family:'BricolageCond',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.2rem,1rem + .8vw,1.4rem);line-height:1.08;margin:0 0 .3rem;padding-top:.04em;color:var(--basalt)}
.qk__kopf p{margin:0;font-size:.8125rem;color:var(--muted);line-height:1.5}
/* Aktions-Störer: rund, schräg, halb über der Ecke */
.sticker{
  position:absolute;top:-26px;right:-22px;z-index:4;width:6.5rem;height:6.5rem;border-radius:50%;padding-bottom:.2rem;
  display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 32% 28%,#E9422F,var(--rot) 48%);color:#fff;transform:rotate(11deg);
  box-shadow:0 6px 16px rgba(20,22,24,.06),0 18px 38px rgba(207,52,33,.06);border:2px solid rgba(255,255,255,.92);
}
.sticker b{display:block;font-family:'BricolageCond',sans-serif;font-size:1.75rem;font-weight:700;line-height:1;color:#fff}
.sticker span{display:block;margin-top:.15rem;font-size:.5625rem;font-weight:700;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:#fff}
.sticker span + span{margin-top:0}
@media (max-width:560px){.sticker{width:6rem;height:6rem;top:-22px;right:-10px}.sticker b{font-size:1.45rem}.sticker span{font-size:.53rem}}

.qk__fort{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.qk__bar{flex:1;height:5px;border-radius:var(--r-pille);background:var(--line);overflow:hidden}
.qk__bar i{display:block;height:100%;border-radius:var(--r-pille);background:var(--rot);width:25%;transition:width var(--e-calm)}
.qk__fort span{font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap}
.qk__fort b{color:var(--rot-tief);font-weight:700}
.qk__schritt{display:none}
.qk__schritt.is-an{display:block;animation:qkRein .4s var(--e-soft) both}
@keyframes qkRein{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.qk__frage{font-size:.9375rem;font-weight:600;color:var(--basalt);margin:0 0 .8rem;line-height:1.35}
.qk__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-bottom:.9rem}
@media (max-width:400px){.qk__opts{grid-template-columns:minmax(0,1fr)}}
.qk__opt{
  display:flex;align-items:center;gap:.6rem;min-height:46px;padding:.7rem .8rem;text-align:left;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-klein);
  font-size:.8125rem;font-weight:500;line-height:1.32;color:var(--ink);cursor:pointer;
  transition:border-color var(--e-soft),background var(--e-soft),transform var(--e-snap);
}
.qk__opt:hover{border-color:var(--rot);background:#fff;transform:translateY(-1px)}
.qk__opt.is-gewaehlt{border-color:var(--rot);background:rgba(207,52,33,.06);box-shadow:inset 0 0 0 1px var(--rot)}
.qk__opt svg{width:19px;height:19px;color:var(--rot);flex:none}
.qk__feld{display:grid;gap:.55rem;margin-bottom:.9rem}
.qk__feld input,.qk__feld textarea{
  width:100%;padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--bg-alt);font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color var(--e-soft),background var(--e-soft);
}
.qk__feld input:focus,.qk__feld textarea:focus{outline:none;border-color:var(--rot);background:#fff}
.qk__feld textarea{min-height:74px;resize:vertical}
.qk__feld input::placeholder,.qk__feld textarea::placeholder{color:var(--muted-2)}
.qk__dsgvo{display:flex;gap:.6rem;align-items:flex-start;font-size:.75rem;line-height:1.45;color:var(--muted);margin-bottom:.85rem}
.qk__dsgvo input{margin-top:.18rem;width:15px;height:15px;accent-color:var(--rot);flex:none}
.qk__dsgvo a{color:var(--rot);text-decoration:underline}
.qk__nav{display:flex;gap:.55rem}
.qk__zurueck{background:none;border:none;padding:.55rem .2rem;font-size:.8125rem;font-weight:600;color:var(--muted);cursor:pointer}
.qk__zurueck:hover{color:var(--rot)}
.qk__trust{margin:.95rem 0 0;text-align:center;font-size:.8125rem;font-weight:600;color:var(--muted)}
.qk__goog{margin-top:.7rem;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.8125rem;color:var(--muted)}
.qk__goog img{width:17px;height:17px}
.qk__goog b{color:var(--ink);font-weight:700}
.qk__goog .sterne{letter-spacing:.06em;font-size:.875rem}
.qk__ok{display:none;text-align:center;padding:1.5rem .5rem}
.qk__ok.is-an{display:block;animation:qkRein .45s var(--e-soft) both}
.qk__ok .hk{width:3rem;height:3rem;background:rgba(37,128,43,.12);color:var(--gruen);margin:0 auto .8rem}
.qk__ok .hk svg{width:1.4rem;height:1.4rem}
.qk__ok h3{font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.3rem;margin:0 0 .4rem;color:var(--basalt)}
.qk__ok p{margin:0;font-size:.875rem;color:var(--text);line-height:1.6}
.qk__fehler{margin:.5rem 0 0;font-size:.8125rem;color:var(--rot);display:none}
.qk__fehler.is-an{display:block}
.qk [hidden]{display:none!important}
/* Quiz-Instanz auf dunklem Grund (Anfrage-Sektion) */
.qk--dunkel{background:var(--basalt-2);color:#fff;box-shadow:var(--sh-3)}
.qk--dunkel .qk__kopf h2,.qk--dunkel .qk__frage,.qk--dunkel .qk__ok h3{color:#fff}
.qk--dunkel .qk__kopf p,.qk--dunkel .qk__trust,.qk--dunkel .qk__ok p{color:rgba(255,255,255,.7)}
.qk--dunkel .qk__opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.qk--dunkel .qk__opt:hover{border-color:var(--rot-hell);background:rgba(255,255,255,.1)}
.qk--dunkel .qk__opt.is-gewaehlt{background:rgba(255,138,122,.14);border-color:var(--rot-hell);box-shadow:inset 0 0 0 1px var(--rot-hell)}
.qk--dunkel .qk__opt svg{color:var(--rot-hell)}
.qk--dunkel .qk__feld input,.qk--dunkel .qk__feld textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.qk--dunkel .qk__feld input::placeholder,.qk--dunkel .qk__feld textarea::placeholder{color:rgba(255,255,255,.5)}
.qk--dunkel .qk__dsgvo{color:rgba(255,255,255,.7)}
.qk--dunkel .qk__dsgvo a{color:var(--rot-hell)}
.qk--dunkel .qk__bar{background:rgba(255,255,255,.16)}
.qk--dunkel .qk__bar i{background:var(--rot-hell)}
.qk--dunkel .qk__fort span{color:rgba(255,255,255,.66)}
.qk--dunkel .qk__fort b{color:var(--rot-hell)}
.qk--dunkel .qk__goog{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.qk--dunkel .qk__goog b{color:#fff}
.qk--dunkel .qk__zurueck{color:rgba(255,255,255,.66)}
.qk--dunkel .qk__ok .hk{background:rgba(107,212,111,.16);color:var(--gruen-hell)}
.qk--dunkel .btn--geist{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}

/* Helle Insel .qk im Hero: Rück-Scope für alle Textrollen, die von der dunklen Fläche erben könnten */
.qk:not(.qk--dunkel) :is(.kicker,.hl){color:var(--rot)}
.qk:not(.qk--dunkel) :is(h2,h3,.t-h2,.t-h3){color:var(--basalt)}
.qk:not(.qk--dunkel) :is(.t-lead,p,li,.checks li){color:var(--text)}
.qk:not(.qk--dunkel) .checks li b{color:var(--ink)}
.qk:not(.qk--dunkel) .checks li::before{background-color:var(--gruen)}
.qk:not(.qk--dunkel) .qk__kopf p{color:var(--muted)}
.qk:not(.qk--dunkel) .qk__fehler{color:var(--rot)}
.promo :is(.kicker,.hl){color:var(--rot)} .promo :is(h2,h3,p,li){color:var(--ink)} .promo p{color:var(--text)}
.kekse__c :is(h2,h3){color:var(--ink)} .kekse__c :is(p,li){color:var(--text)}
.wa__preis :is(b,span){color:var(--ink)} .chat__status :is(b,span){color:var(--ink)}

/* --- 12. Bewertungs-Band ------------------------------------------------- */
.bew__pille{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 auto 1.5rem;
  padding:.6rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pille);
  box-shadow:var(--sh-1);font-size:.9375rem;color:var(--ink);
}
.bew__pille img{width:19px;height:19px}
.bew__pille b{font-weight:700;font-size:1.05rem}
.bew__pille .sterne{font-size:.9375rem}
.bew__pille > span:last-child{color:var(--muted);font-size:.8125rem}
.lauf{position:relative;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lauf__spur{display:flex;gap:1rem;width:max-content;align-items:stretch;animation:lauf 60s linear infinite;will-change:transform}
.lauf:hover .lauf__spur{animation-play-state:paused}
/* Wischbetrieb: erste Berührung friert die Animation ein (JS setzt .is-hand), danach echtes Scrollen */
.lauf.is-hand{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lauf.is-hand::-webkit-scrollbar{display:none}
.lauf.is-hand .lauf__spur{animation-play-state:paused!important}
.lauf.is-hand .lauf__spur > *{scroll-snap-align:start}
/* Hinweis zur Herkunft der Bewertungen (§ 5b Abs. 3 UWG), Handy und PC */
.bew__hinweis{max-width:46rem;margin:1.1rem auto 0;padding-inline:1.25rem;text-align:center;font-size:.8125rem;line-height:1.55;color:var(--muted)}
.bew__hinweis a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.bew__hinweis a:hover{color:var(--rot-tief)}
/* Hinweis, dass die Karten von Hand weitergehen — nur auf schmalen Geräten */
.lauf__tipp{display:none}
@media (max-width:900px){
  .lauf__tipp{display:flex;align-items:center;justify-content:center;gap:.45rem;
    margin:.9rem auto 0;color:var(--text-leise,#5A5F64);font-size:.8125rem;letter-spacing:.01em;
    transition:opacity var(--e-soft,.45s ease),visibility 0s linear .45s}
  .lauf__tipp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.75}
  .lauf__tipp svg:first-child{animation:tippL 2.4s ease-in-out infinite}
  .lauf__tipp svg:last-child{animation:tippR 2.4s ease-in-out infinite}
  .lauf__tipp.is-weg{opacity:0;visibility:hidden}
}
@keyframes tippL{0%,100%{transform:none}50%{transform:translateX(-3px)}}
@keyframes tippR{0%,100%{transform:none}50%{transform:translateX(3px)}}
@keyframes lauf{to{transform:translateX(-50%)}}
.lauf--r .lauf__spur{animation-name:laufR}
@keyframes laufR{from{transform:translateX(-50%)}to{transform:none}}
/* Karte: Zitat groß, darunter Haarlinie, Name in Display-Schrift — keine Zufallsfarben */
.bewk{flex:none;width:min(78vw,340px);background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);
  padding:1.3rem 1.35rem 1.15rem;display:flex;flex-direction:column;gap:.7rem}
.bewk__st{color:var(--gold);letter-spacing:.08em;font-size:.9375rem;line-height:1}
.bewk__t{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink);flex:1}
.bewk__f{display:flex;align-items:center;gap:.6rem;padding-top:.75rem;border-top:1px solid var(--line-2)}
.bewk__n{flex:1;min-width:0}
.bewk__n b{display:block;font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;line-height:1.2}
.bewk__n > span{display:block;font-size:.6875rem;color:var(--muted);margin-top:.1rem}
.bewk__g{width:16px;height:16px;flex:none}

/* --- 13. Leistungs-Boxen (Foto, H3 im Bild, Text, genau 3 Haken) --------- */
.gitter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.gitter-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.gitter-3{grid-template-columns:minmax(0,1fr);gap:24px}}
.lbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--e-soft),box-shadow var(--e-soft),translate var(--e-soft)}
.lbox:hover{border-color:#DCD6CB;box-shadow:var(--sh-2);translate:0 -2px}
.lbox__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.lbox__bild img{width:100%;height:100%;object-fit:cover;transition:transform var(--e-calm)}
.lbox:hover .lbox__bild img{transform:scale(1.045)}
.lbox__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(20,22,24,.55) 100%)}
.lbox__bild h3{position:absolute;left:1.1rem;right:1.1rem;bottom:.85rem;z-index:1;margin:0;color:#fff;
  font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:1.3rem;line-height:1.05;
  text-shadow:0 1px 2px rgba(20,22,24,.55),0 1px 12px rgba(20,22,24,.45)}
.lbox__txt{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.lbox__txt p{margin:0 0 .9rem;font-size:.875rem;line-height:1.62;color:var(--text)}
.lbox .checks{margin:auto 0 0;gap:.45rem}
.lbox .checks li{font-size:.8125rem;padding-left:1.6rem}
.lbox .checks li::before{width:1rem;height:1rem;mask-size:.62rem;-webkit-mask-size:.62rem}

/* --- 14. WhatsApp-Sektion (dunkel mit Foto hinter starker Überlagerung) -- */
.wa-sek{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.wa-sek__bg{position:absolute;inset:0;z-index:-2}
.wa-sek__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.wa-sek::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(94deg,rgba(20,22,24,.74),rgba(20,22,24,.88) 42%,rgba(20,22,24,.95)),
  linear-gradient(180deg,rgba(20,22,24,.55),rgba(20,22,24,.25) 34%,rgba(20,22,24,.7))}
@media (max-width:900px){.wa-sek::after{background:linear-gradient(180deg,rgba(20,22,24,.8),rgba(20,22,24,.93))}}
.wa-sek .t-lead{color:rgba(255,255,255,.8)}
.wa{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:900px){.wa{grid-template-columns:minmax(0,1fr);gap:2.5rem}.wa__stage{order:-1}}
.wa__stage{position:relative;display:flex;justify-content:center;padding-block:1rem}
/* Gerät: helles Gehäuse, Displayblende, Systemleiste — auf Dunkel trägt nur der helle Rand */
/* Ausnahme Radius-Set: WhatsApp-Gerätenachbau (46/36 Gerät, 12 Blase, 8 Foto) — Nachbau eines Geräts, kein UI-Element */
.phone{position:relative;width:min(100%,340px);border-radius:46px;padding:10px;
  background:linear-gradient(152deg,#FFF,#EDE8E2,#FDFCFB,#DAD3CB,#F8F6F3);
  box-shadow:0 0 0 1px rgba(255,255,255,.34),0 10px 26px rgba(0,0,0,.35),0 40px 80px rgba(0,0,0,.4)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#D6D0C8}
.phone::before{left:-3px;top:110px;height:46px;box-shadow:0 58px 0 0 #D6D0C8}
.phone::after{right:-3px;top:150px;height:68px}
.phone__in{border-radius:36px;overflow:hidden;background:#ECE5DD;display:flex;flex-direction:column;border:2px solid #17130F;position:relative}
.phone__sys{display:flex;align-items:center;justify-content:space-between;padding:.55rem .95rem .3rem;background:#075E54;color:#fff;font-size:.6875rem;font-weight:600}
.phone__insel{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:76px;height:19px;border-radius:12px;background:#0B0907;z-index:3}
.phone__sys svg{width:12px;height:12px;margin-left:.25rem;vertical-align:-2px}
.chat__head{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem .6rem;background:#075E54;color:#fff}
.chat__av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:#fff;display:grid;place-items:center}
.chat__av img{width:100%;height:100%;object-fit:cover}
.chat__head b{display:block;font-size:.8125rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.chat__head em{display:block;font-style:normal;font-size:.6875rem;color:rgba(255,255,255,.78)}
.chat__head svg{width:16px;height:16px;margin-left:auto;color:#fff}
.chat__body{background:#ECE5DD;height:clamp(318px,31vw,424px);overflow:hidden;
  background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.2px);background-size:14px 14px}
.chat__flow{padding:.85rem .8rem 1rem;display:grid;gap:.5rem;align-content:start;transition:transform .55s var(--e-soft);will-change:transform}
.chat__tag{justify-self:center;padding:.2rem .6rem;border-radius:var(--r-pille);background:rgba(255,255,255,.8);font-size:.625rem;font-weight:600;color:#54656F}
.msg{max-width:85%;padding:.55rem .7rem;border-radius:12px;font-size:.75rem;line-height:1.5;position:relative;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(7px);transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
.msg.is-da{opacity:1;transform:none}
.wa__stage.is-schritt .msg:not(.is-da){display:none}
.msg--in{justify-self:start;background:#fff;border-top-left-radius:4px}
.msg--out{justify-self:end;background:#D9FDD3;border-top-right-radius:4px}
.msg time{display:block;margin-top:.2rem;font-size:.5625rem;color:#667781;text-align:right}
.msg--out time::after{content:" ✓✓";color:#53BDEB}
.msg b{font-weight:700}
.msg__foto{display:block;width:100%;border-radius:8px;margin-bottom:.35rem;aspect-ratio:4/3;object-fit:cover}
.chat__status{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;background:#fff;border-top:1px solid #E4E0D8;opacity:0;transform:translateY(6px)}
.wa__stage.is-in .chat__status{animation:waRein .5s var(--e-soft) forwards;animation-delay:calc(.3s + var(--i) * 1.45s)}
.chat__haken{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(37,128,43,.14);color:var(--gruen);flex:none}
.chat__haken svg{width:13px;height:13px}
.chat__status > span:last-child{flex:1;min-width:0}
.chat__status b{display:block;font-size:.75rem;font-weight:600;line-height:1.3;color:var(--ink)}
.chat__status b + span{display:block;font-size:.6875rem;line-height:1.35;color:var(--muted)}
@keyframes waRein{to{opacity:1;transform:none}}
.chat__foot{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem .4rem;background:#F0F2F5}
.chat__bar{flex:1;height:30px;border-radius:var(--r-pille);background:#fff;border:1px solid #E4E0D8;display:flex;align-items:center;padding-left:.7rem;font-size:.6875rem;color:#8696A0}
.chat__send{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#00A884;color:#fff;flex:none}
.chat__send svg{width:14px;height:14px}
.phone__home{width:96px;height:4px;border-radius:2px;background:#111;margin:.35rem auto .3rem}
.wa__preis{position:absolute;top:-18px;right:-26px;z-index:4;padding:.7rem .95rem;border-radius:var(--r-klein);
  background:#fff;color:var(--ink);box-shadow:0 14px 32px rgba(0,0,0,.35);opacity:0;transform:translateY(8px) scale(.96)}
.wa__stage.is-in .wa__preis{animation:waRein .55s var(--e-snap) forwards;animation-delay:calc(.3s + var(--i) * 1.45s)}
.wa__preis b{display:block;font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.15rem;font-weight:700;line-height:1;color:var(--rot)}
.wa__preis span{display:flex;align-items:center;gap:.3rem;margin-top:.2rem;font-size:.6875rem;color:var(--muted);white-space:nowrap}
.wa__preis svg{width:11px;height:11px;color:var(--gruen)}
@media (max-width:400px){.wa__preis{right:-4px;top:-46px}}
.wa__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.wa__cta{flex-direction:column}.wa__cta .btn{width:100%}}

/* --- 15. Vorteile: Bento aus Fotokacheln --------------------------------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:252px;gap:12px}
.btile{position:relative;isolation:isolate;display:flex;align-items:flex-end;border-radius:var(--r-karte);overflow:hidden;background:var(--basalt-2)}
.btile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-calm)}
.btile:hover img{transform:scale(1.04)}
.btile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,22,24,.10) 0%,rgba(20,22,24,.34) 42%,rgba(20,22,24,.86) 100%)}
.btile--text::after{background:linear-gradient(180deg,rgba(20,22,24,.72) 0%,rgba(20,22,24,.84) 55%,rgba(20,22,24,.94) 100%)}
.btile__txt{position:relative;z-index:2;padding:1.15rem 1.25rem;color:#fff;text-shadow:0 1px 12px rgba(20,22,24,.35)}
.btile__txt h3{margin:0 0 .34rem;font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:1.22rem;line-height:1.06}
.btile__txt p{margin:0;font-size:.8125rem;line-height:1.55;color:rgba(255,255,255,.84)}
.btile__checks{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}
.btile__checks li{position:relative;padding-left:1.5rem;font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.9)}
.btile__checks li::before{content:"";position:absolute;left:0;top:.18em;width:1rem;height:1rem;border-radius:50%;background:var(--gruen-hell);
  -webkit-mask:url("../img/i-check.svg") center/.62rem no-repeat;mask:url("../img/i-check.svg") center/.62rem no-repeat}
.btile--stat{background:var(--basalt);align-items:stretch}
.btile--stat::after{content:none}
.btile__stat{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:100%;padding:1.15rem 1.25rem;color:#fff}
.btile--stat img{position:static;inset:auto;width:auto;max-width:150px;height:auto;object-fit:contain;background:#fff;padding:.35rem .5rem;border-radius:var(--r-klein);transform:none}
.btile--stat:hover img{transform:none}
.btile__zahl{display:block;font-family:'BricolageCond',sans-serif;font-weight:700;font-size:2.7rem;line-height:.95;letter-spacing:0;text-transform:uppercase;color:var(--rot-hell);margin-bottom:.25rem}
.btile__stat h3{margin:0 0 .3rem;font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:1.22rem;line-height:1.06}
.btile__stat p{margin:0;font-size:.8125rem;line-height:1.55;color:rgba(255,255,255,.84)}
.btile--gross{grid-column:span 2;grid-row:span 2}
.btile--gross .btile__txt{padding:1.4rem 1.5rem}
.btile--gross .btile__txt h3{font-size:1.65rem}
.btile--gross .btile__txt p{font-size:.9375rem}
.btile--hoch{grid-row:span 2}
.btile--breit{grid-column:span 2}
.btile--klein .btile__txt{padding:1rem 1.05rem}
.btile--klein .btile__txt h3{font-size:1.08rem}
.btile--klein .btile__txt p{font-size:.75rem}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:232px}
  .btile--gross,.btile--breit{grid-column:span 2}
  .btile--hoch{grid-row:auto}
}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .btile{min-height:300px}
  .btile--gross{min-height:360px}
  .btile--gross,.btile--breit,.btile--hoch{grid-column:auto;grid-row:auto}
}

/* --- 16. Über uns: Porträt ragt über die Sektionskante ------------------- */
.ueber{position:relative;overflow:visible;overflow-x:clip}
.ueber__in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,1rem + 4vw,4rem);align-items:end}
.ueber__copy{position:relative;z-index:2;padding-bottom:1rem}
.ueber__fakten{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem}
.ueber__fakten li{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-klein)}
.ueber__fakten b{display:block;font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.15rem;font-weight:600;line-height:1.05;color:var(--rot)}
.ueber__fakten span{font-size:.875rem;color:var(--text);line-height:1.5}
.ueber__fakten svg{width:22px;height:22px;color:var(--rot);flex:none;margin-top:.15rem}
.ueber__bild{position:relative;z-index:1;align-self:end}
.ueber__bild::before{content:"";position:absolute;left:10%;right:10%;bottom:-3%;height:12%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(20,22,24,.16),transparent 70%);filter:blur(10px);z-index:0}
.ueber__form{position:absolute;right:4%;bottom:0;width:78%;aspect-ratio:1;border-radius:50%;background:var(--bg-alt-2);z-index:0}
.ueber__bild img{position:relative;z-index:1;width:min(100%,400px);margin:-22% auto 0;display:block;border-radius:var(--r-gross);
  border:6px solid #fff;box-shadow:var(--sh-3)}
@media (max-width:900px){
  .ueber__in{grid-template-columns:minmax(0,1fr)}
  .ueber__bild img{margin-top:0;width:min(100%,360px)}
  .ueber__form{width:70%}
}

/* --- 17. Belag-Check (Gewerk-Sektion) -----------------------------------
   Bauart (B1/R8): Belag-Wahl als Pillen-Leiste (Tablist) → je Belag ein echter
   Vorher/Nachher-Regler als Bühne → Befund-Karte mit Empfindlichkeits-Skala und
   „Danach"-Chips. Keine Muster-Kacheln, kein Bild-Crossfade, keine dt/dd-Bühne. */
.bk__kopf{max-width:44rem;margin-bottom:1.4rem}
.bk__kopf .t-lead{margin-bottom:0}
.bk__pillen{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.bk__pille{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.35rem 1rem .35rem .4rem;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pille);color:var(--ink);text-align:left;
  transition:background var(--e-soft),border-color var(--e-soft),color var(--e-soft),transform var(--e-snap)}
.bk__pille:hover{border-color:#CFC8BC;transform:translateY(-1px)}
.bk__pille.is-an{background:var(--basalt);border-color:var(--basalt);color:#fff}
.bk__av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--bg-alt);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.bk__pille.is-an .bk__av{border-color:var(--basalt);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.bk__av img{width:100%;height:100%;object-fit:cover;display:block}
.bk__pille b{display:block;font-family:'BricolageCond',sans-serif;font-weight:600;font-size:1rem;line-height:1.05;letter-spacing:0}
.bk__pille small{display:block;font-size:.6875rem;line-height:1.2;color:var(--muted);margin-top:.1rem}
.bk__pille.is-an small{color:rgba(255,255,255,.66)}
.bk__panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr);gap:clamp(1.25rem,.6rem + 2.4vw,2.5rem);align-items:start}
.bk__panel[hidden]{display:none}
.bk__panel.is-an{animation:bkRein .45s var(--e-kurve) both}
@keyframes bkRein{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
@media (max-width:900px){.bk__panel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){
  .bk__pillen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .bk__pille{padding:.3rem .6rem .3rem .35rem;gap:.45rem}
  .bk__pille small{display:none}
  .bk__pille b{font-size:.95rem}
}
/* Bühne = echter Regler in einer Karte */
.bk__beweis{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh-1)}
.bk__beweis .vn__b{border-radius:0}
.bk__unter{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding:.8rem 1.1rem .9rem}
.bk__unter p{margin:0;font-size:.8125rem;line-height:1.5;color:var(--text);flex:1 1 16rem}
.bk__echt{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;padding:.28rem .7rem;border-radius:var(--r-pille);background:rgba(37,128,43,.1);color:var(--gruen-tief);font-size:.72rem;font-weight:700;line-height:1.3}
.bk__echt svg{flex:none}
.bk__echt svg{width:12px;height:12px}
/* Befund-Karte */
.bk__befund{background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);padding:1.4rem 1.4rem 1.3rem}
.bk__befund h3{margin:0 0 .15rem}
.bk__sub{margin:0 0 1.1rem;font-size:.8125rem;color:var(--muted)}
.bk__skala{margin:0 0 1.2rem;padding:.9rem 1rem 1rem;background:var(--bg-alt);border:1px solid var(--line-2);border-radius:var(--r-klein)}
.bk__skala > span{display:flex;justify-content:space-between;font-size:.6875rem;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:.55rem}
.bk__spur{position:relative;height:8px;border-radius:var(--r-pille);background:linear-gradient(90deg,var(--gruen) 0%,#E0B33A 55%,var(--rot) 100%);opacity:.9}
.bk__spur i{position:absolute;top:50%;left:calc((var(--n,1) - 1) * 25%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--basalt);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(20,22,24,.06)}
.bk__skala p{margin:.7rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--text)}
.bk__fakten{margin:0;display:grid;gap:.9rem}
.bk__fakten dt{font-size:.6875rem;font-weight:700;letter-spacing:.03em;color:var(--rot);margin-bottom:.2rem}
.bk__fakten dd{margin:0;font-size:.875rem;line-height:1.55;color:var(--text)}
.bk__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 0;padding:0;list-style:none}
.bk__chips li{padding:.3rem .7rem;border-radius:var(--r-pille);background:rgba(207,52,33,.07);color:var(--rot);font-size:.75rem;font-weight:600}
.bk__panel.is-an .bk__befund > *{animation:bkPlopp .5s var(--e-kurve) both}
.bk__panel.is-an .bk__befund > :nth-child(3){animation-delay:.1s}
.bk__panel.is-an .bk__befund > :nth-child(4){animation-delay:.2s}
@keyframes bkPlopp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk__hinweis{display:flex;gap:.6rem;align-items:flex-start;max-width:56rem;margin:1.5rem 0 0;padding:.8rem 1rem;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-klein);font-size:.8125rem;line-height:1.55;color:var(--text)}
.bk__hinweis svg{width:18px;height:18px;flex:none;color:var(--rot);margin-top:.1rem}

/* --- 18. Vorher/Nachher-Regler (Baustein, sitzt im Belag-Check) ------------ */
.vn__b{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);isolation:isolate;touch-action:pan-y}
.vn__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* inset() schneidet von links: unten Vorher, oben Nachher (rechts sichtbar) */
.vn__oben{clip-path:inset(0 0 0 var(--p,50%))}
.vn__tag{position:absolute;top:.7rem;z-index:3;padding:.28rem .65rem;border-radius:var(--r-pille);
  background:rgba(20,22,24,.72);backdrop-filter:blur(6px);font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:#fff;pointer-events:none}
.vn__tag--v{left:.7rem}
.vn__tag--n{right:.7rem}
.vn__griff{position:absolute;top:0;bottom:0;z-index:4;left:var(--p,50%);width:2px;background:rgba(255,255,255,.9);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(20,22,24,.16)}
.vn__griff i{max-width:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(20,22,24,.10);display:grid;place-items:center;z-index:1} /* Griff liegt auf dem Foto (Overlay), Schatten dort zulässig */
.vn__griff i::before,.vn__griff i::after{content:"";position:absolute;width:0;height:0;border-block:5px solid transparent;z-index:2}
.vn__griff i::before{left:12px;border-right:7px solid var(--rot)}
.vn__griff i::after{right:12px;border-left:7px solid var(--rot)}
.vn__regler{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.vn__regler::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:100%;cursor:ew-resize}
.vn__regler::-moz-range-thumb{width:46px;height:100%;border:0;background:transparent;cursor:ew-resize}
.vn__regler:focus-visible{outline:3px solid #fff;outline-offset:-4px;box-shadow:inset 0 0 0 6px rgba(207,52,33,.9)}
.vn__b:has(.vn__regler:focus-visible) .vn__griff i{outline:3px solid var(--rot);outline-offset:2px}

/* --- 18b. Die Probefläche (Nachweis-Sektion, Gewerk-Frage 5) ---------------- */
.probe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:900px){.probe{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
.probe__bild{position:relative;border-radius:var(--r-gross);overflow:hidden;background:var(--bg-alt);box-shadow:var(--sh-2)}
.probe__bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.probe__bild .vn__tag{top:auto;bottom:.8rem}
.probe__linie{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.85);transform:translateX(-1px);pointer-events:none}
.probe__schritte{list-style:none;counter-reset:ps;margin:0 0 1.6rem;padding:0;display:grid;gap:.9rem}
.probe__schritte li{counter-increment:ps;display:flex;gap:.9rem;align-items:flex-start}
.probe__schritte li::before{content:counter(ps);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--basalt);color:#fff;font-family:'BricolageCond',sans-serif;font-weight:700;font-size:1.05rem;margin-top:.05rem}
.probe__schritte b{display:block;font-family:'BricolageCond',sans-serif;font-weight:600;font-size:1.15rem;line-height:1.1;color:var(--ink);margin-bottom:.2rem}
.probe__schritte span{font-size:.9375rem;line-height:1.55;color:var(--text)}
.probe__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.probe__cta{flex-direction:column}.probe__cta .btn{width:100%}}

/* --- 19. Fuge: drei Wege --------------------------------------------------- */
.fg__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:900px){.fg__reihe{grid-template-columns:minmax(0,1fr);max-width:34rem;margin-inline:auto;gap:24px}}
.fg{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column}
.fg--top{background:var(--basalt);border-color:var(--basalt);color:#fff;box-shadow:var(--sh-3)}
.fg__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-klein);background:rgba(207,52,33,.09);color:var(--rot);margin-bottom:1rem}
.fg__icon svg{width:22px;height:22px}
.fg--top .fg__icon{background:rgba(255,138,122,.16);color:var(--rot-hell)}
.fg h3{margin:0 0 .3rem}
.fg__wer{margin:0 0 1rem;font-size:.8125rem;color:var(--muted);line-height:1.5}
.fg--top .fg__wer{color:rgba(255,255,255,.7)}
.fg dl{margin:0;display:grid;gap:.7rem}
.fg dt{font-size:.6875rem;font-weight:700;letter-spacing:.03em;color:var(--rot);margin-bottom:.15rem}
.fg--top dt{color:var(--rot-hell)}
.fg dd{margin:0;font-size:.875rem;line-height:1.55;color:var(--text)}
.fg--top dd{color:rgba(255,255,255,.82)}
.fg__stoerer{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:.34rem .85rem;border-radius:var(--r-pille);
  background:var(--rot);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.fg__haken{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}
.fg--top .checks li{color:rgba(255,255,255,.84)}
.fg--top .checks li::before{background-color:var(--gruen-hell)}

/* --- 20. Anbieter-Vergleich -------------------------------------------------- */
.vgl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.5rem;align-items:center}
@media (max-width:860px){.vgl{grid-template-columns:minmax(0,1fr);gap:1rem}}
.vgl__vs{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  font-family:'BricolageCond',sans-serif;font-weight:700;font-size:1.1rem;color:var(--rot)}
@media (max-width:860px){.vgl__vs{margin-inline:auto}}
.vgk{border-radius:var(--r-gross);padding:1.6rem 1.5rem;position:relative}
.vgk--wir{background:#fff;border:1px solid var(--rot);box-shadow:0 0 0 1px rgba(207,52,33,.16),var(--sh-2);transform:translateY(-6px)}
@media (max-width:860px){.vgk--wir{transform:none}}
.vgk--andere{background:var(--bg-alt-2);border:1px solid var(--line);color:var(--muted)}
.vgk__kopf{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line-2)}
.vgk__kopf img{height:40px;width:auto;max-width:none}
.vgk__kopf b{font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.05rem;font-weight:600;color:var(--ink)}
.vgk__leer{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#E3DED4;color:var(--muted);flex:none}
.vgk__leer svg{width:20px;height:20px}
.vgk--andere .vgk__kopf b{color:var(--muted)}
.vgk__empf{position:absolute;top:-11px;right:1.5rem;padding:.28rem .7rem;border-radius:var(--r-pille);background:var(--rot);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.03em}
.vgk ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.vgk li{display:flex;align-items:flex-start;gap:.7rem;font-size:.875rem;line-height:1.5}
.vgk li svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.16rem}
.vgk--wir li{color:var(--ink)}
.vgk--wir li svg{color:var(--gruen)}
/* Marke ist rot → die X der Gegenkarte bleiben grau, nicht rot */
.vgk--andere li svg{color:#9A9891}

/* --- 21. Preise ohne Zahl: Aufwandstreiber + „So kommen Sie zu Ihrer Zahl" -- */
.pt__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.pt__reihe{grid-template-columns:minmax(0,1fr);gap:24px;max-width:34rem;margin-inline:auto}}
.pk{background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);padding:1.5rem 1.4rem;display:flex;flex-direction:column;
  transition:border-color var(--e-soft),box-shadow var(--e-soft),translate var(--e-soft)}
.pk:hover{border-color:#DCD6CB;box-shadow:var(--sh-2);translate:0 -2px}
.pk__nr{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-klein);background:rgba(207,52,33,.09);color:var(--rot);
  font-family:'BricolageCond',sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:.9rem}
.pk h3{margin:0 0 .5rem}
.pk p{margin:0;font-size:.875rem;line-height:1.6;color:var(--text)}
.pt__weg{margin-top:2rem;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center;
  background:var(--basalt);color:#fff;border-radius:var(--r-gross);padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
@media (max-width:820px){.pt__weg{grid-template-columns:minmax(0,1fr)}}
.pt__weg h3{margin:0 0 .6rem;font-size:1.6rem;color:#fff}
.pt__weg p{margin:0;font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.8)}
.pt__schritte{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;counter-reset:s}
.pt__schritte li{counter-increment:s;display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-klein);font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.88)}
.pt__schritte li::before{content:counter(s);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--rot);color:#fff;
  font-family:'BricolageCond',sans-serif;font-weight:700;font-size:.9rem}
.pt__schritte b{color:#fff}
/* Die linke Spalte trägt die einzige Zahl, die vor der Besichtigung feststeht:
   0 € für den Weg dorthin. Große Display-Ziffer statt schmaler Pille — sonst
   steht die Spalte neben den drei Schritten halb leer. */
.pt__links .kicker{color:var(--rot-hell)}
.pt__links h3{margin-bottom:.7rem}
.pt__links > p{margin:0;font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.8);max-width:26rem}
.pt__null{display:flex;align-items:center;gap:1.15rem;margin-top:1.5rem;padding:1.15rem 1.3rem;
  border-radius:var(--r-karte);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14)}
.pt__null b{flex:none;font-family:'BricolageCond',sans-serif;font-weight:700;letter-spacing:0;
  font-size:clamp(2.7rem,2rem + 2.2vw,3.6rem);line-height:.88;color:var(--rot-hell)}
.pt__null span{font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.82)}
@media (max-width:520px){.pt__null{gap:.9rem;padding:1rem 1.1rem}.pt__null span{font-size:.8125rem}}
.pt__weg .btn--geist{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.pt__weg .btn--geist:hover{border-color:#fff}

/* --- 22. Ablauf-Bildkarten ------------------------------------------------- */
.abl{--luecke:1.4rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--luecke)}
@media (max-width:980px){.abl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.abl{grid-template-columns:minmax(0,1fr);--luecke:1.75rem}}
.ak{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);overflow:visible}
.ak__bild{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r-karte) - 1px) calc(var(--r-karte) - 1px) 0 0}
.ak__bild img{width:100%;height:100%;object-fit:cover}
.ak__text{position:relative;padding:1.35rem 1.15rem 1.25rem}
.ak__nr{position:absolute;top:0;right:18px;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--rot);color:#fff;font-family:'BricolageCond',sans-serif;font-weight:700;font-size:.9375rem;border:2px solid #fff;z-index:2}
.ak__text::before{content:"";position:absolute;top:0;right:100%;width:var(--luecke);height:2px;background:linear-gradient(90deg,rgba(207,52,33,.12),rgba(207,52,33,.45));
  transform-origin:left;transform:scaleX(0);transition:transform .8s var(--e-kurve) .2s}
.ak.is-da .ak__text::before{transform:scaleX(1)}
.ak:first-child .ak__text::before{display:none}
.ak__text h3{margin:0 0 .4rem;font-size:1.15rem;padding-right:2.6rem}
.ak__text p{margin:0;font-size:.8125rem;line-height:1.6;color:var(--text)}
/* Einspaltig sitzt der Verbinder senkrecht in der Lücke über der Karte, nicht im Bild */
@media (max-width:620px){
  .ak__text::before{content:none}
  .ak:not(:first-child)::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:var(--luecke);
    background:linear-gradient(180deg,rgba(207,52,33,.12),rgba(207,52,33,.45));
    transform-origin:top;transform:scaleY(0);transition:transform .8s var(--e-kurve) .2s}
  .ak.is-da::before{transform:scaleY(1)}
}

/* --- 23. Referenz-Marquee (zwei Reihen gegenläufig) ------------------------- */
.refl{--h:min(40vw,240px)}
.refl .lauf__spur{gap:14px}
.refl + .refl{margin-top:14px}
.refb{flex:none;height:var(--h);aspect-ratio:3/2;border-radius:var(--r-karte);overflow:hidden;background:var(--bg-alt)}
.refb img{width:100%;height:100%;object-fit:cover}
@media (max-width:620px){.refl{--h:170px}}

/* --- 24. Einzugsgebiet: links Text, rechts überlagerte Karte ---------------- */
.geb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
@media (max-width:900px){.geb{grid-template-columns:minmax(0,1fr);gap:2.25rem}}
#gebiet{overflow-x:clip}
/* Karte (D2-02): am Desktop ragt sie nach links in den Spaltenabstand statt rechts über den Bildschirm, mobil genau
   bildschirmbreit ohne Vergrößerung, damit Randorte (Ahaus, Gescher, Warendorf) und Landschaftsnamen nicht abgeschnitten werden */
.geb__karte{position:relative;margin:-6% 0 -6% -14px}
.geb__karte img{width:112%;max-width:none;height:auto;display:block}
.geb__karte::before,.geb__karte::after{content:"";position:absolute;left:0;right:0;height:16%;pointer-events:none;z-index:1}
.geb__karte::before{top:0;background:linear-gradient(180deg,var(--bg-alt),transparent)}
.geb__karte::after{bottom:0;background:linear-gradient(0deg,var(--bg-alt),transparent)}
@media (max-width:900px){.geb__karte{margin:0 -1.25rem}.geb__karte img{width:100%;margin-left:0}}
@media (max-width:620px){.geb__karte{margin:0 -.875rem}}
.geb__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.geb__cta{flex-direction:column}.geb__cta .btn{width:100%}}

/* --- 25. Anfrage (dunkel) --------------------------------------------------- */
.anfrage{background:var(--basalt);color:#fff}
.anfrage .t-lead{color:rgba(255,255,255,.8)}
.anfrage .btn--klar{border-color:rgba(255,255,255,.42);color:#fff}

/* --- 26. FAQ ------------------------------------------------------------------ */
.faq{max-width:48rem;margin-inline:auto;position:relative;z-index:1}
.fq{border-bottom:1px solid var(--line)}
.fq:first-child{border-top:1px solid var(--line)}
.fq__b{display:flex;align-items:flex-start;gap:1rem;width:100%;padding:1.2rem .25rem;background:none;border:none;text-align:left;cursor:pointer;
  font-family:'Figtree',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.fq__b:hover{color:var(--rot)}
.fq__ic{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bg-alt);color:var(--rot);flex:none;transition:transform var(--e-soft),background var(--e-soft),color var(--e-soft)}
.fq__ic svg{width:12px;height:12px}
.fq.is-auf .fq__ic{transform:rotate(45deg);background:var(--rot);color:#fff}
.fq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--e-calm)}
.fq.is-auf .fq__a{grid-template-rows:1fr}
.fq__a > div{overflow:hidden}
.fq__a p{margin:0 0 1.25rem;padding-right:2.5rem;font-size:.9375rem;line-height:1.7;color:var(--text)}

/* --- 27. Final-CTA ---------------------------------------------------------- */
.final{position:relative;isolation:isolate;padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem);text-align:center;overflow:hidden;color:#fff}
.final__bg{position:absolute;inset:0;z-index:-2}
.final__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,22,24,.86),rgba(20,22,24,.92))}
.final h2{color:#fff;max-width:40rem;margin-inline:auto}
.final p{max-width:38rem;margin-inline:auto;color:rgba(255,255,255,.82);font-size:1rem}
.final__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}
@media (max-width:560px){.final__cta{flex-direction:column}.final__cta .btn{width:100%}}

/* --- 28. Fußzeile ------------------------------------------------------------- */
.fuss{background:#121416;color:rgba(255,255,255,.72);padding-block:3rem 1.75rem;font-size:.875rem}
.fuss__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:820px){.fuss__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (max-width:560px){.fuss__grid{grid-template-columns:minmax(0,1fr)}}
.fuss__logo{display:inline-block;padding:0;background:transparent;margin-bottom:1rem}
.fuss__logo img{height:40px;width:auto;max-width:none}
.fuss p{margin:0 0 1rem;line-height:1.7;font-size:.8125rem;max-width:26rem}
.fuss h4{font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:600;color:#fff;margin:0 0 .8rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.8125rem}
.fuss a:hover{color:#fff}
.fuss__u{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;font-size:.75rem;color:rgba(255,255,255,.55)}
.fuss__u a:hover{color:#fff}

/* --- 29. FAB ------------------------------------------------------------------ */
.fab{position:fixed;right:18px;bottom:18px;z-index:940;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:none}
.fab > *{pointer-events:auto}
.fab__aus{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;pointer-events:none}
.fab__i{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem .9rem .55rem .75rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.8125rem;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity var(--e-soft),transform var(--e-snap)}
.fab.is-auf .fab__i{opacity:1;transform:none;pointer-events:auto}
.fab.is-auf .fab__i:nth-child(1){transition-delay:.02s}
.fab.is-auf .fab__i:nth-child(2){transition-delay:.07s}
.fab.is-auf .fab__i:nth-child(3){transition-delay:.12s}
.fab__i svg{width:16px;height:16px;color:var(--rot)}
.fab__i--wa svg{color:var(--wa)}
.fab__b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--rot);color:#fff;box-shadow:0 10px 26px rgba(207,52,33,.22);transition:transform var(--e-snap),background var(--e-soft)}
.fab__b:hover{transform:scale(1.05)}
.fab__b svg{width:22px;height:22px;transition:transform var(--e-snap)}
.fab.is-auf .fab__b{background:var(--basalt)}
.fab.is-auf .fab__b svg{transform:rotate(135deg)}
.fab__blase{position:absolute;right:64px;bottom:9px;white-space:nowrap;padding:.5rem .85rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.8125rem;color:var(--text);animation:blaseRein .6s var(--e-soft) 2.4s both}
.fab__blase b{color:var(--rot);font-weight:700}
.fab.is-auf .fab__blase{display:none}
@keyframes blaseRein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (max-width:620px){.fab__blase{display:none}}
.fab{transition:opacity var(--e-soft),transform var(--e-snap),visibility 0s linear 0s}
/* Auf schmalen Geräten steht die Formularkarte im ersten Bildschirm, und ihr
   Aktions-Störer sitzt genau dort, wo der FAB liegt (gemessen 20.09.2026:
   2432 px² Überdeckung). Deshalb erscheint der FAB mobil erst nach der ersten
   Bildschirmhöhe — der Störer bleibt frei, der Kontaktweg trotzdem immer nah. */
@media (max-width:900px){
  .fab{opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--e-soft),transform var(--e-snap),visibility 0s linear .45s}
  .fab.is-da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
/* Am Seitenende weicht der FAB, damit Impressum, Datenschutz und Cookie-Widerruf frei klickbar sind */
.fab.is-fuss{opacity:0;visibility:hidden;transform:translateY(10px);transition-delay:0s,0s,.45s}
.fab.is-fuss > *{pointer-events:none}

/* --- 30. Overlay (Modal + Pop-up) ------------------------------------------- */
.ovl{position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:1rem;background:rgba(20,22,24,.62);backdrop-filter:blur(3px)}
.ovl.is-auf{display:grid;animation:ovlRein .3s var(--e-soft) both}
@keyframes ovlRein{from{opacity:0}to{opacity:1}}
.ovl__c{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 2rem);overflow-y:auto;overflow-x:hidden;padding:24px 20px 0;
  border-radius:var(--r-gross);animation:kartRein .4s var(--e-snap) both;scrollbar-width:thin}
/* Siegel im Anfrage-Modal (C-01): sitzt in der freien Ecke über dem Kartenrand, die Kopfzeile rückt daneben ein,
   damit es weder Überschrift noch Unterzeile verdeckt. Unter 561 px öffnet das Modal nicht (die Knöpfe springen
   zu #anfrage); öffnet es dort doch, dann ohne Siegel, weil die Kopfzeile zu schmal würde. */
.ovl__c .sticker{top:-22px;right:auto;left:-18px;transform:rotate(-11deg)}
.ovl__c .qk__kopf{padding-left:4.75rem}
@media (max-width:560px){.ovl__c .sticker{display:none}.ovl__c .qk__kopf{padding-left:0}}
@keyframes kartRein{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ovl__x{position:absolute;top:24px;right:22px;z-index:7;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(20,22,24,.06)}
.ovl__x svg{width:14px;height:14px}
.ovl__x:hover{background:var(--bg-alt)}
/* Pop-up im Drittel-Aufbau: helle Insel — Geist-Knopf dunkel */
.promo{background:#fff;color:var(--ink);padding:0;max-width:26.5rem;text-align:center}
.ovl__c:has(> .promo){padding:0;max-width:26.5rem}
.ovl__c:has(> .promo) .ovl__x{top:12px;right:12px}
.promo__bild{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-gross) var(--r-gross) 0 0}
.promo__bild img{width:100%;height:100%;object-fit:cover}
.promo__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(20,22,24,.7))}
.promo__badge{position:absolute;left:1rem;bottom:.85rem;z-index:1;padding:.32rem .75rem;border-radius:var(--r-pille);background:rgba(255,255,255,.94);font-size:.75rem;font-weight:700;color:var(--basalt)}
.promo__in{padding:1.4rem 1.5rem 1.5rem}
.promo h3{font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.5rem;font-weight:600;margin:0 0 .55rem;line-height:1.06}
.promo > .promo__in > p{margin:0 0 1.1rem;font-size:.875rem;line-height:1.62;color:var(--text)}
.promo .checks{text-align:left;margin:0 auto 1.25rem;padding-block:1rem;border-block:1px solid var(--line-2);gap:.5rem;width:fit-content;max-width:100%}
.promo .checks li{font-size:.8125rem}
.promo__cta{display:grid;gap:.55rem}
.promo__trust{margin:.85rem 0 .5rem;font-size:.75rem;font-weight:600;color:var(--muted)}
.promo__weg{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:none;border:none;font-size:.75rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:.2rem .75rem}
.promo__weg:hover{color:var(--ink)}

/* --- 31. Cookie-Wand (Soft Wall) -------------------------------------------- */
.kekse{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:1rem;background:rgba(20,22,24,.6);backdrop-filter:blur(3px)}
.kekse.is-auf{display:grid}
.kekse__c{background:#fff;color:var(--ink);border-radius:var(--r-karte);box-shadow:0 24px 64px rgba(20,22,24,.22);
  width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 2rem);overflow:auto;padding:1.75rem 1.6rem 1.5rem;text-align:center}
.kekse__c > img{height:48px;width:auto;max-width:none;margin:0 auto 1rem}
.kekse__c h2{font-family:'BricolageCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.35rem;font-weight:600;margin:0 0 .6rem}
.kekse__c > p{margin:0 0 1.25rem;font-size:.8125rem;line-height:1.65;color:var(--text)}
/* Akzeptieren und Ablehnen gleich breit in einer Zeile (gebaut per Grid) */
.kekse__btn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.6rem}
.kekse__btn .btn{min-width:0;padding-inline:.6rem;font-size:clamp(.8rem,.7rem + .3vw,.9rem)}
/* „Einstellungen“ bleibt textartig, die Tippfläche ist trotzdem 44 px hoch (C-04) */
.kekse__mehr{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:none;border:none;padding:.25rem .75rem;font-size:.8125rem;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-bottom:.6rem}
.kekse__mehr:hover{color:var(--rot)}
.kekse__ein{display:none;text-align:left;margin-bottom:1rem;border:1px solid var(--line);border-radius:var(--r-klein);overflow:hidden}
.kekse__ein.is-auf{display:block}
.kekse__z{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-bottom:1px solid var(--line-2)}
.kekse__z:last-of-type{border-bottom:none}
.kekse__z b{display:block;font-size:.8125rem;font-weight:600}
.kekse__z > span > span{display:block;font-size:.75rem;color:var(--muted);line-height:1.45}
.kekse__z i{margin-left:auto;font-style:normal;font-size:.6875rem;font-weight:700;color:var(--muted);white-space:nowrap}
.kekse__sw{margin-left:auto;position:relative;width:44px;height:26px;flex:none;cursor:pointer}
.kekse__sw::before{content:"";position:absolute;inset:-10px -8px}
.kekse__sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.kekse__sw span{position:absolute;inset:0;border-radius:var(--r-pille);background:var(--line);transition:background var(--e-soft)}
.kekse__sw span::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,22,24,.25);transition:transform var(--e-snap)}
.kekse__sw input:checked + span{background:var(--rot)}
.kekse__sw input:checked + span::after{transform:translateX(17px)}
.kekse__ein .btn{margin:.85rem 1rem 1rem;width:calc(100% - 2rem)}
.kekse__links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.kekse__links a:hover{color:var(--rot)}

/* --- 31b. KI-Kennzeichnung am Bild (J-01 KI-Montage, J-08 KI-Symbolbild) ---- */
/* Overlay im Bild, ohne Hover sichtbar. Grund: dunkel, weiße Schrift, mind. 11 px. */
.ki-chip{position:absolute;left:.75rem;bottom:.75rem;z-index:3;display:inline-flex;align-items:center;max-width:calc(100% - 1.5rem);
  padding:.26rem .62rem;border-radius:var(--r-pille);background:rgba(20,22,24,.84);color:#fff;
  font-family:'Figtree',sans-serif;font-size:.75rem;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none}
.ki-chip--symbol{padding:.2rem .52rem;background:rgba(20,22,24,.62);font-size:.6875rem;font-weight:600}
.ki-chip--oben{top:.75rem;bottom:auto}

/* --- 32. Kleinkram ------------------------------------------------------------ */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;top:-100px;left:1rem;z-index:1300;padding:.7rem 1.1rem;background:#fff;color:var(--ink);border-radius:var(--r-btn);box-shadow:var(--sh-2);transition:top var(--e-soft)}
.sprung:focus{top:1rem}
html.is-fix,body.is-fix{overflow:hidden}   /* html mit: dort sitzt overflow-x:clip, body allein sperrt nicht */

/* --- 33. Rechtsseiten und 404 --------------------------------------------- */
.rkopf{background:var(--basalt);color:#fff;padding-top:calc(var(--kopf) + 2.75rem);padding-bottom:2.5rem;position:relative;overflow:hidden}
.rkopf__krume{font-size:.8125rem;color:rgba(255,255,255,.62);margin:0 0 .6rem}
.rkopf__krume a:hover{color:#fff}
.rkopf h1{font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem);line-height:1.04;margin:0 0 .6rem;padding-top:.05em}
.rkopf p{margin:0;font-size:.9375rem;color:rgba(255,255,255,.78);max-width:40rem}
.rtext{padding-block:clamp(2.5rem,2rem + 2.5vw,4rem)}
.rtext .wrap{max-width:52rem}
.rtext h2{font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:1.5rem;line-height:1.1;margin:2.5rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.rtext h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.rtext h3{font-family:'Figtree',sans-serif;font-weight:600;font-size:1.1rem;line-height:1.3;margin:1.75rem 0 .5rem}
.rtext p,.rtext li{font-size:.9375rem;line-height:1.72;color:var(--text)}
.rtext p{margin:0 0 1rem}
.rtext ul{margin:0 0 1.25rem;padding-left:1.2rem}
.rtext li{margin-bottom:.35rem}
.rtext strong{color:var(--ink);font-weight:600}
.rtext a{color:var(--rot);text-decoration:underline;text-underline-offset:2px}
.rtext a:hover{color:var(--rot-tief)}
.rtext table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.875rem}
.rtext th,.rtext td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.rtext th{font-weight:600;color:var(--ink);background:var(--bg-alt)}
.rtext td{color:var(--text)}
@media (max-width:760px){
  .rtext table,.rtext tbody,.rtext tr,.rtext td{display:block;width:auto}
  .rtext table{border-collapse:separate}
  .rtext thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rtext tr{border:1px solid var(--line);border-radius:var(--r-klein);margin-bottom:.9rem;overflow:hidden}
  .rtext td{padding:.6rem .85rem;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
  .rtext td:last-child{border-bottom:0}
  .rtext td:first-child{background:var(--bg-alt);color:var(--ink);font-weight:600}
  .rtext td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:.15rem;font-size:.75rem;font-weight:600;color:var(--ink)}
}
.e404{display:grid;place-items:center;text-align:center;padding-block:clamp(4rem,3rem + 6vw,8rem);position:relative;overflow:hidden}
.e404__zahl{font-family:'BricolageCond',sans-serif;font-weight:800;font-size:clamp(7rem,5rem + 16vw,14rem);line-height:.85;
  background:linear-gradient(180deg,var(--rot),var(--rot-hell));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.18;margin:0}
.e404 h1{font-family:'BricolageCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:600;font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);line-height:1.08;margin:-.5rem 0 .8rem}
.e404 > .wrap > p:not(.e404__zahl){max-width:34rem;margin:0 auto 1.75rem;color:var(--text);font-size:.9375rem;line-height:1.7}
.e404__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
@media (max-width:480px){.e404__cta{flex-direction:column}.e404__cta .btn{width:100%}}
.e404__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;text-align:left;max-width:52rem;margin-inline:auto}
@media (max-width:760px){.e404__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.e404__liste{grid-template-columns:minmax(0,1fr)}}
.e404__k{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-karte);transition:border-color var(--e-soft),translate var(--e-soft)}
.e404__k:hover{border-color:var(--rot);translate:0 -2px}
.e404__k svg{width:20px;height:20px;color:var(--rot);flex:none;margin-top:.15rem}
.e404__k b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.3}
.e404__k span{display:block;font-size:.75rem;color:var(--muted);line-height:1.45}
/* „Polymersand“ steht in einem Span gegen die Browser-Übersetzung; ohne diese Regel erbt er die
   Zweitzeilen-Regel von .e404__k span (Block, klein, grau). */
.e404__k b .notranslate{display:inline;font-size:inherit;color:inherit;line-height:inherit}

/* --- 34. Sichtbarkeits-Helfer (am Ende, gewinnen die Spezifität) ------------ */
.kopfz .nur-desktop{display:inline-flex}
@media (max-width:980px){.kopfz .nur-desktop{display:none}}


/* --- 22.09.2026 · Änderungen aus dem Kundengespräch ------------------------ */
/* Preis in der Hero-Headline als Signal */
.hero__sub .hl{color:var(--rot-hell)}
/* Neuverfugung: vier Karten, 2 × 2 */
.fg__reihe--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:62rem;margin-inline:auto;row-gap:34px}
@media (max-width:900px){.fg__reihe--4{grid-template-columns:minmax(0,1fr)}}
.fg__stoerer--premium{background:linear-gradient(135deg,#F4F5F6 0%,#C9CDD2 45%,#EEF0F2 70%,#B7BCC2 100%);color:var(--basalt);
  box-shadow:0 4px 12px rgba(20,22,24,.06);border:1px solid rgba(255,255,255,.7)}
.fg--top{outline:2px solid #C9CDD2;outline-offset:-2px}
.fg__warn{border-color:rgba(207,52,33,.35);background:rgba(207,52,33,.05)}
.fg__warn b{color:var(--ink)}
/* Mobile Hero: erst Foto, dann Farbübergang, dann Inhalt, dann Formular */
@media (max-width:899px){
  .hero{padding-top:0;background:var(--basalt)}
  .hero::before{display:none}
  .hero{--hero-bild-h:clamp(250px,68vw,420px)}
  .hero__bg{position:relative;inset:auto;z-index:0;height:var(--hero-bild-h)}
  .ki-chip--hero{top:calc(var(--hero-bild-h) - 3.2rem - 2.1rem);bottom:auto}   /* über der Überlappung von .hero__grid */
  .hero__bg img{object-position:50% 50%}
  .hero__bg::before{content:"";position:absolute;inset:0 0 auto;height:110px;z-index:1;
    background:linear-gradient(180deg,rgba(20,22,24,.55),rgba(20,22,24,0))}
  .hero__bg::after{content:"";position:absolute;inset:auto 0 0;height:55%;z-index:1;
    background:linear-gradient(180deg,rgba(28,31,34,0) 0%,rgba(28,31,34,.75) 55%,var(--basalt) 100%)}
  .hero__grid{position:relative;z-index:2;margin-top:-3.2rem}
}


/* --- 29.09.2026 · Änderungen aus Karstens Screenshots ------------------- */
/* Hero: zweite Zeile weiß, normal geschrieben, wie in Karstens Vorlage */
.hero__sub .hero__zeile{display:block;margin-top:.3em;font-weight:500;text-transform:none;font-size:.74em;line-height:1.08;color:#fff}
.hero__sterne--unten{margin:1.25rem 0 0}
.btn--wa-rand{border-color:var(--wa)}
.btn--wa-rand svg{color:var(--wa)}
/* Kein-Strom-Karte: drei Aussagen, Fettung wie in der Liste */
.btile__checks b{color:#fff;font-weight:600}
/* Name unter dem Porträt */
.ueber__name{position:relative;z-index:1;text-align:center;margin:1rem 0 0;line-height:1.35}
.ueber__name b{display:block;font-size:1rem;font-weight:600;color:var(--ink)}
.ueber__name span{font-size:.8125rem;color:var(--muted)}

/* Ablauf: fünf Schritte (29.09.2026) */
/* Ab 981 px drei plus zwei Karten (zweite Reihe mittig), damit die Bilder mindestens 180 px hoch bleiben */
@media (min-width:981px){
  .abl{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;--luecke:1.1rem}
  .abl > .ak{grid-column:span 2}
  .abl > .ak:nth-child(4){grid-column:2 / span 2}
  .abl > .ak:nth-child(4) .ak__text::before{display:none}
}

/* Fugen-Karten in Weiß, Silber, Gold (30.09.2026, Wunsch von Gajo) */
.fg--weiss{background:#fff}
.fg--silber{background:linear-gradient(145deg,#FAFBFC 0%,#E4E7EB 42%,#F4F5F7 68%,#D6DADF 100%);border-color:#C9CDD2}
.fg--gold{background:linear-gradient(145deg,#FCF3D8 0%,#EDD28C 42%,#F8E8BA 68%,#DEBC68 100%);border-color:#D2AE55;box-shadow:var(--sh-3)}
.fg--silber .fg__icon,.fg--gold .fg__icon{background:rgba(255,255,255,.6)}
.fg--gold dt{color:var(--rot-tief)}
.fg--gold .fg__wer,.fg--gold dd{color:var(--ink)}
.fg--gold .fg__stoerer--premium{background:var(--basalt);color:#F1D98F;border-color:rgba(241,217,143,.5)}