/* ============================================================
   LENARO REINIGUNG & HAUSWARTUNG GMBH — Website (Startseite)
   v4 — Buttons-Fix, 2-zeiliger Hero, Logo-Slider, Leistungs-Slider,
   animierte Icons, 3x Vorher/Nachher, Ablauf-Beam, Google-Bewertungen
   Montserrat + Inter · Blue-Gradient · Built by RGN Marketing
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --sky:#38BDF8; --blue:#2563EB; --indigo:#4338CA; --indigo-dark:#312E81;
  --n900:#0F172A; --n800:#1E293B; --n700:#334155; --n600:#475569;
  --n400:#94A3B8; --n300:#CBD5E1; --n200:#E2E8F0; --n100:#F1F5F9; --n50:#F8FAFC; --white:#fff;

  --text:#334155; --text-2:#475569; --heading:#0F172A;
  --grad:linear-gradient(120deg,#38BDF8 0%,#2563EB 50%,#4338CA 75%,#312E81 100%);

  --font-head:'Montserrat',Arial,sans-serif;
  --font-body:'Inter',Arial,Helvetica,sans-serif;

  --fs-display:clamp(2.3rem, 1.45rem + 3.9vw, 4.25rem);  /* 37 → 68 */
  --fs-h1:clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);         /* 34 → 58 */
  --fs-h2:clamp(1.85rem, 1.3rem + 2.6vw, 3.1rem);        /* 30 → 50 */
  --fs-h3:clamp(1.3rem, 1.18rem + 0.65vw, 1.6rem);       /* 21 → 26 */
  --fs-lead:clamp(1.075rem, 1.01rem + 0.42vw, 1.3rem);   /* 17 → 21 */
  --fs-body:clamp(1rem, 0.97rem + 0.2vw, 1.0875rem);     /* 16 → 17.4 */
  --fs-eyebrow:0.9375rem; --fs-label:0.8125rem; --fs-small:0.9375rem;

  --lh-tight:1.02; --lh-head:1.08; --lh-body:1.65;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

  --container:1220px;
  --gutter:clamp(20px,4vw,44px);
  --section-y:clamp(76px,9vw,132px);

  --r-btn:14px; --r-input:12px; --r-card:18px; --r-lg:24px; --r-icon:14px; --r-pill:999px;

  --sh-card:0 1px 2px rgba(15,23,42,.04), 0 18px 38px -20px rgba(37,99,235,.20);
  --sh-hover:0 2px 4px rgba(15,23,42,.05), 0 32px 60px -24px rgba(37,99,235,.38);
  --sh-glass:0 30px 70px -30px rgba(15,23,42,.6);
  --sh-header:0 10px 34px -20px rgba(15,23,42,.24);

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--text);background:var(--white);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--heading);line-height:var(--lh-head);letter-spacing:-.025em;font-weight:800}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
svg{display:block}
:focus-visible{outline:3px solid rgba(37,99,235,.5);outline-offset:2px;border-radius:4px}
::selection{background:rgba(37,99,235,.16)}

/* ---------- LAYOUT ---------- */
.container{width:min(100% - (var(--gutter)*2),var(--container));margin-inline:auto;position:relative;z-index:1}
.section{padding-block:var(--section-y);position:relative;overflow:clip}
.section--slate{background:var(--n100)}
.section--dark{background:var(--n900);color:#cbd5e1}
.section-head{max-width:820px;margin-bottom:var(--s8)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.wide{max-width:1000px}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:3px;background:var(--grad)}
.eyebrow.center{justify-content:center}
.eyebrow.on-grad{color:#dbeafe}
.eyebrow.on-grad::before{background:rgba(255,255,255,.7)}
h2.h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.lead{font-size:var(--fs-lead);color:var(--text-2);max-width:60ch;line-height:1.5;margin-top:20px}
.section--dark .lead,.section--dark h2{color:#e2e8f0}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1;
  padding:17px 32px;border-radius:var(--r-pill);border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s,background .2s,color .2s;
}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgba(37,99,235,.6)}
.btn-grad::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-grad > *{position:relative;z-index:2}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(37,99,235,.65)}
.btn-grad:hover::after{transform:translateX(130%)}
.btn-grad:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 24px -10px rgba(37,99,235,.55)}
.btn-primary:hover{background:var(--indigo);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--blue);border:1.5px solid var(--n200)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--n900)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(15,23,42,.45)}
.btn-onlight-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-onlight-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)}
.btn-lg{padding:19px 36px;font-size:17px}
.btn-block{width:100%}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 12px 24px -10px rgba(37,211,102,.6)}
.btn-wa:hover{background:#20bd5a;transform:translateY(-2px)}
.btn-wa svg{fill:#fff;stroke:none}

.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:16px;color:var(--blue)}
.tlink svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- DECOR ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.glow--sky{background:radial-gradient(circle,rgba(56,189,248,.2),transparent 65%)}
.glow--indigo{background:radial-gradient(circle,rgba(67,56,202,.18),transparent 65%)}
.dotgrid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background-image:radial-gradient(rgba(15,23,42,.06) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.ring-deco{position:absolute;border:1.5px solid rgba(37,99,235,.09);border-radius:50%;pointer-events:none;z-index:0}
.ring-deco::after{content:"";position:absolute;inset:26px;border:1.5px solid rgba(37,99,235,.06);border-radius:50%}
.softdots{position:absolute;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(37,99,235,.12) 1.2px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
          mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}
.cross-deco{position:absolute;pointer-events:none;z-index:0;color:rgba(37,99,235,.14)}
.cross-deco svg{width:100%;height:100%;display:block}
.wm-logo{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:min(50%,560px);height:auto;opacity:.16;z-index:0;pointer-events:none}
@media(max-width:900px){.wm-logo{display:none}}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.nav .bar{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);padding:20px 0;transition:padding .3s var(--ease)}
.nav .logo{position:relative;display:flex;align-items:center}
.nav .logo img{height:44px;width:auto;transition:opacity .3s,height .3s}
.nav .logo .l-white{position:absolute;top:0;left:0;opacity:1}
.nav .logo .l-color{opacity:0}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(15,23,42,.08);box-shadow:var(--sh-header)}
.nav.scrolled .bar{padding:13px 0}
.nav.scrolled .logo img{height:38px}
.nav.scrolled .logo .l-white{opacity:0}
.nav.scrolled .logo .l-color{opacity:1}

/* Header solide weiss, solange Mega-Menü offen (Desktop) */
.nav.mega-open{background:#fff;box-shadow:none;border-bottom-color:transparent}
.nav.mega-open .links > a,.nav.mega-open .megatrig{color:var(--n800)}
.nav.mega-open .megatrig:hover,.nav.mega-open .megatrig.on{color:var(--blue)}
.nav.mega-open .tel{color:var(--n800)}
.nav.mega-open .logo .l-white{opacity:0}
.nav.mega-open .logo .l-color{opacity:1}

.nav .links{display:none;align-items:center;gap:clamp(16px,1.7vw,30px);margin-inline:auto;white-space:nowrap}
.nav .links > a,.nav .megatrig{position:relative;font-family:var(--font-head);font-weight:600;font-size:16px;
  color:#fff;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.nav.scrolled .links > a,.nav.scrolled .megatrig{color:var(--n800)}
.nav .links > a::after,.nav .megatrig::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav .links > a:hover::after,.nav .megatrig:hover::after,.nav .megatrig.on::after{transform:scaleX(1)}
.nav .links > a:hover,.nav .megatrig:hover{color:var(--blue)}
.nav .megatrig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav .megatrig.on svg{transform:rotate(180deg)}
.nav .actions{display:none;align-items:center;gap:clamp(10px,1.2vw,18px);white-space:nowrap}
.nav .tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:15.5px;color:#fff}
.nav.scrolled .tel{color:var(--n800)}
.nav .tel svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav .tel:hover{color:var(--blue)}
.burger{margin-left:auto;width:52px;height:52px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav.scrolled .burger{border-color:var(--n200);background:#fff}
.burger svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav.scrolled .burger svg{stroke:var(--n800)}
@media(min-width:1040px){.nav .links{display:flex}.nav .actions{display:flex}.burger{display:none}}
.nav-usp{display:none}
@media(max-width:640px){
  .nav-usp{display:flex;justify-content:center;align-items:center;gap:20px;padding:0 12px 10px;margin-top:-6px}
  .nav-usp span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.01em;color:#f0f5ff;white-space:nowrap;text-shadow:0 1px 10px rgba(8,12,26,.4)}
  .nav-usp svg{width:14px;height:14px;flex:none;fill:none;stroke:#7dd3fc;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .nav.scrolled .nav-usp span{color:var(--n800);text-shadow:none}
  .nav.scrolled .nav-usp svg{stroke:var(--blue)}
}


/* MEGA MENU */
.mega{position:absolute;left:0;right:0;top:100%;z-index:99;
  background:rgba(255,255,255,.98);backdrop-filter:blur(18px);border-top:1px solid var(--n100);
  box-shadow:0 34px 70px -30px rgba(15,23,42,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--ease)}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega .inner{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:38px;
  max-width:var(--container);margin-inline:auto;padding:40px var(--gutter)}
.mega h5{font-family:var(--font-head);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--blue);margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--n100);display:flex;align-items:center;gap:10px}
.mega h5 svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mega a.mlink{display:block;color:var(--n700);font-size:15.5px;padding:9px 0;transition:color .15s,padding .15s var(--ease)}
.mega a.mlink:hover{color:var(--blue);padding-left:6px}
.mega .promo{background:var(--grad);border-radius:var(--r-card);padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mega .promo .pdeco{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.mega .promo h6{font-family:var(--font-head);font-weight:800;font-size:20px;line-height:1.2;margin-bottom:10px;position:relative}
.mega .promo p{font-size:14.5px;color:#e0e7ff;line-height:1.5;position:relative}
.mega .promo .btn{margin-top:18px;position:relative}

/* MOBILE DRAWER */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(15,23,42,.55);opacity:0;transition:.3s}
.drawer.open .scrim{opacity:1}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:90%;max-width:410px;background:#fff;
  transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto;padding:20px 24px 44px;display:flex;flex-direction:column}
.drawer.open .panel{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer .dhead img{height:38px}
.dclose{width:48px;height:48px;border:1.5px solid var(--n200);border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dclose svg{width:24px;height:24px;fill:none;stroke:var(--n800);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dlink{display:block;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--n900);padding:17px 2px;border-bottom:1px solid var(--n100)}
.macc{border-bottom:1px solid var(--n100)}
.macc .mtrig{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;
  font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--n900);padding:17px 2px;cursor:pointer;text-align:left}
.macc .mtrig svg{width:22px;height:22px;fill:none;stroke:var(--n400);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.macc.open .mtrig svg{transform:rotate(180deg)}
.macc .mbody{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.macc .mbody a{display:block;color:var(--n600);font-size:16px;padding:10px 0 10px 14px}
.macc .mbody a.ov{color:var(--blue);font-weight:700}
.drawer .dcontact{margin-top:24px;display:grid;gap:16px;padding-top:22px;border-top:1px solid var(--n100)}
.drawer .dcontact a{display:flex;align-items:center;gap:13px;color:var(--n800);font-family:var(--font-head);font-weight:700;font-size:16.5px}
.drawer .dcontact a svg.ic{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.drawer .dcontact a svg.wa{width:23px;height:23px;fill:#25D366;flex:none}
.drawer .dcontact a:hover{color:var(--blue)}
.drawer .dcta{margin-top:20px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center right;transform:scale(1.06);animation:kenburns 14s ease-out forwards}
.hero .bg .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
@media(prefers-reduced-motion:reduce){.hero .bg .bg-video{display:none}}
@keyframes kenburns{to{transform:scale(1)}}
.hero .ovl{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,15,32,.92) 0%,rgba(20,28,58,.74) 34%,rgba(37,99,235,.26) 64%,rgba(56,189,248,.06) 100%)}
.hero .ovl2{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,12,26,.6),transparent 44%)}
.hero .container{position:relative;z-index:2;padding-top:132px;padding-bottom:80px}
.hero .inner{max-width:1120px}
.hero .h-eyebrow{display:inline-block;position:relative;font-family:var(--font-head);font-weight:700;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase;color:#f2f7ff;margin-bottom:30px;padding-bottom:9px;
  text-shadow:0 2px 12px rgba(8,12,26,.55)}
.hero .h-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--grad);opacity:.95}
.hero h1{color:#fff;font-size:var(--fs-display);font-weight:800;line-height:1.02;letter-spacing:-.03em;text-shadow:0 2px 14px rgba(8,12,26,.38)}
.hero h1 .grad-word{background:linear-gradient(100deg,#7dd3fc,#c7b6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 9px rgba(8,12,26,.42))}
.hero h1 .rot-word{display:inline-block;white-space:nowrap;transition:opacity .42s var(--ease),transform .42s var(--ease)}
.hero h1 .rot-word.out{opacity:0;transform:translateY(.42em)}
.hero h1 .rot-word.pre{transition:none;opacity:0;transform:translateY(-.42em)}
.hero p.sub{color:#dbe6f5;font-size:clamp(1rem, 0.93rem + 0.4vw, 1.13rem);margin-top:24px;max-width:52ch;line-height:1.55}
.hero .chips{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-top:26px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero .chip{display:inline-flex;align-items:center;gap:11px;font-size:16px;color:#eaf1fd;font-weight:500}
.hero .chip svg{width:22px;height:22px;fill:none;stroke:#7dd3fc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.hero .scroll-cue .mouse{width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;position:relative}
.hero .scroll-cue .mouse::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:2px;background:#fff;animation:scrolldot 1.6s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,11px)}}
@media(max-width:640px){.hero .scroll-cue{display:none}.hero .chips{flex-direction:column;align-items:flex-start;gap:14px;margin-top:24px}
  .hero .h-eyebrow{font-size:11px;letter-spacing:.1em;white-space:nowrap;margin-bottom:22px;padding-bottom:7px}
  .hero .bg img{object-position:68% 50%}
  .hero .bg .bg-video{object-position:68% 50%}
  .hero .ovl{background:linear-gradient(100deg,rgba(9,15,32,.95) 0%,rgba(20,28,58,.85) 38%,rgba(30,58,138,.45) 68%,rgba(56,189,248,.18) 100%)}
  .hero .ovl2{background:linear-gradient(to top,rgba(8,12,26,.68),transparent 46%)}}

/* ============================================================
   LOGO-SLIDER (Trust)
   ============================================================ */
.logostrip{padding-block:clamp(52px,6.5vw,88px);background:#fff;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column}
.logostrip>.ls-trust .logo-trust{margin-top:0}
.logostrip>.ls-head{order:1}
.logostrip>.logo-marquee{order:2}
.logostrip>.ls-trust{order:3;margin-top:clamp(28px,3.4vw,40px)}
.logostrip h2{font-size:clamp(1.4rem,1.05rem+1.4vw,1.95rem);font-weight:800;letter-spacing:-.02em;max-width:none;margin-inline:auto}
@media(min-width:1000px){.logostrip h2{white-space:nowrap}}
.logo-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin-top:26px}
.lt-item{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--n700);font-weight:500}
.lt-item svg{width:21px;height:21px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lt-item svg.gg{stroke:none;stroke-width:0}
.lt-item b{font-family:var(--font-head);font-weight:800;color:var(--n900);font-size:16px}
.lt-item .stars{display:inline-flex;gap:1px}
.lt-item .stars svg{width:15px;height:15px;fill:#FBBC05;stroke:none}
@media(min-width:760px){.lt-item + .lt-item{border-left:1px solid var(--n200);padding-left:28px}}
@media(max-width:759px){.lt-item:not(:first-child){display:none}}
.logo-marquee{margin-top:46px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-track{display:flex;gap:72px;width:max-content;align-items:center;animation:logoscroll 40s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoscroll{to{transform:translateX(-50%)}}
.clogo{display:inline-flex;align-items:center;gap:13px;color:#9aa7bd;flex:none;white-space:nowrap;transition:color .3s var(--ease)}
.clogo svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.clogo .cname{font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.clogo .cname small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c1cad9;margin-top:2px}
.clogo:hover{color:var(--blue)}

/* ============================================================
   SERVICES SLIDER
   ============================================================ */
.svc-slider{position:relative}
.svc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--n200);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(15,23,42,.3);transition:.22s var(--ease)}
.svc-prev{left:-24px}
.svc-next{right:-24px}
.svc-arrow svg{width:23px;height:23px;fill:none;stroke:var(--n700);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.svc-arrow:hover{border-color:var(--blue);background:var(--blue)}
.svc-arrow:hover svg{stroke:#fff}
.svc-arrow:disabled{opacity:.4;pointer-events:none}
@media(max-width:600px){
  .svc-arrow{width:44px;height:44px;box-shadow:0 10px 22px -8px rgba(15,23,42,.35)}
  .svc-prev{left:-10px}
  .svc-next{right:-10px;animation:svcnudge 1.9s var(--ease) infinite}
  .svc-arrow svg{width:20px;height:20px}
  .svc-arrow:disabled{animation:none}
}
@keyframes svcnudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}}
.svc-track{display:flex;gap:28px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 26px;scrollbar-width:none;-ms-overflow-style:none}
.svc-track::-webkit-scrollbar{display:none}
.svc{flex:0 0 100%;scroll-snap-align:start;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-card);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc:hover{transform:translateY(-8px);box-shadow:var(--sh-hover)}
.svc .ph{position:relative;aspect-ratio:16/11;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svc:hover .ph img{transform:scale(1.06)}
.svc .body{padding:30px 30px 30px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;margin-bottom:11px}
.svc p{color:var(--text-2);font-size:15px;line-height:1.6}
.svc-list{list-style:none;margin:18px 0 0;display:grid;gap:11px}
.svc-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--n700);font-weight:500}
.svc-list li svg{width:21px;height:21px;flex:none;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){
  .svc-list li{font-size:12.5px;gap:9px;white-space:nowrap}
  .svc-list li svg{width:18px;height:18px;margin-top:0}
}
.svc .tlink{margin-top:20px}
@media(min-width:720px){.svc{flex:0 0 calc((100% - 28px) / 2)}}
@media(min-width:1000px){.svc{flex:0 0 calc((100% - 56px) / 3)}}

/* ============================================================
   ABOUT / STORY
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:960px){.about-grid{grid-template-columns:1fr 1fr;gap:72px}}
.about-copy p{color:var(--text-2);margin-top:18px;max-width:58ch;font-size:16px}
.about-values{list-style:none;margin-top:34px;display:grid;gap:18px}
.about-values li{display:flex;gap:15px;align-items:flex-start}
.about-values .ic{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center;margin-top:1px}
.about-values .ic svg{width:21px;height:21px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.about-values b{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--n900);display:block;margin-bottom:2px}
.about-values span{font-size:14.5px;color:var(--text-2)}
.about-media{position:relative}
.about-media .m-main{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-hover);aspect-ratio:4/3}
.about-media .m-main img{width:100%;height:100%;object-fit:cover}
.about-media .m-card{position:absolute;left:-20px;bottom:-30px;background:#fff;border:1px solid var(--n200);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:18px 22px;display:flex;align-items:center;gap:16px;max-width:270px}
.about-media .m-card .big{font-family:var(--font-head);font-weight:800;font-size:38px;color:var(--blue);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-media .m-card small{font-size:14px;color:var(--text-2);line-height:1.35;display:block}
.about-media .badge-float{position:absolute;right:-16px;top:26px;background:#fff;border:1px solid var(--n200);border-radius:var(--r-pill);
  box-shadow:var(--sh-card);padding:11px 18px;display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--n800)}
.about-media .badge-float svg{width:18px;height:18px;fill:#F59E0B;stroke:none}
@media(max-width:520px){.about-media .m-card{position:static;margin-top:18px;max-width:none}.about-media .badge-float{display:none}}

/* ============================================================
   WHY US — animierte Icon-Badges
   ============================================================ */
.why-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:var(--r-card);padding:34px 30px;
  box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--sh-hover)}
/* Icons ohne Hintergrund, größer – Platzhalter für animierte Lordicons */
.why-card .ic{width:60px;height:60px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px;animation:icobob 4.6s ease-in-out infinite}
.why-card:nth-child(2) .ic{animation-delay:.5s}
.why-card:nth-child(3) .ic{animation-delay:1s}
.why-card:nth-child(4) .ic{animation-delay:1.5s}
.why-card:nth-child(5) .ic{animation-delay:2s}
.why-card:nth-child(6) .ic{animation-delay:2.5s}
.why-card .ic svg{width:54px;height:54px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.why-card .ic lord-icon{width:58px;height:58px}
.why-card .ic svg.spin{animation:icospin 16s linear infinite;transform-origin:50% 50%}
.why-card:hover .ic{animation-play-state:paused;transform:translateY(-4px) scale(1.08)}
.why-card:hover .ic svg:not(.spin){animation:icowiggle .6s var(--ease)}
@keyframes icobob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes icospin{to{transform:rotate(360deg)}}
@keyframes icowiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.why-card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:9px;line-height:1.28;min-height:2.56em}
@media(max-width:639px){.why-card h3{min-height:0}}
.why-card p{font-size:15px;color:var(--text-2);line-height:1.55}

/* ============================================================
   STATS (dark count-up)
   ============================================================ */
.stats-band{background:var(--n900);color:#fff;position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(49,46,129,.6),transparent 55%)}
.stats-band .ring{position:absolute;border:1px solid rgba(255,255,255,.06);border-radius:50%}
.stats-title{text-align:center;color:#fff;font-family:var(--font-head);font-weight:800;font-size:clamp(1.55rem, 1.15rem + 1.9vw, 2.5rem);letter-spacing:-.02em;line-height:1.12;margin-bottom:14px;position:relative;z-index:1;max-width:22ch;margin-inline:auto}
.stats-sub{text-align:center;color:#aebbd4;font-size:clamp(15px, 14px + 0.3vw, 17px);line-height:1.5;margin:0 auto clamp(38px, 4.5vw, 58px);position:relative;z-index:1;max-width:56ch}
@media(min-width:1000px){.stats-sub{white-space:nowrap;max-width:none}}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 24px;text-align:center;position:relative;z-index:1}
@media(min-width:820px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat .num{font-family:var(--font-head);font-weight:800;font-size:clamp(3.4rem,6vw,5.25rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;background:linear-gradient(120deg,#7dd3fc,#fff 62%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .num .suf{-webkit-text-fill-color:#7dd3fc}
.stat .lbl{color:#94a3b8;font-size:15.5px;margin-top:16px;line-height:1.4;max-width:22ch;margin-inline:auto}
.stat{position:relative}
@media(min-width:820px){.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.1)}}

/* ============================================================
   BEFORE / AFTER — 3 nebeneinander
   ============================================================ */
.ba-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:680px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ba-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){#referenzen .container{width:min(100% - 40px, 1480px)}}
.ba-item .ba-cap{text-align:center;color:var(--text-2);font-size:14.5px;margin-top:16px;font-weight:500}
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:pan-y;
  cursor:ew-resize;box-shadow:var(--sh-hover);border:1px solid var(--n200)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after-img{z-index:1}
.ba .before-wrap{position:absolute;inset:0;z-index:2;overflow:hidden;clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba .before-wrap img{width:100%;height:100%;object-fit:cover}
.ba .tag{position:absolute;top:14px;z-index:4;padding:6px 13px;border-radius:var(--r-pill);font-family:var(--font-head);font-weight:700;font-size:12px}
.ba .tag-b{left:14px;background:rgba(15,23,42,.62);color:#fff;backdrop-filter:blur(4px)}
.ba .tag-a{right:14px;background:rgba(37,99,235,.92);color:#fff}
.ba .divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:5;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.4);display:flex;align-items:center;justify-content:center;z-index:6;cursor:ew-resize}
.ba .knob svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   PROCESS — animierter Beam + pulsierende Zahlen
   ============================================================ */
.steps{display:grid;grid-template-columns:1fr;gap:28px;position:relative}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}
  .steps::before{content:"";position:absolute;top:37px;left:12%;right:12%;height:3px;border-radius:3px;
    background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(49,46,129,.28));z-index:0}
  .steps::after{content:"";position:absolute;top:35.5px;left:12%;width:118px;height:6px;border-radius:6px;z-index:0;
    background:linear-gradient(90deg,transparent,#38BDF8,#2563EB,transparent);filter:blur(1px);
    animation:beam 4.8s var(--ease) infinite}}
@keyframes beam{0%{left:12%;opacity:0}12%{opacity:1}86%{opacity:1}100%{left:calc(88% - 118px);opacity:0}}
.step{position:relative;z-index:1;text-align:center}
.step .num{width:74px;height:74px;border-radius:22px;background:var(--grad);color:#fff;font-family:var(--font-head);
  font-weight:800;font-size:27px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;margin-inline:auto;
  box-shadow:0 16px 32px -12px rgba(37,99,235,.65);border:4px solid #fff;animation:numpulse 3.2s ease-in-out infinite}
.step:nth-child(2) .num{animation-delay:.4s}
.step:nth-child(3) .num{animation-delay:.8s}
.step:nth-child(4) .num{animation-delay:1.2s}
@keyframes numpulse{0%,100%{box-shadow:0 16px 32px -12px rgba(37,99,235,.65),0 0 0 0 rgba(37,99,235,.45)}50%{box-shadow:0 16px 32px -12px rgba(37,99,235,.65),0 0 0 14px rgba(37,99,235,0)}}
.step h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:9px}
.step p{font-size:15px;color:var(--text-2);line-height:1.55;max-width:30ch;margin-inline:auto}
@media(min-width:900px){.step p{margin-inline:auto}}
.process-cta{text-align:center;margin-top:var(--s8)}

/* ============================================================
   TESTIMONIALS — Google-Faktor
   ============================================================ */
.tst-head{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between;margin-bottom:var(--s8)}
.tst-head > div:first-child{max-width:none}
.tst-head .lead{max-width:none}
@media(min-width:1000px){.tst-head .h2{white-space:nowrap}.tst-head .lead{white-space:nowrap}}
.quotes{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:#fff;border:1px solid var(--n200);border-radius:var(--r-card);padding:30px 28px;position:relative;box-shadow:var(--sh-card)}
.quote .q-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.quote .q-verify{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--n600)}
.quote .q-verify svg.gg{width:16px;height:16px}
.quote .q-verify .vok{width:15px;height:15px;fill:none;stroke:#16A34A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.quote .stars{display:flex;gap:2px}
.quote .stars svg{width:17px;height:17px;fill:#FBBC05;stroke:none}
.quote p{color:var(--n800);font-size:15px;line-height:1.62;position:relative}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--n200)}
.quote .av{width:50px;height:50px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:16px;flex:none}
.quote .nm{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--n900)}
.quote .ro{font-size:13.5px;color:var(--text-2);line-height:1.3;margin-top:2px}
.tst-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:var(--s7);color:var(--text-2);font-size:15px}
.tst-foot svg.gg{width:20px;height:20px}
.tst-foot a{color:var(--blue);font-weight:700}
.tst-foot .tf-main{display:inline-flex;align-items:center;gap:10px}
.tst-foot .tf-sep{color:var(--n400)}
@media(max-width:640px){
  .tst-foot{flex-direction:column;gap:9px;text-align:center}
  .tst-foot .tf-sep{display:none}
}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:920px){.area-grid{grid-template-columns:1fr 1fr;gap:60px}}
.area-list{list-style:none;margin:26px 0 30px;display:grid;gap:15px}
.area-list li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--n700);font-weight:500}
.area-list li svg{width:23px;height:23px;flex:none;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.area-list li b{font-weight:700;color:var(--n900)}
.area-cta{display:flex;flex-wrap:wrap;gap:14px}

/* Premium Vektor-Karte (Einzugsgebiet) */
.area-map{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-hover);border:1px solid var(--n200);aspect-ratio:4/3;background:#eef2f8}
.area-svg{width:100%;height:100%;display:block}
.area-svg text{font-family:var(--font-head)}
.area-svg .tlabel{font-weight:700;font-size:12px;fill:var(--n800);paint-order:stroke;stroke:#eef2f8;stroke-width:4px;stroke-linejoin:round}
.area-svg .hqlabel{font-weight:800;font-size:13px;fill:#fff;letter-spacing:.01em}
.area-svg .ringlabel{font-weight:700;font-size:9.5px;fill:#2563EB;letter-spacing:.14em;opacity:.65;paint-order:stroke;stroke:#eef2f8;stroke-width:3px}
.area-map .map-badge{position:absolute;left:16px;top:16px;z-index:5;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--n200);border-radius:var(--r-pill);
  padding:8px 15px;font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--n800);box-shadow:var(--sh-card)}
.area-map .map-badge svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.area-svg [data-pulse]{display:none}}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{max-width:840px;margin-inline:auto}
.faq-item{border:1px solid var(--n200);border-radius:16px;margin-bottom:16px;background:#fff;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq-item.open{box-shadow:var(--sh-card);border-color:rgba(37,99,235,.3)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--n900);text-align:left;letter-spacing:-.01em}
.faq-q .tog{flex:none;width:36px;height:36px;border-radius:11px;background:var(--n100);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.faq-q .tog svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.faq-item.open .faq-q .tog{background:var(--grad)}
.faq-item.open .faq-q .tog svg{stroke:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.faq-a .inner{padding:0 28px 24px;color:var(--text-2);font-size:15.5px;line-height:1.65;max-width:66ch}
.faq-foot{text-align:center;margin-top:36px;font-size:16.5px;color:var(--text-2)}
.faq-foot a{color:var(--blue);font-weight:700}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{position:relative;color:#fff;overflow:hidden;background:var(--indigo-dark)}
.cta .cbg{position:absolute;inset:0;z-index:0}
.cta .cbg img{width:100%;height:100%;object-fit:cover;opacity:.62}
.cta .covl{position:absolute;inset:0;z-index:1;background:var(--grad);opacity:.5;mix-blend-mode:multiply}
.cta .covl2{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,23,50,.82) 0%,rgba(37,60,140,.6) 42%,rgba(37,99,235,.32) 100%)}
.cta .container{position:relative;z-index:2}
.cta-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:940px){.cta-grid{grid-template-columns:1fr 1fr;gap:64px}}
.cta h2{color:#fff;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.cta .csub{color:#dbe6f5;margin-top:20px;font-size:var(--fs-lead);max-width:46ch;line-height:1.5}
.cta .reassure{list-style:none;margin-top:30px;display:grid;gap:14px}
.cta .reassure li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:#eaf2ff}
.cta .reassure svg{width:24px;height:24px;fill:none;stroke:#7dd3fc;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cta .alt{margin-top:36px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cta .alt .lbl{font-size:15px;color:#c7d6f0}
.cta .alt a{font-family:var(--font-head);font-weight:800;font-size:26px;color:#fff;display:inline-flex;align-items:center;gap:10px;letter-spacing:-.01em}
.cta .alt a svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.form-card{background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);
  box-shadow:var(--sh-glass);border:1px solid rgba(255,255,255,.5)}
.form-card h3{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--n900);margin-bottom:6px}
.form-card .fp{font-size:14.5px;color:var(--text-2);margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--n700);font-family:var(--font-head)}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--n200);border-radius:var(--r-input);padding:13px 15px;
  font-family:var(--font-body);font-size:16px;color:var(--n900);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.field textarea{resize:vertical;min-height:92px}
.field ::placeholder{color:var(--n400)}
.form-card .btn{margin-top:22px}
.form-note{font-size:12.5px;color:var(--text-2);text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.form-note svg{width:15px;height:15px;fill:none;stroke:#16A34A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.form-ok{display:none;text-align:center;padding:34px 10px}
.form-ok.show{display:block}
.form-ok .ok-ic{width:72px;height:72px;border-radius:50%;background:#DCFCE7;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-ok .ok-ic svg{width:36px;height:36px;fill:none;stroke:#16A34A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form-ok h3{margin-bottom:10px;font-size:24px}
.form-ok p{font-size:16px;color:var(--text-2)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#0A0F1F;color:#94a3b8;padding-top:var(--s9);padding-bottom:30px}
.f-cols{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:760px){.f-cols{grid-template-columns:1.6fr 1fr 1fr 1.4fr}}
.footer .flogo{height:46px;margin-bottom:20px}
.footer .fdesc{font-size:15px;line-height:1.6;max-width:34ch;color:#94a3b8}
.footer .socials{display:flex;gap:11px;margin-top:22px}
.footer .socials a{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer .socials a svg{width:21px;height:21px;fill:#cbd5e1}
.footer .socials a:hover{background:var(--blue)}.footer .socials a:hover svg{fill:#fff}
.footer h4{font-family:var(--font-head);font-weight:800;font-size:13px;color:#fff;margin-bottom:18px;text-transform:uppercase;letter-spacing:.08em}
.footer .fcol a{display:block;color:#a9b6c9;font-size:15.5px;margin-bottom:13px;transition:color .15s,padding .15s}
.footer .fcol a:hover{color:#fff;padding-left:4px}
.footer .fcontact{font-size:15.5px;line-height:1.5}
.footer .fcontact .row{display:flex;gap:12px;margin-bottom:15px;align-items:flex-start}
.footer .fcontact .row svg{width:20px;height:20px;fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.footer .fcontact a{color:#cbd5e1}.footer .fcontact a:hover{color:#fff}
.f-bar{border-top:1px solid rgba(255,255,255,.09);margin-top:56px;padding-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;align-items:center;font-size:13.5px;color:#7b8aa0}
.f-bar a{color:#a9b6c9}.f-bar a:hover{color:#fff}
.f-bar .fb-links{display:flex;gap:20px;flex-wrap:wrap}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:12px;padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--n200);
  transform:translateY(120%);transition:transform .35s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;padding:15px 18px}
@media(max-width:768px){.mbar{display:flex}}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
  .reveal.in{opacity:1;transform:none}
  .hero .inner > *{opacity:0;transform:translateY(28px);animation:heroIn .8s var(--ease) forwards}
  .hero .h-eyebrow{animation-delay:.1s}
  .hero h1{animation-delay:.24s}
  .hero p.sub{animation-delay:.42s}
  .hero .cta-row{animation-delay:.56s}
  .hero .chips{animation-delay:.68s}
  @keyframes heroIn{to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  .hero .bg img{animation:none;transform:none}
  .why-card .ic,.step .num,.steps::after,.logo-track{animation:none}
  *{scroll-behavior:auto !important}
}

@media(max-width:520px){
  .hero .cta-row .btn{width:100%}
  .form-grid{grid-template-columns:1fr}
}

/* ============================================================
   REFERENZEN — gegenläufiges Ergebnis-Marquee
   ============================================================ */
.ref-marquee{margin-top:clamp(30px,4vw,48px);display:grid;gap:18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.ref-track{display:flex;width:max-content}
.ref-set{display:flex;gap:18px;padding-right:18px}
.rt-a{animation:refA 56s linear infinite}
.rt-b{animation:refB 56s linear infinite}
.ref-marquee:hover .ref-track{animation-play-state:paused}
.ref-item{position:relative;flex:none;margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--sh-card)}
.ref-item img{width:min(430px,74vw);aspect-ratio:16/10;object-fit:cover;display:block}
@keyframes refA{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes refB{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rt-a,.rt-b{animation:none}}
@media(max-width:600px){.ref-marquee{gap:12px}.ref-set{gap:12px;padding-right:12px}
  .ref-item img{width:min(300px,80vw);aspect-ratio:4/3.4}}

/* ============================================================
   EINZUGSGEBIET — Demi-Style (dunkel, Ortsraster + Fahrzeug)
   ============================================================ */
.area-dark{background:linear-gradient(160deg,#17284c 0%,#0d1a34 60%,#0b1730 100%);color:#c7d2e4;position:relative;overflow:hidden}
.area-dark .eyebrow{color:#7dd3fc}
.area-dark .eyebrow::before{background:linear-gradient(90deg,#38BDF8,#818cf8)}
.area-dark h2{color:#fff}
.area2-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:940px){.area2-grid{grid-template-columns:1fr 1.05fr;gap:56px}}
.area2-left .lead{color:#aebbd4;font-size:clamp(1.02rem,0.98rem+0.28vw,1.16rem);margin-top:16px}
.area2-list{list-style:none;margin:24px 0 30px;display:grid;gap:14px}
.area2-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#cdd8ec;font-weight:500}
.area2-list li svg{width:22px;height:22px;flex:none;margin-top:1px;fill:none;stroke:#38BDF8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.area2-list li b{color:#fff;font-weight:700}
.area2-cta{display:flex;flex-wrap:wrap;gap:14px}
.area-van{position:relative}
.area-van img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 26px rgba(0,0,0,.32))}
.loc-head{margin-top:clamp(48px,6vw,72px);margin-bottom:26px;display:flex;align-items:center;gap:14px;
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8aa0c4}
.loc-head::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
@media(min-width:900px){.loc-grid{grid-template-columns:repeat(3,1fr);gap:16px 30px}}
.loc-item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:16px;color:#dbe4f3;font-weight:500;transition:.2s var(--ease)}
.loc-item svg{width:20px;height:20px;flex:none;fill:none;stroke:#38BDF8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loc-item:hover{color:#fff;padding-left:8px}
.loc-item:hover svg{stroke:#7dd3fc}
@media(max-width:559px){.loc-item{font-size:13px;gap:8px;padding:10px 1px}.loc-item svg{width:16px;height:16px}}

/* ============================================================
   ABOUT — vertikale Foto-Galerie (Polar-Style, scrollt hoch)
   ============================================================ */
.about-gallery{position:relative;height:clamp(470px,57vw,640px);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-hover);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent)}
.about-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.about-cta .btn{padding:15px 21px;font-size:14.5px;gap:8px}
.about-cta .btn svg{width:18px;height:18px}
@media(max-width:520px){.about-cta .btn{width:100%}}
.ag-track{display:flex;flex-direction:column;gap:16px;padding:0;animation:agscroll 26s linear infinite;will-change:transform}
.about-gallery:hover .ag-track{animation-play-state:paused}
@keyframes agscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.ag-track img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:16px;display:block}
.about-media .badge-float{z-index:3}
@media(prefers-reduced-motion:reduce){.ag-track{animation:none}}

/* ============================================================
   TESTIMONIALS — Slider mit Pfeilen aussen
   ============================================================ */
.tst-slider{position:relative}
.tst-track{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 22px;scrollbar-width:none;-ms-overflow-style:none}
.tst-track::-webkit-scrollbar{display:none}
.tst-track .quote{flex:0 0 100%;scroll-snap-align:start}
@media(min-width:720px){.tst-track .quote{flex:0 0 clamp(300px,90%,392px)}}
.tst-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--n200);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 12px 28px -8px rgba(15,23,42,.3);transition:.22s var(--ease)}
.tst-prev{left:-24px}
.tst-next{right:-24px}
.tst-arrow svg{width:23px;height:23px;fill:none;stroke:var(--n700);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.tst-arrow:hover{border-color:var(--blue);background:var(--blue)}
.tst-arrow:hover svg{stroke:#fff}
.tst-arrow:disabled{opacity:.35;pointer-events:none}
@media(max-width:768px){.tst-arrow{width:42px;height:42px}.tst-arrow svg{width:20px;height:20px}.tst-prev{left:-2px}.tst-next{right:-2px}
  .tst-head{flex-direction:column;align-items:center;text-align:center}
  .tst-head > div:first-child{max-width:none}}

/* ============================================================
   PROMO-POPUP (bei 50% Scroll)
   ============================================================ */
.promo-pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,13,28,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.promo-pop.open{opacity:1;visibility:visible}
.promo-card{position:relative;background:#fff;border-radius:24px;max-width:452px;width:100%;max-height:calc(100dvh - 34px);overflow:hidden auto;
  box-shadow:0 40px 90px -30px rgba(8,13,28,.7);transform:translateY(24px) scale(.97);transition:transform .4s var(--ease);max-height:92vh;overflow-y:auto}
.promo-pop.open .promo-card{transform:none}
.promo-card .pp-img{position:relative;height:200px}
.promo-card .pp-img img{width:100%;height:100%;object-fit:cover;display:block}
.promo-card .pp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.35),transparent 55%)}
.promo-card .pp-badge{position:absolute;left:20px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.03em;
  padding:9px 16px;border-radius:var(--r-pill);box-shadow:0 10px 24px -8px rgba(37,99,235,.7)}
.promo-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.9);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.2)}
.promo-close svg{width:20px;height:20px;fill:none;stroke:var(--n800);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.promo-card .pp-body{padding:26px 28px 30px}
.promo-card .pp-body h3{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--n900);margin-bottom:10px}
.promo-card .pp-body h3 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.promo-card .pp-body p{font-size:15px;color:var(--text-2);line-height:1.55;margin-bottom:16px}
.promo-card .pp-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-bottom:11px}
.promo-card .pp-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.promo-card .pp-list{list-style:none;margin:0 0 22px;display:grid;gap:10px}
.promo-card .pp-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;color:var(--n700);line-height:1.4}
.promo-card .pp-list li svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.promo-card .pp-cta{display:grid;gap:12px}
@media(min-width:400px){.promo-card .pp-cta{grid-template-columns:1fr 1fr}}
.promo-card .pp-note{margin-top:12px;font-size:12px;color:var(--n400);text-align:center}

/* Text-Varianten: PC vs. Mobil (z.B. Eyebrow „Stimmen unserer Kundschaft" -> „Kundenstimmen") */
.mob-word{display:none}
@media(max-width:640px){.pc-word{display:none}.mob-word{display:inline}}

/* Mobile: Sektions-Leads (Fliesstext nach der H2) leicht kleiner — Hero-Sub bleibt */
@media(max-width:640px){
  .lead{font-size:15.5px}
  .area2-left .lead{font-size:15.5px}
}

/* ============================================================
   FOOTER TRUST-BADGES (Google / Trustpilot, selbst gebaut)
   ============================================================ */
.f-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.fbadge{display:inline-flex;align-items:center;gap:11px;background:#fff;border-radius:13px;padding:10px 15px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.fbadge svg.fb-g,.fbadge svg.fb-tp{width:26px;height:26px;flex:none}
.fbadge .fb-col{display:flex;flex-direction:column;gap:3px}
.fbadge .fb-col b{font-family:var(--font-head);font-weight:800;font-size:13px;color:#111826;line-height:1}
.fbadge .fb-stars{display:inline-flex;align-items:center;gap:2px}
.fbadge .fb-stars svg{width:13px;height:13px;fill:#FBBC05;stroke:none}
.fbadge .fb-stars-tp svg{fill:#00B67A}
.fbadge .fb-stars em{font-style:normal;font-family:var(--font-head);font-weight:800;font-size:12px;color:#111826;margin-left:5px}

/* ============================================================
   VARIANTE B — Hero mit Multi-Step-Anfrage (Kundenauswahl)
   ============================================================ */
.vb-divider{background:#070d1d;color:#7d92b8;text-align:center;font-family:var(--font-head);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 20px;border-top:1px solid rgba(255,255,255,.08)}
.heroB{position:relative;overflow:hidden;padding:clamp(148px,13vw,196px) 0 clamp(56px,6.5vw,96px)}
.heroB .bg{position:absolute;inset:0;z-index:0}
.heroB .bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.heroB .ovl{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,15,32,.94) 0%,rgba(20,28,58,.82) 42%,rgba(37,99,235,.34) 74%,rgba(56,189,248,.12) 100%)}
.heroB .ovl2{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,12,26,.5),transparent 42%)}
.heroB-wrap{position:relative;z-index:2;max-width:1460px;margin-inline:auto;
  padding-inline:clamp(16px,2.4vw,40px);display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,70px);align-items:center}
.heroB .h-eyebrow{display:inline-block;position:relative;font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.13em;text-transform:uppercase;color:#f2f7ff;margin-bottom:26px;padding-bottom:9px;
  text-shadow:0 2px 12px rgba(8,12,26,.55)}
.heroB .h-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--grad);opacity:.95}
.hb-title{color:#fff;font-family:var(--font-head);font-weight:800;line-height:1.04;letter-spacing:-.03em;
  font-size:clamp(2rem, 1.3rem + 2.9vw, 3.4rem);text-shadow:0 2px 14px rgba(8,12,26,.38)}
.hb-title .grad-word{background:linear-gradient(100deg,#7dd3fc,#c7b6ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 9px rgba(8,12,26,.42))}
.hb-sub{color:#dbe6f5;font-size:clamp(0.98rem, 0.92rem + 0.35vw, 1.1rem);margin-top:20px;max-width:52ch;line-height:1.55}
.hb-chips{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-top:24px}
.heroB .chip{display:inline-flex;align-items:center;gap:11px;font-size:16px;color:#eaf1fd;font-weight:500}
.heroB .chip svg{width:22px;height:22px;fill:none;stroke:#7dd3fc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Multi-Step-Formular */
.msf{background:#fff;border-radius:22px;box-shadow:0 34px 80px -34px rgba(6,12,30,.65);
  padding:clamp(22px,2.4vw,32px);max-width:560px;margin-left:auto;width:100%}
.msf-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.msf-steplabel{font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.msf-bonus{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--blue);
  background:#eff4ff;border:1px solid #dbe7ff;border-radius:var(--r-pill);padding:5px 11px;white-space:nowrap}
.msf-bar{height:6px;border-radius:99px;background:var(--n100);overflow:hidden;margin-bottom:20px}
.msf-bar i{display:block;height:100%;width:25%;background:var(--grad);border-radius:99px;transition:width .35s var(--ease)}
.msf h4{font-family:var(--font-head);font-size:18.5px;font-weight:800;letter-spacing:-.01em;color:var(--n900);margin-bottom:15px}
.msf-step{display:none}
.msf-step.on{display:block;animation:msfin .32s var(--ease)}
@keyframes msfin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.msf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.msf-grid-2{grid-template-columns:repeat(2,1fr)}
.msf-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){.msf-grid,.msf-grid-3{grid-template-columns:repeat(2,1fr)}}
.msf-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:15px 8px 12px;border:1.6px dashed var(--n300);border-radius:14px;background:#fff;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:12.5px;color:var(--n700);text-align:center;line-height:1.25;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.msf-opt svg{width:29px;height:29px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.msf-opt:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-card)}
.msf-opt.sel{border-style:solid;border-color:var(--blue);background:#eff4ff;box-shadow:0 12px 26px -16px rgba(37,99,235,.55)}
.msf-fields{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
.msf-fields input{width:100%;padding:13px 15px;border:1.6px solid var(--n200);border-radius:12px;font:inherit;font-size:15px;color:var(--n900);background:#fff}
.msf-fields input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.msf-fields .msf-wide{grid-column:1/-1}
@media(max-width:460px){.msf-fields{grid-template-columns:1fr}}
.msf-submit{width:100%;justify-content:center}
.msf-note{font-size:12px;color:var(--n400);text-align:center;margin-top:11px}
.msf-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.msf-back{border:none;background:none;cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;color:var(--n500);
  padding:6px 2px;visibility:hidden;transition:color .15s}
.msf-back:hover{color:var(--blue)}
.msf-hint{font-size:12px;color:var(--n400)}
.msf-ok{display:none;text-align:center;padding:26px 8px 12px}
.msf-ok .ok-ic{width:62px;height:62px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  box-shadow:0 16px 34px -14px rgba(37,99,235,.6)}
.msf-ok .ok-ic svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.msf-ok h4{margin-bottom:8px}
.msf-ok p{font-size:14.5px;color:var(--text-2);line-height:1.55;max-width:34ch;margin-inline:auto}
@media(max-width:980px){
  .heroB-wrap{grid-template-columns:1fr;gap:34px}
  .msf{margin-inline:auto;max-width:640px}
  .hb-chips{gap:12px}
}

/* Variante B: 3x3-Leistungsgrid + CTA-Buttons links */
.msf-grid-9{grid-template-columns:repeat(3,1fr);gap:11px}
.msf-grid-9 .msf-opt{font-size:12px;padding:14px 6px 12px;gap:8px}
.msf-grid-9 .msf-opt svg{width:27px;height:27px}
@media(max-width:520px){.msf-grid-9{grid-template-columns:repeat(3,1fr);gap:8px}
  .msf-grid-9 .msf-opt{font-size:10.5px;gap:7px;padding:12px 4px 10px}
  .msf-grid-9 .msf-opt svg{width:22px;height:22px}}
.hb-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media(max-width:520px){.hb-cta .btn{width:100%}}

/* PC: Hero-Bullets (beide Hero-Sektionen) groesser */
@media(min-width:1000px){
  .hero .chip,.heroB .chip{font-size:18.5px;gap:13px}
  .hero .chip svg,.heroB .chip svg{width:27px;height:27px}
  .hero .chips,.hb-chips{gap:16px}
}


/* Haupt-Hero-Formular: Bereichs-/Dynamik-Grids + Frage-Chips */
.msf-grid-2b{grid-template-columns:repeat(2,1fr);gap:12px}
.msf-grid-2b .msf-opt{font-size:13.5px;padding:18px 10px 15px}
.msf-grid-dyn{grid-template-columns:repeat(3,1fr);gap:11px}
.msf-grid-dyn .msf-opt{font-size:12px;padding:14px 6px 12px;gap:8px}
.msf-grid-dyn .msf-opt svg{width:26px;height:26px}
@media(max-width:520px){.msf-grid-dyn{grid-template-columns:repeat(2,1fr)}}
.msf-q{margin-bottom:18px}
.msf-q h5{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--n700);margin-bottom:10px}
.msf-chips{display:flex;flex-wrap:wrap;gap:9px}
.msf-chip{border:1.6px dashed var(--n300);background:#fff;border-radius:999px;padding:11px 17px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--n700);transition:.16s var(--ease)}
.msf-chip:hover{border-color:var(--blue);transform:translateY(-1px)}
.msf-chip.sel{border-style:solid;border-color:var(--blue);background:#eff4ff;color:var(--blue)}

/* ============================================================
   LIGHTBOX (Referenzen + Galerie)
   ============================================================ */
.ref-item img,.about-gallery .ag-track img{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:300;background:rgba(6,10,24,.93);display:none;align-items:center;justify-content:center}
.lbx.open{display:flex}
.lbx img{max-width:88vw;max-height:82vh;border-radius:16px;box-shadow:0 40px 120px -30px rgba(0,0,0,.7);user-select:none}
.lbx button{position:absolute;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.lbx button:hover{background:rgba(255,255,255,.22)}
.lbx button svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lbx .lbx-close{top:26px;right:26px}
.lbx .lbx-prev{left:22px;top:50%;transform:translateY(-50%)}
.lbx .lbx-next{right:22px;top:50%;transform:translateY(-50%)}
.lbx .lbx-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#cbd5e1;
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.08em}
@media(max-width:600px){.lbx .lbx-prev{left:10px}.lbx .lbx-next{right:10px}.lbx button{width:46px;height:46px}}

/* ============================================================
   UNTERSEITEN — Subhero + Leistungs-Explorer + CTA-Band
   ============================================================ */
.subhero{position:relative;overflow:hidden;padding:clamp(150px,14vw,200px) 0 clamp(48px,6vw,84px)}
.subhero .bg{position:absolute;inset:0;z-index:0}
.subhero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.subhero .ovl{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,15,32,.94) 0%,rgba(20,28,58,.82) 46%,rgba(37,99,235,.32) 78%,rgba(56,189,248,.1) 100%)}
.subhero .ovl2{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,12,26,.5),transparent 44%)}
.subhero .container{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:nowrap;gap:10px;align-items:center;font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9db4d8;margin-bottom:22px;white-space:nowrap}
.crumbs a{color:#cfe0f7}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;color:#64748b}
.subhero h1{color:#fff;font-family:var(--font-head);font-weight:800;font-size:clamp(2rem, 1.4rem + 2.6vw, 3.3rem);letter-spacing:-.03em;line-height:1.06;text-shadow:0 2px 14px rgba(8,12,26,.4)}
.subhero h1 em{font-style:normal;background:linear-gradient(100deg,#7dd3fc,#c7b6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subhero .hb-sub{margin-top:18px}
.subhero .hb-chips{margin-top:22px}
.subhero .chip{display:inline-flex;align-items:center;gap:11px;font-size:16px;color:#eaf1fd;font-weight:500}
.subhero .chip svg{width:22px;height:22px;fill:none;stroke:#7dd3fc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1000px){.subhero .chip{font-size:18px}.subhero .chip svg{width:25px;height:25px}}

.sx-grid{display:grid;grid-template-columns:350px 1fr;gap:clamp(22px,3vw,42px);align-items:start;margin-top:clamp(30px,4vw,50px)}
@media(max-width:920px){.sx-grid{grid-template-columns:1fr}}
.sx-nav{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);position:sticky;top:112px}
.sx-list{display:flex;flex-direction:column;gap:10px}
/* Mobil: Leistungen -> Infobox -> "Unsicher, was Sie brauchen?" ganz unten */
@media(max-width:920px){
  .sx-nav{display:contents}
  .sx-list{order:1}
  .sx-panel{order:2}
  .sx-cta{order:3}
}
.sx-btn{display:flex;align-items:center;gap:14px;padding:17px 19px;border-radius:15px;border:1.6px solid var(--n200);background:#fff;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--n700);text-align:left;transition:.18s var(--ease)}
.sx-btn svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-btn:hover{border-color:var(--blue);transform:translateX(3px)}
.sx-btn.active{border-color:var(--blue);background:#eff4ff;color:var(--n900);box-shadow:0 14px 30px -18px rgba(37,99,235,.45)}
.sx-cta{background:var(--grad);border-radius:18px;padding:26px;color:#fff}
.sx-cta strong{display:block;font-family:var(--font-head);font-weight:800;font-size:17.5px;margin-bottom:8px}
.sx-cta p{font-size:14px;color:#e0e7ff;line-height:1.5;margin-bottom:16px}
.sx-cta .btn{background:#fff;color:var(--blue);width:100%;justify-content:center;font-size:14.5px;padding:13px 18px}
.sx-cta .sx-tel{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px}
.sx-cta .sx-tel svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-panel{background:#fff;border:1px solid var(--n200);border-radius:22px;padding:clamp(26px,3vw,44px);box-shadow:var(--sh-card)}
.sx-block{display:none}
.sx-block.active{display:block;animation:msfin .35s var(--ease)}
.sx-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.sx-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.sx-block h3{font-family:var(--font-head);font-weight:800;font-size:clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);letter-spacing:-.02em;color:var(--n900);margin-bottom:13px}
.sx-block p{font-size:15.5px;color:var(--text-2);line-height:1.62;max-width:62ch}
.sx-points{list-style:none;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media(max-width:560px){.sx-points{grid-template-columns:1fr}}
.sx-points li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--n700);font-weight:500}
.sx-points li svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-img{margin-top:24px;border-radius:16px;overflow:hidden;border:1px solid var(--n200)}
.sx-img img{width:100%;aspect-ratio:16/8.4;object-fit:cover;display:block;cursor:zoom-in;transition:transform .6s var(--ease)}
.sx-img img:hover{transform:scale(1.03)}

.sx-band{position:relative;background:var(--grad);border-radius:26px;padding:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;overflow:hidden}
.sx-band::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.sx-band h3{font-family:var(--font-head);font-weight:800;font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem);color:#fff;letter-spacing:-.02em;max-width:24ch;position:relative}
.sx-band .sx-band-cta{display:flex;flex-wrap:wrap;gap:14px;position:relative}
.sx-band .btn-white{background:#fff;color:var(--blue)}
@media(min-width:1040px) and (max-width:1360px){
  .nav .actions .btn{padding:12px 18px;font-size:14px}
  .nav .tel{font-size:14.5px}
  .nav .links a,.nav .links .megatrig{font-size:15px}
}

/* ---------- KONTAKTSEITE ---------- */
.kc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.5vw,44px)}
@media(max-width:900px){.kc-grid{grid-template-columns:1fr}}
.kc-card{background:var(--white);border:1px solid var(--n200);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:10px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.kc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);border-color:#C7D8F8}
.kc-card .ic{width:52px;height:52px;border-radius:var(--r-icon);display:grid;place-items:center;
  background:rgba(37,99,235,.09);color:var(--blue);margin-bottom:4px}
.kc-card .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kc-card .kc-lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n400)}
.kc-card .kc-val{font-family:var(--font-head);font-weight:800;font-size:clamp(1.15rem,1.05rem + .35vw,1.4rem);
  color:var(--heading);line-height:1.25;overflow-wrap:anywhere}
.kc-card .kc-val a{transition:color .2s}
.kc-card:hover .kc-val a{color:var(--blue)}
.kc-card p{font-size:var(--fs-small);color:var(--text-2);margin-top:auto}

.kc-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.5vw,54px);align-items:center;
  margin-top:clamp(30px,4vw,50px)}
@media(max-width:980px){.kc-split{grid-template-columns:1fr}}
.kc-info-card{background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px)}
.kc-info-card h3{font-size:var(--fs-h3);margin-bottom:14px}
.kc-rows{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.kc-rows .row{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--text-2)}
.kc-rows .row svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kc-rows .row b{display:block;color:var(--heading);font-weight:700}

.map-wrap{margin-top:clamp(30px,4vw,50px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--n200);
  box-shadow:var(--sh-card);background:var(--n100);aspect-ratio:16/6.5}
@media(max-width:760px){.map-wrap{aspect-ratio:4/3.4}}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
.map-fallback{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:24px;gap:8px;
  color:var(--text-2);font-size:var(--fs-small)}
.map-fallback b{display:block;font-family:var(--font-head);color:var(--heading);font-size:1.15rem;margin-bottom:6px}
.map-legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:18px;
  font-size:var(--fs-small);color:var(--text-2)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.map-legend svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- EINGEBETTETES ERKLÄRVIDEO ---------- */
.vid-block{max-width:900px;margin:clamp(26px,3.4vw,42px) auto clamp(36px,4.6vw,62px);
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--n200);
  box-shadow:var(--sh-hover);background:var(--n900);line-height:0}
.vid-block video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:var(--n900)}
@media(max-width:620px){.vid-block{border-radius:var(--r-card);margin-inline:0}}

/* Multi-Step-Formular auf der Kontaktseite: eigene Höhe, vertikal zentriert */
.msf-card{display:flex}
.msf-card .msf{width:100%}

/* Breadcrumbs immer einzeilig (auch die längste Kette auf schmalen Handys) */
@media(max-width:760px){.crumbs{font-size:10.5px;gap:7px;letter-spacing:.06em;margin-bottom:18px}}
@media(max-width:420px){.crumbs{font-size:9.5px;gap:6px;letter-spacing:.04em}}
@media(max-width:360px){.crumbs{font-size:9px;gap:5px;letter-spacing:.02em}}

/* ---------- TEAM-SLIDER ---------- */
.tm-slider{position:relative;margin-top:clamp(28px,3.6vw,46px)}
.tm-track{display:flex;gap:clamp(18px,2.2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;padding-block:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.tm-track::-webkit-scrollbar{display:none}
.tm-card{flex:0 0 calc((100% - 2 * clamp(18px,2.2vw,28px)) / 3);scroll-snap-align:start;
  display:flex;flex-direction:column;height:clamp(500px,48vw,600px);
  background:var(--white);border:1px solid var(--n200);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tm-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);border-color:#C7D8F8}
@media(max-width:1000px){.tm-card{flex:0 0 calc((100% - clamp(18px,2.2vw,28px)) / 2)}}
@media(max-width:680px){.tm-card{flex:0 0 100%;height:auto}
  .tm-photo{flex:0 0 auto;aspect-ratio:4/3}
  .tm-body{flex:0 0 auto;padding:20px 20px 24px}}

.tm-photo{flex:1 1 66.6%;min-height:0;position:relative;background:var(--n100);overflow:hidden}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tm-photo.is-placeholder{background:linear-gradient(150deg,#EAF1FE 0%,#DDE8FC 55%,#D3E0FA 100%);
  display:grid;place-items:center}
.tm-photo.is-placeholder::after{content:"?";font-family:var(--font-head);font-weight:800;
  font-size:clamp(64px,7vw,104px);line-height:1;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.72}
.tm-photo .tm-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#7f9bc9}

.tm-body{flex:0 1 33.4%;min-height:fit-content;overflow:hidden;padding:clamp(15px,1.6vw,20px) clamp(17px,1.8vw,22px);
  display:flex;flex-direction:column;justify-content:center}
.tm-body h3{font-size:clamp(1.15rem,1.05rem + .3vw,1.35rem);margin-bottom:3px}
.tm-role{display:block;font-size:var(--fs-small);font-weight:500;color:var(--n400);margin-bottom:11px}
.tm-contact{display:flex;flex-direction:column;gap:9px}
.tm-contact a{display:flex;gap:10px;align-items:center;font-size:.9375rem;color:var(--text-2);
  line-height:1.4;transition:color .2s;overflow-wrap:anywhere}
.tm-contact a:hover{color:var(--blue)}
.tm-contact svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm-contact span{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--n700)}
.tm-contact a:hover span{color:var(--blue)}

.tm-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--n200);background:var(--white);color:var(--n900);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-card);
  transition:opacity .25s,transform .25s var(--ease),border-color .25s}
.tm-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tm-arrow:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-50%) scale(1.06)}
.tm-arrow[disabled]{opacity:.4;cursor:default;transform:translateY(-50%)}
.tm-prev{left:-24px}
.tm-next{right:-24px}
@media(max-width:1320px){.tm-prev{left:6px}.tm-next{right:6px}}

/* ---------- ANSPRECHPARTNER-CTA (Foto ragt über die Sektion) ---------- */
.pcta{position:relative;background:var(--grad);color:#fff;overflow:visible;
  margin-top:clamp(96px,10vw,160px);padding-block:clamp(52px,6vw,84px)}
.pcta-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:1fr minmax(0,430px);gap:clamp(20px,3vw,48px);align-items:center}
.pcta-copy .eyebrow{margin-bottom:14px}
.pcta-copy h2{color:#fff;font-size:var(--fs-h2);margin-bottom:16px}
.pcta-copy p{color:#dbeafe;font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin-bottom:26px}
.pcta-btns{display:flex;flex-wrap:wrap;gap:12px}
.pcta-btns .btn svg{width:19px;height:19px}
/* Foto absolut -> bestimmt die Bandhöhe NICHT mit und ragt oben heraus */
.pcta-photo{position:absolute;right:0;bottom:calc(-1 * clamp(52px,6vw,84px));
  width:auto;z-index:2;pointer-events:none;line-height:0}
.pcta-photo img{display:block;width:auto;max-width:none;
  height:clamp(430px,48vw,650px);
  filter:drop-shadow(0 26px 46px rgba(8,15,40,.30))}
@media(max-width:860px){
  .pcta{margin-top:clamp(120px,30vw,180px);padding-block:0 clamp(38px,7vw,54px)}
  .pcta-inner{grid-template-columns:1fr;text-align:center;gap:0}
  .pcta-photo{position:static;order:-1;justify-self:center;margin-bottom:6px;
    margin-top:calc(-1 * clamp(72px,19vw,115px))}
  .pcta-photo img{height:clamp(280px,58vw,370px)}
  .pcta-copy p{margin-inline:auto}
  .pcta-btns{justify-content:center}
}

/* Sektion direkt über dem Ansprechpartner-Band: unten kompakt halten */
.section--tight-b{padding-bottom:clamp(8px,1.2vw,18px)}
.section--tight-b .tst-foot{margin-bottom:0}

/* Logo-Wasserzeichen in der FAQ-Sektion (rechts mittig) */
#faq{position:relative}
.faq-wm{position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:56%;top:50%;transform:translate(-50%,-50%);
  width:clamp(320px,36vw,560px);height:auto;opacity:.075}
#faq .container{position:relative;z-index:1}
@media(max-width:1000px){.faq-wm{width:min(72vw,380px);opacity:.06;left:54%}}
@media(max-width:640px){.faq-wm{display:none}}