/* =========================================================
   K&O Klarheit & Ordnung — Entkernung & Rückbau
   Design-Rezept "Beton & Signal"
   Basis hell (Beton/Sand) · dunkle Anthrazit-Blöcke ·
   EINE Akzentfarbe (Logo-Rot) · Deko-System: Bauplan-Raster
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Flächen — Sektionswechsel bei 98 % Helligkeit */
  --sand-0:#FFFFFF;
  --sand-1:#FAF9F6;
  --sand-2:#F2F0EB;
  --sand-3:#E9E6DF;

  /* Dunkel */
  --ink:#1A1815;
  --ink-2:#242119;
  --ink-3:#12100E;

  /* Text */
  --fg:#1A1815;
  --fg-muted:#6B6459;
  --fg-soft:#8A8377;
  --on-dark:#F3F1EC;
  --on-dark-muted:#A8A196;

  /* Linien */
  --line:#E4E0D8;
  --line-strong:#D6D1C6;
  --line-dark:rgba(243,241,236,.14);

  /* Akzent — die EINE Farbe */
  --signal:#D02C22;
  --signal-hell:#F04A3C;
  --signal-tief:#A81C16;
  --signal-weich:rgba(208,44,34,.09);

  /* Radien — genau drei */
  --r-btn:8px;
  --r-card:18px;
  --r-pill:999px;
  --figur-breite:clamp(190px, 15.5vw, 268px);

  /* Schatten — 1,5–6 % */
  --sh-card:0 1px 2px 0 rgba(26,24,21,.015);
  --sh-card-hover:0 8px 22px -12px rgba(26,24,21,.075);
  --sh-float:0 22px 60px -34px rgba(26,24,21,.32);
  --sh-chip:0 2px 6px -3px rgba(26,24,21,.10);

  /* Typo */
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Motion — Federkurven */
  --feder:linear(0,.0063 4.65%,.0247 9.66%,.0873 18.63%,.4283 47.68%,.5401 56.29%,.6353 64.24%,.7185 71.87%,.7864 78.85%,.8437 85.65%,.8888 91.61%,.9224 96.31%,.9486 100.7%,.9689 104.85%,.9838 108.86%,.9964 114.13%,1.0031 119.66%,1.006 125.72%,1.0043 133.03%,1.0011 140.66%,1);
  --aus:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--sand-0);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{max-width:100%;display:block;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px;}

/* ---------- Typo-Skala: genau sieben Stufen ---------- */
/* Umbruch-Hygiene: Überschriften ausbalancieren, Fließtext ohne Waisenwörter */
h1,h2,h3,h4,.t-hero,.t-h2,.t-h3,.t-h4{text-wrap:balance;}
p,li,.leist-text p,.faq-antwort-innen,.kosten-karte p,.fakt p{text-wrap:pretty;}
.t-hero{
  font-family:var(--font-display);
  font-size:clamp(36px, 5vw, 62px);
  font-weight:500;line-height:1.08;letter-spacing:-.032em;
}
.t-h2{
  font-family:var(--font-display);
  font-size:clamp(24px, 3.1vw, 40px);
  font-weight:500;line-height:1.18;letter-spacing:-.022em;
}
.t-h3{
  font-family:var(--font-display);
  font-size:clamp(20px, 1.6vw, 24px);
  font-weight:500;line-height:1.28;letter-spacing:-.014em;
}
.t-h4{
  font-family:var(--font-display);
  font-size:19px;font-weight:500;line-height:1.32;letter-spacing:-.01em;
}
.t-body{font-size:17px;line-height:1.65;color:var(--fg-muted);}
.t-small{font-size:14px;line-height:1.55;color:var(--fg-soft);}
.t-label{
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:500;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--signal);
}

/* ---------- Layout ---------- */
.container{width:min(1220px, 100% - 40px);margin-inline:auto;}
.container-eng{width:min(880px, 100% - 40px);margin-inline:auto;}
.section{padding-block:clamp(72px, 8.6vw, 128px);position:relative;}
.section-alt{background:var(--sand-1);}
.section-sand{background:var(--sand-2);}
.section-dunkel{background:var(--ink);color:var(--on-dark);}
.section-dunkel .t-body{color:var(--on-dark-muted);}
.section-dunkel .t-small{color:var(--on-dark-muted);}

.sec-kopf{max-width:720px;margin-bottom:clamp(38px,4.4vw,60px);}
.sec-kopf.mitte{margin-inline:auto;text-align:center;}
.sec-kopf .t-label{display:block;margin-bottom:16px;}
.sec-kopf .t-h2{margin-bottom:16px;}
.hl{display:block;color:var(--signal);}
.section-dunkel .hl{color:var(--signal-hell);}

/* ---------- Deko-System: Bauplan-Raster ---------- */
.raster{position:relative;}
.raster::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right, rgba(26,24,21,.055) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(26,24,21,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 72%);
  opacity:.9;
}
.section-dunkel.raster::before{
  background-image:linear-gradient(to right, rgba(243,241,236,.06) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(243,241,236,.06) 1px, transparent 1px);
}
.raster > *{position:relative;z-index:1;}

/* Maßlinie als zweites Deko-Element */
.masslinie{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-soft);
}
.masslinie::before,.masslinie::after{
  content:"";height:1px;background:var(--line-strong);flex:1 1 auto;min-width:24px;
}

/* ---------- Icons ---------- */
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ic-fill{fill:currentColor;stroke:none;}
.ic-sm{width:17px;height:17px;}
.ic-lg{width:26px;height:26px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 26px;
  border-radius:var(--r-btn);
  font-family:var(--font-body);font-size:15.5px;font-weight:600;
  letter-spacing:-.005em;text-align:center;
  transition:background-color .28s var(--aus), color .28s var(--aus),
             border-color .28s var(--aus), transform .28s var(--feder);
  box-shadow:none;
}
.btn:active{transform:translateY(1px) scale(.995);}
.btn-primary{background:var(--signal);color:#fff;}
.btn-primary:hover{background:var(--signal-tief);}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--fg);background:rgba(26,24,21,.03);}
.btn-hell{background:#fff;color:var(--ink);}
.btn-hell:hover{background:var(--sand-2);}
.btn-linie-hell{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34);}
.btn-linie-hell:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-sm{min-height:44px;padding:0 17px;font-size:14.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6;cursor:default;}

/* Ladezustand */
.btn.laedt{color:transparent;position:relative;pointer-events:none;}
.btn.laedt::after{
  content:"";position:absolute;width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:dreh .7s linear infinite;
}
@keyframes dreh{to{transform:rotate(360deg);}}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background-color .35s var(--aus), box-shadow .35s var(--aus),
             border-color .35s var(--aus), backdrop-filter .35s var(--aus);
  border-bottom:1px solid transparent;
}
.site-header.fest{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:82px;transition:min-height .35s var(--aus);}
.site-header.fest .header-inner{min-height:70px;}
.logo-img{width:auto;height:54px;align-self:flex-start;flex:0 0 auto;
  transition:height .35s var(--aus), filter .35s var(--aus);}
.site-header .logo-img{filter:brightness(0) invert(1);}
.site-header.fest .logo-img{filter:none;height:48px;}

.haupt-nav{display:flex;gap:30px;align-items:center;}
.haupt-nav a{
  font-size:15px;font-weight:500;color:rgba(255,255,255,.86);
  position:relative;padding-block:6px;transition:color .25s var(--aus);
}
.haupt-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--aus);
}
.haupt-nav a:hover{color:#fff;}
.haupt-nav a:hover::after{transform:scaleX(1);}
.site-header.fest .haupt-nav a{color:var(--fg-muted);}
.site-header.fest .haupt-nav a:hover{color:var(--fg);}

.header-aktionen{display:flex;align-items:center;gap:16px;}
.tel-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:#fff;white-space:nowrap;transition:color .25s var(--aus);}
.site-header.fest .tel-link{color:var(--fg);}
.tel-link:hover{color:var(--signal-hell);}
.site-header.fest .tel-link:hover{color:var(--signal);}
.header-aktionen .btn{white-space:nowrap;}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:#fff;background:none;transition:color .25s var(--aus), transform .3s var(--feder);}
.icon-btn .ic{width:27px;height:27px;stroke-width:1.8;}
.site-header.fest .icon-btn{color:var(--signal);}
.icon-btn:active{transform:scale(.92);}

.nur-desktop{display:flex;}
.nur-mobil{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(94vh, 860px);
  display:flex;align-items:flex-end;
  padding-top:148px;padding-bottom:clamp(52px,5.4vw,78px);
  overflow:hidden;background:var(--ink);
}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 50%;z-index:0;}
.hero-schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(18,16,14,.94) 0%, rgba(18,16,14,.86) 32%,
             rgba(18,16,14,.62) 58%, rgba(18,16,14,.42) 100%);}
.hero-schleier-2{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(18,16,14,.75) 0%, rgba(18,16,14,0) 42%);}
.hero-inhalt{position:relative;z-index:2;max-width:790px;color:#fff;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
  padding:9px 15px;border:1px solid rgba(255,255,255,.26);border-radius:var(--r-pill);
  margin-bottom:26px;
}
.hero-kicker .punkt{width:7px;height:7px;border-radius:50%;background:var(--signal-hell);
  animation:puls 2.4s ease-in-out infinite;}
@keyframes puls{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.78);}}

h1.hero-h1{
  font-family:var(--font-body);font-size:clamp(14.5px, 3.5vw, 16px);font-weight:500;line-height:1.45;
  letter-spacing:.005em;color:rgba(255,255,255,.8);margin-bottom:14px;
}
.hero-inhalt .t-hero{color:#fff;margin-bottom:20px;}
.hero-inhalt .t-hero .hl{color:var(--signal-hell);}
.hero-text{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.8);
  max-width:56ch;margin-bottom:26px;}

.checks{display:grid;gap:11px;margin-bottom:32px;}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.45;}
.check-kreis{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--signal);color:#fff;
}
.check-kreis .ic{width:13px;height:13px;stroke-width:2.6;}
.hero-inhalt .checks li{color:rgba(255,255,255,.92);}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}

.hero-trust{display:flex;align-items:center;gap:13px;flex-wrap:wrap;}
.sterne{display:inline-flex;gap:2px;color:#F5B301;}
.sterne .ic{width:16px;height:16px;}
.hero-trust-text{font-size:14.5px;color:rgba(255,255,255,.82);}
.hero-trust-text strong{color:#fff;font-weight:600;}

/* ---------- Trust-Leiste (ohne Boxen, mit Trennlinien) ---------- */
.trustleiste{background:var(--sand-0);border-bottom:1px solid var(--line);}
.trustleiste-innen{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:30px;
}
.trust-punkt{
  display:flex;align-items:center;gap:13px;padding-inline:26px;
  border-left:1px solid var(--line);
}
.trust-punkt:first-child{border-left:0;padding-left:0;}
.trust-punkt .ic{width:23px;height:23px;color:var(--signal);stroke-width:1.6;}
.trust-punkt div{min-width:0;}
.trust-titel{font-size:15px;font-weight:600;line-height:1.3;}
.trust-sub{font-size:13px;color:var(--fg-soft);line-height:1.35;}

/* ---------- Leistungen: Bento ---------- */
.bento{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.leist{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--sand-0);
  box-shadow:var(--sh-card);
  transition:box-shadow .4s var(--aus), border-color .4s var(--aus), transform .45s var(--feder);
  display:flex;flex-direction:column;
}
.leist:hover{box-shadow:var(--sh-card-hover);border-color:var(--line-strong);transform:translateY(-3px);}
.leist-bild{position:relative;overflow:hidden;background:var(--sand-2);}
.leist-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--aus);}
.leist:hover .leist-bild img{transform:scale(1.045);}
.leist-nr{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  background:rgba(18,16,14,.72);color:#fff;padding:5px 9px;border-radius:var(--r-btn);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.leist-text{padding:24px 26px 28px;display:flex;flex-direction:column;gap:11px;flex:1 1 auto;}
.leist-text h3{font-family:var(--font-display);font-size:20px;font-weight:500;
  line-height:1.28;letter-spacing:-.014em;}
.leist-text p{font-size:15.5px;line-height:1.6;color:var(--fg-muted);}
.leist-liste{display:grid;gap:8px;margin-top:auto;padding-top:6px;}
.leist-liste li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;
  line-height:1.45;color:var(--fg);}
.leist-liste .ic{width:15px;height:15px;color:var(--signal);stroke-width:2.4;margin-top:4px;}

/* Hauptkachel */
.leist-gross{grid-column:span 2;grid-row:span 2;}
.leist-gross .leist-bild{aspect-ratio:auto;flex:1 1 auto;min-height:300px;}
.leist-gross .leist-text{padding:30px 34px 34px;gap:13px;flex:0 0 auto;}
.leist-gross .leist-liste{margin-top:4px;}
.leist-gross .leist-text h3{font-size:clamp(23px,2.2vw,29px);}
.leist-gross .leist-text p{font-size:16.5px;}
.leist-gross .leist-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;}
.leist-klein .leist-bild{aspect-ratio:4/3;}

.mehr-zeile{margin-top:26px;display:flex;justify-content:center;}
.leist-extra[hidden]{display:none;}

/* ---------- Foto-CTA-Band ---------- */
.foto-band{position:relative;overflow:hidden;background:var(--ink);
  padding-block:clamp(78px,9vw,132px);}
.foto-band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.foto-band .schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg, rgba(18,16,14,.93) 0%, rgba(18,16,14,.8) 46%, rgba(18,16,14,.5) 100%);}
.foto-band .container{position:relative;z-index:2;}
.foto-band-inhalt{max-width:640px;color:#fff;}
.foto-band-inhalt .t-h2{color:#fff;margin-bottom:16px;}
.foto-band-inhalt .t-h2 .hl{color:var(--signal-hell);}
.foto-band-inhalt p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.62;margin-bottom:28px;}
.foto-band-aktionen{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- Phasen-Progression ---------- */
.phasen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.phase{position:relative;}
.phase-bild{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background:var(--sand-2);aspect-ratio:3/2;position:relative;}
.phase-bild img{width:100%;height:100%;object-fit:cover;}
.phase-marke{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--ink);padding:7px 12px;border-radius:var(--r-pill);
  box-shadow:var(--sh-chip);
}
.phase-marke .balken{width:20px;height:3px;border-radius:2px;background:var(--line-strong);
  overflow:hidden;position:relative;}
.phase-marke .balken i{position:absolute;inset:0;background:var(--signal);
  transform-origin:left;transform:scaleX(var(--f,0));display:block;}
.phase-text{padding:20px 4px 0;}
.phase-text h3{font-family:var(--font-display);font-size:20px;font-weight:500;
  letter-spacing:-.014em;margin-bottom:8px;}
.phase-text p{font-size:15.5px;line-height:1.6;color:var(--fg-muted);}
.phasen-hinweis{margin-top:30px;display:flex;align-items:flex-start;gap:11px;
  font-size:13.5px;color:var(--fg-soft);line-height:1.55;max-width:74ch;}
.phasen-hinweis .ic{width:16px;height:16px;margin-top:3px;flex:0 0 auto;}

/* ---------- Sicherheit / Statik ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center;}
.split-bild{position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--sand-2);}
.split-bild img{width:100%;height:auto;}
.fakt-liste{display:grid;gap:2px;margin-top:8px;}
.fakt{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);}
.fakt:last-child{border-bottom:1px solid var(--line);}
.fakt-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:var(--r-btn);
  background:var(--signal-weich);color:var(--signal);}
.fakt-ic .ic{width:21px;height:21px;}
.fakt h3{font-family:var(--font-display);font-size:17.5px;font-weight:500;
  letter-spacing:-.01em;margin-bottom:5px;}
.fakt p{font-size:15px;line-height:1.58;color:var(--fg-muted);}

/* Freigestellte Figur ragt über die Sektionskante (erst ab 1100 px, sonst wird es eng) */
.ueberragt{position:relative;overflow:visible;z-index:2;}
.ueberragt .container{position:relative;}
.gebiet-figur{
  display:none;position:absolute;
  /* Ueberstand nach rechts nur so weit, wie der Containerrand hergibt */
  right:calc(-1 * min(28px, (100vw - 100%) / 2 - 16px));
  /* Fuesse sollen ueber die Sektionskante ragen -> Sektionspolster ausgleichen */
  bottom:calc(-1 * clamp(72px, 8.6vw, 128px) - 24px);
  width:var(--figur-breite);z-index:3;
  pointer-events:none;filter:drop-shadow(0 30px 26px rgba(18,16,14,.3));
}
.gebiet-figur img{width:100%;height:auto;}

/* ---------- Kosten ---------- */
.kosten-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.kosten-karte{
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--sand-0);
  padding:28px 28px 30px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .4s var(--aus), border-color .4s var(--aus);
}
.kosten-karte:hover{box-shadow:var(--sh-card-hover);border-color:var(--line-strong);}
.kosten-typ{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);}
.kosten-karte h3{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.014em;}
.kosten-karte p{font-size:15px;line-height:1.6;color:var(--fg-muted);}
.kosten-wert{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--fg);
}
.kosten-wert span{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:5px;}
.preis-faktoren{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--sand-1);padding:28px 30px;
}
.preis-faktoren h3{font-family:var(--font-display);font-size:19px;font-weight:500;
  letter-spacing:-.012em;margin-bottom:16px;}
.faktoren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 30px;}
.faktoren li{display:flex;align-items:flex-start;gap:10px;font-size:15px;
  line-height:1.5;color:var(--fg-muted);}
.faktoren .ic{width:15px;height:15px;color:var(--signal);stroke-width:2.4;margin-top:4px;flex:0 0 auto;}

/* ---------- Vergleich ---------- */
.vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;}
.v-karte{border-radius:var(--r-card);padding:30px 30px 34px;display:flex;flex-direction:column;gap:16px;}
.v-schlecht{background:var(--sand-2);border:1px solid var(--line);}
.v-gut{background:var(--ink);color:var(--on-dark);border:1px solid var(--ink);
  box-shadow:var(--sh-float);}
.v-kopf{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.v-gut .v-kopf{border-bottom-color:var(--line-dark);}
.v-kopf img{height:38px;width:auto;flex:0 0 auto;align-self:flex-start;}
.v-kopf .v-titel{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.012em;}
.v-liste{display:grid;gap:13px;}
.v-liste li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.5;}
.v-liste .ic{width:18px;height:18px;margin-top:3px;flex:0 0 auto;stroke-width:2.2;}
.v-schlecht .v-liste li{color:var(--fg-muted);}
.v-schlecht .v-liste .ic{color:#B9B3A7;}
.v-gut .v-liste li{color:var(--on-dark);}
.v-gut .v-liste .ic{color:var(--signal-hell);}
.v-fuss{margin-top:auto;padding-top:8px;}

/* ---------- Ablauf: vertikale Timeline ---------- */
.ablauf{position:relative;display:grid;gap:0;max-width:820px;}
.ablauf::before{
  content:"";position:absolute;left:26px;top:14px;bottom:34px;width:2px;
  background:linear-gradient(to bottom, var(--signal) 0%, var(--signal) var(--fortschritt,0%), var(--line) var(--fortschritt,0%));
  transition:background .6s linear;
}
.schritt{position:relative;display:grid;grid-template-columns:54px 1fr;gap:22px;
  padding-bottom:38px;}
.schritt:last-child{padding-bottom:0;}
.schritt-ic{
  position:relative;z-index:2;width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand-0);border:1.5px solid var(--line);color:var(--signal);
  transition:border-color .5s var(--aus), background-color .5s var(--aus), color .5s var(--aus);
}
.schritt-ic .ic{width:23px;height:23px;}
.schritt.aktiv .schritt-ic{background:var(--signal);border-color:var(--signal);color:#fff;}
.schritt-text{padding-top:5px;}
.schritt-nr{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:7px;}
.schritt-text h3{font-family:var(--font-display);font-size:20px;font-weight:500;
  letter-spacing:-.014em;margin-bottom:7px;}
.schritt-text p{font-size:15.5px;line-height:1.62;color:var(--fg-muted);max-width:56ch;}

/* ---------- Bewertungen ---------- */
.google-karte{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--sand-0);
  padding:22px 28px;box-shadow:var(--sh-card);margin-bottom:34px;
}
.gk-links{display:flex;align-items:center;gap:17px;}
.google-g{width:38px;height:38px;flex:0 0 auto;}
.gk-score{font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1;
  letter-spacing:-.02em;}
.gk-kopf{display:flex;align-items:center;gap:11px;margin-bottom:4px;}
.gk-text{font-size:14px;color:var(--fg-soft);}
.gk-text strong{color:var(--fg);font-weight:600;}
.gk-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--signal);transition:gap .3s var(--aus);}
.gk-link:hover{gap:12px;}

.bew-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.bew-karte{
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--sand-0);
  padding:26px 26px 24px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:14px;
}
.bew-kopf{display:flex;align-items:center;gap:12px;}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:14.5px;font-weight:600;color:#fff;
  background:var(--signal);letter-spacing:.01em;
}
.avatar.a2{background:var(--signal-tief);}
.avatar.a3{background:#5E5A50;}
.bew-name{font-size:15px;font-weight:600;line-height:1.2;}
.bew-karte p{font-size:15px;line-height:1.62;color:var(--fg-muted);flex:1 1 auto;}
.bew-verifiziert{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-soft);
  padding-top:12px;border-top:1px solid var(--line);}
.bew-verifiziert .ic{width:15px;height:15px;color:var(--signal);}


/* ---------- Einsatzgebiet ---------- */
.gebiet{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.6vw,64px);align-items:center;}
.kontakt-karte{
  background:var(--ink);color:var(--on-dark);border-radius:var(--r-card);
  padding:30px 32px;margin-top:26px;box-shadow:var(--sh-float);
}
.kk-zeile{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--line-dark);}
.kk-zeile:first-of-type{border-top:0;padding-top:0;}
.kk-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--r-btn);background:rgba(243,241,236,.08);color:var(--signal-hell);}
.kk-ic .ic{width:20px;height:20px;}
.kk-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:3px;}
.kk-wert{font-size:16px;font-weight:600;line-height:1.4;color:#fff;}
.kk-wert small{display:block;font-size:13.5px;font-weight:400;color:var(--on-dark-muted);margin-top:2px;}
.karte-bild{width:100%;}
.karte-bild img,.karte-bild picture{width:100%;height:auto;display:block;}

/* ---------- Angebot / Quiz ---------- */
.angebot-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.4vw,58px);align-items:start;}
.kontakt-wege{display:grid;gap:12px;margin-top:24px;}
.kw{
  display:flex;align-items:center;gap:15px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--sand-0);
  transition:border-color .35s var(--aus), transform .4s var(--feder), box-shadow .35s var(--aus);
}
.kw:hover{border-color:var(--line-strong);transform:translateX(3px);box-shadow:var(--sh-card-hover);}
.kw-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:var(--r-btn);background:var(--signal);color:#fff;}
.kw-ic.wa{background:#25D366;}
.kw-ic.mail{background:var(--ink);}
.kw-ic .ic{width:22px;height:22px;}
.kw > span:last-child{display:flex;flex-direction:column;min-width:0;}
.kw-label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-soft);margin-bottom:3px;}
.kw-wert{display:block;font-size:16px;font-weight:600;line-height:1.3;word-break:break-word;}

.quiz-karte{
  position:relative;background:var(--ink);color:var(--on-dark);
  border-radius:var(--r-card);padding:34px 34px 32px;box-shadow:var(--sh-float);
}
.quiz-stoerer{
  position:absolute;top:-16px;right:-6px;z-index:4;
  width:96px;height:96px;border-radius:50%;background:var(--signal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-11deg);box-shadow:0 12px 26px -14px rgba(168,28,22,.8);
  line-height:1.12;padding:8px;
}
.quiz-stoerer b{font-family:var(--font-display);font-size:19px;font-weight:600;display:block;}
.quiz-stoerer span{font-size:10px;letter-spacing:.03em;display:block;margin-top:3px;}
.quiz-logo{height:64px;width:auto;margin:0 auto 20px;align-self:center;}
.quiz-kopf[hidden]{display:none;}
.quiz-kopf{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-muted);margin-bottom:10px;}
.quiz-balken{height:4px;border-radius:2px;background:rgba(243,241,236,.14);overflow:hidden;margin-bottom:26px;}
.quiz-balken i{display:block;height:100%;width:20%;background:var(--signal);border-radius:2px;
  transition:width .55s var(--aus);}
.quiz-balken[hidden]{display:none;}
.q-titel{font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1.3;
  letter-spacing:-.016em;color:#fff;text-align:center;margin-bottom:20px;}
.q-sub{text-align:center;font-size:14px;color:var(--on-dark-muted);margin:-12px 0 20px;}
.q-grid{display:grid;gap:10px;}
.q-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.q-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 17px;border-radius:var(--r-btn);cursor:pointer;
  background:rgba(243,241,236,.055);border:1px solid rgba(243,241,236,.13);
  font-size:15px;font-weight:500;color:var(--on-dark);line-height:1.35;
  transition:background-color .3s var(--aus), border-color .3s var(--aus), transform .35s var(--feder);
}
.q-opt:hover{background:rgba(208,44,34,.15);border-color:var(--signal);transform:translateY(-2px);}
.q-opt .ic{width:20px;height:20px;color:var(--signal-hell);flex:0 0 auto;}
.q-feld{
  width:100%;padding:15px 17px;border-radius:var(--r-btn);
  background:rgba(243,241,236,.055);border:1px solid rgba(243,241,236,.15);
  color:#fff;font-size:15px;
}
.q-feld::placeholder{color:rgba(243,241,236,.44);}
.q-feld:focus{outline:none;border-color:var(--signal);background:rgba(243,241,236,.09);}
.q-zurueck{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;color:var(--on-dark-muted);cursor:pointer;transition:color .3s var(--aus);}
.q-zurueck:hover{color:#fff;}
.form-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
  color:var(--on-dark-muted);}
.form-consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--signal);width:16px;height:16px;}
.form-consent a{color:var(--signal-hell);text-decoration:underline;text-underline-offset:2px;}
.q-hinweis{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:var(--on-dark-muted);}
.q-hinweis .ic{width:14px;height:14px;}
.quiz-fertig{text-align:center;padding:16px 0 8px;}
.quiz-fertig .ic{width:52px;height:52px;color:var(--signal-hell);margin:0 auto 14px;}
.quiz-fertig strong{display:block;font-family:var(--font-display);font-size:22px;
  font-weight:500;color:#fff;margin-bottom:8px;}
.quiz-fertig p{color:var(--on-dark-muted);font-size:15px;}
.quiz-eilig{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-dark);}
.quiz-eilig-label{display:block;font-size:13px;color:var(--on-dark-muted);margin-bottom:12px;}
.quiz-eilig-btns{display:flex;justify-content:center;gap:12px;}
.eilig-btn{width:52px;height:52px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--signal);color:#fff;
  transition:transform .35s var(--feder);}
.eilig-btn.wa{background:#25D366;}
.eilig-btn:hover{transform:translateY(-3px);}

/* Google-Sterne unter dem Formular */
.form-google{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:13.5px;color:var(--on-dark-muted);
}
.form-google .google-g{width:20px;height:20px;}
.form-google strong{color:#fff;font-weight:600;}
.form-google .sterne .ic{width:14px;height:14px;}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin-inline:auto;}
.faq-eintrag{border-top:1px solid var(--line);}
.faq-eintrag:last-child{border-bottom:1px solid var(--line);}
.faq-frage{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;
  font-family:var(--font-display);font-size:17.5px;font-weight:500;letter-spacing:-.01em;
  line-height:1.4;transition:color .3s var(--aus);
}
.faq-frage:hover{color:var(--signal);}
.faq-frage .ic{width:20px;height:20px;flex:0 0 auto;color:var(--signal);
  transition:transform .42s var(--aus);}
.faq-eintrag.offen .faq-frage .ic{transform:rotate(180deg);}
.faq-antwort{overflow:hidden;height:0;transition:height .45s var(--aus);}
.faq-antwort-innen{padding:0 46px 26px 4px;font-size:16px;line-height:1.68;color:var(--fg-muted);}

/* ---------- Finale CTA ---------- */
.final-cta{position:relative;overflow:hidden;background:var(--ink);
  padding-block:clamp(84px,10vw,146px);text-align:center;}
.final-cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.final-cta .schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(18,16,14,.9) 0%, rgba(18,16,14,.78) 100%);}
.final-cta .container{position:relative;z-index:2;}
.final-cta-inhalt{max-width:720px;margin-inline:auto;color:#fff;}
.final-cta .t-h2{color:#fff;margin-bottom:16px;}
.final-cta .t-h2 .hl{color:var(--signal-hell);}
.final-cta p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.62;margin-bottom:30px;}
.final-aktionen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-3);color:var(--on-dark-muted);
  padding-block:clamp(52px,6vw,76px) 0;font-size:15px;}
.footer-oben{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:36px;
  padding-bottom:44px;}
.footer-logo{height:78px;width:auto;align-self:flex-start;flex:0 0 auto;margin-bottom:18px;}
.footer-mobil-logo{display:none;}
.footer-text{font-size:14.5px;line-height:1.65;max-width:38ch;}
.footer-titel{font-family:var(--font-display);font-size:15px;font-weight:500;color:#fff;
  margin-bottom:16px;letter-spacing:-.005em;}
.footer-liste{display:grid;gap:10px;}
.footer-liste a,.footer-liste li{font-size:14.5px;line-height:1.5;transition:color .28s var(--aus);}
.footer-liste a:hover{color:#fff;}
.footer-kontakt{display:grid;gap:11px;}
.footer-kontakt a{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;
  line-height:1.5;transition:color .28s var(--aus);}
.footer-kontakt a:hover{color:#fff;}
.footer-kontakt .ic{width:17px;height:17px;color:var(--signal-hell);margin-top:3px;flex:0 0 auto;}
.footer-unten{
  border-top:1px solid var(--line-dark);padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;
}
.footer-recht{display:flex;gap:20px;flex-wrap:wrap;}
.footer-recht a{transition:color .28s var(--aus);}
.footer-recht a:hover{color:#fff;}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;}
.modal[hidden]{display:none;}
.modal-hintergrund{position:absolute;inset:0;background:rgba(18,16,14,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:einblenden .3s var(--aus);}
@keyframes einblenden{from{opacity:0;}to{opacity:1;}}
.modal-karte{
  position:relative;z-index:2;width:min(480px,100%);max-height:92vh;overflow-y:auto;
  background:var(--sand-0);border-radius:var(--r-card);padding:34px 32px 30px;
  box-shadow:var(--sh-float);animation:hoch .45s var(--feder);
}
@keyframes hoch{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
.modal-zu{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg-soft);
  transition:background-color .3s var(--aus), color .3s var(--aus);}
.modal-zu:hover{background:var(--sand-2);color:var(--fg);}
.modal-karte h2{font-family:var(--font-display);font-size:24px;font-weight:500;
  letter-spacing:-.018em;line-height:1.25;margin-bottom:9px;padding-right:36px;}
.modal-sub{font-size:15px;line-height:1.55;color:var(--fg-muted);margin-bottom:22px;}
.lead-form{display:grid;gap:11px;}
.lead-form input,.lead-form textarea{
  width:100%;padding:15px 16px;border-radius:var(--r-btn);
  background:var(--sand-1);border:1px solid var(--line);font-size:15px;
  transition:border-color .3s var(--aus), background-color .3s var(--aus);
}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--signal);background:var(--sand-0);}
.lead-form textarea{resize:vertical;min-height:88px;}
/* Die Checkbox darf NICHT die 100-%-Breite der Formularfelder erben (Reihenfolge schlägt hier) */
.lead-form .form-consent{color:var(--fg-muted);}
.lead-form .form-consent input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto;}
.lead-form .form-consent > span{flex:1 1 auto;min-width:0;}
.lead-form .form-consent a{color:var(--signal);}
.form-hinweis{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:var(--fg-soft);}
.form-hinweis .ic{width:14px;height:14px;}
.modal-google{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--fg-soft);
}
.modal-google .google-g{width:19px;height:19px;}
.modal-google strong{color:var(--fg);font-weight:600;}
.modal-google .sterne .ic{width:14px;height:14px;}
.modal-schnell{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px;}
.modal-schnell a{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 6px;border-radius:var(--r-btn);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;transition:border-color .3s var(--aus), color .3s var(--aus);}
.modal-schnell a:hover{border-color:var(--signal);color:var(--signal);}
.form-erfolg{text-align:center;padding:18px 0;}
.form-erfolg .ic{width:52px;height:52px;color:var(--signal);margin:0 auto 14px;}
.form-erfolg strong{display:block;font-family:var(--font-display);font-size:21px;
  font-weight:500;color:var(--fg);margin-bottom:8px;}
.form-erfolg p{color:var(--fg-muted);font-size:15px;}

/* ---------- Promo-Popup ---------- */
.promo{position:fixed;inset:0;z-index:115;display:flex;align-items:center;justify-content:center;padding:20px;}
.promo[hidden]{display:none;}
.promo-hintergrund{position:absolute;inset:0;background:rgba(18,16,14,.7);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.promo-karte{
  position:relative;z-index:2;width:min(430px,100%);max-height:92vh;overflow-y:auto;
  background:var(--sand-0);border-radius:var(--r-card);overflow-x:hidden;
  box-shadow:var(--sh-float);text-align:center;animation:hoch .5s var(--feder);
}
.promo-zu{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sh-chip);}
.promo-bild{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;}
.promo-badge{
  position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  background:var(--signal);color:#fff;font-family:var(--font-display);
  font-size:13.5px;font-weight:600;padding:8px 18px;border-radius:var(--r-pill);
  white-space:nowrap;box-shadow:0 8px 20px -12px rgba(168,28,22,.9);
}
.promo-body{padding:34px 26px 28px;}
.promo-body h3{font-family:var(--font-display);font-size:21px;font-weight:500;
  line-height:1.3;letter-spacing:-.016em;margin-bottom:11px;}
.promo-body > p{font-size:15px;line-height:1.6;color:var(--fg-muted);margin-bottom:18px;}
.promo-checks{display:grid;gap:9px;text-align:left;margin-bottom:22px;}
.promo-checks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;}
.promo-checks .ic{width:15px;height:15px;color:var(--signal);stroke-width:2.4;margin-top:4px;flex:0 0 auto;}
.promo-aktionen{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ---------- Floating Kontakt-Button ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;
  flex-direction:column-reverse;align-items:flex-end;gap:10px;}
.fab-haupt{
  width:58px;height:58px;border-radius:50%;background:var(--signal);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -14px rgba(168,28,22,.85);
  transition:transform .4s var(--feder), background-color .3s var(--aus);
}
.fab-haupt .ic{width:25px;height:25px;transition:transform .4s var(--aus);}
.fab.offen .fab-haupt{background:var(--ink);}
.fab.offen .fab-haupt .ic{transform:rotate(90deg);}
.fab-haupt:hover{transform:translateY(-3px);}
.fab-liste{display:grid;gap:10px;justify-items:end;}
.fab-liste[hidden]{display:none;}
.fab-eintrag{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;
  border-radius:var(--r-pill);background:var(--sand-0);color:var(--fg);
  font-size:14px;font-weight:600;white-space:nowrap;box-shadow:var(--sh-float);
  border:1px solid var(--line);
  animation:fab-auf .38s var(--feder) backwards;
}
.fab-eintrag:nth-child(1){animation-delay:.02s;}
.fab-eintrag:nth-child(2){animation-delay:.07s;}
.fab-eintrag:nth-child(3){animation-delay:.12s;}
@keyframes fab-auf{from{opacity:0;transform:translateY(10px) scale(.94);}to{opacity:1;transform:none;}}
.fab-ic{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--signal);color:#fff;flex:0 0 auto;}
.fab-ic.wa{background:#25D366;}
.fab-ic.mail{background:var(--ink);}
.fab-ic .ic{width:17px;height:17px;}

/* ---------- Cookie-Banner ---------- */
.cookie-wall{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.cookie-wall[hidden]{display:none;}
.cookie-hintergrund{position:absolute;inset:0;background:rgba(18,16,14,.76);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.cookie-karte{
  position:relative;z-index:2;width:min(520px,100%);max-height:92vh;overflow-y:auto;
  background:var(--sand-0);border-radius:var(--r-card);padding:34px 32px 30px;
  box-shadow:var(--sh-float);text-align:center;
}
.cookie-logo{height:58px;width:auto;margin:0 auto 20px;align-self:center;}
.cookie-titel{font-family:var(--font-display);font-size:22px;font-weight:500;
  letter-spacing:-.016em;margin-bottom:12px;}
.cookie-text{font-size:14.5px;line-height:1.62;color:var(--fg-muted);margin-bottom:16px;}
.cookie-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  font-size:13.5px;color:var(--fg-soft);margin-bottom:22px;}
.cookie-links a{color:var(--signal);text-decoration:underline;text-underline-offset:2px;}
.cookie-aktionen{display:grid;gap:10px;}
.cookie-reihe{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-cookie-neben{
  min-height:48px;border-radius:var(--r-btn);border:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--fg-muted);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .3s var(--aus), color .3s var(--aus);
}
.btn-cookie-neben:hover{border-color:var(--fg);color:var(--fg);}
.cookie-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:left;display:grid;gap:14px;}
.cookie-panel[hidden]{display:none;}
.cookie-kategorie{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.cookie-kat-label{font-size:14.5px;font-weight:600;margin-bottom:3px;}
.cookie-kat-text{font-size:13px;line-height:1.5;color:var(--fg-soft);}
.cookie-immer{font-size:12px;color:var(--fg-soft);white-space:nowrap;padding-top:2px;}
.cookie-schalter{position:relative;width:46px;height:26px;flex:0 0 auto;cursor:pointer;}
.cookie-schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.cookie-bahn{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-strong);
  transition:background-color .3s var(--aus);}
.cookie-bahn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .32s var(--feder);}
.cookie-schalter input:checked + .cookie-bahn{background:var(--signal);}
.cookie-schalter input:checked + .cookie-bahn::after{transform:translateX(20px);}

/* ---------- Rechtsseiten ---------- */
.recht-seite{padding-top:130px;padding-bottom:clamp(60px,7vw,100px);}
.recht-seite h1{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);
  font-weight:500;letter-spacing:-.022em;line-height:1.18;margin-bottom:28px;}
.recht-seite h2{font-family:var(--font-display);font-size:21px;font-weight:500;
  letter-spacing:-.014em;margin:38px 0 12px;}
.recht-seite h3{font-family:var(--font-display);font-size:17.5px;font-weight:500;margin:26px 0 8px;}
.recht-seite p,.recht-seite li{font-size:16px;line-height:1.72;color:var(--fg-muted);margin-bottom:12px;}
.recht-seite ul{list-style:disc;padding-left:22px;margin-bottom:16px;}
.recht-seite a{color:var(--signal);text-decoration:underline;text-underline-offset:2px;}
.recht-seite strong{color:var(--fg);font-weight:600;}
.recht-seite table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:15px;}
.recht-seite th,.recht-seite td{border:1px solid var(--line);padding:11px 13px;text-align:left;
  vertical-align:top;color:var(--fg-muted);}
.recht-seite th{background:var(--sand-1);color:var(--fg);font-weight:600;}
.zurueck-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--signal);margin-bottom:26px;text-decoration:none;}

/* ---------- 404 ---------- */
.fehler-seite{min-height:78vh;display:flex;align-items:center;padding-top:130px;padding-bottom:70px;}
.fehler-nr{font-family:var(--font-display);font-size:clamp(74px,13vw,150px);font-weight:500;
  line-height:.9;letter-spacing:-.05em;color:var(--signal);margin-bottom:20px;}

/* ---------- Reveal-Engine ---------- */
.auf{opacity:0;transform:translateY(10px);
  transition:opacity .62s var(--aus), transform .62s var(--aus);}
.auf.sichtbar{opacity:1;transform:none;}
.auf-1{transition-delay:.06s;} .auf-2{transition-delay:.12s;} .auf-3{transition-delay:.18s;}
.auf-4{transition-delay:.24s;} .auf-5{transition-delay:.3s;} .auf-6{transition-delay:.36s;}

/* Häkchen-Draw */
.check-kreis .ic path,.leist-liste .ic path,.promo-checks .ic path,.faktoren .ic path{
  stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset .5s var(--aus) .12s;
}
.sichtbar .check-kreis .ic path,.sichtbar .leist-liste .ic path,
.sichtbar .promo-checks .ic path,.sichtbar .faktoren .ic path,
.check-kreis.gezeichnet .ic path{stroke-dashoffset:0;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .auf{opacity:1;transform:none;}
  .check-kreis .ic path,.leist-liste .ic path,.promo-checks .ic path,.faktoren .ic path{stroke-dashoffset:0;}
}

/* =========================================================
   RESPONSIVE — Overrides stehen NACH den Basisregeln
   ========================================================= */
/* Ab Tablet bekommt die freigestellte Figur eine eigene Spur rechts,
   damit sie die Karte nicht überdeckt. */
@media (min-width: 1100px){
  /* Spur fuer die Figur: ihre Breite minus dem Ueberstand, plus Abstand zur Karte */
  .gebiet{grid-template-columns:.9fr 1.1fr;padding-right:calc(var(--figur-breite) - 28px + 30px);}
  .gebiet-figur{display:block;}
}
@media (max-width: 1080px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .leist-gross{grid-column:span 2;grid-row:auto;}
  .leist-gross .leist-bild{aspect-ratio:16/9;}
  .bew-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bew-grid > :nth-child(3){grid-column:span 2;}
  .footer-oben{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
}

@media (max-width: 940px){
  .nur-desktop{display:none !important;}
  .nur-mobil{display:flex;}
  .haupt-nav{display:none;}
  .header-inner{min-height:70px;}
  .site-header.fest .header-inner{min-height:64px;}
  .logo-img{height:42px;}
  .site-header.fest .logo-img{height:40px;}
  .header-aktionen{gap:6px;}

  .hero{min-height:auto;padding-top:120px;padding-bottom:56px;}
  .hero-schleier{background:linear-gradient(180deg, rgba(18,16,14,.92) 0%, rgba(18,16,14,.8) 45%, rgba(18,16,14,.9) 100%);}
  .hero-inhalt{max-width:none;}

  .trustleiste-innen{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0;padding-block:24px;}
  .trust-punkt{padding-inline:16px;}
  .trust-punkt:nth-child(odd){border-left:0;padding-left:0;}

  .split{grid-template-columns:1fr;gap:32px;}
  .kosten-grid{grid-template-columns:1fr;}
  .faktoren{grid-template-columns:1fr;}
  .vergleich{grid-template-columns:1fr;}
  .phasen{grid-template-columns:1fr;gap:26px;}
  .gebiet{grid-template-columns:1fr;gap:30px;}
  .angebot-grid{grid-template-columns:1fr;gap:34px;}
  /* Die gedrehte Ecke ragt sonst über den Viewport (Rotation vergrößert die Box) */
  .quiz-stoerer{right:10px;}
  .bew-grid{grid-template-columns:1fr;}
  .bew-grid > :nth-child(3){grid-column:auto;}
  .footer-oben{grid-template-columns:1fr;gap:30px;text-align:center;}
  .footer-logo-wrap{display:none;}
  .footer-mobil-logo{display:block;height:84px;width:auto;margin:0 auto 26px;}
  .footer-text{margin-inline:auto;}
  .footer-liste,.footer-kontakt{justify-items:center;}
  .footer-kontakt a{justify-content:center;}
  .footer-unten{justify-content:center;text-align:center;}
  .footer-recht{justify-content:center;}
}

@media (max-width: 640px){
  body{font-size:16.5px;}
  .container,.container-eng{width:min(100% - 32px, 100%);}
  .bento{grid-template-columns:1fr;}
  .leist-gross{grid-column:auto;}
  .leist-gross .leist-text{padding:24px 24px 28px;}
  .leist-gross .leist-liste{grid-template-columns:1fr;}
  .q-grid-2{grid-template-columns:1fr;}
  .hero-aktionen{flex-direction:column;align-items:stretch;}
  .hero-aktionen .btn{width:100%;}
  .final-aktionen{flex-direction:column;align-items:stretch;}
  .final-aktionen .btn{width:100%;}
  .foto-band-aktionen{flex-direction:column;align-items:stretch;}
  .foto-band-aktionen .btn{width:100%;}
  .quiz-karte{padding:28px 22px 26px;}
  .quiz-stoerer{width:82px;height:82px;top:-14px;right:2px;}
  .quiz-stoerer b{font-size:16px;}
  .quiz-stoerer span{font-size:9px;}
  .modal-karte{padding:30px 22px 26px;}
  .promo-aktionen{grid-template-columns:1fr;}
  .cookie-karte{padding:28px 22px 26px;}
  .cookie-reihe{grid-template-columns:1fr;}
  .kosten-karte{padding:24px 22px 26px;}
  .v-karte{padding:26px 22px 28px;}
  .preis-faktoren{padding:24px 22px;}
  .kontakt-karte{padding:26px 22px;}
  .faq-antwort-innen{padding-right:8px;}
  .ablauf::before{left:22px;}
  .schritt{grid-template-columns:46px 1fr;gap:16px;}
  .schritt-ic{width:46px;height:46px;}
  .schritt-ic .ic{width:20px;height:20px;}
  .fab{right:14px;bottom:14px;}
}

@media (max-width: 400px){
  .trustleiste-innen{grid-template-columns:1fr;}
  .trust-punkt{border-left:0;padding-left:0;}
  .modal-schnell{grid-template-columns:1fr;}
}