/* ==========================================================================
   AB Scheibenreinigung – Designsystem
   Autor: Relaunch 2026
   Aufbau: 01 Tokens · 02 Reset · 03 Typo · 04 Layout · 05 Buttons
           06 Header · 07 Hero/Glas · 08 Sections · 09 Cards · 10 Stats
           11 Vorher/Nachher · 12 Konfigurator · 13 Footer · 14 Overlays
           15 Animationen · 16 Utilities
   ========================================================================== */

/* ---------- Fonts (lokal gehostet – kein Google-Request, DSGVO-konform) --- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'InterVar';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  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:'InterVar';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================ 01 TOKENS ================================= */
:root{
  /* Marke – abgeleitet aus Logo (Grün) + Arbeitskleidung (Anthrazit) */
  --brand-500:#5FBB46;
  --brand-400:#78D05E;
  --brand-300:#9BE383;
  --brand-600:#4A9B36;
  --brand-700:#37782A;
  /* Textvariante: erreicht auf Weiß >= 4.5:1 (WCAG AA) */
  --brand-ink:#3A8129;

  /* Glas / Reflexion */
  --glass-cyan:#8FE6DA;
  --glass-blue:#B9D9E8;

  /* Ink-Skala (dunkle Flächen) */
  --ink-950:#070B0D;
  --ink-900:#0B1114;
  --ink-850:#0F171B;
  --ink-800:#141F24;
  --ink-700:#1D2C33;
  --ink-600:#2A3D45;
  --ink-500:#3D555E;

  /* Helle Flächen */
  --paper:#FFFFFF;
  --paper-soft:#F5F8F7;
  --paper-mute:#EBF1EF;
  --line:#DCE5E3;
  --line-strong:#C3D1CE;

  /* Text */
  --tx-dark:#0C1417;
  --tx-body:#3C4E55;
  --tx-mute:#5A6D74;   /* auf Weiß 5,4:1 und auf --paper-soft 4,9:1 → WCAG AA */
  --tx-light:#FFFFFF;
  --tx-light-mute:rgba(255,255,255,.72);
  --tx-light-faint:rgba(255,255,255,.52);

  /* Semantik */
  --ok:#3FA34D; --warn:#D68A22; --err:#D2483F;

  /* Radius */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;

  /* Schatten */
  --sh-sm:0 2px 8px rgba(8,20,24,.06);
  --sh-md:0 12px 32px -12px rgba(8,20,24,.18);
  --sh-lg:0 32px 80px -28px rgba(8,20,24,.32);
  --sh-glow:0 18px 44px -18px rgba(95,187,70,.55);

  /* Typo-Skala (fluid) */
  --fs-display:clamp(2.6rem,1.1rem + 6.2vw,6.2rem);
  --fs-h1:clamp(2.2rem,1.2rem + 4.2vw,4.4rem);
  --fs-h2:clamp(1.9rem,1.15rem + 2.9vw,3.4rem);
  --fs-h3:clamp(1.35rem,1.05rem + 1.2vw,1.95rem);
  --fs-h4:clamp(1.1rem,1rem + .5vw,1.35rem);
  --fs-lead:clamp(1.05rem,.98rem + .48vw,1.3rem);
  --fs-body:clamp(1rem,.97rem + .16vw,1.075rem);
  --fs-sm:.925rem;
  --fs-xs:.8rem;

  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(4.5rem,3rem + 7vw,9rem);

  /* Layout */
  --wrap:1240px; --wrap-narrow:820px; --gutter:clamp(1.15rem,4vw,2.5rem);

  /* Motion */
  --ease-out:cubic-bezier(.22,.75,.28,1);
  --ease-soft:cubic-bezier(.32,.72,.24,1);
  --t-fast:.18s; --t-med:.36s; --t-slow:.7s;

  --header-h:76px;
}

/* ============================ 02 RESET ================================== */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html:focus-within{scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  font-family:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--tx-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
:where(:focus-visible){outline:3px solid var(--brand-400);outline-offset:3px;border-radius:6px;}
::selection{background:var(--brand-400);color:var(--ink-950);}

/* ============================ 03 TYPOGRAFIE ============================= */
h1,h2,h3,h4,h5,.font-display{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--tx-dark);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.018em;}
h4{font-size:var(--fs-h4);line-height:1.3;letter-spacing:-.012em;}
p{text-wrap:pretty;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--tx-body);}
strong,b{font-weight:650;color:var(--tx-dark);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:'Manrope',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);
  margin-bottom:var(--sp-4);
  flex-wrap:wrap;max-width:100%;
}
/* Sehr schmale Displays: lange Eyebrow-Wörter dürfen nicht überstehen */
@media(max-width:359px){
  .eyebrow{letter-spacing:.1em;font-size:.7rem;}
  .eyebrow::before{width:16px;}
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-500),transparent);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--tx-light);}
.on-dark p,.on-dark li{color:var(--tx-light-mute);}
.on-dark .eyebrow{color:var(--brand-300);}
.on-dark strong{color:var(--tx-light);}

.tx-brand{color:var(--brand-500);}
.tx-gradient{
  background:linear-gradient(104deg,var(--brand-300) 0%,var(--glass-cyan) 45%,var(--brand-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================ 04 LAYOUT ================================= */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;}
.wrap-narrow{width:min(100% - var(--gutter)*2,var(--wrap-narrow));margin-inline:auto;}
.section{padding-block:var(--section-y);position:relative;}
.section--dark{background:var(--ink-900);color:var(--tx-light-mute);}
.section--soft{background:var(--paper-soft);}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,1.4rem + 3vw,4.5rem);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-head p{margin-top:var(--sp-4);font-size:var(--fs-lead);}

.grid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.75rem);}
/* Verhindert, dass ein langes, nicht umbrechbares Wort die Spalte aufbläht */
.grid > *{min-width:0;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));}
.split{display:grid;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;}
  .split--wide-left{grid-template-columns:1.15fr .85fr;}
  .split--wide-right{grid-template-columns:.85fr 1.15fr;}}

/* Sanfter Übergang zwischen hell und dunkel */
.section-fade-top::before,
.section-fade-bottom::after{
  content:"";position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:1;
}
.section-fade-top::before{top:0;background:linear-gradient(to bottom,var(--ink-900),transparent);}
.section-fade-bottom::after{bottom:0;background:linear-gradient(to top,var(--ink-900),transparent);}

/* ============================ 05 BUTTONS ================================ */
.btn{
  --btn-bg:var(--brand-500);--btn-tx:#04140A;--btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:1.05em 1.9em;min-height:56px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-tx);border:1.5px solid var(--btn-bd);
  cursor:pointer;isolation:isolate;overflow:hidden;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-med) var(--ease-out),
             background-color var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease-out);
  will-change:transform;
}
.btn::after{ /* Glanz-Wisch (Microinteraction) */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .62s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform var(--t-med) var(--ease-out);}
.btn:hover svg{transform:translateX(3px);}

.btn--primary{box-shadow:var(--sh-glow);}
.btn--primary:hover{--btn-bg:var(--brand-400);}
.btn--ghost{--btn-bg:transparent;--btn-tx:var(--tx-dark);--btn-bd:var(--line-strong);}
.btn--ghost:hover{--btn-bd:var(--tx-dark);}
.on-dark .btn--ghost,.btn--ghost-light{
  --btn-bg:rgba(255,255,255,.05);--btn-tx:#fff;--btn-bd:rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.on-dark .btn--ghost:hover,.btn--ghost-light:hover{--btn-bd:rgba(255,255,255,.6);--btn-bg:rgba(255,255,255,.1);}
.btn--dark{--btn-bg:var(--ink-900);--btn-tx:#fff;}
.btn--dark:hover{--btn-bg:var(--ink-700);}
.btn--sm{padding:.75em 1.35em;min-height:46px;font-size:.925rem;}
.btn--lg{padding:1.2em 2.3em;min-height:64px;font-size:1.075rem;}
.btn--block{display:flex;width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-weight:650;color:var(--brand-ink);
  border-bottom:1.5px solid transparent;transition:border-color var(--t-med),gap var(--t-med);
  /* Trefferfläche auf >=44px vergrößern, ohne das Layout zu verschieben */
  padding-block:.6rem;margin-block:-.6rem;
}
.link-arrow:hover{border-color:currentColor;gap:.8em;}
.on-dark .link-arrow{color:var(--brand-300);}

/* ============================ 06 HEADER ================================= */
.topbar{
  background:var(--ink-950);color:var(--tx-light-faint);font-size:var(--fs-xs);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:38px;flex-wrap:wrap;}
.topbar a:hover{color:#fff;}
.topbar ul{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;}
@media(max-width:640px){.topbar__hide-sm{display:none;}}

.header{
  position:sticky;top:0;z-index:90;
  background:rgba(11,17,20,.72);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background var(--t-med),border-color var(--t-med),box-shadow var(--t-med);
}
.header.is-solid{background:rgba(7,11,13,.94);box-shadow:0 12px 40px -20px rgba(0,0,0,.8);}
.header__in{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--header-h);}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;padding-block:.25rem;}  /* >=44px Trefferfläche */
.brand img{width:auto;height:42px;}
.brand__tx{display:none;font-family:'Manrope',sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;color:#fff;line-height:1.15;}
.brand__tx span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-300);}
@media(min-width:520px){.brand__tx{display:block;}}

.nav{margin-left:auto;display:none;}
.nav ul{display:flex;align-items:center;gap:clamp(.25rem,.7vw,.7rem);white-space:nowrap;}
.nav a{
  position:relative;display:block;padding:.55rem .7rem;border-radius:var(--r-xs);
  font-size:.94rem;font-weight:550;color:var(--tx-light-mute);transition:color var(--t-fast);
  white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.28rem;height:2px;border-radius:2px;
  background:var(--brand-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--ease-out);
}
.nav a:hover{color:#fff;}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
/* Kopfzeile: Platzberechnung
   ---------------------------------------------------------------
   Mit acht Navigationspunkten brauchen Marke, Navigation und Button
   zusammen rund 1.480 px. Der Inhaltsrahmen ist aber auf 1.240 px
   begrenzt – der Button wurde deshalb auf 42 px zusammengedrueckt und
   sein Text von overflow:hidden abgeschnitten. Sichtbar als gruener
   Kreis mit "nfrage arten".

   Drei Aenderungen loesen das:
   a) Der Button schrumpft nie mehr. Ein abgeschnittener Aufruf zum
      Handeln ist schlimmer als ein Umbruch an anderer Stelle.
   b) Die Kopfzeile darf breiter werden als der uebrige Inhalt.
   c) Die waagerechte Navigation erscheint erst, wenn sie wirklich
      passt; darunter uebernimmt das Menue.
   --------------------------------------------------------------- */
.header__cta{display:none;flex:0 0 auto;white-space:nowrap;}
@media(min-width:1440px){.nav{display:block;}.header__cta{display:inline-flex;margin-left:var(--sp-4);}}
/* .wrap setzt seine Breite ueber width:min(100% - 2*gutter, var(--wrap)).
   Ein max-width prallt daran ab – deshalb wird die Variable selbst
   ueberschrieben. Nur fuer die Kopfzeile; der uebrige Inhalt bleibt bei
   1240 px, weil Fliesstext sonst zu breit laeuft. */
@media(min-width:1440px){.header .wrap{--wrap:1440px;}}

.burger{
  margin-left:auto;width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
}
@media(min-width:1440px){.burger{display:none;}}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:background var(--t-fast);}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--t-med) var(--ease-out);
}
.burger span::before{top:-6px;}.burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:0;z-index:100;background:var(--ink-950);
  display:flex;flex-direction:column;padding:var(--gutter);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--ease-soft),visibility .5s;
}
.mobile-nav.is-open{transform:translateY(0);visibility:visible;}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);}
.mobile-nav__close{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:1.6rem;line-height:1;}
.mobile-nav ul{margin-top:var(--sp-6);display:grid;gap:.35rem;}
.mobile-nav ul a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.5rem,1.1rem + 2vw,2.2rem);
  color:#fff;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(14px);
}
.mobile-nav.is-open ul a{animation:mnav-in .5s var(--ease-out) forwards;}
.mobile-nav ul li:nth-child(1) a{animation-delay:.08s}
.mobile-nav ul li:nth-child(2) a{animation-delay:.13s}
.mobile-nav ul li:nth-child(3) a{animation-delay:.18s}
.mobile-nav ul li:nth-child(4) a{animation-delay:.23s}
.mobile-nav ul li:nth-child(5) a{animation-delay:.28s}
.mobile-nav ul li:nth-child(6) a{animation-delay:.33s}
@keyframes mnav-in{to{opacity:1;transform:none;}}
.mobile-nav__foot{margin-top:auto;display:grid;gap:.75rem;padding-top:var(--sp-6);}
.mobile-nav__foot .btn{width:100%;}
.mobile-nav__meta{color:var(--tx-light-faint);font-size:var(--fs-sm);text-align:center;}

/* ============================ 07 HERO / GLAS ============================= */
.hero{
  position:relative;background:var(--ink-950);color:#fff;overflow:hidden;
  min-height:clamp(600px,92svh,980px);display:flex;align-items:center;
  padding-block:clamp(4rem,2rem + 8vw,7rem);
}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  transform:scale(1.08);will-change:transform;}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 20%,rgba(95,187,70,.16),transparent 58%),
    radial-gradient(90% 70% at 8% 92%,rgba(143,230,218,.12),transparent 60%),
    linear-gradient(104deg,rgba(7,11,13,.94) 0%,rgba(7,11,13,.82) 42%,rgba(7,11,13,.42) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Hinweis: .hero__in erbt die Breite von .wrap – hier nur Stapelkontext setzen. */
.hero__in{position:relative;z-index:3;}
.hero__grid{display:grid;gap:clamp(2.5rem,1.5rem + 5vw,4.5rem);align-items:center;}
@media(min-width:1024px){.hero__grid{grid-template-columns:1.06fr .94fr;}}

.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .6rem;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.88);
  margin-bottom:var(--sp-5);
}
.hero__badge b{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--brand-500);color:#04140A;font-size:.7rem;
}
.hero h1{
  font-size:var(--fs-display);color:#fff;letter-spacing:-.038em;line-height:.98;
}
.hero h1 .line{display:block;overflow:hidden;}
.hero h1 .line > span{display:block;transform:translateY(105%);}
.hero.is-ready h1 .line > span{animation:line-up .95s var(--ease-soft) forwards;}
.hero h1 .line:nth-child(2) > span{animation-delay:.09s;}
.hero h1 .line:nth-child(3) > span{animation-delay:.18s;}
@keyframes line-up{to{transform:none;}}

.hero__sub{
  margin-top:var(--sp-5);max-width:34rem;font-size:var(--fs-lead);color:rgba(255,255,255,.8);
  opacity:0;transform:translateY(16px);
}
.hero__actions{
  margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:.85rem;
  opacity:0;transform:translateY(16px);
}
.hero__trust{
  margin-top:var(--sp-7);display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-6);
  opacity:0;transform:translateY(16px);
}
.hero.is-ready .hero__sub{animation:fade-up .8s .28s var(--ease-out) forwards;}
.hero.is-ready .hero__actions{animation:fade-up .8s .38s var(--ease-out) forwards;}
.hero.is-ready .hero__trust{animation:fade-up .8s .48s var(--ease-out) forwards;}
@keyframes fade-up{to{opacity:1;transform:none;}}

.hero__trust li{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-sm);color:rgba(255,255,255,.75);}
.hero__trust svg{width:19px;height:19px;color:var(--brand-400);flex:none;}

/* --- Glasscheiben-Wischeffekt (Canvas) --- */
.glasspane{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;max-width:520px;margin-inline:auto;width:100%;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.22);
  background:var(--ink-800);
  touch-action:pan-y;
}
@media(min-width:1024px){.glasspane{aspect-ratio:3/4;max-width:none;}}
.glasspane__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.glasspane__canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;z-index:2;}
.glasspane__frame{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 90px rgba(255,255,255,.06);
}
.glasspane__glare{
  position:absolute;inset:-20%;z-index:3;pointer-events:none;
  background:linear-gradient(118deg,transparent 38%,rgba(255,255,255,.17) 46%,rgba(255,255,255,.05) 52%,transparent 60%);
  transform:translateX(-14%);
}
.glasspane__hint{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.55rem 1rem;border-radius:var(--r-pill);
  background:rgba(7,11,13,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.9);
  transition:opacity var(--t-med);
}
.glasspane__hint svg{width:16px;height:16px;animation:wipe-hint 2.4s var(--ease-soft) infinite;}
@keyframes wipe-hint{0%,100%{transform:translateX(-4px) rotate(-8deg);}50%{transform:translateX(4px) rotate(8deg);}}
.glasspane.is-clean .glasspane__hint{opacity:0;}
.glasspane__tag{
  position:absolute;top:1rem;left:1rem;z-index:4;
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:rgba(95,187,70,.92);color:#04140A;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
}

.hero__scroll{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:4;
  display:none;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
@media(min-width:1024px){.hero__scroll{display:flex;}}
.hero__scroll i{display:block;width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.5),transparent);}
.hero__scroll i::after{content:"";display:block;width:1px;height:14px;background:var(--brand-400);
  animation:scroll-dot 2.1s var(--ease-soft) infinite;}
@keyframes scroll-dot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(42px);opacity:0}}

/* ============================ 08 SECTIONS =============================== */
.marquee{
  border-block:1px solid var(--line);background:var(--paper-soft);
  padding-block:1.15rem;overflow:hidden;
}
.marquee__track{display:flex;gap:3.5rem;width:max-content;animation:marquee 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee span{
  display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;color:var(--tx-mute);
}
.marquee span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-500);}
@keyframes marquee{to{transform:translateX(-50%);}}

.bandaid{ /* Zitat-/Aussage-Band */
  background:var(--ink-900);color:#fff;border-radius:var(--r-xl);
  padding:clamp(2rem,1.2rem + 3.4vw,4rem);
  position:relative;overflow:hidden;
}
.bandaid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 130% at 100% 0%,rgba(95,187,70,.2),transparent 60%);
}
.bandaid > *{position:relative;}

/* ============================ 09 CARDS ================================== */
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.4rem,1rem + 1.2vw,2rem);
  display:flex;flex-direction:column;gap:var(--sp-3);overflow:hidden;isolation:isolate;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-med);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 100% at 0% 0%,rgba(95,187,70,.09),transparent 62%);
  transition:opacity var(--t-med);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-strong);}
.card:hover::before{opacity:1;}
.card__icon{
  width:52px;height:52px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,var(--brand-500),var(--brand-600));color:#fff;
  box-shadow:0 10px 24px -12px rgba(95,187,70,.9);
  transition:transform var(--t-med) var(--ease-out);
}
.card:hover .card__icon{transform:rotate(-6deg) scale(1.06);}
.card__icon svg{width:26px;height:26px;}
.card h3{margin-top:var(--sp-2);}
.card p{font-size:var(--fs-sm);}
.card__foot{margin-top:auto;padding-top:var(--sp-3);}

.card--dark{background:var(--ink-850);border-color:rgba(255,255,255,.09);}
.card--dark h3{color:#fff;}
.card--dark p{color:var(--tx-light-mute);}
.card--dark:hover{border-color:rgba(255,255,255,.22);box-shadow:0 30px 70px -34px rgba(0,0,0,.9);}

/* Breites Bildband (Unterseiten) */
.imgband{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-lg);
  aspect-ratio:16/9;
}
@media(max-width:700px){.imgband{aspect-ratio:4/3;}}
.imgband img{width:100%;height:100%;object-fit:cover;}
.imgband figcaption{
  position:absolute;right:.9rem;bottom:.9rem;z-index:2;max-width:62%;
  padding:.35rem .7rem;border-radius:6px;
  background:rgba(7,11,13,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  font-size:.68rem;color:rgba(255,255,255,.8);line-height:1.35;text-align:right;
}

/* Bildkarte mit Zoom
   Seitenverhältnis bewusst gesetzt: Die Motive sind Querformat (4:3).
   Ohne feste Proportion wurde daraus früher ein schmaler Mittelstreifen. */
.imgcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;
  aspect-ratio:16/10;   /* kein min-height: das würde über das Seitenverhältnis die Breite aufblähen */
  color:#fff;padding:clamp(1.2rem,1rem + 1vw,1.8rem);
  border:1px solid rgba(255,255,255,.08);
}
@media(max-width:700px){.imgcard{aspect-ratio:4/3;}}
/* Kennzeichnung computergenerierter Motive */
.imgcard__ai{
  position:absolute;top:.9rem;right:.9rem;z-index:1;
  padding:.28rem .6rem;border-radius:6px;pointer-events:none;
  background:rgba(7,11,13,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.85);white-space:nowrap;line-height:1.3;
}
.imgcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease-soft);}
.imgcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,11,13,.94) 4%,rgba(7,11,13,.66) 34%,rgba(7,11,13,.12) 72%,rgba(7,11,13,.05) 100%);}
.imgcard:hover img{transform:scale(1.07);}
.imgcard h3{color:#fff;}
.imgcard p{color:rgba(255,255,255,.78);font-size:var(--fs-sm);margin-top:.4rem;}

/* Prozess-Schritte */
.steps{counter-reset:step;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr);}}
.on-dark .steps,.section--dark .steps{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);}
.step{background:var(--paper);padding:clamp(1.5rem,1rem + 1.6vw,2.4rem);position:relative;}
.section--dark .step{background:var(--ink-850);}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line-strong);display:block;margin-bottom:var(--sp-4);
  transition:-webkit-text-stroke-color var(--t-med),color var(--t-med);
}
.section--dark .step::before{-webkit-text-stroke-color:rgba(255,255,255,.24);}
.step:hover::before{-webkit-text-stroke-color:var(--brand-500);color:rgba(95,187,70,.1);}
.step p{font-size:var(--fs-sm);margin-top:.5rem;}

/* Feature-Liste */
.ticks{display:grid;gap:.9rem;}
.ticks li{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--fs-body);}
.ticks svg{width:22px;height:22px;flex:none;margin-top:.18em;color:var(--brand-500);}

/* Accordion / FAQ */
.acc{border-top:1px solid var(--line);}
.section--dark .acc{border-color:rgba(255,255,255,.1);}
.acc__item{border-bottom:1px solid var(--line);}
.section--dark .acc__item{border-color:rgba(255,255,255,.1);}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;text-align:left;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);color:var(--tx-dark);letter-spacing:-.015em;
  transition:color var(--t-fast);
}
.section--dark .acc__btn{color:#fff;}
.acc__btn:hover{color:var(--brand-ink);}
.section--dark .acc__btn:hover{color:var(--brand-300);}
.acc__sign{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;position:relative;transition:all var(--t-med) var(--ease-out);}
.section--dark .acc__sign{border-color:rgba(255,255,255,.28);}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform var(--t-med) var(--ease-out);}
.acc__sign::before{width:12px;height:2px;}
.acc__sign::after{width:2px;height:12px;}
.acc__btn[aria-expanded="true"] .acc__sign{background:var(--brand-500);border-color:var(--brand-500);color:#04140A;transform:rotate(180deg);}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:scaleY(0);}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease-out);}
.acc__panel > div{overflow:hidden;}
.acc__btn[aria-expanded="true"] + .acc__panel{grid-template-rows:1fr;}
.acc__panel p{padding-bottom:1.5rem;max-width:56ch;font-size:var(--fs-sm);}

/* ============================ 10 STATS ================================== */
.stats{display:grid;gap:1px;background:rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);}
@media(min-width:640px){.stats{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--ink-850);padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);text-align:center;}
.stat__num{
  font-family:'Manrope',sans-serif;font-weight:800;line-height:1;letter-spacing:-.04em;
  font-size:clamp(2.4rem,1.6rem + 3vw,3.8rem);
  background:linear-gradient(160deg,#fff 20%,var(--brand-300) 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__lb{margin-top:.5rem;font-size:var(--fs-sm);color:var(--tx-light-mute);}

/* ============================ 11 VORHER / NACHHER ======================= */
.ba{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);background:var(--ink-800);
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%));}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 24px rgba(0,0,0,.4);z-index:3;pointer-events:none;
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink-900);
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.ba__knob svg{width:22px;height:22px;}
.ba__lb{
  position:absolute;bottom:1rem;z-index:4;padding:.36rem .8rem;border-radius:var(--r-pill);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(7,11,13,.7);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);pointer-events:none;
}
.ba__lb--l{left:1rem;}
.ba__lb--r{right:1rem;background:var(--brand-500);color:#04140A;border-color:transparent;}
.ba__cap{margin-top:.9rem;font-size:var(--fs-sm);color:var(--tx-mute);}
/* Kennzeichnung computergenerierter Beispielbilder */
.ba__ai{
  position:absolute;top:1rem;right:1rem;z-index:4;max-width:8.5rem;
  padding:.3rem .6rem;border-radius:6px;pointer-events:none;
  background:rgba(7,11,13,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.82);line-height:1.25;text-align:right;hyphens:auto;
}

/* Platzhalter, die später ersetzt werden */
.placeholder-asset{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;
  text-align:center;padding:1.5rem;background:
    repeating-linear-gradient(135deg,var(--ink-800) 0 14px,var(--ink-850) 14px 28px);
  color:rgba(255,255,255,.62);
}
.placeholder-asset svg{width:38px;height:38px;color:var(--brand-400);}
.placeholder-asset b{font-family:'Manrope',sans-serif;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;}
.placeholder-asset code{font-size:.72rem;background:rgba(0,0,0,.4);padding:.25rem .5rem;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);word-break:break-all;}
.placeholder-asset.is-after{
  background:repeating-linear-gradient(135deg,#12241a 0 14px,#16301f 14px 28px);
  color:rgba(255,255,255,.72);
}
.placeholder-asset.is-after svg{color:var(--brand-300);}

/* ============================ 12 KONFIGURATOR =========================== */
.kfg{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.kfg__head{
  padding:clamp(1.3rem,1rem + 1.2vw,2rem) clamp(1.2rem,.9rem + 1.4vw,2.4rem);
  border-bottom:1px solid var(--line);background:var(--paper-soft);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
}
.kfg__head h3{font-size:var(--fs-h4);}
.kfg__count{margin-left:auto;font-size:var(--fs-sm);color:var(--tx-mute);font-variant-numeric:tabular-nums;}
.kfg__bar{height:5px;background:var(--paper-mute);position:relative;overflow:hidden;}
.kfg__bar i{
  position:absolute;inset:0 auto 0 0;width:var(--p,11%);border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-400));
  transition:width .5s var(--ease-out);
}
.kfg__body{padding:clamp(1.4rem,1rem + 2vw,2.8rem) clamp(1.2rem,.9rem + 1.4vw,2.4rem);}
.kfg__stepwrap{position:relative;}
.kfg__step{display:none;}
.kfg__step.is-active{display:block;animation:step-in .45s var(--ease-out);}
@keyframes step-in{from{opacity:0;transform:translateY(14px);}}
.kfg__step > h4{font-size:clamp(1.3rem,1.1rem + 1.1vw,1.9rem);letter-spacing:-.024em;}
.kfg__step > .kfg__hint{margin-top:.55rem;font-size:var(--fs-sm);color:var(--tx-mute);}
.kfg__fieldset{margin-top:var(--sp-5);border:0;padding:0;}
.kfg__legend{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--tx-dark);
  margin-bottom:.85rem;display:block;}
.kfg__legend span{font-weight:500;color:var(--tx-mute);font-size:.85rem;}

/* Auswahl-Kacheln */
.opts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));}
.opts--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt label{
  display:flex;align-items:center;gap:.7rem;min-height:58px;height:100%;
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);cursor:pointer;font-weight:550;font-size:.95rem;color:var(--tx-dark);
  transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.opt label:hover{border-color:var(--brand-400);background:rgba(95,187,70,.04);}
.opt label:active{transform:scale(.985);}
.opt__mark{
  width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;color:transparent;transition:all var(--t-fast) var(--ease-out);
}
.opt input[type="radio"] ~ label .opt__mark{border-radius:50%;}
.opt__mark svg{width:13px;height:13px;transform:scale(.4);transition:transform var(--t-fast) var(--ease-out);}
.opt input:checked ~ label{
  border-color:var(--brand-500);background:rgba(95,187,70,.08);
  box-shadow:0 0 0 3px rgba(95,187,70,.14);
}
.opt input:checked ~ label .opt__mark{background:var(--brand-500);border-color:var(--brand-500);color:#fff;}
.opt input:checked ~ label .opt__mark svg{transform:scale(1);}
.opt input:focus-visible ~ label{outline:3px solid var(--brand-400);outline-offset:2px;}
.opt__ico{width:24px;height:24px;flex:none;color:var(--brand-600);}

/* Textfelder */
.field{display:grid;gap:.4rem;}
.field label{font-size:.88rem;font-weight:600;color:var(--tx-dark);}
.field label .opt-tag{font-weight:500;color:var(--tx-mute);}
.field input,.field select,.field textarea{
  width:100%;min-height:54px;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);color:var(--tx-dark);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(95,187,70,.16);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--err);box-shadow:0 0 0 3px rgba(210,72,63,.14);
}
.field__err{font-size:.8rem;color:var(--err);min-height:0;}
.fields{display:grid;gap:1rem;}
@media(min-width:640px){
  .fields--2{grid-template-columns:1fr 1fr;}
  .fields--plz{grid-template-columns:.5fr 1fr;}
  .fields--street{grid-template-columns:1fr .38fr;}
}

/* PLZ-Prüfung */
.plzcheck{
  margin-top:.8rem;display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-radius:var(--r-sm);font-size:.87rem;border:1px solid transparent;
}
.plzcheck[hidden]{display:none;}
.plzcheck svg{width:18px;height:18px;flex:none;}
.plzcheck.is-in{background:rgba(63,163,77,.1);border-color:rgba(63,163,77,.28);color:#256B30;}
.plzcheck.is-near{background:rgba(214,138,34,.1);border-color:rgba(214,138,34,.3);color:#8A5710;}
.plzcheck.is-out{background:rgba(210,72,63,.08);border-color:rgba(210,72,63,.26);color:#96322B;}

/* Upload */
.drop{
  position:relative;border:2px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.6rem) 1.2rem;text-align:center;
  background:var(--paper-soft);transition:all var(--t-med) var(--ease-out);
}
.drop.is-over{border-color:var(--brand-500);background:rgba(95,187,70,.07);transform:scale(1.01);}
.drop__ico{width:56px;height:56px;margin:0 auto .9rem;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-500),var(--brand-600));color:#fff;box-shadow:var(--sh-glow);}
.drop__ico svg{width:28px;height:28px;}
.drop b{display:block;font-family:'Manrope',sans-serif;font-size:1.05rem;color:var(--tx-dark);}
.drop small{display:block;margin-top:.35rem;color:var(--tx-mute);font-size:.85rem;}
.drop__actions{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;}

.thumbs{margin-top:1.1rem;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));}
.thumb{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-mute);
  border:1px solid var(--line);animation:pop-in .32s var(--ease-out);}
@keyframes pop-in{from{opacity:0;transform:scale(.86);}}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb__x{
  position:absolute;top:5px;right:5px;width:28px;height:28px;border-radius:50%;
  background:rgba(7,11,13,.78);color:#fff;display:grid;place-items:center;font-size:1rem;line-height:1;
  backdrop-filter:blur(6px);transition:background var(--t-fast),transform var(--t-fast);
}
.thumb__x:hover{background:var(--err);transform:scale(1.08);}
.thumb__sz{position:absolute;left:0;right:0;bottom:0;padding:.2rem .4rem;font-size:.62rem;
  background:linear-gradient(transparent,rgba(7,11,13,.85));color:rgba(255,255,255,.9);text-align:center;}
.thumb.is-busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6);
  backdrop-filter:blur(2px);}
.uploadmeta{margin-top:.7rem;font-size:.8rem;color:var(--tx-mute);display:flex;justify-content:space-between;gap:1rem;}

/* Consent */
.consent{display:flex;gap:.85rem;align-items:flex-start;padding:1rem;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper-soft);}
.consent input{margin-top:.2rem;width:22px;height:22px;flex:none;accent-color:var(--brand-500);}
.consent label{font-size:.86rem;line-height:1.55;color:var(--tx-body);}
.consent a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}

/* Navigation Konfigurator */
.kfg__nav{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:clamp(1rem,.8rem + 1vw,1.5rem) clamp(1.2rem,.9rem + 1.4vw,2.4rem);
  border-top:1px solid var(--line);background:var(--paper-soft);
}
.kfg__nav .btn--next{margin-left:auto;}
@media(max-width:560px){
  .kfg__nav{flex-direction:column-reverse;}
  .kfg__nav .btn{width:100%;margin-left:0;}
}
.kfg__save{font-size:.78rem;color:var(--tx-mute);width:100%;text-align:center;}

/* Foto-Hilfe: welche Aufnahmen helfen uns */
.fotohelp{
  display:grid;gap:.6rem;margin:var(--sp-5) 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
}
.fotohelp li{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:.7rem;align-items:center;
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);font-size:.78rem;color:var(--tx-mute);line-height:1.4;
}
.fotohelp li span{
  grid-row:1 / span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(95,187,70,.12);color:var(--brand-ink);
}
.fotohelp li span svg{width:19px;height:19px;}
.fotohelp li b{font-family:'Manrope',sans-serif;font-size:.88rem;color:var(--tx-dark);align-self:end;}

/* Zusammenfassung („Ihre Anfrage") */
.recap{
  margin-top:var(--sp-5);border-radius:var(--r-lg);overflow:hidden;
  border:1.5px solid rgba(95,187,70,.32);
  background:linear-gradient(180deg,rgba(95,187,70,.07),rgba(95,187,70,.02));
}
.recap__title{
  display:flex;align-items:center;gap:.55rem;margin:0;
  padding:.95rem 1.25rem;border-bottom:1px solid rgba(95,187,70,.22);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;color:var(--tx-dark);
  letter-spacing:-.01em;
}
.recap__title svg{width:20px;height:20px;color:var(--brand-ink);flex:none;}
.recap__list{display:grid;padding:.4rem 1.25rem .9rem;}
.recap__list > div{
  display:flex;gap:1rem;justify-content:space-between;align-items:baseline;
  font-size:.86rem;padding:.55rem 0;border-bottom:1px dashed rgba(95,187,70,.25);
}
.recap__list > div:last-child{border-bottom:0;}
.recap__list dt{color:var(--tx-mute);flex:none;}
.recap__list dd{text-align:right;font-weight:600;color:var(--tx-dark);margin:0;}
.recap__verdict{
  margin:0;padding:.85rem 1.25rem;font-size:.87rem;font-weight:600;
  border-top:1px solid rgba(95,187,70,.22);
}
.recap__verdict.is-good{background:rgba(95,187,70,.14);color:#256B30;}
.recap__verdict.is-ok  {background:rgba(214,138,34,.1);color:#7A4E0F;}
.recap__verdict.is-thin{background:var(--paper-soft);color:var(--tx-body);}
.recap--done{max-width:30rem;margin-inline:auto;text-align:left;}
.donewarn{
  max-width:30rem;margin:var(--sp-5) auto 0;padding:.85rem 1.1rem;text-align:left;
  border-radius:var(--r-sm);font-size:.86rem;line-height:1.5;
  background:rgba(214,138,34,.12);border:1px solid rgba(214,138,34,.34);color:#7A4E0F;
}

/* Erfolgs-Ansicht */
.donesteps{
  counter-reset:ds;display:grid;gap:.65rem;max-width:32rem;
  margin:var(--sp-6) auto 0;text-align:left;
}
.donesteps li{
  display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);font-size:.82rem;color:var(--tx-mute);line-height:1.5;
}
.donesteps li span{
  grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-900);color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:.8rem;
}
.donesteps li b{font-family:'Manrope',sans-serif;font-size:.92rem;color:var(--tx-dark);display:block;}
.donebox{
  max-width:32rem;margin:var(--sp-6) auto 0;padding:1.3rem;text-align:left;
  border-radius:var(--r-lg);background:var(--ink-900);color:var(--tx-light-mute);
}
.donebox h4{color:#fff;font-size:1.02rem;margin-bottom:.4rem;}
.donebox p{font-size:.84rem;line-height:1.55;}
.donebox__btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;}
.donebox .btn--ghost{--btn-bg:rgba(255,255,255,.06);--btn-tx:#fff;--btn-bd:rgba(255,255,255,.26);}
.donebox .btn--ghost:hover{--btn-bd:rgba(255,255,255,.6);}
@media(max-width:520px){.donebox__btns .btn{width:100%;}}

.kfg__done{text-align:center;padding:clamp(2rem,1.4rem + 3vw,4rem) 1rem;}
.kfg__done .tickring{
  width:82px;height:82px;margin:0 auto 1.5rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(95,187,70,.12);border:2px solid var(--brand-500);color:var(--brand-600);
  animation:ring-pop .6s var(--ease-out);
}
@keyframes ring-pop{from{transform:scale(.6);opacity:0;}}
.kfg__done .tickring svg{width:40px;height:40px;}
.kfg__ref{display:inline-block;margin-top:1rem;padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--paper-mute);font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.85rem;}

.kfg__error{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);
  background:rgba(210,72,63,.08);border:1px solid rgba(210,72,63,.28);color:#96322B;font-size:.87rem;
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* Vertrauensleiste unter dem Konfigurator */
.kfg-aside{display:grid;gap:1.1rem;align-content:start;}
.kfg-aside__item{display:flex;gap:.9rem;align-items:flex-start;}
.kfg-aside__item svg{width:24px;height:24px;flex:none;color:var(--brand-400);margin-top:.15em;}
.kfg-aside__item b{display:block;color:#fff;font-family:'Manrope',sans-serif;font-size:1rem;}
.kfg-aside__item span{font-size:var(--fs-sm);color:var(--tx-light-mute);}

/* ============================ 13 FOOTER ================================= */
.footer{background:var(--ink-950);color:var(--tx-light-mute);padding-block:var(--sp-8) var(--sp-6);}
.footer__grid{display:grid;gap:var(--sp-6);}
@media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer h4{color:#fff;font-size:.95rem;letter-spacing:.02em;margin-bottom:1rem;}
.footer ul{display:grid;gap:.6rem;font-size:var(--fs-sm);}
.footer a:hover{color:var(--brand-300);}
.footer__brand img{height:74px;width:auto;margin-bottom:1.1rem;}
.footer__brand p{font-size:var(--fs-sm);max-width:32ch;}
.footer__social{display:flex;gap:.6rem;margin-top:1.2rem;}
.footer__social a{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);color:#fff;transition:all var(--t-fast);}
.footer__social a:hover{background:var(--brand-500);border-color:var(--brand-500);color:#04140A;transform:translateY(-2px);}
.footer__social svg{width:19px;height:19px;}
.footer__bar{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--fs-xs);
  color:var(--tx-light-faint);}
.footer__bar ul{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}
/* Der Cookie-Knopf ist optisch ein Textlink, braucht aber eine
   fingerfreundliche Trefferfläche wie die Links daneben. */
.footer__bar button{
  font:inherit;color:inherit;cursor:pointer;
  padding-block:.7rem;margin-block:-.7rem;
}
.footer__bar button:hover{color:var(--brand-300);}

/* ============================ 14 OVERLAYS =============================== */
.fab{
  position:fixed;right:clamp(.9rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.6rem);z-index:80;
  display:grid;gap:.6rem;justify-items:end;
}
.fab__wa{
  display:inline-flex;align-items:center;gap:.6rem;height:54px;padding:0 1.15rem;border-radius:var(--r-pill);
  background:#fff;color:var(--tx-dark);border:1px solid var(--line);box-shadow:var(--sh-md);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;
  transition:transform var(--t-fast),box-shadow var(--t-med);
}
.fab__wa svg{width:24px;height:24px;color:#25D366;}
.fab__wa:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
@media(max-width:600px){.fab__wa span{display:none;}.fab__wa{width:54px;padding:0;justify-content:center;}}

.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:79;
  display:flex;gap:.55rem;padding:.6rem calc(var(--gutter)*.7);
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(7,11,13,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(120%);transition:transform .45s var(--ease-out);
}
.stickycta.is-on{transform:none;}
.stickycta .btn{flex:1;min-height:50px;padding-inline:1rem;font-size:.92rem;}
.stickycta .btn--tel{flex:0 0 50px;padding:0;}
@media(min-width:1440px){.stickycta{display:none;}}
@media(max-width:1149px){.fab{bottom:calc(72px + env(safe-area-inset-bottom));}}

.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:120;padding:var(--gutter);
  padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  background:rgba(7,11,13,.97);backdrop-filter:blur(20px);color:var(--tx-light-mute);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(110%);transition:transform .5s var(--ease-soft);
}
.cookie.is-on{transform:none;}
.cookie__in{display:grid;gap:1.1rem;align-items:center;}
@media(min-width:900px){.cookie__in{grid-template-columns:1fr auto;}}
.cookie h4{color:#fff;margin-bottom:.4rem;font-size:1.05rem;}
.cookie p{font-size:var(--fs-sm);max-width:70ch;}
.cookie a{color:var(--brand-300);text-decoration:underline;text-underline-offset:2px;}
.cookie__btns{display:flex;gap:.6rem;flex-wrap:wrap;}
@media(max-width:520px){.cookie__btns .btn{flex:1;}}

/* Einsatzgebiet-Karte */
.mapwrap{
  position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:var(--ink-850);aspect-ratio:16/11;
}
@media(min-width:900px){.mapwrap{aspect-ratio:16/10;}}
.mapwrap svg{width:100%;height:100%;}
.map-pin{cursor:default;}
.map-pin circle.dot{transition:r var(--t-med) var(--ease-out),opacity var(--t-med);}
.map-pin:hover circle.dot{r:7;}
.map-pin text{font-family:'InterVar',sans-serif;font-size:11px;fill:rgba(255,255,255,.8);}
.map-pin--hq text{fill:#fff;font-weight:700;font-size:13px;}
.pulse{transform-origin:center;animation:pulse 2.6s var(--ease-soft) infinite;}
@keyframes pulse{0%{r:8;opacity:.55}70%{r:26;opacity:0}100%{opacity:0}}
.plzlist{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem;}
.plzlist li{padding:.4rem .8rem;border-radius:var(--r-pill);font-size:.82rem;
  border:1px solid rgba(255,255,255,.14);color:var(--tx-light-mute);
  transition:all var(--t-fast);}
.plzlist li:hover{border-color:var(--brand-400);color:#fff;}
.plzlist--light li{border-color:var(--line);color:var(--tx-body);background:var(--paper);}
.plzlist--light li:hover{border-color:var(--brand-500);color:var(--tx-dark);}
.plzlist--light li a{display:block;margin:-.4rem -.8rem;padding:.4rem .8rem;}
.plzlist a{display:block;}
.plzlist li:has(a):hover{border-color:var(--brand-500);}

/* Bewertungen */
.rating{display:flex;align-items:center;gap:.6rem;}
.rating__stars{display:flex;gap:.12rem;color:#F5A623;}
.rating__stars svg{width:19px;height:19px;}
.quote{
  background:var(--ink-850);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.2vw,2rem);display:flex;flex-direction:column;gap:1rem;
}
.quote blockquote{color:var(--tx-light-mute);font-size:var(--fs-sm);line-height:1.7;}
.quote figcaption{display:flex;align-items:center;gap:.75rem;margin-top:auto;}
.quote figcaption b{color:#fff;font-size:.9rem;font-family:'Manrope',sans-serif;}
.quote figcaption span{display:block;font-size:.76rem;color:var(--tx-light-faint);}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-500),var(--brand-700));color:#04140A;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.9rem;}
.review-empty{
  border:1.5px dashed rgba(255,255,255,.2);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.2vw,2rem);display:grid;gap:.6rem;
}
.review-empty b{color:#fff;font-family:'Manrope',sans-serif;}
.review-empty p{font-size:var(--fs-sm);}

/* ============================ 15 ANIMATIONEN ============================ */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
[data-reveal].is-in{opacity:1;transform:none;}
/* Seitliche Reveals erst ab Tablet-Breite: Auf schmalen Displays ist der
   Seitenrand kleiner als der Versatz, das erzeugte sonst kurzzeitig einen
   horizontalen Scrollbalken. Unterhalb 900px wird vertikal eingeblendet. */
@media(min-width:900px){
  [data-reveal="left"]{transform:translateX(-30px);}
  [data-reveal="right"]{transform:translateX(30px);}
}
[data-reveal="scale"]{transform:scale(.95);}
[data-reveal].is-in{transform:none;}
[data-reveal-stagger] > *{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
[data-reveal-stagger].is-in > *{opacity:1;transform:none;}
[data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.02s}
[data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.09s}
[data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.23s}
[data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.3s}
[data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.37s}
[data-reveal-stagger].is-in > *:nth-child(7){transition-delay:.44s}

[data-parallax]{will-change:transform;}
.zoomin img{transition:transform 1.3s var(--ease-soft);}
.zoomin:hover img{transform:scale(1.06);}

/* ============================ 16 UTILITIES ============================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand-500);color:#04140A;
  padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;}
.skip:focus{left:0;}
.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}
.tc{text-align:center}
.nowrap{white-space:nowrap}
[hidden]{display:none!important;}

/* Seiten-Header für Unterseiten */
.pagehead{
  background:var(--ink-950);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(4rem,3rem + 5vw,7.5rem) clamp(3rem,2rem + 4vw,5.5rem);
}
.pagehead::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 85% 0%,rgba(95,187,70,.22),transparent 58%),
             radial-gradient(70% 90% at 5% 100%,rgba(143,230,218,.1),transparent 60%);
}
.pagehead > *{position:relative;}
.pagehead h1,.pagehead h2,.pagehead h3{color:var(--tx-light);}
.pagehead .eyebrow{color:var(--brand-300);}
.pagehead p{color:var(--tx-light-mute);max-width:48rem;margin-top:1rem;font-size:var(--fs-lead);}
.crumb{display:flex;gap:.5rem;font-size:var(--fs-xs);color:var(--tx-light-faint);margin-bottom:1.2rem;}
.crumb a:hover{color:#fff;}

/* Rechtstexte */
.legal{max-width:78ch;}
.legal h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);margin-top:var(--sp-7);}
.legal h3{font-size:1.15rem;margin-top:var(--sp-5);}
.legal h4{font-size:1rem;margin-top:var(--sp-4);}
.legal p,.legal ul{margin-top:.85rem;font-size:.965rem;}
.legal ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.4rem;}
.legal a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
.legal hr{margin-block:var(--sp-6);border:0;border-top:1px solid var(--line);}

/* ============================ REDUCED MOTION ============================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important;}
  .hero h1 .line > span{transform:none!important;}
  .hero__sub,.hero__actions,.hero__trust{opacity:1!important;transform:none!important;}
  .hero__bg img{transform:none!important;}
  .marquee__track{animation:none!important;}
}

/* ============================ PRINT ===================================== */
@media print{
  .header,.topbar,.mobile-nav,.fab,.stickycta,.cookie,.hero__scroll,.kfg__nav{display:none!important;}
  body{color:#000;background:#fff;}
  .section{padding-block:1.5rem;}
}