/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIFY — FINAL DESIGN LOCK v23
   main.css — Motion System · Cookie Consent · Signature Graphic · Contact Form Section
   ═══════════════════════════════════════════════════════════════════ */

/* ─── GEIST FONT ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Color */
  --white:          #FFFFFF;
  --black:          #000000;
  --ink:            #0A0A0A;
  --ink-soft:       #525252;
  --ink-muted:      #737373;
  --dark:           #07090D;
  --dark-raised:    #10131A;
  --line:           #E8E8E8;
  --line-dark:      rgba(255,255,255,0.14);
  --brand:            #315BFF;
  --brand-hover:      #234BE9;
  --brand-active:     #2143C8;
  --brand-soft:       #EBEFFF;
  --brand-soft-hover: #D1DAFF;
  --brand-border:     rgba(49, 91, 255, 0.22);
  --brand-rgb:        49, 91, 255;
  --on-brand:         #FFFFFF;
  --canvas:         #FFFFFF;

  /* Radii */
  --media-radius:   16px;
  --panel-radius:   12px;
  --control-radius: 8px;

  /* Motion */
  --motion-instant:  80ms;
  --motion-fast:     180ms;
  --motion-base:     280ms;
  --motion-standard: 320ms;
  --motion-slow:     650ms;
  --motion-cinematic:1100ms;
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.6, 1);
  --ease-reveal:     cubic-bezier(0.19, 1, 0.22, 1);
  --ease-premium:    cubic-bezier(.22,1,.36,1);
  --reveal-distance: 24px;
  --reveal-duration: 760ms;
  --reveal-stagger:  100ms;

  /* Icons */
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 36px;

  /* Layout */
  --container-w: 1380px;
  --sv:    120px;
  --sv-lg: 180px;
  --nav-h: 80px;
}

/* ─── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top haelt Anker-Ziele unter der fixierten Navigation frei.
   Ohne den Wert sprang z. B. #kontakt genau um die Navigationshoehe zu weit,
   die Sektionsueberschrift verschwand unter der Leiste. Gilt fuer native
   Anker-Spruenge ebenso wie fuer scrollIntoView.                            */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 80px) + 16px);
}
body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }
svg { display: block; flex-shrink: 0; }

/* ─── SKIP LINK ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--brand); color: var(--on-brand);
  padding: 8px 16px; border-radius: var(--control-radius);
  font-size: 14px; font-weight: 500; z-index: 9999;
  transition: top var(--motion-fast);
}
.skip-link:focus { top: 16px; }

/* ─── CONTAINER ──────────────────────────────────────────────────── */
.container {
  width: min(100% - 64px, var(--container-w));
  margin-inline: auto;
}
@media (max-width: 600px) {
  .container { width: min(100% - 32px, var(--container-w)); }
}

/* ─── SECTION PADDING ─────────────────────────────────────────────── */
.section-pad    { padding-block: var(--sv); }
.section-pad-lg { padding-block: var(--sv-lg); }
@media (max-width: 1024px) {
  :root { --sv: 88px; --sv-lg: 120px; }
}
@media (max-width: 700px) {
  :root { --sv: 64px; --sv-lg: 80px; }
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */
.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
  letter-spacing: -0.01em;
}

/* Hero H1 */
.hero-h1 {
  font-size: clamp(30px, 4.8vw + 8px, 68px);
  font-weight: 450;
  line-height: 1.01;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 820px;
  margin-inline: auto;
  text-wrap: balance;
}


/* Section Display (large feature headlines) */
.display-h {
  font-size: clamp(46px, 4.3vw, 64px);
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -0.038em;
}
@media (max-width: 700px) {
  .display-h { font-size: clamp(34px, 8.5vw, 44px); }
}

/* Section H2 */
h2, .section-h2 {
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media (max-width: 700px) {
  h2, .section-h2 { font-size: clamp(30px, 7vw, 38px); }
}

/* H3 */
h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
@media (max-width: 700px) { h3 { font-size: clamp(18px, 4.5vw, 24px); } }

/* H4 */
h4 { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }

/* Body Lead */
.body-lead {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .body-lead { font-size: 16px; line-height: 1.55; }
}

/* Body */
.body-text { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.body-sm { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }

/* Eyebrow */
.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.eyebrow-brand { color: var(--brand); }
.eyebrow-light { color: rgba(255,255,255,0.55); }

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding-inline: 24px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--control-radius);
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-premium),
              color var(--motion-fast) var(--ease-premium),
              transform var(--motion-fast);
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn-primary:hover { background: var(--brand-hover); }

.btn-ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.36);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-outline:hover { border-color: var(--ink-muted); }

.btn-dark {
  background: var(--ink);
  color: var(--white);
}
.btn-dark:hover { background: var(--ink-soft); }

/* Outline-Variante für dunkle CTA-Section */
.btn-cta-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  width: fit-content;
}
.btn-cta-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.9);
}

.btn-sm { height: 40px; padding-inline: 18px; font-size: 14px; }
.btn-lg { height: 56px; padding-inline: 32px; font-size: 16px; }

/* ─── ICON SIZING ────────────────────────────────────────────────── */
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
[data-lucide] { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ─── TEXT LINK ──────────────────────────────────────────────────── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand);
  transition: gap var(--motion-fast);
}
.text-link:hover { gap: 10px; }
.text-link-dark { color: var(--ink); }
.text-link-dark:hover { color: var(--brand); }

/* ─── MEDIA CONTAINER ────────────────────────────────────────────── */
.media-wrap {
  border-radius: var(--media-radius);
  overflow: hidden;
  position: relative;
}
.media-wrap img,
.media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── PANEL ──────────────────────────────────────────────────────── */
.panel {
  border-radius: var(--panel-radius);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ─── DIVIDER ────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--line); }
.divider-dark { background: var(--line-dark); }

/* ════════════════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background var(--motion-standard) var(--ease-premium),
              backdrop-filter var(--motion-standard),
              border-color var(--motion-standard);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7,9,13,0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line-dark);
}
body.mobile-menu-open .nav {
  background: var(--dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  width: min(100%, var(--container-w));
  margin-inline: auto;
  padding-inline: 40px;
}
.nav-brand { justify-self: start; }
.nav-logo {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 200px;
  max-height: 40px;
}
.nav-logo img, .nav-logo svg {
  max-width: 200px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}
.nav-logo span { color: var(--brand); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  border-radius: var(--control-radius);
  transition: color var(--motion-fast), background var(--motion-fast);
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-link-arrow {
  width: 14px; height: 14px;
  transition: transform var(--motion-fast) var(--ease-premium);
}
.nav-link[aria-expanded="true"] .nav-link-arrow { transform: rotate(180deg); }

.nav-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-cta { height: 44px; padding-inline: 20px; font-size: 14px; }

/* ─── LANGUAGE SWITCHER ──────────────────────────────────────────── */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-lang-item {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 1;
  transition: color var(--motion-fast);
}
a.nav-lang-item:hover { color: rgba(255,255,255,0.7); }
.nav-lang-active { color: #fff; }
.nav-lang-div { color: rgba(255,255,255,0.18); font-size: 11px; }
.nav-lang-muted { color: rgba(255,255,255,0.18); cursor: default; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: var(--control-radius);
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform var(--motion-standard) var(--ease-premium),
              opacity var(--motion-fast);
}
.nav-hamburger:focus-visible { outline: 2px solid var(--brand); }

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

/* ─── NAV TRIGGER ACTIVE STATE ────────────────────────────────────── */
.nav-link-trigger[aria-expanded="true"]:not(:focus-visible) {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
  outline: none;
}
.nav-link-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ─── COMPACT SOLUTIONS DROPDOWN ─────────────────────────────────── */
.solutions-dropdown {
  position: fixed;
  z-index: 99;
  width: 340px;
  background: rgba(14, 16, 22, 0.97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.48), 0 2px 8px rgba(0,0,0,0.20);
  padding: 8px;
  display: none;
}
.solutions-dropdown.open {
  display: block;
  animation: dropdown-in 180ms var(--ease-premium) forwards;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.solutions-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.solutions-dropdown-item {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.35;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.solutions-dropdown-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.solutions-dropdown-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  color: #fff;
}
@media (max-width: 900px) {
  .solutions-dropdown { display: none !important; }
}

/* ─── MOBILE NAV ACCORDION ────────────────────────────────────────── */
.mobile-nav-accordion { border-bottom: 1px solid var(--line-dark); }
.mobile-nav-accordion .mobile-nav-link { border-bottom: none; }
.mobile-nav-chevron {
  flex-shrink: 0;
  transition: transform 250ms var(--ease-premium);
}
.mobile-nav-trigger[aria-expanded="true"] .mobile-nav-chevron { transform: rotate(180deg); }
.mobile-nav-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 280ms var(--ease-premium);
}
.mobile-nav-submenu.open { max-height: 520px; }
.mobile-nav-sublink {
  display: flex;
  align-items: center;
  padding: 14px 4px 14px 20px;
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  min-height: 44px;
  line-height: 1.35;
}
.mobile-nav-sublink:last-child { border-bottom: none; }
.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus-visible { color: #fff; }
.mobile-nav-sublink:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-submenu { transition: none; }
  .mobile-nav-chevron { transition: none; }
}

/* ─── MOBILE MENU ─────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh;
  z-index: 99;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  padding: var(--nav-h) 24px max(32px, env(safe-area-inset-bottom, 32px));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 16px;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid var(--line-dark);
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.mobile-nav-link:hover { color: #fff; }
.mobile-cta {
  margin-top: auto;
  padding-top: 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}
.mobile-cta .btn { width: 100%; height: 54px; font-size: 16px; }

/* Nav Mobile */
@media (max-width: 900px) {
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 24px;
  }
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: var(--dark);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-video-mobile { display: none; }
@media (max-width: 767px) {
  .hero-video-desktop { display: none; }
  .hero-video-mobile  { display: block; object-position: center center; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 45% at 50% 55%, rgba(7,9,13,0.30) 0%, rgba(7,9,13,0) 100%),
    linear-gradient(to right, rgba(7,9,13,0.36) 0%, rgba(7,9,13,0.12) 50%, rgba(7,9,13,0.34) 100%),
    linear-gradient(180deg, rgba(7,9,13,0.56) 0%, rgba(7,9,13,0.46) 15%, rgba(7,9,13,0.50) 40%, rgba(7,9,13,0.76) 68%, rgba(7,9,13,0.88) 100%);
}
.hero-content {
  position: absolute;
  left: 50%;
  /* 52% statt 58%: seit der Trust-Slider bei bottom:108px sitzt, drueckte die
     alte Position den Textblock optisch zu tief in die untere Haelfte. */
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(1040px, calc(100% - 48px));
  z-index: 2;
  text-align: center;
}
.hero-text { max-width: 1040px; margin-inline: auto; }
.hero-h1   { margin-bottom: 20px; }
.hero-sub  {
  font-size: clamp(18px, 1.3vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.76);
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: 36px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.hero-actions .btn {
  height: 50px;
  padding-inline: 28px;
}

/* ── Hero Trust (inside hero, dark bg) ── */
.hero-trust {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 48px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-trust-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-trust-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.58);
  white-space: nowrap;
}
/* Ungenutzt seit CSS v53: das Demo-Logos-Badge wurde aus dem Template entfernt.
   Regelblock bleibt fuer eine moegliche Reaktivierung erhalten. */
.hero-trust-demo-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  padding: 2px 7px;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-trust-track-wrap {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.hero-trust-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  /* Die Dauer wird von motion.js aus der halben Trackbreite berechnet, damit
     das Tempo unabhaengig von der Anzahl der Logos konstant bleibt.
     Der Startwert entspricht dem bisherigen Verhalten bei acht Logos. */
  --logo-scroll-duration: 22s;
  animation: logo-scroll var(--logo-scroll-duration) linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hero-trust-track { animation: none; } }
.hero-trust-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hero-trust-item img {
  height: 36px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.68;
  transition: opacity var(--motion-fast);
}
@media (max-width: 700px) { .hero-trust { display: none; } }

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.38;
  pointer-events: none;
}
.hero-scroll svg { color: #fff; }
.hero-scroll-label { font-size: 10px; letter-spacing: 0.14em; color: #fff; }

@media (max-width: 700px) {
  .hero-content { width: min(100%, calc(100% - 48px)); }
  .hero-sub { font-size: 17px; max-width: 340px; }
  .hero-actions { flex-direction: column; gap: 14px; }
  .hero-actions .btn { width: 100%; max-width: none; min-height: 52px; }
  .hero-scroll { display: none; }
  /* Startwert an Desktop (0.56) angeglichen. Vorher 0.22, dadurch fehlte
     der Kontrast hinter H1 und Subline auf kleinen Viewports. */
  .hero-overlay {
    background:
      radial-gradient(ellipse 90% 45% at 50% 48%, rgba(7,9,13,0.30) 0%, rgba(7,9,13,0) 100%),
      linear-gradient(180deg,
        rgba(7,9,13,0.56) 0%,
        rgba(7,9,13,0.48) 18%,
        rgba(7,9,13,0.54) 44%,
        rgba(7,9,13,0.78) 72%,
        rgba(7,9,13,0.90) 100%);
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  /* wie Desktop, nur minimal reduziert */
  .hero-overlay {
    background:
      radial-gradient(ellipse 80% 45% at 50% 52%, rgba(7,9,13,0.28) 0%, rgba(7,9,13,0) 100%),
      linear-gradient(to right, rgba(7,9,13,0.30) 0%, rgba(7,9,13,0.10) 50%, rgba(7,9,13,0.30) 100%),
      linear-gradient(180deg,
        rgba(7,9,13,0.54) 0%,
        rgba(7,9,13,0.44) 16%,
        rgba(7,9,13,0.50) 42%,
        rgba(7,9,13,0.74) 70%,
        rgba(7,9,13,0.88) 100%);
  }
}

/* ════════════════════════════════════════════════════════════════════
   LOGO SLIDER
   ════════════════════════════════════════════════════════════════════ */
.logo-slider {
  overflow: hidden;
  padding-block: 40px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.logo-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logo-scroll 40s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-item img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--motion-fast);
}
a.logo-item:hover img { opacity: 0.75; }
.logo-placeholder {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.3;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   METRICS SECTION
   ════════════════════════════════════════════════════════════════════ */
.metrics-section {
  background: #151515;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-block: 72px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 64px;
}
.metric-item {
  background: transparent;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.metric-value {
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #fff;
  line-height: 1;
  /* Tabellenziffern: jede Ziffer gleich breit. Zusammen mit der von
     motion.js gesetzten min-width (gemessene Endbreite) bleibt der Wert
     waehrend des Count-Ups exakt gleich breit — kein Layout-Sprung. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  display: block;
  text-align: center;
}
.metric-label {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
  }
  .metrics-section { padding-block: 56px; }
  .metric-item { padding: 0 12px; }
}
@media (max-width: 480px) {
  .metrics-grid { gap: 44px 20px; }
  .metric-value { font-size: 38px; }
  .metric-item { padding: 0 4px; }
}

/* ════════════════════════════════════════════════════════════════════
   INDUSTRY RAIL
   ════════════════════════════════════════════════════════════════════ */
.industry-rail {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 48px;
}
.industry-rail-label {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.industry-rail-track {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  row-gap: 20px;
  padding-inline: 32px;
}
.industry-rail-item {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-inline: 16px;
  transition: color var(--motion-fast);
}
.industry-rail-item:hover { color: var(--ink); }

@media (max-width: 700px) {
  .industry-rail-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    justify-items: center;
    padding-inline: 16px;
  }
  .industry-rail-item { font-size: 11px; padding-inline: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL INTRO
   ════════════════════════════════════════════════════════════════════ */
.intro { background: var(--white); }

.intro-header {
  margin-bottom: 56px;
}

/* Zwei-Spalten-Layout: Headline links, Subline rechts */
.intro-cols {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 0 80px;
  align-items: start;
  margin-top: 16px;
}
.intro-headline {
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.intro-subline {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 8px;
}
@media (max-width: 900px) {
  .intro-cols { grid-template-columns: 1fr; gap: 20px 0; }
  .intro-subline { padding-top: 0; font-size: 16px; }
}

.intro-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: 56px;
}
.intro-media img, .intro-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 80px;
  margin-top: 64px;
}
.intro-principle {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity var(--motion-fast);
}
.intro-principle:hover { opacity: 0.68; }
.intro-principle-icon {
  color: var(--ink);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.intro-principle-icon svg {
  width: 26px;
  height: 26px;
}
.intro-principle-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.intro-principle-text {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
}
@media (max-width: 1100px) {
  .intro-principles { gap: 0 48px; }
}
@media (max-width: 900px) {
  .intro-principles { grid-template-columns: 1fr; gap: 48px 0; margin-top: 48px; }
  .intro-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .intro-principles { gap: 40px 0; margin-top: 40px; }
  .intro-principle-title { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════════
   TESTIMONIAL / PROOF-STATEMENT SECTION
   ════════════════════════════════════════════════════════════════════ */
.testimonial-section {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* Dot-Grid Background Pattern */
.testimonial-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}

.testimonial-section.section-pad { padding-block: 80px; }

.testimonial-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}

/* ── EYEBROW ───────────────────── */
.testimonial-eyebrow {
  margin-bottom: 40px;
}

/* ── LOGO ─────────────────────── */
.testimonial-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  height: 44px;
}
.testimonial-logo {
  max-height: 44px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(1);
}
.testimonial-company-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted, rgba(7,9,13,0.45));
}

/* ── QUOTE ────────────────────── */
.testimonial-quote {
  margin: 0;
  padding: 0;
}
.testimonial-quote p {
  font-size: clamp(28px, 2.65vw, 40px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.022em;
  color: var(--dark);
  max-width: 1100px;
  margin: 0 auto;
}

/* ── AUTHOR ───────────────────── */
.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}
.testimonial-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(7,9,13,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  flex-shrink: 0;
}
.testimonial-author-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.testimonial-author-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}
.testimonial-author-role {
  font-size: 13px;
  color: var(--text-muted, rgba(7,9,13,0.5));
}

/* ── TESTIMONIAL-REVEAL ─────────────────────────────────────────────
   Der Ausgangszustand haengt an .tm-armed, die ausschliesslich motion.js
   vergibt. Ohne JavaScript und bei prefers-reduced-motion wird die Klasse
   nie gesetzt — die Section ist dann von Anfang an vollstaendig sichtbar.

   Bewegt werden nur opacity, transform und filter. Die Woerter des Zitats
   sind inline-block, damit translateY greift; Zeilenumbruch, Laufweite und
   reservierter Platz bleiben dadurch unveraendert, es entsteht kein
   Layout Shift.                                                          */
.testimonial-section.tm-armed .testimonial-eyebrow,
.testimonial-section.tm-armed .testimonial-logo-wrap,
.testimonial-section.tm-armed .testimonial-author,
.testimonial-section.tm-armed .tm-word {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition:
    opacity   620ms var(--ease-premium),
    transform 620ms var(--ease-premium),
    filter    420ms var(--ease-premium);
}
/* Der Profilblock kommt aus etwas groesserer Distanz und mit etwas
   weniger Unschaerfe als die einzelnen Woerter. */
.testimonial-section.tm-armed .testimonial-author {
  transform: translateY(12px);
  filter: blur(3px);
}
.testimonial-section.tm-armed .tm-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}
.testimonial-section.tm-armed .testimonial-eyebrow.tm-in,
.testimonial-section.tm-armed .testimonial-logo-wrap.tm-in,
.testimonial-section.tm-armed .testimonial-author.tm-in,
.testimonial-section.tm-armed .tm-word.tm-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Nach dem Durchlauf die Zeichenlast wieder freigeben. */
.testimonial-section.tm-armed .tm-word.tm-in {
  will-change: auto;
}

/* ── SLIDER NAV ───────────────── */
.testimonial-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.testimonial-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(7,9,13,0.15);
  background: transparent;
  color: var(--dark);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-premium),
              background var(--motion-fast) var(--ease-premium);
}
.testimonial-btn:hover { border-color: var(--dark); background: rgba(7,9,13,0.04); }
.testimonial-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.testimonial-counter {
  font-size: 13px;
  color: var(--text-muted, rgba(7,9,13,0.45));
  min-width: 36px;
  text-align: center;
}

/* ── SLIDES ───────────────────── */
.testimonial-stage { width: 100%; }
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: contents; }

/* ── PROOF-STATEMENT MODE ─────── */
.testimonial-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
/* Proof-Statement-Typografie: eigene Skala, weil GF-Statements deutlich laenger
   sind als Kundenzitate. Gleiche visuelle Sprache wie .testimonial-quote p,
   aber breitere Spalte und kleinerer Grad — Ziel sind 3–4 ruhige Desktop-Zeilen
   statt 5+ schmaler. Gilt nur im proof-statement-Modus; der
   customer-/demo-testimonial-Modus bleibt unveraendert. */
.testimonial-statement {
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--dark);
  max-width: min(1240px, 100%);
  text-wrap: balance;
  margin: 0;
}

/* Breitere Spalte nur fuer proof-statement — der Master-Container bleibt 1200px */
.testimonial-section[data-tm-mode="proof-statement"] .testimonial-inner {
  max-width: 1400px;
}
.testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof {
  gap: 28px;
}
.testimonial-proof-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.testimonial-proof-logo {
  max-height: 32px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
}
.testimonial-proof-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}
.testimonial-proof-role {
  font-size: 13px;
  /* Etwas kontraststaerker als der allgemeine Muted-Ton: Beim Proof-Statement
     ist die Rollenzeile der eigentliche Beleg und muss auch mobil bei
     Aussenlicht sicher lesbar bleiben. */
  color: rgba(7,9,13,0.62);
  display: block;
  margin-top: 1px;
}
.testimonial-proof-portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(7,9,13,0.08);
}
.testimonial-proof-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.testimonial-proof-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

/* ── RESPONSIVE ───────────────── */
@media (max-width: 1279px) {
  .testimonial-inner { padding-inline: 64px; }
  .testimonial-quote p { font-size: clamp(26px, 3vw, 38px); }
}
@media (max-width: 960px) {
  .testimonial-inner { padding-inline: 32px; }
  .testimonial-quote p { font-size: clamp(26px, 3.8vw, 36px); max-width: 100%; }
  .testimonial-logo-wrap { margin-bottom: 32px; }
  .testimonial-author { margin-top: 36px; }
}
@media (max-width: 540px) {
  .testimonial-inner { padding-inline: 24px; text-align: center; }
  .testimonial-quote p { font-size: clamp(20px, 6vw, 26px); max-width: 100%; }
  .testimonial-statement { font-size: clamp(20px, 6.5vw, 28px); }
  .testimonial-author { flex-direction: column; align-items: center; }
  .testimonial-author-text { align-items: center; }
  .testimonial-logo { max-width: 160px; }
}

/* ── PROOF-STATEMENT: eigene responsive Skala ──────────────────────────
   Laengere Statements brauchen eine flachere Kurve als kurze Kundenzitate.
   Alle Regeln sind auf [data-tm-mode="proof-statement"] begrenzt — der
   customer-/demo-testimonial-Modus der Mastervorlage bleibt unberuehrt. */
@media (max-width: 1279px) {
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-statement {
    font-size: clamp(30px, 3.4vw, 42px);
  }
}
@media (max-width: 960px) {
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-statement {
    font-size: clamp(30px, 4.6vw, 40px);
    line-height: 1.12;
    max-width: 100%;
  }
}
@media (max-width: 540px) {
  /* .container laesst bei <=600px bereits 16px je Seite frei; zusammen mit
     8px Innenabstand ergibt das die geforderten 24px zum Viewport-Rand und
     eine spuerbar breitere Textspalte (310px -> 342px bei 390px). */
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-inner {
    padding-inline: 8px;
  }
  /* 6.25vw mit Deckel 27px ist der groesste Grad, der auf 360/375/390/430px
     stabil 7 Zeilen haelt. Steilere Kurven kippen bei 360px auf 8 Zeilen und
     erzeugen abgehackte Kurzzeilen ("erfolgreich zu", "und technisches"),
     flachere setzen das Statement gegenueber der folgenden H2 unter Wert. */
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-statement {
    font-size: clamp(21px, 6.25vw, 27px);
    line-height: 1.14;
    letter-spacing: -0.018em;
    text-wrap: pretty;
  }
  .testimonial-section[data-tm-mode="proof-statement"].section-pad {
    padding-block: 64px;
  }
  /* Etwas mehr Luft zwischen Statement und Attribution — sonst klebt der
     Autorblock optisch am Text. */
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof {
    gap: 30px;
  }
  /* Attribution bleibt horizontal — kompakter als gestapelt */
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof-brand {
    flex-direction: row;
    gap: 12px;
    margin-top: 0;
  }
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof-portrait {
    width: 48px; height: 48px;
  }
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof-name {
    font-size: 13px;
  }
  .testimonial-section[data-tm-mode="proof-statement"] .testimonial-proof-role {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SOLUTIONS GRID — Compact 3×2
   ════════════════════════════════════════════════════════════════════ */
.solutions { background: var(--white); }

.solutions-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.solutions-header-left { flex: 1; max-width: 560px; }
.solutions-header-left h2 { margin-bottom: 16px; }

/* Compact 3-column grid — 3–8 cards, auto-wraps */
.solutions-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* Alle Karten einer Reihe teilen sich dieselbe Hoehe. Zusammen mit der
     min-height unten steht die finale Kartengroesse fest, bevor die
     Reveal-Animation startet — die Karte kann beim Einblenden nicht mehr
     springen, und laengere Kundentexte kippen das Raster nicht. */
  align-items: stretch;
}
/* 4 Leistungen → 2×2 auf Desktop */
.solutions-compact-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}
/* 3 Leistungen → 3-spaltig bleibt Standard */
/* 5 Leistungen → 3+2, letzte 2 Cards zentriert */
.solutions-compact-grid--5 {
  grid-template-columns: repeat(6, 1fr);
}
.solutions-compact-grid--5 .sol-card {
  grid-column: span 2;
}
.solutions-compact-grid--5 .sol-card:nth-child(4) {
  grid-column: 2 / span 2;
}
.solutions-compact-grid--5 .sol-card:nth-child(5) {
  grid-column: 4 / span 2;
}
/* 6 Leistungen → 3+3 */
.solutions-compact-grid--6 {
  grid-template-columns: repeat(3, 1fr);
}

/* Card: Basishoehe als min-height, Reihe streckt gemeinsam mit.
   Bei normalem Content bleibt es exakt bei den bisherigen Werten; bei
   ungewoehnlich langen Titeln oder Sublines wachsen alle Karten einer
   Reihe gemeinsam, statt dass eine einzelne Karte den Text abschneidet. */
.sol-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: var(--dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  height: 100%;
}
/* Medium: absolute full-bleed hinter dem Content */
.sol-card-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.sol-card-media img, .sol-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-slow) var(--ease-premium);
}
.sol-card:hover .sol-card-media img,
.sol-card:hover .sol-card-media video { transform: scale(1.04); }
.sol-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(7,9,13,0.94) 0%, rgba(7,9,13,0.55) 35%, rgba(7,9,13,0.08) 62%, transparent 100%);
  pointer-events: none;
}
/* Body: über dem Medium, pushes to bottom via margin-top:auto */
.sol-card-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 24px 28px;
}
.sol-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.sol-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin: 0;
}

/* Responsive Card-Höhen */
@media (max-width: 1279px) {
  .sol-card { min-height: 330px; }
}
@media (max-width: 960px) {
  .solutions-compact-grid { grid-template-columns: repeat(2, 1fr); }
  .solutions-header { flex-direction: column; align-items: flex-start; }
  .sol-card { min-height: 310px; }
}
@media (max-width: 540px) {
  .solutions-compact-grid { grid-template-columns: 1fr; }
  .sol-card { min-height: 290px; }
}

/* ════════════════════════════════════════════════════════════════════
   TECHNOLOGY — Cinematic Panel v2
   ════════════════════════════════════════════════════════════════════ */
.technology {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

/* Full-bleed medium behind content */
.tech-panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tech-panel-media img,
.tech-panel-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Multi-stop premium gradient: dark left → visible right + vertical edge fades */
.tech-panel-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(7,9,13,1.00)  0%,
      rgba(7,9,13,0.98) 24%,
      rgba(7,9,13,0.88) 38%,
      rgba(7,9,13,0.58) 52%,
      rgba(7,9,13,0.18) 70%,
      rgba(7,9,13,0.00) 82%
    ),
    linear-gradient(to bottom,
      rgba(7,9,13,0.28) 0%,
      transparent 9%,
      transparent 91%,
      rgba(7,9,13,0.28) 100%
    );
}

/* Content layer */
.tech-panel-inner {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  padding-bottom: 100px;
}
.tech-panel-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tech-panel-content .eyebrow { margin-bottom: 24px; }
.tech-panel-content h2 { color: var(--white); margin-bottom: 20px; }

.tech-desc {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.60);
  max-width: 520px;
  margin-bottom: 36px;
}

.tech-proof-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tech-proof-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tech-proof-marker {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 7px;
}
.tech-proof-item > span:last-child {
  font-size: 15px;
  color: rgba(255,255,255,0.70);
  line-height: 1.55;
}

/* Tablet */
@media (max-width: 1100px) {
  .tech-panel-gradient {
    background:
      linear-gradient(to right,
        rgba(7,9,13,1.00)  0%,
        rgba(7,9,13,0.97) 28%,
        rgba(7,9,13,0.84) 46%,
        rgba(7,9,13,0.48) 66%,
        rgba(7,9,13,0.12) 84%,
        rgba(7,9,13,0.00) 100%
      ),
      linear-gradient(to bottom,
        rgba(7,9,13,0.28) 0%,
        transparent 9%,
        transparent 91%,
        rgba(7,9,13,0.28) 100%
      );
  }
  .tech-panel-inner { padding-top: 72px; padding-bottom: 72px; }
  .tech-panel-content { max-width: 480px; }
}

/* Mobile — stacked layout */
@media (max-width: 768px) {
  .technology { display: flex; flex-direction: column; }
  .tech-panel-media {
    position: relative;
    inset: auto;
    height: 54vw;
    min-height: 200px;
    flex-shrink: 0;
  }
  .tech-panel-media img,
  .tech-panel-media video {
    position: absolute;
    inset: 0;
    object-position: center center;
  }
  .tech-panel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(7,9,13,0.10) 0%,
      rgba(7,9,13,0.72) 80%,
      rgba(7,9,13,1.00) 100%
    );
  }
  .tech-panel-inner { padding-top: 36px; padding-bottom: 52px; }
  .tech-panel-content { max-width: 100%; }
  .tech-desc { max-width: 100%; }
}
@media (max-width: 480px) {
  .tech-panel-media { height: 62vw; }
  .tech-panel-inner { padding-top: 28px; padding-bottom: 44px; }
}

/* ════════════════════════════════════════════════════════════════════
   ENGINEERING / PROZESS
   ════════════════════════════════════════════════════════════════════ */
.engineering { background: var(--white); }

.engineering-inner {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 64px;
  align-items: start;
}
.engineering-steps { display: flex; flex-direction: column; }

.eng-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.eng-step:first-child { border-top: 1px solid var(--line); }
.eng-step-num {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--line);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-standard);
}
.eng-step:hover .eng-step-num { color: var(--brand); }
.eng-step-title { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.eng-step-text { font-size: 14px; color: var(--ink-muted); line-height: 1.6; }

.engineering-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 600px;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
.engineering-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1000px) {
  .engineering-inner { grid-template-columns: 1fr; gap: 48px; }
  .engineering-media { position: static; aspect-ratio: 16 / 9; }
  .eng-step-num { font-size: 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   COMPANY / MISSION
   ════════════════════════════════════════════════════════════════════ */
.company-section { background: var(--white); }

.company-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 96px;
  align-items: center;
}

.company-body {
  display: flex;
  flex-direction: column;
}

.company-body .eyebrow {
  margin-bottom: 16px;
}

.company-body h2 {
  margin-bottom: 32px;
  /* Ausgeglichene Zeilenlaengen sind fuer Headlines gewuenscht — fuer
     Fliesstext ausdruecklich nicht (siehe unten). */
  text-wrap: balance;
}

/* ── Body-Copy der Unternehmen-Section ──────────────────────────────
   Das Template vergibt fuer den ersten Absatz .body-lead und ab dem
   zweiten .body-text. Die Schriftwerte waren dadurch zwar rechnerisch
   angeglichen, .body-text trug aber zusaetzlich max-width: 420px und
   einen eigenen margin-bottom. Ergebnis: Absatz 2 brach deutlich frueher
   um und las sich wie ein anderer Textstil.

   Deshalb greift die Typografie jetzt klassenunabhaengig ueber das
   Element. Beide Absaetze teilen Schrift, Groesse, Gewicht, Zeilenhoehe,
   Laufweite, Farbe, Breite und Abstand — unabhaengig davon, wie viele
   Absaetze eine Kundenconfig liefert. */
.company-body p {
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.04em;
  color: var(--ink-soft);
  max-width: min(62ch, 100%);
  /* Kein balance fuer Fliesstext — das erzeugt kuenstlich kurze Zeilen.
     pretty optimiert nur Schusterjungen/Hurenkinder, der Umbruch bleibt
     ansonsten der natuerliche des Browsers. */
  text-wrap: pretty;
  margin: 0;
}
/* Ein einziger, gemeinsamer Absatzabstand statt individueller Margins */
.company-body p + p {
  margin-top: 24px;
}
.company-body p:last-of-type {
  margin-bottom: 44px;
}

@media (max-width: 700px) {
  .company-body p { font-size: 17px; }
  .company-body p:last-of-type { margin-bottom: 36px; }
}

.company-body .btn {
  align-self: flex-start;
}

.company-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-height: 480px;
}

.company-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform var(--motion-slow) var(--ease-premium);
}

.company-media:hover img { transform: scale(1.02); }

@media (max-width: 900px) {
  .company-inner { grid-template-columns: 1fr; gap: 48px; }
  .company-media { aspect-ratio: 16 / 9; }
}

/* ════════════════════════════════════════════════════════════════════
   CTA SECTION — WEISS MIT GROSSEM BILD
   ════════════════════════════════════════════════════════════════════ */
.cta-section {
  background: var(--white);
  padding-block: var(--sv);
}

/* Section-Media: <picture> muss den Container fuellen, sonst kollabiert
   height:100% des inneren <img> (picture ist per Default inline). */
.intro-media picture,
.engineering-media picture,
.company-media picture,
.cta-media-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-media-wrap {
  border-radius: var(--media-radius);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  position: relative;
  max-height: 640px;
}
.cta-media-wrap img, .cta-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cta-focus-desktop, center 40%);
}
@media (max-width: 768px) {
  .cta-media-wrap img { object-position: var(--cta-focus-mobile, center 80%); }
}
.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(7,9,13,0.76) 0%,
    rgba(7,9,13,0.42) 55%,
    rgba(7,9,13,0.14) 100%
  );
}
.cta-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
  max-width: 640px;
}
.cta-content .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.cta-h2 {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 16px;
}
.cta-desc {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin-bottom: 36px;
  max-width: 400px;
}
.cta-actions { display: flex; align-items: center; gap: 14px; }
.cta-contact {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--motion-fast);
}
.cta-contact:hover { color: #fff; }

@media (max-width: 900px) {
  .cta-media-wrap { aspect-ratio: 4 / 3; max-height: none; }
  .cta-content { padding: 40px 36px; max-width: none; }
  .cta-overlay { background: rgba(7,9,13,0.62); }
}
@media (max-width: 600px) {
  .cta-media-wrap { aspect-ratio: 3 / 4; }
  .cta-h2 { font-size: 32px; }
  .cta-content { padding: 32px 28px; justify-content: flex-start; }
  .cta-actions { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--black);
  padding: 80px 0 0;
}
/* Der Footer hat vier Bereiche (Brand, Loesungen, Branchen, Kontakt), das
   Raster deklarierte aber fuenf Spalten. Die fuenfte blieb leer und schob die
   Kontaktspalte um gut 250px vor die rechte Containerkante — rechts stand
   ungenutzter Leerraum, waehrend die Legal-Zeile darunter bis zur Kante lief.
   Jetzt vier Spalten: die Brand-Spalte nimmt den Ueberschuss auf, die drei
   Textspalten bleiben kompakt, und die Kontaktspalte endet buendig mit der
   Legal-Navigation. Der Inhalt der Kontaktspalte bleibt linksbuendig.       */
.footer-inner {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.55fr)   /* Brand: Logo, Subline, Socials       */
    minmax(0, 1fr)          /* Loesungen                            */
    minmax(0, 0.8fr)        /* Branchen (kurze Labels)              */
    minmax(0, 1.05fr);      /* Kontakt, endet an der Containerkante */
  gap: 48px 56px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {}
.footer-logo {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo img, .footer-logo svg {
  max-width: 160px;
  max-height: 32px;
  object-fit: contain;
  object-position: left;
}
.footer-logo span { color: var(--brand); }
/* Marken-Subline unter dem Logo. Sie traegt jetzt eine vollstaendige
   Markenaussage statt eines Halbsatzes und soll auf Desktop bewusst zweizeilig
   laufen. 52ch laufen mit dem Schriftgrad mit: In der rund 420px breiten
   Brand-Spalte ergibt das zwei ruhige Zeilen, ohne in die Loesungen-Spalte zu
   reichen. Bleibt dezenter als die Footer-Ueberschriften (#fff), aber lesbar
   genug fuer den Markenclaim. */
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  line-height: 1.55;
  max-width: min(52ch, 100%);
  text-wrap: pretty;
  margin-bottom: 18px;
}
/* Die Wrapper sind bewusst groesser als die Icons (Touch-Ziel, gleiche
   vertikale Achse). Weil das Icon im Wrapper zentriert sitzt, wuerde die Reihe
   sonst gegenueber Logo und Subline eingerueckt wirken — der negative
   Startversatz zieht das erste Icon wieder optisch buendig nach links.       */
.footer-social {
  display: flex;
  gap: var(--soc-gap, 6px);
  align-items: center;
  margin-left: calc((var(--soc-box, 32px) - var(--soc-h, 18px)) / -2);
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--soc-box, 32px);
  height: var(--soc-box, 32px);
  flex-shrink: 0;
  color: #ffffff;
  transition: opacity var(--motion-fast) var(--ease-premium);
}
.footer-social-link:hover { opacity: 0.7; }
.footer-social-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* ── Social-Icons: optische Normalisierung ──────────────────────────────
   Alle Marken-SVGs liegen in einer 24x24-ViewBox, fuellen sie aber
   unterschiedlich weit aus. Gemessene Ink-Boxen (Breite x Hoehe in
   ViewBox-Einheiten):
       LinkedIn  24 x 24      Instagram 24 x 24      Xing   20,4 x 24
       Facebook  24 x 23,9    YouTube   24 x 16,8    X      21,6 x 19,5
       Mail      21 x 16,5
   Eine einheitliche CSS-Hoehe reicht deshalb nicht: YouTube und Mail
   erschienen bei height:20px nur rund 14px hoch, also spuerbar kleiner als
   LinkedIn oder Instagram. Die Hoehen unten sind so gesetzt, dass die
   SICHTBARE Ink-Hoehe bei allen bei rund 17-18px liegt. Die breiten Badges
   (YouTube, Mail, X) bleiben minimal flacher, weil sie sonst ueber ihre
   Breite optisch schwerer wirken als die kompakten Marken.
   width:auto haelt jedes Logo unverzerrt im Originalseitenverhaeltnis.     */
.soc-ico {
  height: var(--soc-h, 18px);
  width: auto;
  flex-shrink: 0;
  display: block;
}
.soc-ico--linkedin,
.soc-ico--facebook,
.soc-ico--instagram,
.soc-ico--xing    { height: var(--soc-h, 18px); }
.soc-ico--x       { height: calc(var(--soc-h, 18px) * 1.17); }  /* Ink 19,5 → ~17,1 sichtbar */
.soc-ico--youtube { height: calc(var(--soc-h, 18px) * 1.33); }  /* Ink 16,8 → ~16,8 sichtbar */
.soc-ico--email   { height: calc(var(--soc-h, 18px) * 1.33); }  /* Ink 16,5 → ~16,5 sichtbar */

.footer-col h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.4;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-link {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  transition: color var(--motion-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.footer-link:hover { color: #fff; }

.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.footer-contact-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 32px;
  flex-wrap: wrap;
}
/* Unterste Footer-Zeile auf denselben Textwert wie .footer-link (0.55) —
   0.3 war auf dem dunklen Untergrund zu schwach lesbar. Weiterhin dezenter
   als die weissen Footer-Ueberschriften. */
.footer-copyright { font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal-link {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color var(--motion-fast);
}
.footer-legal-link:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer { padding-top: 56px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 400px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   MOTION SYSTEM v16 — SCROLL REVEALS · HERO · SIGNATURE · COOKIE
   ════════════════════════════════════════════════════════════════════ */

/* ─── SCROLL REVEAL UTILITY ──────────────────────────────────────────
   Der Reveal laeuft bewusst ueber eine Keyframe-Animation und nicht ueber
   die transition-Shorthand. Grund: Komponenten wie .sol-card definieren
   weiter unten eine eigene transition-Shorthand fuer den Hover-Lift. Diese
   ueberschrieb die Reveal-Transition komplett — opacity wurde dann gar
   nicht mehr animiert und die Karte sprang hart auf, waehrend nur das
   translateY lief. Eine Animation ist gegen solche Overrides immun.

   Animiert werden ausschliesslich opacity und transform. Keine Height,
   keine Breite, keine Grid-Position — das Layout steht vor Animationsstart
   vollstaendig fest.

   Der Delay kommt als --reveal-delay aus motion.js. Nach Ende der
   Animation setzt motion.js .is-revealed: Damit faellt der Reveal-Transform
   weg und der Hover-Lift der Komponente bekommt seine Property zurueck. */
@keyframes industrify-reveal-rise {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; }
.reveal:not(.is-revealed) {
  transform: translateY(var(--reveal-distance));
  will-change: opacity, transform;
}
.reveal.in-view {
  animation: industrify-reveal-rise
             var(--reveal-duration, 760ms)
             var(--ease-premium)
             var(--reveal-delay, 0ms)
             both;
}
/* Endzustand nach animationend — kein Rest-Transform, kein will-change */
.reveal.is-revealed {
  opacity: 1;
  animation: none;
  will-change: auto;
}

/* Stagger-Fallback rein in CSS, falls JS die Delays nicht setzen kann.
   motion.js ueberschreibt --reveal-delay inline und deckt beliebig viele
   Karten ab; diese Regeln sind nur das Netz darunter. */
[data-reveal-group] > .reveal:nth-child(1) { --reveal-delay:   0ms; }
[data-reveal-group] > .reveal:nth-child(2) { --reveal-delay: 100ms; }
[data-reveal-group] > .reveal:nth-child(3) { --reveal-delay: 200ms; }
[data-reveal-group] > .reveal:nth-child(4) { --reveal-delay: 300ms; }
[data-reveal-group] > .reveal:nth-child(5) { --reveal-delay: 400ms; }
[data-reveal-group] > .reveal:nth-child(6) { --reveal-delay: 500ms; }
[data-reveal-group] > .reveal:nth-child(7) { --reveal-delay: 600ms; }
[data-reveal-group] > .reveal:nth-child(8) { --reveal-delay: 700ms; }

/* ─── HERO TEXT REVEAL ───────────────────────────────────────────── */
.hero-text .eyebrow {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-base) var(--ease-out) 40ms,
    transform var(--motion-slow) var(--ease-reveal) 40ms;
}
.hero-text .hero-h1 {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--motion-slow) var(--ease-out) 160ms,
    transform var(--motion-slow) var(--ease-reveal) 160ms;
}
.hero-text .hero-sub {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-base) var(--ease-out) 320ms,
    transform var(--motion-base) var(--ease-reveal) 320ms;
}
.hero-text .hero-actions {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-base) var(--ease-out) 460ms,
    transform var(--motion-base) var(--ease-reveal) 460ms;
}
body.hero-loaded .hero-text .eyebrow,
body.hero-loaded .hero-text .hero-h1,
body.hero-loaded .hero-text .hero-sub,
body.hero-loaded .hero-text .hero-actions {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HERO MEDIA SCALE (sehr langsam, fast imperceptible) ────────── */
.hero-media video,
.hero-media img {
  transform: scale(1.04);
  transition: transform 2800ms var(--ease-out);
}
body.hero-loaded .hero-media video,
body.hero-loaded .hero-media img {
  transform: scale(1.0);
}

/* ─── EDITORIAL IMAGE CLIP REVEAL ───────────────────────────────── */
.editorial-clip {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.03);
  transition:
    clip-path 1000ms var(--ease-reveal),
    transform 1000ms var(--ease-reveal);
  overflow: hidden;
}
.editorial-clip.in-view {
  clip-path: inset(0 0 0% 0);
  transform: scale(1.0);
}

/* ─── COOKIE CONSENT BANNER ──────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: min(440px, calc(100vw - 48px));
  background: rgba(8, 10, 16, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--panel-radius);
  padding: 20px 22px 18px;
  z-index: 7990;
  box-shadow: 0 8px 48px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-premium);
  pointer-events: none;
}
#cookie-banner.cb-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#cookie-banner.cb-hiding {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.cb-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}
.cb-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.52);
  margin-bottom: 16px;
}
/* Zwei Reihen: oben die beiden Entscheidungen gleichwertig nebeneinander,
   darunter die Einstellungen als vollbreiter Ghost-Button. Grid statt Flex,
   damit beide oberen Buttons exakt gleich breit und gleich hoch sind. */
.cb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Primaerbutton uebernimmt die Markenfarbe der jeweiligen Kundenconfig.
   --on-brand wird in der Pipeline aus dem Kontrastverhaeltnis berechnet
   (Weiss oder Fast-Schwarz), damit die Beschriftung immer lesbar bleibt. */
.cb-btn-accept {
  background: var(--brand);
  color: var(--on-brand, var(--white));
}
.cb-btn-accept:hover { background: var(--brand-hover); }
.cb-btn-essential {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.78);
}
.cb-btn-essential:hover { background: rgba(255,255,255,0.14); }
/* Volle Breite unter der Entscheidungsreihe, dezent aber als Button erkennbar */
.cb-btn-prefs {
  grid-column: 1 / -1;
  background: transparent;
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  min-height: 38px;
}
.cb-btn-prefs:hover {
  border-color: rgba(255,255,255,0.26);
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.04);
}

/* Mobil: schmalerer Aussenabstand, damit der Banner nicht zu gedraengt wirkt.
   Reichen zwei Buttons nebeneinander nicht, laufen sie untereinander. */
@media (max-width: 600px) {
  #cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    padding: 18px 18px 16px;
  }
  .cb-btn { min-height: 44px; }
  .cb-btn-prefs { min-height: 42px; }
}
@media (max-width: 360px) {
  /* Sehr schmale Geraete: Entscheidungsreihe ebenfalls gestapelt */
  .cb-actions { grid-template-columns: 1fr; }
}

/* ─── COOKIE PREFERENCES DIALOG ──────────────────────────────────── */
#cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 8000;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cookie-overlay.cd-open {
  opacity: 1;
  pointer-events: auto;
}
#cookie-dialog {
  width: min(560px, calc(100vw - 40px));
  max-height: min(620px, calc(100svh - 60px));
  display: flex;
  flex-direction: column;
  background: #0B0D14;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--panel-radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-premium);
}
#cookie-overlay.cd-open #cookie-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cd-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}
.cd-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  outline: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.cd-close:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.cd-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
}
.cd-intro {
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.cd-category {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.cd-cat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}
.cd-cat-info { flex: 1; min-width: 0; }
.cd-cat-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.cd-cat-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.3);
  margin-top: 3px;
  line-height: 1.5;
}
/* Toggle switch */
.cd-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cd-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cd-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}
.cd-toggle input:checked + .cd-toggle-track { background: var(--brand); }
.cd-toggle input:disabled + .cd-toggle-track { opacity: 0.5; cursor: default; }
.cd-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: transform var(--motion-fast) var(--ease-premium);
}
.cd-toggle input:checked + .cd-toggle-track::after { transform: translateX(16px); }
.cd-footer {
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ─── FOOTER COOKIE SETTINGS BUTTON ──────────────────────────────── */
.footer-cookie-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0;
  transition: color var(--motion-fast);
  line-height: 1.4;
}
/* Hover auf 0.7 angeglichen wie .footer-legal-link — bei 0.58 waere der
   Hover gegenueber dem neuen Grundwert 0.55 nicht mehr wahrnehmbar. */
.footer-cookie-btn:hover { color: rgba(255,255,255,0.7); }

/* ─── MICROINTERACTIONS ───────────────────────────────────────────── */
/* Button active press */
.btn {
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-instant) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.btn:active { transform: scale(0.975); }

/* Social icon lift */
.footer-social-link {
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-premium);
}
.footer-social-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* Sol card lift */
.sol-card {
  transition:
    transform var(--motion-base) var(--ease-premium),
    box-shadow var(--motion-base) var(--ease-out);
}
.sol-card:hover {
  transform: translateY(-4px);
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal-Elemente sofort sichtbar (JS-unabhängiger Fallback) */
  .reveal,
  .reveal:not(.is-revealed) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  .editorial-clip { clip-path: inset(0 0 0% 0) !important; transform: none !important; }
  .hero-text .eyebrow,
  .hero-text .hero-h1,
  .hero-text .hero-sub,
  .hero-text .hero-actions { opacity: 1 !important; transform: none !important; }
  .hero-media video, .hero-media img { transform: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   INDUSTRIES SECTION  (static / locked — kein Kundenpersonalisierung)
   ════════════════════════════════════════════════════════════════════ */

.industries-section { background: #151515; }
.industries-section.section-pad { padding-block: 80px; }

/* ── Header ── */
.industries-header {
  max-width: 860px;
  margin-bottom: 64px;
}
.industries-header .eyebrow { color: var(--brand); }
.industries-header h2 {
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 700;
  color: #F2F2F2;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin-top: 12px;
  max-width: 820px;
}
.industries-header-sub {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.52);
  margin-top: 20px;
  max-width: 620px;
}

/* ── Grid: 3×2 → 2×3 → 1×6 ── */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 20px;
  align-items: stretch;
}
/* 4 Einträge: 2×2 */
.industries-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}
/* 5 Einträge: 3+2 zentriert via 6-Spalten-Trick */
.industries-grid--5 {
  grid-template-columns: repeat(6, 1fr);
}
.industries-grid--5 .industry-item {
  grid-column: span 2;
}
.industries-grid--5 .industry-item:nth-child(4) {
  grid-column: 2 / span 2;
}
.industries-grid--5 .industry-item:nth-child(5) {
  grid-column: 4 / span 2;
}

/* ── Item: label + card + statement ── */
.industry-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Label above card ── */
/* Branchenlabel ueber der Karte: exakt das Eyebrow-Styling, aber in Weiss und
   durchgehend in Versalien. Gilt verbindlich fuer alle Kundendemos. */
.industry-item-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;
}

/* ── Card (CAD illustration only) ── */
.industry-card {
  isolation: isolate;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 320ms ease;
}
.industry-card:hover {
  border-color: rgba(255,255,255,0.28);
}

/* ── CAD illustration: mix-blend-mode entfernt dunklen Hintergrund ── */
.industry-card img {
  width: 100%;
  max-width: var(--illu-scale, 88%);
  height: auto;
  display: block;
  mix-blend-mode: lighten;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.industry-card:hover img {
  transform: scale(1.02);
}

/* ── Statement below card ── */
.industry-item-statement {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.28;
}

/* ── Responsive ──
   Die Varianten --4 und --5 setzen auf Desktop eigene Spaltenzahlen und bei
   --5 zusaetzlich feste grid-column-Werte fuer die Items 4 und 5. Diese
   Zuweisungen muessen in den Breakpoints mit zurueckgesetzt werden, sonst
   ueberlagern sich die Karten. Gilt unabhaengig von der Anzahl der Branchen. */
@media (max-width: 1100px) {
  .industries-grid,
  .industries-grid--4,
  .industries-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .industries-grid--5 .industry-item,
  .industries-grid--5 .industry-item:nth-child(4),
  .industries-grid--5 .industry-item:nth-child(5) { grid-column: auto; }
}
@media (max-width: 600px) {
  .industries-section.section-pad { padding-block: 64px; }
  .industries-grid,
  .industries-grid--4,
  .industries-grid--5 {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
  .industries-grid--5 .industry-item,
  .industries-grid--5 .industry-item:nth-child(4),
  .industries-grid--5 .industry-item:nth-child(5) {
    grid-column: 1 / -1;
  }
  .industry-card { width: 100%; }
  .industries-header { margin-bottom: 48px; }
  .industries-header h2 { font-size: clamp(28px, 7.5vw, 38px); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .industry-card { transition: border-color 0.01ms; }
  .industry-card img { transition: none; }
  .industry-card:hover img { transform: none; }
}

/* ══════════════════════════════════════════════════════
   WORDMARK FALLBACK — config-gesteuert (logoMode: wordmark-fallback)
   ═══════════════════════════════════════════════════ */
.brand-wordmark {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.brand-wordmark--nav {
  font-size: 22px;
}
.brand-wordmark--mobile {
  font-size: 20px;
}
.brand-wordmark--footer {
  font-size: 18px;
}

/* ─── CONTACT SECTION v3 ────────────────────────────────────────────── */
/* CSS v25: Premium-Feinschliff — editoriale Kontaktzeilen, kein Box-Look,
            vertikale Zentrierung, 600px-Formular, kompakte Gaps           */

.contact-section {
  background: #151515;
  color: var(--white);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 64px;
  align-items: center;
}

/* ── Left: Content ── */
.contact-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-section .eyebrow {
  margin-bottom: 16px;
}

.contact-h2 {
  font-size: clamp(26px, 2.6vw + 8px, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 20px;
}

.contact-subline {
  font-size: clamp(15px, 0.6vw + 12px, 17px);
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  margin-bottom: 32px;
}

/* ── Contact Direct Rows — editorial, kein Box-Look ── */
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
}

.contact-direct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border: none;
  background: none;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.contact-direct-row:hover {
  background: none;
}

.contact-direct-row:hover .contact-direct-icon {
  background: rgba(var(--brand-rgb), 0.18);
}

.contact-direct-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.10);
  color: var(--brand);
  flex-shrink: 0;
  transition: background var(--motion-fast);
}

.contact-direct-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-direct-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.38);
}

.contact-direct-value {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
}

/* ── Social Block ── */
.contact-social {
  margin-bottom: 32px;
}

.contact-social-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.35);
  margin-bottom: 12px;
}

.contact-social-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--control-radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}

.contact-social-link:hover {
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), 0.25);
}

/* ── Trust Points ── */
.contact-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
}

.contact-trust-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 12px;
}

.contact-trust-item + .contact-trust-item {
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: 12px;
  padding-right: 12px;
}

.contact-trust-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.35);
}

.contact-trust-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

/* ── Right: Form Card ── */
.contact-form-wrap {
  width: 100%;
  max-width: 600px;
}

.contact-form-card {
  background: #1E1E1E;
  border: 1px solid #313131;
  border-radius: var(--panel-radius);
  padding: 32px;
}

/* ── Form Groups ── */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row--split {
  flex-direction: row;
  gap: 10px;
}

.form-row--split .form-group {
  flex: 1 1 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Feldbeschriftung und Eingabetext liegen je 2px ueber den frueheren Werten
   und laufen auf Medium (500). Das Formular ist der Konversionspunkt der
   Seite; 12/14px wirkten dort im Verhaeltnis zur uebrigen Typografie zu
   zurueckhaltend. */
.form-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.01em;
}

.form-required {
  color: var(--brand);
  margin-left: 2px;
}

.form-optional {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  font-size: 13px;
}

.form-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: #191919;
  border: 1px solid #313131;
  border-radius: var(--control-radius);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
  outline: none;
}

.form-input::placeholder {
  color: rgba(255,255,255,0.2);
}

.form-input:hover {
  border-color: rgba(255,255,255,0.2);
}

.form-input:focus {
  border-color: var(--brand);
  background: #1C1C1C;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}

.form-input.is-error {
  border-color: #E55;
}

.form-textarea {
  height: auto;
  min-height: 114px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

/* Error messages */
.form-error {
  font-size: 11px;
  color: #FF6B6B;
  min-height: 0;
  display: block;
}

/* reCAPTCHA */
.form-recaptcha-wrap {
  margin-top: 2px;
}

.form-recaptcha-demo-note {
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--control-radius);
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
}

/* Privacy */
.form-privacy {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  line-height: 1.5;
  margin-top: 2px;
}

.form-privacy-link {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--motion-fast);
}

.form-privacy-link:hover {
  color: var(--white);
}

/* Submit Button */
.btn-form-submit {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}

.btn-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.cf-spinner {
  animation: cf-spin 0.8s linear infinite;
}

/* Success & Error States */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 48px 24px;
  min-height: 200px;
}

.form-success-msg {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.5;
}

.form-global-error {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(229, 85, 85, 0.08);
  border: 1px solid rgba(229, 85, 85, 0.22);
  border-radius: var(--control-radius);
  font-size: 12px;
  color: #FF9090;
  line-height: 1.5;
}

.form-global-error a {
  color: inherit;
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 1160px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-form-wrap {
    max-width: 100%;
  }

  .contact-form-card {
    padding: 28px;
  }
}

@media (max-width: 700px) {
  .contact-form-card {
    padding: 20px;
  }

  .form-row--split {
    flex-direction: column;
    gap: 10px;
  }

  .contact-trust {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 24px;
  }

  .contact-trust-item + .contact-trust-item {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-left: 0;
    padding-top: 16px;
  }

  .contact-trust-item {
    padding-right: 0;
  }
}