:root{
    color-scheme: light;
    --ground:#F7F6F2;
    --ground-alt:#EFEBE3;
    --panel:#FFFFFF;
    --ink:#0B1220;
    --ink-soft:#4B5568;
    --ink-faint:#8891A0;
    --line:rgba(11,18,32,0.10);
    --line-strong:rgba(11,18,32,0.18);
    --accent:#0E6B97;
    --accent-2:#25A5E2;
    --accent-deep:#082B3D;
    --accent-ink:#052232;
    --on-dark-soft:#C6D3D6;
    --shadow:0 20px 60px -25px rgba(8,20,30,0.35);
    --radius-lg:28px;
    --radius-md:18px;
    --radius-sm:10px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ground);
    color:var(--ink);
    font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-left:0;padding-right:0;
    overflow-x:hidden;
  }
  img{max-width:100%;}
  [hidden]{display:none!important;}
  a{color:inherit;}
  h1,h2,h3,h4{
    font-family:'Sora', -apple-system, sans-serif;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0;}
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:500;
  }
  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:24px;
  }
  @media (max-width:640px){ .wrap{padding-inline:20px;} }

  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

  /* ---------- NAV ---------- */
  /* Header starts fully transparent with light text while it sits over the dark
     hero image (matching the hero, not fighting it), then crossfades into the
     light frosted-glass bar once the page scrolls past the hero — driven by JS
     toggling .scrolled based on the hero's actual boundary, not a fixed scroll
     offset, so the switch lands exactly where the dark background ends. */
  header.site-nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding-top:env(safe-area-inset-top, 0px);
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:border-color .4s ease, background .4s ease, backdrop-filter .4s ease;
  }
  header.site-nav.scrolled{
    background:rgba(247,246,242,0.72);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border-bottom-color:var(--line);
  }
  header.site-nav:not(.scrolled):not(.menu-open) .brand{color:#fff;}
  header.site-nav:not(.scrolled):not(.menu-open) .brand span.sub{color:rgba(255,255,255,0.72);}
  header.site-nav:not(.scrolled):not(.menu-open) nav.links a{color:rgba(255,255,255,0.88);}
  header.site-nav:not(.scrolled):not(.menu-open) nav.links a.active{color:#fff;}
  header.site-nav:not(.scrolled):not(.menu-open) nav.links a::after{background:#fff;}
  header.site-nav:not(.scrolled):not(.menu-open) .nav-toggle{color:#fff;}
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding-block:16px;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;
    text-decoration:none;color:var(--ink);
    white-space:nowrap;
    transition:color .4s ease;
  }
  .brand .mark{
    width:34px;height:34px;border-radius:9px;flex:none;
    background:linear-gradient(150deg,var(--accent),var(--accent-2));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:0.85rem;
    box-shadow:0 6px 16px -6px rgba(14,107,151,0.7);
  }
  .brand span.sub{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:0.68rem;color:var(--ink-soft);letter-spacing:0.02em;transition:color .4s ease;}
  nav.links{display:flex;gap:28px;align-items:center;}
  nav.links a{
    text-decoration:none;color:var(--ink-soft);font-size:0.92rem;font-weight:600;
    padding-block:6px;position:relative;
    transition:color .4s ease;
  }
  nav.links a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  nav.links a:hover::after, nav.links a.active::after{transform:scaleX(1);}
  nav.links a.active{color:var(--ink);}

  .scroll-progress{
    position:fixed;top:0;left:0;height:2px;width:0%;z-index:101;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
  }
  .nav-cta{
    background:var(--ink);color:#fff!important;padding:10px 18px;border-radius:999px;
    font-size:0.88rem!important;font-weight:700!important;
  }
  .nav-toggle{display:none;background:none;border:none;padding:8px;color:var(--ink);transition:color .4s ease;}
  @media (max-width:860px){
    nav.links{
      position:fixed;inset:64px 0 0 0;background:var(--ground);
      flex-direction:column;justify-content:flex-start;align-items:stretch;
      padding:28px 24px;gap:4px;
      transform:translateX(100%);transition:transform .35s ease;
    }
    nav.links.open{transform:translateX(0);}
    nav.links a{padding:16px 4px;border-bottom:1px solid var(--line);font-size:1.05rem;}
    nav.links a::after{display:none;}
    .nav-cta{margin-top:16px;text-align:center;}
    .nav-toggle{display:block;}
    /* backdrop-filter on the header creates a containing block for fixed-position
       descendants, so the open menu panel was sizing itself against the ~70px header
       box instead of the viewport, leaving it clipped and see-through. Drop the
       filter while the menu is open so nav.links positions against the viewport. */
    header.site-nav.menu-open{
      backdrop-filter:none;-webkit-backdrop-filter:none;
      background:var(--ground);
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--accent-deep);
    color:#fff;
    padding-top:calc(150px + env(safe-area-inset-top, 0px));
    padding-bottom:120px;
    overflow:hidden;
    isolation:isolate;
    --mx:50%;--my:32%;
  }
  .hero::before{
    content:"";position:absolute;inset:-10%;
    background:
      radial-gradient(48% 60% at 18% 12%, rgba(37,165,226,0.38), transparent 60%),
      radial-gradient(55% 65% at 88% 82%, rgba(14,107,151,0.55), transparent 65%),
      radial-gradient(40% 50% at 70% 8%, rgba(255,255,255,0.10), transparent 60%);
    animation:driftGlow 22s ease-in-out infinite alternate;
    transform:translateY(calc(var(--px,0) * 0.4px));
    z-index:-2;
  }
  /* cursor-tracked spotlight: brightens the area around the pointer so the hero
     visibly reacts to movement, not just to scroll. Position driven by --mx/--my,
     set from JS on pointermove (pointer:fine + motion-OK only). */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(480px circle at var(--mx) var(--my), rgba(191,228,250,0.20), transparent 62%);
    opacity:0;transition:opacity .5s ease;
  }
  .hero.spotlight::after{opacity:1;}
  .facade{
    position:absolute;inset:0;z-index:-1;opacity:0.5;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 74px),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 74px);
    /* the grid fades in below the header instead of starting at 0 - now that the
       header is transparent over the hero, a grid line landing right behind the
       logo/nav text read as a botched cutout box around it, which it wasn't. */
    mask-image:linear-gradient(180deg, transparent, transparent 90px, rgba(0,0,0,0.9) 160px, transparent 92%);
    -webkit-mask-image:linear-gradient(180deg, transparent, transparent 90px, rgba(0,0,0,0.9) 160px, transparent 92%);
    transform:translateY(calc(var(--px,0) * 0.15px));
  }
  .facade::after{
    content:"";position:absolute;top:0;bottom:0;width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
    animation:sheen 9s ease-in-out infinite;
    animation-delay:1s;
  }
  @keyframes driftGlow{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(-2%,2%,0) scale(1.08);}
  }
  @keyframes sheen{
    0%{left:-45%;}
    38%,100%{left:115%;}
  }
  .hero-inner{position:relative;z-index:1;}
  .hero-inner > *{
    opacity:0;transform:translateY(18px);
    animation:heroRise .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-inner > *:nth-child(1){animation-delay:.05s;}
  .hero-inner > *:nth-child(2){animation-delay:.16s;}
  .hero-inner > *:nth-child(3){animation-delay:.27s;}
  .hero-inner > *:nth-child(4){animation-delay:.38s;}
  .hero-inner > *:nth-child(5){animation-delay:.48s;}
  .hero-inner > *:nth-child(6){animation-delay:.58s;}
  @keyframes heroRise{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.22);
    padding:7px 14px;border-radius:999px;font-size:0.72rem;color:#DCEFFB;
    margin-bottom:26px;
  }
  .eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none;
    animation:dotPulse 2.4s ease-in-out infinite;
  }
  @keyframes dotPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(37,165,226,0.55);}
    50%{box-shadow:0 0 0 5px rgba(37,165,226,0);}
  }
  h1.hero-title{
    font-size:clamp(2.5rem, 6vw, 4.6rem);
    max-width:15ch;color:#fff;
  }
  h1.hero-title em{
    font-style:normal;
    background:linear-gradient(100deg,var(--accent-2),#BFE4FA 60%,#fff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-sub{
    margin-top:24px;max-width:46ch;font-size:1.13rem;color:#C6D3D6;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 26px;border-radius:999px;font-weight:700;font-size:0.95rem;
    text-decoration:none;border:1px solid transparent;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:linear-gradient(120deg,var(--accent-2),var(--accent));color:var(--accent-ink);
    box-shadow:0 16px 32px -14px rgba(37,165,226,0.55);
    position:relative;overflow:hidden;
  }
  .btn-primary::after{
    content:"";position:absolute;top:0;bottom:0;width:40%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent);
    transform:translateX(-160%);
  }
  .btn-primary:hover::after{transform:translateX(280%);transition:transform .7s ease;}
  .btn-primary:hover{box-shadow:0 20px 40px -14px rgba(37,165,226,0.7);}
  /* the hero's primary CTA breathes at rest, so it reads as "alive" before anyone
     touches it, not only on hover; canceled on hover so the hover shadow above wins. */
  .hero-actions .btn-primary{animation:ctaPulse 3.2s ease-in-out infinite;}
  .hero-actions .btn-primary:hover{animation:none;}
  @keyframes ctaPulse{
    0%,100%{box-shadow:0 16px 32px -14px rgba(37,165,226,0.55);}
    50%{box-shadow:0 22px 46px -12px rgba(37,165,226,0.9);}
  }
  .btn-ghost{
    background:rgba(255,255,255,0.06);color:#fff;border-color:rgba(255,255,255,0.35);
  }
  .btn-ghost:hover{background:rgba(255,255,255,0.14);}
  .btn-dark{background:var(--ink);color:#fff;}
  .btn-dark:hover{box-shadow:0 16px 32px -16px rgba(11,18,32,0.5);}

  .hero-stats{
    position:relative;z-index:1;margin-top:76px;
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,0.16);
    padding-top:32px;gap:20px;
  }
  .stat b{
    display:block;font-family:'Sora',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);
    font-variant-numeric:tabular-nums;color:#fff;
  }
  .stat span{display:block;margin-top:6px;font-size:0.78rem;color:#A9BDC0;}
  @media (max-width:760px){
    .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:28px;}
  }

  .google-badge{
    position:relative;z-index:1;margin-top:22px;
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.20);
    padding:9px 16px 9px 12px;border-radius:999px;text-decoration:none;
    transition:background .25s ease, transform .25s ease;
  }
  .google-badge:hover{background:rgba(255,255,255,0.13);transform:translateY(-1px);animation:none;}
  .google-badge span{color:#EAF1F0;font-size:0.86rem;}
  .google-badge b{font-family:'Sora',sans-serif;color:#fff;}
  .google-badge .stars{color:#FFC107;letter-spacing:1px;font-size:0.8rem;}
  .google-badge .muted{color:#A9BDC0;}

  /* ---------- reveal ---------- */
  .reveal{
    opacity:0;transform:translateY(46px) scale(.94);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in{opacity:1;transform:translateY(0) scale(1);}
  .reveal-stagger > *{
    opacity:0;transform:translateY(46px) scale(.94);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal-stagger.in > *{opacity:1;transform:translateY(0) scale(1);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.03s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.11s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.27s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.35s;}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.43s;}
  @media (prefers-reduced-motion:reduce){
    .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important;}
    .hero::before,.facade::after,.care-panel::before,.contact-band::before{animation:none!important;transform:none!important;}
    .svc-card,.svc-icon,.care-card,.btn-primary::after{transition:none!important;}
    .hero-inner > *{animation:none!important;opacity:1!important;transform:none!important;}
    .eyebrow .dot{animation:none!important;}
    .hero::after{display:none!important;}
    .hero-actions .btn-primary{animation:none!important;}
    .hero-inner{opacity:1!important;transform:none!important;}
    .intro{display:none!important;}
  }

  /* ---------- INTRO: Logo auf der Buehne der Seite ----------
     Der Hintergrund ist derselbe wie im Hero — dunkles Nachtblau mit den
     wandernden Lichtkegeln, dem Fassadenraster und dem Glanzstreifen. Dadurch
     loest sich das Intro nicht wie ein Vorhang auf, sondern zoomt in die Seite
     hinein: der Untergrund bleibt derselbe, nur das Logo weicht dem Inhalt.
     Das Overlay ist per Default display:none und wird nur von JS eingeschaltet
     (html.intro-on). Ohne JS, bei prefers-reduced-motion, bei einem Direktlink
     auf einen Abschnitt (#hash) oder beim zweiten Aufruf in derselben
     Browser-Session laeuft es gar nicht erst an. */
  .intro{display:none;}
  html.intro-on .intro{
    display:block;
    position:fixed;inset:0;z-index:9000;
    background:var(--accent-deep);
    overflow:hidden;isolation:isolate;
    transform-origin:center center;
    overscroll-behavior:contain;touch-action:none;
  }
  html.intro-out .intro{
    opacity:0;transform:scale(1.07);
    transition:opacity .60s cubic-bezier(.4,0,.2,1), transform .72s cubic-bezier(.4,0,.2,1);
  }
  .intro::before{
    content:"";position:absolute;inset:-14%;z-index:0;
    background:
      radial-gradient(48% 60% at 18% 12%, rgba(37,165,226,0.42), transparent 60%),
      radial-gradient(55% 65% at 88% 82%, rgba(14,107,151,0.58), transparent 65%),
      radial-gradient(40% 50% at 70% 8%, rgba(255,255,255,0.10), transparent 60%);
    animation:introGlow 5.2s ease-in-out infinite alternate;
  }
  @keyframes introGlow{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(-3%,3%,0) scale(1.13);}
  }
  /* gleiches Fassadenraster wie im Hero, zur Mitte hin freigestellt */
  .intro-grid{
    position:absolute;inset:0;z-index:0;opacity:0.5;overflow:hidden;
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 74px),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 74px);
    mask-image:radial-gradient(72% 72% at 50% 48%, rgba(0,0,0,0.95), transparent 88%);
    -webkit-mask-image:radial-gradient(72% 72% at 50% 48%, rgba(0,0,0,0.95), transparent 88%);
  }
  .intro-grid::after{
    content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
    animation:introSheen 2.4s ease-in-out .2s infinite;
  }
  @keyframes introSheen{ 0%{left:-45%;} 58%,100%{left:115%;} }

  /* Scroll-Sperre und Pause fuer die Hero-Animation, nur solange das Logo steht.
     Wird geloest, sobald das Overlay abtaucht — so steigt der Hero-Text genau
     waehrend der Ueberblendung auf. */
  html.intro-hold,html.intro-hold body{overflow:hidden;}
  html.intro-hold .hero-inner > *,
  html.intro-hold .eyebrow .dot,
  html.intro-hold .hero-actions .btn-primary{animation-play-state:paused;}

  .intro-stage{
    position:absolute;inset:0;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:26px;padding:24px;
  }
  .intro-logo{
    width:min(300px,60vw);height:auto;display:block;
    opacity:0;transform:translateY(12px) scale(.95);
    animation:introIn .58s cubic-bezier(.16,1,.3,1) .06s forwards,
              introHalo 2.6s ease-in-out .55s infinite;
  }
  @keyframes introHalo{
    0%,100%{filter:drop-shadow(0 0 22px rgba(37,165,226,0.32));}
    50%{filter:drop-shadow(0 0 48px rgba(37,165,226,0.62));}
  }
  .intro-place{
    font-family:'IBM Plex Mono',monospace;font-size:0.68rem;font-weight:500;
    letter-spacing:0.22em;text-transform:uppercase;color:rgba(198,211,214,0.75);
    text-align:center;
    opacity:0;animation:introIn .5s ease .34s forwards;
  }
  .intro-track{
    width:min(190px,44vw);height:2px;border-radius:2px;
    background:rgba(255,255,255,0.16);overflow:hidden;
    opacity:0;animation:introIn .4s ease .46s forwards;
  }
  .intro-fill{
    display:block;height:100%;width:100%;border-radius:2px;
    background:linear-gradient(90deg,var(--accent-2),#BFE4FA);
    transform:scaleX(0);transform-origin:left center;
  }
  @keyframes introIn{to{opacity:1;transform:none;}}

  /* ---------- SECTION GENERIC ---------- */
  section{padding-block:108px;}
  @media (max-width:760px){ section{padding-block:72px;} }
  .kicker{
    color:var(--accent);font-size:0.76rem;margin-bottom:14px;display:block;
  }
  .section-head{max-width:640px;margin-bottom:60px;}
  .section-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);}
  .section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.04rem;max-width:58ch;}

  /* ---------- SERVICES ---------- */
  .svc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
    overflow:hidden;
  }
  @media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .svc-grid{grid-template-columns:1fr;} }
  .svc-card{
    background:var(--panel);padding:34px 28px;
    display:flex;flex-direction:column;gap:16px;
    transition:background .3s ease;
  }
  .svc-card:hover{background:var(--ground-alt);}
  .svc-icon{
    width:52px;height:52px;border-radius:14px;flex:none;
    background:linear-gradient(150deg,rgba(14,107,151,0.14),rgba(37,165,226,0.22));
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-deep);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .svc-card:hover .svc-icon{transform:scale(1.08) rotate(-4deg);}
  .svc-icon svg{width:26px;height:26px;stroke:var(--accent-deep);}
  .svc-card h3{font-size:1.14rem;}
  .svc-card p{color:var(--ink-soft);font-size:0.94rem;}
  .svc-tag{margin-top:auto;font-size:0.72rem;color:var(--accent);}

  /* ---------- PROCESS ---------- */
  .process{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative;}
  @media (max-width:760px){ .process{grid-template-columns:1fr;gap:44px;} }
  .process::before{
    content:"";position:absolute;top:23px;left:calc(16.6% + 4px);right:calc(16.6% + 4px);
    height:1px;background:var(--line-strong);
  }
  .process-fill{
    position:absolute;top:23px;left:calc(16.6% + 4px);height:1px;
    width:calc((100% - 2*(16.6% + 4px)) * var(--proc, 0));
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
  }
  @media (max-width:760px){ .process::before,.process-fill{display:none;} }
  .step{position:relative;}
  .step .num{
    width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;position:relative;z-index:1;margin-bottom:22px;
  }
  .step h3{font-size:1.12rem;margin-bottom:10px;}
  .step p{color:var(--ink-soft);font-size:0.94rem;max-width:34ch;}

  /* ---------- DIVIDER ---------- */
  .divider{
    position:relative;height:140px;background:var(--ground);
    overflow:hidden;
  }
  .divider svg{position:absolute;bottom:-1px;left:0;width:100%;height:100%;display:block;}

  /* ---------- CARE / §45b ---------- */
  .care-section{background:var(--accent-deep);color:#fff;}
  .care-section .kicker{color:var(--accent-2);}
  .care-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
  @media (max-width:900px){ .care-grid{grid-template-columns:1fr;gap:40px;} }
  .care-cards{display:grid;gap:14px;}
  .care-card{
    background:#fff;border:1px solid rgba(37,165,226,0.20);border-radius:var(--radius-md);
    padding:22px 24px;display:flex;gap:16px;align-items:flex-start;
    box-shadow:var(--shadow);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  }
  .care-card:hover{box-shadow:0 26px 44px -20px rgba(5,34,50,0.45);}
  .care-card .n{
    font-family:'IBM Plex Mono',monospace;font-size:0.78rem;color:var(--accent-deep);
    background:rgba(37,165,226,0.14);border-radius:8px;padding:4px 9px;flex:none;
  }
  .care-card h4{font-size:1rem;margin-bottom:6px;font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);}
  .care-card p{color:var(--ink-soft);font-size:0.92rem;}
  .care-panel{
    background:var(--accent-ink);color:#EAF3F8;border-radius:var(--radius-lg);
    padding:38px 34px;position:relative;overflow:hidden;
  }
  .care-panel::before{
    content:"";position:absolute;inset:-10%;
    background:radial-gradient(60% 60% at 90% 0%, rgba(37,165,226,0.35), transparent 70%);
    animation:driftGlow 26s ease-in-out infinite alternate;
  }
  .care-panel h3{color:#fff;font-size:1.4rem;margin-bottom:14px;position:relative;}
  .care-panel p{position:relative;color:var(--on-dark-soft);font-size:0.95rem;margin-bottom:26px;}
  .care-amount{
    position:relative;display:flex;align-items:baseline;gap:8px;margin-bottom:26px;
  }
  .care-amount b{font-family:'Sora',sans-serif;font-size:2.6rem;color:var(--accent-2);font-variant-numeric:tabular-nums;}
  .care-amount span{color:var(--on-dark-soft);font-size:0.85rem;}

  /* ---------- TRUST / WHY ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  @media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }
  .why-item{padding-top:20px;border-top:2px solid var(--ink);}
  .why-item h4{font-size:1.02rem;margin-bottom:8px;}
  .why-item p{color:var(--ink-soft);font-size:0.9rem;}

  /* ---------- CONTACT ---------- */
  .contact-band{
    background:var(--ink);color:#fff;border-radius:var(--radius-lg);
    padding:56px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;
    position:relative;overflow:hidden;
  }
  @media (max-width:860px){ .contact-band{grid-template-columns:1fr;padding:40px 26px;} }
  .contact-band::before{
    content:"";position:absolute;inset:-10%;
    background:radial-gradient(50% 70% at 100% 0%, rgba(37,165,226,0.22), transparent 70%);
    animation:driftGlow 20s ease-in-out infinite alternate;
  }
  .contact-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);position:relative;max-width:16ch;}
  .contact-band > div{position:relative;}
  .contact-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;}
  .contact-list a, .contact-list span{
    display:flex;gap:12px;align-items:center;color:#DDE7E6;text-decoration:none;font-size:0.98rem;
  }
  .contact-list svg{width:18px;height:18px;stroke:var(--accent-2);flex:none;}
  form.cform{display:grid;gap:14px;}
  .cform label{font-size:0.78rem;color:#A9BDC0;display:block;margin-bottom:6px;}
  .cform input, .cform textarea, .cform select{
    width:100%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.22);
    border-radius:10px;padding:12px 14px;color:#fff;font-family:inherit;font-size:0.94rem;
  }
  .cform input::placeholder, .cform textarea::placeholder{color:#7D8C93;}
  .cform textarea{resize:vertical;min-height:88px;}
  .cform button{margin-top:4px;justify-self:start;}

  /* ---------- FOOTER ---------- */
  footer{padding-block:48px;border-top:1px solid var(--line);}
  .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:0.85rem;color:var(--ink-soft);}
  .foot-links a{text-decoration:none;}
  .foot-links a:hover{color:var(--ink);}
  .foot-social{display:flex;gap:10px;align-items:center;}
  .foot-social a{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line-strong);color:var(--ink-soft);
    transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .foot-social a:hover{
    color:#fff;background:var(--accent);border-color:var(--accent);
    transform:translateY(-2px);
  }
  .foot-social svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;}
  .foot-fine{color:var(--ink-faint);font-size:0.8rem;margin-top:18px;}

  .brand-logo{height:38px;width:auto;display:block;}
  /* Einfarbig weisse Ausstanz-Variante: nur solange die Kopfzeile transparent
     ueber dem dunklen Hero liegt. Sobald sie auf den hellen Balken wechselt,
     uebernimmt wieder das farbige Logo. Weiss auf Dunkelblau steht deutlich
     klarer als das gedeckte Blau-auf-Blau. */
  .brand-logo-light{height:38px;width:auto;display:none;}
  header.site-nav:not(.scrolled):not(.menu-open) .brand-logo{display:none;}
  header.site-nav:not(.scrolled):not(.menu-open) .brand-logo-light{display:block;}
  .foot-logo{height:24px;width:auto;display:block;}
  .place-note{
    display:inline-flex;align-items:center;gap:8px;font-size:0.72rem;color:var(--ink-faint);
    margin-top:10px;
  }

  /* ---------- LEGAL: eigene Seiten ---------- */
  .legal-page{padding-block:64px 104px;}
  .legal-page .legal-body{max-width:720px;}
  .legal-body h3{
    font-family:'Sora',-apple-system,sans-serif;font-size:1rem;font-weight:700;
    margin:30px 0 10px;color:var(--ink);
  }
  .legal-body h3:first-of-type{margin-top:0;}
  .legal-body p{color:var(--ink-soft);font-size:0.96rem;line-height:1.7;margin-bottom:12px;}
  .legal-body ul{margin:0 0 12px;padding-left:20px;color:var(--ink-soft);font-size:0.96rem;line-height:1.7;}
  .legal-body li{margin-bottom:6px;}
  .legal-body a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--line-strong);}
  .legal-body strong{color:var(--ink);}
  .legal-back{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:0.82rem;
    color:var(--ink-faint);text-decoration:none;
  }
  .legal-back:hover{color:var(--accent);}

  /* ---------- UNTERSEITEN ----------
     Unterseiten beginnen mit derselben dunklen Buehne wie die Startseite, nur
     kuerzer. Weil sie die Klasse .hero tragen, greift dieselbe Logik fuer die
     Kopfzeile: transparent ueber dem Dunkel, heller Balken danach. */
  .hero.hero--sub{
    padding-top:calc(132px + env(safe-area-inset-top, 0px));
    padding-bottom:84px;
  }
  .hero--sub h1.hero-title{font-size:clamp(2.1rem,4.8vw,3.5rem);max-width:18ch;}
  .hero--sub .hero-sub{max-width:52ch;}
  .hero.hero--legal{padding-bottom:60px;}
  .crumbs{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    font-size:0.8rem;color:rgba(198,211,214,0.82);margin-bottom:22px;
  }
  .crumbs a{color:#DCEFFB;text-decoration:none;}
  .crumbs a:hover{text-decoration:underline;}
  .crumbs .sep{opacity:0.5;}
  nav.links a.active{color:var(--ink);}
  .care-more{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;}
  .care-section--page .care-grid{align-items:start;}
  .care-section--page{padding-top:40px;}
  /* Wenn auf den Kopfbereich ein ebenfalls dunkler Abschnitt folgt, laeuft der
     Lichtschein unten weich aus, statt an der Abschnittsgrenze abzureissen. */
  .hero--blend .hero-fade{
    position:absolute;left:0;right:0;bottom:0;height:220px;z-index:-1;
    background:linear-gradient(180deg, rgba(8,43,61,0), var(--accent-deep) 92%);
    pointer-events:none;
  }