/* ── Fonts: selbst gehostet, kein CDN ─────────────────────────────── */
  @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2')}
  @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-500.woff2') format('woff2')}
  @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-condensed-400.woff2') format('woff2')}
  @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-600.woff2') format('woff2')}

  /* ── Tokens (Industry-System, Variante „Aurora Steel") ────────────── */
  :root{
    --bg:#f2f2f3; --surface:#e9e9ea; --text:#1d1f20;
    --divider:rgba(29,31,32,0.16);
    --accent:#5980a6; --accent-100:#eef6ff; --accent-300:#b5d9fd; --accent-400:#94bce3;
    --accent-500:#749dc4; --accent-600:#597ea3; --accent-700:#416180; --accent-800:#2c455d; --accent-900:#1d2d3d;
    --dark-text:#eaf1f8; --dark-ink:#0d1720; --brand:#9ec2e6;
    --d-divider:rgba(255,255,255,0.14); --d-frame:rgba(255,255,255,0.30);
    --font-heading:"Barlow Condensed",system-ui,sans-serif;
    --font-body:"Barlow",system-ui,sans-serif;
    --maxw:1360px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg)}
  h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.12;letter-spacing:-0.015em;margin:0}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  .inline-link{color:var(--accent-700);border-bottom:1px solid rgba(65,97,128,.4)}
  .inline-link:hover{border-bottom-color:var(--accent-700)}
  .sec-note{margin-top:26px;font-size:14px;color:rgba(29,31,32,0.68);max-width:70ch}
  :focus{outline:none}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  ::selection{background:rgba(89,128,166,0.25)}
  .muted{color:rgba(29,31,32,0.68)}
  .skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:10px 14px;background:var(--bg);color:var(--text);transform:translateY(-160%)}
  .skip-link:focus{transform:translateY(0)}

  .shell{max-width:var(--maxw);margin:0 auto;background:var(--bg)}
  .pad{padding:80px 48px}
  .kicker{font-family:var(--font-heading);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-700);margin-bottom:12px}
  .kicker.on-dark{color:var(--accent-400)}
  .h2{font-size:44px}
  .idx{font-family:var(--font-heading);font-size:15px;letter-spacing:.1em;color:var(--accent)}

  /* ── Metallraster + Glow ──────────────────────────────────────────── */
  .metagrid::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:44px 44px}
  .glow{position:absolute;inset:0;pointer-events:none}

  /* ── Blueprint ────────────────────────────────────────────────────── */
  .blueprint{position:relative;border:1px solid var(--divider);border-radius:0}
  .blueprint.on-dark{border-color:var(--d-frame)}
  .corner{position:absolute;width:11px;height:11px;color:rgba(29,31,32,0.55)}
  .on-dark > .corner,.dark .corner{color:rgba(234,241,248,0.55)}
  .corner::before,.corner::after{content:"";position:absolute;background:currentColor}
  .corner::before{left:5px;top:0;width:1px;height:100%}
  .corner::after{top:5px;left:0;width:100%;height:1px}
  .corner.tl{top:-6px;left:-6px}.corner.tr{top:-6px;right:-6px}
  .corner.bl{bottom:-6px;left:-6px}.corner.br{bottom:-6px;right:-6px}

  /* ── Laser-Gravur (Hover) ─────────────────────────────────────────────
     Zwei uebereinanderliegende Rects, beide pathLength="100": .laser-trace
     ist die Schnittlinie (faehrt die Kontur ab), .laser-tip ist ein
     PUNKT (Dash nur 1.2 von 100 Einheiten + runde Caps), der auf demselben
     Weg mit derselben stroke-dashoffset-Transition mitlaeuft und so exakt
     am wandernden Ende der Linie klebt — der gezogene Schweisspunkt
     (Punktschweissen, kein Streifen). WICHTIG: Das Hover-Ziel des Tips ist
     stroke-dashoffset:1.2 (= Dashlaenge), NICHT 0 — bei 0 laeuft der Punkt
     um seine eigene Laenge ueber die Startecke hinaus (Dash laege dann auf
     Wegposition 0..1.2 statt 98.8..100); mit 1.2 stoppt seine Vorderkante
     exakt am Rundenschluss. Farb-Diagnose: NICHT
     der Blauton war das Problem, sondern zu WENIG Saettigung/Kontrast —
     die erste Fassung nutzte denselben blassen Marken-Blauton wie die
     Trace (--accent-300/400/500), der auf den ueberwiegend HELLEN
     Kartenhintergruenden (--bg fast weiss) unterging. Jetzt: reines Weiss
     im Kern, dann gesaettigtes Elektro-Blau/-Cyan (kraeftiger als die
     Marken-Pastelltoene) — wie ein echter Schweisslichtbogen, haelt auf
     hellen UND dunklen Sektionen Kontrast. Glow BEWUSST knapp gehalten
     (kurzer Radius, schmaler Strich) statt grossem weichem Bloom — ein
     ausladender Glow-Ball wirkt wie Spielerei, ein enger scharfer Punkt
     wirkt wie eine praezise Werkzeugspitze. Keyframe bewusst OHNE Flackern
     (ruhiges Ein-/Ausblenden, dazwischen konstant sichtbar) — ein
     pulsierender Funke wirkt verspielt, ein ruhiger heller Punkt wirkt
     technisch/praezise. Eigene Opacity-Keyframe statt Transition, weil eine
     Transition nicht ein- UND wieder ausblenden kann; die Position bleibt
     trotzdem 1:1 an der Transition der Trace-Linie synchronisiert. BEWUSST
     OHNE viewBox und OHNE vector-effect:non-scaling-stroke: Das SVG
     arbeitet direkt im Pixelraum (rect mit width/height 100%), der Strich
     verzerrt daher nicht. non-scaling-stroke wuerde in Chromium die
     Strichelung im Bildschirmraum rechnen und die pathLength-Normierung
     aushebeln — statt EINER umlaufenden Linie wandern dann viele kurze
     Striche um die Box. overflow:visible, damit die auf der Kontur
     zentrierte Strichhaelfte nicht abgeschnitten wird. */
  .laser-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
  .laser-svg rect{fill:none;stroke-dashoffset:100}
  .laser-trace{stroke:var(--accent-400);stroke-width:1.5px;stroke-dasharray:100;
    filter:drop-shadow(0 0 3px var(--accent-400));
    will-change:stroke-dashoffset;transition:stroke-dashoffset .45s ease}
  .laser-tip{stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-dasharray:1.2 98.8;opacity:0;
    filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px #4fb0f0) drop-shadow(0 0 8px #1c58c8) drop-shadow(0 0 12px rgba(28,88,200,.35));
    will-change:stroke-dashoffset,opacity;transition:stroke-dashoffset .3s ease,opacity .25s ease}
  @keyframes laser-tip-glow{0%,100%{opacity:0}8%{opacity:1}88%{opacity:1}}
  /* Nur Geraete mit echter Maus: auf Touchscreens gibt es kein Verweilen. */
  @media(hover:hover) and (pointer:fine){
    .blueprint.laser:hover .laser-trace{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease-in-out}
    .blueprint.laser:hover .laser-tip{stroke-dashoffset:1.2;transition:stroke-dashoffset 1.4s ease-in-out;
      animation:laser-tip-glow 1.4s ease-in-out forwards}
  }
  @media(prefers-reduced-motion:reduce){
    .laser-trace,.laser-tip,.blueprint.laser:hover .laser-trace,.blueprint.laser:hover .laser-tip{transition:none;animation:none}
  }

  .duo-clip{position:relative;overflow:hidden;height:100%}
  .duo-clip::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--accent);mix-blend-mode:color}

  /* ── Buttons ──────────────────────────────────────────────────────── */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
    font-family:var(--font-heading);font-weight:600;font-size:15px;line-height:1.2;
    background:transparent;color:inherit;text-decoration:none;appearance:none;
    border:1px solid var(--divider);border-radius:0;padding:14px 24px;transition:background .15s,color .15s,border-color .15s}
  .btn svg{display:block}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--dark-ink)}
  .btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
  .btn-primary:active{background:var(--accent-700);border-color:var(--accent-700)}
  .btn-secondary:hover{background:rgba(29,31,32,0.06)}
  .btn-secondary.on-dark{color:var(--dark-text);border-color:var(--d-divider)}
  .btn-secondary.on-dark:hover{background:rgba(234,241,248,0.08)}
  .btn-block{width:100%;padding:12px}
  .tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;background:var(--accent);color:var(--dark-ink)}
  .trust{display:inline-flex;align-items:center;gap:9px;font-size:14px}
  .trust svg{flex:none}

  /* ── Kopf / Navigation ────────────────────────────────────────────── */
  /* Die Nav liegt als Geschwister VOR dem Hero (nicht darin): sticky wirkt nur
     innerhalb des eigenen Elternelements — im Hero waere sie mit ihm weggescrollt.
     Per negativem Margin legt sie sich ueber den Hero, der oben Platz freihaelt. */
  .nav{display:flex;align-items:center;gap:32px;padding:22px 48px;
    border-bottom:1px solid var(--d-divider);color:var(--dark-text);transition:background .25s,backdrop-filter .25s}
  .nav.scrolled{background:rgba(13,23,32,.92);backdrop-filter:blur(10px)}
  @media(min-width:981px){
    .nav{position:sticky;top:0;z-index:60;margin-bottom:-88px;height:88px}
    /* Der negative Aussenabstand zieht die Nav ueber den folgenden Abschnitt.
       Jeder Abschnitt, der als erster nach der Nav stehen kann, muss die
       88 Pixel deshalb selbst wieder aufschlagen — fuer .subhero geschieht
       das weiter unten, nach dessen Basisregel. */
    .hero-wrap{padding-top:88px}
  }
  .brand{display:flex;align-items:center;gap:13px;margin-right:auto}
  .brand-mark{width:38px;height:38px;display:grid;place-items:center;font-family:var(--font-heading);font-weight:600;font-size:21px;color:var(--brand);border:1px solid var(--d-frame)}
  .brand-name{font-family:var(--font-heading);font-weight:600;font-size:18px;display:block;line-height:1.1}
  .brand-sub{font-size:11px;letter-spacing:.04em;color:rgba(234,241,248,0.6)}
  .nav-links{display:flex;gap:26px;font-size:14px}
  .nav-links a:hover{color:var(--accent-400)}
  .nav-toggle{position:absolute;opacity:0;pointer-events:none}
  .nav-burger{display:none}
  .nav .btn{padding:10px 16px;font-size:14px}

  /* ── Hero (dunkel, Metall-Glow) ───────────────────────────────────── */
  .hero-wrap{position:relative;color:var(--dark-text);
    background:radial-gradient(125% 100% at 18% -10%,#33546f 0%,#1a2b39 46%,#0d1720 100%)}
  .hero-wrap .glow{background:radial-gradient(42% 55% at 82% 12%,rgba(148,188,227,.30),transparent 70%)}
  .hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:72px 48px;align-items:center}
  .chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;font-family:var(--font-heading);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--accent-400);
    border:1px solid rgba(148,188,227,.45);margin-bottom:26px}
  .hero h1{font-size:clamp(40px,5.5vw,78px);line-height:1.02;letter-spacing:-.025em;margin-bottom:24px;hyphens:none;overflow-wrap:break-word}
  .hero h1 em{font-style:normal;color:var(--accent-400)}
  .lede{font-size:18px;line-height:1.55;max-width:36ch;color:rgba(234,241,248,0.8);margin-bottom:34px}
  .hero-actions{display:flex;gap:12px;margin-bottom:34px;flex-wrap:wrap}
  .hero-trust{display:flex;gap:26px;flex-wrap:wrap}
  .hero-visual{position:relative}
  .hero-frame{position:relative;width:100%;height:460px}
  .hero-frame svg{display:block;width:100%;height:100%}

  /* ── Leistungen (hell) ────────────────────────────────────────────── */
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px;flex-wrap:wrap}
  .sec-head .lead-in{max-width:34ch}
  .cards4{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{padding:28px}
  .card h3{font-size:21px;margin-bottom:8px}
  .card p{font-size:13px;color:rgba(29,31,32,0.68)}
  .ico{display:inline-flex;width:46px;height:46px;background:var(--accent-100);color:var(--accent-700);
    align-items:center;justify-content:center;margin-bottom:18px}

  /* ── Wertband (dunkel) ────────────────────────────────────────────── */
  .valueband{position:relative;background:linear-gradient(158deg,#274056,#0e1922);color:var(--dark-text);
    padding:60px 48px;display:grid;grid-template-columns:.8fr 1.6fr;gap:48px;align-items:start}
  .valueband > *{position:relative}
  .valueband h2{font-size:28px}
  .vcol{border-left:1px solid rgba(255,255,255,.18);padding-left:24px}
  .vcol .vt{font-family:var(--font-heading);font-weight:600;font-size:21px;margin-bottom:6px}
  .vcol p{font-size:13px;color:rgba(234,241,248,0.7)}
  .vcol ul{margin:18px 0 0;padding-left:20px;color:rgba(234,241,248,.82);font-size:14px;line-height:1.8}

  /* ── Referenzen ─────────────────────────────────────────────────── */
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .work-card{padding:28px;display:flex;flex-direction:column}
  .work-card h3{font-size:24px;margin:12px 0 8px}
  .work-card p{font-size:14px;color:rgba(29,31,32,.68)}
  .work-card .work-scope{margin:16px 0 22px;flex:1}
  .work-tag{align-self:flex-start;padding:5px 9px;background:var(--accent-100);color:var(--accent-800);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

  /* ── Ablauf (hell) ────────────────────────────────────────────────── */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .step{padding:26px}
  .step h3{font-size:20px;margin:14px 0 8px}
  .step p{font-size:13px;color:rgba(29,31,32,0.68)}

  /* ── Preise (getöntes Band) ───────────────────────────────────────── */
  .prices-band{background:var(--accent-100);padding:80px 48px}
  .prices-band h2{color:var(--accent-900)}
  .prices-band .sub{color:var(--accent-800);margin-bottom:40px}
  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .price{padding:32px;background:var(--bg);display:flex;flex-direction:column}
  .price.feat{background:var(--accent-900);color:var(--dark-text);border-color:var(--accent-900)}
  .price.feat .desc{color:rgba(234,241,248,0.7)}
  .price.feat .amount{color:var(--accent-400)}
  .price.feat .amount span{color:rgba(234,241,248,0.6)}
  .price .tag{position:absolute;top:-11px;left:32px}
  .price h3{font-size:26px;margin-bottom:6px}
  .price .desc{font-size:13px;color:rgba(29,31,32,0.68);margin-bottom:18px}
  .price .amount{font-family:var(--font-heading);font-weight:600;font-size:34px;margin-bottom:20px}
  .price .amount span{font-size:14px;color:rgba(29,31,32,0.68);font-weight:400}
  .price .feats{display:flex;flex-direction:column;gap:10px;font-size:13px;margin:0 0 26px;padding:0;list-style:none;flex:1}
  .price-note{font-size:12px;margin-top:20px;color:var(--accent-700)}

  /* ── Pflege (hell) ────────────────────────────────────────────────── */
  .care{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .care p{color:rgba(29,31,32,0.68)}
  .care-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--divider)}
  .care-cell{padding:20.4px 13.6px}
  .care-cell + .care-cell{border-left:1px solid var(--divider)}
  .care-cell h3{font-size:20px;margin-bottom:6px}
  .care-cell p{font-size:12px;margin-bottom:16px}
  .care-cell ul{font-size:12px;line-height:1.55;margin:0 0 16px;padding-left:17px}
  .care-cell .p{font-family:var(--font-heading);font-weight:600;font-size:26px;color:var(--text)}
  .care-cell .p span{font-size:12px;color:rgba(29,31,32,0.68);font-weight:400}

  /* ── FAQ (hell) ───────────────────────────────────────────────────── */
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
  .faq details{border-top:1px solid var(--divider);padding:18px 0}
  .faq summary{cursor:pointer;font-family:var(--font-heading);font-weight:600;font-size:20px;line-height:1.2;list-style-position:outside;margin-left:20px;padding-left:4px}
  .faq summary::marker{color:var(--accent-700)}
  .faq p{font-size:14px;color:rgba(29,31,32,0.65);margin:12px 0 0 24px}

  /* ── Kontakt (dunkel, Glow) ───────────────────────────────────────── */
  .contact{position:relative;overflow:hidden;color:var(--dark-text);padding:96px 48px;text-align:center;
    background:radial-gradient(120% 120% at 80% 0%,#33546f,#0d1720 60%)}
  .contact .glow{background:radial-gradient(40% 60% at 20% 100%,rgba(148,188,227,.22),transparent 70%)}
  .contact-in{position:relative}
  .contact h2{font-size:52px;margin:0 auto 16px;max-width:20ch}
  .contact .sub{margin:0 auto 30px;color:rgba(234,241,248,0.78);max-width:54ch}
  .contact .mailline{margin-top:24px;font-size:15px;color:rgba(234,241,248,0.8)}
  .contact .mailline a{color:var(--accent-400);border-bottom:1px solid rgba(148,188,227,.4)}
  .contact .note{margin-top:14px;font-size:13px;color:rgba(234,241,248,0.55);max-width:52ch;margin-inline:auto}
  .contact-action{margin-top:30px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .voice-panel{display:none;max-width:620px;margin:24px auto 0;padding:22px;border:1px solid rgba(148,188,227,.4);text-align:left;background:rgba(13,23,32,.55)}
  .voice-panel.open{display:block}
  .voice-panel p{font-size:13px;color:rgba(234,241,248,.75);margin-bottom:14px}
  .voice-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .voice-controls button,.voice-controls a{font:inherit}
  .voice-status{font-size:13px;color:var(--accent-400);margin-top:12px}
  .voice-panel audio{width:100%;margin-top:14px}

  /* ── Kontaktformular ──────────────────────────────────────────────── */
  .cform{max-width:640px;margin:24px auto 0;text-align:left}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cf-field{margin-bottom:14px}
  .cf-field label{display:block;font-family:var(--font-heading);font-size:13px;letter-spacing:.04em;
    text-transform:uppercase;color:rgba(234,241,248,.72);margin-bottom:6px}
  .cf-field .opt{text-transform:none;letter-spacing:0;color:rgba(234,241,248,.45);font-size:12px}
  .cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{
    width:100%;padding:12px 14px;font-family:var(--font-body);font-size:15px;line-height:1.5;
    color:var(--dark-text);background:rgba(255,255,255,.05);border:1px solid var(--d-frame);border-radius:0}
  .cform textarea{min-height:132px;resize:vertical}
  .cform input::placeholder,.cform textarea::placeholder{color:rgba(234,241,248,.38)}
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent-400);background:rgba(255,255,255,.09)}
  .cf-choice{display:flex;gap:20px;flex-wrap:wrap;padding-top:4px}
  .cf-choice label{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;
    font-family:var(--font-body);font-size:15px;color:rgba(234,241,248,.85);margin:0;cursor:pointer}
  .cf-choice input{accent-color:var(--accent-400);width:18px;height:18px}
  label.cf-consent{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;
    font-family:var(--font-body);font-size:14px;line-height:1.45;color:rgba(234,241,248,.85);margin:0;cursor:pointer}
  .cf-consent input{accent-color:var(--accent-400);width:18px;height:18px;flex:none;margin-top:2px}
  .cf-consent a{color:var(--accent-400);border-bottom:1px solid rgba(148,188,227,.4)}
  /* Honigtopf: für Menschen unsichtbar, für Formularroboter verlockend.
     Kein display:none — manche Bots überspringen ausgeblendete Felder. */
  .cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
  .cf-hint{font-size:12.5px;color:rgba(234,241,248,.5);max-width:46ch;margin-top:14px}
  .cf-hint a{color:var(--accent-400);border-bottom:1px solid rgba(148,188,227,.4)}
  .cf-status{margin-top:16px;padding:14px 16px;font-size:14.5px;display:none}
  .cf-status.ok{display:block;background:rgba(20,184,138,.14);border:1px solid rgba(20,184,138,.5);color:#a9e9d2}
  .cf-status.err{display:block;background:rgba(179,38,30,.16);border:1px solid rgba(179,38,30,.55);color:#ffc9c4}
  .cf-status a{color:inherit;text-decoration:underline}
  .cform button[disabled]{opacity:.55;cursor:progress}

  /* ── Footer ───────────────────────────────────────────────────────── */
  .footer{border-top:1px solid var(--divider);padding:32px 48px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .footer .fb{font-family:var(--font-heading);font-weight:600;font-size:16px;margin-right:auto}
  .footer-links{display:flex;gap:24px;font-size:13px;flex-wrap:wrap}
  .footer-links a:hover{color:var(--accent-700)}
  .footer .copy{font-size:12px;color:rgba(29,31,32,0.68);width:100%}
  .footer .mail{font-size:13px;color:rgba(29,31,32,0.68);width:100%}
  .footer .mail a{color:var(--accent-700)}

  /* ── Responsiv ────────────────────────────────────────────────────── */
  @media(max-width:980px){
    .pad,.prices-band,.valueband,.contact{padding:48px 20px}
    /* Unter 981px greift der Sticky-Ueberlagerungstrick vom Desktop nicht (siehe
       oben) — ohne eigenen Hintergrund saesse die Nav mit hellen Farben auf dem
       hellen Seitenhintergrund, kaum lesbar. Deshalb hier fest der dunkle Grund,
       den sie auf Desktop erst nach dem Scrollen bekommt. */
    .nav{padding:16px 20px;flex-wrap:wrap;gap:16px;background:rgba(13,23,32,.92);backdrop-filter:blur(10px)}
    .nav-burger{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--d-divider);background:transparent;color:inherit;cursor:pointer;margin-left:auto}
    .brand{margin-right:0}
    .nav-links{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--d-divider);padding-top:8px}
    .nav-links a{padding:12px 4px;min-height:44px;display:flex;align-items:center}
    .nav-toggle:checked ~ .nav-links{display:flex}
    .nav-cta{display:none}
    .hero{grid-template-columns:1fr;gap:40px;padding:48px 20px}
    .hero h1{font-size:38px}
    .hero-frame{height:280px}
    .cards4{grid-template-columns:1fr}
    .work-grid{grid-template-columns:1fr}
    .valueband{grid-template-columns:1fr;gap:24px}
    .vcol{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0;padding-top:20px}
    .steps{grid-template-columns:1fr}
    .prices{grid-template-columns:1fr}
    .care{grid-template-columns:1fr;gap:32px}
    .care-grid{grid-template-columns:1fr}
    .care-cell + .care-cell{border-left:0;border-top:1px solid var(--divider)}
    .faq{grid-template-columns:1fr}
    .contact h2{font-size:32px}
    .cf-row{grid-template-columns:1fr;gap:0}
    .h2{font-size:30px}
    .footer{padding:20px 20px;gap:10px}
    .footer-links{gap:8px 18px;font-size:12px}
    .footer .mail,.footer .copy{font-size:11px}
  }

  /* ── Unterseiten: Kopfbereich, Brotkrumen, Fließtext ──────────────── */
  .subhero{position:relative;color:var(--dark-text);padding:64px 48px 60px;
    background:radial-gradient(120% 130% at 18% -10%,#33546f 0%,#1a2b39 46%,#0d1720 100%)}
  .subhero-in{position:relative;max-width:var(--maxw);margin:0 auto}
  .subhero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.022em;
    margin-bottom:20px;max-width:20ch}
  .subhero .lede{font-size:18px;line-height:1.55;max-width:62ch;
    color:rgba(234,241,248,0.82);margin-bottom:0}
  .crumbs{font-family:var(--font-heading);font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;color:rgba(234,241,248,0.55);margin-bottom:22px}
  .crumbs a{border-bottom:1px solid rgba(148,188,227,.35)}
  .crumbs a:hover{color:var(--accent-400)}
  .crumbs span{margin:0 9px;opacity:.5}

  .prose{max-width:68ch}
  .prose p{font-size:16px;line-height:1.62;color:rgba(29,31,32,0.75);margin-bottom:18px}
  .prose h3{font-size:23px;margin:34px 0 12px}
  .prose ul{margin:0 0 18px;padding:0}
  .prose li{list-style:none;padding-left:24px;position:relative;margin-bottom:9px;
    font-size:15.5px;line-height:1.55;color:rgba(29,31,32,0.75)}
  .prose li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;
    background:var(--accent-600)}
  .prose a{color:var(--accent-700);border-bottom:1px solid rgba(65,97,128,.4)}

  /* ── Kacheln (Leistungsübersicht, Verweise) ───────────────────────── */
  .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .tile{display:block;padding:30px 32px}
  .tile h3{font-size:24px;margin-bottom:10px}
  .tile p{font-size:14.5px;color:rgba(29,31,32,0.68);margin-bottom:16px}
  .tile .mehr{font-family:var(--font-heading);font-weight:600;font-size:14px;
    color:var(--accent-700);letter-spacing:.02em}
  .tile:hover .mehr{border-bottom:1px solid var(--accent-700)}

  /* ── Abschluss-Aufforderung ───────────────────────────────────────── */
  .cta-band{position:relative;color:var(--dark-text);padding:64px 48px;text-align:center;
    background:radial-gradient(120% 130% at 50% 0%,#33546f,#0d1720 64%)}
  .cta-band h2{font-size:36px;margin-bottom:14px}
  .cta-band p{color:rgba(234,241,248,0.78);max-width:58ch;margin:0 auto 26px;font-size:16px}

  /* ── Bausteine der Auslandsseite ──────────────────────────────────── */
  .fall{padding:32px 34px}
  .fall .nr{font-family:var(--font-heading);font-size:13px;letter-spacing:.12em;color:var(--accent);margin-bottom:10px}
  .fall h3{font-size:28px;margin-bottom:12px}
  .fall p{color:rgba(29,31,32,0.72);margin-bottom:16px}
  .fall .bsp{font-size:14.5px;padding:14px 16px;background:var(--accent-100);border-left:3px solid var(--accent-400);color:var(--accent-800)}
  .band{position:relative;color:var(--dark-text);padding:72px 48px;
    background:radial-gradient(120% 130% at 82% 0%,#33546f,#0d1720 62%)}
  .band h2{font-size:38px;margin-bottom:16px}
  .teilung{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:32px}
  .teilung .sp{padding:26px 28px}
  .teilung h3{font-size:20px;margin-bottom:14px;color:var(--accent-400)}
  .teilung ul{margin:0;padding:0}
  .teilung li{list-style:none;padding-left:22px;position:relative;margin-bottom:10px;color:rgba(234,241,248,.84);font-size:15px}
  .teilung li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:1px;background:var(--accent-400)}
  .laender{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .tld{font-family:var(--font-heading);font-weight:600;font-size:16px;letter-spacing:.02em;
    padding:9px 16px;border:1px solid var(--divider);background:#fff;color:var(--accent-800)}
  .tld span{color:rgba(29,31,32,0.45);font-weight:400;font-size:13px;margin-left:7px}
  .preis-zeile{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider);margin-top:30px}
  .preis-zelle{background:var(--bg);padding:24px 26px}
  .preis-zelle .p{font-family:var(--font-heading);font-weight:600;font-size:34px;color:var(--accent-700);line-height:1}
  .preis-zelle .p span{font-size:15px;color:rgba(29,31,32,0.5);margin-left:5px}
  .preis-zelle h3{font-size:19px;margin:12px 0 6px}
  .preis-zelle p{font-size:14.5px;color:rgba(29,31,32,0.62)}

  @media (max-width:980px){
    .subhero{padding:44px 20px 40px}
    .cta-band{padding:48px 20px}
    .cta-band h2{font-size:29px}
    .tiles{grid-template-columns:1fr}
    .band{padding:52px 20px}
    .band h2{font-size:29px}
    .teilung{grid-template-columns:1fr}
    .preis-zeile{grid-template-columns:1fr}
    .fall{padding:26px 22px}
  }

  /* Ausgleich fuer die ueberlappende Sticky-Nav — muss NACH der Basisregel
     von .subhero stehen, sonst gewinnt deren padding-Kurzschreibweise. */
  @media(min-width:981px){
    .subhero{padding-top:152px}
  }