:root{
    --navy:#082747;
    --navy-2:#0c3560;
    --steel:#2091db;
    --accent:#39a4ea;
    --accent-2:#6bbced;
    --brand-light:#8ec5ea;
    --light:#eef4fb;
    --grey:#9db2c9;
    --text:#e8f0f9;
    --radius:14px;
    --maxw:1200px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    color:#1d2b3a;background:#fff;line-height:1.65;overflow-x:hidden;
  }
  h1,h2,h3,h4{line-height:1.15;font-weight:800;letter-spacing:-.02em}
  a{text-decoration:none;color:inherit}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .accent{color:var(--accent)}
  .eyebrow{
    display:inline-block;text-transform:uppercase;letter-spacing:.24em;
    font-size:.85rem;font-weight:800;color:var(--brand-light);margin-bottom:14px;
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);color:#fff;font-weight:700;
    padding:15px 30px;border-radius:50px;border:none;cursor:pointer;
    font-size:1rem;transition:transform .25s ease,box-shadow .25s ease;
    box-shadow:0 10px 30px rgba(26,134,216,.35);
  }
  .btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(26,134,216,.5)}
  .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:none}
  .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .3s ease,padding .3s ease,box-shadow .3s ease;
    padding:22px 0;
  }
  header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(10px);padding:10px 0;box-shadow:0 6px 24px rgba(8,39,71,.12)}
  .nav{display:flex;align-items:center;justify-content:space-between}
  /* Logo ohne weissen Kasten: ueber dem Video die weisse Fassung,
     auf hellem Header die Farbfassung. */
  .logo{display:inline-flex;align-items:center;background:none;padding:0;border-radius:0;
    box-shadow:none}
  .logo img{transition:opacity .25s}
  .logo .logo-farbe{display:none}
  .logo .logo-hell{filter:drop-shadow(0 2px 12px rgba(8,39,71,.6))}
  header.scrolled .logo .logo-hell{display:none}
  header.scrolled .logo .logo-farbe{display:block}
  .logo img{height:36px;width:auto;display:block}

  .menu{display:flex;align-items:center;gap:30px}
  .menu a{color:rgba(255,255,255,.85);font-weight:600;font-size:.95rem;position:relative;
    transition:color .2s;text-shadow:0 1px 10px rgba(8,39,71,.55)}
  header.scrolled .menu a{text-shadow:none}
  .menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:width .25s}
  .menu a:hover{color:#fff}.menu a:hover::after{width:100%}
  header.scrolled .menu a{color:#28425e}
  header.scrolled .menu a:hover{color:var(--steel)}
  .menu .btn{padding:11px 22px;font-size:.9rem}
  .menu a.btn{color:#fff}
  header.scrolled .menu a.btn{color:#fff}
  .menu a.btn.apply{background:transparent;border:2px solid var(--accent);color:#fff;box-shadow:none;position:relative}
  .menu a.btn.apply::before{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#3ddc84;animation:pulse 1.6s infinite}
  .menu a.btn.apply:hover{background:var(--accent)}
  header.scrolled .menu a.btn.apply{color:var(--steel)}
  header.scrolled .menu a.btn.apply:hover{color:#fff}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .burger span{width:26px;height:3px;background:#fff;border-radius:2px;transition:.3s}
  header.scrolled .burger span{background:var(--navy)}
  /* Über hellen Bildbereichen gingen die weißen Balken unter – deshalb eine Trägerfläche */
  .burger{background:rgba(8,39,71,.55);border-radius:12px;backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.25);transition:background .3s,border-color .3s}
  header.scrolled .burger{background:rgba(8,39,71,.06);border-color:transparent;backdrop-filter:none}
  /* Scroll-Fortschritt */
  .progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--steel),var(--accent));z-index:200;transition:width .1s linear}
  section[id]{scroll-margin-top:86px}

  /* ---------- Hero: Video, scroll-gesteuert (Vollbild) ---------- */
  .video-hero{position:relative;height:320vh;padding:0;background:var(--navy)}
  .video-stage{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;background:var(--navy)}
  .video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .v-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,39,71,.42) 0%,rgba(8,39,71,0) 24%,rgba(8,39,71,0) 42%,rgba(8,39,71,.78) 100%)}
  .hero-inner{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:86px;pointer-events:none}   /* Platz für den Scroll-Hinweis darunter */
  .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;color:#fff;
    background:rgba(8,39,71,.7);padding:8px 18px;border-radius:50px;font-size:.78rem;font-weight:600;letter-spacing:.08em;
    backdrop-filter:blur(4px);pointer-events:none;white-space:nowrap;transition:opacity .3s;display:flex;align-items:center;gap:8px}
  .scroll-cue .ar{display:inline-block;animation:bob 1.4s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  .hero-inner .hero-text{max-width:680px}
  .hero-inner .hero-text > *{pointer-events:auto}
  .video-hero .eyebrow{color:#fff;background:var(--accent);padding:6px 14px;border-radius:50px;letter-spacing:.14em}
  .video-hero h1{font-size:clamp(2.2rem,5.5vw,4.2rem);margin:16px 0 20px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
  .video-hero p.lead{font-size:clamp(1.02rem,2vw,1.25rem);color:#eef4fb;max-width:600px;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap}
  .hero-badges{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap}
  .hero-badges .b{border-left:3px solid var(--accent);padding-left:16px}
  .hero-badges .b strong{display:block;font-size:1.9rem;font-weight:800;line-height:1}
  .hero-badges .b span{font-size:.8rem;color:#dbe6f1;text-transform:uppercase;letter-spacing:.1em}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}50%{box-shadow:0 0 0 6px rgba(61,220,132,0)}}

  /* ---------- Sections ---------- */
  section{padding:110px 0;position:relative}
  .section-head{max-width:680px;margin-bottom:60px}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .section-head h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--steel)}
  /* Das Akzentwort lag nur minimal neben der Überschriftfarbe (#2091DB vs #39A4EA) und
     wirkte dadurch wie ein Versehen. In Abschnittsüberschriften daher einheitlich. */
  .section-head h2 .accent,
  .about-copy h2 .accent{color:inherit}   /* auch 'Erfahrung, die Sicherheit gibt.' */
  .section-head p{color:#546778;font-size:1.08rem;margin-top:16px}

  /* reveal */
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- Agentur-Feinschliff ---------- */
  /* Buttons: Licht-Sweep beim Hover */
  .btn{position:relative;overflow:hidden}
  .btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-20deg);transition:left .55s ease}
  .btn:hover::after{left:130%}
  /* Überschriften: Akzentbalken wächst beim Erscheinen */
  .section-head.center h2{position:relative;padding-bottom:18px}
  .section-head.center h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%) scaleX(0);
    width:64px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--steel),var(--accent));
    transform-origin:center;transition:transform .7s .25s ease}
  .reveal.in h2::after{transform:translateX(-50%) scaleX(1)}
  /* Zahlen mit Verlauf */
  .stat strong{background:linear-gradient(120deg,var(--steel),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  /* Timeline-Punkte pulsieren dezent */
  .tl .step.lit .dot{animation:tlpulse 2.6s infinite}
  @keyframes tlpulse{0%,100%{box-shadow:0 0 0 6px rgba(57,164,234,.2)}50%{box-shadow:0 0 0 11px rgba(57,164,234,.08)}}
  /* Sanfte Hintergrund-Blobs in hellen Sektionen */
  .services,.career,.team{position:relative;overflow:hidden}
  .services::before,.career::before,.team::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(57,164,234,.10),transparent 65%);pointer-events:none;
    animation:blob 16s ease-in-out infinite alternate}
  .services::before{top:-180px;right:-140px}
  .career::before{bottom:-200px;left:-160px;animation-delay:-6s}
  .team::before{top:-160px;left:38%;animation-delay:-11s}
  @keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,26px) scale(1.12)}}
  .services > .wrap,.career > .wrap,.team > .wrap{position:relative;z-index:1}
  /* Hero-Text: gestaffeltes Erscheinen */
  .hero-text > *{opacity:0;transform:translateY(22px);animation:herofade .8s ease forwards}
  .hero-text > *:nth-child(1){animation-delay:.15s}
  .hero-text > *:nth-child(2){animation-delay:.28s}
  .hero-text > *:nth-child(3){animation-delay:.40s}
  .hero-text > *:nth-child(4){animation-delay:.52s}
  .hero-text > *:nth-child(5){animation-delay:.64s}
  .hero-text > *:nth-child(6){animation-delay:.76s}
  @keyframes herofade{to{opacity:1;transform:none}}
  /* Team-Karten: Foto zoomt minimal */
  .member .avatar-img{transition:transform .35s ease}
  .member:hover .avatar-img{transform:scale(1.07)}
  @media(prefers-reduced-motion:reduce){
    .btn::after,.tl .dot,.services::before,.career::before,.team::before{animation:none;transition:none}
    .hero-text > *{opacity:1;transform:none;animation:none}
  }

  /* ---------- Leistungen ---------- */
  .services{background:var(--light)}
  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .card{
    background:#fff;border-radius:var(--radius);padding:34px 28px;
    border:1px solid #e6ecf3;transition:transform .3s ease,box-shadow .3s ease,border-color .3s;
    position:relative;overflow:hidden;
  }
  .card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--accent),#4aa8e8);transform:scaleX(0);transform-origin:left;transition:transform .35s}
  .card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(13,27,42,.12);border-color:transparent}
  .card:hover::before{transform:scaleX(1)}
  .card .ico{width:58px;height:58px;border-radius:14px;background:rgba(26,134,216,.14);display:grid;place-items:center;margin-bottom:22px;color:var(--steel)}
  .card .ico svg{width:30px;height:30px}
  .card h3{font-size:1.25rem;color:var(--navy);margin-bottom:10px}
  .card p{color:#61707f;font-size:.96rem}

  /* ---------- Über uns ---------- */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .about-copy h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--steel);margin-bottom:22px}
  .about-copy p{color:#546778;margin-bottom:18px}
  .feature-list{list-style:none;margin-top:26px;display:grid;gap:14px}
  .feature-list li{display:flex;gap:14px;align-items:flex-start;font-weight:600;color:var(--navy)}
  .feature-list .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:900;margin-top:2px}
  /* Vorher/Nachher-Vergleich: schiebbarer Balken zwischen Skizze und fertigem Haus */
  .ba{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1452/1083;
    box-shadow:0 30px 60px rgba(8,39,71,.28);background:#0b1f3a;user-select:none;touch-action:pan-y;
    --p:50%}
  .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
  .ba .ba-after{z-index:1}
  .ba .ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
  .ba .ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;z-index:3;
    background:#fff;box-shadow:0 0 14px rgba(8,39,71,.55);pointer-events:none}
  .ba .ba-handle{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);z-index:4;
    width:52px;height:52px;border-radius:50%;background:var(--accent);border:3px solid #fff;
    display:grid;place-items:center;cursor:ew-resize;
    box-shadow:0 8px 24px rgba(8,39,71,.45);transition:transform .2s ease,background .2s ease}
  .ba .ba-handle:hover,.ba.drag .ba-handle{background:var(--steel);transform:translate(-50%,-50%) scale(1.08)}
  .ba .ba-handle::before{content:"‹ ›";color:#fff;font-size:1.25rem;font-weight:900;letter-spacing:-1px;line-height:1}
  .ba .ba-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .ba .ba-tag{position:absolute;bottom:14px;z-index:5;color:#eaf4ff;font-size:.7rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;background:rgba(5,26,64,.62);padding:6px 13px;border-radius:50px;
    backdrop-filter:blur(4px);pointer-events:none;transition:opacity .3s}
  .ba .ba-tag.left{left:16px}
  .ba .ba-tag.right{right:16px}
  .ba.drag .ba-tag{opacity:0}
  @media (max-width:520px){
    .ba .ba-handle{width:44px;height:44px}
    .ba .ba-tag{font-size:.62rem;padding:5px 10px}
  }

  /* ---------- Meilensteine ---------- */
  .timeline{background:var(--navy);color:#fff}
  .tl{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:20px;position:relative}
  /* Die Linie wird beim Scrollen von links nach rechts aufgezogen (--line-progress
     kommt aus site.js); die Punkte leuchten auf, sobald die Linie sie erreicht. */
  .tl::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:2px;
    background:linear-gradient(90deg,var(--steel),var(--accent),var(--steel));
    transform-origin:left center;transform:scaleX(var(--line-progress,0));
    will-change:transform}
  .tl::after{content:"";position:absolute;top:22px;left:6%;right:6%;height:2px;
    background:rgba(255,255,255,.12);z-index:0}
  .tl::before{z-index:1}
  .tl .step{text-align:center;position:relative;padding-top:56px;z-index:1}
  .tl .dot{position:absolute;top:12px;left:50%;width:22px;height:22px;border-radius:50%;
    background:rgba(255,255,255,.22);box-shadow:0 0 0 0 rgba(26,134,216,0);
    transform:translateX(-50%) scale(.6);
    transition:transform .45s cubic-bezier(.2,.8,.3,1),background .45s ease,box-shadow .45s ease}
  .tl .step.lit .dot{background:var(--accent);transform:translateX(-50%) scale(1);
    box-shadow:0 0 0 6px rgba(26,134,216,.2)}
  .tl .step .yr,.tl .step h4,.tl .step p{transition:opacity .5s ease,transform .5s ease}
  .tl .step:not(.lit) .yr,.tl .step:not(.lit) h4,.tl .step:not(.lit) p{opacity:.35;
    transform:translateY(6px)}
  .tl .step.lit .yr,.tl .step.lit h4,.tl .step.lit p{opacity:1;transform:none}
  .tl .yr{font-size:1.4rem;font-weight:800;color:var(--accent)}
  .tl h4{margin:6px 0 8px;font-size:1rem}
  .tl p{color:var(--grey);font-size:.85rem}

  /* ---------- Service / Ablauf ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .step-card{background:#fff;border:1px solid #e6ecf3;border-radius:var(--radius);padding:38px 30px;position:relative}
  .step-card .num{font-size:3.4rem;font-weight:900;color:rgba(27,58,91,.09);position:absolute;top:14px;right:22px;line-height:1}
  .step-card h3{color:var(--navy);font-size:1.3rem;margin-bottom:12px;position:relative}
  .step-card p{color:#61707f;position:relative}

  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;text-align:center}
  .stat{padding:30px;border-radius:var(--radius);background:var(--light)}
  .stat strong{display:block;font-size:2.8rem;font-weight:900;color:var(--steel);line-height:1}
  .stat span{color:#61707f;font-weight:600;margin-top:8px;display:block}

  /* ---------- Team ---------- */
  .team{background:var(--light)}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .member{background:#fff;border-radius:var(--radius);padding:30px;text-align:center;border:1px solid #e6ecf3;transition:transform .3s,box-shadow .3s}
  .member:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(13,27,42,.1)}
  .member .avatar-img{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 8px 22px rgba(8,39,71,.18)}
  .member h4{color:var(--navy);font-size:1.15rem}
  .member .role{color:var(--accent);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:6px 0 12px}
  .member a{color:#61707f;font-size:.85rem;display:block}
  .member a:hover{color:var(--steel)}

  /* ---------- Hersteller ---------- */
  .brands{text-align:center}
  .brand-marquee{margin-top:48px;overflow:hidden;position:relative;background:#fff;
    border-top:1px solid #e6ecf3;border-bottom:1px solid #e6ecf3;padding:26px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  /* Jedes Logo belegt genau ein Viertel der Breite: es sind immer vier verschiedene Logos zu sehen,
     nie ein Logo doppelt. Die zweite (ausgeblendete) Reihe sitzt exakt eine Bildbreite weiter rechts
     und sorgt dafür, dass der Durchlauf nahtlos wieder von vorne beginnt. */
  .brand-track{display:flex;width:max-content;align-items:center;
    animation:brandscroll 26s linear infinite;will-change:transform}
  .brand-marquee:hover .brand-track{animation-play-state:paused}
  /* Slot etwas breiter als ein Viertel des Bildes: ein Logo ist links vollständig draußen,
     bevor sein Zwilling rechts hereinkommt. */
  .brand-track a{flex:0 0 calc(25vw + 60px);display:flex;align-items:center;justify-content:center;
    transition:opacity .25s,transform .25s}
  .brand-track a:hover{opacity:.75;transform:translateY(-3px)}
  .brand-track img{height:56px;width:min(190px,72%);object-fit:contain;display:block}
  @keyframes brandscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(max-width:900px){.brand-track a{flex-basis:calc(33.333vw + 60px)}}
  @media(max-width:640px){.brand-track a{flex-basis:calc(50vw + 40px)}
    .brand-track img{height:44px;width:min(150px,72%)}}
  @media(prefers-reduced-motion:reduce){.brand-track{animation:none;width:100%;flex-wrap:wrap;gap:24px;
    justify-content:center}.brand-track a{flex:0 0 auto}.brand-track a[aria-hidden]{display:none}}

  /* ---------- Referenzen / Galerie ---------- */
  /* Klickbare Bild-Kacheln + Kategorie-Galerie (Bento) */
  .cards{grid-template-columns:repeat(5,1fr)}
  .card{cursor:pointer;padding:0}
  .card .cover{position:relative;aspect-ratio:16/11;overflow:hidden;background:#dde7f2}
  .card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .card:hover .cover img{transform:scale(1.1)}
  .card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,39,71,.45))}
  .card .body{padding:18px 20px 22px}
  .card .body h3{font-size:1.12rem;margin-bottom:6px}
  .card .body p{font-size:.85rem;line-height:1.45}
  .card .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--accent);font-weight:700;font-size:.82rem}
  .card.active{border-color:var(--accent);box-shadow:0 24px 50px rgba(26,134,216,.2)}
  .card.active::before{transform:scaleX(1)}
  .cat-gallery{margin-top:44px;display:none}
  .cat-gallery.open{display:block;animation:fadeup .5s ease}
  @keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
  .cat-head h3{color:var(--navy);font-size:1.5rem}
  .cat-head .count{color:#61707f;font-size:.9rem;font-weight:600}
  /* Top-Ansicht: kompaktes 2x2-Feld (alle vier auf einen Blick) */
  .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:640px;margin:0 auto}
  .cat-grid a{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
    box-shadow:0 10px 26px rgba(8,39,71,.12);background:#dde7f2}
  .cat-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .cat-grid a:hover img{transform:scale(1.06)}
  /* erweiterte Ansicht: alle Referenzen, volle Breite */
  .cat-gallery.expanded .cat-grid{grid-template-columns:repeat(4,1fr);gap:16px;max-width:none}
  /* ---------- Lightbox ---------- */
  .lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
    background:rgba(4,18,33,.94);backdrop-filter:blur(4px);padding:64px 16px 84px;
    /* Im Overlay soll nichts gezoomt oder verschoben werden – sonst wandern
       Schließen-Knopf und Bildunterschrift aus dem Sichtfeld. */
    touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
  .lb img{-webkit-touch-callout:none;touch-action:none}
  /* Doppeltipp auf eine Kachel soll das Overlay öffnen, nicht die Seite zoomen */
  .js-lightbox a,.avatar-link{touch-action:manipulation}
  .lb.open{display:flex}
  .lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);animation:lbin .25s ease}
  @keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  .lb-btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    color:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    transition:background .2s,transform .2s}
  .lb-btn:hover{background:rgba(255,255,255,.25)}
  .lb-btn:active{transform:scale(.94)}
  .lb-btn svg{width:24px;height:24px}
  .lb-close{top:16px;right:16px}
  .lb-prev{left:16px;top:50%;margin-top:-26px}
  .lb-next{right:16px;top:50%;margin-top:-26px}
  .lb-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 20px 20px;text-align:center;
    background:linear-gradient(0deg,rgba(4,18,33,.9),transparent)}
  .lb-cap{color:#fff;font-size:.92rem;display:block;max-width:70ch;margin:0 auto}
  .lb-count{color:var(--brand-light);font-size:.8rem;font-weight:700;letter-spacing:.06em}
  @media(max-width:640px){
    .lb{padding:56px 8px 92px}
    .lb-btn{width:46px;height:46px}
    .lb-prev{left:8px}.lb-next{right:8px}
    .lb-cap{font-size:.82rem}
  }
  .cat-more{display:flex;justify-content:center;margin-top:28px}
  .cat-more .btn{box-shadow:0 10px 26px rgba(26,134,216,.28)}

  /* ---------- Karriere / Bewerbung ---------- */
  .career{background:var(--light)}
  .job-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .job{background:#fff;border:1px solid #e6ecf3;border-radius:18px;padding:36px 32px;position:relative;overflow:hidden;
    transition:transform .3s,box-shadow .3s}
  .job:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(8,39,71,.12)}
  .job::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--steel),var(--accent))}
  .job .j-ico{width:56px;height:56px;border-radius:14px;background:rgba(26,134,216,.12);display:grid;place-items:center;color:var(--steel);margin-bottom:18px}
  .job .j-ico svg{width:28px;height:28px}
  .job h3{color:var(--navy);font-size:1.35rem;margin-bottom:6px}
  .job .j-sub{color:var(--steel);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
  .job ul{list-style:none;margin-bottom:22px;display:grid;gap:8px}
  .job ul li{display:flex;gap:10px;color:#546778;font-size:.94rem}
  .job ul li::before{content:"✓";color:var(--accent);font-weight:900}
  .job form{display:grid;gap:12px;border-top:1px solid #eef2f7;padding-top:20px}
  /* Formular ist auf großen Bildschirmen immer offen; erst auf dem Handy wird daraus ein Aufklapper */
  .job .apply > summary{display:none}
  .job .apply > summary::-webkit-details-marker{display:none}
  .job label{font-size:.8rem;font-weight:700;color:#3c5872}
  .job input,.job textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d8e2ee;background:#fff;color:var(--navy);font-size:.95rem;font-family:inherit;transition:border-color .2s}
  .job input:focus,.job textarea:focus{outline:none;border-color:var(--accent);background:#fff}
  .job .btn{justify-content:center;width:100%}
  .job .note{font-size:.75rem;color:#8296a8;text-align:center}
  @media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}.cat-gallery.expanded .cat-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:640px){.cat-gallery.expanded .cat-grid{grid-template-columns:repeat(2,1fr)}}

  /* ---------- Kontakt ---------- */
  .contact{background:linear-gradient(150deg,var(--navy),var(--navy-2) 55%,var(--steel));color:#fff}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  .contact-info h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:20px}
  .contact-info p.lead{color:#cfdcea;margin-bottom:34px;font-size:1.08rem}
  .info-item{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
  .info-item .ii{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--accent)}
  .info-item .ii svg{width:22px;height:22px}
  .info-item h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);margin-bottom:4px;font-weight:700}
  .info-item p,.info-item a{color:#fff;font-size:1.02rem}
  .info-item a:hover{color:var(--accent)}
  form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:36px;border-radius:18px;backdrop-filter:blur(6px)}
  form label{display:block;font-size:.82rem;font-weight:600;color:#cfdcea;margin:0 0 7px}
  form .field{margin-bottom:20px}
  form input,form textarea{
    width:100%;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);color:#fff;font-size:.98rem;font-family:inherit;transition:.2s;
  }
  form input:focus,form textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
  form input::placeholder,form textarea::placeholder{color:#7f93a8}
  form .btn{width:100%;justify-content:center;margin-top:6px}
  .form-note{font-size:.78rem;color:var(--grey);margin-top:14px;text-align:center}

  /* ---------- Karte / Route ---------- */
  .map-row{margin-top:56px;display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:stretch}
  .map-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 46px rgba(0,0,0,.3);min-height:300px}
  .map-card iframe{width:100%;height:100%;min-height:300px;border:0;display:block;filter:saturate(.9)}
  /* Datenschutz: Karte lädt erst nach ausdrücklicher Zustimmung */
  .map-consent{position:relative;min-height:300px;height:100%}
  .map-consent img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .map-consent .mc-inner{position:relative;height:100%;min-height:300px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;text-align:center;padding:32px 26px;
    background:linear-gradient(180deg,rgba(8,39,71,.35),rgba(8,39,71,.78))}
  .map-consent h4{color:#fff;font-size:1.15rem;text-shadow:0 2px 10px rgba(8,39,71,.75)}
  .map-consent p{color:#e3eefa;font-size:.88rem;max-width:44ch;line-height:1.5;
    text-shadow:0 1px 8px rgba(8,39,71,.8)}
  .map-consent p a{color:var(--accent-2);text-decoration:underline}
  .map-consent .mc-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
  .map-consent .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
  .map-consent .btn.ghost:hover{background:rgba(255,255,255,.12)}
  .map-consent .mc-declined{color:#cfdff0;font-size:.85rem;margin-top:6px}
  .route-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:32px;
    display:flex;flex-direction:column;justify-content:center;gap:14px;backdrop-filter:blur(6px)}
  .route-card h3{font-size:1.3rem;color:#fff}
  .route-card p{color:#cfdff0;font-size:.95rem}
  .route-card .btn{justify-content:center}

  /* ---------- Footer (Stil der Originalseite) ---------- */
  footer{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 45%,var(--steel) 130%);color:#eaf2fb;padding:64px 0 0}
  .foot-grid{display:grid;grid-template-columns:auto 1fr 1fr 1.2fr;gap:56px;align-items:start;margin-bottom:54px}
  .foot-cube img{width:96px;height:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
  footer h5{color:#fff;font-size:1.05rem;margin-bottom:16px;font-weight:800;letter-spacing:.01em}
  footer p,footer address{font-size:.95rem;font-style:normal;color:#dce9f6;line-height:1.8}
  footer a{transition:color .2s}
  footer a:hover{color:#fff;text-decoration:underline}
  .foot-menu a{color:#dce9f6;font-weight:600}
  .foot-menu .sep{opacity:.5;margin:0 6px}
  .foot-bottom{background:rgba(6,26,48,.55);padding:18px 0;text-align:center;font-size:.88rem;
    color:#cfe0f0;font-weight:600;display:flex;flex-wrap:wrap;gap:6px 16px;
    align-items:center;justify-content:center}
  /* Schreibweise und Farbe wie in den übrigen wowobot-Projekten (Vorlage: Siw) */
  .wowobot{color:#9db9d6;font-weight:400;font-size:.82rem;margin:0}
  .wowobot a{color:#22b8e0;font-weight:500;text-decoration:none;
    min-height:44px;display:inline-flex;align-items:center}
  .wowobot a:hover{color:#22b8e0;text-decoration:underline;text-underline-offset:3px}
  @media(max-width:960px){.job-grid{grid-template-columns:1fr}.map-row{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
  @media(max-width:640px){.foot-grid{grid-template-columns:1fr}}

  /* ---------- Responsive ---------- */
  /* Tablet quer: Abstände und Scroll-Strecke des Hero-Videos verkürzen */
  @media(max-width:1024px){
    section{padding:84px 0}
    .section-head{margin-bottom:46px}
    .video-hero{height:200vh}
  }
  /* Tablet quer: flache Bühne, daher kürzere Scroll-Strecke */
  @media(max-width:1024px) and (max-height:820px){
    .video-hero{height:170vh}
  }
  @media(max-width:960px){
    .hero-inner .hero-text{max-width:none}
    .cards,.team-grid{grid-template-columns:repeat(2,1fr)}
    .tl{grid-template-columns:repeat(2,1fr)}.tl::before{display:none}
    .steps{grid-template-columns:1fr}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  /* Tablet: Produktkarten quer, Bewerbungsformulare aufklappbar, kompaktere Karte */
  @media(max-width:900px){
    .cards{grid-template-columns:repeat(2,1fr);gap:14px}
    .card{display:grid;grid-template-columns:132px 1fr;align-items:stretch}
    .card .cover{aspect-ratio:auto;height:100%;min-height:108px}
    .card .body{padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
    .card .body h3{font-size:1.02rem;margin-bottom:4px}
    .card .body p{font-size:.82rem;line-height:1.4}
    .card .more{margin-top:8px;font-size:.78rem}
    .job .apply > summary{display:flex;align-items:center;justify-content:center;gap:8px;
      list-style:none;cursor:pointer;min-height:48px;padding:13px 22px;border-radius:50px;
      background:linear-gradient(135deg,var(--steel),var(--accent));color:#fff;font-weight:700;
      font-size:.95rem;text-align:center;box-shadow:0 10px 24px rgba(26,134,216,.28)}
    .job .apply > summary::after{content:"▾";font-size:.85rem;transition:transform .25s}
    .job .apply[open] > summary::after{transform:rotate(180deg)}
    .job .apply[open] > summary{margin-bottom:4px}
    .job form{border-top:none;background:transparent;border:none;padding:16px 0 0}
    .map-card,.map-consent,.map-consent .mc-inner,.map-card iframe{min-height:260px}
    .contact form{padding:26px 22px}
    .contact .field{margin-bottom:14px}
  }
  /* Tablet hoch */
  @media(max-width:768px){
    section{padding:66px 0}
    .section-head{margin-bottom:36px}
    .video-hero{height:175vh}
    .hero-inner{padding-bottom:40px}
    .steps{gap:18px}
    .step-card{padding:28px 24px}
    .stats{margin-top:40px}
    .job{padding:28px 24px}
    .job-grid{gap:20px}
    .contact-grid{gap:34px}
    .map-row{margin-top:36px}
    .ba{aspect-ratio:16/10}
  }
  @media(max-width:640px){
    .stats,.foot-grid{grid-template-columns:1fr}
    section{padding:52px 0}
    .wrap{padding:0 18px}
    .section-head{margin-bottom:28px}
    .section-head p{font-size:.95rem}

    /* Hero: kurze Scroll-Strecke, stabile Höhe trotz ein-/ausblendender Browserleiste */
    .video-hero{height:150vh}
    .video-stage{height:100svh}
    .hero-inner{padding-bottom:34px}
    .video-hero h1{margin:12px 0 14px}
    .video-hero p.lead{margin-bottom:22px;font-size:1rem}
    /* drei Kennzeichen nebeneinander statt in zwei umgebrochenen Reihen */
    .hero-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
    .hero-badges .b{padding-left:10px;border-left-width:2px}
    .hero-badges .b strong{font-size:1.3rem}
    .hero-badges .b span{font-size:.6rem;letter-spacing:.04em;line-height:1.2}
    .video-hero .eyebrow{font-size:.62rem;letter-spacing:.1em;padding:5px 12px}

    /* Produktkarten einspaltig quer – spart rund drei Bildschirme Scrollweg */
    .cards{grid-template-columns:1fr;gap:12px}
    .card{grid-template-columns:128px 1fr}
    .card .cover{min-height:104px}
    .card .body h3{font-size:1rem}
    .card .body p{font-size:.8rem}
    .card .more{font-size:.76rem}

    /* Team und Meilensteine zweispaltig statt untereinander */
    .team-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .member{padding:20px 12px}
    .member .avatar-img{width:66px;height:66px;margin-bottom:12px}
    .member h4{font-size:.96rem}
    .member .role{font-size:.7rem;margin-bottom:8px}
    .member a{font-size:.76rem}
    .tl{grid-template-columns:repeat(2,1fr);gap:16px}
    .tl .step{padding-top:44px}
    .tl .dot{width:18px;height:18px;top:10px}
    .tl .yr{font-size:1.2rem}

    .step-card{padding:22px 18px}
    .step-card p{font-size:.88rem}
    .steps{gap:12px}
    /* Kennzahlen nebeneinander; minmax(0,1fr) verhindert, dass lange Wörter die Spalte aufziehen */
    .stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;gap:10px}
    .stat strong{font-size:1.75rem}
    .stat span{font-size:.7rem;margin-top:4px;overflow-wrap:break-word;hyphens:auto}
    .job{padding:24px 20px}
    .job-grid{gap:16px}
    .job ul{margin-bottom:16px}
    .job .apply > summary{padding:13px 18px;font-size:.92rem}
    .job form{padding-top:14px}
    .job .j-ico{width:44px;height:44px;margin-bottom:14px}
    .job .j-ico svg{width:22px;height:22px}
    .contact-grid{gap:26px}
    .contact-info p.lead{margin-bottom:24px;font-size:1rem}
    .info-item{margin-bottom:16px;gap:12px}
    .info-item .ii{width:40px;height:40px}
    .contact form{padding:22px 18px}
    .contact .field{margin-bottom:12px}
    .map-row{margin-top:26px;gap:14px}
    .map-card,.map-consent,.map-consent .mc-inner,.map-card iframe{min-height:230px}
    .map-consent .mc-inner{padding:22px 18px;gap:10px}
    .map-consent p{font-size:.82rem}
    .route-card{padding:22px 20px}
    .brand-marquee{margin-top:28px;padding:18px 0}
    /* Footer zweispaltig: Standort und Kontakt nebeneinander */
    .foot-grid{grid-template-columns:1fr 1fr;gap:22px}
    .foot-cube{grid-column:1 / -1}
    .foot-menu{grid-column:1 / -1}
  }
  @media(max-width:380px){
    .card{grid-template-columns:104px 1fr}
    .card .body p{display:none}
  }

  /* ================= Produkt-Unterseiten ================= */
  .page-hero{position:relative;padding:150px 0 60px;background:var(--navy);overflow:hidden}
  .page-hero::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;
    background-image:var(--hero-img);opacity:.55}
  .page-hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(8,39,71,.62),rgba(8,39,71,.88))}
  .page-hero .wrap{position:relative;z-index:2}
  .page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);margin:14px 0 16px;max-width:22ch}
  .page-hero p.lead{color:#dbe8f5;font-size:clamp(1rem,1.6vw,1.15rem);max-width:62ch}
  .page-hero .hero-cta{margin-top:28px}
  .crumbs{font-size:.82rem;color:#9db9d6}
  .crumbs a{color:#bcd4ea;text-decoration:none}
  .crumbs a:hover{color:#fff;text-decoration:underline}
  .crumbs span{margin:0 7px;opacity:.6}

  .prose p{color:#546778;margin-bottom:16px;line-height:1.7}
  .prose p:last-child{margin-bottom:0}
  .prose strong{color:var(--navy)}
  .split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}

  .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .spec{background:#fff;border:1px solid #e6ecf3;border-radius:var(--radius);padding:26px 24px;
    transition:transform .3s,box-shadow .3s}
  .spec:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(8,39,71,.1)}
  .spec h3{color:var(--navy);font-size:1.08rem;margin-bottom:8px}
  .spec p{color:#61707f;font-size:.9rem;line-height:1.55}
  .tag-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
  .tag-list li{list-style:none;background:rgba(26,134,216,.1);color:#1b5f96;font-size:.83rem;
    font-weight:600;padding:7px 14px;border-radius:50px}
  .use-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin-top:6px}
  .use-list li{list-style:none;display:flex;gap:10px;color:#546778;font-size:.95rem;line-height:1.5}
  .use-list li::before{content:"✓";color:var(--accent);font-weight:900;flex:0 0 auto}

  .ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .ref-grid a{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
    box-shadow:0 10px 26px rgba(8,39,71,.12);background:#dde7f2}
  .ref-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .ref-grid a:hover img{transform:scale(1.06)}

  .cross{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .cross a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6ecf3;
    border-radius:14px;padding:12px 16px 12px 12px;text-decoration:none;transition:transform .3s,box-shadow .3s}
  .cross a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(8,39,71,.12)}
  .cross img{width:62px;height:48px;object-fit:cover;border-radius:9px;flex:0 0 auto}
  .cross span{color:var(--navy);font-weight:700;font-size:.92rem;line-height:1.3}

  .cta-band{background:linear-gradient(150deg,var(--navy),var(--navy-2) 55%,var(--steel));color:#fff;
    text-align:center}
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
  .cta-band p{color:#cfdcea;max-width:60ch;margin:0 auto 28px}
  .cta-band .hero-cta{justify-content:center}

  @media(max-width:960px){
    .split{grid-template-columns:1fr;gap:32px}
    .spec-grid{grid-template-columns:repeat(2,1fr)}
    .ref-grid{grid-template-columns:repeat(3,1fr)}
    .cross{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:640px){
    .page-hero{padding:110px 0 44px}
    .spec-grid{grid-template-columns:1fr;gap:12px}
    .spec{padding:20px 18px}
    .ref-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .use-list{grid-template-columns:1fr;gap:10px}
    .cross{grid-template-columns:1fr;gap:10px}
  }

  /* ---------- Navigation mit Produkt-Untermenü ---------- */
  .has-sub{position:relative}
  .sub-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
    font:inherit;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.85);cursor:pointer;
    transition:color .2s;text-shadow:0 1px 10px rgba(8,39,71,.55)}
  header.scrolled .sub-toggle{text-shadow:none}
  .sub-toggle:hover,.has-sub:hover .sub-toggle{color:#fff}
  header.scrolled .sub-toggle{color:#28425e}
  header.scrolled .sub-toggle:hover,header.scrolled .has-sub:hover .sub-toggle{color:var(--steel)}
  .sub-toggle svg{width:13px;height:13px;transition:transform .25s}
  .has-sub:hover .sub-toggle svg,.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
  .submenu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:262px;
    background:#fff;border:1px solid #e6ecf3;border-radius:14px;padding:8px;
    box-shadow:0 24px 50px rgba(8,39,71,.18);opacity:0;visibility:hidden;transition:.22s ease;
    margin-top:14px}
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .submenu a{display:block;padding:10px 14px;border-radius:9px;color:#28425e;font-size:.92rem;
    font-weight:600;white-space:nowrap;transition:background .18s,color .18s}
  .submenu a:hover{background:var(--light);color:var(--steel)}

  /* ---------- Navigation: Burger-Menü bis einschließlich Tablet ----------
     Ab 744px bis 1024px brachen die sieben Menüpunkte zweizeilig um und das Logo
     stieß ohne Abstand an den ersten Eintrag. Deshalb greift das Auszieh-Menü
     bis 1100px – erst darüber ist Platz für die volle Leiste. */
  @media(max-width:1100px){
    /* Der Scroll-Hinweis lag auf Tablets über den Kennzahlen – auf Touch-Geräten
       ist er ohnehin überflüssig. */
    .scroll-cue{display:none}
    .hero-inner{padding-bottom:44px}
    .menu{
      position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:340px;
      background:var(--navy-2);flex-direction:column;align-items:flex-start;
      padding:100px 34px;gap:26px;transition:right .35s ease;box-shadow:-20px 0 50px rgba(0,0,0,.4);
      overflow-y:auto;z-index:105}
    .menu.open{right:0}
    .menu > a{display:flex;align-items:center;width:100%;min-height:44px}
    .menu a.btn{width:100%;justify-content:center}
    .burger{display:flex;z-index:110;min-width:44px;min-height:44px;
      align-items:center;justify-content:center}
    .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0}
    .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

    .has-sub{width:100%}
    .sub-toggle{width:100%;justify-content:space-between;min-height:44px;color:#fff}
    header.scrolled .sub-toggle{color:#fff}
    /* Das Auszieh-Menü ist dunkel: die dunkle Schriftfarbe der weißen Kopfleiste
       würde dort verschwinden. */
    header.scrolled .menu > a{color:rgba(255,255,255,.85)}
    header.scrolled .menu > a:hover{color:#fff}
    header.scrolled .menu a.btn{color:#fff}
    header.scrolled .menu a.btn.apply{color:var(--accent-2)}
    header.scrolled .submenu a{color:rgba(255,255,255,.82)}
    .menu .has-sub .submenu,
    .menu .has-sub:hover .submenu,
    .menu .has-sub:focus-within .submenu{position:static;transform:none;opacity:1;
      background:transparent;border:0;box-shadow:none;padding:0 0 0 14px;margin-top:0;min-width:0;
      max-height:0;overflow:hidden;visibility:hidden;
      transition:max-height .3s ease,visibility 0s linear .3s}
    .menu .has-sub.open .submenu{max-height:340px;visibility:visible;padding-top:4px;
      transition:max-height .3s ease}
    .menu .has-sub .submenu::before{display:none}
    .submenu a{color:rgba(255,255,255,.82);padding:9px 0;font-size:.92rem;min-height:40px}
    .submenu a:hover{background:transparent;color:#fff}
  }


  .cat-head .cat-link{color:var(--steel);font-weight:700;font-size:.88rem;text-decoration:none;
    white-space:nowrap}
  .cat-head .cat-link:hover{text-decoration:underline}

  /* ---------- Fragen & Antworten auf den Produktseiten ---------- */
  .faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
  .faq details{background:#fff;border:1px solid #e6ecf3;border-radius:14px;overflow:hidden;
    transition:box-shadow .3s}
  .faq details[open]{box-shadow:0 16px 38px rgba(8,39,71,.1)}
  .faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 22px;position:relative;
    color:var(--navy);font-weight:700;font-size:1rem;line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
    border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
    transform:translateY(-70%) rotate(45deg);transition:transform .25s}
  .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
  .faq summary:hover{color:var(--steel)}
  .faq .a{padding:0 22px 20px;color:#546778;font-size:.95rem;line-height:1.65}
  .region{max-width:860px;margin:34px auto 0;background:rgba(26,134,216,.07);
    border:1px solid rgba(26,134,216,.18);border-radius:16px;padding:24px 26px;
    color:#546778;font-size:.95rem;line-height:1.7}
  .region strong{color:var(--navy)}
  @media(max-width:640px){
    .faq summary{padding:15px 44px 15px 16px;font-size:.94rem}
    .faq .a{padding:0 16px 16px;font-size:.9rem}
    .region{padding:20px 18px;font-size:.9rem}
  }

  /* Mitarbeiterfoto anklickbar: öffnet dasselbe Overlay wie die Referenzbilder */
  .avatar-link{display:block;width:96px;margin:0 auto 18px;border-radius:50%;cursor:zoom-in;
    position:relative;transition:transform .3s}
  .avatar-link .avatar-img{margin:0}
  .avatar-link:hover{transform:scale(1.06)}
  .avatar-link::after{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 0 rgba(26,134,216,.45);transition:box-shadow .3s}
  .avatar-link:hover::after{box-shadow:0 0 0 5px rgba(26,134,216,.3)}
  .avatar-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
  @media(max-width:640px){.avatar-link{width:66px;margin-bottom:12px}}

  /* ---------- Impressum und Datenschutz ---------- */
  .legal-hero{padding:150px 0 44px}
  .legal-hero::before{opacity:.22}
  .legal{max-width:820px;margin:0 auto}
  /* lange deutsche Komposita (z. B. „Verbraucherstreitbeilegung/Universal…") umbrechen */
  .legal h2,.legal h3,.legal h4,.legal p,.legal li{overflow-wrap:anywhere;hyphens:auto}
  .legal h2{color:var(--navy);font-size:1.35rem;margin:36px 0 12px;line-height:1.3}
  .legal h2:first-child{margin-top:0}
  .legal h3{color:var(--navy);font-size:1.05rem;margin:26px 0 8px}
  .legal h4{color:#3c5872;font-size:.98rem;margin:20px 0 6px}
  .legal p{color:#546778;line-height:1.75;margin-bottom:14px}
  .legal ul,.legal ol{margin:0 0 16px 22px;color:#546778;line-height:1.75}
  .legal li{margin-bottom:6px}
  .legal a{color:var(--steel);text-decoration:underline;text-underline-offset:2px;
    overflow-wrap:anywhere}
  .legal a:hover{color:var(--accent)}
  .legal strong{color:var(--navy)}
  @media(max-width:640px){
    .legal-hero{padding:110px 0 32px}
    .legal h2{font-size:1.18rem;margin:28px 0 10px}
    .legal p,.legal ul,.legal ol{font-size:.94rem}
  }

  /* ---------- Referenzen nach Privat und Business getrennt ---------- */
  .ref-gruppe + .ref-gruppe{margin-top:52px}
  .ref-titel{color:var(--navy);font-size:1.45rem;display:flex;align-items:baseline;
    gap:14px;flex-wrap:wrap;margin-bottom:6px}
  .ref-titel::before{content:"";width:34px;height:4px;border-radius:3px;
    background:linear-gradient(90deg,var(--steel),var(--accent));flex:0 0 auto;
    align-self:center}
  .ref-zahl{font-size:.82rem;font-weight:700;color:var(--steel);letter-spacing:.04em;
    background:rgba(26,134,216,.1);padding:4px 12px;border-radius:50px}
  .ref-unter{color:#61707f;font-size:.95rem;line-height:1.6;max-width:70ch;margin-bottom:20px}
  @media(max-width:640px){
    .ref-gruppe + .ref-gruppe{margin-top:36px}
    .ref-titel{font-size:1.15rem;gap:10px}
    .ref-titel::before{width:24px;height:3px}
    .ref-unter{font-size:.88rem;margin-bottom:14px}
  }

  /* Bleibt in der letzten Reihe eine einzelne Bauart-Karte übrig, wird sie mittig gesetzt,
     statt links angeschlagen zu stehen (bei 7 Karten der Fall). */
  .spec-grid > .spec:last-child:nth-child(3n+1){grid-column:2}
  @media(max-width:960px){
    .spec-grid > .spec:last-child:nth-child(3n+1){grid-column:auto}
    .spec-grid > .spec:last-child:nth-child(2n+1){grid-column:1 / -1;
      max-width:calc(50% - 10px);margin:0 auto}
  }
  @media(max-width:640px){
    .spec-grid > .spec:last-child:nth-child(2n+1){grid-column:auto;max-width:none;margin:0}
  }

  /* Aufgeklappte Startseiten-Galerie: Gliederung nach Gruppen (Privat / Business) */
  .cat-gallery.expanded #catGrid:has(.cat-gruppe){display:block}
  .cat-gruppe + .cat-gruppe{margin-top:44px}
  .cat-gruppe .ref-titel{font-size:1.25rem;margin-bottom:16px}
  @media(max-width:640px){
    .cat-gruppe + .cat-gruppe{margin-top:30px}
    .cat-gruppe .ref-titel{font-size:1.05rem;margin-bottom:12px}
  }

  /* Teammitglied ohne Foto: Initialen statt Platzhaltergrafik */
  .avatar-initialen{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;display:grid;
    place-items:center;font-size:1.9rem;font-weight:800;letter-spacing:.02em;color:#fff;
    background:linear-gradient(135deg,var(--steel),var(--accent));
    box-shadow:0 8px 22px rgba(8,39,71,.18);border:3px solid #fff}
  @media(max-width:640px){
    .avatar-initialen{width:66px;height:66px;font-size:1.3rem;margin-bottom:12px}
  }

  /* Rechenaufgabe im Formular */
  .field.captcha label{display:block}
  .field.captcha [data-captcha-frage],
  .job [data-captcha-frage]{font-weight:700;color:var(--accent-2)}
  .job [data-captcha-frage]{color:var(--steel)}

  /* ---------- Formulare: Honeypot & Hinweis-Popup ---------- */
  .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
  .form-hinweis{border:none;border-radius:var(--radius);padding:32px 28px;max-width:420px;width:calc(100% - 32px);
    text-align:center;color:var(--navy);box-shadow:0 30px 80px rgba(8,39,71,.35)}
  .form-hinweis::backdrop{background:rgba(8,39,71,.6)}
  .form-hinweis h3{margin:0 0 10px;font-size:1.3rem}
  .form-hinweis p{margin:0 0 20px;color:#546778;line-height:1.5}
  .form-hinweis .fh-link{display:block;margin:0 0 10px;padding:12px;border-radius:10px;background:var(--light);
    color:var(--navy);font-weight:700;text-decoration:none;word-break:break-word}
  .form-hinweis .fh-link:hover{background:#dde9f6}
  .form-hinweis .btn{margin-top:10px;justify-content:center;width:100%;border:none;cursor:pointer}