/* ================================================================
   Rosenberger Telematics — Homepage Stylesheet
   All design tokens are defined here. Per-page inline <style> blocks
   repeat only the color tokens for critical-path first-paint (FOUC
   prevention). style.css overrides those with identical values, so
   there is no visual difference — but all tokens are always available.
   ================================================================ */

/* ----------------------------------------------------------------
   SELF-HOSTED FONTS (GDPR: no request to Google Fonts servers).
   Lexend latin (300/400/600/700/800) + Material Symbols Outlined
   subset to only the ~84 icons used on the site (~19 KB vs ~728 KB).
   ---------------------------------------------------------------- */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/lexend-300.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lexend-400.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lexend-600.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lexend-700.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/lexend-800.woff2') format('woff2'); }
@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; src: url('/fonts/material-symbols.woff2') format('woff2'); }

/* Material Symbols utility class (previously supplied by Google's stylesheet). */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* About team grid, exactly 4 tiles per row on desktop. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   0. DESIGN TOKENS — single source of truth for the entire site
   ---------------------------------------------------------------- */
:root {
  /* Fonts */
  --font-display: 'Lexend', sans-serif;
  --font-body:    'Lexend', sans-serif;
  --font-icons:   'Material Symbols Outlined';

  /* Commander blue */
  --color-primary-50:  #f0f7ff;
  --color-primary-100: #dcebfe;
  --color-primary-200: #b9d8fd;
  --color-primary-300: #88bcfc;
  --color-primary-400: #4c9afa;
  --color-primary-500: #0668e0;
  --color-primary-600: #055cbd;   /* "fresh blue" (Matern) — links, icons, stat numbers */
  --color-primary-700: #0551ae;
  --color-primary-800: #044390;
  --color-primary-900: #032e63;
  --color-primary-950: #022854;   /* "dark blue" (Matern) — hero/dark bg + primary button */
  /* Accent — turquoise (Matern "Türkisgrün"), used for pre-headlines.
     NOTE: #00d1aa on light backgrounds is ~1.8:1 contrast (fails WCAG AA for
     small text). Applied to match the agency design; flagged for review. */
  --color-accent:      #00d1aa;
  --color-accent-ink:  #047d67;   /* darker teal available for AA-compliant text on light */
  /* Brand accent — logo only */
  --color-brand-red: #e62f35;
  /* Neutrals */
  --color-grey-50:  #f8f9f9;
  --color-grey-100: #e9eaed;
  --color-grey-200: #d2d6da;
  --color-grey-300: #bfc3ca;
  --color-grey-400: #a8afb7;
  --color-grey-500: #929aa5;
  --color-grey-600: #737d8c;
  --color-grey-700: #5a626d;
  --color-grey-800: #3e444b;
  --color-grey-900: #25282d;
  --color-grey-950: #191c1f;
  /* Surfaces */
  --color-bg-page:    #edf0f4;
  --color-bg-surface: #ffffff;
  --color-bg-hero:    var(--color-primary-950);
  /* Footer: deep navy from the Commander blue family, one step darker than
     --color-primary-950 so the footer reads as its own zone under the dark
     CTA band (was near-black --color-grey-950, which clashed with the navy). */
  --color-bg-footer:  #011d3e;
  /* Text */
  --color-text-primary:   var(--color-grey-900);
  --color-text-secondary: var(--color-grey-700);
  --color-text-muted:     var(--color-grey-500);
  --color-text-inverted:  #ffffff;
  /* Borders */
  --color-border-subtle: var(--color-grey-200);
  --color-border:        var(--color-grey-300);
  /* Interactive */
  --color-link:       var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);
  --color-focus-ring: rgba(6, 104, 224, 0.25);
  /* Status */
  --color-success: #53ac5a;
  --color-warning: #fba500;
  --color-danger:  #e62f35;

  /* Type scale */
  --text-display: clamp(3rem, 6vw, 5rem);
  --text-h1:      clamp(2.25rem, 4vw, 3rem);
  --text-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --text-h3:      1.25rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 5vw, 3rem);
  --section-padding-y: clamp(2rem, 5vw, 4rem);
  --section-gap:       clamp(1.5rem, 4vw, 3rem);
  --nav-height:        64px;

  /* Border radii — squared per Matern design feedback (2026-06).
     Only true circles keep a radius (--radius-pill); everything else is 0. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
}

/* ----------------------------------------------------------------
   1. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--color-link-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

ul[role="list"] { list-style: none; }

/* ----------------------------------------------------------------
   2. LAYOUT UTILITIES
   ---------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  padding-inline: var(--container-padding);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-padding-y);
}

.section--alt {
  background: var(--color-bg-surface);
}

/* ── Audit attestation callout (Wirtschaftsprüfer / IDW PS 860) ─────────────
   Flat fill-contrast block (white surface, no border/shadow/radius, matching
   the flat-card system). Substantiates the tax-compliance claim with the
   downloadable audit reports. Used at the top of the digital-logbook FAQ. */
.attestation {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  background: var(--color-bg-surface);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.attestation__icon {
  flex: none;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary-600);
}
.attestation__body { min-width: 0; }
.attestation__title {
  font-weight: 700;
  font-size: var(--text-lg, 1.25rem);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}
.attestation__text {
  color: var(--color-text-secondary);
  margin: 0;
}
@media (max-width: 640px) {
  .attestation { flex-direction: column; gap: var(--space-md); }
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-600);   /* fresh-blue pre-headline on light sections (Matern PDF; turquoise is dark-bg only) */
  margin-bottom: var(--space-sm);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.section-header__sub {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.section-footer {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 700;
}

h4 {
  font-size: var(--text-sm);
  font-weight: 700;
}

p {
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

p + p { margin-top: var(--space-md); }

/* ----------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;   /* capitalised button labels (Matern 2026-06-17) */
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Size variants */
.btn--sm  { padding: 0.375rem 1rem;  font-size: var(--text-sm); }
.btn--md,
.btn      { padding: 0.625rem 1.5rem; font-size: var(--text-body); }
.btn--lg  { padding: 0.875rem 2rem;  font-size: 1.125rem; }

/* Primary — dark blue button (Matern "Button rechts oben" #022854) */
.btn--primary {
  background: var(--color-primary-950);
  color: #ffffff;
}
.btn--primary:hover {
  background: var(--color-primary-800);
  color: #ffffff;
}

/* Secondary (outline) — light backgrounds */
.btn--secondary {
  background: transparent;
  color: var(--color-primary-600);
  border: 1.5px solid var(--color-primary-600);
}
.btn--secondary:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* Ghost — dark backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--color-text-inverted);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-inverted);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Ghost with turquoise accent — secondary hero CTA on dark backgrounds (Matern PDF) */
.btn--ghost-accent {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.btn--ghost-accent:hover {
  background: rgba(0, 209, 170, 0.10);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Primary on dark (white fill, blue text) */
.btn--primary-on-dark {
  background: #ffffff;
  color: var(--color-primary-700);
  border: none;
}
.btn--primary-on-dark:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
}

/* ----------------------------------------------------------------
   5. CARD LINK
   ---------------------------------------------------------------- */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
  transition: gap 150ms ease, color 150ms ease;
}
.card-link:hover {
  color: var(--color-link-hover);
  gap: var(--space-sm);
}
.card-link .material-symbols-outlined {
  font-size: 1rem;
  transition: transform 150ms ease;
}
.card-link:hover .material-symbols-outlined {
  transform: translateX(3px);
}
.card .card-link {
  margin-top: auto;
}

/* ----------------------------------------------------------------
   6. NAVIGATION
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--color-bg-surface);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.nav--scrolled {
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* object-fit keeps the wordmark undistorted when the global img max-width
   clamps it in the narrow mobile nav (it used to squish horizontally) */
.nav__logo img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }

/* Mobile nav balance (approach 1, 2026-07-05): compact the CTA + tighter row
   gap so the logo keeps more of the header row */
@media (max-width: 520px) {
  .nav__inner { gap: var(--space-md); }
  .nav__cta { padding: 0.375rem 0.65rem; font-size: 0.75rem; }
}
.nav__logo:focus-visible {
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
  outline: none;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
  margin-inline: auto;
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;   /* capitalised menu items (Matern PDF p.1) */
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-link);
  border-color: var(--color-link);
}

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }

.nav__login { opacity: 0.72; border-bottom: none; }
.nav__login:hover { opacity: 1; border-color: transparent; }

/* Header phone (B2B trust signal): full number ≥1280px (the container cap, where the row
   provably fits), icon-only in the 1024–1279px band, hidden below 1024 (that band is
   already width-starved; the mobile drawer carries the number instead). Compact (xs, like
   the lang switcher) so the number never squeezes the logo out of the row. */
.nav__phone {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 150ms ease;
}
.nav__phone:hover { color: var(--color-link); }
.nav__phone .material-symbols-outlined { font-size: 1.2rem; }
.nav__phone-number { display: none; }
@media (min-width: 1024px) { .nav__phone { display: flex; } }
@media (min-width: 1280px) {
  .nav__phone-number { display: inline; }
  /* Keep the row on one line once the number is shown */
  .nav__link { white-space: nowrap; }
}
/* Fund the phone icon in the tight band: slightly tighter link gaps keep the logo at its
   pre-phone width (the row was already width-starved here before the phone existed) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__links { gap: var(--space-md); }
}

/* Language switcher */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__lang-sep {
  font-size: var(--text-xs);
  color: var(--color-grey-300);
  font-weight: 400;
  user-select: none;
}
.nav__lang-item {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 150ms ease;
}
.nav__lang-item:hover { color: var(--color-link); }
.nav__lang-item--active {
  color: var(--color-primary-600);
  cursor: default;
  pointer-events: none;
}
@media (max-width: 899px) {
  .nav__actions .nav__lang { display: none; }
}

/* Language switcher as a dropdown (desktop, 2026-07-07): trigger styled like the old
   inline lang items; the menu reuses nav__dropdown-menu but right-aligned + narrow so it
   cannot overflow the viewport edge (the group sits near the right edge of the nav).
   Selector is .nav__lang--dropdown .nav__lang-trigger (0-2-0) on purpose: the generic
   .nav__dropdown-trigger rule further down reproduces the .nav__link underline box
   (padding 0 0 2px + 2px transparent border-bottom) and would otherwise override this
   and push the small DE/EN text ~4px above the row's vertical center. */
.nav__lang--dropdown .nav__lang-trigger {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 150ms ease;
}
.nav__lang--dropdown .nav__lang-trigger:hover { color: var(--color-link); }
.nav__lang--dropdown .nav__dropdown-menu {
  left: auto;
  right: -0.5rem;
  min-width: 140px;
}
.nav__dropdown-item--current {
  color: var(--color-primary-600);
  font-weight: 700;
  cursor: default;
}

.nav__lang--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav__lang--mobile .nav__lang-item { font-size: var(--text-sm); padding: 4px 8px; }
.nav__lang--mobile .nav__lang-sep  { font-size: var(--text-sm); }

/* Hamburger */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background 150ms ease;
}
.nav__hamburger:hover { background: var(--color-grey-100); }
.nav__hamburger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nav__hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav */
.nav__mobile {
  position: absolute;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}
.nav__mobile[hidden] { display: none; }

.nav__mobile-inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-lg);
  gap: var(--space-sm);
}

.nav__mobile-link {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;   /* capitalised menu items (Matern PDF p.1) */
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  transition: color 150ms ease;
}
.nav__mobile-link:hover { color: var(--color-link); }
.nav__mobile-link:last-of-type { border-bottom: none; }

/* Phone line in the mobile drawer, above the demo CTA */
.nav__mobile-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color 150ms ease;
}
.nav__mobile-phone:hover { color: var(--color-link); }
.nav__mobile-phone .material-symbols-outlined { font-size: 1.25rem; color: var(--color-primary-600); }

.nav__mobile-cta { margin-top: var(--space-md); width: 100%; justify-content: center; }

@media (max-width: 899px) {
  .nav__actions .nav__login { display: none; }
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__hamburger { display: none; }
  .nav__actions { margin-left: 0; }
}

/* ----------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------- */
/* Core hero styles are in the critical inline CSS block in <head>.
   Additional styles that are non-critical: */

/* Canvas layer — transparent (initHeroAnim clears each frame) so the image
   marquee behind shows through; sits ABOVE the marquee, below the text. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Canvas handles all hero background animation — see main.js initHeroAnim() */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Hero image marquee — industry motives drifting right→left behind the canvas
   animation; a dark overlay keeps the static hero text legible on top. */
/* Hero background crossfade ("Überblenden") — the 8 industry macro-motives fade
   one into the next at full width, behind the canvas animation (Matern PDF p.3). */
.hero__slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-bg-hero);
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-crossfade 32s linear infinite;  /* 4s per slide */
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 4s; }
.hero__slide:nth-child(3) { animation-delay: 8s; }
.hero__slide:nth-child(4) { animation-delay: 12s; }
.hero__slide:nth-child(5) { animation-delay: 16s; }
.hero__slide:nth-child(6) { animation-delay: 20s; }
.hero__slide:nth-child(7) { animation-delay: 24s; }
.hero__slide:nth-child(8) { animation-delay: 28s; }
.hero__slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Show the motives much brighter (Matern 2026-06-17 — same fix as the solution
     pages): darker on the LEFT behind the headline for legibility, fading lighter
     toward the right where the image + canvas pins are the focus. Legibility of the
     text itself is carried by text-shadow (see critical-css-full / .hero__eyebrow). */
  background: linear-gradient(90deg, rgba(2,37,79,0.62) 0%, rgba(2,37,79,0.38) 42%, rgba(2,37,79,0.16) 100%);
}
/* 8 slides → each owns a 1/8 (12.5%) slot of the 32s cycle, with a ~0.6s
   crossfade overlap at each slot boundary into the next image. */
@keyframes hero-crossfade {
  0%    { opacity: 0; }
  2%    { opacity: 1; }
  12.5% { opacity: 1; }
  14.5% { opacity: 0; }
  100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; }
  .hero__slide:first-child { opacity: 1; }
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);   /* turquoise pre-headline on dark hero (Matern) */
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 10px rgba(2, 24, 45, 0.55);   /* legible over the brighter hero image (Matern 2026-06-17) */
}

.hero__eyebrow-brand { display: block; }

/* ----------------------------------------------------------------
   8. TRUST STRIP
   ---------------------------------------------------------------- */
.trust-strip {
  background: var(--color-bg-surface);
  padding-block-start: var(--space-xl);
  padding-block-end: 0;
}

.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl) var(--space-3xl);
  list-style: none;
}

.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

.trust-strip__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--color-primary-600);
}

.trust-strip__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------
   9. INTRO — WHAT IS COMMANDER?
   ---------------------------------------------------------------- */
.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.intro__text h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
}

.intro__text p {
  margin-bottom: var(--space-lg);
  font-size: 1.0625rem;
  line-height: var(--leading-normal);
}

.intro__text .btn { margin-top: var(--space-md); }

.intro__visual {
  width: 100%;
}

@media (min-width: 1024px) {
  .intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

/* ----------------------------------------------------------------
   10. IMAGE PLACEHOLDERS
   ---------------------------------------------------------------- */
.img-placeholder {
  width: 100%;
  background: var(--color-grey-100);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  position: relative;
}

.img-placeholder--screen {
  min-height: 320px;
  background: var(--color-primary-950);
  border-color: var(--color-primary-800);
}

.img-placeholder--screen .img-placeholder__label {
  color: var(--color-primary-300);
}

.img-placeholder__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-grey-500);
  text-align: center;
  padding: var(--space-md);
}

/* ----------------------------------------------------------------
   11. CAPABILITIES GRID & CARDS
   ---------------------------------------------------------------- */
.capabilities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 600px) {
  .capabilities__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .capabilities__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Kernfunktionen — 9 core-feature cards over a full-bleed dark background image
   (Matern PDF p.2): dark semi-transparent navy cards, centred, white uppercase
   titles. The section header stays on the light page background above this band. */
.capabilities__bg {
  position: relative;
  margin-top: var(--space-2xl);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background-image: url('/img/kernfunktionen-bg.jpg');
  background-size: cover;
  background-position: center;
}
.capabilities__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 18, 40, 0.45);
}
.capabilities__bg > .container {
  position: relative;
  z-index: 1;
}

.capabilities .card {
  background: rgba(2, 24, 45, 0.80);
  align-items: center;
  text-align: center;
}
.capabilities .card__icon { color: var(--color-text-inverted); }  /* white core-feature icons (Matern 2026-06-17) */
.capabilities .card__heading {
  color: var(--color-text-inverted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.capabilities .card__body { color: rgba(255, 255, 255, 0.75); }

.card {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card:hover {
  transform: translateY(-2px);
}

/* Flat cards define themselves by fill contrast: white on grey sections,
   grey on white (.section--alt) sections. Applies to every card type so
   removing borders/shadows never makes a card vanish. Interactive
   open/hover states (.faq-item[open], .job-listing[open]/:hover) override
   this with their own tint via later source order / higher specificity. */
.section--alt :is(.card, .industry-card, .benefit-item, .app-card, .award-card,
  .reference-card, .news-card, .ref-card, .challenge-card, .differentiator-item,
  .contact-info, .contact-calendly, .roi-inputs, .faq-item, .job-listing) {
  background: var(--color-bg-page);
}

.card__icon {
  font-size: 2rem;
  color: var(--color-primary-600);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.card__heading {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.card__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------
   11b. RELATED SOLUTIONS GRID
   ---------------------------------------------------------------- */
.related-solutions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
}

/* ----------------------------------------------------------------
   12. INDUSTRIES GRID
   ---------------------------------------------------------------- */
.industries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 600px) {
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .industries__grid { grid-template-columns: repeat(4, 1fr); }
}

.industry-card {
  background: var(--color-bg-surface);
  overflow: hidden;
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
}

.industry-card:hover {
  transform: translateY(-2px);
}

.industry-card__visual {
  aspect-ratio: 1 / 1;   /* square Branchen motives (Matern; source images are 1:1) */
  overflow: hidden;
  background: var(--color-bg-hero);
}

.industry-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.industry-card:hover .industry-card__visual img {
  transform: scale(1.03);
}

.industry-card__visual .img-placeholder {
  border-radius: 0;
  border: none;
  min-height: 220px;
}

.industry-card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.industry-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
}

.industry-card__body p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

/* ----------------------------------------------------------------
   13. TESTIMONIALS — pull-quote carousel
   ---------------------------------------------------------------- */
.testimonial-carousel {
  max-width: 800px;
  margin-inline: auto;
}

.testimonial-carousel__stage {
  display: grid;
}

.testimonial-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

.testimonial-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.testimonial-slide__quote {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-text-primary);
  position: relative;
  padding-left: 3rem;
  margin: 0;
}

.testimonial-slide__quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.75rem;
  font-family: var(--font-display);
  font-size: 5rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-200);
  pointer-events: none;
}

.testimonial-slide__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.testimonial-slide__logo {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  object-position: left center;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.testimonial-slide__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.testimonial-slide__role {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.testimonial-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2xl);
}

.testimonial-carousel__dots {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}

.testimonial-dot.is-active {
  background: var(--color-primary-600);
  width: 24px;
}

.testimonial-carousel__arrows {
  display: flex;
  gap: var(--space-sm);
}

.testimonial-arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-subtle);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.testimonial-arrow .material-symbols-outlined {
  font-size: 1.25rem;
}

.testimonial-arrow:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
}

/* ----------------------------------------------------------------
   14. LOGO STRIP
   ---------------------------------------------------------------- */
.logo-strip {
  text-align: center;
}

.logo-strip__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.logo-strip__track-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logo-strip__track {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: max-content;
  animation: logo-marquee 40s linear infinite;
}

.logo-strip__track:hover {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

.logo-strip__img {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 250ms ease, opacity 250ms ease;
}

.logo-strip__img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ----------------------------------------------------------------
   15. AWARDS
   ---------------------------------------------------------------- */
.awards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 600px) {
  .awards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .awards__grid { grid-template-columns: repeat(4, 1fr); }
}

.award-card {
  background: var(--color-bg-surface);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 200ms ease;
}

.award-card:hover {
  transform: translateY(-2px);
}

.award-card__badge {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-md);
}

.award-card__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.award-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.award-card__detail {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-600);
  margin-bottom: var(--space-xs);
}

.award-card__years {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   16. DEMO CTA SECTION
   ---------------------------------------------------------------- */
.cta-section {
  background: var(--color-bg-hero);
  padding-block: var(--section-padding-y);
}

.cta-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);
  text-align: center;
}

.cta-section__text h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-inverted);
  margin-bottom: var(--space-md);
}

.cta-section__text p {
  font-size: 1.0625rem;
  color: var(--color-grey-300);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* (Removed the .cta-section__calendly demo-widget placeholder — the dashed empty
   box that showed below the CTA. Demo booking is handled by the CTA buttons →
   /demo.html, not an inline widget. Matern 2026-06-17.) */

/* ----------------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: var(--color-bg-footer);
  padding-top: var(--space-3xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 280px 1fr; }
}

.footer__logo img { margin-bottom: var(--space-md); }

/* White-variant logo not yet available — display colour logo on a white pill */
.footer__logo-img {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
}
.footer__logo:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
}

.footer__desc {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}

.footer__address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  line-height: 1.8;
}

.footer__address a {
  color: var(--color-grey-300);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer__address a:hover { color: #ffffff; }

/* Footer nav */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (min-width: 600px) {
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__nav-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.footer__nav-col a {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  text-decoration: none;
  transition: color 150ms ease;
  line-height: 1.5;
}
.footer__nav-col a:hover { color: #ffffff; }

/* Count-up suffix ("+", "k+", " Mio.+") fades in when the animation completes
   (injected by initCounters in main.js). white-space: pre keeps the leading
   space of " Mio.+" — inline-block would otherwise trim it. */
.count-suffix {
  display: inline-block;
  white-space: pre;
  animation: count-suffix-in 0.5s ease-out both;
}
@keyframes count-suffix-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .count-suffix { animation: none; }
}

/* Footer meta bar — Gruppe link, Creditreform trust mark + copyright in one compact row */
.footer__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-lg);
}

.footer__meta-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm) var(--space-xl);
}

.footer__meta-copy {
  font-size: var(--text-xs);
  color: var(--color-grey-400);
  margin: 0;
}
.footer__meta-copy a {
  color: var(--color-grey-300);
  text-decoration: underline; /* WCAG: distinguish the link from surrounding text (contrast alone is not enough here) */
  transition: color 150ms ease;
}
.footer__meta-copy a:hover { color: #ffffff; }

.footer__meta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.footer__meta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer__meta-link .material-symbols-outlined { font-size: 1rem; }
.footer__meta-link:hover { color: #ffffff; }

/* ----------------------------------------------------------------
   18. COOKIE CONSENT BANNER
   ---------------------------------------------------------------- */
/* Centered consent MODAL (2026-07-17, GTM/Consent-Mode-Advanced requirements):
   full-viewport backdrop blocks interaction until an active choice is made —
   there is no close control by design. */
.cookie-banner {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(2, 37, 79, 0.55);   /* dark-blue backdrop (hero navy) */
}

.cookie-banner[hidden] { display: none; }

/* Block page scroll while the modal is open (same :has() pattern as the
   Chatwoot co-hide rule further down). */
body:has(#cookie-banner:not([hidden])) { overflow: hidden; }

.cookie-banner__dialog {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  /* wide enough for all three action buttons on ONE row (DE labels are the
     longest: ABLEHNEN / AUSWAHL SPEICHERN / ALLE AKZEPTIEREN) */
  max-width: 44rem;
  width: 100%;
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(2, 37, 79, 0.35);
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.cookie-banner__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.cookie-banner__text a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__categories {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.cookie-banner__category {
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.cookie-banner__category label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.cookie-banner__category input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary-600);
  flex-shrink: 0;
}

.cookie-banner__category input[disabled] { cursor: not-allowed; }

.cookie-banner__category-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.cookie-banner__category-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-top: 2px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* .btn--ghost is styled for DARK surfaces (white text/border) — re-color it
   for the modal's white dialog or Reject/Save are invisible. */
.cookie-banner__actions .btn--ghost {
  color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}
.cookie-banner__actions .btn--ghost:hover {
  background: rgba(5, 92, 189, 0.08);
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* ----------------------------------------------------------------
   19. SCROLL REVEAL ANIMATIONS
   ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   20. REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------------
   21. PAGE HEADER (legal / sub-pages, replaces hero)
   ---------------------------------------------------------------- */
.page-header {
  position: relative;   /* anchor the injected hero animation canvas (Matern 2026-06-17) */
  background-color: var(--color-bg-hero);
  padding-top: calc(var(--nav-height) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

/* Hero canvas animation reused on the short blue page headers — initHeroAnim()
   injects <canvas class="page-header__canvas hero-canvas"> into every plain
   .page-header (not .page-header--solution, which carries a photo). Sits behind
   the content, same drifting grid / vehicles / pins as the homepage hero. */
.page-header__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.page-header > .container {
  position: relative;
  z-index: 1;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary-300);
  min-width: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.breadcrumb__link {
  color: var(--color-primary-300);
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumb__link:hover {
  color: var(--color-text-inverted);
}

.breadcrumb__item--current {
  color: var(--color-grey-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);   /* turquoise pre-headline (Matern) */
  margin-bottom: var(--space-sm);
}

.page-header__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;   /* light hero claim on all page headers — matches homepage + solution pages (Matern 2026-06-17) */
  line-height: var(--leading-tight);
  color: var(--color-text-inverted);
}

/* Plain page-header subline — bright white like the solution pages (Matern 2026-06-17);
   previously inherited a dull body colour. The .page-header--solution rule below adds
   its own size/max-width on top of this. */
.page-header__sub {
  color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------------------------------
   21b. SOLUTION / INDUSTRY LANDING HERO (Matern template, PDF p.5–12)
   Full-bleed industry photo behind a dark overlay, two-line pre-headline,
   and a centred thin-line vertical icon below the CTAs.
   ---------------------------------------------------------------- */
.page-header--solution {
  position: relative;
  background-color: var(--color-bg-hero);
  background-size: cover;
  background-position: center;
  /* Full-bleed industry photo is set per page via inline background-image;
     dark navy fallback shows until the real Matern motive is supplied. */
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.page-header--solution::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Show the header photo AS-IS — no darkening/monochrome tint (Matern 2026-06-17).
     A faint bottom-only scrim keeps the white text legible without visibly
     altering the image; legibility is carried mainly by text-shadow below. */
  background: linear-gradient(180deg, rgba(2,40,84,0) 55%, rgba(2,40,84,0.30) 100%);
}

/* About hero (Fridolfing sunrise) is HIGH-KEY — the bright sky/sun/fog band sits exactly
   where the heading lands, so the faint bottom-only solution scrim is not enough.
   Override with a directional scrim: darker top-left (behind the text), fading to clear
   lower-right so the sunrise stays visible. Tune the two alpha stops below to taste. */
.page-header--about::before {
  background:
    linear-gradient(115deg, rgba(2,24,45,0.62) 0%, rgba(2,24,45,0.28) 42%, rgba(2,24,45,0) 70%),
    linear-gradient(180deg, rgba(2,24,45,0) 60%, rgba(2,24,45,0.30) 100%);
}

/* Text legibility over the now-undarkened photo — shadow on the text, not the image. */
.page-header--solution .page-header__eyebrow,
.page-header--solution .page-header__heading,
.page-header--solution .page-header__sub {
  text-shadow: 0 1px 12px rgba(2, 24, 45, 0.55);
}

.page-header--solution > .container {
  position: relative;
  z-index: 1;
  min-height: clamp(520px, 72vh, 720px);
  display: flex;
  flex-direction: column;
}

/* Hero subline — bright white on the dark header photo (Matern PDF) */
.page-header--solution .page-header__sub {
  margin-top: var(--space-md);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
}

/* Hero content block: left-aligned text (per PDF p.5–12) in a block that is
   positioned toward the centre of the banner. Breadcrumb stays top-left. */
.page-header__hero {
  margin-block: auto;
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}

.page-header__cta-row {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

/* Two-line pre-headline: brand line above the vertical name.
   Colour becomes turquoise (#00d1aa) in the colour step. */
.page-header__eyebrow-brand {
  display: block;
  color: var(--color-accent);
}

/* Thin-line industry icon under the hero CTAs — left-aligned with the hero claim (Matern PDF) */
.page-header__icon {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.page-header__icon .material-symbols-outlined {
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  color: var(--color-primary-300);
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}

/* Custom white line-icon (Matern 8-icons set) in the solution hero — larger,
   forced pure white, left-aligned with the hero claim (Matern PDF) */
.page-header__icon img {
  height: clamp(5rem, 10vw, 8rem);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Hero claim on solution pages is light weight (Matern PDF) */
.page-header--solution .page-header__heading {
  font-weight: 300;
}

/* ----------------------------------------------------------------
   21b. BLOG HERO IMAGE
   ---------------------------------------------------------------- */
.blog-hero {
  background: var(--color-bg-hero);
  padding-bottom: var(--space-3xl);
}

.blog-hero__img {
  display: block;
  width: 100%;
  height: clamp(220px, 38vw, 520px);
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------------
   22. LEGAL PROSE
   ---------------------------------------------------------------- */
.legal-prose {
  padding-block: var(--section-padding-y);
}

/* Blog-specific prose enhancements — applied when .blog-prose is used
   alongside .legal-prose on blog post articles                       */
.blog-prose {
  padding-block: var(--section-padding-y);
}

.blog-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border-subtle);
}

.blog-prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.blog-prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary-700);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}

.blog-prose p {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.blog-prose ul,
.blog-prose ol {
  margin: 0 0 var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-prose li {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.blog-prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-prose a:hover {
  color: var(--color-link-hover);
}

.blog-prose strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

.blog-prose em {
  font-style: italic;
  color: var(--color-text-primary);
}

.blog-prose blockquote {
  border-left: 4px solid var(--color-primary-400);
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-primary-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.125rem;
  line-height: var(--leading-normal);
  color: var(--color-primary-900);
  font-style: italic;
}

/* ── Reference page — company info card ──────────────────────────────── */
.ref-card {
  background: var(--color-bg-surface);
  display: grid;
  overflow: hidden;
}

.ref-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--color-bg-page);
  border-right: 1px solid var(--color-border-subtle);
}

.ref-card__logo img {
  object-fit: contain;
  max-height: 52px;
  max-width: 120px;
  display: block;
}

.ref-card__cell {
  padding: var(--space-lg) var(--space-xl);
  border-right: 1px solid var(--color-border-subtle);
  min-width: 0;
}

.ref-card__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  overflow-wrap: break-word;
}

.ref-card__value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.ref-card__value--bold {
  font-weight: 600;
  line-height: 1.3;
}

.ref-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Narrow: collapse to single column, horizontal dividers replace vertical ones.
   Threshold matches the container max-width so the horizontal grid is never
   squeezed — it either has full room or stacks. */
@media (max-width: 799px) {
  .ref-card {
    grid-template-columns: 1fr !important;
  }

  .ref-card__logo {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-lg) var(--space-xl);
  }

  .ref-card__logo img {
    max-height: 40px;
  }

  .ref-card__cell {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }
}

.legal-prose__inner {
  max-width: 800px;
}

.legal-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}

.legal-prose h2:first-child {
  margin-top: 0;
}

.legal-prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal-prose p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

.legal-prose ul,
.legal-prose ol {
  margin: 0 0 var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.legal-prose li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.legal-prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-prose a:hover {
  color: var(--color-link-hover);
}

.legal-prose strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

.legal-prose address {
  font-style: normal;
}

.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0 var(--space-xl);
  font-size: var(--text-sm);
}

.legal-prose th,
.legal-prose td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  vertical-align: top;
}

.legal-prose th {
  background: var(--color-grey-100);
  font-weight: 700;
  color: var(--color-text-primary);
}

.legal-info-box {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-left: 4px solid var(--color-primary-600);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.legal-info-box p {
  margin-bottom: 0;
  font-size: var(--text-sm);
}

/* Terms "document download" cards — were never styled (markup-only); render them as
   flat cards (icon + body + download button) matching the design system (Matern 2026-06-17). */
.terms-doc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg-page);   /* grey fill on the white legal section — flat, no border/shadow */
  margin-bottom: var(--space-lg);
}
.terms-doc__icon {
  font-size: 2rem;
  flex-shrink: 0;
  color: var(--color-primary-600);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.terms-doc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}
.legal-prose .terms-doc__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.legal-prose .terms-doc__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-sm);
}
.terms-doc .btn { align-self: flex-start; }

@media (max-width: 479px) {
  .terms-doc { flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
}

/* ----------------------------------------------------------------
   23. BENEFITS GRID ("Why Commander?")
   ---------------------------------------------------------------- */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

@media (min-width: 480px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  /* 3 columns: the grid holds 6 tiles (trimmed from 8, 2026-07-07) → clean 3×2 */
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-surface);
}

.benefit-item__icon {
  font-size: 1.75rem;
  color: var(--color-primary-600);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.benefit-item__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.benefit-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------
   24. HOW IT WORKS (3 steps)
   ---------------------------------------------------------------- */
.how-it-works__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  position: relative;
}

@media (min-width: 768px) {
  .how-it-works__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  .how-it-works__steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(16.666% + var(--space-xl));
    right: calc(16.666% + var(--space-xl));
    height: 2px;
    background: var(--color-border-subtle);
    z-index: 0;
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .step { align-items: center; text-align: center; }
}

.step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.step__heading {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.step__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Dark treatment for how-it-works */
.how-it-works {
  background: var(--color-bg-hero);
}

.how-it-works .section-header h2 {
  color: var(--color-text-inverted);
}

.how-it-works .section-label {
  color: var(--color-accent); /* primary-600 fails WCAG AA (2.28:1) on the dark hero bg */
}

.how-it-works .section-header__sub {
  color: rgba(255, 255, 255, 0.65);
}

.how-it-works .step__heading {
  color: var(--color-text-inverted);
}

.how-it-works .step__body {
  color: rgba(255, 255, 255, 0.65);
}

.how-it-works .how-it-works__steps::before {
  background: rgba(255, 255, 255, 0.15);
}

/* ----------------------------------------------------------------
   25. MOBILE APPS
   ---------------------------------------------------------------- */
.apps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 480px) {
  .apps__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .apps__grid { grid-template-columns: repeat(4, 1fr); }
}

.app-card {
  background: var(--color-bg-surface);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  transition: transform 200ms ease;
}

.app-card:hover {
  transform: translateY(-2px);
}

/* Phone frame mockup */
.app-card__phone {
  width: 64px;
  aspect-ratio: 9 / 19;
  background: #111827;
  border-radius: 12px;
  padding: 5px 3px 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), inset 0 0 0 0.5px rgba(255,255,255,0.08);
  position: relative;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

/* Camera dot */
.app-card__phone::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}

/* Home bar */
.app-card__phone::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 1px;
}

.app-card__screen {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-card__screen--cockpit { background: linear-gradient(155deg, #0d2461 0%, #1054a6 100%); }
.app-card__screen--drive   { background: linear-gradient(155deg, #0c1f4a 0%, #1e4a8a 100%); }
.app-card__screen--service { background: linear-gradient(155deg, #0f2654 0%, #2a5598 100%); }
.app-card__screen--beacon  { background: linear-gradient(155deg, #072344 0%, #0e5c88 100%); }

/* (.app-card__screen-icon removed 2026-07-04 — placeholder SVG glyphs replaced
   by the designed app screens /img/apps/r-*.png in all placements) */

.app-card__screen-icon svg {
  width: 100%;
  height: 100%;
}

.app-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-primary-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.app-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Store badges + QR under the app cards (home + commander; app-stores shortcode).
   Official store artwork — never restyle/recolor the badge images. */
.app-card__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* Push the badges + QR to the bottom of the card so they bottom-align across
     all cards in a row, regardless of description length. .app-card is a flex
     column and this is its last child; equal-height grid rows do the rest. */
  margin-top: auto;
}
/* Badge pair stacked in a column; the QR thumbnail sits BESIDE the stack (one compact
   block instead of three elements trailing down the card) */
.app-card__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.app-card__badge { display: block; }
.app-card__badge img { display: block; height: 34px; width: auto; }
/* Google's web badge ships with ~20% built-in transparent padding — render it taller so
   the VISIBLE badge matches the Apple badge's 34px (42 × 0.8 ≈ 34) */
.app-card__badge--google img { height: 42px; }
.app-card__badge:hover { opacity: 0.85; }

/* QR thumbnail button: a small version of the actual code beside the badges, sized to
   match the badge stack's height; clicking opens the full-size lightbox. Desktop-only
   (a phone can't scan its own screen; the badges serve there). */
.app-card__qr { display: none; }
@media (min-width: 768px) {
  .app-card__qr {
    display: block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .app-card__qr img {
    display: block;
    width: 80px;
    height: 80px;
    transition: transform 150ms ease;
  }
  .app-card__qr:hover img,
  .app-card__qr:focus-visible img { transform: scale(1.06); }
  .app-card__qr:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
}

/* QR lightbox — one code at a time, opened by .app-card__qr */
.qr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 24, 45, 0.6);
  padding: var(--space-lg);
}
.qr-lightbox[hidden] { display: none; }
.qr-lightbox__panel {
  position: relative;
  background: var(--color-bg-surface);
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  max-width: 22rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.qr-lightbox__img { display: block; margin: 0 auto var(--space-md); width: 240px; height: 240px; }
.qr-lightbox__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.qr-lightbox__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}
.qr-lightbox__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}
.qr-lightbox__close:hover { color: var(--color-text-primary); }

/* ----------------------------------------------------------------
   26. CEO / COMPANY CREDIBILITY BLOCK
   ---------------------------------------------------------------- */
.ceo-block {
  background: var(--color-bg-hero);
  padding-block: var(--section-padding-y);
}

.ceo-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (min-width: 768px) {
  .ceo-block__inner {
    grid-template-columns: 280px 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

@media (min-width: 1024px) {
  .ceo-block__inner { grid-template-columns: 320px 1fr; }
}

/* Photo column */
.ceo-block__visual { display: flex; flex-direction: column; }

.ceo-block__photo-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--color-primary-900);
}

.ceo-block__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Quote column */
.ceo-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: var(--space-md);
}

.ceo-block__ornament {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--color-primary-400);
  user-select: none;
  display: block;
}

.ceo-block__quote {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--color-text-inverted);
  font-style: italic;
}

.ceo-block__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ceo-block__name {
  font-size: var(--text-body);
  font-weight: 700;
  color: #ffffff;
}

.ceo-block__role {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}

.ceo-block__divider {
  width: 40px;
  height: 2px;
  background: var(--color-primary-500);
  border: none;
  margin: 0;
}

.ceo-block__service-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 560px) {
  .ceo-block__service-points { grid-template-columns: 1fr 1fr; }
}

.ceo-block__service-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-grey-300);
}

.ceo-block__service-point .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-primary-300);
  flex-shrink: 0;
  margin-top: 2px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ----------------------------------------------------------------
   27. NEWS SECTION
   ---------------------------------------------------------------- */
.news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .news__grid { grid-template-columns: repeat(3, 1fr); }
}

.news-card {
  background: var(--color-bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease;
}

.news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-hero);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.news-card:hover .news-card__media img {
  transform: scale(1.03);
}

.news-card:hover {
  transform: translateY(-2px);
}

.news-card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.news-card__date {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.news-card__heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.news-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: color 150ms ease;
}

.news-card__link:hover { color: var(--color-link-hover); }

.news-card__link .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.news__year {
  margin-bottom: var(--space-3xl);
}

.news__year-heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
}

.news__year .news__grid {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   28. GDPR / DATA TRUST BADGE
   ---------------------------------------------------------------- */
.trust-badge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
}

.trust-badge__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-grey-300);
  letter-spacing: 0.03em;
}

.trust-badge__item .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-primary-300);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.trust-badge__sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .trust-badge__sep { display: none; }
}

/* ----------------------------------------------------------------
   29. FOOTER — NEWSLETTER, SOCIAL, GROUP
   ---------------------------------------------------------------- */
.footer__newsletter {
  margin-top: var(--space-xl);
}

.footer__newsletter-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-sm);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.footer__newsletter-input {
  flex: 1;
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  color: #ffffff;
  outline: none;
  transition: border-color 150ms ease;
}

.footer__newsletter-input::placeholder { color: var(--color-grey-600); }
.footer__newsletter-input:focus { border-color: var(--color-primary-400); }

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-400);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.footer__social-link:hover {
  background: var(--color-primary-600);
  color: #ffffff;
  border-color: transparent;
}

/* (footer group/cert rows consolidated into .footer__meta — see section 17) */

/* Partner grid (About page) — flat name tiles; swap spans for <img> logos when assets are staged */
.partner-grid {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* 8 partners → fixed 2×4 grid on tablet/desktop */
@media (min-width: 768px) {
  .partner-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Partners sits on a --alt (white) section → grey tile fill for fill-contrast */
.partner-card {
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
  min-height: 96px;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.partner-card__name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.partner-card__logo {
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
}

/* Telematics checklist - vertical numbered stepper */
.stepper {
  list-style: none;
  margin: var(--space-2xl) auto 0;
  padding: 0;
  max-width: 720px;
}

.stepper__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.stepper__item:last-child { padding-bottom: 0; }

/* connector line between step badges */
.stepper__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 1px);
  top: 2.5rem;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.stepper__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.stepper__content { padding-top: 0.35rem; }

.stepper__title {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.stepper__body { color: var(--color-text-secondary); }

/* Checklist download - centered form inside the centered section */
.checklist-form {
  max-width: 420px;
  margin-inline: auto;
}

.checklist-form__submit { text-align: center; }

.checklist-note {
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   30. FORM ELEMENTS
   ---------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-normal);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.form-check__input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary-600);
  cursor: pointer;
}

.form-check__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.form-check__label a {
  color: var(--color-link);
  text-decoration: underline;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  display: none;
}

.form-group--error .form-input,
.form-group--error .form-textarea,
.form-group--error .form-select { border-color: var(--color-danger); }

.form-group--error .form-error { display: block; }

/* JS-flagged invalid fields — the contact form uses novalidate + custom validation */
.form-input.is-invalid,
.form-textarea.is-invalid,
.form-select.is-invalid { border-color: var(--color-danger); }
.form-check__input.is-invalid { outline: 2px solid var(--color-danger); outline-offset: 2px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .form-grid--2col { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------
   31. CONTACT PAGE LAYOUT
   ---------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  padding-block: var(--section-padding-y);
}

@media (min-width: 960px) {
  .contact-layout { grid-template-columns: 3fr 2fr; gap: var(--space-3xl); }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-form__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-info {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
}

.contact-info__heading {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.contact-info__icon {
  font-size: 1.25rem;
  color: var(--color-primary-600);
  flex-shrink: 0;
  margin-top: 2px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.contact-info__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.contact-info__text a {
  color: var(--color-link);
  text-decoration: none;
}

.contact-info__text a:hover { text-decoration: underline; }

.contact-calendly {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
}

.contact-calendly__heading {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.contact-calendly__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------
   32. COMPANY TIMELINE (about page)
   ---------------------------------------------------------------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68px;
  width: 2px;
  background: var(--color-border-subtle);
}

@media (min-width: 640px) {
  .timeline::before { left: 80px; }
}

.timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__year {
  min-width: 56px;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-primary-600);
  line-height: 1.5rem;
  flex-shrink: 0;
}

.timeline__dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  background: var(--color-primary-600);
  border: 2px solid var(--color-bg-page);
  margin-top: 5px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.timeline__item--highlight .timeline__dot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  background: var(--color-primary-700);
  box-shadow: 0 0 0 4px var(--color-primary-100);
  margin-top: 3px;
}

.timeline__content {
  flex: 1;
  padding-bottom: var(--space-xs);
}

.timeline__heading {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
}

.timeline__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------
   33. INDUSTRY PAGE COMPONENTS
   ---------------------------------------------------------------- */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

@media (min-width: 480px) {
  .challenge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .challenge-grid { grid-template-columns: repeat(4, 1fr); }
  /* 3-up variant for sections with 3 or 6 tiles (e.g. hardware page service
     grid), so rows stay even instead of leaving a ragged 4-up row. */
  .challenge-grid--3up { grid-template-columns: repeat(3, 1fr); }
}

/* Spec chips: scannable model names / key specs on cards (flat pills). */
.spec-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.spec-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}
.section--accent .spec-chip { background: rgba(255, 255, 255, 0.12); color: var(--color-grey-300); }

/* Slim mid-page CTA band (sits on the accent bg as a deliberate break). */
.cta-band { padding-block: var(--space-2xl); text-align: center; }
.cta-band__heading { color: var(--color-text-inverted); font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--space-lg); }

/* Förderungen page: program cards + country groups + critical-rule callout. */
.foerder-country { margin-top: var(--space-2xl); }
.foerder-country__heading { font-size: 1.25rem; font-weight: 700; }
.foerder-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 768px) { .foerder-grid { grid-template-columns: repeat(2, 1fr); } }
.foerder-card {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}
.foerder-card__name { font-size: 1.0625rem; font-weight: 700; }
.foerder-card__target { color: var(--color-text-secondary); }
.foerder-card__line { font-size: 0.9375rem; }
.foerder-card .spec-chips { justify-content: flex-start; }
.foerder-card__note { font-size: 0.875rem; color: var(--color-text-secondary); }
.foerder-callout {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}
.foerder-callout .material-symbols-outlined { color: var(--color-primary-700); flex-shrink: 0; }

.challenge-card {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  transition: transform 200ms ease;
}

.challenge-card:hover {
  transform: translateY(-2px);
}

.challenge-card__icon {
  font-size: 1.75rem;
  color: var(--color-primary-600);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.challenge-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.challenge-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.industry-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.industry-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.industry-feature__icon {
  font-size: 1.5rem;
  color: var(--color-primary-600);
  flex-shrink: 0;
  margin-top: 2px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.industry-feature__text {}

.industry-feature__title {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  margin-bottom: var(--space-xs);
}

.industry-feature__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.reference-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 640px) {
  .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.reference-card {
  background: var(--color-bg-surface);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;   /* centred like homepage cards (Matern 2026-06-17) */
  text-align: center;
  gap: var(--space-md);
  transition: transform 200ms ease;
}

.reference-card:hover {
  transform: translateY(-2px);
}

/* Pricing "model" cards — centred like homepage cards (Matern 2026-06-17).
   .pricing-pillar is inline-styled in content; this only adds centring. The
   icon <span> is display:block, so it inherits this text-align and centres its
   glyph. (Device-spec and add-on rows are list-style and intentionally left.) */
.pricing-pillar {
  text-align: center;
}
/* Beschaffung (OWN/FLEX/ALL-IN) cards carry bullet lists + a footer that look broken
   centred (the arrow markers float away from their text). Left-align just those three;
   the aria-labelledby id is identical in EN + DE, so this scopes cleanly by language. */
[aria-labelledby="pricing-models-heading"] .pricing-pillar {
  text-align: left;
}

/* Pricing card icons are inline-styled without a weight axis, so they defaulted to the
   heavier wght 400. Match the thin wght 300 used by every other card icon (Matern 2026-06-17). */
.pricing-pillar .material-symbols-outlined,
.pricing-device-card .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Uniform logo slot: every reference-card logo gets the IDENTICAL box and is
   scaled to fit inside it (contain, centred). Wide wordmarks are capped by the
   width, compact marks by the height — the closest possible visual match across
   very different logo aspect ratios. Logo files themselves are whitespace-trimmed
   (2026-07-15) so the content actually fills the slot. */
.reference-card__logo {
  height: 40px;
  width: 140px;
  object-fit: contain;
  mix-blend-mode: multiply;  /* white logo backgrounds blend into the card surface */
  display: block;
}

.reference-card__client {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* long German compound words must break rather than overflow the equal-width
     grid track (columns are minmax(0,1fr), so tracks can be narrower than a word) */
  overflow-wrap: break-word;
  hyphens: auto;
}

.reference-card__result {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  /* see .reference-card__client: break long compounds inside equal-width tracks */
  overflow-wrap: break-word;
  hyphens: auto;
}

.reference-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

.differentiator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 640px) {
  .differentiator-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .differentiator-grid { grid-template-columns: repeat(3, 1fr); }
}

.differentiator-item {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centred like homepage cards (Matern 2026-06-17) */
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-surface);
  transition: transform 200ms ease;
}

.differentiator-item:hover {
  transform: translateY(-2px);
}

.differentiator-item__icon {
  font-size: 1.75rem;
  color: var(--color-primary-600);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.differentiator-item__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.differentiator-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.two-col-feature {
  display: grid;
  grid-template-columns: 1fr;
  /* Match the 4-up .challenge-grid gutter so that, in the same container width,
     the left column (people photo) is exactly the width of 2 cards above +
     their gutter, and the text fills the other 2 (Matern 2026-06-17). */
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .two-col-feature { grid-template-columns: 1fr 1fr; }
  .two-col-feature--reverse { direction: rtl; }
  .two-col-feature--reverse > * { direction: ltr; }
}

.two-col-feature__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-primary-900);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.two-col-feature__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.two-col-feature__text { display: flex; flex-direction: column; gap: var(--space-lg); }

.two-col-feature__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------------
   34. TRUST PROOF BAR (below stat strip, light background)
   ---------------------------------------------------------------- */
.trust-proof-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-md);
  padding-block: var(--space-md);
}

.trust-proof-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary); /* text-muted fails WCAG AA (2.84:1) at this size */
  letter-spacing: 0.03em;
}

.trust-proof-bar__item .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-primary-500);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.trust-proof-bar__sep {
  width: 1px;
  height: 12px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .trust-proof-bar__sep { display: none; }
}

/* ----------------------------------------------------------------
   35. ROI TEASER SECTION
   ---------------------------------------------------------------- */
.roi-teaser__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.roi-teaser__inner h2 {
  margin-bottom: var(--space-lg);
}

.roi-teaser__inner > p {
  margin-bottom: var(--space-xl);
}

.roi-teaser__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-3xl);
  margin-block: var(--space-xl);
  padding-block: var(--space-xl);
}

.roi-teaser__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.roi-teaser__stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-primary-600);
  line-height: var(--leading-tight);
}

.roi-teaser__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 180px;
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------------
   36. ROI CALCULATOR PAGE
   ---------------------------------------------------------------- */
.roi-calculator {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (min-width: 960px) {
  .roi-calculator { grid-template-columns: 1fr 1fr; }
}

.roi-inputs {
  background: var(--color-bg-surface);
  padding: var(--space-2xl);
}

.roi-inputs__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.roi-inputs__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.roi-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.roi-input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.roi-input-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.roi-range-limits {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.roi-input-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.roi-input-hint a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   40. FOOTER NEWSLETTER GDPR NOTE
   ---------------------------------------------------------------- */
.footer__newsletter-gdpr {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-grey-400); /* grey-600 fails WCAG AA (4.04:1) on the navy footer */
  line-height: var(--leading-snug);
}

.footer__newsletter-gdpr a {
  color: var(--color-grey-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__newsletter-gdpr a:hover { color: var(--color-grey-200); }

.roi-input-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary-600);
}

.roi-range {
  width: 100%;
  accent-color: var(--color-primary-600);
  height: 6px;
  cursor: pointer;
}

.roi-number-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.roi-number-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.roi-results {
  background: var(--color-bg-hero);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  color: var(--color-text-inverted);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
}

.roi-results__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.roi-results__sub {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  margin-bottom: var(--space-xl);
}

.roi-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.roi-result-row:last-of-type { border-bottom: none; }

.roi-result-label {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}

.roi-result-value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: #ffffff;
  text-align: right;
}

.roi-result-value--savings { color: #6edd76; }
.roi-result-value--cost { color: var(--color-grey-400); }

.roi-total {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 2px solid rgba(255,255,255,0.2);
}

.roi-total__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-grey-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.roi-total__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: var(--leading-tight);
}

.roi-total__value--positive { color: #6edd76; }
.roi-total__value--negative { color: var(--color-warning); }

.roi-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-grey-600);
  margin-top: var(--space-md);
  line-height: var(--leading-normal);
}

.roi-cta-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.roi-cta-block h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-sm);
}

.roi-cta-block p {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
  margin-bottom: var(--space-md);
}

/* ----------------------------------------------------------------
   37. FAQ ACCORDION
   ---------------------------------------------------------------- */
.faq-section {
  padding-block: var(--section-padding-y);
}

.faq-group {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

.faq-group__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary-700);
  margin-bottom: var(--space-lg);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

details.faq-item {
  background: var(--color-bg-surface);
  overflow: hidden;
}

details.faq-item[open] {
  background: var(--color-primary-50);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: color 150ms ease, background 150ms ease;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item[open] summary {
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}

.faq-icon {
  font-size: 1.25rem;
  color: var(--color-primary-600);
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: transform 200ms ease;
}

details.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-item__body {
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.faq-item__body p + p { margin-top: var(--space-sm); }

.faq-item__body ul {
  margin: var(--space-sm) 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-item__body a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   38. INTRO SECTION PRICING SIGNAL
   ---------------------------------------------------------------- */
.intro__pricing {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-lg);
}

.intro__pricing strong {
  color: var(--color-primary-600);
  font-weight: 700;
}

/* ----------------------------------------------------------------
   39. FORM INTEREST CHECKBOXES
   ---------------------------------------------------------------- */
.form-fieldset {
  border: none;
  padding: 0;
  min-width: 0;
}

.form-fieldset legend {
  margin-bottom: var(--space-sm);
}

.form-check-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xs) var(--space-lg);
}

@media (max-width: 479px) {
  .form-check-group { grid-template-columns: 1fr; }
}

/* Solutions dropdown */
.nav__dropdown-group { position: relative; }

.nav__dropdown-trigger {
  /* Reset the button chrome but reproduce the EXACT .nav__link box model so the
     Solutions item lines up pixel-for-pixel with the anchor items (Matern 2026-06-17).
     - no font-* here → typography comes from .nav__link (a `font:`/`font-*:inherit`
       would pull the parent's larger size and make this item bigger);
     - line-height:inherit → match anchors (UA forces `normal` on <button>);
     - padding/border reproduce .nav__link's 2px underline space + hover underline,
       which a bare `padding:0;border:none` would strip (shorter, lower item). */
  background: none; cursor: pointer; color: inherit;
  border: none; border-bottom: 2px solid transparent;
  padding: 0 0 2px;
  line-height: inherit;
  display: flex; align-items: center; gap: 0.2rem;
}
.nav__dropdown-trigger .nav__dropdown-arrow {
  font-size: 0.7em; display: inline-block; transition: transform 0.15s;
}
.nav__dropdown-group[data-open] .nav__dropdown-arrow { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + 0.75rem); left: -1rem;
  min-width: 230px; background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.375rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 200;
}
.nav__dropdown-group:hover .nav__dropdown-menu,
.nav__dropdown-group[data-open] .nav__dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.nav__dropdown-item {
  display: block; padding: 0.5rem 1.25rem;
  color: var(--color-text-primary); text-decoration: none;
  font-size: var(--text-sm); white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.nav__dropdown-item:hover { background: var(--color-primary-50); color: var(--color-primary-600); }

.nav__dropdown-divider { border: none; border-top: 1px solid var(--color-border-subtle); margin: 0.25rem 0; }

/* Mobile nav — dropdown items shown inline (no sub-toggle needed) */
@media (max-width: 899px) {
  .nav__dropdown-group { width: 100%; }
  .nav__dropdown-trigger { display: none; }
  .nav__dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-top: 1px solid var(--color-border-subtle);
    border-radius: 0; padding: 0; background: transparent;
  }
  .nav__dropdown-item { padding: 0.75rem 1.5rem; font-size: var(--text-body); }
  .nav__dropdown-divider { display: none; }
}

/* ----------------------------------------------------------------
   40. JOB LISTING ACCORDION (Career page)
   ---------------------------------------------------------------- */
.job-listing {
  background: var(--color-bg-surface);
  overflow: hidden;
  transition: background .2s ease;
}

.job-listing:hover {
  background: var(--color-bg-page);
}

.job-listing[open] {
  background: var(--color-primary-50);
}

.job-listing > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s ease;
}

.job-listing > summary::-webkit-details-marker,
.job-listing > summary::marker { display: none; }

.job-listing > summary:hover { background: var(--color-primary-50); }

.job-listing[open] > summary {
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-primary-100);
}

.job-listing__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.job-listing__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.job-listing__meta img {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.job-listing__chevron {
  font-size: 1.375rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform .25s ease, color .2s ease;
}

.job-listing[open] .job-listing__chevron,
.job-listing:hover .job-listing__chevron {
  color: var(--color-primary-600);
}

.job-listing[open] .job-listing__chevron { transform: rotate(180deg); }

.job-listing__body { padding: var(--space-xl); }

.job-listing__intro {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-subtle);
}

.job-listing__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (max-width: 600px) {
  .job-listing__two-col { grid-template-columns: 1fr; }
}

.job-listing__section-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary-600);
  margin-bottom: var(--space-md);
}

.job-listing__list {
  list-style: none;
  padding-left: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.job-listing__list li {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
}

.job-listing__list li + li { margin-top: var(--space-xs); }

.job-listing__list li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary-400);
  flex-shrink: 0;
  margin-top: 0.45em;
}

.job-listing__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.job-listing__benefit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.job-listing__benefit .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.job-listing__apply {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
}

/* ─── Demo page ──────────────────────────────────────── */
.demo-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--nav-height) - 64px);
}
@media (min-width: 900px) {
  .demo-hero {
    grid-template-columns: 1fr 1fr;
  }
}

.demo-hero__left {
  background: var(--color-bg-hero);
  padding: clamp(2.5rem, 7vw, 5rem) var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
}

.demo-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-300);
}

.demo-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 300;   /* light hero claim — matches .page-header__heading (Matern 2026-06-17); demo hero was missed by that sweep */
  line-height: var(--leading-tight);
  color: var(--color-text-inverted);
  max-width: 540px;
}

.demo-hero__heading em {
  font-style: normal;
  color: var(--color-primary-300);
}

.demo-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.demo-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  color: var(--color-grey-200);
  font-size: 1.0625rem;
  line-height: var(--leading-snug);
}

.demo-checklist__icon {
  font-family: 'Material Symbols Outlined';
  font-size: 1.25rem;
  color: var(--color-primary-400);
  flex-shrink: 0;
  line-height: 1.4;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.demo-testimonial {
  border-left: 3px solid var(--color-primary-600);
  padding-left: var(--space-lg);
}

.demo-testimonial__quote {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-grey-200);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
}

.demo-testimonial__attribution {
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}

.demo-testimonial__attribution strong {
  color: var(--color-grey-200);
  font-weight: 600;
}

.demo-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.demo-trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-grey-400);
}

.demo-trust-bar__item .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-primary-400);
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.demo-hero__right {
  background: var(--color-bg-surface);
  padding: clamp(2.5rem, 7vw, 5rem) var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
}

.demo-hero__right h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.calendly-embed-placeholder {
  background: var(--color-grey-100);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.calendly-embed-placeholder .material-symbols-outlined {
  font-size: 3rem;
  color: var(--color-grey-300);
}

.demo-email-fallback {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.demo-email-fallback a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
}

.demo-email-fallback a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* =========================================================================
   41. WEBINARS — topic grid + GDPR-safe video facade
   ========================================================================= */
.webinar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (min-width: 600px) {
  .webinar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .webinar-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Flat card (no border, no shadow — fill-contrast only) */
.webinar-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
  overflow: hidden;
}

.webinar-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-grey-100);
}

.webinar-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.webinar-card__icon {
  font-size: 2rem;
  color: var(--color-primary-600);
}

.webinar-card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
}

.webinar-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

/* X-Mas webcast highlight — host portraits + prominent date (webinar-webcast.html) */
.webcast__hosts {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}
.webcast__host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}
.webcast__host-photo {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  margin-bottom: var(--space-xs);
}
.webcast__host-name {
  font-weight: 700;
  color: var(--color-text-primary);
}
.webcast__host-role {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
/* Date sized like a roi-teaser stat so it carries the section */
.webcast__date {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary-600);
  line-height: var(--leading-tight);
  margin-bottom: 0;
}
.webcast__time {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* Next live date, shown above the register link */
.webinar-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.webinar-card__date .material-symbols-outlined { font-size: 1.125rem; color: var(--color-primary-600); }

.webinar-card__register {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-primary-600);
  text-decoration: none;
}
.webinar-card__register .material-symbols-outlined { font-size: 1.125rem; }
.webinar-card__register:hover { color: var(--color-link-hover); text-decoration: underline; }
.webinar-card__register:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Video facade: poster + play button. No third-party iframe loads until the
   visitor clicks (GDPR — no request/cookies to the video host on page load).
   JS (initVideoFacades in main.js) swaps in the iframe on click/Enter. */
.video-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  background-color: var(--color-grey-900);
  background-size: cover;
  background-position: center;
  border: none;
}
/* Subtle brand tint so the placeholder reads intentionally before a poster is set */
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,92,189,0.55), rgba(0,0,0,0.45));
}
.video-facade > * { position: relative; }

.video-facade__play {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
/* "mail" icon (in the Material subset) = request-the-recording affordance —
   recordings are available on request, not embedded (decision 2026-07-03) */
.video-facade__play .material-symbols-outlined {
  font-size: 28px;
  color: var(--color-primary-600);
}
/* Icon badge appears on hover/keyboard focus only */
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play { opacity: 1; transform: scale(1.08); background: #fff; }
.video-facade:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
/* Touch devices have no hover — keep the badge visible so the affordance isn't lost */
@media (hover: none) {
  .video-facade__play { opacity: 1; transform: none; }
}

.video-facade__label {
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Injected iframe fills the media box */
.webinar-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ================================================================
   COMMANDER CAPABILITIES PAGE (/commander.html)
   Spotlight two-col, dark accent band, comparison table.
   Flat + squared per the Matern system.
   ================================================================ */

/* --- Dark accent band (e.g. Privacy) --- */
.section--accent { background: var(--color-primary-950); }
.section--accent .section-label { color: var(--color-accent); }
.section--accent .section-header h2 { color: var(--color-text-inverted); }
.section--accent .section-header__sub { color: var(--color-grey-300); }
.section--accent .industry-feature__title { color: var(--color-text-inverted); }
.section--accent .industry-feature__desc { color: var(--color-grey-300); }
.section--accent .industry-feature__icon { color: var(--color-accent); }

/* --- Comparison table (pricing: OWN/FLEX/RENT). Full-row zebra works here because
   this table has NO tinted spotlight column; the commander page's variant (which had
   one, making the zebra fall apart) was removed 2026-07-07. Restored verbatim after
   the shared CSS was mistakenly deleted with it. --- */
.compare-table__wrap { overflow-x: auto; margin-top: var(--space-2xl); }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: var(--text-body);
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  vertical-align: top;
  line-height: var(--leading-snug);
}
/* Header: small muted labels for the outer columns, a bold dark cap for Commander */
.compare-table thead th {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border-subtle);
}
.compare-table thead .col-commander {
  background: var(--color-primary-950);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: none;
}
/* Row labels + full-row zebra (flat fill, no row borders); Commander column keeps its own tint */
.compare-table tbody th { font-weight: 700; color: var(--color-text-primary); }
.compare-table tbody td { color: var(--color-text-muted); }
.compare-table tbody tr:nth-child(odd) th[scope="row"],
.compare-table tbody tr:nth-child(odd) td:not(.col-commander) { background: var(--color-grey-50); }
/* Highlighted Commander column: solid tint, left accent rail, blue checks */
.compare-table tbody .col-commander {
  background: var(--color-primary-50);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-primary-600);
}
.compare-table .col-commander .material-symbols-outlined {
  color: var(--color-primary-600);
  font-size: 1.15rem;
  vertical-align: -3px;
  margin-right: 6px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --- Screenshot frame (real product captures in two-col slots + booking) --- */
.shot { margin: 0; border: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); line-height: 0; }
.shot img { width: 100%; height: auto; display: block; }
.two-col-feature .shot { align-self: start; }
.section--accent .shot { border-color: rgba(255, 255, 255, 0.18); }

/* --- 2-up card grid (e.g. the 4-card Alerts section: balanced 2×2) --- */
.grid-2up { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 600px) { .grid-2up { grid-template-columns: repeat(2, 1fr); } }

/* --- Core-capability cards (dark band): white card-link arrow + whole-card click (Matern PDF) --- */
.capabilities .card { position: relative; }
.capabilities .card .card-link,
.capabilities .card .card-link:hover { color: var(--color-text-inverted); }

/* About page-header image caption (bottom-right). */
.page-header--about { position: relative; }
.page-header__img-caption { position: absolute; right: var(--space-lg); bottom: var(--space-lg); z-index: 2; color: #fff; font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.capabilities .card .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Secure forms: honeypot (visually removed, still in the DOM for bots)
   and no-JS notice. See static/contact.php + initSecureForms in main.js. */
.hp-field { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-noscript { background: var(--color-bg-page); border-left: 3px solid var(--color-primary-600); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-lg); }

/* Thank-you page: success check above the page-header eyebrow */
.page-header__check .material-symbols-outlined { font-size: 3.5rem; color: var(--color-accent); margin-bottom: var(--space-sm); }

/* Footer newsletter: inline success message (replaces the form after fetch-submit) */
.footer__newsletter-success { color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-sm); }

/* cal.diy booking embed (shortcodes/cal-embed.html): hide the iframe scrollbars */
#my-cal-inline-commander-demo iframe { scrollbar-width: none; -ms-overflow-style: none; }
#my-cal-inline-commander-demo iframe::-webkit-scrollbar { display: none; }

/* Job listing summary uses spans (summary only permits phrasing content);
   restore the block stacking the old div/p markup had */
.job-listing__head { display: block; }
.job-listing__head .job-listing__title,
.job-listing__head .job-listing__meta { display: block; margin: 0; }

/* Chatwoot bubble: keep it out of the way while the cookie banner is open
   (it covered the "Alle akzeptieren" button). Appears once consent is chosen.
   Old browsers without :has() simply keep the overlap — acceptable fallback.
   The chat nudge (partials/chat-nudge.html) rides along: no point nudging
   toward a bubble that is hidden behind the banner. */
body:has(#cookie-banner:not([hidden])) .woot--bubble-holder,
body:has(#cookie-banner:not([hidden])) .woot-widget-holder,
body:has(#cookie-banner:not([hidden])) .chat-nudge {
  display: none !important;
}

/* ----------------------------------------------------------------
   Chat nudge (proactive message bubble) — partials/chat-nudge.html
   Sits just above the Chatwoot launcher bubble (bubble is ~60px tall,
   20px from the bottom). Overlay only (position:fixed) so it adds no CLS.
   Reads as a "message from a person": agent avatar + name + status + the
   invite. Squared corners per the Matern system (the tail + avatar carry the
   bubble metaphor, not rounded corners). It is a floating transient element,
   so it intentionally carries elevation (--shadow-lg); the flat-card rule is
   for in-page content cards, not this.
   ---------------------------------------------------------------- */
.chat-nudge {
  position: fixed;
  right: 20px;
  bottom: 108px;                /* clears the launcher bubble (~64px tall, 20px up) with a gap so the tail doesn't touch it */
  z-index: 190;                 /* above page content, below cookie banner (200) */
  /* Mobile decision: kept (not suppressed) on small viewports. The width caps
     to the viewport (min()) and it sits above the launcher, so it never
     overflows nor covers the bubble even at 320px. */
  width: min(20rem, calc(100vw - 2rem));
}

.chat-nudge[hidden] { display: none; }

/* The whole bubble is the click target */
.chat-nudge__bubble {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: none;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: chat-nudge-in 260ms ease-out both;
}

@keyframes chat-nudge-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-nudge__bubble { transition: transform .18s ease, box-shadow .18s ease; }
  .chat-nudge__bubble:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-nudge__bubble { animation: none; }
}
.chat-nudge__bubble:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-lg); }

/* Agent identity row */
.chat-nudge__who {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0.7rem;
}
.chat-nudge__avatar {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);   /* a true circle is allowed */
  background: var(--color-primary-950);
  display: grid;
  place-items: center;
  color: #fff;
}
.chat-nudge__avatar .material-symbols-outlined { font-size: 21px; }
.chat-nudge__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);      /* teal "online" cue */
  border: 2px solid var(--color-bg-surface);
}
.chat-nudge__id { display: flex; flex-direction: column; line-height: 1.25; }
.chat-nudge__name { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); }
.chat-nudge__status { font-size: var(--text-xs); color: var(--color-text-muted); }

.chat-nudge__msg {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

/* Speech-bubble tail pointing down toward the launcher */
.chat-nudge__tail {
  position: absolute;
  right: 26px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: var(--color-bg-surface);
  transform: rotate(45deg);
  box-shadow: 5px 5px 11px rgba(2, 20, 45, 0.10);
}

.chat-nudge__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1;                    /* above the bubble button */
}
.chat-nudge__close:hover { color: var(--color-text-primary); }
.chat-nudge__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }