/* Schriften lokal gehostet (DSGVO: keine Verbindung zu Google-Servern noetig) */
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   BLANKO SERVICE - Mehrseiten-Site
   Minimal, clean, mit praeziser Motion (Apple-Niveau)
   ============================================================ */
:root{
  --navy:#0B2749;
  --navy-2:#123A66;
  --blue:#2C86D9;
  --blue-strong:#1E6FC0;
  --blue-soft:#EAF3FB;
  --ink:#16283C;
  --soft:#5A6B7E;
  --line:#E6ECF2;
  --bg:#FFFFFF;
  --mist:#F6F9FB;
  --ok:#2E9E6B;
  --wa:#25D366;
  --display:'Fraunces', Georgia, serif;
  --body:'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw:1120px;
  --r:14px; --r-lg:20px; --r-pill:999px; --r-btn:12px;
  /* Motion-Tokens: starke Kurven, kurze Dauern */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --ease-spring:cubic-bezier(.34,1.3,.42,1);
  --shadow:0 1px 2px rgba(11,39,73,.05), 0 8px 28px rgba(11,39,73,.07);
  --shadow-lift:0 1px 2px rgba(11,39,73,.06), 0 24px 48px -12px rgba(11,39,73,.18);
  /* Apple-Stil: weicher, mehrschichtiger Schatten fuer schwebende Bilder */
  --shadow-float:0 0 0 1px rgba(11,39,73,.05), 0 2px 6px rgba(11,39,73,.05), 0 12px 28px -10px rgba(11,39,73,.13), 0 30px 60px -24px rgba(11,39,73,.17);
}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:var(--blue); color:#fff}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.01em; color:var(--navy); margin:0; text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.35rem)}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block; height:auto}
button{font-family:var(--body); cursor:pointer; border:0; background:none; font-size:1rem}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
main:focus{outline:none}
.skip{position:fixed; top:-56px; left:16px; z-index:200; background:var(--navy); color:#fff; padding:11px 20px;
  border-radius:0 0 11px 11px; font-weight:600; transition:top .2s var(--ease-out)}
.skip:focus{top:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec.tint{background:var(--mist)}
.eyebrow{display:block; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-strong); margin-bottom:14px}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--soft); max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.sec-head{margin-bottom:clamp(34px,4.5vw,54px)}

/* ============================================================
   SEITENWECHSEL: Cross-Document View Transitions
   Header/Footer bleiben stehen, Inhalt gleitet, Bilder morphen
   ============================================================ */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.5s; animation-timing-function:var(--ease-io)}
/* Reines Opacity-Fade fuer den Seitenrumpf: kein Versatz, damit benannte Bilder nicht als eingefrorene Kanten sichtbar werden */
::view-transition-old(root){animation:vt-out .24s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .34s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
/* Fragment-Sprung (z. B. /kontakt/#anfrage) waehrend einer View Transition sofort, nicht als lange Smooth-Fahrt */
html:active-view-transition{scroll-behavior:auto}
.site-head{view-transition-name:site-head}
footer{view-transition-name:site-foot}
.mbar{view-transition-name:site-mbar}

/* ============================================================
   SCROLL-REVEAL: Blur-Kaskade, Stagger via --d (JS setzt Index)
   ============================================================ */
/* Nur verstecken, wenn JS da ist (Progressive Enhancement: ohne JS bleibt alles sichtbar).
   Keyframe statt Transition, damit Hover-transition-Shorthands auf Karten/Steps/Cases den Reveal nicht ueberschreiben. */
html.js .reveal{opacity:0}
html.js .reveal.in{opacity:1; animation:reveal-in .7s var(--ease-out) backwards; animation-delay:calc(var(--d,0)*70ms)}
@keyframes reveal-in{from{opacity:0; transform:translateY(16px); filter:blur(6px)}}

/* Parallax-Zoom auf grossen Bildern beim Hereinscrollen (natives CSS, progressiv) */
@supports (animation-timeline: view()){
  .media img,.page-media img{animation:parallax-zoom linear both; animation-timeline:view(); animation-range:entry 0% cover 42%}
  @keyframes parallax-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
  .media,.page-media{overflow:hidden}
}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important; transform:none!important; filter:none!important}
  .hero-h1 .line>span{transform:none!important; opacity:1!important}
  .faq details::details-content{transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================ BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:var(--r-btn); white-space:nowrap; position:relative;
  transition:transform .22s var(--ease-spring), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.96)}
.btn svg{width:18px; height:18px; flex:none; transition:transform .3s var(--ease-out)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(11,39,73,.15), 0 6px 18px -4px rgba(44,134,217,.45)}
.btn-primary:hover{background:var(--blue-strong); box-shadow:0 2px 4px rgba(11,39,73,.15), 0 12px 28px -6px rgba(44,134,217,.55)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue-strong)}
.btn-glass{background:rgba(255,255,255,.13); color:#fff; border:1.5px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.65)}
.btn-wa{background:var(--wa); color:#0A3D1E}
.btn-wa:hover{filter:brightness(1.06)}
.btn-sm{padding:10px 18px; font-size:.92rem}

/* ============================================================ HEADER */
.site-head{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
.site-head.scrolled{border-bottom-color:var(--line); background:rgba(255,255,255,.92)}
.head-in{max-width:var(--maxw); margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand img{height:54px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{padding:9px 13px; font-weight:500; font-size:.96rem; color:var(--ink); position:relative; transition:color .2s}
.nav-links a::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; border-radius:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease-out)}
.nav-links a:hover{color:var(--blue-strong)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--blue-strong); font-weight:600}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.head-cta{display:flex; align-items:center; gap:10px}
.head-tel{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); padding:8px 10px; transition:color .2s}
.head-tel svg{width:17px; height:17px; color:var(--blue)}
.head-tel:hover{color:var(--blue-strong)}
.burger{display:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center}
.burger span{width:20px; height:2px; background:var(--ink); position:relative; display:block; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease-out), top .3s var(--ease-out)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

.mnav{position:fixed; inset:0; z-index:79; background:#fff; padding:92px 24px 40px; transform:translateY(-100%);
  visibility:hidden; transition:transform .42s var(--ease-io), visibility 0s .42s; display:flex; flex-direction:column; gap:2px; overflow:auto}
.mnav.open{transform:none; visibility:visible; transition:transform .42s var(--ease-io)}
.mnav a{padding:14px 6px; font-size:1.15rem; font-weight:600; border-bottom:1px solid var(--line); color:var(--navy);
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out)}
.mnav.open a{opacity:1; transform:none}
.mnav.open a:nth-child(1){transition-delay:.05s}.mnav.open a:nth-child(2){transition-delay:.08s}
.mnav.open a:nth-child(3){transition-delay:.11s}.mnav.open a:nth-child(4){transition-delay:.14s}
.mnav.open a:nth-child(5){transition-delay:.17s}.mnav.open a:nth-child(6){transition-delay:.2s}
.mnav.open a:nth-child(7){transition-delay:.23s}.mnav.open a:nth-child(8){transition-delay:.26s}
.mnav.open a:nth-child(9){transition-delay:.29s}.mnav.open a:nth-child(10){transition-delay:.32s}
.mnav.open a:nth-child(n+11){transition-delay:.35s}
.mnav .sub{font-size:.98rem; font-weight:500; color:var(--soft); padding-left:18px}
.mnav .btn{margin-top:16px; border:0}

/* ============================================================ HERO (Startseite) */
.hero{position:relative; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background:var(--navy)}
.hero-bg{position:absolute; inset:0; z-index:-2}
/* 24% von oben: Bild sitzt etwas hoeher, Koepfe bleiben trotzdem auf allen Breiten im Bild */
.hero-bg video,.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 24%}
/* Sanfter Dauer-Zoom (Ken Burns): gibt dem Foto die Lebendigkeit des frueheren Videos */
@media (prefers-reduced-motion: no-preference){
  .hero-bg img{animation:hero-kenburns 18s ease-in-out infinite alternate}
  @keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
}
/* Nur leichte Abdunklung: deutlich dezenter als frueher, unten etwas mehr fuer den Textblock */
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,19,33,.33) 0%, rgba(6,19,33,.19) 30%, rgba(6,19,33,.31) 55%, rgba(5,16,29,.60) 100%)}
.hero .wrap{max-width:1380px} /* breiter als der Standard-Wrap: rueckt den Textblock weiter nach links */
.hero-in{position:relative; width:100%; padding:120px 24px clamp(26px,3.5vh,48px); color:#fff}
.hero-eyebrow{display:block; margin-bottom:10px; font-size:.9rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#EAF3FB;
  text-shadow:0 1px 2px rgba(6,19,33,.65), 0 1px 14px rgba(6,19,33,.7)}
/* Blockige Anordnung: enge Zeilen, knappe Abstaende, schmale Textspalte.
   Knackiger Doppel-Schatten (kein breiter Weichzeichner-Halo, der die Schrift truebt). */
.hero h1{color:#fff; max-width:19ch; margin-bottom:12px; line-height:1.06;
  text-shadow:0 1px 2px rgba(6,19,33,.6), 0 2px 5px rgba(6,19,33,.4)}
/* Keynote-Entrance: Zeilen steigen aus Masken auf */
.hero-h1 .line{display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em}
.hero-h1 .line>span{display:inline-block; transform:translateY(120%); opacity:.6; animation:rise .95s var(--ease-out) forwards}
.hero-h1 .line:nth-child(2)>span{animation-delay:.14s}
@keyframes rise{to{transform:none; opacity:1}}
/* Blanko-Blau, klar und leuchtend. text-shadow:none, damit der Halo der h1 die Verlaufszeile nicht truebt;
   nur ein knapper 1px-drop-shadow fuer die Kante. */
.grad{background:linear-gradient(94deg, #4EA2E8 0%, #2C86D9 50%, #1E6FC0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:drop-shadow(0 1px 1px rgba(6,19,33,.55))}
.hero .lead{color:rgba(238,245,252,.96); max-width:44ch; margin-bottom:22px;
  text-shadow:0 1px 2px rgba(6,19,33,.6), 0 1px 12px rgba(6,19,33,.55)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px}
.hero-points{display:flex; flex-wrap:wrap; gap:10px 26px}
.hero-points span{display:inline-flex; align-items:center; gap:8px;
  color:rgba(238,245,252,.96); font-size:.92rem; font-weight:500;
  text-shadow:0 1px 2px rgba(6,19,33,.6), 0 1px 10px rgba(6,19,33,.55)}
.hero-points .pt-ic{width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center; color:#8FCBFF}
.hero-points .pt-ic svg{width:16px; height:16px}

/* Scroll-Uebergang Hero -> Leistungen: Hero parkt sanft, Video zoomt (nur Chrome/Edge, sonst statisch) */
@supports (animation-timeline: scroll()){
  .hero-in{animation:hero-exit linear both; animation-timeline:scroll(root); animation-range:0 82vh}
  @keyframes hero-exit{55%{opacity:1} to{opacity:.15; transform:translateY(-34px)}}
  .hero-bg{animation:hero-zoom linear both; animation-timeline:scroll(root); animation-range:0 82vh}
  @keyframes hero-zoom{to{transform:scale(1.14)}}
}

/* Animierter Hintergrund im Leistungsbereich: langsam driftende, dezente Blau-Schleier */
.svc-section{position:relative; overflow:hidden; background:linear-gradient(180deg,#FAFCFE 0%,#E9F1F9 100%)}
.svc-section::before{content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px 440px at 18% 12%, rgba(44,134,217,.16), transparent 60%),
    radial-gradient(560px 520px at 88% 28%, rgba(30,111,192,.14), transparent 60%),
    radial-gradient(520px 420px at 62% 96%, rgba(59,155,234,.12), transparent 58%);
  animation:svc-drift 22s ease-in-out infinite alternate}
.svc-section>*{position:relative; z-index:1}
@keyframes svc-drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(0,-34px,0) scale(1.06)}}

/* Unterseiten-Hero */
.page-hero{padding:clamp(46px,6vw,72px) 0 0}
.crumbs{font-size:.85rem; color:var(--soft); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--blue-strong)}
.crumbs svg{width:13px; height:13px; opacity:.6}
.page-hero .lead{margin-top:14px}
.trust-line{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:18px 0 0; font-size:.9rem; font-weight:600; color:var(--soft)}
.trust-line svg{width:16px; height:16px; color:var(--ok); flex:none; margin-right:-4px}
.page-hero .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.page-media{margin-top:clamp(30px,4.5vw,48px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-float)}
.page-media img{width:100%; aspect-ratio:16/8; object-fit:cover}
/* Hochformat-Motive brauchen mehr Hoehe, damit Koepfe nicht angeschnitten werden */
.page-media.pm-32 img{aspect-ratio:3/2}

/* ============================================================ KARTEN / GRIDS */
/* Flex statt Grid: letzte Reihe zentriert sich, 7+1 Kacheln wirken symmetrisch */
.svc-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px}
.svc-grid > *{flex:1 1 300px; max-width:345px}
/* CTA-Kachel (achte Kachel): eigener lebendiger Visual-Bereich statt flacher Box */
.svc-card.svc-cta{background:linear-gradient(155deg,#0B2749 0%,#123A66 55%,#1E6FC0 125%); border-color:transparent; color:#fff}
.svc-cta .cta-visual{position:relative; aspect-ratio:3/2; overflow:hidden; display:flex; align-items:center; justify-content:center}
.svc-cta .cta-visual::before{content:""; position:absolute; inset:-30%; pointer-events:none;
  background:
    radial-gradient(220px 170px at 28% 30%, rgba(95,173,242,.5), transparent 62%),
    radial-gradient(200px 200px at 82% 74%, rgba(44,134,217,.42), transparent 60%),
    radial-gradient(160px 160px at 60% 110%, rgba(143,203,255,.3), transparent 60%);
  animation:svc-drift 15s ease-in-out infinite alternate}
.svc-cta .cta-ic-big{position:relative; z-index:1; width:74px; height:74px; border-radius:20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  animation:cta-float 4.5s var(--ease-io) infinite}
.svc-cta .cta-ic-big svg{width:34px; height:34px}
@keyframes cta-float{50%{transform:translateY(-9px)}}
.svc-card.svc-cta .pad{gap:8px}
.svc-card.svc-cta h3{color:#fff}
.svc-card.svc-cta p{color:rgba(226,238,250,.85)}
.svc-card.svc-cta .more{color:#9FD0FF; margin-top:auto}
.svc-card.svc-cta .more svg{color:#9FD0FF}
.svc-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 1px 2px rgba(11,39,73,.05), 0 12px 26px -18px rgba(11,39,73,.28);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out)}
/* Border-Beam: ein Funke laeuft bei Hover wie ein Ladebalken um die Kante */
@property --beam{syntax:'<angle>'; initial-value:0deg; inherits:false}
.svc-card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:2.6px; z-index:3; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--beam),
    transparent 0deg 250deg,
    rgba(44,134,217,.4) 288deg,
    #6FB7F5 322deg,
    #CFE9FF 340deg,
    #FFFFFF 350deg,
    #8FCBFF 358deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(120,195,255,.9)) drop-shadow(0 0 2px rgba(255,255,255,.8));
  transition:opacity .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .svc-card:hover::before{opacity:1; animation:beam 1.4s linear infinite}
}
@keyframes beam{to{--beam:360deg}}
.svc-card img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .8s var(--ease-out)}
.svc-card .pad{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.svc-card h3{font-size:1.15rem}
.svc-card p{font-size:.93rem; color:var(--soft); margin:0; flex:1}
.svc-card .more{font-weight:600; font-size:.92rem; color:var(--blue-strong); display:inline-flex; align-items:center; gap:6px; margin-top:6px}
.svc-card .more svg{width:15px; height:15px; transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .svc-card:hover{transform:translateY(-6px); border-color:rgba(44,134,217,.25); box-shadow:var(--shadow-lift)}
  .svc-card:hover img{transform:scale(1.05)}
  .svc-card:hover .more svg{transform:translateX(4px)}
}
.svc-card:active{transform:translateY(-2px) scale(.995)}

/* ---- Leistungs-Auswahl mobil: Picker-Box, Scroll-Indikator, Overlay (Desktop: aus) ---- */
.svc-picker,.svc-rail{display:none}
.svc-picker{width:100%; align-items:center; gap:13px; text-align:left; margin-bottom:16px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow-float)}
.svc-picker:active{transform:scale(.985)}
.svc-picker .sp-ic{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--blue-soft); color:var(--blue-strong)}
.svc-picker .sp-ic svg{width:19px; height:19px}
.svc-picker .sp-txt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.svc-picker .sp-txt b{font-size:.98rem; font-weight:600; color:var(--navy)}
.svc-picker .sp-txt small{font-size:.8rem; color:var(--soft)}
.svc-picker .sp-chev{color:var(--soft); display:flex}
.svc-picker .sp-chev svg{width:18px; height:18px}

.svc-rail{align-items:center; justify-content:space-between; gap:14px; margin-top:2px}
.svc-dots{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.svc-dots i{width:7px; height:7px; border-radius:50%; background:rgba(11,39,73,.2); transition:all .3s var(--ease-out)}
.svc-dots i.on{width:20px; border-radius:4px; background:var(--blue-strong)}
.svc-hint{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--soft); white-space:nowrap}
.svc-hint svg{width:15px; height:15px; animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){ .svc-hint svg{animation:none} }

.svc-modal[hidden]{display:none}
.svc-modal{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end;
  background:rgba(6,19,33,.55); backdrop-filter:blur(3px); animation:sm-fade .2s var(--ease-out)}
@keyframes sm-fade{from{opacity:0}to{opacity:1}}
.sm-card{width:100%; max-height:86vh; display:flex; flex-direction:column; background:#fff;
  border-radius:20px 20px 0 0; animation:sm-up .28s var(--ease-out)}
@keyframes sm-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .svc-modal,.sm-card{animation:none} }
.sm-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none;
  padding:18px 18px 14px; border-bottom:1px solid var(--line)}
.sm-head h3{font-size:1.15rem}
.sm-x{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:var(--mist); color:var(--soft)}
.sm-x svg{width:17px; height:17px}
.sm-list{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 10px 14px}
.sm-list a{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:12px; text-decoration:none}
.sm-list a:active{background:var(--mist)}
.sm-list img{width:64px; height:48px; flex:none; border-radius:9px; object-fit:cover}
.sm-fi{width:64px; height:48px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--blue-soft); color:var(--blue-strong)}
.sm-fi svg{width:20px; height:20px}
.sm-t{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.sm-t b{font-size:.97rem; font-weight:600; color:var(--navy)}
.sm-t small{font-size:.81rem; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sm-chev{color:var(--soft); display:flex; flex:none}
.sm-chev svg{width:17px; height:17px}

.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-float)}
.media img{width:100%; height:auto}

/* Bild-Akzente auf den Leistungsseiten: ein Foto je Sektion, weich in die Seite uebergehend */
.detail-two,.steps-two{align-items:center}
.detail-media,.sec-accent{margin:0; overflow:hidden}
.detail-media img,.sec-accent img{width:100%; display:block; object-fit:cover;
  -webkit-mask-image:radial-gradient(122% 116% at 50% 45%, #000 72%, transparent 100%);
          mask-image:radial-gradient(122% 116% at 50% 45%, #000 72%, transparent 100%)}
.detail-media img{aspect-ratio:4/5}
.checks.checks-solo{grid-template-columns:1fr}
.steps.steps-col{grid-template-columns:1fr}
/* Typische Einsaetze: Karten links, ein dezentes Foto rechts */
.cases-layout{display:grid; grid-template-columns:1fr clamp(230px,25vw,330px); gap:clamp(24px,3.4vw,48px); align-items:center}
.cases-main{min-width:0}
.sec-accent img{aspect-ratio:3/4}

.points{display:grid; gap:4px}
.point{display:flex; gap:14px; padding:14px 10px; margin:0 -10px; border-bottom:1px solid var(--line); border-radius:12px;
  transition:background .3s, transform .3s var(--ease-out)}
.point:last-child{border-bottom:0}
@media (hover:hover){ .point:hover{background:var(--mist); transform:translateX(4px)} }
.point .ic{width:38px; height:38px; flex:none; border-radius:10px; background:var(--blue-soft); color:var(--blue-strong);
  display:flex; align-items:center; justify-content:center}
.point .ic svg{width:19px; height:19px}
.point h4{font-family:var(--body); font-weight:700; font-size:1rem; color:var(--ink); margin:0 0 3px}
.point p{font-size:.93rem; color:var(--soft); margin:0}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px;
  transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s var(--ease-out)}
@media (hover:hover){ .step:hover{transform:translateY(-4px); border-color:rgba(44,134,217,.3); box-shadow:var(--shadow)} }
.step::before{counter-increment:step; content:counter(step); width:30px; height:30px; border-radius:50%;
  background:var(--blue-soft); color:var(--blue-strong); font-family:var(--body); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.step h4{font-family:var(--body); font-weight:700; font-size:1.02rem; color:var(--ink); margin:0 0 6px}
.step p{font-size:.92rem; color:var(--soft); margin:0}
/* Ablauf als Verlauf: die nummerierten Schritte durch eine feine Linie verbinden */
.steps.flow .step{position:relative}
.steps.flow .step:not(:last-child)::after{content:""; position:absolute; top:39px; right:-16px; width:16px; height:2px;
  background:linear-gradient(90deg, rgba(44,134,217,.55), rgba(44,134,217,.18)); z-index:2}

/* Leistungs-Checkliste */
.checks{display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin:0; padding:0; list-style:none}
.checks li{display:flex; gap:11px; align-items:flex-start; padding:12px 10px; border-radius:12px; font-size:.97rem;
  transition:background .3s, transform .3s var(--ease-out)}
@media (hover:hover){ .checks li:hover{background:var(--mist); transform:translateX(4px)} }
.checks svg{width:18px; height:18px; flex:none; color:var(--blue-strong); margin-top:3px}
.checks b{display:block; color:var(--ink)}
.checks li>span span{color:var(--soft); font-size:.92rem}

/* Fälle */
.cases{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.case{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
  transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s var(--ease-out)}
@media (hover:hover){ .case:hover{transform:translateY(-3px); border-color:rgba(44,134,217,.25); box-shadow:var(--shadow)} }
.case h4{font-family:var(--body); font-weight:700; font-size:1rem; margin:0 0 7px; color:var(--ink)}
.case p{font-size:.92rem; color:var(--soft); margin:0}

/* ============================================================ UEBER UNS */
.evo{display:inline-flex; align-items:center; gap:12px; margin-bottom:24px; padding:9px 16px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--mist); font-size:.9rem; font-weight:600}
.evo .old{color:var(--soft)}
.evo .arw{display:flex; color:var(--blue-strong)}
.evo .arw svg{width:16px; height:16px}
.evo .new{color:var(--navy)}
.about-story{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,60px); align-items:center}
.about-story .media img{aspect-ratio:4/3; object-fit:cover; object-position:50% 45%}
.about-lead{font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--ink); font-weight:500; line-height:1.55; margin-bottom:18px}
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.vcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s var(--ease-out)}
@media (hover:hover){ .vcard:hover{transform:translateY(-4px); border-color:rgba(44,134,217,.3); box-shadow:var(--shadow)} }
.vcard .ic{width:46px; height:46px; border-radius:12px; background:var(--blue-soft); color:var(--blue-strong);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.vcard .ic svg{width:23px; height:23px}
.vcard h4{font-family:var(--display); font-weight:600; font-size:1.15rem; margin:0 0 7px; color:var(--navy)}
.vcard p{font-size:.94rem; color:var(--soft); margin:0}
.about-svc{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.about-svc a{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem; color:var(--navy); background:#fff; transition:border-color .2s, background .2s, transform .18s var(--ease-out)}
.about-svc a:hover{border-color:var(--blue); background:var(--blue-soft); color:var(--blue-strong); transform:translateY(-1px)}
.about-svc a svg{width:15px; height:15px; color:var(--blue-strong)}

/* ============================================================ KARRIERE: Job-Bloecke */
.jobs{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.job{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 24px;
  transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s var(--ease-out)}
@media (hover:hover){ .job:hover{transform:translateY(-4px); border-color:rgba(44,134,217,.3); box-shadow:var(--shadow)} }
.job-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.job-ic{width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--blue-soft); color:var(--blue-strong)}
.job-ic svg{width:22px; height:22px}
.job-tag{font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); background:var(--mist); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-pill)}
.job h3{font-size:1.18rem; margin-bottom:8px}
.job p{font-size:.95rem; color:var(--soft); margin:0 0 20px; flex:1}
.job-act{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.job-act .btn{align-self:flex-start}
.job-wa{display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; color:var(--soft); text-decoration:none}
.job-wa svg{width:17px; height:17px; color:var(--wa)}
.job-wa:hover{color:var(--blue-strong)}
.btn-rect{border-radius:10px}

/* ============================================================ SERVICE FINDER */
.finder{max-width:680px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:clamp(24px,3.4vw,38px); min-height:300px; display:flex; flex-direction:column; justify-content:center}
.finder-prog{display:flex; gap:6px; margin-bottom:24px}
.finder-prog i{height:4px; flex:1; border-radius:2px; background:var(--line); transition:background .35s var(--ease-out)}
.finder-prog i.on{background:var(--blue)}
.finder-back{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--soft); margin-bottom:14px; transition:color .2s}
.finder-back:hover{color:var(--blue-strong)}
.finder-back svg{width:15px; height:15px}
.finder-q{font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--navy); margin:0 0 20px}
.finder-opts{display:flex; flex-direction:column; gap:10px}
.finder-opt{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border:1.5px solid var(--line); border-radius:12px;
  font-weight:600; font-size:1rem; color:var(--navy); background:#fff; text-align:left; transition:border-color .2s, background .2s, transform .16s var(--ease-out)}
.finder-opt:hover{border-color:var(--blue); background:var(--blue-soft)}
.finder-opt:active{transform:scale(.99)}
.finder-opt svg{width:18px; height:18px; flex:none; color:var(--blue-strong); opacity:.7}
.finder-step{animation:finder-in .4s var(--ease-out)}
@keyframes finder-in{from{opacity:0; transform:translateY(10px)}}
.finder-result{text-align:center; animation:finder-in .45s var(--ease-out)}
.fr-badge{display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-strong); margin-bottom:10px}
.finder-result h3{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:10px}
.finder-result>p{color:var(--soft); max-width:46ch; margin:0 auto 22px}
.fr-cta{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.finder-restart{display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-size:.9rem; font-weight:600; color:var(--soft); transition:color .2s}
.finder-restart:hover{color:var(--blue-strong)}
.finder-restart svg{width:15px; height:15px}
html.js .finder-opt.reveal,html.js .finder-result.reveal{opacity:1}

/* ============================================================ FAQ: animierte Hoehe (progressiv) */
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px; cursor:pointer;
  font-weight:600; font-size:1.02rem; color:var(--navy); list-style:none; transition:color .2s}
.faq summary:hover{color:var(--blue-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+" / ""; font-family:var(--body); font-size:1.35rem; font-weight:400; color:var(--blue-strong); flex:none;
  transition:transform .35s var(--ease-io)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details::details-content{height:0; overflow:clip;
  transition:height .4s var(--ease-io), content-visibility .4s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq details p{color:var(--soft); font-size:.96rem; margin:0 0 18px; max-width:64ch}

/* ============================================================ CTA-BLOCK */
.cta-block{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(34px,5vw,56px); color:#fff;
  background:linear-gradient(135deg, #0B2749 0%, #123A66 58%, #17497F 100%);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px}
.cta-block::after{content:""; position:absolute; inset:-30%; pointer-events:none;
  background:radial-gradient(640px 320px at 82% 8%, rgba(95,173,242,.28), transparent 62%)}
.cta-block>*{position:relative; z-index:1}
.cta-block h2{color:#fff; font-size:clamp(1.5rem,2.8vw,2rem); max-width:22ch}
.cta-block p{color:rgba(230,240,250,.85); margin:8px 0 0; font-size:.98rem; max-width:48ch}
.cta-block .row{display:flex; flex-wrap:wrap; gap:12px}
/* Kompakter Mid-Page-CTA (hell, floatend) fuer die Leistungsseiten */
.cta-inline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px;
  background:linear-gradient(135deg,#F4F8FC 0%,#E9F1F9 100%); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px) clamp(24px,3.5vw,38px); box-shadow:var(--shadow-float)}
.cta-inline h3{margin:0 0 5px; font-size:clamp(1.15rem,2vw,1.35rem); color:var(--navy)}
.cta-inline p{margin:0; color:var(--soft); font-size:.96rem; max-width:46ch}
.cta-inline-act{display:flex; flex-wrap:wrap; gap:12px}

/* ============================================================ KONTAKT */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px)}
.card.dark{background:var(--navy); border-color:var(--navy); color:#E8F0F9}
.card.dark h3{color:#fff}
.c-method{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); transition:transform .3s var(--ease-out)}
.c-method:last-of-type{border-bottom:0}
@media (hover:hover){ .c-method:hover{transform:translateX(4px)} }
.c-method .ic{width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1)}
.c-method .ic svg{width:19px; height:19px; color:#8FCBFF}
.c-method .t{font-weight:600; color:#fff; transition:color .2s}
.c-method .s{font-size:.83rem; color:rgba(210,226,242,.75)}
.c-method:hover .t{color:#8FCBFF}
.hours{margin-top:20px; border-top:1px solid rgba(255,255,255,.14); padding-top:14px; font-size:.92rem}
.hours .hr{display:flex; justify-content:space-between; padding:5px 0; color:rgba(222,234,246,.88)}

.field{margin-bottom:14px}
.field label{display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px;
  font-family:var(--body); font-size:1rem; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .25s var(--ease-out)}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); outline:3px solid var(--blue); outline-offset:2px}
.form-note{font-size:.8rem; color:var(--soft); margin-top:12px}
.form-msg{display:none; margin-top:14px; font-size:.92rem; font-weight:600; color:var(--ok)}
.form-msg a{color:var(--blue-strong); font-weight:700}
.finder-note{background:var(--blue-soft); border:1px solid rgba(44,134,217,.22); border-radius:12px; padding:13px 15px; margin-bottom:20px; font-size:.9rem; color:var(--ink); line-height:1.5}
.finder-note strong{display:block; margin-bottom:8px; color:var(--blue-strong); font-size:.86rem}
.fn-chip{display:inline-block; background:#fff; border:1px solid rgba(44,134,217,.25); color:var(--blue-strong); font-weight:600; font-size:.84rem; padding:3px 10px; border-radius:var(--r-pill); margin:0 4px 4px 0}
.fn-hint{display:block; margin-top:8px; font-size:.8rem; color:var(--soft)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ft-form{margin:0}
.form-msg a{color:var(--blue-strong); text-decoration:underline}

/* ============================================================ SERVICEGEBIET */
.check-row{display:flex; gap:10px}
.check-row input{flex:1; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px; font-family:var(--body); font-size:1rem;
  transition:border-color .2s}
.check-row input:focus{border-color:var(--blue); outline:3px solid var(--blue); outline-offset:2px}
.check-out{margin-top:14px; padding:14px 16px; border-radius:var(--r); font-size:.95rem; font-weight:500; display:none; align-items:center; gap:11px; flex-wrap:wrap}
.check-out.yes{display:flex; background:#EAF7F0; color:#1C6B47; animation:pop-in .45s var(--ease-spring)}
.check-out.maybe{display:flex; background:var(--blue-soft); color:var(--blue-strong); animation:pop-in .45s var(--ease-spring)}
@keyframes pop-in{from{opacity:0; transform:scale(.96) translateY(4px)}}
.check-out svg{width:18px; height:18px; flex:none}
.check-cta{display:flex; gap:8px; flex-wrap:wrap; width:100%; margin-top:4px}
.orte{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.orte span{padding:7px 14px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.86rem; color:var(--soft); background:#fff;
  transition:border-color .25s, color .25s, transform .25s var(--ease-out)}
@media (hover:hover){ .orte span:hover{border-color:var(--blue); color:var(--blue-strong); transform:translateY(-1px)} }
.map-card{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:16/11; background:var(--mist)}
.map-card iframe{width:100%; height:100%; border:0}
.map-consent{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; background:var(--mist)}
.map-consent p{font-size:.9rem; color:var(--soft); max-width:36ch; margin:0}

/* ============================================================ FOOTER */
footer{background:var(--navy); color:#B9CCE0; margin-top:clamp(64px,8vw,110px)}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,6vw,72px) 24px 0}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px}
.foot-brand img{height:58px; width:auto; margin-bottom:16px}
.foot-brand p{font-size:.92rem; color:#9DB4CB; max-width:34ch}
.foot-col h5{font-family:var(--body); color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px}
.foot-col a{display:block; padding:5px 0; font-size:.94rem; color:#B9CCE0; transition:color .2s, transform .25s var(--ease-out)}
.foot-col a:hover{color:#fff; transform:translateX(3px)}
.foot-col .adr{font-size:.94rem; line-height:1.7; color:#B9CCE0}
.foot-col .adr a{display:inline}
.foot-bar{border-top:1px solid rgba(255,255,255,.12); padding:18px 0 22px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.85rem; color:#8FA6BD}
.foot-bar a:hover{color:#fff}

/* Rechtstexte */
.prose{max-width:760px}
.prose h2{font-size:1.5rem; margin:36px 0 12px}
.prose h3{font-size:1.15rem; margin:26px 0 10px}
.prose p,.prose li{color:var(--soft); font-size:.97rem}
.prose ul{padding-left:22px; margin:0 0 1rem}
.prose a{color:var(--blue-strong); text-decoration:underline}

/* ============================================================ MOBILE BAR + COOKIE */
.mbar{position:fixed; bottom:0; left:0; right:0; z-index:70; display:none; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(11,39,73,.08); padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.mbar-in{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mbar a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:11px; font-size:.78rem; font-weight:600;
  transition:transform .18s var(--ease-spring)}
.mbar a:active{transform:scale(.94)}
.mbar svg{width:20px; height:20px}
.mbar .call{background:var(--navy); color:#fff}
.mbar .wa{background:var(--wa); color:#0A3D1E}
.mbar .req{background:var(--blue-soft); color:var(--blue-strong)}

/* ---------- Floating Hilfe / Schnellkontakt ---------- */
.hilfe{position:fixed; right:24px; bottom:24px; z-index:88; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.hilfe-panel{display:flex; flex-direction:column; gap:8px; width:250px; padding:16px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lift);
  transform-origin:bottom right; transform:translateY(10px) scale(.94); opacity:0; visibility:hidden;
  transition:transform .34s var(--ease-spring), opacity .28s var(--ease-out), visibility 0s .34s}
.hilfe.open .hilfe-panel{transform:none; opacity:1; visibility:visible; transition:transform .34s var(--ease-spring), opacity .28s var(--ease-out)}
.hilfe-panel .ph{font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--navy); margin:0 2px 4px}
.hilfe-panel .ps{font-size:.83rem; color:var(--soft); margin:0 2px 10px; line-height:1.5}
.hilfe-act{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
  font-weight:600; font-size:.94rem; color:var(--navy); background:#fff; text-align:left; transition:background .2s, border-color .2s, transform .18s var(--ease-out)}
.hilfe-act:hover{background:var(--mist); border-color:rgba(44,134,217,.3)}
.hilfe-act:active{transform:scale(.97)}
.hilfe-act .hi{width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--blue-soft); color:var(--blue-strong)}
.hilfe-act.wa .hi{background:rgba(37,211,102,.14); color:#128C3E}
.hilfe-act .hi svg{width:18px; height:18px}
.hilfe-act small{display:block; font-weight:500; color:var(--soft); font-size:.78rem}
.hilfe-btn{width:60px; height:60px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(11,39,73,.2), 0 16px 34px -8px rgba(11,39,73,.4); transition:transform .24s var(--ease-spring), background .2s; align-self:flex-end}
.hilfe-btn:hover{transform:scale(1.06); background:var(--navy-2)}
.hilfe-btn:active{transform:scale(.95)}
.hilfe-btn svg{width:26px; height:26px}
.hilfe-btn .lbl{position:absolute; right:72px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:600; padding:7px 12px; border-radius:8px; white-space:nowrap;
  opacity:0; transform:translateX(6px); transition:opacity .2s, transform .2s var(--ease-out); pointer-events:none}
.hilfe-btn:hover .lbl{opacity:1; transform:none}

.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:460px; margin:0 auto; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lift); padding:18px 20px;
  transform:translateY(140%); visibility:hidden; transition:transform .5s var(--ease-io), visibility 0s .5s}
.cookie.show{transform:none; visibility:visible; transition:transform .5s var(--ease-io)}
.cookie p{font-size:.86rem; color:var(--soft); margin:0 0 12px}
.cookie .row{display:flex; gap:10px}

/* ============================================================ RESPONSIVE */
@media(max-width:960px){
  .nav-links{display:none}
  .head-tel span{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid.rel{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps.flow .step::after{display:none}
  .cases{grid-template-columns:1fr}
  .cases-layout{grid-template-columns:1fr; gap:26px}
  .cases-main{order:-1}
  .sec-accent{max-width:360px; margin:0 auto}
  .sec-accent img{aspect-ratio:4/5}
  .jobs{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr 1fr}
  .about-story{grid-template-columns:1fr; gap:30px}
  .about-story .media img{aspect-ratio:4/3}
  .two,.contact-grid{grid-template-columns:1fr; gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:16px; padding-bottom:72px}
  /* Karten als Scroll-Snap-Rail statt Endlos-Stapel. 78% = Nachbarkarte lugt klar rein.
     justify-content:start ist Pflicht: das geerbte "center" zentriert den Ueberlauf und
     schiebt die ersten Karten in den per Scroll unerreichbaren Bereich links. */
  .svc-grid{display:grid; grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none!important;
    justify-content:start; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px; padding:4px 24px 14px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .svc-grid::-webkit-scrollbar{display:none}
  .svc-card{scroll-snap-align:center}
  /* Picker-Box und Scroll-Indikator nur hier einblenden */
  .svc-picker{display:flex}
  .svc-rail{display:flex}
  .steps{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .mbar{display:block}
  .hilfe{display:none}
  .cookie{bottom:84px}
  .head-cta .btn{display:none}
  .brand img{height:42px}
  /* Mobile-Hero: Bild-Band, Eyebrow + Headline liegen auf dem Bild, Rest darunter auf Navy.
     82vw statt 75vw = minimal naeher dran, beschneidet nur ~4% je Seite (beide Personen bleiben drauf). */
  .hero{display:block; min-height:0; position:relative; background:var(--navy)}
  .hero-bg{position:absolute; top:0; left:0; right:0; bottom:auto; height:94vw; z-index:0; animation:none; overflow:hidden}
  /* 40%: rueckt den Ausschnitt nach links, damit Wagen-Logo und beide Personen im Bild bleiben (16:9-Bild) */
  .hero-bg video,.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:40% 50%; display:block}
  /* Verlauf am Bildfuss: blendet das Bild nahtlos ins Navy und haelt Eyebrow + Headline lesbar.
     Alpha 1 exakt an der Bildkante -> dort kann keine Kante mehr sichtbar sein.
     Die Kurve bleibt ueber der Textzone (obere ~185px, die freie Bildflaeche) bewusst heller
     als zuvor und zieht erst darunter an, wo das Foto ohnehin hinter der Schrift liegt.
     Das Foto verliert oben also nichts, sondern gewinnt sogar. */
  /* Untere Zone frueher voll deckend: der helle Transporter darf nicht durch den Verlauf schimmern */
  .hero-bg::after{content:""; position:absolute; inset:auto 0 0 0; height:62%; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(11,39,73,0) 0%, rgba(11,39,73,.10) 18%, rgba(11,39,73,.30) 32%,
      rgba(11,39,73,.55) 46%, rgba(11,39,73,.78) 60%, rgba(11,39,73,.93) 72%,
      rgba(11,39,73,.99) 82%, rgba(11,39,73,1) 90%, rgba(11,39,73,1) 100%)}
  .hero-scrim{display:none}
  /* Abdeckleiste ueber der Bildunterkante: die gezoomte Bildebene rundet anders als der Verlauf,
     dadurch kann eine 1px helle Linie durchblitzen. Navy auf Navy, unsichtbar. */
  .hero::after{content:""; position:absolute; left:0; right:0; top:calc(94vw - 2px); height:4px;
    background:var(--navy); z-index:1; pointer-events:none}
  .hero-in{position:relative; z-index:1; padding:0 22px 34px; animation:none; opacity:1; transform:none}
  /* Textblock sitzt am unteren Bildrand: min-height = Bildhoehe, Inhalt nach unten gedrueckt */
  .hero-top{min-height:94vw; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:18px}
  .hero-btm{padding-top:20px}
  .hero-eyebrow{margin-bottom:9px; font-size:.66rem; letter-spacing:.13em}
  .hero h1{font-size:1.68rem; margin-bottom:0; max-width:none}
  .hero .lead{margin-bottom:22px}
  .hero-cta{margin-bottom:22px}
  .hero-cta .btn{flex:1 1 100%; justify-content:center}
  .hero-points{gap:12px 20px}
  .cta-block{display:block}
  .cta-block .row{margin-top:20px}
}