/* ============================================================
       WERKSTATT NOIR — Ausbeultechnik Nord
       ============================================================ */
    :root{
      --bg:#FFFFFF; --bg-deep:#0F172A; --surface:#FFFFFF; --surface-alt:#F8FAFC;
      --text:#0F172A; --text-muted:#475569; --text-faint:#64748B;
      --accent:#2563EB; --accent-alt:#1E40AF; --accent-soft:rgba(37,99,235,0.08);
      --accent-line:rgba(37,99,235,0.30); --border:#E2E8F0; --border-soft:rgba(37,99,235,0.20);
      --grad-amber:linear-gradient(135deg,#2563EB 0%,#1E40AF 100%);
      --grad-amber-hover:linear-gradient(135deg,#1D4ED8 0%,#1E3A8A 100%);
      --grad-surface-top:linear-gradient(180deg,rgba(15,23,42,0.025) 0%,rgba(15,23,42,0) 60%);
      --glow-amber:0 6px 20px rgba(37,99,235,0.18);
      --glow-amber-strong:0 12px 32px rgba(37,99,235,0.26);
      --radial-amber:radial-gradient(60% 60% at 75% 20%,rgba(37,99,235,0.10) 0%,rgba(37,99,235,0) 70%);
      --shadow-card:0 1px 2px rgba(15,23,42,0.04),0 12px 32px rgba(15,23,42,0.08);
      --shadow-nav:0 8px 30px rgba(15,23,42,0.10);
      --fs-eyebrow:clamp(11px,0.8vw,12px); --fs-body:clamp(15px,1.05vw,17px);
      --fs-lede:clamp(17px,1.4vw,20px); --fs-h3:clamp(20px,1.8vw,24px);
      --fs-h2:clamp(30px,4vw,48px); --fs-hero:clamp(44px,7vw,92px); --fs-stat:clamp(34px,4.5vw,54px);
      --lh-tight:1.05; --lh-head:1.12; --lh-body:1.65;
      --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;--sp-8:128px;
      --section-py:clamp(64px,9vw,128px); --container:1200px; --container-narrow:760px;
      --r-sm:8px;--r-md:14px;--r-lg:20px;--r-pill:999px;--r-sharp:4px;
      --ease:cubic-bezier(0.22,0.61,0.36,1); --dur:0.3s;

      /* ===== NORDLICHT-EDITORIAL — Elevation Tokens (additiv) ===== */
      --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-800:#1E40AF; --blue-900:#1E3A8A;
      --blue-500:#3B82F6; --blue-400:#60A5FA; --blue-300:#93C5FD;
      --navy-900:#0F172A; --navy-800:#13203A; --white:#FFFFFF; --off:#F8FAFC; --blue-tint:#F4F7FE;
      --hair:rgba(37,99,235,0.10); --hair-strong:rgba(37,99,235,0.20); --hair-accent:rgba(37,99,235,0.28);
      --hair-d:rgba(255,255,255,0.12); --hair-d-accent:rgba(147,197,253,0.30);
      --edge-glow:linear-gradient(90deg,transparent,rgba(96,165,250,0.5),transparent);
      --grad-blue:linear-gradient(135deg,#2563EB,#1E40AF);
      --grad-blue-hover:linear-gradient(135deg,#1D4ED8,#1E3A8A);
      --grad-text:linear-gradient(135deg,#2563EB,#60A5FA);
      --grad-progress:linear-gradient(90deg,#2563EB,#60A5FA);
      --hero-island:linear-gradient(160deg,#0F172A 0%,#13203A 55%,#1E3A8A 100%);
      --aurora-a:radial-gradient(50% 45% at 22% 26%,rgba(59,130,246,0.22),transparent 70%);
      --aurora-b:radial-gradient(42% 42% at 80% 74%,rgba(30,64,175,0.28),transparent 72%);
      --mesh-light:radial-gradient(80% 60% at 50% -10%,rgba(37,99,235,0.05),transparent 60%);
      --raster:repeating-linear-gradient(0deg,rgba(37,99,235,0.025) 0 1px,transparent 1px 96px),repeating-linear-gradient(90deg,rgba(37,99,235,0.025) 0 1px,transparent 1px 96px);
      --sh-card:0 1px 2px rgba(15,23,42,0.04),0 20px 40px -24px rgba(15,23,42,0.12);
      --sh-card-hover:0 1px 2px rgba(15,23,42,0.05),0 28px 56px -24px rgba(15,23,42,0.18);
      --sh-nav:0 6px 24px rgba(15,23,42,0.06);
      --sh-island:0 40px 80px -40px rgba(8,15,30,0.6);
      --glow-blue:0 8px 24px rgba(37,99,235,0.32);
      --glow-ring:0 0 24px rgba(37,99,235,0.45);
      --glow-num:0 0 18px rgba(96,165,250,0.4);
      --inset-hi:inset 0 1px 0 rgba(255,255,255,0.18);
      --ring-focus:0 0 0 3px rgba(37,99,235,0.32);
      --r-xl:20px; --r-pill2:999px;
      --sec-head-mb:clamp(48px,6vw,80px); --dur-reveal:0.7s;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:Inter,system-ui,sans-serif; font-size:var(--fs-body); line-height:var(--lh-body);
      -webkit-font-smoothing:antialiased; overflow-x:hidden;
    }
    body::after{
      content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
      opacity:0; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    h1,h2,h3,h4,h5{margin:0;font-family:Inter,system-ui,sans-serif;font-optical-sizing:auto;line-height:var(--lh-head)}
    p{margin:0}
    ::selection{background:var(--accent-soft);color:var(--text)}
    :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
    /* heller Fokus-Ring auf dunklen Navy-Inseln */
    .hero :focus-visible,.kw-band :focus-visible,.vorteile :focus-visible,footer :focus-visible{outline-color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,0.6)}
    /* Body-Scroll-Lock bei offenem Mobile-Drawer */
    body:has(#navLinks.open){overflow:hidden}
    .skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-family:Inter,sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;transition:top var(--dur) var(--ease)}
    .skip:focus{top:8px}
    .wrap{max-width:var(--container);margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
    section{padding-block:var(--section-py);position:relative}
    section[id],footer{scroll-margin-top:88px}
    .divider{border:0;border-top:1px solid var(--border);margin:0}
    main>section+section{border-top:1px solid var(--border)}

    /* ---------- Eyebrow ---------- */
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-family:Inter,sans-serif;font-weight:600;text-transform:uppercase;
      font-size:var(--fs-eyebrow);letter-spacing:0.10em;color:var(--accent);margin:0 0 var(--sp-2);
    }
    .eyebrow::before{
      content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
      box-shadow:0 0 8px var(--accent);flex:none;
    }
    .mono{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:0.08em}

    /* ---------- Section headers ---------- */
    .sec-head{max-width:680px;margin-bottom:var(--sp-6)}
    .sec-head.center{margin-inline:auto;text-align:center}
    .sec-head h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.01em}
    .sec-head .lede{margin-top:var(--sp-2);color:var(--text-muted);font-size:var(--fs-lede)}

    /* ---------- Buttons ---------- */
    .btn-primary,.btn-secondary{
      display:inline-flex;align-items:center;gap:10px;justify-content:center;
      font-family:Inter,sans-serif;font-weight:600;font-size:14px;cursor:pointer;
      padding:14px 26px;border-radius:var(--r-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .btn-primary{background:var(--grad-amber);color:#fff;border:0;box-shadow:var(--glow-amber)}
    .btn-primary:hover{background:var(--grad-amber-hover);transform:translateY(-1px);box-shadow:var(--glow-amber-strong)}
    .btn-primary:active{transform:translateY(0)}
    .btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
    .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
    .btn-primary svg,.btn-secondary svg{width:18px;height:18px;flex:none}
    .ghost{
      display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;
      font-family:Inter,sans-serif;position:relative;width:fit-content;
    }
    .ghost::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
    .ghost:hover::after{transform:scaleX(1)}
    .ghost .arr{transition:transform var(--dur) var(--ease)}
    .ghost:hover .arr{transform:translateX(4px)}

    /* ---------- NAV ---------- */
    .nav{position:fixed;top:0;left:0;right:0;z-index:100;height:68px;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);border-bottom:1px solid transparent}
    .nav.scrolled{background:rgba(255,255,255,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-nav)}
    .nav .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
    .nav .wrap{height:100%}
    .nav-logo{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.95)}
    .nav-logo svg{height:26px;width:auto;color:#fff}
    .nav-logo-text{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:18px;display:flex;flex-direction:column;line-height:1.05}
    .nav-logo-text::after{content:"";display:none}
    .brand-dot{color:var(--accent)}
    .nav-logo-sub{font-family:Inter,sans-serif;font-weight:500;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.62);margin-top:2px}
    .nav-links{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0}
    .nav-links>li>a{
      font-family:Inter,sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.08em;
      color:rgba(255,255,255,0.82);transition:color var(--dur) var(--ease);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    }
    .nav-links>li>a:hover{color:#fff}
    .nav-dropdown{position:relative}
    .nav-dropdown-menu{
      position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
      background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;
      min-width:220px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;
      box-shadow:var(--shadow-card);transition:all var(--dur) var(--ease);
    }
    .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
    .nav-dropdown-menu a{font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text-muted);padding:9px 12px;border-radius:var(--r-sm);transition:all var(--dur) var(--ease)}
    .nav-dropdown-menu a:hover{background:var(--accent-soft);color:var(--text)}
    .nav-right{display:flex;align-items:center;gap:14px}
    .nav-cta{
      display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.28);border-radius:var(--r-sm);
      padding:10px 16px;font-family:Inter,sans-serif;font-weight:600;font-size:13px;color:rgba(255,255,255,0.92);transition:all var(--dur) var(--ease);
    }
    .nav-cta svg{width:16px;height:16px}
    .nav-cta:hover{border-color:var(--accent);color:#fff}
    /* In der Linkliste eingebettete CTAs: nur im Mobile-Drawer sichtbar */
    .nav-links .nav-cta{display:none}
    .nav-drawer-cta{display:none}
    .mobile-toggle{display:none;background:transparent;border:0;color:#fff;cursor:pointer;padding:6px;min-width:48px;min-height:48px;align-items:center;justify-content:center;position:relative;z-index:102}
    .mobile-toggle .ico-close{display:none}
    .mobile-toggle[aria-expanded="true"]{color:var(--text)}
    .mobile-toggle[aria-expanded="true"] .ico-open{display:none}
    .mobile-toggle[aria-expanded="true"] .ico-close{display:block}
    .nav-backdrop{position:fixed;inset:0;background:rgba(15,23,42,0.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);z-index:95}
    body:has(#navLinks.open) .nav-backdrop{opacity:1;visibility:visible}

    /* ---------- HERO ---------- */
    .hero{min-height:90vh;padding-top:120px;display:flex;align-items:center;overflow:hidden}
    .hero-bg-grid{position:absolute;inset:0;z-index:0;background-image:repeating-linear-gradient(0deg,var(--border) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 64px);opacity:0.04;-webkit-mask-image:radial-gradient(120% 90% at 60% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(120% 90% at 60% 30%,#000 30%,transparent 80%)}
    .hero-radial{position:absolute;inset:0;z-index:0;background:var(--radial-amber)}
    .hero .wrap{position:relative;z-index:1;width:100%}
    .breadcrumb{margin-bottom:var(--sp-4)}
    .breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint)}
    .breadcrumb a{color:var(--text-faint)}
    .breadcrumb a:hover{color:var(--accent)}
    .breadcrumb .sep{margin:0 6px;color:var(--border)}
    .hero-inner{display:grid;gap:var(--sp-6);align-items:center}
    .hero h1{font-size:var(--fs-hero);font-weight:600;line-height:var(--lh-tight);letter-spacing:-0.01em}
    .hero h1 .underline{position:relative;white-space:nowrap;color:var(--text)}
    .hero h1 .underline svg{position:absolute;left:0;bottom:-0.12em;width:100%;height:0.22em;overflow:visible}
    .hero h1 .underline path{stroke:var(--accent);stroke-width:6;fill:none;stroke-linecap:round}
    .hero-desc{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-lede);max-width:52ch}
    .hero-actions{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
    /* hero-trust ist eigenes Grid-Kind unter der Quickcard (Mobile: Formular rückt vor die Trust-Zahlen) */
    .hero-trust{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
    .hero-trust-item{display:flex;flex-direction:column;gap:4px;padding-right:var(--sp-3);border-right:1px solid var(--border)}
    .hero-trust-item:last-child{border-right:0;padding-right:0}
    .hero-trust-num{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:var(--fs-stat);color:var(--accent);line-height:1}
    .hero-trust-label{font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.08em;color:var(--text-muted)}
    /* Hero visual */
    .hero-visual{position:relative}
    .duotone-frame{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow-card)}
    .duotone-frame .ph{aspect-ratio:4/5;background:linear-gradient(135deg,#1E3A5F 0%,#0F172A 100%);position:relative;display:flex;align-items:center;justify-content:center}
    .duotone-frame .ph::before{content:"";position:absolute;inset:0;background:var(--radial-amber)}
    .duotone-frame .ph::after{content:"";position:absolute;inset:0;background:var(--accent-alt);mix-blend-mode:multiply;opacity:0.25}
    .duotone-frame .ph-logo{position:relative;z-index:1;width:55%;color:var(--accent);opacity:0.55}
    .corner{position:absolute;width:16px;height:16px;z-index:2}
    .corner::before,.corner::after{content:"";position:absolute;background:var(--accent)}
    .corner::before{width:16px;height:2px} .corner::after{width:2px;height:16px}
    .corner.tl{top:10px;left:10px} .corner.tr{top:10px;right:10px} .corner.tr::after{right:0}
    .corner.bl{bottom:10px;left:10px} .corner.bl::before{bottom:0} .corner.br{bottom:10px;right:10px} .corner.br::before{bottom:0} .corner.br::after{right:0}

    /* Hero quick-contact card (ersetzt Foto-Platzhalter) */
    .hero-quickcard-inner{aspect-ratio:auto !important;flex-direction:column;align-items:flex-start !important;justify-content:flex-start !important;padding:var(--sp-5) var(--sp-4);gap:var(--sp-2)}
    .hq-label{font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.1em;color:var(--blue-300);font-weight:600}
    .hq-phone{position:relative;z-index:1;font-size:clamp(28px,2.6vw,36px);font-weight:800;color:#fff;text-decoration:none;letter-spacing:-0.01em}
    .hq-sub{position:relative;z-index:1;color:rgba(255,255,255,0.72);font-size:var(--fs-body);line-height:1.5;margin:0}
    .hq-list{position:relative;z-index:1;list-style:none;display:flex;flex-direction:column;gap:10px;width:100%}
    .hq-list li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.9);font-size:14px}
    .hq-list svg{width:18px;height:18px;flex:none;color:var(--blue-400)}
    .hq-wa{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;border-radius:var(--r-md);background:#25D366;color:#fff;text-decoration:none;font-weight:600;font-size:15px;margin-top:6px}
    .hq-wa svg{width:20px;height:20px;fill:#fff}
    /* Hero-Lead-Formular in der Quickcard */
    .hq-form{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:10px;margin-top:4px}
    .hq-form label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .hq-form input,.hq-form select{width:100%;padding:13px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,0.07);border:1px solid rgba(147,197,253,0.28);color:#fff;font-family:Inter,sans-serif;font-size:16px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
    .hq-form input::placeholder{color:rgba(255,255,255,0.55)}
    .hq-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393C5FD' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px;cursor:pointer}
    .hq-form select option{color:#0F172A;background:#fff}
    .hq-form input:focus,.hq-form select:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(96,165,250,0.25);background:rgba(255,255,255,0.10)}
    .hq-form .form-submit{margin-top:2px}
    .hq-privacy{position:relative;z-index:1;font-size:12px;color:rgba(255,255,255,0.55);line-height:1.5;margin:0}
    .hq-privacy a{color:rgba(255,255,255,0.78)}
    .hq-alt{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;width:100%;margin-top:6px;padding-top:14px;border-top:1px solid rgba(147,197,253,0.18);font-size:14px}
    .hq-alt-label{color:rgba(255,255,255,0.60)}
    .hq-alt a{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-weight:600}
    .hq-alt a svg{width:16px;height:16px;flex:none}
    .hq-alt .hq-alt-tel svg{fill:none;stroke:var(--blue-400);stroke-width:2}
    .hq-alt .hq-alt-wa svg{fill:#25D366}
    .img-label{margin-top:var(--sp-2);text-align:center;font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint)}
    .img-label::before{content:"● ";color:var(--accent)}

    /* ---------- Keyword-Band (Marquee) ---------- */
    .kw-band{background:var(--bg-deep);border-block:1px solid var(--border);overflow:hidden;padding-block:14px;position:relative}
    .kw-band::before,.kw-band::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
    .kw-band::before{left:0;background:linear-gradient(90deg,var(--bg-deep),transparent)}
    .kw-band::after{right:0;background:linear-gradient(270deg,var(--bg-deep),transparent)}
    .kw-track{display:flex;width:max-content;animation:kw-scroll 50s linear infinite}
    .kw-band:hover .kw-track{animation-play-state:paused}
    .kw-set{display:flex;align-items:center;flex:none}
    .kw{font-family:Inter,sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.10em;color:var(--text-muted);white-space:nowrap}
    .kw-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);margin:0 22px;flex:none}
    @keyframes kw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    /* ---------- Cards (base) ---------- */
    .card{
      background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
      padding:clamp(24px,3vw,40px);position:relative;overflow:hidden;box-shadow:var(--shadow-card);
      transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
    }
    .card::before{content:"";position:absolute;inset:0 0 50% 0;background:var(--grad-surface-top);pointer-events:none}
    .card::after{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--accent);opacity:0.4;transition:opacity var(--dur) var(--ease)}
    .card:hover{border-color:var(--border-soft);transform:translateY(-4px)}
    .card:hover::after{opacity:1}
    .card-index{font-family:Inter,sans-serif;font-weight:600;color:var(--accent);font-size:14px;letter-spacing:0.05em}

    /* ---------- Leistungen ---------- */
    .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
    .svc-card{display:flex;flex-direction:column}
    .svc-card .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-3)}
    .icon-chip{width:40px;height:40px;border-radius:50%;background:var(--surface-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none}
    .icon-chip svg{width:22px;height:22px;stroke:var(--accent);stroke-width:1.5;fill:none}
    .svc-card h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:10px}
    .svc-card p{color:var(--text-muted);font-size:var(--fs-body);flex:1;margin-bottom:var(--sp-3)}
    .svc-badge{display:inline-flex;align-self:flex-start;margin-bottom:var(--sp-3);font-family:Inter,sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:0.08em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:4px 10px}
    .svc-badge.green{color:#15803D;background:rgba(22,163,74,0.10);border-color:rgba(22,163,74,0.30)}

    /* ---------- Ratgeber ---------- */
    .ratgeber{background:var(--surface)}
    .ratgeber-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
    .art-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
    .art-card{cursor:pointer}
    .art-thumb{aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;position:relative;background:linear-gradient(135deg,#1E3A5F 0%,#0F172A 100%)}
    .art-thumb::before{content:"";position:absolute;inset:0;background:var(--radial-amber)}
    .art-thumb::after{content:"";position:absolute;inset:0;background:var(--accent-alt);mix-blend-mode:multiply;opacity:0.22}
    .art-thumb .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:0.4;transition:transform var(--dur) var(--ease)}
    .art-thumb .glyph svg{width:40%;height:auto}
    .art-card:hover{transform:translateY(-4px)}
    .art-card{transition:transform var(--dur) var(--ease)}
    .art-card:hover .glyph{transform:scale(1.03)}
    .art-cat{display:block;margin:var(--sp-3) 0 8px;font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.08em;color:var(--accent)}
    .art-card h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:10px}
    .art-card>p{color:var(--text-muted);margin-bottom:var(--sp-2)}
    .art-card ul{color:var(--text-muted);margin:0 0 var(--sp-2);padding-left:1.1em}
    .art-card li{margin-bottom:4px}

    /* ---------- Vorteile ---------- */
    .vorteile{background:var(--bg-deep)}
    .vorteile::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 30% 30%,rgba(59,130,246,0.18) 0%,rgba(59,130,246,0) 70%);pointer-events:none}
    .vorteile-grid{display:grid;gap:var(--sp-6);position:relative}
    .vorteile h2{font-size:var(--fs-h2);font-weight:600}
    .vorteile-claim p{color:var(--text-muted);margin-top:var(--sp-3);font-size:var(--fs-lede)}
    .benefit-list{display:flex;flex-direction:column}
    .benefit{display:flex;gap:var(--sp-3);padding-block:20px;border-top:1px solid var(--border)}
    .benefit:last-child{border-bottom:1px solid var(--border)}
    .benefit .chk{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px}
    .benefit h4{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:18px;margin-bottom:3px}
    .benefit p{color:var(--text-muted);font-size:var(--fs-body)}

    /* ---------- Ablauf ---------- */
    .steps{display:grid;gap:var(--sp-5);margin-top:var(--sp-6);position:relative}
    .step{position:relative;padding-left:var(--sp-5)}
    .step-num{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:var(--fs-stat);line-height:1;background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
    .step h4{font-size:var(--fs-h3);font-weight:600;margin-bottom:8px}
    .step p{color:var(--text-muted)}
    .step-node{position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(37,99,235,0.15),0 0 10px rgba(37,99,235,0.45)}
    .steps::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent) 0%,transparent 100%)}

    /* ---------- Über uns ---------- */
    .about{background:var(--surface)}
    .about-grid{display:grid;gap:var(--sp-6);align-items:center}
    .about-facts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-3);font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint)}
    .about-facts span::before{content:"● ";color:var(--accent)}
    .about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-4);margin-bottom:var(--sp-3)}
    .about-stat .num{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--accent);line-height:1}
    .about-stat .lbl{font-family:Inter,sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:0.08em;color:var(--text-muted);margin-top:6px}
    .about h2{font-size:var(--fs-h2);font-weight:600;margin-bottom:var(--sp-3)}
    .about-text p{color:var(--text-muted);margin-bottom:var(--sp-3)}
    .about-sign{font-family:Inter,system-ui,sans-serif;font-style:italic;font-weight:500;color:var(--text-muted);margin-top:var(--sp-2)}
    .seal{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--accent-line);font-family:Inter,sans-serif;font-size:11px;letter-spacing:0.08em;color:var(--accent);margin-top:var(--sp-3)}

    /* ---------- Versprechen ---------- */
    .versprechen{background:var(--surface-alt)}
    .versprechen .wrap{max-width:var(--container-narrow);text-align:center}
    .versprechen .block{position:relative;border-radius:var(--r-lg);padding:var(--sp-6) 0}
    .versprechen .eyebrow{justify-content:center}
    .versprechen h2{font-size:var(--fs-h2);font-weight:600}
    .versprechen h2 .underline{border-bottom:3px solid var(--accent);border-radius:2px;padding-bottom:2px}
    .promise-row{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-5);text-align:left}
    .promise{padding-block:var(--sp-2)}
    .promise .lbl{font-family:Inter,sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.08em;color:var(--accent);margin-bottom:6px;display:block}
    .promise p{color:var(--text-muted);font-size:var(--fs-body)}

    /* ---------- Service-Gebiet ---------- */
    .geo-grid{display:grid;gap:var(--sp-6);align-items:center}
    .geo h2{font-size:var(--fs-h2);font-weight:600}
    .geo .lede{color:var(--text-muted);margin-top:var(--sp-3);font-size:var(--fs-lede)}
    .geo-badge{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-3);font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
    .geo-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
    .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4)}
    .chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 16px;font-family:Inter,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);transition:all var(--dur) var(--ease)}
    .chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
    a.chip:hover{border-color:var(--accent-line);color:var(--text)}
    .chip-km{color:var(--text-faint);font-size:10px;letter-spacing:0.04em}
    .geo-map{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);aspect-ratio:1/1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--border);border-radius:50%}
    .ring.r1{width:40%;height:40%} .ring.r2{width:65%;height:65%} .ring.r3{width:90%;height:90%}
    .pin-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);z-index:3}
    .pin-center::before,.pin-center::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);animation:pulse 2.5s var(--ease) infinite}
    .pin-center::after{animation-delay:1.25s}
    @keyframes pulse{0%{transform:scale(1);opacity:0.6}100%{transform:scale(2.4);opacity:0}}
    .pin{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--text-muted);z-index:2}
    .pin span{position:absolute;left:12px;top:-4px;white-space:nowrap;font-family:Inter,sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint)}
    .geo-center-label{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);font-family:Inter,sans-serif;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);z-index:3}
    /* SEO location detail */
    .loc-expanded{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-7)}
    .loc-detail h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);font-weight:600;margin-bottom:10px}
    .loc-detail h3 svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2;fill:none;flex:none}
    .loc-detail p{color:var(--text-muted)}
    .loc-services{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-2)}
    .loc-tag{font-family:Inter,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px}

    /* ---------- FAQ ---------- */
    .faq{background:var(--surface)}
    .faq .wrap{max-width:var(--container-narrow)}
    .faq-list{margin-top:var(--sp-5)}
    .faq-item{border-top:1px solid var(--border)}
    .faq-q{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;text-wrap:initial}
    .faq-item:last-child{border-bottom:1px solid var(--border)}
    .faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:transparent;border:0;cursor:pointer;padding:22px 0;text-align:left;color:var(--text)}
    .faq-btn span:first-child{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:var(--fs-h3)}
    .faq-plus{flex:none;width:24px;height:24px;position:relative}
    .faq-plus::before,.faq-plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--accent);transition:transform var(--dur) var(--ease)}
    .faq-plus::before{width:16px;height:2px;transform:translate(-50%,-50%)}
    .faq-plus::after{width:2px;height:16px;transform:translate(-50%,-50%)}
    .faq-item.open .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
    .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
    .faq-item.open .faq-answer{grid-template-rows:1fr}
    .faq-answer-text{overflow:hidden;color:var(--text-muted)}
    .faq-item.open .faq-answer-text{padding-bottom:22px}

    /* ---------- Kontakt ---------- */
    .kontakt-grid{display:grid;gap:var(--sp-5);align-items:start}
    .form-box .field{margin-bottom:var(--sp-3)}
    .field-row{display:grid;gap:var(--sp-3)}
    .field label,.form-consent span{display:block}
    .field>label{font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:6px}
    .field input,.field select,.field textarea{
      width:100%;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-sm);
      padding:14px 16px;font-family:Inter,sans-serif;font-size:16px;color:var(--text);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
    }
    .field textarea{min-height:120px;resize:vertical}
    .field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    .form-title{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3);margin-bottom:6px}
    .form-sub{color:var(--text-muted);margin-bottom:var(--sp-4)}
    .form-consent{display:flex;gap:10px;align-items:flex-start;margin:var(--sp-2) 0 var(--sp-3);font-size:14px;color:var(--text-muted)}
    .form-consent input{margin-top:3px;accent-color:var(--accent);flex:none}
    .form-consent a{color:var(--accent)}
    .form-submit{width:100%;margin-top:var(--sp-2)}
    .form-submit svg{width:18px;height:18px}
    /* contact card */
    .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
    .contact-card::before{content:"";position:absolute;inset:0;background:var(--radial-amber);pointer-events:none}
    .contact-card>*{position:relative}
    .call-cta{display:flex;align-items:center;gap:12px;color:var(--accent);font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3)}
    .call-cta svg{width:22px;height:22px;stroke:var(--accent);stroke-width:2;fill:none;flex:none}
    .contact-card .blk{padding-block:var(--sp-3);border-top:1px solid var(--border)}
    .contact-card .blk:first-of-type{border-top:0;padding-top:0}
    .contact-card .lbl{font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.08em;color:var(--text-faint);margin-bottom:6px;display:block}
    .contact-card .val{color:var(--text)}
    .contact-card a.val:hover{color:var(--accent)}
    .hours-list{font-family:Inter,sans-serif;font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
    .hours-list .row{display:flex;justify-content:space-between;gap:var(--sp-2)}

    /* ---------- SEO content block ---------- */
    .seo-block{background:var(--surface)}
    .seo-content{max-width:820px}
    .seo-content h2{font-size:var(--fs-h2);font-weight:600;margin-bottom:var(--sp-3)}
    .seo-content h3{font-size:var(--fs-h3);font-weight:600;margin:var(--sp-5) 0 10px}
    .seo-content p{color:var(--text-muted);margin-bottom:var(--sp-2)}
    .seo-content strong{color:var(--text)}

    /* ---------- Footer ---------- */
    footer{background:var(--bg-deep);border-top:1px solid var(--border);padding-block:var(--sp-7) var(--sp-4)}
    .footer-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
    .footer-brand .nav-logo{margin-bottom:var(--sp-3)}
    .footer-brand p{color:var(--text-muted);font-size:14px;margin-bottom:var(--sp-3);max-width:36ch}
    .footer-brand .tel{color:var(--accent);font-family:Inter,sans-serif;font-size:14px;letter-spacing:0.04em}
    .footer-col h5{font-family:Inter,sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:0.1em;color:var(--accent);margin-bottom:var(--sp-3);font-weight:600}
    .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
    .footer-col a{font-family:Inter,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);transition:color var(--dur) var(--ease)}
    .footer-col a:hover{color:var(--text)}
    .footer-wordmark{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:clamp(40px,9vw,110px);line-height:1;color:var(--text);opacity:0.9;margin-top:var(--sp-7);letter-spacing:-0.02em}
    .footer-wordmark .brand-dot{color:var(--accent)}
    .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);align-items:center;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border)}
    .footer-bottom p{font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint)}
    .footer-legal{display:flex;gap:var(--sp-3)}
    .footer-legal a{font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint)}
    .footer-legal a:hover{color:var(--accent)}

    /* ---------- Floating buttons ---------- */
    .wa-float,.phone-float{position:fixed;right:20px;z-index:90;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
    .wa-float.show,.phone-float.show{opacity:1;visibility:visible;transform:translateY(0)}
    .wa-float{bottom:88px;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
    .wa-float svg{width:28px;height:28px;fill:#fff}
    .phone-float{bottom:20px;background:var(--grad-amber);box-shadow:var(--glow-amber);font-size:0}
    .phone-float svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
    .phone-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:pulse 2.5s var(--ease) infinite}
    .wa-float:hover,.phone-float:hover{transform:scale(1.06)}
    .phone-float:hover{box-shadow:var(--glow-amber-strong)}

    /* ---------- Reveal ---------- */
    .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
    .reveal.in{opacity:1;transform:none}
    .reveal.d1{transition-delay:0.06s}.reveal.d2{transition-delay:0.12s}.reveal.d3{transition-delay:0.18s}
    .reveal.d4{transition-delay:0.24s}.reveal.d5{transition-delay:0.30s}.reveal.d6{transition-delay:0.36s}

    /* ---------- Mobile nav panel ---------- */
    .nav-overlay{display:none}

    /* ============================================================
       BREAKPOINTS
       ============================================================ */
    @media(min-width:700px){
      .field-row{grid-template-columns:1fr 1fr}
      .promise-row{grid-template-columns:repeat(3,1fr)}
      .promise{position:relative;padding-left:var(--sp-3)}
      .promise+.promise{border-left:1px solid var(--border)}
      .footer-bottom{flex-wrap:nowrap}
    }
    @media(min-width:760px){
      .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-5)}
    }
    @media(min-width:860px){
      .steps{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
      .step{padding-left:0;padding-top:var(--sp-4)}
      .step-node{left:0;top:0}
      .steps::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px;background:var(--border)}
    }
    @media(min-width:900px){
      .hero-inner{grid-template-columns:56% 44%}
      .svc-grid{grid-template-columns:repeat(4,1fr)}
      .art-grid{grid-template-columns:repeat(3,1fr)}
      .vorteile-grid{grid-template-columns:42% 58%}
      .about-grid{grid-template-columns:45% 55%}
      .geo-grid{grid-template-columns:1fr 1fr}
      .loc-expanded{grid-template-columns:repeat(2,1fr)}
      .kontakt-grid{grid-template-columns:58% 42%}
    }
    @media(min-width:960px){
      .mobile-toggle{display:none}
    }
    /* Horizontale Desktop-Nav zwischen Drawer-Grenze (768px) und 900px: enger setzen, damit nichts überläuft */
    @media(min-width:769px) and (max-width:899px){
      .nav-links{gap:16px}
      .nav-links>li>a{font-size:11px;letter-spacing:0.04em}
      .nav-right{gap:8px}
      .nav-right .nav-cta{padding:8px 12px;font-size:12px}
      .nav-right .nav-cta svg{width:14px;height:14px}
      .nav-right .btn-primary{padding:10px 16px;font-size:13px}
    }
    @media(max-width:768px){
      .hero{padding-top:84px;min-height:0}
      .hero-inner{gap:var(--sp-4)}
      .hero-quickcard-inner{padding:var(--sp-4) var(--sp-3)}
      .hero-desc{font-size:15px}
      .nav-right .nav-cta,.nav-right .btn-primary{display:none}
      .mobile-toggle{display:inline-flex}
      .nav-links{
        position:fixed;top:0;right:0;height:100vh;width:min(88vw,380px);
        background:var(--surface);border-left:1px solid var(--border);
        flex-direction:column;align-items:stretch;gap:0;padding:84px 24px 40px;
        transform:translateX(100%);transition:transform var(--dur) var(--ease);
        box-shadow:var(--shadow-nav);overflow-y:auto;z-index:101;
      }
      .nav-links.open{transform:translateX(0)}
      .nav-links>li{border-bottom:1px solid var(--border)}
      .nav-links>li>a{padding:16px 0;font-size:16px;display:flex;align-items:center;justify-content:space-between;color:var(--text)}
      .nav-dropdown>a::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur) var(--ease);opacity:0.5;margin-top:-3px}
      .nav-dropdown.open>a::after{transform:rotate(-135deg);margin-top:3px;opacity:0.8}
      .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;padding:0 0 14px;display:none}
      .nav-dropdown.open .nav-dropdown-menu{display:flex}
      .nav-dropdown-menu a{padding:8px 0;font-family:Inter,sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.06em}
      .nav-drawer-cta{display:block;border-bottom:0 !important;margin-top:20px}
      .nav-drawer-cta .btn-primary{display:flex;justify-content:center;width:100%;padding:14px 20px;color:#fff}
      .nav-links .nav-cta{display:inline-flex;justify-content:center;margin-top:12px;border-color:var(--accent);color:var(--accent)}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
      .reveal{opacity:1;transform:none}
      .kw-track{animation:none}
      .pin-center::before,.pin-center::after,.phone-float::after{display:none}
      .hero .word{clip-path:none !important;transform:none !important;opacity:1 !important}
      .hero::before,.hero::after,.vorteile::after,footer::after{animation:none !important}
      .hero h1 .underline path{stroke-dashoffset:0 !important;stroke-dasharray:none !important}
      .steps::before{stroke-dashoffset:0 !important}
      body>.progress{display:none !important}
      .hero-visual .duotone-frame{transform:none !important}
      .nl-sweep::before{display:none !important}
    }

    /* ============================================================
       BLAU-WEISSE CI — Re-Skin Overrides (helle Seite, dunkle Inseln)
       ============================================================ */
    /* Headline-Gewichte (Inter braucht mehr Fett als der frühere Serif) */
    .hero h1{font-weight:800}
    .sec-head h2,.vorteile h2,.about h2,.geo h2,.versprechen h2,.seo-content h2{font-weight:700}
    .benefit h4,.faq-btn span:first-child{font-weight:600}
    .footer-wordmark{font-weight:800}

    /* ---------- NAV: gescrollter Zustand = weiss, dunkler Text ---------- */
    .nav.scrolled .mobile-toggle{color:var(--text)}
    .nav.scrolled .nav-logo{color:var(--text)}
    .nav.scrolled .nav-logo svg{color:var(--accent)}
    .nav.scrolled .nav-logo-sub{color:var(--text-faint)}
    .nav.scrolled .nav-links>li>a{color:var(--text-muted)}
    .nav.scrolled .nav-links>li>a:hover{color:var(--accent)}
    .nav.scrolled .nav-cta{color:var(--text);border-color:var(--border)}
    .nav.scrolled .nav-cta:hover{color:var(--accent);border-color:var(--accent)}
    .nav.scrolled .mobile-toggle{color:var(--text)}

    /* ---------- HERO: dunkle Navy-Insel ---------- */
    .hero{background:linear-gradient(160deg,#0F172A 0%,#13203A 55%,#1E3A8A 100%)}
    .hero h1,.hero h1 .underline{color:#fff}
    .hero h1 .underline path{stroke:#3B82F6}
    .hero .eyebrow{color:#93C5FD}
    .hero .eyebrow::before{background:#93C5FD;box-shadow:0 0 8px #3B82F6}
    .hero-desc{color:rgba(255,255,255,0.82)}
    .hero-trust-num{color:#60A5FA}
    .hero-trust-label{color:rgba(255,255,255,0.70)}
    .hero-trust-item{border-right-color:rgba(255,255,255,0.18)}
    .breadcrumb ol,.breadcrumb a{color:rgba(255,255,255,0.60)}
    .breadcrumb a:hover{color:#93C5FD}
    .breadcrumb .sep{color:rgba(255,255,255,0.25)}
    .hero .btn-secondary{color:#fff;border-color:rgba(255,255,255,0.30)}
    .hero .btn-secondary:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,0.08)}
    .img-label{color:rgba(255,255,255,0.6)}
    .img-label::before{color:#60A5FA}

    /* ---------- Keyword-Band: dunkles Navy-Band ---------- */
    .kw{color:rgba(255,255,255,0.72)}

    /* ---------- Vorteile: dunkle Navy-Insel ---------- */
    .vorteile h2{color:#fff}
    .vorteile-claim p{color:rgba(255,255,255,0.78)}
    .vorteile .eyebrow{color:#93C5FD}
    .vorteile .eyebrow::before{background:#93C5FD;box-shadow:0 0 8px #3B82F6}
    .vorteile .benefit{border-color:rgba(255,255,255,0.12)}
    .vorteile .benefit .chk{color:#60A5FA}
    .vorteile .benefit h4{color:#fff}
    .vorteile .benefit p{color:rgba(255,255,255,0.70)}

    /* ---------- Footer: dunkle Navy-Insel ---------- */
    footer .nav-logo,footer .nav-logo svg{color:#fff}
    footer .footer-brand p{color:rgba(255,255,255,0.66)}
    footer .footer-brand .tel{color:#60A5FA}
    footer .footer-col h5{color:#93C5FD}
    footer .footer-col a{color:rgba(255,255,255,0.66)}
    footer .footer-col a:hover{color:#fff}
    footer .footer-wordmark{color:rgba(255,255,255,0.92)}
    footer .brand-dot{color:#3B82F6}
    footer .footer-bottom{border-top-color:rgba(255,255,255,0.12)}
    footer .footer-bottom p{color:rgba(255,255,255,0.50)}
    footer .footer-legal a{color:rgba(255,255,255,0.55)}
    footer .footer-legal a:hover{color:#93C5FD}

    /* ============================================================
       NORDLICHT-EDITORIAL — Elevation Override-Schicht
       (additive Veredelung; bestehende Klassennamen bleiben)
       ============================================================ */

    /* ---------- B. Typografie (fluid, Inter) ---------- */
    body{font-feature-settings:'cv05','ss01';line-height:1.72;-moz-osx-font-smoothing:grayscale}
    h1,h2,h3{text-wrap:balance}
    p,.lede,.hero-desc{text-wrap:pretty}
    html{hanging-punctuation:first}
    .hero h1{font-size:clamp(46px,7.2vw,96px);font-weight:800;letter-spacing:-0.025em;line-height:1.03;font-optical-sizing:auto}
    .sec-head h2,.vorteile h2,.about h2,.geo h2,.versprechen h2,.seo-content h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-0.02em;line-height:1.1;font-optical-sizing:auto}
    .svc-card h3,.art-card h3,.loc-detail h3,.form-title,.faq-btn span:first-child,.step h4{letter-spacing:-0.01em}
    .lede,.geo .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.65;color:var(--text-muted);max-width:60ch}
    .hero-desc{font-size:clamp(17px,1.45vw,20px);line-height:1.7;max-width:52ch}
    .eyebrow{font-size:clamp(11px,0.8vw,12px);letter-spacing:0.14em}
    .hero-trust-num,.about-stat .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum','ss01'}
    .hero-trust-num{font-size:clamp(36px,4.6vw,56px)}

    /* ---------- C. Globaler Hintergrund / Rhythmus ---------- */
    body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--raster);-webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 0,transparent 75%);mask-image:radial-gradient(120% 80% at 50% 0,#000 0,transparent 75%);pointer-events:none}
    /* Alternierender Sektions-Rhythmus */
    main>section:nth-of-type(even):not(.vorteile):not(.hero){background:var(--off)}
    .ratgeber{background:var(--off)}
    .seo-block{background:var(--white)}
    .versprechen{background:var(--blue-tint)}
    /* Sektionstrenner: blaue Haarlinie statt grau */
    main>section+section{border-top:1px solid var(--hair)}
    /* Magazin-Kapitellinie am Sektionsanfang */
    section[id]::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(680px,60%);height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,0.2),transparent);z-index:2}
    /* navy-Inseln tragen keine helle Kapitellinie */
    .hero::after,.vorteile.vorteile::after{}
    .vorteile[id]::after,.hero[id]::after{display:none}
    .sec-head{margin-bottom:var(--sec-head-mb)}
    /* Scroll-Progress */
    body>.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-progress);z-index:120;pointer-events:none}

    /* ---------- D. NAV ---------- */
    .nav{border-bottom:1px solid transparent}
    .nav .brand-dot{color:var(--blue-600)}
    .nav.scrolled{background:rgba(255,255,255,0.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--hair);box-shadow:var(--sh-nav);transition:background 0.4s var(--ease),box-shadow 0.4s var(--ease),border-color 0.4s var(--ease)}
    .nav-links>li>a{position:relative}
    .nav-links>li>a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
    .nav-links>li>a:hover::after{transform:scaleX(1)}
    .nav-dropdown-menu{background:rgba(255,255,255,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--hair);box-shadow:0 16px 40px -12px rgba(15,23,42,0.18)}
    .nav-dropdown-menu a{opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
    .nav-dropdown:hover .nav-dropdown-menu a,.nav-dropdown:focus-within .nav-dropdown-menu a{opacity:1;transform:translateY(0)}
    .nav-dropdown-menu a:nth-child(1){transition-delay:.03s}.nav-dropdown-menu a:nth-child(2){transition-delay:.06s}
    .nav-dropdown-menu a:nth-child(3){transition-delay:.09s}.nav-dropdown-menu a:nth-child(4){transition-delay:.12s}
    .nav-dropdown-menu a:nth-child(5){transition-delay:.15s}.nav-dropdown-menu a:nth-child(6){transition-delay:.18s}
    .nav-dropdown-menu a:nth-child(7){transition-delay:.21s}.nav-dropdown-menu a:nth-child(8){transition-delay:.24s}
    .nav-dropdown-menu a:hover{background:var(--accent-soft);color:var(--text)}
    @media(max-width:768px){.nav-dropdown-menu a{opacity:1;transform:none}}
    /* Mobile: Submenü inline aufklappen (Desktop-Floating/Transform/Card neutralisieren) */
    @media(max-width:768px){
      .nav-dropdown-menu{position:static;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;padding:0 0 14px}
      .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{transform:none;position:static}
    }

    /* ---------- E. HERO (Navy-Insel — Höhepunkt) ---------- */
    .hero{position:relative;background:var(--hero-island);box-shadow:var(--sh-island);background-image:var(--edge-glow),var(--hero-island);background-repeat:no-repeat,no-repeat;background-size:100% 1px,100% 100%;background-position:top,center}
    .hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--aurora-a),var(--aurora-b);filter:blur(40px);animation:aurora 22s var(--ease) infinite alternate;pointer-events:none}
    .hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(50% 45% at 78% 12%,rgba(96,165,250,0.22),transparent 70%);pointer-events:none}
    @keyframes aurora{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2%,1.5%,0)}}
    .hero-bg-grid{opacity:0.05;background-image:repeating-linear-gradient(0deg,rgba(147,197,253,0.10) 0 1px,transparent 1px 88px),repeating-linear-gradient(90deg,rgba(147,197,253,0.10) 0 1px,transparent 1px 88px);-webkit-mask-image:radial-gradient(120% 90% at 62% 26%,#000 30%,transparent 80%);mask-image:radial-gradient(120% 90% at 62% 26%,#000 30%,transparent 80%)}
    .hero .wrap{z-index:1}
    /* Insel-Fuss: leuchtende untere Haarlinie */
    .hero{border-bottom:1px solid rgba(147,197,253,0.18)}
    /* Eyebrow als frosted Pill */
    .hero .eyebrow{padding:6px 14px;background:rgba(147,197,253,0.10);border:1px solid rgba(147,197,253,0.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r-pill);color:var(--blue-300)}
    .hero .eyebrow::before{background:var(--blue-300);box-shadow:0 0 8px var(--blue-500)}
    /* Wort-Stagger Reveal */
    .hero h1 .word{display:inline-block;clip-path:inset(0 0 110% 0);transform:translateY(0.4em);transition:clip-path var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);transition-delay:calc(var(--i,0)*70ms)}
    .hero h1.words-in .word{clip-path:inset(-0.3em -0.15em);transform:translateY(0)}
    .hero h1 .underline{white-space:normal}
    .hero h1 .underline path{stroke:var(--blue-400);stroke-width:5;filter:drop-shadow(0 0 10px rgba(96,165,250,0.5))}
    .hero-desc{color:rgba(255,255,255,0.84)}
    /* CTAs */
    .hero .btn-primary,.form-submit{background:var(--grad-blue);box-shadow:var(--glow-blue),var(--inset-hi);position:relative;overflow:visible}
    .hero .btn-primary:hover,.form-submit:hover{background:var(--grad-blue-hover);transform:translateY(-1px)}
    .hero .btn-primary::after,.form-submit::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:var(--glow-ring);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
    .hero .btn-primary:hover::after,.form-submit:hover::after{opacity:1}
    .btn-primary svg{transition:transform var(--dur) var(--ease)}
    .btn-primary:hover svg{transform:translateX(4px)}
    .hero .btn-secondary{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
    .hero .btn-secondary:hover{background:rgba(255,255,255,0.10);border-color:#fff;color:#fff}
    /* Trust */
    .hero-trust-num{color:var(--blue-400)}
    .hero-trust-num.pulsed{animation:numpulse 0.9s var(--ease)}
    @keyframes numpulse{0%{text-shadow:0 0 0 rgba(96,165,250,0)}40%{text-shadow:var(--glow-num)}100%{text-shadow:0 0 0 rgba(96,165,250,0)}}
    .hero-trust-item{border-right-color:rgba(255,255,255,0.16)}
    /* duotone frame: Glaskarte mit Glow-Backdrop */
    .hero-visual{position:relative}
    .hero-visual .duotone-frame{box-shadow:inset 0 0 0 1px rgba(147,197,253,0.35),0 30px 60px -20px rgba(8,15,30,0.6);transition:transform 0.2s var(--ease);will-change:transform}
    .hero-visual .duotone-frame::after{content:"";position:absolute;inset:-20px;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(59,130,246,0.18),transparent 70%);filter:blur(50px);pointer-events:none}
    .hero-visual .corner::before,.hero-visual .corner::after{background:var(--blue-400);filter:drop-shadow(0 0 6px rgba(96,165,250,0.5))}
    /* Diagonaler Glanz-Sweep nur bei Hover */
    .nl-sweep{position:relative;overflow:hidden}
    .nl-sweep::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.06) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;pointer-events:none}
    .nl-sweep:hover::before{transition:background-position 1.2s var(--ease);background-position:-50% 0}

    /* ---------- F. Keyword-Band ---------- */
    .kw-band{border-block:1px solid rgba(147,197,253,0.18)}
    .kw-band::before{width:96px;background:linear-gradient(90deg,var(--navy-900),transparent)}
    .kw-band::after{width:96px;background:linear-gradient(270deg,var(--navy-900),transparent)}
    .kw-dot{background:var(--blue-500);box-shadow:0 0 6px rgba(59,130,246,0.6)}

    /* ---------- G. Leistungen (weiss) ---------- */
    #leistungen{position:relative}
    #leistungen::before{content:"";position:absolute;inset:0;background:var(--mesh-light);pointer-events:none;z-index:0}
    #leistungen .wrap{position:relative;z-index:1}
    .svc-grid{gap:clamp(20px,2.2vw,28px)}
    .card{background:linear-gradient(180deg,#FFFFFF,#FCFDFF);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
    .card::after{background:var(--accent);opacity:0.35;transition:opacity var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
    .card:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hover);border-color:var(--hair-strong)}
    .card:hover::after{opacity:1;box-shadow:0 0 12px rgba(37,99,235,0.5)}
    .icon-chip{width:46px;height:46px;border-radius:var(--r-md);background:var(--blue-tint);border:0;box-shadow:inset 0 0 0 1px rgba(37,99,235,0.18);transition:box-shadow var(--dur) var(--ease)}
    .svc-card:hover .icon-chip{box-shadow:inset 0 0 0 1px rgba(37,99,235,0.18),0 0 0 4px rgba(37,99,235,0.08)}
    .icon-chip svg{stroke:var(--blue-600)}
    .svc-card{position:relative;border-top:2px solid var(--blue-600)}
    .svc-card .card-index{display:none}
    .svc-card>*{position:relative;z-index:1}
    .ghost .arr{transition:transform var(--dur) var(--ease)}
    .ghost:hover .arr{transform:translateX(4px)}

    /* ---------- H. Ratgeber ---------- */
    .art-thumb .glyph{color:var(--blue-400);opacity:0.45}
    .art-card:hover .glyph{transform:scale(1.06)}
    .art-cat{color:var(--blue-600);letter-spacing:0.10em;font-size:11px;font-weight:600}

    /* ---------- I. Vorteile (Navy-Insel) ---------- */
    .vorteile{position:relative;background:var(--hero-island);overflow:hidden;background-image:var(--edge-glow),var(--hero-island);background-repeat:no-repeat;background-size:100% 1px,100% 100%;background-position:top,center;border-bottom:1px solid rgba(147,197,253,0.18)}
    .vorteile::before{content:"";position:absolute;inset:0;background:var(--aurora-a),var(--aurora-b);filter:blur(40px);opacity:0.8;animation:aurora 26s var(--ease) infinite alternate;pointer-events:none;z-index:0}
    .vorteile .wrap{position:relative;z-index:1}
    .vorteile-claim p{color:rgba(255,255,255,0.78)}
    .vorteile .benefit{border-color:transparent;position:relative}
    .vorteile .benefit::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--hair-d);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-reveal) var(--ease);transition-delay:calc(var(--i,0)*70ms)}
    .vorteile .benefit-list.in .benefit::before{transform:scaleX(1)}
    .vorteile .benefit:last-child{border-bottom:0}
    .vorteile .benefit:last-child::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--hair-d);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-reveal) var(--ease);transition-delay:calc((var(--i,0)+1)*70ms)}
    .vorteile .benefit-list.in .benefit:last-child::after{transform:scaleX(1)}
    .vorteile .benefit .chk{color:var(--blue-400);filter:drop-shadow(0 0 5px rgba(96,165,250,0.45))}

    /* ---------- J. Ablauf (weiss) ---------- */
    .step-num{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .step-node{background:var(--blue-600);box-shadow:0 0 0 4px rgba(37,99,235,0.15),0 0 10px rgba(37,99,235,0.45)}
    .step-node.lit{animation:nodepulse 1s var(--ease)}
    @keyframes nodepulse{0%{box-shadow:0 0 0 4px rgba(37,99,235,0.15),0 0 0 rgba(37,99,235,0)}45%{box-shadow:0 0 0 6px rgba(37,99,235,0.20),0 0 16px rgba(37,99,235,0.7)}100%{box-shadow:0 0 0 4px rgba(37,99,235,0.15),0 0 10px rgba(37,99,235,0.45)}}
    @media(min-width:860px){
      .steps::before{background:none;border-top:1px solid var(--hair-strong)}
    }

    /* ---------- K. Über uns ---------- */
    .about-stat .num{color:var(--blue-600)}
    .about-stat .num.pulsed{animation:numpulse-d 0.9s var(--ease)}
    @keyframes numpulse-d{0%{text-shadow:0 0 0 rgba(37,99,235,0)}40%{text-shadow:0 0 16px rgba(37,99,235,0.45)}100%{text-shadow:0 0 0 rgba(37,99,235,0)}}
    .about .seal{border:1px solid rgba(37,99,235,0.3);box-shadow:inset 0 0 14px rgba(37,99,235,0.10)}
    .about .duotone-frame{box-shadow:inset 0 0 0 1px rgba(37,99,235,0.18),var(--sh-card)}
    .about .duotone-frame .corner::before,.about .duotone-frame .corner::after{background:var(--blue-500)}

    /* ---------- L. Versprechen (helle Blau-Insel) ---------- */
    .versprechen .block{background:var(--white);box-shadow:var(--sh-card);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px) clamp(28px,5vw,64px);border-top:2px solid var(--blue-600)}
    .versprechen h2 .underline{border-bottom-color:var(--blue-600)}
    .promise+.promise{border-left-color:var(--hair-strong)}

    /* ---------- M. Service-Gebiet ---------- */
    .geo-map{border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
    .ring.r1{border-color:rgba(37,99,235,0.30)}
    .ring.r2{border-color:rgba(37,99,235,0.20)}
    .ring.r3{border-color:rgba(37,99,235,0.12)}
    .ring{animation:ringpulse 4s var(--ease) infinite}
    .ring.r1{animation-delay:0s}.ring.r2{animation-delay:0.5s}.ring.r3{animation-delay:1s}
    @keyframes ringpulse{0%,100%{opacity:0.55}50%{opacity:1}}
    .pin-center{background:var(--blue-600);box-shadow:0 0 16px rgba(37,99,235,0.8),0 0 4px #fff}
    .chip{border-radius:var(--r-pill);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
    .chip::before{background:var(--blue-600)}
    a.chip:hover{border-color:var(--hair-accent);transform:translateY(-2px);color:var(--text)}
    .loc-detail h3 svg{stroke:var(--blue-600)}

    /* ---------- N. FAQ ---------- */
    .faq-item{border-top:1px solid var(--hair)}
    .faq-item:last-child{border-bottom:1px solid var(--hair)}
    .faq-btn{transition:color var(--dur) var(--ease)}
    .faq-btn:hover{background:rgba(37,99,235,0.03)}
    .faq-item.open .faq-btn span:first-child{color:var(--blue-600)}
    .faq-answer-text{position:relative;transition:opacity var(--dur) var(--ease);opacity:0}
    .faq-item.open .faq-answer-text{opacity:1;padding-left:18px}
    .faq-item.open .faq-answer-text::before{content:"";position:absolute;left:0;top:0;bottom:22px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform var(--dur) var(--ease);animation:wipeY var(--dur) var(--ease) forwards}
    @keyframes wipeY{to{transform:scaleY(1)}}

    /* ---------- O. Kontakt ---------- */
    .field input,.field select,.field textarea{background:var(--off);border:1px solid var(--hair);box-shadow:inset 0 1px 2px rgba(15,23,42,0.04)}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-600);box-shadow:var(--ring-focus),inset 0 1px 2px rgba(15,23,42,0.04)}
    .contact-card{box-shadow:var(--sh-card);border:1px solid var(--hair);border-radius:var(--r-lg)}
    .contact-card::before{background:radial-gradient(60% 60% at 75% 15%,rgba(37,99,235,0.14),transparent 70%)}
    .call-cta{color:var(--blue-600)}
    .call-cta svg{stroke:var(--blue-600)}

    /* ---------- P. SEO-Content ---------- */
    .seo-content p{line-height:1.72}

    /* ---------- Q. Footer (Navy-Insel) ---------- */
    footer{position:relative;overflow:hidden;border-top:0;background-image:var(--edge-glow),var(--hero-island);background-repeat:no-repeat;background-size:100% 1px,100% 100%;background-position:top,center}
    footer::after{content:"";position:absolute;inset:0;background:var(--aurora-a),var(--aurora-b);filter:blur(40px);opacity:0.7;animation:aurora 26s var(--ease) infinite alternate;pointer-events:none;z-index:0}
    footer .wrap{position:relative;z-index:1}
    .footer-wordmark{font-weight:800;font-size:clamp(44px,9vw,120px);letter-spacing:-0.03em;background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(147,197,253,0.5));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 4px 24px rgba(59,130,246,0.18))}
    .footer-wordmark .brand-dot{-webkit-text-fill-color:#3B82F6;color:#3B82F6}
    footer .footer-col a{position:relative;display:inline-block}
    footer .footer-col a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:#93C5FD;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
    footer .footer-col a:hover::after{transform:scaleX(1)}
    footer .footer-bottom{border-top-color:var(--hair-d)}

    /* ---------- R. Floating Buttons ---------- */
    .phone-float{background:var(--grad-blue);box-shadow:var(--glow-blue)}
    .phone-float::after{border-color:var(--blue-500)}
    .wa-float{box-shadow:0 8px 24px rgba(0,0,0,0.28)}
    .wa-float:hover,.phone-float:hover{transform:scale(1.06)}
    .phone-float:hover{box-shadow:var(--glow-ring),var(--glow-blue)}

    /* ============================================================
       KARTEN-REDESIGN 08/26 — Sektions-Header mit Index-Tag,
       Leistungen-4er-Grid, Vorher/Nachher, Prozess-Karten,
       Einzugsgebiet-Liste
       ============================================================ */

    /* ---------- Sektions-Kopfzeile (Titel links, Index-Tag rechts) ---------- */
    .sec-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);border-bottom:1px solid var(--hair-strong);padding-bottom:var(--sp-3);margin-bottom:var(--sp-5)}
    .sec-bar h2{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-0.02em;line-height:1.08}
    .sec-bar .eyebrow{margin-bottom:10px}
    .sec-tag{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;padding-bottom:8px;flex:none}
    .sec-tag b{color:var(--blue-600);font-weight:700}
    .sec-lede{margin:calc(-1*var(--sp-3)) 0 var(--sp-5);max-width:62ch}
    @media(max-width:600px){.sec-tag{display:none}}

    /* ---------- Leistungen: Featured-Karte ---------- */
    .svc-card h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
    .svc-card.featured{border:1px solid var(--hair-accent);border-top:2px solid var(--blue-600);background:linear-gradient(180deg,#F4F7FE,#FFFFFF);box-shadow:var(--sh-card),0 0 0 3px rgba(37,99,235,0.06)}
    .featured-tag{position:absolute;top:0;right:0;z-index:2;font-family:Inter,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#fff;background:var(--grad-blue);padding:6px 14px;border-radius:0 0 0 var(--r-md)}
    .svc-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--sp-4)}
    .svc-more-label{font-family:Inter,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint)}
    .svc-more .ghost{margin-left:auto}

    /* ---------- Qualität: Vorher/Nachher ---------- */
    .ba-wrap{display:grid;grid-template-columns:1fr;padding:0;border-radius:var(--r-lg);overflow:hidden}
    .ba-wrap::before,.ba-wrap::after{display:none}
    .ba-panel{position:relative;margin:0;padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px) clamp(20px,2.5vw,32px);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);background:linear-gradient(150deg,#101C33 0%,#0F172A 60%,#152743 100%)}
    .ba-panel+.ba-panel{border-top:1px solid rgba(147,197,253,0.20)}
    .ba-after{background:linear-gradient(150deg,#13203A 0%,#16294B 55%,#1E3A8A 100%)}
    .ba-art{width:100%;max-width:440px;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--r-md);box-shadow:0 12px 32px rgba(0,0,0,0.35)}
    .ba-badge{position:absolute;z-index:2;font-family:Inter,sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;padding:7px 13px;border-radius:var(--r-sharp);display:inline-flex;align-items:center;gap:8px}
    .ba-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
    .ba-badge-dark{top:16px;left:16px;background:rgba(15,23,42,0.85);color:rgba(255,255,255,0.85);border:1px solid rgba(147,197,253,0.25)}
    .ba-badge-blue{top:16px;right:16px;background:var(--grad-blue);color:#fff;box-shadow:var(--glow-blue)}
    .ba-cap{font-family:Inter,sans-serif;font-size:12px;letter-spacing:0.04em;color:rgba(255,255,255,0.60);text-align:center}
    .ba-note{margin-top:var(--sp-3);max-width:72ch;margin-inline:auto;text-align:center;color:var(--text-faint);font-size:14px;line-height:1.6}
    @media(min-width:760px){
      .ba-wrap{grid-template-columns:1fr 1fr}
      .ba-panel+.ba-panel{border-top:0;border-left:1px solid rgba(147,197,253,0.20)}
      .ba-badge-dark{top:20px;left:20px}
      .ba-badge-blue{top:20px;right:20px}
    }

    /* ---------- Ablauf: Prozess-Karten ---------- */
    .proc-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.2vw,28px)}
    @media(min-width:860px){.proc-grid{grid-template-columns:repeat(3,1fr)}}
    .proc-card{display:flex;flex-direction:column;min-height:230px;padding-bottom:var(--sp-5)}
    .proc-card>*{position:relative;z-index:1}
    .proc-step{display:inline-flex;align-self:flex-start;font-family:Inter,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue-600);background:var(--blue-tint);border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:5px 12px;margin-bottom:var(--sp-3)}
    .proc-card h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-0.01em;margin-bottom:10px}
    .proc-card p{color:var(--text-muted);max-width:34ch}
    .proc-ico{position:absolute;right:clamp(18px,2vw,28px);bottom:clamp(14px,1.8vw,22px);width:44px;height:44px;stroke:var(--blue-600);stroke-width:1.5;fill:none;opacity:0.22;z-index:0}
    .proc-card.accent{background:linear-gradient(180deg,#F4F7FE,#EAF1FE);border:1px solid var(--hair-accent);border-top:2px solid var(--blue-600)}
    .proc-card.accent .proc-step{background:var(--grad-blue);color:#fff;border-color:transparent}
    .proc-card.accent .proc-ico{opacity:0.35}
    .proc-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5)}

    /* ---------- Einzugsgebiet: Städte-Liste ---------- */
    .geo-grid{align-items:stretch}
    .geo-list-card{display:flex;flex-direction:column;padding:clamp(24px,3vw,36px)}
    .geo-list-card::before,.geo-list-card::after{display:none}
    .geo-list-label{font-family:Inter,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue-600);padding-bottom:14px;border-bottom:1px solid var(--hair-strong)}
    .geo-list{list-style:none;margin:0;padding:0;flex:1}
    .geo-list li{border-bottom:1px solid var(--hair)}
    .geo-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:13px 2px;font-weight:500;font-size:15px;color:var(--text);transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
    .geo-list a:hover{color:var(--blue-600);padding-left:8px}
    .geo-list .km{font-family:Inter,sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint)}
    .geo-list li.is-home a{color:var(--blue-600);font-weight:700}
    .geo-list li.is-home .km{color:#fff;background:var(--grad-blue);border-radius:var(--r-pill);padding:3px 10px}
    .geo-list-card .geo-badge{margin-top:var(--sp-3)}
    .geo-map{aspect-ratio:auto;min-height:380px}
    @media(max-width:899px){.geo-map{aspect-ratio:1/1;min-height:0}}