/* ==========================================================================
   Merkuno — Design tokens
   Warm ivory-dominant canvas, deep navy contrast, cornflower blue + copper.
   ========================================================================== */
:root {
  --color-navy: #14203a;
  --color-navy-soft: #1e2d4d;
  --color-navy-deep: #0e1729;

  /* Was #faf8f1 — merged with --color-paper site-wide per design review
     (they read as near-identical, and this removes the seam between
     adjacent ivory/paper sections; the two tokens are kept separate here
     only so the class names in the markup keep their meaning). */
  --color-ivory: #fefcf7;
  --color-ivory-dim: #f5f1e7;
  --color-paper: #fefcf7;

  --color-cornflower: #5b7fe4;
  --color-cornflower-dark: #435fc2;
  --color-cornflower-soft: #c9d5f7;

  --color-copper: #be6f42;
  --color-copper-dark: #94512b;
  --color-copper-soft: #e3b48c;

  --color-ink: #241c12;
  --color-ink-soft: #6e6252;
  --color-on-navy: #f6efdf;
  --color-on-navy-soft: #c2b8a2;

  --line-on-ivory: rgba(36, 28, 18, 0.13);
  --line-on-navy: rgba(246, 239, 223, 0.16);

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container-max: 1320px;
  --edge: clamp(1.5rem, 4vw, 4rem);

  --section-pad: 3rem;           /* 48px — mobile ≤767px */
  --section-pad-compact: 1.75rem; /* 28px — mobile ≤767px */
  /* Used instead of a flat 0 on the top of a section that follows a
     same/near-same-background section: keeps a visible cushion above
     that section's own heading (so it doesn't sit flush against the
     colour seam) while still avoiding a doubled gap with the previous
     section's full bottom padding. Calc'd off the live --section-pad(-compact)
     value, so it stays correct across all three breakpoints automatically. */
  --section-pad-half: calc(var(--section-pad) / 2);
  --section-pad-compact-half: calc(var(--section-pad-compact) / 2);
  /* Industrial-premium card radii — deliberately tighter than a typical
     SaaS/pill aesthetic (was 14/28px); every card and dialog reads from
     these two tokens, so this single change re-tunes the whole site. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.34, 1.32, 0.64, 1);
}

@media (min-width: 768px) {
  :root {
    --section-pad: 4rem;           /* 64px — tablet 768–1023px */
    --section-pad-compact: 2.5rem; /* 40px — ≥768px */
  }
}
@media (min-width: 1024px) {
  :root {
    --section-pad: 5.5rem; /* 88px — desktop ≥1024px */
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-cornflower);
  color: var(--color-ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s var(--ease-editorial);
}
.skip-link:focus { top: 1rem; }

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.br-desktop { display: none; }
@media (min-width: 860px) { .br-desktop { display: inline; } }

/* Subtle paper grain — a tactile film over ivory/paper sections. Purely
   decorative, so it is skipped for users who prefer reduced motion isn't
   relevant here (it is static), but stays invisible to assistive tech. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.14  0 0 0 0 0.11  0 0 0 0 0.07  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.section-head--on-navy .eyebrow,
.section--navy .eyebrow { color: var(--color-copper-soft); }

/* Alternating accent colour — every other homepage section swaps its
   eyebrow/index accent from copper to cornflower blue so the page reads
   as a sequence of distinct sections while scrolling, not one uniform
   copper accent top to bottom. Scoped to the small typographic accent
   elements only (never buttons/links), so it can't bleed into shared
   brand chrome. */
.section--accent-blue .eyebrow { color: var(--color-cornflower-dark); }
.section--accent-blue.section--navy .eyebrow,
.section--accent-blue .section-head--on-navy .eyebrow { color: var(--color-cornflower-soft); }
.section--accent-blue .service-card__index,
.section--accent-blue .teaser-card__index,
.section--accent-blue .mini-step__num,
.section--accent-blue .offer-card__index { color: var(--color-cornflower-dark); }
.section--accent-blue.section--navy .mini-step__num,
.section--accent-blue.section--navy .teaser-card__index { color: var(--color-cornflower-soft); }
.section--accent-blue .mini-step { border-top-color: var(--color-cornflower); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

h2 {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.12;
  max-width: 40ch;
  text-wrap: balance;
}
.section-head--on-navy h2, .section--navy h2 { color: var(--color-on-navy); }

h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.25; }

.section-head { max-width: 62rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
/* Compact supplementary sections (trust-factor add-ons) — capped well below
   the standard section rhythm: max 64px/40px padding, max 24px heading gap,
   max 20px between list items. */
.section.section--compact { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* Slightly roomier compact variant (max 72px/48px) — homepage founder
   teaser, which needs more breathing room than the 64px trust-factor
   add-ons but must still read as a teaser, not a full profile section. */
.section.section--compact-lg { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section-head--tight { margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.section-head__lede {
  margin-top: 1.25rem;
  max-width: 46rem;
  font-size: 1.05rem;
  color: var(--color-ink-soft);
}
.section--navy .section-head__lede { color: var(--color-on-navy-soft); }

/* ==========================================================================
   Buttons (magnetic — see js/modules/magnetic.js)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95rem 1.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: transform 0.35s var(--ease-soft), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  will-change: transform;
}
.btn--primary {
  background: var(--color-cornflower);
  color: var(--color-ivory);
  box-shadow: 0 3px 10px -5px rgba(91, 127, 228, 0.55);
}
.btn--primary:hover { background: var(--color-cornflower-dark); box-shadow: 0 5px 14px -6px rgba(91, 127, 228, 0.6); }
.btn--ghost {
  border: 1px solid var(--line-on-ivory);
  color: var(--color-ink);
}
.section--navy .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost { border-color: var(--line-on-navy); color: var(--color-on-navy); }
.btn--ghost:hover { border-color: var(--color-copper); color: var(--color-copper); }
.btn--dark {
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: 0 3px 10px -5px rgba(36, 28, 18, 0.5);
}
.btn--dark:hover { background: var(--color-navy); box-shadow: 0 5px 14px -6px rgba(36, 28, 18, 0.55); }
.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn--lg { padding: 1.15rem 2.35rem; font-size: 1.03rem; }
.btn--wide { width: 100%; }
/* The unified CTA phrase is long enough to overflow a nowrap pill button
   in these narrower contexts — let it wrap onto a second line instead. */
.hero__actions .btn,
.mobile-nav__footer .btn,
.cta__form .btn {
  white-space: normal;
  text-align: center;
}
.magnetic { position: relative; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above .mobile-nav (600) so the toggle button — the only close control
     for the open menu — stays visible and clickable above the overlay,
     but below the consent banner/modal (700/800). */
  z-index: 650;
  padding-block: 1.25rem;
  transition: padding 0.3s var(--ease-editorial), background 0.4s var(--ease-editorial), box-shadow 0.3s var(--ease-editorial), color 0.4s var(--ease-editorial), top 0.3s var(--ease-editorial);
  color: var(--color-ink);
}

.site-header[data-scrolled="true"] {
  padding-block: 0.75rem;
  box-shadow: 0 1px 0 var(--line-on-ivory);
}
.site-header[data-theme="dark"] {
  color: var(--color-on-navy);
}
/* Fully opaque once scrolled — no page content may show through a fixed
   header sitting over it. */
.site-header[data-scrolled="true"][data-theme="light"] {
  background: var(--color-ivory);
  box-shadow: 0 1px 0 var(--line-on-ivory);
}
.site-header[data-scrolled="true"][data-theme="dark"] {
  background: var(--color-navy);
  box-shadow: 0 1px 0 var(--line-on-navy);
}
/* While the mobile menu is open, the header strip sits visually on top of
   the (also opaque) navy panel below it — match it exactly, regardless of
   scroll position or the page section's own theme, so the header never
   reads as a mismatched sliver and the white close icon stays legible. */
.site-header[data-menu-open="true"],
.site-header[data-scrolled="true"][data-menu-open="true"] {
  background: var(--color-navy);
  color: var(--color-on-navy);
  box-shadow: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.wordmark__mark { color: inherit; display: inline-flex; }

.main-nav ul { display: flex; gap: 2rem; }
.main-nav a {
  white-space: nowrap;
  font-size: 0.9rem;
  color: inherit;
  opacity: 0.72;
  position: relative;
  padding-block: 0.25rem;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--color-copper);
  transition: right 0.35s var(--ease-editorial);
}
.main-nav a:hover { opacity: 1; color: var(--color-copper); }
.main-nav a:hover::after { right: 0; }
.main-nav a[data-current="true"] { opacity: 1; }
.main-nav a[data-current="true"]::after { right: 0; }

/* Dropdown under a top-level item (Wissen). Opens on hover and on keyboard
   focus; the top-level link itself still navigates to the hub page. The
   panel is navy in both header themes so it reads as its own surface. */
.main-nav__item--sub { position: relative; }
.main-nav__caret {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: 0.1em;
  transition: transform 0.25s var(--ease-editorial);
}
.main-nav__item--sub:hover .main-nav__caret,
.main-nav__item--sub:focus-within .main-nav__caret { transform: rotate(180deg); }
.main-nav .main-nav__sub {
  display: block;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--color-navy);
  color: var(--color-on-navy);
  border: 1px solid var(--line-on-navy);
  border-radius: 6px;
  box-shadow: 0 18px 36px -18px rgba(14, 23, 41, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.25s var(--ease-editorial), visibility 0s linear 0.25s;
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.main-nav .main-nav__sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1rem;
  height: 1rem;
}
.main-nav__item--sub:hover .main-nav__sub,
.main-nav__item--sub:focus-within .main-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.main-nav .main-nav__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--color-on-navy);
  opacity: 0.85;
}
.main-nav .main-nav__sub a::after { display: none; }
.main-nav .main-nav__sub a:hover,
.main-nav .main-nav__sub a:focus-visible {
  opacity: 1;
  color: var(--color-on-navy);
  background: var(--color-navy-soft);
}
.main-nav .main-nav__sub a[aria-current="page"] { opacity: 1; color: var(--color-copper-soft); }
@media (prefers-reduced-motion: reduce) {
  .main-nav__caret, .main-nav .main-nav__sub { transition: none; }
}

.header-actions { display: flex; align-items: center; gap: 1rem; }
/* The unified CTA phrase is long; below ~480px it collides with the nav
   toggle. Rather than hiding the button (contact should stay reachable
   without an extra tap into the mobile nav), swap to a short label instead —
   see .btn__label-short / .btn__label-full in the header markup. */
.btn__label-short { display: none; }
@media (max-width: 480px) {
  .header-actions .btn--primary { padding: 0.6rem 1rem; font-size: 0.82rem; }
  .header-actions .btn--primary .btn__label-full { display: none; }
  .header-actions .btn--primary .btn__label-short { display: inline; }
}
.main-nav { display: none; }
@media (min-width: 980px) { .main-nav { display: block; } }

.nav-toggle {
  width: 40px; height: 40px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle span {
  width: 20px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease-editorial), opacity 0.3s var(--ease-editorial);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 600;
  background: var(--color-navy);
  color: var(--color-on-navy);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6.5rem var(--edge) 3rem;
  /* If nav links + footer CTA together are taller than a short viewport,
     scroll within the panel rather than letting the CTA run off-screen. */
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.mobile-nav[data-open="true"] { visibility: visible; opacity: 1; pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  display: inline-block;
  padding-block: 0.35rem;
}

.mobile-nav__sub { flex-direction: column; gap: 0; padding: 0.15rem 0 0.4rem 1rem; }
.mobile-nav .mobile-nav__sub a {
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  padding-block: 0.25rem;
  color: var(--color-on-navy-soft);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: radial-gradient(120% 100% at 78% 20%, #23345a 0%, var(--color-navy) 46%, var(--color-navy-deep) 100%);
  color: var(--color-on-navy);
  padding-block: 6rem 2.75rem;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    var(--color-navy) 0%,
    var(--color-navy) 32%,
    rgba(20, 32, 58, 0.8) 47%,
    rgba(20, 32, 58, 0.3) 64%,
    rgba(20, 32, 58, 0) 80%
  );
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero__scrim { background: linear-gradient(180deg, var(--color-navy) 42%, rgba(20, 32, 58, 0.6) 74%, rgba(20, 32, 58, 0.3) 100%); }
}
.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  /* This box spans the full hero width, but its text is left-aligned —
     without this, the empty right-hand side (where the 3D scene sits)
     would swallow every click meant for the canvas beneath it. */
  pointer-events: none;
}
.hero__headline {
  color: var(--color-on-navy);
  font-size: clamp(2rem, 5.2vw, 3.9rem);
  line-height: 1.16;
  margin-bottom: 1.5rem;
  max-width: 30ch;
}
.hero__headline .line { display: block; }
.hero__headline .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__headline .word span { display: inline-block; will-change: transform; }
.hero__headline em { font-style: italic; color: var(--color-copper-soft); }
.hero__lede {
  max-width: 40rem;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--color-on-navy-soft);
  margin-bottom: 1.15rem;
}
.hero__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1.35rem;
}
.hero__benefits li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--color-on-navy-soft);
}
.hero__benefits li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px;
  background: var(--color-copper);
  border-radius: 2px;
  transform: rotate(45deg);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; pointer-events: auto; }
.hero__meta {
  display: block;
  max-width: 720px;
  margin-top: 14px;
  color: var(--color-on-navy-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .hero__meta { font-size: 12px; }
}

.hero__scroll-cue {
  position: absolute;
  bottom: 2.25rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-navy-soft);
}
.hero__scroll-cue i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--color-copper-soft), transparent);
  display: block;
  animation: cueDrift 2.2s ease-in-out infinite;
}
@keyframes cueDrift {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(0.6); opacity: 1; }
}
/* Also hide on short viewports — the benefits list + larger CTA can run the
   content taller than the hero's own min-height, which would otherwise let
   this absolutely-positioned cue overlap .hero__meta at the bottom. */
@media (max-width: 700px), (max-height: 920px) { .hero__scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue i { animation: none; } }

/* [data-reveal] handled by JS/GSAP; provide no-JS fallback */
[data-reveal] { opacity: 1; }
.js-ready [data-reveal] { opacity: 0; }
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   Sections + soft divider curves (warm transition between light & dark)
   ========================================================================== */
section[id] { scroll-margin-top: 84px; }
.cta__form[id] { scroll-margin-top: 104px; }
/* Anchor targets that are not <section>s: keep their heading clear of the fixed header. */
.audience-panel[id], .legal-page [id] { scroll-margin-top: 104px; }
/* Referenzen jump-nav: the id sits on the section's .section-head (not the
   section itself), so the target lands right above the heading instead of
   at the top of the section's own top padding — which used to leave a big
   empty gap under the header on every jump. Same header clearance as
   section[id] above. */
.section-head[id] { scroll-margin-top: 84px; }
.section { padding-block: var(--section-pad); position: relative; }
.section--ivory { background: var(--color-ivory); }
.section--paper { background: var(--color-paper); }
/* --color-ivory and --color-paper now resolve to the same value (see the
   :root comment), so an ivory section next to a paper section no longer
   has a color seam between them — add a hairline to keep that boundary
   readable. */
.section--ivory + .section--paper,
.section--paper + .section--ivory {
  border-top: 1px solid var(--line-on-ivory);
}
/* Homepage "Direkter Herstellerzugang": lede left, three icon features right
   (top-aligned with the lede, not the heading). */
.access-layout { display: grid; gap: 2rem clamp(2.5rem, 6vw, 5rem); align-items: start; }
.access-layout .section-head__lede { margin-top: 0; max-width: none; }
@media (min-width: 960px) { .access-layout { grid-template-columns: 1.35fr 1fr; } }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  display: flex; align-items: center; gap: 0.9rem;
  padding-block: 0.95rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  color: var(--color-ink);
}
.feature-list li:first-child { padding-top: 0; }
.feature-list li + li { border-top: 1px solid var(--line-on-ivory); }
.feature-list__icon { flex: none; width: 26px; height: 26px; color: var(--color-copper); }
.feature-list__icon svg { display: block; width: 100%; height: 100%; }
.section--navy { background: var(--color-navy); color: var(--color-on-navy); }
.section--navy p { color: var(--color-on-navy-soft); }

/* height:64px + margin-top:-64px on the divider itself (not height:0 with a
   negative margin on the child) — the earlier height:0 version let the
   child's negative margin collapse straight through this element and pull
   the *next* section up with it, overlapping it under the fixed header. */
.divider { position: relative; height: 64px; margin-top: -64px; line-height: 0; pointer-events: none; }
.divider svg { display: block; width: 100%; height: 64px; position: relative; }
.divider--to-navy { color: var(--color-navy); }
.divider--to-ivory { color: var(--color-ivory); }
.divider--to-paper { color: var(--color-paper); }

/* ==========================================================================
   Vertrauensleiste — compact trust bar right after the hero
   ========================================================================== */
/* A distinct "stats band," not just another ivory section — the top/bottom
   rule and paper tint keep it visually present even sandwiched between two
   plain ivory sections (hero divider above, Leistungsbereiche below),
   instead of reading as one blank gap. */
.trust-bar {
  position: relative;
  padding-block: var(--section-pad-compact);
  background: var(--color-paper);
  border-top: 1px solid var(--line-on-ivory);
  border-bottom: 1px solid var(--line-on-ivory);
}
/* Short copper accent centered on the bottom rule, matching the same
   centered-underline treatment used elsewhere for a divider with a focal
   point (see e.g. the counters below it in the page flow). */
.trust-bar::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 4rem;
  height: 2px;
  background: var(--color-copper);
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem clamp(2rem, 4vw, 3.5rem);
}
.trust-bar__item { text-align: center; }
.trust-bar__value {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.trust-bar__value .unit { font-size: 0.55em; font-family: var(--font-mono); color: var(--color-copper-dark); }
.trust-bar__label {
  display: block;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 20ch;
  margin-inline: auto;
}

/* ==========================================================================
   Zielgruppen — audience panels (see .jump-nav above for the anchor pills
   that link between them on /zielgruppen/)
   ========================================================================== */
.audience-panel {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  clip-path: inset(0 0 0 0 round var(--radius-lg));
}
.audience-panel[hidden] { display: none; }
.audience-panel + .audience-panel { margin-top: 2rem; }
@media (min-width: 860px) {
  .audience-panel { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto auto auto; align-items: start; column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0; }
  /* Collapse the left wrapper into the panel's own grid, so the check-list
     (the panel's second grid item) can be placed on the same row as the
     left column's body text instead of merely at the column's top. */
  .audience-panel > div { display: contents; }
  .audience-panel > div > .audience-panel__tag { grid-column: 1; grid-row: 1; }
  .audience-panel > div > h2, .audience-panel > div > h3 { grid-column: 1; grid-row: 2; }
  .audience-panel > div > p:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .audience-panel > div > p:nth-of-type(2) { grid-column: 1; grid-row: 4; }
  .audience-panel > .check-list { grid-column: 2; grid-row: 3 / span 2; align-self: start; }
}
.audience-panel__tag {
  display: inline-block;
  color: var(--color-cornflower);
  margin-bottom: 1.25rem;
}
.audience-panel h2, .audience-panel h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: none; margin-bottom: 0.9rem; }
.audience-panel p { color: var(--color-ink-soft); margin-bottom: 1.1rem; max-width: 48ch; }
.check-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.75rem;
}
.section--navy .check-list li { color: var(--color-on-navy-soft); }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--color-copper);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ==========================================================================
   Leistungen — Angebotsmodelle
   ========================================================================== */
.offer-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .offer-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.offer-card {
  background: var(--color-navy-soft);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.offer-card__index {
  display: inline-block;
  color: var(--color-copper-soft);
  margin-bottom: 1rem;
}
.offer-card h3 { color: var(--color-on-navy); margin-bottom: 1.5rem; font-size: clamp(1.3rem, 2vw, 1.6rem); min-height: 2.6em; }
.offer-card__rows { display: flex; flex-direction: column; gap: 1.25rem; }
.offer-card__row { border-top: 1px solid var(--line-on-navy); padding-top: 1.1rem; }
.offer-card__row:first-child { border-top: 0; padding-top: 0; }
.offer-card__row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-copper-soft);
  margin-bottom: 0.4rem;
}
.offer-card__row dd { color: var(--color-on-navy-soft); font-size: 0.92rem; margin: 0; }
/* Light variant: the offer cards on an ivory section (Leistungen) keep the same
   layout but use paper cards with dark text instead of navy cards. */
.section--ivory .offer-card { background: var(--color-paper); border-color: var(--line-on-ivory); }
.section--ivory .offer-card__index { color: var(--color-copper-dark); }
.section--ivory .offer-card h3 { color: var(--color-ink); }
.section--ivory .offer-card__row { border-top-color: var(--line-on-ivory); }
.section--ivory .offer-card__row dt { color: var(--color-copper-dark); }
.section--ivory .offer-card__row dd { color: var(--color-ink-soft); }
/* Side by side, the rows of both cards share the same row tracks (subgrid),
   so each label and its divider line up across the two cards regardless of
   text length. Below 860px (or without subgrid) the cards simply stack. */
@media (min-width: 860px) {
  @supports (grid-template-rows: subgrid) {
    .offer-grid { row-gap: 0; }
    .offer-card { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; }
    .offer-card__index { justify-self: start; }
    .offer-card__rows { display: grid; grid-template-rows: subgrid; grid-row: 3 / span 8; row-gap: 0; }
    .offer-card__row + .offer-card__row { margin-top: 1.25rem; }
  }
}

/* Three-model variant (Leistungen): three columns once there is room; in
   the two-column range the third card spans the full row instead of
   sitting alone in the left column. */
@media (min-width: 860px) and (max-width: 1099px) {
  .offer-grid--three .offer-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .offer-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Vorteile — counters + fixed benefit-card grid
   ========================================================================== */
.vorteile { position: relative; }
.benefits-viewport {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 3rem);
  padding-top: clamp(4.75rem, 8vh, 6rem);
  padding-bottom: clamp(2rem, 6vh, 6rem);
}
.benefits-viewport .section-head { margin-bottom: 0; }

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--line-on-ivory);
  border-bottom: 1px solid var(--line-on-ivory);
  padding-block: clamp(1.25rem, 3vh, 2.5rem);
}
.section--navy .counters { border-color: var(--line-on-navy); }
.counter { text-align: left; }
.counter__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}
/* .counter__value is a <span>, so it doesn't pick up the general
   `.section--navy p` light-text override — on its own it stayed dark
   ink on a dark navy background (e.g. the "Gründer" section), reading
   as nearly invisible. */
.section--navy .counter__value { color: var(--color-on-navy); }
.counter__value .unit { font-size: 0.5em; color: var(--color-copper-dark); font-family: var(--font-mono); }
.section--navy .counter__value .unit { color: var(--color-copper-soft); }
.counter__label { color: var(--color-ink-soft); font-size: 0.88rem; margin-top: 0.4rem; }

.benefits-track-wrap { }
.benefits-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) { .benefits-track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-track { grid-template-columns: repeat(3, 1fr); } }
.benefit-card {
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 2.4vw, 2.25rem);
}
.benefit-card__mark {
  display: block;
  width: 28px; height: 2px;
  background: var(--color-cornflower);
  margin-bottom: 1.5rem;
}
.benefit-card h3 { margin-bottom: 0.65rem; min-height: 2.6em; }
.benefit-card p { font-size: 0.92rem; color: var(--color-ink-soft); }

/* ==========================================================================
   Über uns — layered parallax
   ========================================================================== */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
/* The portrait column now sizes to its own (small) content instead of a
   fixed fraction — a 0.8fr track sized for the old large square photo left
   a lot of dead space around the smaller circular portrait. */
@media (min-width: 900px) { .about__grid { grid-template-columns: auto 1fr; } }
.about__figure {
  position: relative;
  aspect-ratio: 1;
  max-width: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--color-on-navy);
}
.about__figure-layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.about__year { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 2; }
.about__year-label { color: var(--color-copper-soft); margin-top: 0.5rem; position: relative; z-index: 2; }

/* Real founder portrait — replaces the abstract figure above wherever a
   photo is available. Same slot size, no motion (a still photo doesn't
   need the parallax rings the placeholder graphic used). */
.about__portrait { max-width: 168px; }
.about__portrait img {
  width: 100%;
  /* Same fix as the case-study figure: the width/height="680" HTML
     attributes otherwise win as a definite height, stretching this into a
     168×680 rectangle instead of a 168×168 circle. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.about__portrait-caption { display: block; margin-top: 0.75rem; color: var(--color-copper-soft); text-align: center; }

/* ==========================================================================
   Case-study layout — the interactive station tabs/panels alongside a real
   supporting image (sketch, photo) on /referenzen/. Single column (image
   below the stations) until there's room to sit them side by side.
   ========================================================================== */
.case-study__layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) {
  .case-study__layout { grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; }
  /* The nav spans the full width as its own row (a direct grid child, a
     sibling of .case-study__interactive — see the markup). The interactive
     wrapper (panels + tags) and the figure both stretch to the same row
     height, so the tags bar always lines up with the figure/caption at the
     bottom — the panel text is vertically centered in the space above it
     instead of being top-pinned with a large gap below. */
  .case-study__layout .case-nav { grid-column: 1 / -1; grid-row: 1; }
  .case-study__layout .case-study__interactive {
    grid-column: 1; grid-row: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .case-study__layout .case-study__interactive .case-panels {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .case-study__layout .case-study__interactive .case-panels .case-panel { width: 100%; }
  .case-study__layout .case-study__figure { grid-column: 2; grid-row: 2; align-self: stretch; }
}

/* aspect-ratio is the belt-and-suspenders fix here: it pins the box to the
   source image's real 1:1 shape regardless of column width, so the sketch
   can never get squeezed/stretched the way it did when only `width:100%`
   constrained it. */
.case-study__figure { max-width: 26rem; margin: 0 auto; }
@media (min-width: 960px) { .case-study__figure { margin: 0; } }
.case-study__figure img {
  width: 100%;
  /* The height="1100" HTML attribute otherwise wins as a definite height —
     aspect-ratio only fills in a dimension left auto, so height must be
     forced back to auto here or the box stays exactly 1100px tall at any
     width, which is the "squeezed" look this fixes. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-on-ivory);
}
.case-study__figure figcaption { margin-top: 0.75rem; color: var(--color-ink-soft); }
.about__content p { margin-bottom: 1.15rem; max-width: 52ch; }
.about__content p:last-child { margin-bottom: 0; }
.about__content h2 { margin-bottom: 1.5rem; }

/* ==========================================================================
   Founder profile (Über uns) — deliberately distinct from the homepage's
   compact navy/round-photo teaser (.about__*): light ground, rectangular
   photo, three numbered blocks instead of flowing paragraphs, so the two
   pages never look like the same component.
   ========================================================================== */
.founder-profile__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .founder-profile__grid { grid-template-columns: 180px 1fr; gap: 3.5rem; } }
.founder-profile__figure { margin: 0; max-width: 180px; }
.founder-profile__caption { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.9rem; }
.founder-profile__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--color-ink); }
.founder-profile__role { color: var(--color-ink-soft); }
.founder-profile__portrait {
  max-width: 180px;
  aspect-ratio: 360 / 460;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.founder-profile__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.founder-profile__lede { margin-top: 1rem; max-width: 46rem; font-size: 1.05rem; color: var(--color-ink-soft); }
.founder-profile__lede, .founder-block p { text-wrap: pretty; }
.founder-profile__lede strong { color: var(--color-ink); font-weight: 600; }
.founder-blocks { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem; }
.founder-block { border-top: 2px solid var(--color-copper); padding-top: 1rem; }
.founder-block__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-copper-dark); display: block; margin-bottom: 0.5rem; }
.founder-block h3 { margin-bottom: 0.5rem; }
.founder-block p { color: var(--color-ink-soft); margin: 0; max-width: 60ch; }
.founder-block p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Projektbeispiel — interactive stepper
   ========================================================================== */
.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
/* Referenzen — five equal-width station buttons in one bar (scoped to the
   case-study section so the unrelated two-button Ablauf switcher on
   Prozess & Qualität, which reuses .case-nav, is unaffected). */
.case-study .case-nav {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .case-study .case-nav { grid-template-columns: repeat(5, 1fr); } }
.case-study .case-nav__btn { justify-content: center; }
.case-nav__btn {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.case-nav__btn__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
}
.case-nav__btn[aria-selected="true"] {
  border-color: var(--color-copper);
  color: var(--color-ink);
  background: var(--color-paper);
}
.case-nav__btn[aria-selected="true"] .case-nav__btn__num { background: var(--color-copper); border-color: var(--color-copper); color: var(--color-paper); }

.case-panels { position: relative; min-height: 220px; }
.case-panel {
  display: grid;
  gap: 1rem;
}
.case-panel[hidden] { display: none; }
.case-panel__label { color: var(--color-copper-dark); display: block; margin-bottom: 0.5rem; }
.case-panel h3 { margin-bottom: 0.75rem; }
.case-panel p { color: var(--color-ink-soft); max-width: 52rem; font-size: 1.02rem; }

.case-study__tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  color: var(--color-copper-dark);
  border-top: 1px solid var(--line-on-ivory);
  padding-top: 1.75rem;
  margin-top: 2.5rem;
}
.case-study__tags span[data-tag-active="true"] { color: var(--color-ink); }

/* ==========================================================================
   Prinzipien — line-draw rows
   ========================================================================== */
.principles-list { border-top: 1px solid var(--line-on-ivory); }
.principle-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem 1.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line-on-ivory);
  align-items: baseline;
  position: relative;
}
@media (min-width: 780px) { .principle-row { grid-template-columns: 3rem 14rem 1fr; } }
.principle-row__mark { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.principle-row__index { color: var(--color-cornflower); font-style: italic; font-family: var(--font-display); font-size: 1.3rem; }
.principle-row h3 { margin-bottom: 0.3rem; }
@media (min-width: 780px) { .principle-row h3 { margin-bottom: 0; } }
.principle-row p { color: var(--color-ink-soft); grid-column: 1 / -1; }
@media (min-width: 780px) { .principle-row p { grid-column: auto; max-width: 40ch; } }
.principle-row__line {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0%;
  background: var(--color-copper);
}
.principles-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ==========================================================================
   CTA / Kontakt
   ========================================================================== */
.cta__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cta__intro h2 { margin-bottom: 1.25rem; }
.cta__intro p { max-width: 34rem; margin-bottom: 2rem; }
.cta__intro .cta__lead-line { margin-bottom: 1rem; }
.cta__intro .cta__list-lead { margin-bottom: 0.75rem; white-space: nowrap; }
.cta__contact-list li { margin-bottom: 0.6rem; color: var(--color-on-navy); }
.cta__contact-list a:hover { color: var(--color-copper-soft); }

.cta__form {
  background: var(--color-navy-soft);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.field[hidden] { display: none; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-navy-soft);
  transition: color 0.25s ease;
}
.field input, .field textarea, .field select {
  background: rgba(246, 239, 223, 0.06);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--color-on-navy);
  resize: vertical;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}
.field select option { color: var(--color-ink); background: var(--color-paper); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-copper); background-color: rgba(246, 239, 223, 0.1); }
.field:focus-within label { color: var(--color-copper-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-on-navy-soft); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta__form-note { font-size: 0.78rem; color: var(--color-on-navy-soft); text-align: center; }
.cta__form-status {
  font-size: 0.85rem;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  color: var(--color-on-navy);
}
.cta__form-status[data-state="pending"] { background: rgba(246, 239, 223, 0.06); border: 1px solid var(--line-on-navy); }
.cta__form-status[data-state="success"] { background: rgba(91, 127, 228, 0.16); border: 1px solid rgba(91, 127, 228, 0.4); }
.cta__form-status[data-state="error"] { background: rgba(190, 111, 66, 0.18); border: 1px solid rgba(190, 111, 66, 0.45); }

/* Light variant — the Kontaktformular sits on an ivory section instead of
   navy, so every color the form/contact list hardcode for the dark ground
   above needs an ivory counterpart here. */
.section--ivory .cta__contact-list li { color: var(--color-ink); }
.section--ivory .cta__contact-list a:hover { color: var(--color-copper-dark); }
.section--ivory .cta__form { background: var(--color-paper); border-color: var(--line-on-ivory); }
.section--ivory .field label { color: var(--color-ink-soft); }
.section--ivory .field input,
.section--ivory .field textarea,
.section--ivory .field select {
  background-color: var(--color-ivory);
  border-color: var(--line-on-ivory);
  color: var(--color-ink);
}
.section--ivory .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.section--ivory .field input:focus,
.section--ivory .field textarea:focus,
.section--ivory .field select:focus { border-color: var(--color-copper); background-color: var(--color-paper); }
.section--ivory .field input::placeholder,
.section--ivory .field textarea::placeholder { color: var(--color-ink-soft); }
.section--ivory .cta__form-note { color: var(--color-ink-soft); }
.section--ivory .cta__form-status { color: var(--color-ink); }
.section--ivory .cta__form-status[data-state="pending"] { background: rgba(36, 28, 18, 0.04); border-color: var(--line-on-ivory); }
.section--ivory .cta__form-status[data-state="success"] { background: rgba(91, 127, 228, 0.1); border-color: rgba(91, 127, 228, 0.35); }
.section--ivory .cta__form-status[data-state="error"] { background: rgba(190, 111, 66, 0.1); border-color: rgba(190, 111, 66, 0.35); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  color: var(--color-on-navy-soft);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-on-navy);
}
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-brand .wordmark__text { color: var(--color-on-navy); font-family: var(--font-display); font-size: 1.15rem; }
.footer-brand p { margin-top: 0.75rem; max-width: 26ch; font-size: 0.9rem; }
.footer-social { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; font-size: 0.9rem; }
.footer-social svg { width: 1.2rem; height: 1.2rem; }
.footer-social:hover { color: var(--color-ivory); }
.footer-nav, .footer-legal { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-legal__btn {
  display: inline-block;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.footer-nav a:hover, .footer-legal a:hover, .footer-legal__btn:hover { color: var(--color-ivory); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
  padding-block: 1.5rem;
  color: var(--color-on-navy-soft);
}

/* ==========================================================================
   Legal page (impressum/datenschutz)
   ========================================================================== */
.legal-page {
  padding-block: 8rem 6rem;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--edge);
}
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 2rem; hyphens: auto; overflow-wrap: break-word; }
.legal-page h2 { font-size: 1.2rem; max-width: none; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-page h3 { font-size: 1.02rem; max-width: none; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.legal-page p, .legal-page li { color: var(--color-ink-soft); margin-bottom: 0.75rem; }
.legal-page ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-page code { font-family: var(--font-mono); font-size: 0.88em; }
.legal-page .placeholder { color: var(--color-cornflower-dark); }
.legal-page a.back { display: inline-block; margin-bottom: 2rem; color: var(--color-cornflower-dark); }
.legal-page p a:not(.back) { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Cookie-Einstellungen (consent banner + modal)
   ========================================================================== */
/* Deliberately blocking, not a passive bottom bar: a backdrop dims and
   covers the whole page and body scroll is locked (see consent.js) for as
   long as no choice has been made, so visitors have to decide before they
   can keep using the site — same "necessary vs. statistics" choice either
   way, just not something to casually scroll past. */
.consent-banner {
  position: fixed;
  inset: 0;
  z-index: 700;
}
.consent-banner[hidden] { display: none; }
.consent-banner__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 58, 0.55);
}
.consent-banner__inner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--color-paper);
  border-top: 1px solid var(--line-on-ivory);
  box-shadow: 0 -6px 18px -12px rgba(36, 28, 18, 0.2);
  padding: 1.5rem var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.consent-banner__text { max-width: 46rem; }
.consent-banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.consent-banner__text p:not(.consent-banner__title) { color: var(--color-ink-soft); font-size: 0.92rem; }
.consent-banner__text a { text-decoration: underline; text-underline-offset: 2px; }
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1 1 auto; }
}

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--edge);
}
.consent-modal[hidden] { display: none; }
.consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 58, 0.55);
}
.consent-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 16px 32px -20px rgba(20, 32, 58, 0.4);
}
.consent-modal__dialog h2 { margin-bottom: 0.9rem; }
.consent-modal__dialog > p { color: var(--color-ink-soft); margin-bottom: 1.5rem; font-size: 0.95rem; }

.consent-category {
  border-top: 1px solid var(--line-on-ivory);
  padding-block: 1.25rem;
}
.consent-category:last-of-type { border-bottom: 1px solid var(--line-on-ivory); }
.consent-category__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-category__badge { color: var(--color-copper-dark); }
.consent-category__desc { color: var(--color-ink-soft); font-size: 0.88rem; margin-top: 0.6rem; }

.consent-switch { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.consent-switch input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.consent-switch__track {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
  background: var(--line-on-ivory);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.consent-switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  transition: transform 0.25s var(--ease-soft);
}
.consent-switch input:checked + .consent-switch__track { background: var(--color-cornflower); }
.consent-switch input:checked + .consent-switch__track::after { transform: translateX(18px); border-color: transparent; }
.consent-switch input:disabled + .consent-switch__track { background: var(--color-copper-soft); opacity: 0.8; }
.consent-switch input:focus-visible + .consent-switch__track { outline: 2px solid var(--color-cornflower); outline-offset: 2px; }
.consent-switch__label { font-weight: 500; }

.consent-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ==========================================================================
   Page hero — lighter-weight hero used by every inner page (no 3D canvas,
   not full-viewport height). Same navy gradient + type system as the
   homepage hero so the brand reads consistently across the site.
   ========================================================================== */
.page-hero {
  position: relative;
  padding-block: clamp(8.5rem, 14vw, 11.5rem) clamp(3.5rem, 6vw, 5rem);
  background: radial-gradient(120% 100% at 78% 20%, #23345a 0%, var(--color-navy) 46%, var(--color-navy-deep) 100%);
  color: var(--color-on-navy);
}
.page-hero__eyebrow { color: var(--color-copper-soft); }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.15;
  max-width: 36ch;
  text-wrap: balance;
  color: var(--color-on-navy);
  margin-bottom: 1.25rem;
}
.page-hero__lede {
  max-width: 42rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--color-on-navy-soft);
}
.page-hero__lede--stacked { max-width: 54rem; text-wrap: pretty; }
.page-hero__lede--stacked + .page-hero__lede--stacked { margin-top: 1.1em; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--color-on-navy-soft); transition: color 0.25s ease; }
.breadcrumbs a:hover { color: var(--color-copper-soft); }
.breadcrumbs span { color: var(--color-on-navy-soft); opacity: 0.6; }
.breadcrumbs [aria-current] { color: var(--color-on-navy); }
/* AGB: numbered clauses with a hanging number column and a table of contents */
.agb-sub { font-size: 1.1rem; margin-bottom: 0.25rem; }
.agb-meta { font-size: 0.8rem; margin-bottom: 0; }
.agb-toc { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-on-ivory); border-radius: var(--radius-md); background: var(--color-paper); }
.legal-page .agb-toc h2 { margin-top: 0; font-size: 1rem; }
.agb-toc ol { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.agb-toc li { margin-bottom: 0; }
.agb-toc a { color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.agb-toc a:hover { color: var(--color-copper-dark); }
.agb-page h2[id], .agb-clause[id] { scroll-margin-top: 96px; }
.agb-clause { display: grid; grid-template-columns: 3rem 1fr; gap: 0 0.75rem; }
.agb-clause__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-copper-dark); padding-top: 0.25em; }
.agb-end { text-align: center; margin-top: 2.5rem; }
.legal-page .breadcrumbs a { color: var(--color-ink-soft); }
.legal-page .breadcrumbs a:hover { color: var(--color-copper-dark); }
.legal-page .breadcrumbs span { color: var(--color-ink-soft); }
.legal-page .breadcrumbs [aria-current] { color: var(--color-ink); }

/* ==========================================================================
   Teaser cards — condensed cross-links from the homepage to the dedicated
   subpages (Zielgruppen, Leistungen, Referenzen), reused wherever a short
   "read more on its own page" card is needed.
   ========================================================================== */
.teaser-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .teaser-grid { grid-template-columns: repeat(var(--teaser-cols, 2), 1fr); } }
.teaser-card {
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.teaser-card--on-navy { background: var(--color-navy-soft); border-color: var(--line-on-navy); }
.teaser-card--on-navy h3 { color: var(--color-on-navy); }
.teaser-card--on-navy p { color: var(--color-on-navy-soft); }
.teaser-card__index { display: inline-block; color: var(--color-copper-dark); }
.teaser-card--on-navy .teaser-card__index { color: var(--color-copper-soft); }
/* Same fix as .service-card: reserve two lines so a longer title in one
   card of a row doesn't push that card's paragraph lower than its
   siblings — this component is reused across nearly every page. */
.teaser-card h3 { margin: 0; min-height: 2.6em; }
.teaser-card p { color: var(--color-ink-soft); margin: 0; max-width: 40ch; }
.teaser-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-copper-dark);
  padding-top: 0.5rem;
}
.teaser-card--on-navy .teaser-card__link { color: var(--color-copper-soft); }
.teaser-card__link::after { content: "→"; transition: transform 0.25s ease; }
.teaser-card__link:hover::after { transform: translateX(3px); }

/* Standalone case-study teaser (homepage) — dropped the boxed card chrome
   in favor of an open, full-width editorial layout: a thin top rule marks
   where it starts instead of a border/background/padding all the way
   round, and it needs its own two-column split, or the fixed 40ch
   paragraph width above leaves the right half empty. */
.teaser-card--case {
  gap: 1.75rem;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-on-ivory);
}
@media (min-width: 860px) {
  .teaser-card--case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}
.teaser-card__case-intro { display: flex; flex-direction: column; gap: 0.9rem; }
.teaser-card__case-intro h3 { margin: 0; min-height: 0; }
.teaser-card__case-intro p { max-width: 42ch; }
.teaser-card__case-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.25rem; }
@media (min-width: 860px) { .teaser-card__case-steps { margin-top: 0; justify-content: center; } }
.teaser-card__case-step { border-top: 1px solid var(--line-on-ivory); padding-top: 1rem; }
.teaser-card__case-step:first-child { border-top: 0; padding-top: 0; }
.teaser-card__case-step dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
  margin-bottom: 0.35rem;
}
/* Same min-height on every step's dd — the two homepage case summaries
   (different text lengths) still line up row to row. Min-height only, so a
   longer line (e.g. on small screens) still grows the row. */
.teaser-card__case-step dd { color: var(--color-ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0; min-height: 3.2em; }

/* ==========================================================================
   Jump nav — plain anchor pills for in-page sub-navigation (no JS), e.g.
   between the two audience sections on /zielgruppen.
   ========================================================================== */
.jump-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3rem; }
.jump-nav a {
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.jump-nav a:hover { border-color: var(--color-copper); color: var(--color-ink); background: var(--color-paper); }

/* ==========================================================================
   Next-step / mini-steps list — lightweight numbered list reused for "so
   geht es weiter" (Kontakt) type content without pulling in JS.
   ========================================================================== */
.mini-steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 700px) { .mini-steps { grid-template-columns: repeat(3, 1fr); } }
.mini-steps[hidden] { display: none; }
.mini-steps--tight { gap: 1.25rem; margin-top: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mini-steps--tight { grid-template-columns: repeat(2, 1fr); } }
.mini-step { border-top: 2px solid var(--color-copper); padding-top: 1rem; }
.mini-step__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-copper-dark); display: block; margin-bottom: 0.5rem; }
.section--navy .mini-step__num { color: var(--color-copper-soft); }
.mini-step h3 { margin-bottom: 0.4rem; font-size: 1.05rem; min-height: 2.6em; }
.mini-step p { color: var(--color-ink-soft); font-size: 0.9rem; margin: 0; }
.section--navy .mini-step p { color: var(--color-on-navy-soft); }

/* --icon variant: an icon carries the visual weight instead of the plain
   top rule, for sections that want a lighter, less rule-heavy rhythm. */
.mini-step--icon { border-top: none; padding-top: 0; }
.mini-step__icon { display: block; width: 32px; height: 32px; color: var(--color-copper); margin-bottom: 0.9rem; }
.mini-step__icon svg { width: 100%; height: 100%; display: block; }
.section--navy .mini-step__icon { color: var(--color-copper-soft); }
.mini-step--icon .mini-step__num { margin-bottom: 0.3rem; }

/* ==========================================================================
   QC badge grid — visual four-step quality-check summary (Prozess & Qualität)
   ========================================================================== */
.qc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 2rem;
}
.qc-badge {
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.5vw, 1.85rem);
}
.qc-badge__icon { display: block; width: 30px; height: 30px; color: var(--color-copper); margin-bottom: 1.1rem; }
.qc-badge__icon svg { width: 100%; height: 100%; display: block; }
.qc-badge h3 { font-size: 1.02rem; margin-bottom: 0.5rem; min-height: 2.6em; }
.qc-badge p { color: var(--color-ink-soft); font-size: 0.88rem; margin: 0; }
.section--navy .qc-badge { background: var(--color-navy-soft); border-color: var(--line-on-navy); }
.section--navy .qc-badge__icon { color: var(--color-copper-soft); }
.section--navy .qc-badge h3 { color: var(--color-on-navy); }
.section--navy .qc-badge p { color: var(--color-on-navy-soft); }

/* ==========================================================================
   Principle icons (Über uns — Arbeitsweise)
   ========================================================================== */
.principle-row__icon {
  width: 26px;
  height: 26px;
  color: var(--color-cornflower);
  display: block;
}
.principle-row__icon svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   FAQ — native <details>/<summary>, no JS required
   ========================================================================== */
.faq-list { border-top: 1px solid var(--line-on-ivory); margin-top: 2rem; max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line-on-ivory); padding-block: 1.35rem; }
.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--color-copper);
  transition: transform 0.3s var(--ease-editorial);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--color-ink-soft); margin-top: 0.9rem; max-width: 52rem; }

/* ==========================================================================
   Pricing note — honest, generic billing-clarity callout (Leistungen)
   ========================================================================== */
.pricing-note {
  border-left: 2px solid var(--color-copper);
  padding-left: 1.25rem;
  margin-top: 2.5rem;
  max-width: 42rem;
}
.pricing-note p { color: var(--color-ink-soft); margin: 0; }
/* Each sentence of a callout starts on its own line instead of running on mid-line. */
.pricing-note .note-line { display: block; }
.section--navy .pricing-note p { color: var(--color-on-navy-soft); }

/* ==========================================================================
   Principle callout — the prominent "Kein Vorteil, kein Wechsel" statement.
   ========================================================================== */
.principle-callout {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}
.principle-callout__statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.28;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
  max-width: none;
}
.principle-callout p:not(.principle-callout__statement) {
  color: var(--color-ink-soft);
  max-width: 42rem;
  margin-inline: auto;
}
.section--navy .principle-callout {
  background: var(--color-navy-soft);
  border-color: var(--line-on-navy);
}
.section--navy .principle-callout__statement { color: var(--color-on-navy); }
.section--navy .principle-callout p:not(.principle-callout__statement) { color: var(--color-on-navy-soft); }

/* ==========================================================================
   Status line — project stations as a row of small tags ("Muster
   freigegeben", "Ware geliefert" …). Each is its own bordered chip rather
   than dot-separated running text, so wrapping at any width never leaves an
   orphaned separator dangling at a line break. All chips share one neutral
   style — they mark stations of a project, not differently-rated states.
   ========================================================================== */
.status-line { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-line__sep { display: none; }
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.section--navy .status-chip { color: var(--color-on-navy-soft); border-color: var(--line-on-navy); }

/* ==========================================================================
   Service cards — the three homepage Leistungsbereiche (Neue Produkte,
   Private Label, laufende Beschaffung). Same paper/ivory card language as
   .teaser-card, extended with a compact Leistungen list.
   ========================================================================== */
.service-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 860px) { .service-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.service-card {
  background: var(--color-paper);
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
}
.service-card__index { display: inline-block; color: var(--color-copper-dark); }
/* Reserve two lines regardless of actual title length — otherwise a
   one-line title (Bereich 2/3) lets that card's intro and bullet list
   start noticeably higher than a card whose title wraps (Bereich 1). */
.service-card h3 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.25; min-height: 2.6em; }
/* Same idea for the intro paragraph, sized for three lines at this
   font's line-height — keeps the bullet lists lined up even if one
   card's intro text is a little shorter than the others. */
.service-card__intro { color: var(--color-ink-soft); font-size: 0.92rem; line-height: 1.6; margin: 0; min-height: 4.8em; }
.service-card__list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.1rem; }
.service-card__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.service-card__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px;
  background: var(--color-copper);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print — a static, fully-unrolled version of the page for PDF export.
   Interactive-only chrome is hidden; every tab panel (both audience panels,
   all five case-study stations) is shown at once instead of just the active
   one, since there is no click to switch between them on paper.
   ========================================================================== */
@media print {
  .consent-banner, .consent-modal, .nav-toggle, .mobile-nav, .hero__scroll-cue,
  .skip-link, .footer-legal__btn, .jump-nav, .case-nav,
  .process-dots, .case-study__tags {
    display: none !important;
  }

  /* Normally overlaid on the dark hero via fixed positioning, with light
     text to match; static in print, it sits on the page's own light
     background instead, so its text needs to be dark regardless of theme. */
  .site-header { position: static !important; color: var(--color-ink) !important; }

  /* Every scroll-reveal element is set to opacity:0 inline by GSAP at load;
     !important is required to win over that inline style. */
  [data-reveal],
  .hero__headline .word,
  .hero__headline .word > span {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Show every tab panel at once instead of only the active one. */
  .audience-panel[hidden],
  .case-panel[hidden] {
    display: block !important;
  }

  /* The benefits row is a horizontal scroller even in the reduced-motion
     fallback; print has no scroll, so wrap it into a grid instead. */
  .benefits-track-wrap { overflow: visible !important; }
  .benefits-track {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: auto !important;
  }
}

/* ==========================================================================
   404 ghost — decorative, cursor-following companion on the error page only.
   Off-screen by default (translate) until js/pages/error-404.js positions
   it on the first pointermove, so it never flashes at the top-left corner.
   ========================================================================== */
.ghost-404 {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 68px;
  pointer-events: none;
  z-index: 60;
  transform: translate(-200px, -200px);
  will-change: transform;
}
.ghost-404 svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)); }
.ghost-404__speech {
  position: absolute;
  top: -1.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ivory);
  color: var(--color-navy-deep);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  /* No cursor-chasing for visitors who asked for less motion — the ghost
     still appears, just parked in place instead of animating. */
  .ghost-404 { position: absolute; top: 6.5rem; right: 2rem; transform: none; }
}
@media (hover: none) and (pointer: coarse) {
  /* Touch devices have no cursor to follow; hide rather than ship a dead loop. */
  .ghost-404 { display: none; }
}

/* ==========================================================================
   Wissensbereich — Hub, Ratgeber & Analysen, Importlexikon
   Built on the existing tokens; the topic filter and glossary search are
   progressive enhancement (js/modules/wissen-filter.js), so controls that
   need JavaScript stay hidden until <html> gets .js-ready.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wissen [hidden] { display: none !important; }

/* Six-topic overview on /wissen/ */
.wissen-topics { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .wissen-topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wissen-topics { grid-template-columns: repeat(3, 1fr); } }
.wissen-topic { border-top: 2px solid var(--color-copper); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wissen-topic h3 { font-size: 1.1rem; }
.wissen-topic p { color: var(--color-ink-soft); font-size: 0.9rem; max-width: 40ch; }
.wissen-topic__links {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  margin-top: auto; padding-top: 0.5rem;
  font-size: 0.88rem; font-weight: 500; color: var(--color-copper-dark);
}
.wissen-topic__links a::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.25s ease; }
.wissen-topic__links a:hover::after { transform: translateX(3px); }

/* Toolbar: search, topic chips, A–Z bar, result count */
.wissen-toolbar { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.wissen-js-only, .wissen-filter { display: none; }
.js-ready .wissen-js-only { display: block; }
.js-ready .wissen-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wissen-status { color: var(--color-ink-soft); }

.wissen-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; line-height: 1.2;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-on-ivory);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wissen-chip:hover { border-color: var(--color-copper); }
.wissen-chip[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-navy); }
.wissen-chip__count { font-size: 0.7rem; opacity: 0.7; }
.wissen-chip--link:hover { color: var(--color-copper-dark); }

.wissen-search { max-width: 30rem; }
.wissen-label { display: block; margin-bottom: 0.4rem; color: var(--color-ink-soft); }
.wissen-search input {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--line-on-ivory); border-radius: var(--radius-sm);
  background: var(--color-paper); color: var(--color-ink); font-size: 1rem;
}
.wissen-search input:focus { border-color: var(--color-copper); }

.wissen-az { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.wissen-az a, .wissen-az__off {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  font-family: var(--font-mono); font-size: 0.8rem;
  border: 1px solid var(--line-on-ivory); border-radius: var(--radius-sm);
}
.wissen-az a { background: var(--color-paper); color: var(--color-ink); transition: border-color 0.2s ease, color 0.2s ease; }
.wissen-az a:hover { border-color: var(--color-copper); color: var(--color-copper-dark); }
.wissen-az a.is-off, .wissen-az__off { color: var(--color-ink-soft); opacity: 0.35; pointer-events: none; }

.wissen-empty { margin-top: 2rem; color: var(--color-ink-soft); }
.wissen-reset { margin-left: 0.5rem; color: var(--color-copper-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Article cards (Ratgeber list, "Weitere Beiträge") */
.wissen-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .wissen-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .wissen-cards { grid-template-columns: repeat(3, 1fr); } }
/* Seventh and last card (an odd one out under both the two- and
   three-column grid) centered instead of left-aligned under a half-empty
   row, at the same card width as its siblings. */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .wissen-cards > .wissen-card:last-child {
    grid-column: 1 / -1;
    width: calc((100% - 1.5rem) / 2);
    margin-inline: auto;
  }
}
@media (min-width: 1100px) {
  .wissen-cards > .wissen-card:last-child { grid-column: 2; }
}
.wissen-card p { max-width: none; }
.wissen-card h3 a { transition: color 0.2s ease; }
.wissen-card h3 a:hover { color: var(--color-copper-dark); }
.wissen-tag {
  display: inline-block; align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(148, 81, 43, 0.3); border-radius: var(--radius-sm);
  color: var(--color-copper-dark); letter-spacing: 0.05em;
}

/* Glossary */
.wissen-terms { max-width: 52rem; }
.wissen-group { scroll-margin-top: 6rem; }
.wissen-letter {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  color: var(--color-copper-dark);
  max-width: none;
  margin: 2.5rem 0 0.5rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-on-ivory);
}
.wissen-group:first-child .wissen-letter { margin-top: 0; }
.wissen-term {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line-on-ivory);
  scroll-margin-top: 6rem;
}
.wissen-term:last-child { border-bottom: none; }
.wissen-term:target { box-shadow: inset 3px 0 0 var(--color-copper); padding-left: 1rem; }
.wissen-term__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.wissen-term h3 { font-size: 1.3rem; }
.wissen-term__aka { color: var(--color-ink-soft); text-transform: none; letter-spacing: 0.02em; }
.wissen-term__definition { max-width: none; }
.wissen-term__practice { max-width: none; color: var(--color-ink-soft); font-size: 0.95rem; }
.wissen-term__related { max-width: none; color: var(--color-ink-soft); font-size: 0.9rem; }
.wissen-term__related .mono { margin-right: 0.5rem; }
.wissen-link {
  color: var(--color-copper-dark);
  text-decoration: underline; text-decoration-color: rgba(148, 81, 43, 0.35); text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.wissen-link:hover { text-decoration-color: currentColor; }

/* Article page */
.wissen-meta { color: var(--color-ink-soft); margin-bottom: 2rem; }
.wissen-meta a { color: var(--color-copper-dark); text-decoration: underline; text-underline-offset: 3px; }
.wissen-article { max-width: 44rem; }
.wissen-article h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); max-width: none; margin: 2.5rem 0 0.9rem; }
.wissen-article > :first-child { margin-top: 0; }
.wissen-article p, .wissen-article li { color: var(--color-ink); line-height: 1.7; }
.wissen-article p { max-width: none; margin-bottom: 1rem; }
.wissen-article ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wissen-article li::marker { color: var(--color-copper); }
.wissen-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: 0.95rem; }
.wissen-table th, .wissen-table td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line-on-ivory); }
.wissen-table thead th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--color-ink-soft); }
.wissen-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wissen-table tfoot th, .wissen-table tfoot td { font-weight: 600; border-bottom: none; }
.wissen-table tfoot tr:first-child > * { border-top: 2px solid var(--color-ink); }
.wissen-related { max-width: 44rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-ivory); }
.wissen-related__title { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--color-ink-soft); margin-bottom: 0.9rem; max-width: none; }
.wissen-related__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Seven nav items need a tighter gap just above the 980px desktop breakpoint. */
@media (min-width: 980px) and (max-width: 1199px) { .main-nav ul { gap: 1rem; } }

@media (max-width: 600px) {
  .js-ready .wissen-filter {
    flex-wrap: nowrap; overflow-x: auto;
    margin-inline: calc(var(--edge) * -1); padding: 0 var(--edge) 0.4rem;
    scrollbar-width: thin;
  }
  .wissen-filter .wissen-chip { flex: none; white-space: nowrap; }
}

/* Fachartikel: Byline, Formeln, Tabellen im Fließtext, Quellen, rechtlicher Hinweis */
.wissen-byline { font-weight: 500; color: var(--color-ink); margin-bottom: 0.25rem; }
.wissen-disclaimer { color: var(--color-ink-soft); margin-bottom: 0.75rem; text-transform: none; letter-spacing: 0.02em; }
.wissen-article h3 { font-size: 1.15rem; margin: 1.75rem 0 0.6rem; max-width: none; }
.wissen-article ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wissen-article ol li { color: var(--color-ink); line-height: 1.7; padding-left: 0.25rem; }
.wissen-article ol li::marker { color: var(--color-copper-dark); font-weight: 600; }
.wissen-article p.wissen-formula {
  margin: 1.25rem 0 1.5rem; padding: 0.9rem 1.1rem;
  background: var(--color-paper); border: 1px solid var(--line-on-ivory); border-left: 3px solid var(--color-copper);
  border-radius: var(--radius-sm); font-weight: 600; overflow-x: auto;
}
.wissen-table-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
.wissen-table-wrap .wissen-table { margin: 0; }
@media (max-width: 600px) {
  .wissen-table { font-size: 0.85rem; }
  .wissen-table th, .wissen-table td { padding: 0.55rem 0.35rem; }
  .wissen-table .num { white-space: normal; }
  .wissen-table th, .wissen-table td { hyphens: auto; overflow-wrap: anywhere; }
  .wissen-table thead th { letter-spacing: 0.02em; }
}
.wissen-table--text td, .wissen-table--text th { vertical-align: top; }
.wissen-table--text td:first-child { font-weight: 500; }
.wissen-sources a { color: var(--color-copper-dark); text-decoration: underline; text-decoration-color: rgba(148, 81, 43, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wissen-sources a:hover { text-decoration-color: currentColor; }
.wissen-legal { max-width: 44rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-on-ivory); }
.wissen-legal__title { font-size: 0.72rem; font-weight: 500; color: var(--color-ink-soft); margin-bottom: 0.6rem; max-width: none; }
.wissen-legal p { max-width: none; font-size: 0.82rem; line-height: 1.6; color: var(--color-ink-soft); margin-bottom: 0.6rem; }

/* Lexikon: Ratgeber-Verweise und Quellen je Eintrag */
.wissen-term__articles, .wissen-term__sources { max-width: none; font-size: 0.85rem; color: var(--color-ink-soft); }
.wissen-term__articles .mono, .wissen-term__sources .mono { margin-right: 0.5rem; }
.wissen-term__sources a { color: var(--color-copper-dark); text-decoration: underline; text-decoration-color: rgba(148, 81, 43, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wissen-term__sources a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Hero (light): a calm network on ivory. Coloured connections grow from node
   to node, and each arrival sends out a ring — a request moving through the
   process (requirement -> manufacturer -> quality -> delivery), then repeats.
   Pure SVG + CSS, no JS.
   ========================================================================== */
.hero[data-theme="light"] { background: var(--color-ivory); color: var(--color-ink); }
.hero[data-theme="light"] .hero__scrim { background: linear-gradient(100deg, var(--color-ivory) 0%, var(--color-ivory) 26%, rgba(254, 252, 247, 0.7) 40%, rgba(254, 252, 247, 0) 56%); }
@media (max-width: 860px) { .hero[data-theme="light"] .hero__scrim { background: linear-gradient(180deg, var(--color-ivory) 45%, rgba(254, 252, 247, 0.7) 78%, rgba(254, 252, 247, 0.4) 100%); } }
.hero[data-theme="light"] .hero__headline { color: var(--color-ink); }
.hero[data-theme="light"] .hero__headline em { color: var(--color-copper-dark); }
.hero[data-theme="light"] .hero__lede,
.hero[data-theme="light"] .hero__benefits li,
.hero[data-theme="light"] .hero__meta,
.hero[data-theme="light"] .hero__scroll-cue { color: var(--color-ink-soft); }
.hero[data-theme="light"] .btn--ghost { border-color: var(--line-on-ivory); color: var(--color-ink); }
.hero[data-theme="light"] .btn--ghost:hover { border-color: var(--color-copper); color: var(--color-copper-dark); }

.hero-net { width: 100%; height: 100%; display: block; }
.hn-line { stroke-width: 1.8; stroke-dasharray: 1000; }
.hn-g { stroke: rgba(36, 28, 18, 0.2); }
.hn-b { stroke: var(--color-cornflower, #5b7fe4); stroke-width: 2.4; }
.hn-i { stroke: var(--color-ink, #241c12); stroke-width: 2.4; }
.hn-c { stroke: var(--color-copper, #be6f42); stroke-width: 2.4; }
.hn-ng { fill: #c5c2bf; }
.hn-nb { fill: var(--color-cornflower, #5b7fe4); }
.hn-nc { fill: var(--color-copper, #be6f42); }
.hn-ni { fill: var(--color-ink, #241c12); }
.hn-halo { fill: var(--color-copper, #be6f42); opacity: 0.12; }
.hn-labels text { font-family: var(--font-body, inherit); font-size: 17px; letter-spacing: 0.02em; fill: var(--color-ink-soft); }
.hn-pulse { opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  .hn-line { animation: hn-draw 1.8s cubic-bezier(.4, 0, .2, 1) both; animation-delay: var(--d, 0s); }
  .hn-node { animation: hn-pop .7s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: var(--d, 0s); }
  /* After drawing in, the process "breathes" in order: manufacturers one
     after another, then Merkuno, then the delivery. Slow fades, nothing travels. */
  .hn-pulse { animation: hn-glow 9s ease-in-out infinite; animation-delay: var(--sd, 2s); }
  .hn-halo { animation: hn-halo 9s ease-in-out infinite; animation-delay: var(--sd, 3.6s); }
  .hn-nodepulse { animation: hn-pop .7s cubic-bezier(.3, 1.3, .5, 1) both, hn-bump 9s ease-in-out infinite; animation-delay: var(--d, 0s), var(--sd, 2s); }
  @keyframes hn-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
  @keyframes hn-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
  @keyframes hn-glow { 0%, 100% { opacity: 0.5; } 14%, 24% { opacity: 1; } 40% { opacity: 0.5; } }
  @keyframes hn-halo { 0%, 100% { opacity: 0.08; transform: scale(0.9); } 14%, 24% { opacity: 0.22; transform: scale(1.15); } 40% { opacity: 0.08; transform: scale(0.9); } }
  @keyframes hn-bump { 0%, 100% { transform: scale(1); } 14%, 24% { transform: scale(1.18); } 40% { transform: scale(1); } }
}
@media (max-width: 860px) { .hero-net { opacity: 0.4; } }