/* ============================================
   SchuhCo Layout-Bibliothek · Phase 3
   Brand-CI: Mittelblau + Lime + Sky · Manrope · 14px Radius · dezenter Schatten
   ============================================ */
:root{
  --navy:#1F5A99; --navy-dark:#0F3D72; --navy-deep:#0A2952;
  --lime:#C5DC4D; --lime-dark:#A8C13C;
  --sky:#A4C5DB; --sky-bright:#3FA9D8; --sky-soft:#DCE8F1;
  --off-white:#F4F7FA; --paper:#FFFFFF;
  --text:#2A2F36; --muted:#5A6470;
  --border:#D6DCE3; --border-hover:#B4BCC8;
  --border-input:#7D8B9C; /* Eingabefeld-Rahmen, 3,5:1 auf Weiss (WCAG 1.4.11) */
  --radius:14px; --radius-sm:10px;
  --shadow:0 8px 24px rgba(31,90,153,.10);
  --shadow-strong:0 16px 44px rgba(31,90,153,.20);
  --container:1140px;
  /* Schriftgrößen-Skala Überschriften (Block AJ): 1 Abschnitt · 2 Block · 3 Zwischentitel · 4 Karte groß · 5 Karte · 6 Kachel klein */
  --fs-1:32px; --fs-2:26px; --fs-3:22px; --fs-4:20px; --fs-5:18px; --fs-6:16px;
  --font:'Manrope',system-ui,sans-serif;
}
@media(max-width:680px){:root{--fs-1:26px; --fs-2:22px; --fs-3:20px; --fs-4:18px; --fs-5:17px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;font:400 17px/1.65 var(--font);color:var(--text);background:var(--off-white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
/* Fokus fuer Tastatur sichtbar (WCAG 2.4.7) — Navy auf hellen, Lime auf dunklen Flaechen */
:focus-visible{outline:3px solid var(--navy-dark);outline-offset:3px}
.hero :focus-visible,.legal-hero :focus-visible,.story-hero :focus-visible,.cta-stripe :focus-visible,.site-footer :focus-visible,.case-header :focus-visible{outline-color:var(--lime)}
/* Skip-Link (WCAG 2.4.1) — erst bei Tastaturfokus sichtbar */
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;padding:10px 16px;background:var(--navy-dark);color:#fff;border-radius:8px;font:700 14px/1.2 var(--font);text-decoration:none}
.skip-link:focus{top:8px;outline:3px solid var(--lime);outline-offset:2px}
/* <nav>-Landmark um die Hauptnavigation, layout-neutral */
.site-nav-wrap{display:contents}


/* ============ SITE HEADER ============ */
.site-header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--border)}
.site-header-top{background:var(--navy-dark);border-bottom:0;font-size:13px;color:rgba(255,255,255,.88)}
.site-header-top-inner{max-width:var(--container);margin:0 auto;padding:8px 24px;display:flex;justify-content:flex-end;gap:18px;align-items:center}
.site-header-top a{color:rgba(255,255,255,.92);font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:6px 0;text-decoration:none}
.site-header-top a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-header-top :focus-visible{outline-color:var(--lime)}
.site-header-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--lime)}
.top-sep{width:1px;height:14px;background:currentColor;opacity:.3}
.site-header-main{max-width:var(--container);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:32px}
.site-header-logo{flex-shrink:0}
.site-header-logo img{height:48px;width:auto}
.site-nav{display:flex;gap:6px;flex:1;justify-content:center;align-items:center}
.site-nav>li{position:relative;list-style:none}
.site-nav a.nav-link{display:block;padding:10px 14px;font-weight:600;font-size:15px;color:var(--navy-dark);border-radius:8px;transition:all .15s;white-space:nowrap}
.site-nav a.nav-link:hover,.site-nav a.nav-link.active{background:var(--sky-soft);color:var(--navy)}
.site-nav a.nav-link.spotlight{color:var(--navy);position:relative;font-weight:700}
.site-header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-header-cta .btn{padding:11px 20px;font-size:14px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:15px;line-height:1;padding:14px 24px;border-radius:var(--radius);cursor:pointer;border:none;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--navy-dark);transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,90,153,.28)}
.btn-accent{background:var(--lime);color:var(--navy-dark);box-shadow:var(--shadow);font-weight:700}
.btn-accent:hover{background:var(--lime-dark);transform:translateY(-3px);box-shadow:0 12px 28px rgba(168,193,60,.38)}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,90,153,.22)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-outline-light:hover{background:#fff;color:var(--navy);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-ghost{background:transparent;color:var(--navy);padding:10px 14px}
.btn-ghost:hover{background:var(--sky-soft)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:18px 32px;font-size:17px}
/* Klick-Rueckmeldung: kurz eindruecken, weich zurueck (V8, 2026-09-24) */
.btn:active{transform:translateY(0) scale(.97);box-shadow:0 2px 6px rgba(15,41,82,.18);transition-duration:.08s}

/* ============ SECTIONS ============ */
section{padding:56px 24px}
section.tight{padding:36px 24px}
section.spacious{padding:80px 24px}
.container{max-width:var(--container);margin:0 auto}
.bg-light{background-color:var(--paper);background-image:radial-gradient(circle,rgba(31,90,153,.05) 1px,transparent 1.5px);background-size:26px 26px;border-top:1px solid rgba(31,90,153,.08)}
.bg-surface{background-color:var(--paper);background-image:radial-gradient(circle,rgba(31,90,153,.03) 1px,transparent 1.5px);background-size:26px 26px;border-top:1px solid rgba(31,90,153,.06)}
.bg-tint{background:var(--sky-soft)}
.bg-dark{background:var(--navy-dark);color:#fff;position:relative;overflow:hidden}
.bg-dark::before{content:'';position:absolute;top:-30%;right:-15%;width:520px;height:520px;background:radial-gradient(circle,var(--sky-bright) 0%,transparent 55%);opacity:.40;pointer-events:none}
.bg-dark::after{content:'';position:absolute;bottom:-40%;left:-20%;width:400px;height:400px;background:radial-gradient(circle,var(--lime) 0%,transparent 60%);opacity:.22;pointer-events:none}
.bg-dark>*{position:relative;z-index:2}

.eyebrow{display:inline-block;font:700 13px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);padding:0;background:transparent;margin-bottom:10px}
.bg-dark .eyebrow{background:transparent;color:var(--lime)}
.section-title{font:700 var(--fs-1)/1.18 var(--font);color:var(--navy);margin:0 0 16px;max-width:780px;overflow-wrap:break-word;hyphens:auto}
.bg-dark .section-title{color:#fff}
.section-lead{font:500 19px/1.55 var(--font);color:var(--text);margin:0 0 32px;max-width:680px}
.bg-dark .section-lead{color:rgba(255,255,255,.85)}

/* ============ HERO ============ */
.hero{padding:90px 24px 80px;color:#fff;background:var(--navy-deep);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-30%;right:-15%;width:660px;height:660px;background:radial-gradient(circle,var(--sky-bright) 0%,transparent 55%);opacity:.25;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-40%;left:-20%;width:500px;height:500px;background:radial-gradient(circle,var(--lime) 0%,transparent 60%);opacity:.14;pointer-events:none}
.hero-inner{max-width:var(--container);margin:0 auto;position:relative;z-index:2}
.hero .eyebrow{color:var(--lime);background:transparent}
.hero h1{font:800 clamp(28px,4vw,44px)/1.12 var(--font);margin:0 0 16px;max-width:780px;overflow-wrap:break-word;hyphens:auto}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .sub{font:400 19px/1.55 var(--font);max-width:640px;margin:0 0 30px;color:rgba(255,255,255,.92)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Hero-Stärken-Strip (Pictogram-Liste unter Hero-CTAs) */
.hero-strengths{display:flex;flex-wrap:wrap;gap:28px;margin:30px 0 0;padding:0;list-style:none}
.hero-strengths li{display:flex;align-items:center;gap:10px;font:600 14px var(--font);color:rgba(255,255,255,.92)}
.hero-strengths svg{width:24px;height:24px;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Hero-Stats integriert (Stats-Strip als Hero-Footer, kein BG-Bruch) */
.hero-stats{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:2}
.hero-stats .stats-grid{max-width:var(--container);margin:0 auto}
/* Wenn Hero die Stats-Bar enthält: Bottom-Padding angleichen, damit der Abstand Stats↔Section-Ende dem Trennlinie↔Stats entspricht */
.hero:has(.hero-stats){padding-bottom:32px}

/* ============ VALUE-STRIP — Was-Sie-bekommen-Bar (weiß, mit Icons) ============ */
.value-strip{background:#fff;padding:28px 24px;border-bottom:1px solid var(--border)}
.value-strip-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;align-items:center}
.value-item{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.value-item-icon{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:rgba(31,90,153,.10);color:var(--navy);display:inline-flex;align-items:center;justify-content:center}
.value-item-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.value-item-text{display:flex;flex-direction:column;min-width:0}
.value-item-label{font:800 15px/1.25 var(--font);color:var(--navy);margin:0 0 2px}
.value-item-desc{font:400 13px/1.4 var(--font);color:var(--muted);margin:0}
/* Modifier (alt: top-aligned, jetzt no-op — Items sind site-weit vertikal zentriert via Default) */
.value-strip--aligned .value-strip-grid{align-items:center}
.value-strip--aligned .value-item{align-items:center}
.value-strip--aligned .value-item-icon{margin-top:0}
@media(max-width:680px){.value-strip-grid{grid-template-columns:1fr 1fr}}

/* Case-Study — Referenz-Projekt mit Customer-Quote + Bild + Was-wir-getan + Ergebnis */
.case-study{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(31,90,153,.10);border:1px solid var(--border);width:100%;margin:0 auto}
.case-header{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;padding:40px 48px;display:grid;grid-template-columns:130px 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.case-header::before{content:'';position:absolute;top:-50%;right:-12%;width:480px;height:480px;background:radial-gradient(circle,var(--sky-bright) 0%,transparent 60%);opacity:.16;pointer-events:none}
.case-header > *{position:relative;z-index:2}
.case-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:18px;width:130px;height:130px;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.case-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.case-logo-fallback{font:700 14px/1.3 var(--font);color:var(--navy);text-align:center}
.case-quote{position:relative;padding-left:42px}
.case-quote::before{content:'„';position:absolute;left:0;top:-18px;font:800 72px/1 var(--font);color:var(--sky-bright);opacity:.55}
.case-quote blockquote{font:italic 700 24px/1.4 var(--font);color:#fff;margin:0 0 14px;max-width:none}
.case-quote cite{display:block;font:600 13px/1.4 var(--font);color:rgba(255,255,255,.8);font-style:normal;letter-spacing:.04em}
.case-image{display:none}

.case-body{padding:40px;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:flex-start}
.case-todo .eyebrow{margin-bottom:8px}
.case-todo h3{margin:0 0 20px;font:700 var(--fs-4)/1.3 var(--font);color:var(--navy)}
.case-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.case-list li{position:relative;padding:0 0 0 24px;font-size:14.5px;line-height:1.55;color:var(--text)}
.case-list li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--sky-bright);border-radius:50%}
.case-result{padding:28px;background:var(--off-white);border:1px solid var(--border);border-radius:14px}
.case-result .eyebrow{margin-bottom:10px;color:var(--sky-bright)}
.case-result-text{margin:0 0 14px;font:italic 500 16px/1.6 var(--font);color:var(--navy-dark)}
.case-result-meta{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.case-result-meta .meta-item{display:flex;justify-content:space-between;font-size:13px;align-items:baseline;gap:12px}
.case-result-meta .meta-label{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.case-result-meta .meta-value{color:var(--navy);font-weight:700;text-align:right}
/* Erweiterungen für ausführlichere Case-Studies */
.case-todo .case-intro{font:400 16px/1.7 var(--font);color:var(--text);margin:0 0 22px}
.case-todo h4.case-section-title{margin:22px 0 12px;font:700 14px/1.3 var(--font);color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.case-result .case-result-text-long{margin:0 0 14px;font:400 14.5px/1.65 var(--font);color:var(--text);font-style:normal}
.case-result-bullets{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.case-result-bullets li{position:relative;padding:0 0 0 20px;font-size:13.5px;line-height:1.55;color:var(--navy-dark);font-weight:500}
.case-result-bullets li::before{content:'→';position:absolute;left:0;top:0;font-weight:800;color:var(--navy)}

/* ============================================
   LEGAL-PAGES (Impressum · Datenschutz · AGB · Cookies · Barrierefreiheit)
   Lesbares Long-Form Layout mit TOC-Sidebar
   ============================================ */
.legal-hero{padding:54px 24px 36px}
.legal-hero .hero-inner{max-width:var(--container);margin:0 auto}
.legal-hero h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:10px;color:#fff}
.legal-hero .sub{font-size:16.5px;margin-bottom:0;color:rgba(255,255,255,.85);max-width:680px}
.legal-hero .updated{display:inline-block;margin-top:14px;font:600 12px/1 var(--font);color:rgba(255,255,255,.6);letter-spacing:.06em;text-transform:uppercase}

.legal-skeleton-notice{background:#FFF8E1;border:1px solid #FBC02D;border-left:4px solid #F57C00;border-radius:8px;padding:14px 18px;margin:0 0 32px;font:500 13.5px/1.55 var(--font);color:#7A4F00}
.legal-skeleton-notice strong{color:#BF360C}

.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;max-width:var(--container);margin:0 auto;padding:48px 24px 64px}
.legal-toc{position:sticky;top:120px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.legal-toc .legal-toc-title{font:700 11px/1 var(--font);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.legal-toc ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.legal-toc a{display:block;font:500 13px/1.4 var(--font);color:var(--text);text-decoration:none;padding:4px 0;border-left:2px solid transparent;padding-left:10px;margin-left:-12px;transition:all .15s ease}
.legal-toc a:hover{color:var(--navy);border-left-color:var(--navy)}

.legal-content{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:40px 48px;max-width:none}
.legal-content h2{font:800 var(--fs-3)/1.3 var(--font);color:var(--navy);margin:36px 0 12px;padding-top:8px;border-top:1px solid var(--border)}
.legal-content h2:first-child{border-top:0;margin-top:0;padding-top:0}
.legal-content h3{font:700 var(--fs-6)/1.35 var(--font);color:var(--navy);margin:22px 0 8px}
.legal-content p, .legal-content ul, .legal-content ol{font:400 14.5px/1.7 var(--font);color:var(--text);margin:0 0 14px;max-width:65ch}
.legal-content ul, .legal-content ol{padding-left:22px}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--navy);border-bottom:1px solid rgba(31,90,153,.35);transition:border-color .15s ease,color .15s ease}
.legal-content a:hover{color:var(--navy-dark);border-bottom-color:var(--navy-dark)}
.legal-content .legal-data-table{display:grid;grid-template-columns:200px 1fr;gap:12px 24px;background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:0 0 22px;font-size:14.5px}
.legal-content .legal-data-table dt{font:700 14px/1.5 var(--font);color:var(--navy)}
.legal-content .legal-data-table dd{margin:0;color:var(--text)}
.legal-content .legal-data-table dd a{color:var(--navy);border-bottom:1px solid transparent}
.legal-content .legal-data-table dd a:hover{border-bottom-color:var(--navy)}
.legal-placeholder{display:inline-block;background:#FFF8E1;color:#7A4F00;padding:2px 8px;border-radius:4px;font:600 13px/1.4 var(--font);border:1px dashed #FBC02D}

@media(max-width:880px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 16px 48px}
  .legal-toc{position:static}
  .legal-content{padding:28px 24px;overflow-wrap:break-word}
  .legal-content .legal-data-table{grid-template-columns:1fr;gap:4px 0;padding:18px 20px}
  .legal-content .legal-data-table dt{margin-top:10px}
  .legal-content .legal-data-table dt:first-child{margin-top:0}
}

@media(max-width:880px){
  .case-header{grid-template-columns:1fr;gap:20px;text-align:left}
  .case-logo{width:90px;height:90px}
  .case-image{width:100%;height:200px}
  .case-body{grid-template-columns:1fr;gap:24px;padding:28px 24px}
  .case-quote blockquote{font-size:19px}
}

/* Method-List — „Methodik / Wie wir messen" als Definition-Stil mit Lime-Strich (ohne Cards, ohne Icons) */
.method-list{max-width:none;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 56px}
.method-list .method{position:relative;padding-left:24px}
.method-list .method::before{content:'';position:absolute;left:0;top:13px;width:14px;height:3px;background:var(--lime);border-radius:2px}
.method-list .method-term{display:block;font:700 17px/1.35 var(--font);color:var(--navy);margin:0 0 6px;letter-spacing:-.01em}
.method-list .method-desc{display:block;font:400 15px/1.6 var(--font);color:var(--text);margin:0;opacity:.88}
@media(max-width:760px){.method-list{grid-template-columns:1fr;gap:24px}}

/* Deliverables-Grid — „Was wir liefern" als visuelle Card-Galerie mit Icon-Tile (Flex zentriert: unvolle Reihen mittig) */
.deliverables{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.deliverable{flex:0 1 calc(33.333% - 14px);min-width:240px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;transition:all .2s;box-shadow:0 4px 12px rgba(31,90,153,.05)}
@media(max-width:880px){.deliverable{flex-basis:calc(50% - 10px)}}
@media(max-width:560px){.deliverable{flex-basis:100%}}
.deliverable:hover{transform:translateY(-2px);border-color:var(--lime);box-shadow:0 12px 28px rgba(31,90,153,.12)}
.deliverable .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--sky-soft);color:var(--navy);margin-bottom:14px;flex-shrink:0}
.deliverable .icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.deliverable h3{margin:0 0 6px;font:700 var(--fs-6)/1.3 var(--font);color:var(--navy)}
.deliverable p{margin:0;font:400 13.5px/1.5 var(--font);color:var(--muted)}

/* Feature-List — prägnante „Was wir liefern"-Liste mit Title + Description (2-Spalten auf Desktop) */
.feature-list{max-width:none;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 48px}
.feature-list li{position:relative;padding:0 0 0 28px;line-height:1.5}
.feature-list li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--lime);border-radius:50%}
.feature-list .feature-title{display:block;font:700 16.5px/1.35 var(--font);color:var(--navy);margin:0}
.feature-list .feature-desc{display:block;font:400 14.5px/1.55 var(--font);color:var(--muted);margin:3px 0 0}
@media(max-width:760px){.feature-list{grid-template-columns:1fr;gap:20px}}

/* FAQ — Akkordeon mit Lime-Akzent bei Open */

/* Pullquote-Block — „Ihr Vorteil"-Zitate */
.pullquote{max-width:none;margin:0;padding:32px 36px 32px 40px;border-left:4px solid var(--lime);background:var(--off-white);border-radius:0 12px 12px 0;position:relative}
.bg-light .pullquote{background:var(--paper)}
.pullquote-eyebrow{display:block;font:700 13px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.pullquote-text{margin:0;font:500 20px/1.5 var(--font);color:var(--navy-dark);font-style:italic;max-width:680px}
.pullquote-cite{display:block;font:600 13px/1.4 var(--font);color:var(--muted);margin-top:14px;font-style:normal}
/* Person-Footer (Mitarbeiter / externe Stimmen) */
.pullquote-person{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.pullquote-avatar{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--off-white);border:2px solid var(--navy);position:relative}
.pullquote-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.pullquote-avatar .avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 18px/1 var(--font);color:var(--navy);background:linear-gradient(135deg,#e9f1f7 0%,#d6e4ef 100%);letter-spacing:.04em;z-index:1}
.pullquote-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pullquote-name{font:700 15px/1.3 var(--font);color:var(--navy-dark)}
.pullquote-role{font:500 13px/1.35 var(--font);color:var(--muted)}
.pullquote-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--lime);color:var(--navy-dark);font:700 13.5px/1.2 var(--font);border-radius:999px;text-decoration:none;border:1.5px solid var(--lime);transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;box-sizing:border-box}
.pullquote-cta:hover{background:var(--lime-dark);border-color:var(--lime-dark);transform:translateY(-3px);box-shadow:0 12px 28px rgba(168,193,60,.38)}
.pullquote-cta:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.08s}
.pullquote-cta::after{content:'→';content:'→' / '';font-weight:800}
@media(max-width:880px){
  .pullquote-person{flex-wrap:wrap}
  .pullquote-cta{width:100%;justify-content:center;margin-top:20px;padding:14px 22px;font-size:14.5px;min-height:48px}
}

/* HERO XL (Variant B/D) */
.hero-xl{padding:140px 24px 120px}
.hero-xl h1{font-size:clamp(42px,6.5vw,76px);max-width:1000px}
.hero-xl .sub{font-size:21px;max-width:720px}

/* HERO with form (Variant E) */
.hero-form{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.hero-form-card{background:#fff;color:var(--text);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow-strong);position:relative;z-index:3}
.hero-form-card h3{margin:0 0 14px;font:700 20px/1.3 var(--font);color:var(--navy)}
.hero-form-card .field{margin-bottom:12px}
.hero-form-card label{display:block;margin-bottom:5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.hero-form-card input,.hero-form-card select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font:400 14px var(--font);background:var(--off-white)}
.hero-form-card input:focus,.hero-form-card select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 35%,transparent)}

/* ============ KONTAKT-SEITE ============ */
.contact-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.contact-channel{padding:28px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;gap:10px;transition:all .2s}
.contact-channel:hover{border-color:var(--sky-bright);box-shadow:var(--shadow)}
.contact-channel-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--sky-soft);color:var(--navy);margin-bottom:6px}
.contact-channel-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-channel-label{font:700 13px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact-channel-main{font:700 20px/1.3 var(--font);color:var(--navy-dark)}
.contact-channel-main a{color:inherit;text-decoration:none}
.contact-channel-main a:hover{color:var(--navy)}
.contact-channel-meta{font:500 14px/1.5 var(--font);color:var(--muted)}
@media(max-width:880px){.contact-channels{grid-template-columns:1fr;gap:16px}}

.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* Zentrierter Form-Wrap (Single-Column-Layout) */
.contact-form-wrap{max-width:760px;margin:0 auto}

/* CONTACT-FORM · Volle Breite + cleane Optik (--full Modifier) */
.contact-form-wrap:has(.contact-form--full){max-width:none}
.contact-form.contact-form--full{padding:48px 56px;background:#fff;border:1px solid rgba(31,90,153,.12);border-radius:var(--radius);box-shadow:none}
.contact-form.contact-form--full h2{font-size:var(--fs-3);margin-bottom:10px}
.contact-form.contact-form--full .form-lead{font-size:16px;margin-bottom:36px;max-width:680px}
.contact-form.contact-form--full .form-step h3{font:700 16px/1.3 var(--font);color:var(--navy);margin:0 0 4px;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.contact-form.contact-form--full .form-step{padding:24px 0;border-top:1px solid rgba(31,90,153,.08)}
.contact-form.contact-form--full .form-step:first-of-type{border-top:none;padding-top:0}
.contact-form.contact-form--full .step-lead{font:400 14px/1.5 var(--font);color:var(--muted);margin:0 0 18px}
.contact-form.contact-form--full .field-row{grid-template-columns:1fr 1fr;gap:20px}
.contact-form.contact-form--full input,
.contact-form.contact-form--full select,
.contact-form.contact-form--full textarea{background:#fff;border:1px solid var(--border-input)}
.contact-form.contact-form--full input:focus,
.contact-form.contact-form--full select:focus,
.contact-form.contact-form--full textarea:focus{outline:2px solid var(--navy-dark);outline-offset:1px;border-color:var(--navy-dark);box-shadow:0 0 0 3px rgba(31,90,153,.08)}
.contact-form.contact-form--full .thema-grid{grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.contact-form.contact-form--full .thema-grid{grid-template-columns:1fr 1fr}}
.contact-form.contact-form--full .thema-card{background:#fff;border:1px solid rgba(31,90,153,.18);padding:16px;text-align:center}
.contact-form.contact-form--full .thema-card:hover{border-color:var(--navy);background:#fff}
.contact-form.contact-form--full .thema-card.selected{border-color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1px var(--navy)}
.contact-form.contact-form--full .thema-card.selected .thema-card-text{color:var(--navy)}
/* FORM-FOOTER · Vertikal zentriert (Privacy + Captcha + Submit) */
.contact-form.contact-form--full .form-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(31,90,153,.10);text-align:center}
.contact-form.contact-form--full .form-footer .privacy{margin:0;padding:0;justify-content:center;font-size:13.5px}

/* reCAPTCHA-Slot · Platzhalter für späteres Google reCAPTCHA Widget (Standard-Größe ~78px) */
.contact-form.contact-form--full .form-recaptcha-slot{min-height:0;display:flex;justify-content:center;align-items:center}
.contact-form.contact-form--full .form-recaptcha-slot:not(:empty){min-height:78px;margin:4px 0}
.contact-form.contact-form--full .form-recaptcha-slot .g-recaptcha{display:inline-block}

/* Honeypot · Visuell versteckt, aber für Bots normal */
.contact-form.contact-form--full .form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

@media(max-width:680px){
  .contact-form.contact-form--full .form-footer{gap:14px}
  .contact-form.contact-form--full .form-footer .privacy{font-size:13px}
  .contact-form.contact-form--full .form-footer button{width:100%}
}

@media(max-width:680px){
  .contact-form.contact-form--full{padding:32px 24px}
}

/* Personen als eigene Section in 5-Spalten-Grid (vertikale Karten) */
.contact-people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.contact-people-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:520px){.contact-people-grid{grid-template-columns:1fr}}
.contact-people-grid .contact-person{flex-direction:column;text-align:center;padding:28px 22px;gap:0;height:100%}
.contact-people-grid .contact-person-avatar{width:88px;height:88px;margin:0 auto 16px;flex-shrink:0}
.contact-people-grid .contact-person-avatar .avatar-fallback{font-size:22px}
.contact-people-grid .contact-person-body{flex:1;display:flex;flex-direction:column;align-items:center;width:100%}
.contact-people-grid .contact-person-name{font-size:15.5px;line-height:1.3;min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center}
.contact-people-grid .contact-person-role{font-size:13px;min-height:38px;display:flex;align-items:center;justify-content:center;margin:6px 0 0;text-align:center}
.contact-people-grid .contact-person-body > div{display:flex;gap:8px;justify-content:center;margin-top:auto;padding-top:16px;width:100%}
.contact-people-grid .contact-person-link{font-size:13px;padding:8px 12px;flex:1;text-align:center}
.contact-people-grid .contact-person-link + .contact-person-link{margin-left:0;padding-left:12px;border-left:none}

/* ============ REFERENZEN-SEITE ============ */
/* Logo-Wall — flex statt grid, damit unregelmäßige Anzahlen sauber zentriert werden */
.logo-wall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 48px;padding:8px 0}
@media(max-width:980px){.logo-wall{gap:24px 32px}}
@media(max-width:580px){.logo-wall{gap:20px}}
.logo-wall img{max-height:54px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(100%);opacity:.65;transition:all .2s;flex:0 0 auto}
.logo-wall img:hover{filter:grayscale(0%);opacity:1}

/* Filter-Bar */
.references-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0;justify-content:center}
.references-filter button{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--paper);border:1.5px solid var(--border);border-radius:999px;font:600 14px/1.2 var(--font);color:var(--navy);cursor:pointer;transition:all .15s}
.references-filter button:hover{border-color:var(--navy);color:var(--navy-dark)}
.references-filter button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.references-filter button .count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--off-white);color:var(--muted);font:700 11px/1 var(--font)}
.references-filter button.active .count{background:rgba(255,255,255,.14);color:#fff}

/* Reference-Cards Grid */
.references-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.references-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:580px){.references-grid{grid-template-columns:1fr;gap:14px}}
.reference-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .2s;position:relative;overflow:hidden}
.reference-card:hover{transform:translateY(-3px);border-color:var(--border-hover);box-shadow:var(--shadow-strong)}
.reference-card[hidden]{display:none}
.reference-card-tag{display:inline-block;align-self:flex-start;padding:4px 11px;border-radius:999px;background:var(--sky-soft);color:var(--navy);font:700 11px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.reference-card-tag[data-cat="kommune"]{background:#e8f3df;color:#4A6626}
.reference-card-tag[data-cat="flughafen"]{background:#e1ecf6;color:#1F5A99}
.reference-card-tag[data-cat="industrie"]{background:#f5e6d6;color:#8b4f1a}
.reference-card-tag[data-cat="bike-counter"]{background:var(--sky-soft);color:var(--navy)}
.reference-card-logo{height:36px;margin-bottom:14px;display:flex;align-items:center}
.reference-card-logo img{max-height:36px;max-width:140px;object-fit:contain}
.reference-card h3{margin:0 0 8px;font:700 var(--fs-5)/1.3 var(--font);color:var(--navy-dark)}
.reference-card-task{margin:0 0 14px;font:500 14.5px/1.5 var(--font);color:var(--text)}
.reference-card-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:14px;border-top:1px solid var(--border);font:500 12.5px/1.4 var(--font);color:var(--muted)}
.reference-card-meta strong{display:block;color:var(--navy);font:700 13px/1.3 var(--font)}
.reference-card-meta > div{flex:1 1 auto;min-width:90px}
.reference-card.placeholder{background:repeating-linear-gradient(45deg,var(--off-white),var(--off-white) 8px,#eef3f7 8px,#eef3f7 16px);border-style:dashed}
.reference-card.placeholder::after{content:'Weitere Referenzen auf Anfrage';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:700 12px/1.3 var(--font);color:var(--muted);background:var(--paper);padding:6px 14px;border-radius:999px;border:1px solid var(--border)}

/* Featured Case (extends existing .case-* pattern) — kleine Anpassungen */
.featured-cases{display:flex;flex-direction:column;gap:48px}
@media(max-width:880px){.featured-cases{gap:32px}}

.contact-form{padding:36px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-form h2{margin:0 0 8px;font:800 var(--fs-3)/1.25 var(--font);color:var(--navy)}
.contact-form .form-lead{margin:0 0 24px;font:500 15px/1.55 var(--font);color:var(--muted)}
.contact-form .field{margin-bottom:16px}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:680px){.contact-form .field-row{grid-template-columns:1fr;gap:0;margin-bottom:0}.contact-form .field-row .field{margin-bottom:16px}}
.contact-form label{display:block;margin-bottom:6px;font:600 12px/1.2 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--navy)}
.contact-form label .req{color:var(--navy)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border-input);border-radius:var(--radius-sm);font:400 15px/1.45 var(--font);background:var(--off-white);color:var(--text);transition:all .15s;box-sizing:border-box;font-family:inherit}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--navy-dark);outline-offset:1px;border-color:var(--navy-dark);background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky-bright) 22%,transparent)}
.contact-form .privacy{display:flex;gap:12px;margin:8px 0 22px;font:500 13px/1.5 var(--font);color:var(--muted);align-items:flex-start}
.contact-form .privacy input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--navy)}
.contact-form .privacy a{color:var(--navy);text-decoration:underline}
.contact-form .submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.contact-form .submit-hint{font:500 13px/1.4 var(--font);color:var(--muted)}

.contact-people h3{margin:0 0 18px;font:700 18px/1.3 var(--font);color:var(--navy);letter-spacing:.01em}
.contact-people-list{display:flex;flex-direction:column;gap:14px}
.contact-person{display:flex;gap:16px;padding:18px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s}
.contact-person:hover{border-color:var(--sky-bright)}
.contact-person-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--off-white);border:2px solid var(--navy);position:relative}
.contact-person-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.contact-person-avatar .avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--font);color:var(--navy);background:linear-gradient(135deg,#e9f1f7 0%,#d6e4ef 100%);z-index:1}
.contact-person-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.contact-person-name{font:700 14.5px/1.3 var(--font);color:var(--navy-dark)}
.contact-person-role{font:500 12.5px/1.35 var(--font);color:var(--muted);margin-bottom:4px}
.contact-person-link{font:600 13px/1.35 var(--font);color:var(--navy);text-decoration:none}
.contact-person-link:hover{color:var(--navy-dark);text-decoration:underline}
.contact-person-link + .contact-person-link{margin-left:12px;padding-left:12px;border-left:1px solid var(--border)}

/* Trust-Row über dem Formular */
.trust-row{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center;padding:32px 36px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:32px;box-shadow:var(--shadow)}
@media(max-width:880px){.trust-row{grid-template-columns:1fr;gap:24px;padding:24px}}
.trust-stats{display:flex;flex-direction:column;gap:18px}
.trust-stat{display:flex;align-items:baseline;gap:12px}
.trust-stat-num{font:800 30px/1 var(--font);color:var(--navy);letter-spacing:-.02em;flex:0 0 auto;min-width:64px}
.trust-stat-text{font:500 14px/1.4 var(--font);color:var(--text)}
.trust-stat-text strong{display:block;color:var(--navy-dark);font:700 15px/1.3 var(--font);margin-bottom:2px}
.trust-logos-wrap{display:flex;flex-direction:column;gap:12px}
.trust-logos-eyebrow{font:700 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px 56px}
.trust-logos img{flex:0 0 auto;max-width:140px;max-height:48px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:all .2s}
.trust-logos img:hover{filter:grayscale(0%);opacity:1}
@media(max-width:880px){.trust-logos{gap:32px 40px}.trust-logos img{max-width:110px;max-height:38px}}

/* Multi-Step Progress */
.form-progress{display:flex;align-items:center;gap:0;margin-bottom:28px;padding:0}
.progress-dot{flex:1 1 auto;display:flex;align-items:center;gap:10px;position:relative;cursor:default}
.progress-dot .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--off-white);border:2px solid var(--border);font:700 14px/1 var(--font);color:var(--muted);flex:0 0 auto;transition:all .2s}
.progress-dot .label{font:600 13px/1.3 var(--font);color:var(--muted);transition:color .2s}
.progress-dot.active .num{background:var(--lime);border-color:var(--lime);color:var(--navy-dark)}
.progress-dot.active .label{color:var(--navy-dark)}
.progress-dot.done .num{background:var(--navy);border-color:var(--navy);color:#fff}
.progress-dot.done .num::after{content:'';display:block;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;position:absolute}
.progress-dot.done .num{position:relative;color:transparent}
.progress-dot.done .label{color:var(--navy-dark)}
.progress-dot:not(:last-child)::after{content:'';flex:1 1 auto;height:2px;background:var(--border);margin:0 6px;min-width:14px;transition:background .2s}
.progress-dot.done:not(:last-child)::after,.progress-dot.active:not(:last-child)::after{background:var(--navy)}
@media(max-width:680px){.progress-dot .label{display:none}.progress-dot:not(:last-child)::after{margin:0 4px}}

/* Form-Steps */
.form-step{display:none}
.form-step.active{display:block;animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.form-step h3{margin:0 0 6px;font:700 19px/1.3 var(--font);color:var(--navy-dark)}
.form-step .step-lead{margin:0 0 22px;font:500 14.5px/1.5 var(--font);color:var(--muted)}
.step-nav{display:flex;justify-content:space-between;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.step-nav .btn-prev{background:transparent;color:var(--muted);border:1px solid var(--border);padding:10px 18px;border-radius:999px;font:600 14px var(--font);cursor:pointer;transition:all .15s}
.step-nav .btn-prev:hover{color:var(--navy);border-color:var(--navy)}
.step-nav .btn-prev::before{content:'← '}
.step-nav .spacer{flex:1 1 auto}

/* Thema-Cards in Step 1 */
.thema-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
@media(max-width:560px){.thema-grid{grid-template-columns:1fr}}
.thema-card{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;padding:14px 18px;background:var(--off-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;position:relative}
.thema-card:hover{border-color:var(--sky-bright);background:var(--paper)}
.thema-card.selected{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 12%,var(--paper));box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 22%,transparent)}
.thema-card input{position:absolute;opacity:0;pointer-events:none}
.thema-card-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--sky-soft);color:var(--navy);flex:0 0 auto}
.thema-card-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thema-card.selected .thema-card-icon{background:var(--lime);color:var(--navy-dark)}
.thema-card-text{font:600 14.5px/1.3 var(--font);color:var(--navy-dark)}

/* „Was passiert jetzt?"-Microcopy */
.next-steps{margin-top:28px;padding:20px;background:var(--off-white);border-radius:var(--radius-sm);border-left:3px solid var(--lime)}
.next-steps-title{display:block;font:700 13px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.next-steps-list{display:flex;gap:16px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.next-steps-list li{flex:1 1 200px;display:flex;align-items:flex-start;gap:10px;font:500 13.5px/1.45 var(--font);color:var(--text)}
.next-steps-list .step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:700 12px/1 var(--font);flex:0 0 auto;margin-top:1px}
.next-steps-list strong{display:block;color:var(--navy-dark);font:700 14px/1.3 var(--font);margin-bottom:2px}

/* .mobile-call-bar entfernt (V8, H-26) — kontakt.html nutzt die site-weite .mobile-cta-bar */

/* ============ TRUST BAR ============ */
.trust-bar{padding:40px 24px;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-bar-inner{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:48px;justify-content:center}
.trust-bar .label{font:600 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:12px}
.trust-logo{display:inline-flex;align-items:center;justify-content:center;width:170px;height:64px;padding:0 8px;text-decoration:none;flex-shrink:0}
.trust-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(100%) opacity(.55);transition:filter .25s ease,opacity .25s ease}
.trust-logo:hover img{filter:grayscale(0%) opacity(1)}
.trust-logo .logo-fallback{font:600 14px/1.2 var(--font);color:var(--muted);letter-spacing:.04em;padding:8px 14px;border:1px dashed var(--border);border-radius:var(--radius-sm);transition:all .25s}
.trust-logo:hover .logo-fallback{color:var(--navy);border-color:var(--navy);border-style:solid}

/* TRUST-BAR · MARQUEE-Variante (Auto-Scroll von rechts nach links, langsam) */
.trust-bar.trust-bar--marquee .trust-bar-inner{flex-wrap:nowrap;gap:24px;justify-content:flex-start}
.trust-bar.trust-bar--marquee .label{flex-shrink:0;margin-right:0}
.trust-marquee{flex:1 1 0;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.trust-marquee-track{display:flex;align-items:center;gap:48px;width:max-content;animation:trust-marquee 50s linear infinite}
.trust-marquee:hover .trust-marquee-track,
.trust-marquee:focus-within .trust-marquee-track{animation-play-state:paused}
.trust-bar.trust-bar--marquee .trust-logo{width:150px;height:56px}
@keyframes trust-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 24px))}
}
@media(prefers-reduced-motion:reduce){
  .trust-marquee-track{animation:none}
}
@media(max-width:680px){
  .trust-bar.trust-bar--marquee .trust-bar-inner{flex-wrap:wrap;gap:14px}
  .trust-bar.trust-bar--marquee .label{width:100%;text-align:center;margin-bottom:4px}
  .trust-marquee{flex:1 1 100%}
  .trust-bar.trust-bar--marquee .trust-logo{width:120px;height:48px}
  .trust-marquee-track{gap:32px;animation-duration:35s}
  @keyframes trust-marquee{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 16px))}
  }
}
.logo-pill{font:600 14px/1.2 var(--font);color:var(--muted);letter-spacing:.04em;padding:8px 14px;border:1px dashed var(--border);border-radius:var(--radius-sm)}

/* ============ DREI STÄRKEN · Mixed-Bg-Cards mit Nummern + Stats ============ */
.usp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.usp-grid > .usp,.usp-grid > .pullquote{flex:0 1 calc(33.333% - 16px);min-width:260px}
.usp-grid.cols-2 > .usp{flex-basis:calc(50% - 12px)}
.usp-grid.cols-3 > .usp{flex-basis:calc(33.333% - 16px)}
.usp-grid.cols-4 > .usp{flex-basis:calc(25% - 18px)}
@media(max-width:1188px){.usp-grid.cols-4 > .usp{flex-basis:calc(50% - 12px)}}
@media(max-width:880px){.usp-grid > .usp,.usp-grid.cols-3 > .usp,.usp-grid.cols-4 > .usp{flex-basis:calc(50% - 12px)}}
@media(max-width:560px){.usp-grid > .usp{flex-basis:100%}}
.usp{padding:32px 28px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:all .2s}
.usp:hover{transform:translateY(-3px);border-color:var(--border-hover);box-shadow:var(--shadow-strong)}
.usp .num-big{display:block;font:800 64px/1 var(--font);color:var(--navy);margin-bottom:18px;letter-spacing:-.03em}
.usp .stat-line{display:block;font:700 12px var(--font);color:var(--lime-dark);margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
.usp h3{margin:0 0 10px;font:700 var(--fs-4)/1.25 var(--font);color:var(--navy)}
.usp p{margin:0;font-size:15px;color:var(--muted);line-height:1.55}

/* USP Card Variants */
.usp-tinted{background:var(--sky-soft);border-color:transparent}
.usp-tinted .num-big{color:var(--navy-dark)}
.usp-tinted .stat-line{color:var(--navy)}

.usp-dark{background:var(--navy-dark);border-color:transparent;color:#fff;position:relative;overflow:hidden}
.usp-dark::before{content:'';position:absolute;top:-30%;right:-25%;width:300px;height:300px;background:radial-gradient(circle,var(--lime) 0%,transparent 60%);opacity:.18;pointer-events:none}
.usp-dark>*{position:relative;z-index:2}
.usp-dark .num-big{color:var(--lime)}
.usp-dark .stat-line{color:var(--lime)}
.usp-dark h3{color:#fff}
.usp-dark p{color:rgba(255,255,255,.85)}
.usp-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong)}

/* ---- USP Variante 1: Icon-Card (Lucide-Style, statt num-big) ---- */
.usp .usp-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:var(--sky-soft);color:var(--navy);margin-bottom:18px}
.usp .usp-icon svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.usp-tinted .usp-icon{background:#fff;color:var(--navy-dark)}
.usp-dark .usp-icon{background:rgba(197,220,77,.15);color:var(--lime)}

/* ---- USP-Grid aligned: alle Cards gleich hoch, letzter <p> am Bottom (für Methodenwahl-Matrix mit Trennstrich-Link) ---- */
.usp-grid.usp-grid--aligned .usp{display:flex;flex-direction:column}
.usp-grid.usp-grid--aligned .usp > p:last-child{margin-top:auto}

/* ---- USP Variante 2: Akzent-Strich + Mini-Tag (statt num-big) ---- */
.usp.usp-accent{position:relative;padding-left:32px}
.usp.usp-accent::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:3px;background:var(--lime);border-radius:2px}
.usp.usp-accent:hover::before{background:var(--navy)}
.usp .usp-tag{display:inline-block;font:700 11px/1.4 var(--font);color:var(--navy);background:var(--sky-soft);padding:5px 11px;border-radius:99px;margin-bottom:14px;letter-spacing:.06em;text-transform:uppercase}

/* ============ SERVICE CARDS ============ */
.service-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.service-grid > .service-card{flex:0 1 calc(33.333% - 16px);min-width:260px}
.service-grid.cols-2 > .service-card{flex-basis:calc(50% - 12px)}
.service-grid.cols-4 > .service-card{flex-basis:calc(25% - 18px);min-width:220px}
.service-grid.cols-5 > .service-card{flex-basis:calc(20% - 20px);min-width:0}
@media(max-width:1100px){.service-grid.cols-4 > .service-card{flex-basis:calc(50% - 12px)}}
@media(max-width:1100px){.service-grid.cols-5 > .service-card{flex-basis:calc(33.333% - 16px)}}
@media(max-width:880px){.service-grid.cols-5 > .service-card{flex-basis:calc(50% - 12px)}}
@media(max-width:560px){.service-grid.cols-5 > .service-card{flex-basis:100%}}
@media(max-width:880px){.service-grid > .service-card{flex-basis:calc(50% - 12px)}}
@media(max-width:560px){.service-grid > .service-card{flex-basis:100%}}
.service-card{background:var(--paper);border:1px solid rgba(31,90,153,.18);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(15,41,82,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 14px 36px rgba(31,90,153,.18)}
/* Bild in der Karte zoomt beim Hover (V8, 2026-09-24) */
.service-card .service-card-img img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-card-img img{transform:scale(1.04)}
.service-card.spotlight{border:2px solid var(--lime)}
.service-card-img{height:140px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 50%,var(--navy) 100%);position:relative;overflow:hidden}
.service-card-img::before{content:'';position:absolute;top:50%;right:-30%;width:200px;height:200px;transform:translateY(-50%);background:radial-gradient(circle,var(--sky-bright) 0%,transparent 65%);opacity:.55}
.service-card.spotlight .service-card-img::before{background:radial-gradient(circle,var(--lime) 0%,transparent 65%);opacity:.7}

/* Image-Variant für reale Fotos / Brand-Grafiken im Card-Header */
.service-card-img.has-photo{background:#fff;display:flex;align-items:center;justify-content:center;padding:14px}
.service-card-img.has-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.service-card-img.has-photo::before{display:none}
.service-card-img.has-photo::after{color:var(--navy)}
.service-card-img.cover{padding:0;background:var(--off-white)}
.service-card-img.cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.service-card-img.cover::after{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
/* Großes zentriertes Icon-Variant (z.B. für Sonderlösungen) */
.service-card-img.icon-only{display:flex;align-items:center;justify-content:center}
.service-card-img.icon-only .big-icon{width:64px;height:64px;color:var(--lime);position:relative;z-index:2}
.service-card-img.icon-only .big-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.service-card-body h3{margin:0 0 8px;font:700 var(--fs-5)/1.3 var(--font);color:var(--navy)}
.service-card-body p{margin:0 0 16px;font-size:15px;color:var(--muted);flex:1}
.service-card-cta{font:700 14px/1.2 var(--font);color:var(--navy);text-decoration:none;display:inline-block;align-self:flex-start;transition:color .15s ease,transform .18s ease}
.service-card:hover .service-card-cta,.service-card-cta:hover{color:var(--navy-dark);transform:translateX(3px)}
.spotlight-tag{position:absolute;top:14px;right:14px;background:var(--lime);color:var(--navy-dark);padding:4px 10px;border-radius:99px;font:700 11px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;z-index:3}

/* ============ STATS SECTION ============ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stat .num{font:800 44px/1 var(--font);color:var(--lime);margin-bottom:6px}
.stat .label{font-size:12px;color:var(--sky);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.bg-surface .stat .label,.bg-light .stat .label{color:var(--navy-dark)}
.stats-grid--cards{gap:24px}
.stats-grid--cards .stat{background:#fff;border:1px solid rgba(31,90,153,.18);border-top:4px solid var(--lime);border-radius:var(--radius);padding:32px 18px 28px;box-shadow:0 1px 2px rgba(15,41,82,.05);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.stats-grid--cards .stat:hover{transform:translateY(-2px);border-color:var(--sky-bright);border-top-color:var(--lime);box-shadow:0 4px 12px rgba(15,41,82,.08)}

/* ============ PROCESS ============ */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.process-step{padding:22px;text-align:center}
.process-step .num{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--lime);color:var(--navy-dark);border-radius:50%;font:800 18px/1 var(--font);margin-bottom:14px}
.process-step h4{margin:0 0 6px;font:700 18px/1.3 var(--font);color:var(--navy)}
.process-step p{margin:0;font-size:14px;color:var(--muted)}

/* ============ AUTHORITY ============ */
.authority-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.authority-card{padding:24px 20px;background:var(--paper);border:1px solid rgba(31,90,153,.18);border-radius:var(--radius);box-shadow:0 1px 2px rgba(15,41,82,.05);text-align:center;display:flex;flex-direction:column;gap:6px;transition:all .2s}
.authority-card:hover{border-color:var(--sky-bright);box-shadow:0 4px 12px rgba(15,41,82,.08)}
.authority-logo{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.authority-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;display:block}
.authority-card strong{display:block;font:700 15px/1.3 var(--font);color:var(--navy);margin-bottom:2px}
.authority-card span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.authority-link{margin-top:auto;padding-top:10px;font:600 12px var(--font);color:var(--navy);text-decoration:none;letter-spacing:.02em}
.authority-link:hover{color:var(--lime-dark)}

/* ============ SYNERGY ============ */
.synergy{background:var(--sky-soft);border-radius:var(--radius);padding:36px;text-align:center}
.synergy h3{margin:0 0 8px;font:800 var(--fs-3)/1.3 var(--font);color:var(--navy)}
.synergy p{margin:0 0 18px;color:var(--muted)}
.synergy-logos{display:flex;align-items:center;justify-content:center;gap:24px;font:700 18px/1 var(--font);color:var(--navy)}
.synergy-logos .connector{height:2px;width:60px;background:var(--lime);border-radius:1px}

/* ============ NEWSLETTER ============ */
/* .newsletter-card / .newsletter-form: globale Regeln entfernt (V8, H-28) — newsletter.html definiert ihr Formular selbst */

/* ============ CTA STRIPE ============ */
.cta-stripe{background:var(--navy);color:#fff;padding:36px 24px}
.cta-stripe-inner{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta-stripe-text{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.cta-stripe-perk{display:inline-flex;align-items:center;gap:10px;margin:0;font:600 13.5px/1.4 var(--font);color:rgba(255,255,255,.92);letter-spacing:.01em}
.cta-stripe-perk::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--navy-dark);font:800 12px/1 var(--font);flex-shrink:0}
.cta-stripe h3{margin:0;font:800 var(--fs-2)/1.2 var(--font);color:#fff;max-width:560px}
.cta-stripe .btn-primary{background:var(--lime);color:var(--navy-dark)}
.cta-stripe .btn-primary:hover{background:var(--lime-dark);color:var(--navy-dark)}
.cta-stripe .btn-accent{background:var(--lime);color:var(--navy-dark)}
.cta-stripe .btn-accent:hover{background:var(--lime-dark);color:var(--navy-dark)}

/* ============ STORY BLOCK (Variant B) ============ */
.story-block{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.story-block-img{aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(135deg,var(--sky-bright),var(--navy));position:relative;overflow:hidden;box-shadow:var(--shadow-strong)}

/* Story-Block-Fotos: Radius + navy-getoenter Schatten, kein Rahmen (V8, 2026-09-24 — ersetzt den Double-Frame A05) */
.story-block .story-block-img{overflow:visible;background:transparent;box-shadow:none;border-radius:0}
.story-block .story-block-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 8px 28px rgba(31,90,153,.18);position:relative;z-index:2}
.story-block .story-block-img::after{display:none}
/* Infografiken: kein Radius, kein Schatten, natuerliche Hoehe */
.story-block .story-block-img:has(img[src*="infografik"]) img,
.story-block .story-block-img:has(img[src*="manuell-vs-automatisch"]) img{box-shadow:none;border-radius:0;aspect-ratio:auto;object-fit:contain}

/* ============ CASE CARDS (Variant B/D) ============ */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.case-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all .2s}
.case-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong)}
.case-card-img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--navy-dark));position:relative;overflow:hidden}
.case-card-img::before{content:'';position:absolute;top:50%;right:-30%;width:200px;height:200px;transform:translateY(-50%);background:radial-gradient(circle,var(--sky-bright) 0%,transparent 65%);opacity:.55}
.case-card-img::after{content:attr(data-city);position:absolute;left:22px;bottom:18px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em;z-index:2}
.case-card-body{padding:22px}
.case-card-body h4{margin:0 0 6px;font:700 18px/1.3 var(--font);color:var(--navy)}
.case-card-body .outcome{font-size:14px;color:var(--lime-dark);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.case-card-body p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}

/* ============ MINI SECTIONS (Variant C) ============ */
.mini-section{padding:24px 0;border-bottom:1px solid var(--border)}
.mini-section:last-child{border:none}
.mini-section h3{margin:0 0 4px;font:700 18px/1.3 var(--font);color:var(--navy)}
.mini-section p{margin:0;font-size:14px;color:var(--muted)}

/* ============ FAQ (Variant E) ============ */

/* ============ FOOTER ============ */
.site-footer{background:var(--navy-deep);color:#fff;padding:54px 24px 24px}
.site-footer-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px}
.site-footer .footer-title{font:700 13px/1.4 var(--font);color:var(--lime);margin:0 0 12px;letter-spacing:.06em;text-transform:uppercase}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer ul li{margin-bottom:8px}
.site-footer ul a{color:#dde6ee;font-size:14px;transition:color .15s}
.site-footer ul a:hover{color:var(--lime)}
.footer-logo-box{background:#fff;border-radius:10px;padding:10px 14px;display:inline-block;margin-bottom:14px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.footer-logo-box img{display:block;height:42px;width:auto}
.footer-nap{font-size:14px;line-height:1.7;color:#dde6ee}
.footer-nap strong{color:#fff;display:block;margin-bottom:4px}
.footer-nap a{color:#dde6ee}
.footer-meta{font-size:12px;color:#7c93b0;margin-top:14px}
.footer-meta a{color:var(--lime);text-decoration:none}
.footer-bottom{max-width:var(--container);margin:30px auto 0;padding-top:18px;border-top:1px solid #1d3550;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:12px;color:#7c93b0}
.footer-bottom a{color:#7c93b0;margin-right:14px;display:inline-block;padding:6px 0;font-size:13px}
.footer-bottom a:hover{color:var(--lime)}

/* ============ MEGA-MENU ============ */
.site-nav>li{position:static}
.site-nav>li.has-mega{padding-bottom:30px;margin-bottom:-30px}
.site-nav>li.has-mega>a.nav-link{position:relative;padding-right:22px}
.site-nav>li.has-mega>a.nav-link::after{content:'';position:absolute;right:8px;top:50%;width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-65%) rotate(45deg);opacity:.6;transition:transform .2s}
.site-nav>li.has-mega:hover>a.nav-link::after{transform:translateY(-25%) rotate(225deg);opacity:1}

.mega-menu{position:absolute;top:100%;left:0;right:0;width:100%;background:var(--paper);border-top:1px solid var(--border);box-shadow:0 14px 40px rgba(31,90,153,.10);padding:36px 24px 32px;display:none;z-index:99;animation:megaFadeIn .15s ease-out}
@keyframes megaFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.site-nav>li.has-mega:hover>.mega-menu,
.site-nav>li.has-mega:focus-within>.mega-menu{display:block}

.mega-menu-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.mega-col .mega-col-title{font:700 11px var(--font);color:var(--navy-dark);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--navy)}
.mega-col .mega-col-title a{color:inherit;text-decoration:none;display:block}
.mega-col .mega-col-title a:hover{color:var(--navy)}
.mega-col ul{margin:0;padding:0;list-style:none}
.mega-col ul ul{margin-top:6px;padding-left:14px;border-left:1px solid var(--border)}
.mega-col li{margin-bottom:4px}
.mega-col li a{color:var(--text);text-decoration:none;font:400 14px/1.4 var(--font);display:block;padding:6px 0;transition:color .15s,padding-left .15s}
.mega-col li a:hover{color:var(--navy-dark);padding-left:4px}
.mega-col li a strong{font-weight:700;color:var(--navy)}
.mega-col .all-link{display:inline-block;margin-top:14px;font:700 13px var(--font);color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:2px;text-decoration:none;transition:border-bottom-width .15s}
.mega-col .all-link:hover{border-bottom-width:6px}

@media(max-width:1024px){
  .mega-menu,.site-nav>li.has-mega:hover>.mega-menu{display:none!important}
  /* In der Mobile-Sidebar: Accordion — Mega-Menus initial zu, nur .is-open zeigt eins */
  body.nav-open .site-nav .has-mega.is-open > .mega-menu{display:block!important;position:static;box-shadow:none;padding:8px 0 16px 16px;background:transparent;border-top:none;animation:none}
  body.nav-open .site-nav .mega-menu-inner{display:block;gap:0;padding:0}
  body.nav-open .site-nav .mega-col{margin-bottom:14px}
  body.nav-open .site-nav .mega-col .mega-col-title{font:700 14px/1.3 var(--font);color:var(--navy);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
  body.nav-open .site-nav .mega-col ul{list-style:none;padding:0;margin:0}
  body.nav-open .site-nav .mega-col li a{display:block;padding:8px 12px;font-size:14px;color:var(--text);text-decoration:none;border-radius:6px}
  body.nav-open .site-nav .mega-col li a:hover{background:var(--sky-soft);color:var(--navy)}
  body.nav-open .site-nav .all-link{display:inline-block;margin-top:4px;font:700 12px var(--font);color:var(--navy)}
  /* Chevron auf has-mega-Parent-Link im Drawer */
  body.nav-open .site-nav .has-mega > .nav-link{position:relative}
  body.nav-open .site-nav .has-mega > .nav-link::after{content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
  body.nav-open .site-nav .has-mega.is-open > .nav-link::after{transform:translateY(-25%) rotate(-135deg)}
}

/* ============ HERO 2-SPALTEN (Text + Brand-Grafik rechts) ============ */
.hero-2col::before,.hero-2col::after{display:none}
.hero-2col-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero-2col-grid .hero-image{position:relative}
.hero-2col-grid .hero-image img{display:block;width:100%;height:auto}
.hero-2col-grid .hero-image .img-placeholder{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px dashed rgba(255,255,255,.25);border-radius:var(--radius);color:rgba(255,255,255,.6);font-size:13px;text-align:center;padding:24px}

/* ============ INFOGRAFIKEN — vollständig, ohne Rahmen/Schatten/Hintergrund ============ */
/* Hero-Infografiken: kein abgerundeter Rahmen, kein Schlagschatten (Foto-Heros behalten beides) */
.hero-2col-grid .hero-image img[src*="infografik"],
.hero-2col-grid .hero-image img[src*="manuell-vs-automatisch"]{border-radius:0;filter:none}
/* Story-Block-Infografiken: Container ohne Hintergrund/Rahmen/Schatten, Bild in natürlicher Höhe */
.story-block-img:has(img[src*="infografik"]),
.story-block-img:has(img[src*="manuell-vs-automatisch"]){background:none;box-shadow:none;border-radius:0;overflow:visible;aspect-ratio:auto}

/* ============ INLINE-IMAGE-BLOCK (zwischen Sections) ============ */
.image-block{padding:48px 24px;background:var(--paper)}
.image-block-inner{max-width:920px;margin:0 auto;text-align:center}
.image-block img{display:block;width:auto;max-width:100%;height:auto;max-height:540px;border-radius:var(--radius);box-shadow:var(--shadow);margin:0 auto;object-fit:contain}
.image-block .caption{margin-top:16px;text-align:center;font-size:13px;color:var(--muted);font-style:italic}
.image-block .img-placeholder-light{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky-soft),var(--off-white));border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);font-size:14px;text-align:center;padding:32px}

/* ============ JOURNEY (Process mit Pfeilen) ============ */
.journey{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.journey-step{flex:1;padding:24px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;transition:all .2s}
.journey-step:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-strong)}
.journey-step .num{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--navy);color:#fff;border-radius:50%;font:800 14px/1 var(--font);margin-bottom:14px;letter-spacing:.04em}
.journey-step h3{margin:0 0 6px;font:700 var(--fs-4)/1.3 var(--font);color:var(--navy)}
.journey-step p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.journey-line{flex:0 0 50px;display:flex;align-items:center;justify-content:center;color:var(--sky-bright)}
.journey-line svg{width:36px;height:18px}

/* Zickzack-Variante mit größeren Cards (gerade Pfeile, ohne Versetzung, Cards gleich hoch) */
.journey-zigzag{align-items:stretch;padding-bottom:0;margin-top:36px}
.journey-zigzag .journey-step{padding:32px 26px;flex:1 1 0;justify-content:flex-start}
.journey-zigzag .journey-step .num{width:54px;height:54px;font-size:17px;margin-bottom:18px}
.journey-zigzag .journey-step h3{font:700 var(--fs-4)/1.3 var(--font);margin:0 0 10px}
.journey-zigzag .journey-step p{font-size:14.5px;line-height:1.6;margin:0}
.journey-zigzag .journey-line{flex:0 0 60px;align-self:center;align-items:center;justify-content:center}
.journey-zigzag .journey-line svg{width:48px;height:18px}
@media(max-width:900px){
  .journey{flex-direction:column;align-items:stretch}
  .journey-line{flex:0 0 30px;height:30px;width:100%}
  .journey-line svg{transform:rotate(90deg)}
}

@media(max-width:1024px){
  .site-nav{display:none}
  .site-footer-grid{grid-template-columns:1fr 1fr}
  .site-header-main{gap:16px}
  .site-header-cta{margin-left:auto}
  .site-header-cta .btn{padding:10px 14px}
  /* Hover-Bruecke des Mega-Menues im Drawer nicht noetig (N-27) */
  .site-nav>li.has-mega{padding-bottom:0;margin-bottom:0}
}
@media(max-width:640px){
  section{padding:48px 16px}
  .hero{padding:60px 16px 50px}
  .hero-xl{padding:80px 16px 70px}
  .site-header-main{padding:12px 16px;gap:12px;justify-content:space-between}
  .site-header-logo img{height:40px}
  /* K-04: CTA uebernimmt die Mobile-CTA-Bar; Top-Bar (Login/Karriere/Telefon) steht im Footer bzw. in der Bar */
  .site-header-cta{display:none}
  .site-header-top{display:none}
  .cta-stripe-inner{flex-direction:column;text-align:center;align-items:center}
  .stats-grid{grid-template-columns:1fr 1fr}
  .story-block{grid-template-columns:1fr}
  .story-block .story-block-text{order:1}
  .story-block .story-block-img{order:2}
  .hero-form{grid-template-columns:1fr}
}

/* ============================================
   DESIGN-REFRESH V5 — globaler Look (von video.html hochgezogen, 2026-05-21)
   Lime nur noch für CTAs · Navy für Akzente · Charcoal/Grau für Text & Linien
   ============================================ */
/* Farb-Tokens: Body-Text Charcoal, Linien/Sekundärtext neutralgrau */
/* Farb-Tokens Charcoal/Grau stehen seit V8 direkt in :root */

/* Icons — Navy auf grauem Background (statt Navy auf Sky-Soft) */
.value-item-icon,
.usp .usp-icon,
.deliverable .icon{ background:#EEF1F4; color:var(--navy); }

/* Card-Hover-Outline in Navy statt Lime */
.deliverable:hover{ border-color:var(--navy); }

/* Mitarbeiter-Zitat — Navy-Balken + kompakte, mittige Karte */
.pullquote{ border-left-color:var(--navy); max-width:820px; margin-inline:auto; }
.pullquote-text{ max-width:none; }

/* Case-Study — helles Sky-Bright durch Navy/neutral ersetzen */
.case-list li::before{ background:var(--navy); }
.case-result .eyebrow{ color:var(--navy); }
.case-quote::before{ color:rgba(255,255,255,.30); }
.case-header::before{ background:radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 60%); }

/* Section-Rhythmus: Icon-Boxen auf bg-light bleiben weiß */
.value-strip{ background:#EFF2F6; }
.bg-light .usp .usp-icon,
.bg-light .deliverable .icon,
.bg-light .download-icon,
.value-strip .value-item-icon{ background:#fff; }

/* FAQ — native details/summary (BFSG-konform, kein JS) · Split-Layout */
.faq-split{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start }
.faq-intro .section-title{ margin-bottom:14px }
@media(max-width:880px){ .faq-split{ grid-template-columns:1fr; gap:24px } }
.faq-list{ display:flex; flex-direction:column; gap:12px }

/* Downloads — 3-Spalten über volle Breite */
.download-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.download-item{ display:flex; align-items:center; gap:16px; padding:20px 22px; background:#fff; border:1px solid var(--border); border-radius:12px; text-decoration:none; transition:all .2s }
@media(max-width:880px){ .download-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:760px){ .download-grid{ grid-template-columns:1fr } }
.download-item:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 12px 28px rgba(31,90,153,.10) }
.download-icon{ flex-shrink:0; width:44px; height:44px; border-radius:10px; background:#EEF1F4; color:var(--navy); display:inline-flex; align-items:center; justify-content:center }
.download-icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.download-text{ display:flex; flex-direction:column; gap:2px }
.download-text strong{ font:700 15px/1.3 var(--font); color:var(--navy) }
.download-text span{ font:500 13px/1.3 var(--font); color:var(--muted) }

/* Lange deutsche Komposita in schmalen Boxen sauber trennen statt über den Rand laufen lassen */
.deliverable h3, .deliverable p,
.value-item-label, .value-item-desc,
.usp h3, .download-text strong, .download-text span{
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mehr vertikale Luft zwischen den Content-Sections (war 56px) */
.bg-surface, .bg-light{ padding-top:80px; padding-bottom:80px; }
/* Kompakte Bänder bleiben schmal: Kennzahlen-Bar (value-strip = 56px Basis) + Downloads (.section-compact) */
.section-compact{ padding-top:56px; padding-bottom:56px; }

/* Mitarbeiter-Zitat als Band IN der Case-Study integriert (ein zusammenhängender Block) */
.case-expert{ display:flex; align-items:center; gap:20px; padding:26px 40px; border-top:1px solid var(--border); background:#fff }
.case-expert-text{ flex:1 1 auto; min-width:0 }
.case-expert-quote{ margin:0 0 8px; font:italic 500 16px/1.5 var(--font); color:var(--navy-dark) }
.case-expert-meta{ display:flex; flex-direction:column; gap:2px }
@media(max-width:680px){ .case-expert{ flex-wrap:wrap; padding:22px 24px } }

/* Experten-Stimme als eigenständiges Band (Produktseiten, ersetzt freistehende .pullquote) */
.expert-band{ display:flex; align-items:center; gap:24px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:26px 38px; box-shadow:0 4px 18px rgba(31,90,153,.06) }
.expert-band-quote{ overflow-wrap:anywhere }
.expert-band .pullquote-avatar{ flex:none }
.expert-band-text{ flex:1 1 auto; min-width:0 }
.expert-band-quote{ margin:0 0 10px; font:italic 500 16.5px/1.55 var(--font); color:var(--navy-dark) }
.expert-band-meta{ display:flex; flex-direction:column; gap:2px }
.expert-band .pullquote-cta{ flex:none }
@media(max-width:680px){ .expert-band{ flex-wrap:wrap; padding:24px 24px; gap:16px } .expert-band .pullquote-cta{ width:100%; text-align:center } }

/* PORTRAIT-Modifier · Großes Bild links, volle Box-Höhe */
.expert-band.expert-band--portrait{ padding:0; gap:0; overflow:hidden; align-items:stretch }
.expert-band.expert-band--portrait .pullquote-avatar{ flex:0 0 220px; width:220px; height:auto; border-radius:0; border:none; background:var(--off-white); align-self:stretch }
.expert-band.expert-band--portrait .pullquote-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18% }
.expert-band.expert-band--portrait .pullquote-avatar .avatar-fallback{ font-size:38px }
.expert-band.expert-band--portrait .expert-band-text{ padding:30px 32px; display:flex; flex-direction:column; justify-content:center; gap:8px }
.expert-band.expert-band--portrait .expert-band-quote{ font-size:18px; line-height:1.6 }
.expert-band.expert-band--portrait .pullquote-cta{ align-self:center; margin-right:32px }
@media(max-width:880px){
  .expert-band.expert-band--portrait{ flex-direction:column; align-items:stretch; padding:0 }
  .expert-band.expert-band--portrait .pullquote-avatar{ flex:0 0 auto; width:100%; height:260px; max-width:100% }
  .expert-band.expert-band--portrait .pullquote-avatar img{ object-position:center 25% }
  .expert-band.expert-band--portrait .expert-band-text{ padding:24px 24px 8px; max-width:100%; min-width:0 }
  .expert-band.expert-band--portrait .pullquote-cta{ margin:0; border-radius:0; align-self:stretch; text-align:center }
  /* Auch die Standard-Variante (nicht-portrait) auf mobile sauber stapeln */
  .expert-band{ flex-direction:column; align-items:stretch; padding:24px }
  .expert-band .pullquote-avatar{ align-self:flex-start }
  .expert-band-text{ width:100%; min-width:0 }
  .expert-band .pullquote-cta{ align-self:stretch; text-align:center }
}

/* Substanz-Bar: Intro links + Stats inline rechts (kompakte Navy-Bar, Home) */
.substanz-bar{ display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:center }
.substanz-bar .section-title{ font:700 22px/1.2 var(--font); margin:0; max-width:none }
.substanz-bar .stats-grid{ grid-template-columns:repeat(4,1fr); gap:20px }
@media(max-width:860px){ .substanz-bar{ grid-template-columns:1fr; gap:20px; text-align:center } }

/* MOBILE NAVIGATION · Burger-Button + Drawer */
.nav-burger{ display:none; width:44px; height:44px; padding:0; background:transparent; border:1px solid rgba(31,90,153,.18); border-radius:10px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.nav-burger span{ display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .25s ease }
body.nav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.nav-open .nav-burger span:nth-child(2){ opacity:0 }
body.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.mobile-nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,41,82,.55); z-index:98; opacity:0; transition:opacity .25s ease }
body.nav-open .mobile-nav-backdrop{ display:block; opacity:1 }
/* Header-Stacking-Context beim geöffneten Drawer über den Backdrop heben, sonst schluckt der Backdrop alle Klicks */
body.nav-open .site-header{ z-index:100 }

@media(max-width:1024px){
  .nav-burger{ display:flex }
  body.nav-open .site-nav{ display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:min(320px,82vw); background:#fff; padding:80px 24px 32px; gap:6px; overflow-y:auto; box-shadow:-12px 0 40px rgba(15,41,82,.18); z-index:99; align-items:stretch; transform:translateX(0) }
  body.nav-open .site-nav>li{ width:100% }
  body.nav-open .site-nav a.nav-link{ padding:14px 16px; font-size:17px }
  body.nav-open .site-nav .mega-menu{ position:static; box-shadow:none; padding:8px 0 16px 16px; background:transparent }
  body.nav-open{ overflow:hidden }
}

/* STICKY MOBILE-CTA · Floating "Kontakt"-Button unten */
.mobile-cta-bar{ display:none }
@media(max-width:720px){
  .mobile-cta-bar{ display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid rgba(31,90,153,.16); box-shadow:0 -4px 18px rgba(15,41,82,.10); padding:env(safe-area-inset-bottom,0) 0 0 }
  .mobile-cta-bar a{ display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 12px; min-height:48px; font:700 14px/1 var(--font); text-decoration:none; color:var(--navy); border-right:1px solid rgba(31,90,153,.10); transition:background .15s ease }
  .mobile-cta-bar a:last-child{ border-right:none; background:var(--lime); color:var(--navy-dark) }
  .mobile-cta-bar a:active{ background:rgba(63,169,216,.12) }
  .mobile-cta-bar a:last-child:active{ background:var(--lime-dark) }
  .mobile-cta-bar svg{ width:16px; height:16px; flex-shrink:0 }
  body{ padding-bottom:56px }
}

/* MID-PAGE CTA · Konversion-Anker, kompakter als Final-CTA, ohne Glow */
.cta-stripe.cta-stripe--mid{ padding:32px 24px }
.cta-stripe.cta-stripe--mid .cta-stripe-text h3{ font-size:var(--fs-2) }
.cta-stripe.cta-stripe--mid .cta-stripe-perk{ font-size:13px }
@media(max-width:720px){
  .cta-stripe.cta-stripe--mid{ padding:28px 20px }
}

/* FINAL-CTA XL · 2-Spalten mit Beratung + Direktanruf + dezenter Glow */
.cta-stripe.cta-stripe--xl{ padding:48px 24px; position:relative; overflow:hidden }
.cta-stripe.cta-stripe--xl::before{ content:''; position:absolute; top:-40%; right:-10%; width:480px; height:480px; background:radial-gradient(circle,var(--sky-bright) 0%,transparent 65%); opacity:.35; pointer-events:none }
.cta-stripe.cta-stripe--xl::after{ display:none }
.cta-stripe.cta-stripe--xl .cta-stripe-inner{ position:relative; z-index:2; gap:32px }
.cta-stripe.cta-stripe--xl .cta-stripe-text h3{ font-size:var(--fs-2) }
.cta-stripe-actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0 }
.cta-stripe-phone{ display:inline-flex; align-items:center }
@media(max-width:720px){
  .cta-stripe.cta-stripe--xl{ padding:36px 20px }
  .cta-stripe-actions{ width:100%; flex-direction:column }
  .cta-stripe-actions .btn{ width:100%; justify-content:center }
}

/* FAQ-Animation · Sanftes Auf-/Zuklappen */
/* offen = "x" (45° aus der Basisregel) — die fruehere 180°-Drehung liess das "+" unveraendert */

/* STORY-HERO · Full-width Background-Image mit Editorial-Header links + Card rechts */
.story-hero{ position:relative; min-height:620px; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--navy-dark); display:flex; align-items:center; padding:80px 24px; overflow:hidden }
.story-hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(10,41,82,0.90) 0%, rgba(10,41,82,0.65) 40%, rgba(10,41,82,0.30) 75%, rgba(10,41,82,0.55) 100%); pointer-events:none }
.story-hero-overlay{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; padding:0 24px }

/* Editorial Split-Layout: Header links, Card rechts */
.story-hero-overlay--split{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center }
.story-hero-header{ color:#fff; max-width:520px }
.story-hero-eyebrow{ color:var(--lime)!important; background:transparent; padding:0; font-weight:700 }
.story-hero-title{ font:800 clamp(34px,4.5vw,52px)/1.1 var(--font); color:#fff; margin:14px 0 22px; text-shadow:0 2px 24px rgba(0,0,0,.35); overflow-wrap:break-word; hyphens:auto }
.story-hero-title em{ font-style:normal; color:var(--lime) }
.story-hero-lead{ font:400 17px/1.6 var(--font); color:rgba(255,255,255,.92); margin:0; text-shadow:0 1px 12px rgba(0,0,0,.3) }

.story-hero-card{ max-width:560px; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); padding:32px 36px 36px; border-radius:14px; border:1px solid rgba(31,90,153,.12); border-top:4px solid var(--lime); box-shadow:0 20px 48px rgba(15,41,82,.22) }
.story-hero-since{ display:flex; flex-direction:column; gap:2px; margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid rgba(31,90,153,.10) }
.story-hero-since-label{ font:700 11px/1.2 var(--font); color:var(--muted); text-transform:uppercase; letter-spacing:.12em }
.story-hero-since-year{ font:800 44px/1 var(--font); color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.story-hero-card p{ font-size:15.5px; line-height:1.65; color:var(--text); margin:0 0 14px }
.story-hero-card p:last-of-type{ margin-bottom:22px }
.story-hero-tagline{ font-weight:500; color:var(--navy-dark) }
.story-hero-cta{ margin-top:4px }

@media(max-width:980px){
  .story-hero-overlay--split{ grid-template-columns:1fr; gap:32px }
  .story-hero-header{ max-width:none }
}
@media(max-width:720px){
  .story-hero{ min-height:auto; padding:56px 16px }
  .story-hero::before{ background:linear-gradient(180deg, rgba(10,41,82,0.65) 0%, rgba(10,41,82,0.55) 100%) }
  .story-hero-overlay{ padding:0 }
  .story-hero-card{ padding:28px 24px }
  .story-hero-since-year{ font-size:38px }
  .story-hero-title{ font-size:clamp(28px,7vw,40px) }
}

/* AUTHORITY-STRIP · Horizontale Logo-Bar als Alternative zu Cards */
.authority-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:var(--container); margin:40px auto 0; padding:12px 0 }
.authority-strip-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:20px 24px; border-left:1px solid rgba(31,90,153,.14); text-decoration:none; color:inherit; transition:transform .18s ease,background .18s ease; border-radius:6px }
.authority-strip-item:first-child{ border-left:none }
.authority-strip-item:hover{ transform:translateY(-2px); background:rgba(63,169,216,.05) }
.authority-strip-logo{ height:48px; display:flex; align-items:center; justify-content:center; filter:grayscale(40%); transition:filter .18s ease }
.authority-strip-item:hover .authority-strip-logo{ filter:grayscale(0%) }
.authority-strip-logo img{ max-height:48px; max-width:120px; width:auto; height:auto; object-fit:contain }
.authority-strip-fallback{ font:800 18px/1 var(--font); color:var(--navy); letter-spacing:.04em }
.authority-strip-name{ font:700 14px/1.25 var(--font); color:var(--navy); margin-top:4px }
.authority-strip-desc{ font:400 12px/1.4 var(--font); color:var(--muted); max-width:160px }
@media(max-width:720px){
  .authority-strip{ grid-template-columns:1fr 1fr; gap:0 }
  .authority-strip-item{ padding:20px 16px }
  .authority-strip-item:nth-child(2),
  .authority-strip-item:nth-child(4){ border-left:1px solid rgba(31,90,153,.14) }
  .authority-strip-item:nth-child(3),
  .authority-strip-item:nth-child(4){ border-top:1px solid rgba(31,90,153,.14) }
  .authority-strip-item:nth-child(3){ border-left:none }
}

/* VTABS · Vertikale Tabs mit aktivem Lime-Strich (Anwendungs-Kontexte etc.) */
.vtabs{ display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:20px; margin-top:36px; align-items:start }
.vtabs-list{ display:flex; flex-direction:column; border-left:1px solid rgba(31,90,153,.14); padding:0 }
.vtabs-trigger{ position:relative; display:block; width:100%; text-align:left; padding:14px 18px; background:transparent; border:none; cursor:pointer; font:600 15px/1.35 var(--font); color:var(--muted); transition:color .18s ease, background .18s ease; border-radius:0 }
.vtabs-trigger::after{ content:''; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:transparent; transition:background .18s ease }
.vtabs-trigger:hover{ color:var(--navy) }
.vtabs-trigger:focus-visible{ outline:3px solid var(--navy-dark); outline-offset:-3px; border-radius:4px }
.vtabs-trigger[aria-selected="true"]{ color:var(--navy); font-weight:700 }
.vtabs-trigger[aria-selected="true"]::after{ background:var(--lime); width:3px }
.vtabs-content{ border:1px solid rgba(31,90,153,.12); border-radius:var(--radius); background:#fff; padding:32px 36px; min-height:240px }
.vtabs-panel{ outline:none }
.vtabs-panel:focus-visible{ outline:2px solid var(--navy-dark); outline-offset:4px; border-radius:4px }
.vtabs-panel[hidden]{ display:none }
.vtabs-panel h3{ font:800 22px/1.25 var(--font); color:var(--navy); margin:0 0 14px }
.vtabs-panel > p{ font-size:15.5px; line-height:1.85; color:var(--text); margin:0 0 18px }

/* Inline Chip-Tag · für Standards/Keywords im Fließtext */
.text-chip{ display:inline-block; padding:1px 8px; background:rgba(31,90,153,.12); color:var(--navy); font-weight:700; font-size:.92em; border-radius:5px; white-space:nowrap; letter-spacing:.01em; line-height:1.4 }
.vtabs-bullets{ list-style:none; padding:0; margin:0 }
.vtabs-bullets li{ padding:8px 0 8px 24px; position:relative; font-size:14.5px; line-height:1.55; color:var(--text) }
.vtabs-bullets li::before{ content:''; position:absolute; left:0; top:15px; width:8px; height:8px; background:var(--navy); border-radius:50% }

@media(max-width:880px){
  .vtabs{ grid-template-columns:1fr; gap:0 }
  .vtabs-list{ flex-direction:row; border-left:none; border-bottom:1px solid rgba(31,90,153,.14); overflow-x:auto; padding-bottom:0; scrollbar-width:none }
  .vtabs-list::-webkit-scrollbar{ display:none }
  .vtabs-trigger{ flex-shrink:0; padding:14px 16px; font-size:14px; white-space:nowrap }
  .vtabs-trigger::after{ left:0; right:0; top:auto; bottom:-1px; width:auto; height:2px }
  .vtabs-trigger[aria-selected="true"]::after{ background:var(--lime); height:3px; width:auto }
  .vtabs-content{ border-top-left-radius:0; border-top-right-radius:0; border-top:none; padding:24px 22px; margin-top:-1px }
}

/* STATS BIG · Typografische Stats ohne Card-Frame, mit Trennlinien */
.stats-big{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:var(--container); margin:48px auto 0; padding:8px 0 }
.stats-big .stat-big{ padding:8px 28px; text-align:center; border-left:1px solid rgba(31,90,153,.14) }
.stats-big .stat-big:first-child{ border-left:none }
.stats-big .stat-num{ font:800 clamp(48px,6vw,76px)/1 var(--font); color:var(--navy); margin:0 0 14px; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stats-big .stat-label{ font:700 12px/1.4 var(--font); color:var(--navy-dark); text-transform:uppercase; letter-spacing:.08em }
@media(max-width:860px){
  .stats-big{ grid-template-columns:1fr 1fr; gap:32px 0; margin-top:32px }
  .stats-big .stat-big{ padding:8px 16px; border-left:none }
  .stats-big .stat-big:nth-child(2),
  .stats-big .stat-big:nth-child(4){ border-left:1px solid rgba(31,90,153,.14) }
  .stats-big .stat-num{ font-size:clamp(40px,10vw,56px) }
}

/* PRODUCT CAROUSEL · Horizontal Scroll mit Snap-Behavior + Arrows + Dots */
.product-carousel-wrapper{ position:relative; margin-top:36px }
.product-carousel{ display:grid; grid-auto-flow:column; grid-auto-columns:280px; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:4px; padding:8px 4px 8px; margin:0; scrollbar-width:none; -ms-overflow-style:none }
.product-carousel::-webkit-scrollbar{ display:none; width:0; height:0 }
.product-carousel .service-card{ scroll-snap-align:start; min-width:0 }

.carousel-arrow{ position:absolute; top:calc(50% - 24px - 14px); transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(31,90,153,.18); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:0 4px 12px rgba(15,41,82,.10); transition:all .18s ease; color:var(--navy); padding:0 }
.carousel-arrow:hover{ border-color:var(--navy); background:var(--paper); color:var(--navy-dark); box-shadow:0 6px 18px rgba(15,41,82,.14) }
.carousel-arrow:focus-visible{ outline:3px solid var(--navy-dark); outline-offset:3px }
.carousel-arrow svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.carousel-arrow--prev{ left:-22px }
.carousel-arrow--next{ right:-22px }
@media(max-width:1200px){ .carousel-arrow--prev{ left:-8px } .carousel-arrow--next{ right:-8px } }

.carousel-dots{ display:flex; justify-content:center; gap:10px; margin-top:8px; padding:0 }
.carousel-dot{ width:10px; height:10px; border-radius:50%; background:rgba(31,90,153,.20); border:none; cursor:pointer; padding:0; transition:all .22s ease }
.carousel-dot:hover{ background:rgba(31,90,153,.40) }
.carousel-dot.active{ background:var(--navy); width:28px; border-radius:5px }
.carousel-dot:focus-visible{ outline:3px solid var(--navy-dark); outline-offset:3px }

@media(max-width:680px){
  .product-carousel{ grid-auto-columns:85% }
  .carousel-arrow{ display:none }
}

/* VALUE-STRIP MODIFIER · Overlapping Cards — Cards "schwimmen" über Hero-Rand */
.value-strip.value-strip--overlap{ background:transparent; border:none; padding:0 24px 56px; margin-top:-72px; position:relative; z-index:5 }
.value-strip.value-strip--overlap .value-strip-grid{ background:#fff; max-width:var(--container); margin:0 auto; border-radius:var(--radius); box-shadow:0 20px 48px rgba(15,41,82,.16),0 4px 14px rgba(15,41,82,.08); padding:32px 0; grid-template-columns:repeat(4,1fr); gap:0 }
.value-strip.value-strip--overlap .value-item{ padding:0 28px; border-left:1px solid var(--border); flex-direction:column; align-items:center; text-align:center; gap:14px; text-decoration:none; color:inherit; transition:transform .18s ease }
.value-strip.value-strip--overlap a.value-item{ cursor:pointer }
.value-strip.value-strip--overlap a.value-item:hover{ transform:translateY(-3px) }
.value-strip.value-strip--overlap a.value-item:hover .value-item-icon{ background:rgba(63,169,216,.18) }
.value-strip.value-strip--overlap a.value-item:hover .value-item-label{ color:var(--navy-dark) }
.value-strip.value-strip--overlap .value-item:first-child{ border-left:none }
.value-strip.value-strip--overlap .value-item-icon{ width:56px; height:56px; border-radius:14px; background:rgba(31,90,153,.06); flex-shrink:0; transition:background .18s ease }
.value-strip.value-strip--overlap .value-item-icon svg{ width:28px; height:28px; stroke-width:1.8 }
.value-strip.value-strip--overlap .value-item-text{ display:flex; flex-direction:column; align-items:center; min-height:62px; justify-content:flex-start; width:100% }
.value-strip.value-strip--overlap .value-item-label{ font:800 16px/1.25 var(--font); color:var(--navy); margin:0 0 6px; text-transform:none; letter-spacing:0 }
.value-strip.value-strip--overlap .value-item-label::after{ content:" →"; display:inline-block; margin-left:6px; color:inherit; font-weight:700; transition:transform .18s ease }
.value-strip.value-strip--overlap a.value-item:hover .value-item-label::after{ transform:translateX(4px) }
.value-strip.value-strip--overlap .value-item-desc{ font:400 13px/1.5 var(--font); color:var(--muted); min-height:40px }
/* Mobile (bis 880px): 2x2 Grid mit innerem Kreuz (horizontale + vertikale Trennlinie) */
@media(max-width:880px){
  .value-strip.value-strip--overlap{ margin-top:-48px; padding:0 16px 40px }
  .value-strip.value-strip--overlap .value-strip-grid{ grid-template-columns:1fr 1fr !important; padding:24px 0; gap:0 }
  .value-strip.value-strip--overlap .value-item{ padding:22px 14px; border-left:none; border-top:1px solid var(--border); min-width:0 }
  .value-strip.value-strip--overlap .value-item:first-child,
  .value-strip.value-strip--overlap .value-item:nth-child(2){ border-top:none }
  .value-strip.value-strip--overlap .value-item:nth-child(2),
  .value-strip.value-strip--overlap .value-item:nth-child(4){ border-left:1px solid var(--border) }
}
/* Sehr schmale Viewports (<440px): 2x2 erzwingen, sonst stapelt das Grid in 1 Spalte */
@media(max-width:440px){
  .value-strip.value-strip--overlap{ padding:0 10px 32px }
  .value-strip.value-strip--overlap .value-strip-grid{ grid-template-columns:1fr 1fr !important; padding:18px 0 }
  .value-strip.value-strip--overlap .value-item{ padding:18px 8px }
  .value-strip.value-strip--overlap .value-item-icon{ width:44px; height:44px }
  .value-strip.value-strip--overlap .value-item-icon svg{ width:22px; height:22px }
  .value-strip.value-strip--overlap .value-item-label{ font-size:14px }
  .value-strip.value-strip--overlap .value-item-desc{ font-size:12px; min-height:0 }
}

/* HERO-COVER · Full-width background image + zentrierter Text-Overlay */
.hero.hero-cover{ min-height:78vh; padding:120px 24px; background-color:var(--navy-deep); background-size:cover; background-position:center; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center }
/* Overlay deutlich dunkler + leichte Unschärfe — Look der Staging-Home (Robin, 2026-09-08) */
.hero.hero-cover::before{ inset:0; top:0; right:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(10,41,82,0.74) 0%, rgba(10,41,82,0.68) 45%, rgba(10,41,82,0.82) 100%); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:1; border-radius:0 }
.hero.hero-cover::after{ display:none }
.hero.hero-cover .hero-inner{ max-width:880px; text-align:center; position:relative; z-index:2; padding:0; margin:0 auto }
.hero.hero-cover h1{ font:800 clamp(36px,5.5vw,60px)/1.12 var(--font); max-width:none; margin:0 0 22px; text-shadow:0 2px 24px rgba(0,0,0,.35) }
.hero.hero-cover .sub{ margin:0 auto 34px; max-width:680px; text-shadow:0 1px 12px rgba(0,0,0,.3) }
.hero.hero-cover .ctas{ justify-content:center }
@media(max-width:680px){ .hero.hero-cover{ min-height:62vh; padding:80px 20px } }
/* Startseite: Hero linksbündig, Foto rechts sichtbar, Vertrauenszeile (2026-10-07, Testseite Layout 3) */
.hero.hero-cover.hero-cover--left{justify-content:flex-start}
.hero.hero-cover.hero-cover--left::before{background:linear-gradient(90deg,rgba(10,41,82,.94) 0%,rgba(10,41,82,.84) 42%,rgba(10,41,82,.30) 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.hero-cover.hero-cover--left .hero-inner{max-width:var(--container);width:100%;text-align:left}
.hero-cover--left .hero-col{max-width:820px}
.hero-cover--left .hero-col .sub{max-width:620px}
.hero.hero-cover.hero-cover--left h1{font-size:clamp(34px,4.8vw,58px);text-wrap:balance}
.hero.hero-cover.hero-cover--left h1 em{display:block}
.hero.hero-cover.hero-cover--left .sub{margin:0 0 30px}
.hero.hero-cover.hero-cover--left .ctas{justify-content:flex-start}
.hero-trust{display:flex;flex-direction:column;gap:8px;margin:30px 0 0;padding:0;list-style:none;font:500 15px/1.4 var(--font);color:rgba(255,255,255,.86)}
.hero-trust li{display:flex;align-items:center;gap:9px}
.hero-trust li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime);flex-shrink:0}
.hero-trust strong{color:#fff;font-weight:800}
@media(max-width:680px){ .hero.hero-cover.hero-cover--left::before{background:linear-gradient(180deg,rgba(10,41,82,.80),rgba(10,41,82,.90))} .hero-trust{gap:6px;font-size:14px} }
@media(max-height:500px){ .hero.hero-cover{ min-height:auto; padding:56px 20px } }

/* Hero-Bild flach + Container-breit (kein Radius, kein Schatten, bündig zur Container-Kante) */
.hero.hero-image-flat .hero-2col-grid{ grid-template-columns:1fr 1fr; gap:0; align-items:stretch; min-height:460px }
.hero.hero-image-flat .hero-text{ padding-right:56px; display:flex; flex-direction:column; justify-content:center }
.hero.hero-image-flat .hero-image{ align-self:stretch; position:relative }
.hero.hero-image-flat .hero-image img{ width:100%; height:100%; object-fit:cover; border-radius:0; filter:none; display:block }
.hero.hero-image-flat .hero-image .img-placeholder{ border-radius:0; height:100%; aspect-ratio:auto }
@media(max-width:880px){
  .hero.hero-image-flat .hero-2col-grid{ grid-template-columns:1fr; min-height:auto; gap:24px }
  .hero.hero-image-flat .hero-text{ padding-right:0 }
  .hero.hero-image-flat .hero-image img{ aspect-ratio:16/9; height:auto }
}

/* ============================================
   UTILITIES — Screen-Reader-Only (a11y + SEO)
   Element bleibt im DOM (Google + Screen-Reader lesen), ist aber visuell 0×0
   ============================================ */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================
   V8 · Klassen statt Inline-Styles (M-41) — Werte 1:1 aus den bisherigen style-Attributen
   ============================================ */
.story-title{font:800 var(--fs-2)/1.2 var(--font);color:var(--navy);margin:0 0 16px;max-width:540px;overflow-wrap:break-word;hyphens:auto}
.story-text{font-size:16px;line-height:1.7;color:var(--text);margin:0 0 14px}
.story-text--last{margin-bottom:22px}
.usp-bullets{list-style:none;padding:0;margin:8px 0 0}
.usp-bullets--spaced{margin-top:12px}
.usp-bullets li{position:relative;padding:6px 0 6px 22px;font-size:14.5px;line-height:1.55;color:var(--text)}
.usp-bullets li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--navy);border-radius:50%}
.section-cta{text-align:center;margin-top:36px}
a.service-card{text-decoration:none;color:inherit}

/* Legal-Hero (vorher 5x identisch inline auf den Rechtsseiten, M-44) */
.legal-hero{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.legal-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,var(--sky-bright) 0%,transparent 60%);opacity:.15;pointer-events:none}
.legal-hero .eyebrow{color:var(--lime);position:relative;z-index:2}
.legal-hero h1, .legal-hero .sub, .legal-hero .updated{position:relative;z-index:2}

/* Formulare: Platzhalter lesbar (Firefox-Default 3,25:1), Fehler- und Hinweistexte (K-07) */
.contact-form ::placeholder,.newsletter-form ::placeholder,.login-card-body ::placeholder{color:var(--muted);opacity:1}
.form-hint{margin:6px 0 0;font:500 13px/1.45 var(--font);color:var(--muted)}
.field-error{margin:10px 0 0;font:600 13.5px/1.4 var(--font);color:#B3261E}
.contact-form [aria-invalid="true"]{border-color:#B3261E}
.thema-fieldset{border:0;margin:0;padding:0;min-width:0}
.thema-fieldset legend{padding:0;font:700 13px/1.3 var(--font);color:var(--navy);margin:0 0 4px;text-transform:uppercase;letter-spacing:.06em}

/* Thema-Karten im Kontaktformular: Tastaturfokus sichtbar (K-08), Auswahl auch ohne JS sichtbar */
.thema-card:focus-within{outline:3px solid var(--navy-dark);outline-offset:2px}
.thema-card:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}

/* Logo-Laufband anhalten (WCAG 2.2.2, H-25) */
.marquee-toggle{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-input);background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.marquee-toggle:hover{border-color:var(--navy)}
.marquee-toggle svg{width:14px;height:14px;fill:currentColor}
.trust-marquee.is-paused .trust-marquee-track{animation-play-state:paused}

/* Karussell-Punkte: groessere Trefferflaeche (WCAG 2.5.8), inaktive Punkte sichtbarer */
.carousel-dot{position:relative;background:rgba(31,90,153,.45)}
/* Karussell-Punkte: Klickfläche 24 px (WCAG 2.5.8), sichtbarer Punkt per ::after */
.carousel-dots{ gap:2px }
.carousel-dot{ width:24px; height:24px; background:transparent; border-radius:12px; display:inline-flex; align-items:center; justify-content:center }
.carousel-dot::after{ content:''; width:10px; height:10px; border-radius:5px; background:rgba(31,90,153,.45); transition:width .22s ease, background .22s ease }
.carousel-dot:hover{ background:transparent }
.carousel-dot:hover::after{ background:rgba(31,90,153,.65) }
.carousel-dot.active{ width:36px; background:transparent }
.carousel-dot.active::after{ width:28px; background:var(--navy) }

/* Navigation (Block A): Uebersichts-Link nur im Drawer · per Escape geschlossenes Mega-Menue · Main-Fokus nach Skip-Link */
.drawer-overview{display:none}
body.nav-open .site-nav .drawer-overview{display:block;margin:0 0 12px;padding:8px 12px;font:700 14px/1.3 var(--font);color:var(--navy);background:var(--sky-soft);border-radius:6px;text-decoration:none}
.site-nav>li.has-mega.mega-closed>.mega-menu{display:none}
#main:focus{outline:none}
/* Pfeile aus CSS nicht vorlesen */
.case-result-bullets li::before{content:'→';content:'→' / ''}
.value-strip.value-strip--overlap .value-item-label::after{content:" →";content:" →" / ""}

/* Logo-Laufband: Pause-Knopf mobil mittig, bei reduzierter Bewegung ueberfluessig */
@media(max-width:680px){ .marquee-toggle{ margin:0 auto } }
@media(prefers-reduced-motion:reduce){ .marquee-toggle{ display:none } }

/* V8 Block G: Mobil-Fehler aus dem Design-Review */
/* Hero mit Bild: unter 880 px untereinander, Grafik in lesbarer Breite */
@media(max-width:880px){
  .hero-2col-grid{ grid-template-columns:1fr; gap:32px }
  .hero-2col-grid .hero-image{ max-width:560px; width:100%; margin:0 auto }
}
/* Value-Strip: Spalten duerfen schmaler werden als das laengste Wort, Woerter werden getrennt */
.value-item{ min-width:0 }
.value-item-label,.value-item-desc{ overflow-wrap:break-word; hyphens:auto }
@media(max-width:680px){ .value-strip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:480px){
  .value-strip:not(.value-strip--overlap) .value-strip-grid{ grid-template-columns:1fr; gap:16px }
  .value-strip:not(.value-strip--overlap) .value-item{ justify-content:flex-start }
}
/* Kontakt: versteckte Checkbox bleibt in ihrer Karte */
#pflicht-hinweis{ margin:4px 0 24px }
.thema-card{ position:relative }
.thema-card input{ inset:0; width:100%; height:100%; margin:0 }

/* V8 Block H: Entscheidungen Robin 2026-10-05 */
/* M-02 Sichtbarer Breadcrumb */
.breadcrumb{ background:#fff; border-bottom:1px solid var(--border) }
.breadcrumb ol{ max-width:var(--container); margin:0 auto; padding:10px 24px; list-style:none; display:flex; flex-wrap:wrap; font:500 13px/1.4 var(--font); color:var(--muted) }
.breadcrumb li+li::before{ content:'›'; margin:0 8px; color:var(--border-input) }
.breadcrumb a{ color:var(--navy); text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline }
.breadcrumb [aria-current]{ color:var(--text) }
@media(max-width:640px){ .breadcrumb ol{ padding:8px 16px; font-size:12px } }
/* K-09 Projektbeschreibung statt Kundenzitat */
.case-quote--fact{ padding-left:0 }
.case-quote--fact::before{ content:none }
.case-fact{ font:600 20px/1.45 var(--font); color:#fff; margin:0 0 12px }
.case-fact-meta{ font:600 13px/1.4 var(--font); color:rgba(255,255,255,.8); letter-spacing:.04em; margin:0 }
@media(max-width:640px){ .case-fact{ font-size:17px } }
/* M-11 Infografiken in Hub-Karten nicht beschneiden */
.service-card-img.cover:has(img[src*="infografik"]) img,
.service-card-img.cover:has(img[src*="manuell-vs-automatisch"]) img{ object-fit:contain; padding:8px }
.service-card-img.cover:has(img[src*="infografik"]),
.service-card-img.cover:has(img[src*="manuell-vs-automatisch"]){ background:#fff }
.service-card-img.cover:has(img[src*="infografik"])::before,
.service-card-img.cover:has(img[src*="manuell-vs-automatisch"])::before{ display:none }
/* M-40 weitere Referenzen auf Produktseiten */
.more-refs-title{ font:700 var(--fs-4)/1.3 var(--font); color:var(--navy-dark); margin:48px 0 16px }
.references-grid--2{ grid-template-columns:repeat(2,1fr) }
@media(max-width:680px){ .references-grid--2{ grid-template-columns:1fr } }
/* Design V2 Überschriften Navy-dunkel */
.section-title,.story-title,.usp h3,.service-card h3,.reference-card h3,.faq-item summary,.feature-pin h3{ color:var(--navy-dark) }
/* Design V4 Story-Texte mit Einleitung */
.story-block-text .story-text:first-of-type{ font-size:18px; line-height:1.6; color:var(--navy-dark) }
.story-text strong{ font-weight:600; color:inherit }
/* Design V5 Schlankerer Header */
.site-header-top-inner{ padding-top:6px; padding-bottom:6px; gap:22px }
.site-header-top a{ padding:4px 0 }
.site-header-main{ padding-top:8px; padding-bottom:8px }
.site-header-logo img{ height:40px }
/* Design V7 Raster ohne Waisen (8 Funktionen → 4+4) */
@media(min-width:1100px){ .feature-pins{ grid-template-columns:repeat(4,1fr) } .feature-pin{ flex-direction:column; gap:8px } }

/* Design V3 (Robin 2026-10-05): Icon-Kacheln überall sichtbar, getönt statt Weiß-auf-Weiß */
.usp .usp-icon,.bg-light .usp .usp-icon,.deliverable .icon,.bg-light .deliverable .icon{ background:rgba(31,90,153,.09); color:var(--navy); width:48px; height:48px; margin-bottom:16px }
.usp .usp-icon svg{ width:24px; height:24px }
.usp{ padding:26px 26px 24px }

/* Links in Formular-Beschriftungen nicht nur über die Farbe erkennbar (WCAG 1.4.1) */
label a{ text-decoration:underline }

/* Bewegung global abschaltbar (WCAG 2.3.3, H-24) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .usp:hover,.deliverable:hover,.reference-card:hover,.journey-step:hover,.download-item:hover,.value-strip--overlap a.value-item:hover,.stats-grid--cards .stat:hover,.authority-strip-item:hover{transform:none}
}

/* ============================================
   V8 · Uebernahmen aus dem Alpha-Standards-Vergleich (2026-09-24)
   ============================================ */

/* Referenz-Card mit Foto — vorbereitet, HTML-Muster: .reference-card.has-photo > .rc-photo img + .rc-body (Fotos folgen mit neuen Projekten) */
.reference-card.has-photo{padding:0}
.reference-card.has-photo .rc-photo{height:190px;overflow:hidden;background:var(--off-white);border-bottom:1px solid var(--border)}
.reference-card.has-photo .rc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.reference-card.has-photo:hover .rc-photo img{transform:scale(1.04)}
.reference-card.has-photo .rc-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}

/* Bewegung abschaltbar (WCAG 2.3.3) */
@media(prefers-reduced-motion:reduce){
  .btn,.pullquote-cta,.service-card,.service-card .service-card-img img,.reference-card.has-photo .rc-photo img{transition:none}
  .btn:hover,.btn:active,.pullquote-cta:hover,.pullquote-cta:active,.service-card:hover,.service-card:hover .service-card-img img,.reference-card.has-photo:hover .rc-photo img{transform:none}
}

/* Kleinere Laptops (1025–1240 px): Header kompakter, sonst ragt der Button hinaus (Block V, 2026-10-07) */
@media(min-width:1025px) and (max-width:1240px){
  .site-header-main{gap:16px}
  .site-nav{gap:2px}
  .site-nav a.nav-link{padding:10px 10px;font-size:14.5px}
  .site-nav>li.has-mega>a.nav-link{padding-right:20px}
  .site-header-cta .btn{padding:10px 14px}
}

/* Hub-Kacheln mit Agentur-Teasern · Variante 4+5 (Block AA, 2026-10-09)
   Bild links auf heller Fläche (Weiß der Teaser wird per multiply zur Fläche), weiße Textkarte ragt von rechts über das Bild */
.service-grid.teaser-grid > .service-card{flex:0 1 calc(50% - 12px);min-width:0;background:transparent;border:0;box-shadow:none;overflow:visible;display:grid;grid-template-columns:58% 1fr;align-items:center}
.service-grid.teaser-grid > .service-card:hover{box-shadow:none;border:0;transform:translateY(-4px)}
.service-grid.teaser-grid .service-card-img.teaser-img{grid-column:1;grid-row:1;height:auto;aspect-ratio:4/3;padding:0;background:#E8F0F8;border-radius:var(--radius);overflow:hidden;display:block}
.service-grid.teaser-grid .service-card-img.teaser-img::before,.service-grid.teaser-grid .service-card-img.teaser-img::after{display:none}
.service-grid.teaser-grid .service-card-img.teaser-img img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;mix-blend-mode:multiply}
.service-grid.teaser-grid .service-card-body{grid-column:2;grid-row:1;position:relative;z-index:1;margin:16px 0 16px -56px;background:#fff;border:1px solid rgba(31,90,153,.18);border-radius:12px;box-shadow:0 10px 28px rgba(15,41,82,.12);padding:20px 20px 18px;transition:border-color .2s ease,box-shadow .2s ease}
.service-grid.teaser-grid .service-card-body h3{font-size:var(--fs-5)}
.service-grid.teaser-grid .service-card-body p{font-size:14.5px}
.service-grid.teaser-grid > .service-card:hover .service-card-body,.service-grid.teaser-grid > .service-card:focus-visible .service-card-body{border-color:var(--navy);box-shadow:0 14px 36px rgba(31,90,153,.2)}
@media(max-width:1180px){.service-grid.teaser-grid > .service-card{grid-template-columns:48% 1fr}.service-grid.teaser-grid .service-card-body{margin-left:-40px}}
@media(max-width:880px){.service-grid.teaser-grid > .service-card{flex-basis:100%}}
@media(max-width:560px){.service-grid.teaser-grid > .service-card{display:block}.service-grid.teaser-grid .service-card-body{margin:-56px 14px 0}}

/* Experten-Zitat · Variante A (Block AB, 2026-10-09): frei stehend, großes Anführungszeichen, Person zentriert, Textlink */
.expert-band,.expert-band.expert-band--portrait{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;column-gap:14px;row-gap:18px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;max-width:880px;margin:0 auto;text-align:center;overflow:visible}
.expert-band::before{content:'“' / '';grid-column:1 / -1;font:800 110px/.6 var(--font);color:var(--lime);height:46px}
.expert-band .expert-band-text,.expert-band.expert-band--portrait .expert-band-text{display:contents}
.expert-band .expert-band-quote,.expert-band.expert-band--portrait .expert-band-quote{grid-column:1 / -1;order:1;margin:0;font:500 clamp(20px,2.4vw,26px)/1.5 var(--font);font-style:normal;color:var(--navy-dark)}
.expert-band .pullquote-avatar,.expert-band.expert-band--portrait .pullquote-avatar{order:2;grid-column:2;flex:none;width:60px;height:60px;border-radius:50%;border:2px solid var(--navy);align-self:center}
.expert-band.expert-band--portrait .pullquote-avatar .avatar-fallback{font-size:18px}
.expert-band .expert-band-meta{order:3;grid-column:3;text-align:left}
.expert-band .pullquote-cta,.expert-band.expert-band--portrait .pullquote-cta{order:4;grid-column:1 / -1;justify-self:center;align-self:auto;margin:0;width:auto;min-height:44px;background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0;color:var(--navy);font:700 15px/1.3 var(--font);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--lime)}
.expert-band .pullquote-cta:hover{background:none;border:0;transform:none;box-shadow:none;color:var(--navy-dark);text-decoration-color:var(--navy)}
section:has(> .container > .expert-band:only-child){padding-top:72px;padding-bottom:72px}
@media(max-width:680px){
  .expert-band,.expert-band.expert-band--portrait{padding:0;gap:16px 12px}
  .expert-band::before{font-size:88px;height:36px}
  section:has(> .container > .expert-band:only-child){padding-top:56px;padding-bottom:56px}
}
.case-expert-quote{font-style:normal}

/* Startseite · Produkte: Bike-Counter groß + 4 kompakt (Block AG, 2026-10-12) — ersetzt das Produkt-Karussell
   Teaser auf hellblauer Fläche (Weiß per multiply zur Fläche). Große Karte: Titel-Link deckt per ::after die Karte ab, Partner-Link liegt darüber */
.product-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:36px}
.product-feature .service-card-img{height:auto;aspect-ratio:4/3;padding:0;background:#E8F0F8;display:block}
.product-feature .service-card-img::before,.product-feature .service-card-img::after{display:none}
.product-feature .service-card-img img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;mix-blend-mode:multiply}
.product-feature-main{position:relative}
.product-feature-main .service-card-body{padding:24px 26px}
.product-feature-main h3{font-size:var(--fs-3);font-weight:800}
.product-feature-main p{font-size:16px}
.product-feature-link{color:inherit;text-decoration:none}
.product-feature-link::after{content:'';position:absolute;inset:0;border-radius:var(--radius);z-index:1}
.product-feature-link:focus-visible{outline:none}
.product-feature-link:focus-visible::after{outline:3px solid var(--navy-dark);outline-offset:3px}
.product-feature-tag{align-self:flex-start;font:800 11.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--navy-dark);background:var(--lime);border-radius:999px;padding:6px 10px;margin-bottom:12px}
.product-feature-actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.product-feature-actions .service-card-cta{margin-top:0;align-self:center}
.product-feature-partner{position:relative;z-index:2;display:inline-block;padding:12px 0;font:700 15px/1.3 var(--font);color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--lime)}
.product-feature-partner:hover{color:var(--navy-dark);text-decoration-color:var(--navy)}
.product-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.product-feature-list .service-card-body{padding:14px 16px 16px}
.product-feature-list h3{font-size:var(--fs-5);margin-bottom:6px}
.product-feature-list p{font-size:13.5px;line-height:1.5;margin:0 0 10px}
@media(max-width:880px){.product-feature{grid-template-columns:1fr}}
@media(max-width:560px){
  .product-feature-list{grid-template-columns:1fr}
  .product-feature-list > .service-card{display:grid;grid-template-columns:42% 1fr;align-items:center}
  .product-feature-list .service-card-img{height:100%}
  .product-feature-list p{display:none}
  .product-feature-main .service-card-body{padding:20px}
}

/* Layout-Feinschliff nach Messlauf (Block AI, 2026-10-12): Raster ohne Lücken, Zeilenlängen, gleich hohe Kacheln */
/* Ablauf-Karten: schmalere Pfeil-Spalte, damit der zentrierte Text mehr Breite hat */
@media(min-width:901px){
  .journey-zigzag .journey-line{flex:0 0 40px}
  .journey-zigzag .journey-line svg{width:30px}
}
@media(min-width:901px) and (max-width:1200px){.journey-zigzag .journey-step{padding:28px 20px}}
/* Raster ohne Einzelgänger: 8 Kacheln → 4+4, 2 oder 4 Downloads → 2 Spalten */
@media(min-width:1100px){
  .container > .feature-pins{grid-template-columns:repeat(4,1fr)}
  .deliverables:has(> .deliverable:nth-child(8):last-child) > .deliverable{flex-basis:calc(25% - 15px);min-width:0}
}
@media(min-width:881px){
  .download-grid:has(> :nth-child(2):last-child),
  .download-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
/* Zeilenlänge */
.case-expert-quote{max-width:68ch}
.faq-intro .section-lead{font-size:17px}
/* Startseite mobil: Value-Strip-Kacheln gleich hoch, damit die Trennlinien fluchten */
@media(max-width:880px){.value-strip.value-strip--overlap .value-strip-grid{align-items:stretch}}
/* Kartentexte ohne einzelne Wörter in der letzten Zeile */
.service-card-body p,.usp p,.deliverable p,.journey-step p,.reference-card-task,.hardware-card p,.feature-pin p,.case-expert-quote,.expert-band-quote{text-wrap:pretty}

/* Mobile-Feinschliff nach Handy-Messlauf (Block AK, 2026-10-13) */
/* Keine Schrift unter 12 px (Etiketten in Versalien) */
.case-result-meta .meta-label,.reference-card-tag,.legal-toc .legal-toc-title,.story-hero-since-label,.product-feature-tag{font-size:12px}
body .dl-card-meta{font-size:12.5px}
@media(max-width:720px){
  /* iOS zoomt bei Eingabefeldern unter 16 px beim Antippen ins Formular */
  .contact-form :is(input,select,textarea),body .login-card-body input,body .newsletter-form :is(input,select),.hero-form-card :is(input,select){font-size:16px}
  /* Tippflächen: kleine Links bekommen Höhe über Innenabstand, Abstände bleiben optisch gleich */
  .site-footer ul a,.footer-nap a{display:inline-block;padding:5px 0}
  .site-footer ul li{margin-bottom:2px}
  .breadcrumb ol{padding:2px 16px;font-size:13px}
  .breadcrumb a{display:inline-block;padding:8px 0}
  .usp p > a{display:inline-block;padding:8px 0}
  body .dl-card-meta .download-link{display:inline-block;padding:10px 0;margin:-10px 0}
  body .contact-card-list li a,.legal-data-table a,a[href^="https://maps.google"]{display:inline-block;padding:6px 0}
  /* Kartentexte am Handy mindestens 14 px */
  .deliverable p,body .feature-pin p,body .country-card p,body .hardware-card p,body .profile-card-body p,body .dl-card p,.download-text span,.case-result-bullets li,.newsletter-bullets p{font-size:14px}
  body .team-card-role,body .team-card-spec{font-size:13px}
}
@media(max-width:680px){
  /* Kontaktformular: Anrede + Name untereinander */
  .contact-form.contact-form--full .field-row{grid-template-columns:1fr;gap:0}
}

/* Nachtrag Mobile-Audit (Block AK2, 2026-10-13): Handy-Menü oben beginnend, Hero-Buttons gleich breit */
@media(max-width:1024px){body.nav-open .site-nav{justify-content:flex-start}}
@media(max-width:560px){.hero .ctas .btn{width:100%;justify-content:center}}

/* Handy-Menü: Schließen-Knopf liegt über dem geöffneten Menü (Block AK3, 2026-10-13) */
@media(max-width:1024px){body.nav-open .nav-burger{position:relative;z-index:101}}

/* Startseite: Kacheln unter dem Hero oben bündig (Block AN2, 2026-10-13) */
.value-strip.value-strip--overlap .value-strip-grid{align-items:stretch}
.value-strip.value-strip--overlap .value-item{justify-content:flex-start}

/* Unterstrichene Textlinks: Pfeil ohne Unterstrich (Block AP, 2026-10-13). inline-block-Elemente erben die Unterstreichung nicht. */
.expert-band .pullquote-cta,.expert-band.expert-band--portrait .pullquote-cta{display:inline-block;padding:12px 0;min-height:0}
.expert-band .pullquote-cta::after{display:inline-block;margin-left:8px}
.product-feature-partner > span[aria-hidden="true"],a[href^="https://maps.google"] > span[aria-hidden="true"]{display:inline-block;margin-left:7px}

/* Anwendungs-Kontexte als Karten (Block AS, 2026-10-13) — ersetzt die Reiter (.vtabs). Karten sind nicht klickbar, daher kein Hover. */
.context-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
@media(min-width:1024px){.context-grid:has(> .context-card:nth-child(3):last-child),.context-grid:has(> .context-card:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
.context-card{background:#fff;border:1px solid rgba(31,90,153,.14);border-radius:var(--radius);padding:26px 28px 22px;box-shadow:0 1px 2px rgba(15,41,82,.05)}
.context-nr{display:inline-block;font:800 12px/1 var(--font);letter-spacing:.06em;color:var(--navy-dark);background:var(--lime);border-radius:999px;padding:5px 9px}
.context-card h3{font:700 var(--fs-5)/1.3 var(--font);color:var(--navy-dark);margin:12px 0 8px;overflow-wrap:break-word;hyphens:auto}
.context-card > p{font-size:15px;line-height:1.7;color:var(--text);margin:0 0 10px;text-wrap:pretty}
.context-list{list-style:none;padding:0;margin:0}
.context-list li{padding:7px 0 7px 22px;position:relative;font-size:14.5px;line-height:1.55;color:var(--text)}
.context-list li::before{content:'';position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--navy);border-radius:50%}
@media(max-width:760px){.context-grid{grid-template-columns:1fr;gap:16px;margin-top:28px}.context-card{padding:22px 20px 18px}}

/* Anwendungs-Kontexte: Nummer, Titel, Text und Aufzählung je Kartenreihe auf einer Linie (Block AS2, 2026-10-13) */
.context-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
.context-card > .context-nr{grid-row:1;justify-self:start;align-self:start}
.context-card > h3{grid-row:2}
.context-card > p{grid-row:3}
.context-card > .context-list{grid-row:4}

/* ===== Interaktions-System (Block AT, 2026-10-13) — eine Logik für Hover und Klick =====
   Klickbare Karten: 4 px anheben, Navy-Rahmen, ein Schatten · Textlinks: Pfeil rückt · Nicht klickbar: nur Rahmen dezent · Buttons unverändert */
:root{--ix-fast:.15s;--ix:.25s;--ix-ease:cubic-bezier(.2,.7,.2,1);--ix-shadow:0 14px 36px rgba(31,90,153,.18)}
/* Klickbare Karten und Kacheln */
.service-card,body .hardware-card,.download-item,body .dl-card,.authority-strip-item{transition:transform var(--ix) var(--ix-ease),box-shadow var(--ix) var(--ix-ease),border-color var(--ix-fast) ease,background-color var(--ix-fast) ease}
.value-strip.value-strip--overlap .value-item{transition:transform var(--ix) var(--ix-ease)}
.service-card:hover,body .hardware-card:hover,body .download-item:hover,body .dl-card:has(a.download-link):hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:var(--ix-shadow)}
.service-grid.teaser-grid > .service-card:hover{transform:translateY(-4px)}
.service-grid.teaser-grid > .service-card:hover .service-card-body{box-shadow:var(--ix-shadow);border-color:var(--navy)}
.value-strip.value-strip--overlap a.value-item:hover,.authority-strip-item:hover{transform:translateY(-4px)}
.authority-strip-item:hover{background:transparent}
.authority-strip-item .authority-strip-logo{transition:box-shadow var(--ix) var(--ix-ease),border-color var(--ix-fast) ease}
.authority-strip-item:hover .authority-strip-logo{box-shadow:var(--ix-shadow);border-color:var(--navy)}
a.service-card:active,.product-feature-main:active,body .hardware-card:active,.value-strip.value-strip--overlap a.value-item:active,body .download-item:active,.authority-strip-item:active,body .dl-card:has(a.download-link):active{transform:translateY(-1px);transition-duration:.08s}
.service-card .service-card-img img{transition:transform .35s var(--ix-ease)}
.service-card:hover .service-card-img img{transform:scale(1.03)}
.service-card-cta,body .hardware-card-arrow,.value-strip.value-strip--overlap .value-item-label::after{transition:transform var(--ix) var(--ix-ease),color var(--ix-fast) ease}
.service-card:hover .service-card-cta,body .hardware-card:hover .hardware-card-arrow,.value-strip.value-strip--overlap a.value-item:hover .value-item-label::after{transform:translateX(4px)}
/* Download-Karten (Downloads-Seite): ganze Karte klickbar, wenn die Datei verlinkt ist */
body .dl-card:has(a.download-link){position:relative;cursor:pointer}
body .dl-card a.download-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
body .dl-card a.download-link > span{display:inline-block;transition:transform var(--ix) var(--ix-ease)}
body .dl-card:has(a.download-link):hover a.download-link > span{transform:translateX(4px)}
/* Textlinks mit Pfeil */
.expert-band .pullquote-cta::after,.product-feature-partner > span[aria-hidden="true"],a[href^="https://maps.google"] > span[aria-hidden="true"]{transition:transform var(--ix) var(--ix-ease)}
.expert-band .pullquote-cta:hover::after,.product-feature-partner:hover > span[aria-hidden="true"],a[href^="https://maps.google"]:hover > span[aria-hidden="true"]{transform:translateX(3px)}
.expert-band .pullquote-cta,.product-feature-partner{transition:color var(--ix-fast) ease,text-decoration-color var(--ix-fast) ease}
/* Nicht klickbar: dezent — nur der Rahmen wird etwas dunkler, kein Anheben, kein Schatten */
.usp,.usp-dark,.deliverable,.journey-step,body .country-card,body .feature-pin,body .dl-card:not(:has(a.download-link)){transition:border-color var(--ix-fast) ease}
.usp:hover,.deliverable:hover,.journey-step:hover,body .country-card:hover,body .feature-pin:hover,body .dl-card:not(:has(a.download-link)):hover{transform:none;border-color:var(--border-hover)}
.usp:hover,.journey-step:hover{box-shadow:var(--shadow)}
.deliverable:hover{box-shadow:0 4px 12px rgba(31,90,153,.05)}
body .feature-pin:hover,body .dl-card:not(:has(a.download-link)):hover{box-shadow:none}
.usp-dark:hover{transform:none;box-shadow:none}
/* FAQ (konsolidiert aus drei Definitionen, Aussehen unverändert) — Auf-/Zuklappen per Script weich */
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color var(--ix-fast) ease}
.faq-item[open]{border-color:var(--lime)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font:700 16px/1.4 var(--font);color:var(--navy-dark);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color var(--ix-fast) ease,background-color var(--ix-fast) ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font:700 24px/1 var(--font);color:var(--navy);flex-shrink:0;transition:transform var(--ix) var(--ix-ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:#F3F7FB}
/* FAQ-Antworten Variante B (Block AU, 2026-10-13): Trennlinie, mehr Luft, ruhigere Schrift, Kurzantwort fett */
.faq-body{position:relative;padding:18px 22px 22px;overflow:hidden}
.faq-body::before{content:'';position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--border)}
.faq-body p{margin:0;font-size:15.5px;line-height:1.7;color:#3A4350;max-width:68ch}
.faq-kurz{font-weight:800;color:var(--navy-dark)}
@media(prefers-reduced-motion:reduce){
  .service-card:hover,body .hardware-card:hover,body .download-item:hover,body .dl-card:has(a.download-link):hover,.service-grid.teaser-grid > .service-card:hover,.value-strip.value-strip--overlap a.value-item:hover,.authority-strip-item:hover,.service-card:hover .service-card-img img,.service-card:hover .service-card-cta,body .hardware-card:hover .hardware-card-arrow{transform:none}
  .expert-band .pullquote-cta:hover::after,.product-feature-partner:hover > span[aria-hidden="true"],body .dl-card:has(a.download-link):hover a.download-link > span{transform:none}
}

/* ===== Methodenwahl-Karten ganz klickbar (Block AW, 2026-10-14) — gleiche Logik wie alle klickbaren Karten (Block AT) ===== */
.usp-more{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);transition:text-indent var(--ix) var(--ix-ease)}
.usp-more a{font-weight:700}
.usp-more-arrow{color:var(--lime-dark);font-weight:700;margin-right:6px}
.usp.usp--link{position:relative;cursor:pointer;transition:transform var(--ix) var(--ix-ease),box-shadow var(--ix) var(--ix-ease),border-color var(--ix-fast) ease}
.usp.usp--link .usp-more a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.usp.usp--link:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:var(--ix-shadow)}
.usp.usp--link:hover .usp-more{text-indent:4px}
.usp.usp--link:active{transform:translateY(-1px);transition-duration:.08s}
.usp.usp--link .usp-more a:focus-visible{outline:none}
.usp.usp--link:has(a:focus-visible){outline:3px solid var(--navy-dark);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.usp.usp--link:hover{transform:none}.usp.usp--link:hover .usp-more{text-indent:0}}


/* ===== Hero-Grafik vergrößern (Block AY, 2026-10-15): rundes Lupen-Symbol oben rechts, Klick öffnet eingepasstes Großbild ===== */
.hero-image--zoom{position:relative}
.hero-image--zoom img{cursor:zoom-in}
.hero-zoom{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:var(--navy-dark);cursor:pointer;box-shadow:0 6px 18px rgba(10,41,82,.25);transition:transform var(--ix) var(--ix-ease),background-color var(--ix-fast) ease}
.hero-zoom svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hero-zoom:hover{background:#fff;transform:scale(1.06)}
.hero-zoom:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.hero-zoom[hidden]{display:none}
.img-zoom{border:0;padding:0;background:#fff;width:min(96vw,1600px);max-width:none;height:min(90vh,1100px);max-height:none;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.img-zoom[open]{display:flex;flex-direction:column}
.img-zoom::backdrop{background:rgba(6,20,40,.82)}
.img-zoom-bar{display:flex;gap:8px;justify-content:flex-end;padding:10px;border-bottom:1px solid var(--border);background:#fff}
.img-zoom-bar button{font:700 14px/1 var(--font);border:1px solid var(--border);background:#fff;color:var(--navy-dark);border-radius:999px;padding:10px 16px;cursor:pointer;min-height:44px}
.img-zoom-bar button:hover{border-color:var(--navy)}
.img-zoom-bar button[hidden]{display:none}
.img-zoom-body{flex:1;min-height:0;overflow:auto;background:#fff}
.img-zoom-body img{display:block;width:100%;height:100%;object-fit:contain}
.img-zoom.is-full .img-zoom-body img{width:auto;height:auto;max-width:none}
html:has(.img-zoom[open]){overflow:hidden}

/* ===== Teaser auf Weiß, Grafik leicht hervorgehoben (Block AX4, 2026-10-15) — Startseite und Übersichtsseiten gleich ===== */
.service-grid.teaser-grid .service-card-img.teaser-img{background:#fff;box-shadow:inset 0 0 0 1px rgba(31,90,153,.18)}
.product-feature .service-card-img{background:#fff}
.service-grid.teaser-grid .service-card-img.teaser-img img,.product-feature .service-card-img img{mix-blend-mode:normal;filter:brightness(.9) saturate(1.2)}

/* ===== Kundenlogos als feste Reihe statt Laufband (Block BA, 2026-10-15) ===== */
.trust-bar.trust-bar--static .trust-bar-inner{flex-wrap:nowrap;gap:32px;justify-content:space-between}
.trust-bar.trust-bar--static .label{flex-shrink:0;margin-right:0}
.trust-logo-row{list-style:none;margin:0;padding:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:20px}
.trust-logo-row li{display:flex;justify-content:center;flex:1 1 0;min-width:0}
.trust-bar.trust-bar--static .trust-logo{width:100%;max-width:140px;height:56px} /* schrumpft mit, kein Überlauf zwischen 1000 und 1100 px */
@media(max-width:1000px){
  .trust-bar.trust-bar--static .trust-bar-inner{flex-wrap:wrap;gap:18px}
  .trust-bar.trust-bar--static .label{width:100%;text-align:center}
  .trust-logo-row{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 12px}
  .trust-bar.trust-bar--static .trust-logo{width:100%;max-width:120px;height:44px;padding:0 4px}
  .trust-logo-row li{min-width:0}
}

/* ===== Bild-Text-Abschnitte: Bild immer gleich breit, egal ob links oder rechts (Block BE, 2026-10-22) ===== */
@media(min-width:641px){.story-block:has(> .story-block-text:first-child){grid-template-columns:1.2fr 1fr}}

/* Block AW2 (2026-10-22): Mindestabstand Beschreibung → Trennlinie in Methodenwahl-/Produktauswahl-Kacheln */
.usp.usp--link > :has(+ .usp-more){margin-bottom:18px}

/* ===== Mobile-Durchsicht Runde 2 (Block BF, 2026-10-23) ===== */
/* 1 · Brotkrümel am Handy: nur Zurück-Link zur übergeordneten Seite (‹ Automatische Verkehrszählung), eine Zeile, kein Umbruch.
       Voller Pfad bleibt im HTML und im strukturierten Datensatz (BreadcrumbList) für Google erhalten. */
@media(max-width:720px){
  .breadcrumb ol{flex-wrap:nowrap;align-items:center}
  .breadcrumb li{display:none}
  .breadcrumb li:nth-last-child(2){display:flex;align-items:center;min-width:0}
  .breadcrumb li:nth-last-child(2)::before{content:'‹';margin:0 8px 0 0;font-size:18px;line-height:1;color:var(--navy)}
  .breadcrumb li:nth-last-child(2) > a{display:block;padding:10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* 2 · Menü offen: weiße Fläche beginnt ganz oben, das Schließen-Kreuz liegt vollständig darauf */
@media(max-width:1024px){
  body.nav-open .site-nav{margin:0}
  body.nav-open .nav-burger{background:#fff}
}
/* 3 · Kartenraster am Handy über die volle Breite (cols-Klassen haben bisher 50 % + min. 260 px erzwungen) */
@media(max-width:560px){.usp-grid > .usp,.usp-grid[class*="cols-"] > .usp,.usp-grid > .pullquote{flex-basis:100%;min-width:0}}
/* 4 · Klickbare Kacheln: am Handy mehr Luft zwischen Text und Trennlinie */
@media(max-width:640px){.usp.usp--link > :has(+ .usp-more){margin-bottom:24px}.usp.usp--link .usp-more{padding-top:16px}}
/* 5 · Wertleiste einspaltig: Trennlinien zwischen den Punkten */
@media(max-width:480px){
  .value-strip:not(.value-strip--overlap) .value-strip-grid{gap:0}
  .value-strip:not(.value-strip--overlap) .value-item{padding:14px 0;border-top:1px solid var(--border)}
  .value-strip:not(.value-strip--overlap) .value-item:first-child{border-top:none;padding-top:0}
  .value-strip:not(.value-strip--overlap) .value-item:last-child{padding-bottom:0}
}
/* 6 · Kundenlogos optisch gleich groß: Höhe je Logo nach Seitenverhältnis (runde/kompakte Logos kleiner, breite Wortmarken flacher) */
.trust-logo-row .trust-logo img{width:auto;max-width:100%;height:var(--logo-h,26px);max-height:100%;margin:auto}
.trust-logo-row img[src*="logos/bmw"]{--logo-h:46px}
.trust-logo-row img[src*="logos/stadt-koeln"]{--logo-h:27px}
.trust-logo-row img[src*="logos/lh-muenchen"]{--logo-h:25px}
.trust-logo-row img[src*="logos/obermeyer"]{--logo-h:16px}
.trust-logo-row img[src*="logos/alpha-standards"]{--logo-h:27px}
.trust-logo-row img[src*="logos/vtt"]{--logo-h:34px}
@media(max-width:1000px){
  .trust-logo-row img[src*="logos/bmw"]{--logo-h:38px}
  .trust-logo-row img[src*="logos/stadt-koeln"]{--logo-h:21px}
  .trust-logo-row img[src*="logos/lh-muenchen"]{--logo-h:19px}
  .trust-logo-row img[src*="logos/obermeyer"]{--logo-h:12px}
  .trust-logo-row img[src*="logos/alpha-standards"]{--logo-h:21px}
  .trust-logo-row img[src*="logos/vtt"]{--logo-h:27px}
}
/* 7 · Story-Abschnitt ohne Foto (Datei fehlt noch): Text einspaltig */
.story-block > .story-block-img[data-bild-fehlt]{display:none}
.story-block:has(> .story-block-img[data-bild-fehlt]),.story-block:has(> .story-block-text:first-child):has(> .story-block-img[data-bild-fehlt]){grid-template-columns:1fr}
.story-block:has(> .story-block-img[data-bild-fehlt]) > .story-block-text{max-width:820px}

/* ===== Startseite „Was wir für Sie tun“: Bild groß, Textkarte überlappt (Block BG, 2026-10-23, Variante C) ===== */
@media(min-width:1100px){
  #angebot .story-block,#angebot .story-block:has(> .story-block-text:first-child){gap:0;align-items:center}
  #angebot .story-block{grid-template-columns:1.5fr 1fr}
  #angebot .story-block:has(> .story-block-text:first-child){grid-template-columns:1fr 1.5fr}
  #angebot .story-block .story-block-img{min-width:0}
  #angebot .story-block-text{position:relative;z-index:3;background:#fff;border:1px solid rgba(31,90,153,.14);border-radius:var(--radius);box-shadow:0 18px 44px rgba(15,41,82,.14);padding:32px 34px;margin-left:-110px}
  #angebot .story-block > .story-block-text:first-child{margin-left:0;margin-right:-110px}
  #angebot .story-block-text .story-text:not(:first-of-type){font-size:14.5px}
}

/* ===== Bild-Text-Abschnitte mit Foto: Textkarte überlappt das Bild, wie Startseite (Block BH, 2026-10-26) ===== */
/* Nur Abschnitte mit echtem Foto (Klasse .story-block--karte), Infografiken und Abschnitte ohne Bild bleiben wie bisher */
@media(min-width:1100px){
  .story-block.story-block--karte,.story-block.story-block--karte:has(> .story-block-text:first-child){gap:0;align-items:center}
  .story-block.story-block--karte{grid-template-columns:1.5fr 1fr}
  .story-block.story-block--karte:has(> .story-block-text:first-child){grid-template-columns:1fr 1.5fr}
  .story-block.story-block--karte > .story-block-img{min-width:0}
  .story-block.story-block--karte > .story-block-text{position:relative;z-index:3;background:#fff;border:1px solid rgba(31,90,153,.14);border-radius:var(--radius);box-shadow:0 18px 44px rgba(15,41,82,.14);padding:32px 34px;margin-left:-110px}
  .story-block.story-block--karte > .story-block-text:first-child{margin-left:0;margin-right:-110px}
  .story-block.story-block--karte .story-text:not(:first-of-type){font-size:14.5px}
}

/* ===== Produkt-Datenblatt mit großer Grafik + Partner-Teaser (Block BI, 2026-10-26, Bike-Counter) ===== */
.spec-sheet-img{position:relative;max-width:980px;margin:32px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 36px}
.spec-sheet-img img{width:100%;height:auto;display:block}
.spec-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;margin-top:48px}
.spec-group-title{display:flex;align-items:center;gap:12px;font:800 var(--fs-4)/1.3 var(--font);color:var(--navy);margin:0 0 8px}
.spec-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(31,90,153,.08);color:var(--navy);flex-shrink:0}
.spec-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spec-group dl{margin:0;border-bottom:1px solid var(--border)}
.spec-group dt{padding:12px 0 2px;border-top:1px solid var(--border);font:700 12.5px/1.4 var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.spec-group dd{margin:0;padding:0 0 12px;font-size:15px;line-height:1.5;font-weight:600;color:var(--navy-dark)}
.spec-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:44px}
.spec-pdf{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font:700 15px/1.3 var(--font);text-decoration:none;padding:10px 0}
.spec-pdf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.spec-pdf span{border-bottom:2px solid var(--lime)}
.spec-pdf small{font-weight:500;color:var(--muted);font-size:13px;margin-left:4px}
.spec-pdf:hover span{border-bottom-color:var(--navy)}
.partner-teaser{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;background:#EFF4FA;border-radius:var(--radius);padding:44px 52px}
.partner-teaser-img img{width:100%;height:auto;display:block}
.partner-teaser-title{font:800 var(--fs-2)/1.2 var(--font);color:var(--navy-dark);margin:6px 0 14px}
.partner-teaser-text p{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--text)}
.partner-teaser-checks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.partner-teaser-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--text)}
.partner-teaser-checks svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .spec-groups{grid-template-columns:1fr;gap:28px}
  .spec-sheet-img{padding:14px}
  .partner-teaser{grid-template-columns:1fr;gap:28px;padding:28px 22px}
  .partner-teaser-img{max-width:280px;margin:0 auto}
}
@media(max-width:560px){.spec-ctas{flex-direction:column}}

/* ===== Vertriebspartner vorerst ausgeblendet (Block BP, 2026-10-30) — zum Einschalten diese Regel entfernen ===== */
[data-ausgeblendet="vertriebspartner"]{display:none!important}

/* ===== Rundbild an der Abschnitts-Überschrift (Block BS, 2026-10-30, Unternehmensseite „Heute“) ===== */
.story-kopf{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.story-kopf-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex-shrink:0;box-shadow:0 0 0 4px #fff,0 6px 18px rgba(15,41,82,.18)}
.story-kopf .story-title{margin-bottom:0}
@media(max-width:560px){.story-kopf{gap:14px}.story-kopf-avatar{width:64px;height:64px}}

/* ===== Team: Geschäftsführungs-Karte + Raster (Block BU, 2026-10-30; vorher nur im Seiten-CSS von unternehmen.html) — genutzt auf Über uns + Kontakt ===== */
.team-gf{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-top:36px;box-shadow:var(--shadow)}
.team-gf img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.team-gf h3{margin:4px 0 10px;font:800 var(--fs-4)/1.25 var(--font);color:var(--navy-dark)}
.team-gf-tag{font:800 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.team-gf-link{font:700 14.5px/1.4 var(--font);color:var(--navy);text-decoration:none}
.team-gf-link:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}
.team-raster{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:18px}
.team-person{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center;transition:border-color var(--ix-fast) ease}
.team-person:hover{border-color:var(--border-hover)}
.team-person img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0 auto 12px;display:block;background:var(--navy)}
.team-person h3{margin:0 0 4px;font:800 15.5px/1.25 var(--font);color:var(--navy-dark)}
.team-person-role{margin:0;font:500 13px/1.4 var(--font);color:var(--muted)}
.team-person-zust{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--border);font:600 13.5px/1.45 var(--font);color:var(--text)}
.team-person-zust span{display:block;font:700 10.5px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:4px}
.team-raster{grid-auto-rows:auto}
.team-person{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
.team-person > img{grid-row:1}.team-person > h3{grid-row:2}.team-person > .team-person-role{grid-row:3}.team-person > .team-person-zust{grid-row:4;align-self:start}
@media(max-width:1000px){.team-raster{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.team-raster{grid-template-columns:repeat(2,1fr);gap:12px}.team-gf{grid-template-columns:1fr;text-align:center;padding:24px 20px}.team-gf img{margin:0 auto}}
/* Kontaktseite: zusätzlich Telefon + E-Mail je Person */
.team-raster--kontakt .team-person{grid-row:span 5}
.team-raster--kontakt .team-person > .team-person-kontakt{grid-row:5;align-self:end}
.team-person-kontakt,.team-gf-kontakt{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font:700 13.5px/1.4 var(--font)}
.team-person-kontakt{justify-content:center;padding-top:14px}
.team-person-kontakt a,.team-gf-kontakt a{color:var(--navy);text-decoration:none}
.team-person-kontakt a:hover,.team-gf-kontakt a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}
@media(max-width:620px){.team-gf-kontakt{justify-content:center}}