/* =========================================================
   LIBA — Lingener Baumaschinen
   Premium Industrial Design System · Mobile-First (v3)
   ========================================================= */

/* ----------  Design Tokens  ---------- */
:root {
  /* ──────────────────────────────────────────────────────────────────────
     MARKENFARBEN — umgestellt 2026-08-03 von Teal auf dunkles Blau.

     ⟲ ROLLBACK: Diese Umstellung liegt in genau EINEM Commit — der schnellste
       Weg zurück ist `git revert <commit>`. Wer es von Hand machen will,
       kopiert den ALT-Block unten über die aktiven Werte. Beides genügt:
       außerhalb dieses Blocks steht keine Markenfarbe mehr im Stylesheet.

     Vorgegeben waren #0C3352, #09263E und #6EC1E4 — alles Übrige ist daraus
     abgeleitet und an seinem tatsächlichen Einsatzort gemessen.

     ⚠️ Gemessene Kontraste (WCAG):
        --brand       auf Weiß 13,04:1 ✓   auf --ink  1,47:1 ✗
        --brand-deep  auf Weiß 15,46:1 ✓   auf --ink  1,24:1 ✗
        --brand-light auf Weiß  2,02:1 ✗   auf --ink  9,53:1 ✓
        Daraus die Regel: --brand-light ist NUR auf dunklem Grund Textfarbe.
        Auf hellem Grund trägt Navy die Farbe und --brand-light die Linie
        (Unterstreichung, Hover, Fokusring) — siehe "Blueprint" weiter unten.

     ALT (Teal, bis 2026-08-03):
       --brand: #0E7C7B;  --brand-deep: #0A5E5D;  --brand-darker: #053433;
       --brand-light: #5EEAD4;  --brand-tint: #E6FAF8;
       --brand-rgb: 14, 124, 123;  --brand-light-rgb: 94, 234, 212;
     ────────────────────────────────────────────────────────────────────── */
  --brand: #0C3352;
  --brand-deep: #09263E;
  /* Trotz des Namens bewusst HELLER als --ink: dieser Ton wird ausschließlich
     als Oberkante des Schnittkanten-Verlaufs (.kerf) benutzt. Teal trug viel
     Grün und lag deshalb 1,41:1 über --ink; ein „dunkleres" Navy hätte die
     Fräsnut plattgedrückt. #1D303A stellt exakt diese Kantenstärke wieder her. */
  --brand-darker: #1D303A;
  --brand-light: #6EC1E4;
  --brand-tint: #F1F9FC;

  /* Kanal-Werte für rgba(): halten alle Transparenzen an der Palette.
     Ohne sie lägen ~19 Markenfarben als feste rgba() über das Stylesheet
     verstreut — und jeder Farbwechsel würde wieder Reste hinterlassen. */
  --brand-rgb: 12, 51, 82;
  --brand-light-rgb: 110, 193, 228;
  --brand-glow: rgba(var(--brand-rgb), 0.45);

  /* Accent */
  --accent: #F59E0B;
  --accent-deep: #B45309;

  /* Surfaces */
  --paper: #F7F6F2;
  --paper-2: #EFEDE6;
  --canvas: #FFFFFF;
  --ink: #0B0F14;
  --ink-2: #14181F;
  --ink-3: #1B2028;

  /* Steel scale */
  --steel-900: #0F172A;
  --steel-800: #1B2129;
  --steel-700: #2C333D;
  --steel-600: #4A5462;
  --steel-500: #6B7484;
  --steel-400: #9099A8;
  --steel-300: #C0C6D1;
  --steel-200: #DDE1E8;
  --steel-150: #E8EBF0;
  --steel-100: #F0F2F6;
  --steel-50:  #F6F7F9;
  --line: rgba(11, 15, 20, 0.08);
  --line-strong: rgba(11, 15, 20, 0.14);
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-dark-strong: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout — mobile default */
  --container: 1320px;
  --container-narrow: 960px;
  --gutter: 1.25rem;
  --section-y: 4rem;
  --section-y-tight: 2.5rem;

  /* Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11, 15, 20, .04);
  --shadow-md: 0 14px 36px -16px rgba(11, 15, 20, .14), 0 2px 6px rgba(11, 15, 20, .05);
  --shadow-lg: 0 36px 80px -28px rgba(11, 15, 20, .25), 0 10px 24px -10px rgba(11, 15, 20, .12);
  --shadow-brand: 0 22px 70px -22px rgba(var(--brand-rgb), .55);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur: 380ms;
  --dur-slow: 700ms;

  /* Nav */
  --nav-h: 64px;
  --topbar-h: 0px;
}

/* tablet+ */
@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --section-y: 5.5rem;
    --section-y-tight: 3.5rem;
    --radius-lg: 18px;
    --radius-xl: 24px;
  }
}

/* desktop+ */
@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --section-y: 8rem;
    --section-y-tight: 5rem;
    --nav-h: 80px;
    --topbar-h: 36px;
  }
}

/* ----------  Reset  ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--topbar-h) + 1rem);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}
@media (min-width: 768px) { body { font-size: 16.5px; } }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
hr { border: 0; height: 1px; background: var(--line); }
::selection { background: var(--brand); color: var(--canvas); }

/* ----------  Type system (mobile-first)  ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 8.5vw, 6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(1.75rem, 5.5vw, 3.75rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
h3 { font-size: clamp(1.25rem, 3.4vw, 1.875rem); letter-spacing: -0.025em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; font-weight: 600; }
@media (min-width: 768px) {
  h4 { font-size: 1.0625rem; }
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 14vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

p { color: var(--steel-700); text-wrap: pretty; }
.lead {
  font-size: clamp(1rem, 2.6vw, 1.3125rem);
  color: var(--steel-700);
  max-width: 62ch;
  line-height: 1.55;
}

/* Eyebrow / section index */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}
@media (min-width: 768px) { .eyebrow { font-size: .75rem; gap: .75rem; } }
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.eyebrow.is-dark { color: var(--brand-light); }
.eyebrow.is-dark .dot { background: var(--brand-light); }

.section-index {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* steel-600 statt steel-500: 4,35:1 auf Papier lag unter WCAG AA (G-06) */
  color: var(--steel-600);
  display: inline-flex;
  gap: .85rem;
  align-items: center;
}
@media (min-width: 768px) { .section-index { font-size: .75rem; gap: 1rem; } }
.section-index::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-deep), var(--brand));
  box-shadow: 0 1px 0 rgba(255,255,255,.65), inset 0 1px 1px rgba(0,0,0,.35);
}
.section-dark .section-index, .section-index.is-dark { color: var(--steel-400); }
.section-dark .section-index::before {
  background: linear-gradient(180deg, var(--brand), var(--brand-light));
  box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 1px rgba(0,0,0,.5);
}
@media (min-width: 768px) { .section-index::before { width: 26px; } }

/* ----------  Trench divider — signature cut line  ---------- */
.trench {
  position: relative;
  margin: 0 auto;
  padding: 2.5rem 0;
}
@media (min-width: 768px) { .trench { padding: 3.5rem 0; } }
.trench-cut {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-darker), var(--ink) 50%, var(--brand-deep));
  box-shadow: 0 1px 0 rgba(255,255,255,.7), inset 0 2px 2px rgba(0,0,0,.45);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 28px, transparent 28px 36px);
          mask-image: repeating-linear-gradient(90deg, #000 0 28px, transparent 28px 36px);
}
.section-dark .trench-cut {
  background: linear-gradient(180deg, #000, var(--brand-deep) 50%, var(--brand));
  box-shadow: 0 1px 0 rgba(255,255,255,.08), inset 0 2px 2px rgba(0,0,0,.6);
}

/* ----------  Layout primitives  ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-y) 0; position: relative; }
.section-tight { padding: var(--section-y-tight) 0; }

/* Dark section */
.section-dark {
  background: var(--ink);
  color: var(--steel-200);
  position: relative;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--canvas); }
.section-dark p, .section-dark .lead { color: var(--steel-300); }
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}
@media (min-width: 768px) {
  .section-dark::before { background-size: 56px 56px; }
}

/* Grids — mobile-first: 1 column, expand at breakpoints */
.grid { display: grid; gap: 1rem; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid { gap: 1.25rem; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid { gap: 1.5rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Section header — stacked mobile */
.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .section-header {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3.5rem;
    padding-bottom: 2rem;
  }
}
.section-dark .section-header { border-bottom-color: var(--line-dark); }
.section-header .heading h2 { margin-top: 1rem; max-width: 18ch; }
.section-header .heading .lead { margin-top: 1rem; }
.section-header .aside { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
@media (min-width: 900px) {
  .section-header .heading h2 { margin-top: 1.5rem; }
  .section-header .heading .lead { margin-top: 1.5rem; }
  .section-header .aside { align-items: flex-end; justify-content: flex-end; }
  .section-header .aside .lead { text-align: right; }
}

/* ----------  Buttons (44px+ touch target by default) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
}
@media (min-width: 768px) {
  .btn { gap: .65rem; padding: 1rem 1.6rem; }
}
.btn .arrow {
  width: 16px; height: 16px;
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn.is-sm { min-height: 40px; padding: .55rem 1rem; font-size: .85rem; }
.btn.is-lg { min-height: 52px; padding: 1.05rem 1.7rem; font-size: 1rem; }
@media (min-width: 768px) {
  .btn.is-lg { padding: 1.15rem 1.9rem; }
}

.btn-primary { background: var(--ink); color: var(--canvas); }
.btn-primary:hover { background: var(--brand-deep); }

.btn-brand { background: var(--brand); color: var(--canvas); box-shadow: var(--shadow-brand); overflow: hidden; }
.btn-brand::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.btn-brand:hover { background: var(--brand-deep); }
.btn-brand:hover::after { animation: shimmer .65s var(--ease-out) forwards; }
@keyframes shimmer { to { left: 160%; } }

.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: #FBBF24; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.section-dark .btn-ghost, .btn-outline-light {
  color: var(--canvas);
  border-color: rgba(255,255,255,.22);
}
.section-dark .btn-ghost:hover, .btn-outline-light:hover {
  background: var(--canvas); color: var(--ink); border-color: var(--canvas);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font-weight: 500;
  font-size: .9375rem;
  position: relative;
  padding-bottom: 6px;
  min-height: 32px;
}
.btn-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn-link:hover { gap: .9rem; }
.section-dark .btn-link { color: var(--canvas); }

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .85rem .45rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--canvas);
  backdrop-filter: blur(8px);
  font-weight: 500;
  font-size: .85rem;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
  min-height: 44px;
}
.play-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.play-btn .icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .play-btn { gap: .85rem; font-size: .9rem; padding: .5rem .85rem .5rem .5rem; }
  .play-btn .icon { width: 36px; height: 36px; }
}
.play-btn .icon svg { width: 12px; height: 12px; color: var(--canvas); }

/* ----------  Top bar (desktop only) ---------- */
.topbar { display: none; }
@media (min-width: 1024px) {
  .topbar {
    height: var(--topbar-h);
    background: var(--ink);
    color: var(--steel-300);
    font-size: .8125rem;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 101;
  }
  .topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
  }
  .topbar a { color: var(--steel-300); transition: color var(--dur-fast); }
  .topbar a:hover { color: var(--canvas); }
  .topbar-meta { display: flex; gap: 2rem; }
  .topbar-meta span.dot { color: var(--brand-light); }
}

/* ----------  Navigation — mobile-first  ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 246, 242, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur);
}
.nav.is-scrolled, .nav.is-solid {
  background: rgba(247, 246, 242, 0.94);
  border-bottom-color: var(--line);
}
.nav-inner {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1100px) {
  .nav-inner { grid-template-columns: auto 1fr auto; gap: 1.5rem; }
}
@media (min-width: 1280px) {
  .nav-inner { gap: 2.5rem; }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-brand:hover { opacity: .8; }
.nav-brand .logo {
  height: 32px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .nav-brand { gap: 1rem; }
  .nav-brand .logo { height: 42px; }
}
.nav-brand .meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-500);
  line-height: 1.1;
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
  display: none;
}
/* .nav-brand .meta intentionally hidden — logo image is sufficient */

/* Nav links — hidden on mobile/tablet, visible at 1100px+ */
.nav-links { display: none; }
@media (min-width: 1100px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    justify-self: center;
  }
  .nav-links a {
    position: relative;
    padding: .5rem .6rem;
    font-weight: 500;
    font-size: .85rem;
    color: var(--steel-700);
    border-radius: 8px;
    transition: color var(--dur-fast);
    white-space: nowrap;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--ink); }
  .nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .6rem; right: .6rem;
    bottom: 0;
    height: 2px;
    background: var(--brand);
  }
}
@media (min-width: 1280px) {
  .nav-links a { padding: .65rem 1rem; font-size: .9375rem; }
  .nav-links a[aria-current="page"]::after { left: 1rem; right: 1rem; }
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
@media (min-width: 768px) { .nav-cta { gap: .75rem; } }

/* Hide secondary buttons below a certain size, keep just toggle + primary */
.nav-cta .btn { display: none; }
@media (min-width: 480px) {
  .nav-cta .btn.btn-primary, .nav-cta .btn.btn-brand { display: inline-flex; }
}
@media (min-width: 1100px) {
  .nav-cta .btn { display: inline-flex; }
}

/* Hamburger — visible by default, hidden at 1100px+ */
.nav-toggle {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }
@media (min-width: 1100px) { .nav-toggle { display: none; } }

/* Mobile drawer — iOS-sicher, kein display-Switch-Bug bei gescrollter Seite */
.mobile-nav {
  /* Immer im DOM, aber per Clip unsichtbar — kein display:none-Positionierungs-Bug auf iOS */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 100dvh passt sich der dynamischen iOS-Toolbar-Höhe an */
  height: 100dvh;
  background: var(--canvas);
  z-index: 9000;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 1rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: env(safe-area-inset-bottom, 2rem);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Versteckt per Clip — kein display-Toggle nötig */
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  /* visibility nimmt die Links des geschlossenen Drawers aus der Tab-Reihenfolge (H-4);
     verzögert, damit die Schließen-Animation noch sichtbar bleibt. */
  visibility: hidden;
  transition: clip-path 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
}
.mobile-nav.is-open {
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
  visibility: visible;
  transition: clip-path 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* Nav-Header immer über dem Drawer */
.nav    { z-index: 9500; }
.topbar { z-index: 9600; }
/* Desktop: Drawer niemals interaktiv. Grenze MUSS mit .nav-toggle/.nav-links (1100px)
   übereinstimmen — bei 1024px gab es zwischen 1024 und 1099px keine Navigation (H-1). */
@media (min-width: 1100px) {
  .mobile-nav { display: none !important; }
}
/* Offener Drawer: Seite dahinter scrollt nicht mit */
html.nav-open, html.nav-open body { overflow: hidden; }
.mobile-nav a {
  padding: 1rem 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  letter-spacing: -.02em;
  min-height: 56px;
  display: flex;
  align-items: center;
}
.mobile-nav a.btn {
  font-size: .9375rem;
  font-weight: 600;
  display: inline-flex;
  border-bottom: 0;
  min-height: 44px;
  padding: .6rem 1.25rem;
  margin-top: 1.5rem;
  align-self: flex-start;
}
.mobile-nav a.btn-primary,
.mobile-nav a.btn-brand { color: var(--canvas); }
.mobile-nav a.btn-accent { color: var(--ink); }
.mobile-nav a.btn-ghost  { color: var(--ink); }
.mobile-nav-meta {
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid; gap: .65rem;
  color: var(--steel-600);
  font-size: .9rem;
}
.mobile-nav-meta a {
  font-size: .9rem;
  font-weight: 400;
  border-bottom: 0;
  min-height: unset;
  display: inline;
  padding: 0;
  color: var(--steel-600);
}

/* ----------  Hero  ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h) - var(--topbar-h));
  background: var(--steel-900);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--canvas);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Full-bleed image background ---- */
.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--steel-800);
  overflow: hidden;
}

/* Images fill the frame */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
  opacity: 0;
  transition: opacity 1.4s var(--ease), transform 9s var(--ease);
  transform: scale(1.06);
  will-change: transform, opacity;
}
.hero-media img.is-active { opacity: 1; transform: scale(1); }

/* Hintergrundvideo: verhält sich wie ein Slide, aber bewusst OHNE den Ken-Burns-Zoom der
   Bilder — ein bewegtes Bild braucht keine zusätzliche Bewegung. Der Parallax auf
   .hero-media wirkt mit, weil er den Container verschiebt, nicht die einzelnen Slides. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hero-video.is-active { opacity: 1; }

/* Overlay: gradient for text readability over full-bleed image */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 85% at 50% 100%, transparent 42%, rgba(11,15,20,.5) 100%),
    radial-gradient(58% 48% at 7% 94%, rgba(var(--brand-rgb), .20), transparent 60%),
    linear-gradient(to top, rgba(11,15,20,.97) 0%, rgba(11,15,20,.78) 22%, rgba(11,15,20,.42) 46%, rgba(11,15,20,.14) 66%, transparent 84%),
    linear-gradient(105deg, rgba(11,15,20,.65) 0%, rgba(11,15,20,.28) 38%, transparent 62%);
}

/* Slide indicators — bottom-right of hero */
.hero-dots {
  position: absolute;
  bottom: 1.5rem;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .42rem;
  z-index: 3;
}
.hero-dot {
  position: relative;
  height: 24px;
  width: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--dur-slow);
}
/* Sichtbarer 2px-Strich, Trefferfläche bleibt 24px hoch (N-8) */
.hero-dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 11px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255,255,255,.25);
  transition: background var(--dur);
}
.hero-dot.is-active { width: 40px; }
.hero-dot.is-active::before { background: var(--brand-light); }
.hero-dot:hover:not(.is-active)::before { background: rgba(255,255,255,.45); }

/* Anhalten-Knopf neben den Punkten (WCAG 2.2.2). Gleiche Trefferflaeche wie ein Punkt. */
.hero-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-left: .35rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255,255,255,.55);
  transition: color var(--dur);
}
/* Ohne diese Zeile gewinnt display:inline-flex gegen [hidden] aus dem Browser-Stylesheet —
   der Knopf waere schon vor dem Freischalten durch main.js sichtbar. */
.hero-motion[hidden] { display: none; }
.hero-motion:hover { color: var(--canvas); }
.hero-motion svg { width: 11px; height: 11px; display: block; fill: currentColor; }
.hero-motion .ico-play { display: none; }
.hero-motion.is-paused .ico-pause { display: none; }
.hero-motion.is-paused .ico-play { display: block; }

/* ---- Text content — sits above the frame ---- */
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 0;
  /* Der Container überdeckt die Slider-Punkte im Bildrahmen -> Klicks nur für die
     Textspalte annehmen, sonst gehen sie an die Punkte durch (N-8). */
  pointer-events: none;
}
.hero-text-col { pointer-events: auto; }

/* Text column — comfortable reading width on all screen sizes */
.hero-text-col { max-width: 62ch; }
@media (min-width: 1024px) { .hero-text-col { max-width: 52rem; } }

/* ---- Typography ---- */
.hero-eyebrow { color: var(--brand-light); }
.hero-eyebrow .dot { background: var(--brand-light); }
.hero h1 {
  color: var(--canvas);
  font-size: clamp(2.6rem, 5.5vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
  margin-top: 1.25rem;
  max-width: none;
}
@media (min-width: 768px) { .hero h1 { margin-top: 1.75rem; } }
.hero h1 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--brand-light);
  letter-spacing: -.02em;
  font-size: .93em;
}
/* Hero-Headline: EIN maßgeblicher Zeilenabstand (line-height). Das Padding
   schützt Unterlängen vor overflow:hidden der Maske und wird per negativem
   Margin neutralisiert — so sind Masken-Grenze und interner Umbruch identisch. */
.hero h1 .mask-line {
  line-height: 1.26;
  padding-bottom: .13em;
  margin-bottom: -.13em;
}
/* line-height: 0 -> die Serif-Kursive trägt nicht zur Zeilenboxhöhe bei;
   die Höhe kommt allein aus dem Strut der Zeile (1.26em, engine-stabil). */
.hero h1 em { line-height: 0; }
/* LCP (H-7): Die Hero-Headline ist das größte Element im ersten Viewport. Mit der
   Masken-Animation (translateY 110% -> 0, 1,05 s + Verzögerung) wurde sie erst nach
   ~5 s als gemalt gewertet. Die Masken-Struktur bleibt für den Zeilenabstand erhalten. */
.hero h1 .mask-line > span { transform: none; transition: none; }
.hero-sub {
  color: rgba(255,255,255,.62);
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: clamp(.875rem, 1.8vw, 1.0rem);
  line-height: 1.7;
}
@media (min-width: 768px) { .hero-sub { margin-top: 1.75rem; } }
.hero-actions {
  margin-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .85rem;
  align-items: center;
}
@media (min-width: 768px) { .hero-actions { margin-top: 2.25rem; gap: 1rem; } }
.hero-actions .btn { width: 100%; }
@media (min-width: 480px) { .hero-actions .btn { width: auto; } }

/* secondary hero action — a quiet text link so the primary CTA leads */
.hero-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .15rem;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.hero-secondary .arrow {
  width: 18px; height: 18px;
  transition: transform var(--dur-fast) var(--ease);
}
.hero-secondary::after {
  content: "";
  position: absolute;
  left: .15rem; right: .15rem; bottom: .45rem;
  height: 1px;
  background: rgba(255,255,255,.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.hero-secondary:hover::after { transform: scaleX(1); }
.hero-secondary:hover .arrow { transform: translateX(4px); }
@media (max-width: 479px) { .hero-secondary { width: 100%; } }

/* ---- Stats ticker ---- */
.hero-ticker {
  /* Reine Anzeige: Klicks gehen an die darunterliegenden Slider-Punkte durch (N-8) */
  pointer-events: none;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1.25rem;
  column-gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 800px) {
  .hero-ticker {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    margin-top: 3rem;
  }
}
.hero-ticker-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  padding-top: .9rem;
}
/* kerf tick mark above each value — same cut vocabulary as the gauge */
.hero-ticker-item::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 2px;
  background: var(--brand-light);
}
@media (min-width: 800px) {
  .hero-ticker-item { padding-right: 1rem; }
  .hero-ticker-item + .hero-ticker-item::before {
    content: "";
    position: absolute;
    left: -1.5rem; top: .25rem; bottom: .25rem;
    width: 1px;
    background: rgba(255,255,255,.1);
  }
}
.hero-ticker-item .k {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
@media (min-width: 768px) { .hero-ticker-item .k { font-size: .67rem; letter-spacing: .15em; } }
.hero-ticker-item .v {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--canvas);
}


/* ============ HERO — Design-Aufwertung: Schnittkante/Tiefenskala + Lade-Moment ============ */
.hero-gauge { display: none; }
@media (min-width: 1024px) {
  .hero-gauge {
    position: absolute;
    top: 50%;
    right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  .hero-gauge-cap {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(var(--brand-light-rgb), .72);
    margin-bottom: .85rem;
    text-shadow: 0 1px 8px rgba(11,15,20,.6);
  }
  .hero-gauge-scale {
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(var(--brand-light-rgb), .32);
    padding-right: .8rem;
  }
  .hero-gauge-scale .t { position: relative; text-align: right; }
  .hero-gauge-scale .t i {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(11,15,20,.7);
  }
  .hero-gauge-scale .t::after {
    content: "";
    position: absolute;
    right: -.8rem; top: .5em;
    width: 9px; height: 1px;
    background: var(--brand-light);
  }
  .hero-gauge-scale .t:last-child i { color: var(--brand-light); }
  .hero-gauge-scale .t:last-child::after { width: 14px; height: 2px; }
}

/* Orchestrierter Lade-Moment — nur wenn Motion erwünscht ist (LCP-Bild bleibt unberührt) */
@media (prefers-reduced-motion: no-preference) {
  .hero-gauge-scale { animation: gaugeDraw 1s var(--ease-out) .15s both; }
  .hero-gauge-cap   { animation: heroRise .7s var(--ease-out) .5s both; }
  .hero-gauge-scale .t { animation: heroFade .6s var(--ease-out) both; }
  .hero-gauge-scale .t:nth-child(1) { animation-delay: .55s; }
  .hero-gauge-scale .t:nth-child(2) { animation-delay: .68s; }
  .hero-gauge-scale .t:nth-child(3) { animation-delay: .81s; }
  .hero-gauge-scale .t:nth-child(4) { animation-delay: .94s; }
  .hero-eyebrow { animation: heroRise .7s var(--ease-out) .05s both; }
  .hero-sub     { animation: heroRise .7s var(--ease-out) .22s both; }
  .hero-actions { animation: heroRise .7s var(--ease-out) .34s both; }
  .hero-ticker  { animation: heroRise .8s var(--ease-out) .46s both; }
}
@keyframes gaugeDraw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* ----------  Page hero (interior)  ---------- */
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(3px) brightness(0.22);
  transform: scale(1.06);
  pointer-events: none;
}
.page-hero {
  position: relative;
  padding: 3.5rem 0 2.5rem;
  background: var(--ink);
  color: var(--canvas);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .page-hero { padding: 5rem 0 4rem; } }
@media (min-width: 1024px) { .page-hero { padding: 7rem 0 5rem; } }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(var(--brand-rgb), .4), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(var(--brand-light-rgb), .08), transparent 60%);
  z-index: -1;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
  mask-image: linear-gradient(180deg, transparent, black 30%, black);
}
@media (min-width: 768px) { .page-hero::after { background-size: 56px 56px; } }
.page-hero h1 { color: var(--canvas); max-width: 20ch; }
.page-hero h1 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--brand-light);
  letter-spacing: -0.025em;
}
.page-hero p { color: rgba(255,255,255,.75); max-width: 60ch; margin-top: 1.25rem; font-size: clamp(.95rem, 2.4vw, 1.15rem); }
.breadcrumbs {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .breadcrumbs { font-size: .72rem; letter-spacing: .12em; gap: .65rem; margin-bottom: 1.5rem; } }
.breadcrumbs a:hover { color: var(--brand-light); }
.breadcrumbs .sep { opacity: .4; }

/* ----------  Marquee  ---------- */
.marquee {
  background: var(--ink);
  color: var(--steel-500);
  overflow: hidden;
  padding: 1.1rem 0;
  border-block: 1px solid var(--line-dark);
}
@media (min-width: 768px) { .marquee { padding: 1.4rem 0; } }
.marquee-track {
  display: flex;
  gap: 2.5rem;
  animation: marquee 35s linear infinite;
  width: max-content;
  align-items: center;
}
@media (min-width: 768px) {
  .marquee-track { gap: 3.5rem; animation-duration: 45s; }
}
.marquee-item {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--steel-300);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .marquee-item { font-size: 1.4rem; gap: 3.5rem; }
}
.marquee-item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----------  Split layout — stacked mobile, side-by-side desktop ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 1200px) {
  .split { gap: 5rem; }
}
.split.align-start { align-items: start; }
.split.reverse > :first-child { order: 0; }
@media (min-width: 900px) {
  .split.reverse > :first-child { order: 2; }
}

.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
@media (min-width: 768px) {
  .media-frame {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
}
.media-frame.is-wide { aspect-ratio: 16 / 11; }
.media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
  will-change: transform;
}
.media-frame:hover img { transform: scale(1.05); }
.media-frame .tag {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 768px) {
  .media-frame .tag { left: 1.25rem; bottom: 1.25rem; padding: .55rem 1rem; font-size: .72rem; }
}
.media-frame .tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
}

/* spec list */
.spec-list {
  display: grid;
  gap: 0;
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .spec-list { margin-top: 2.25rem; } }
.spec-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  border-radius: 4px;
}
.spec-list li:hover {
  box-shadow: inset 3px 0 0 var(--brand);
  background: rgba(var(--brand-rgb), .04);
}
.section-dark .spec-list li:hover {
  background: rgba(var(--brand-light-rgb), .05);
  box-shadow: inset 3px 0 0 var(--brand-light);
}
@media (min-width: 768px) {
  .spec-list li { grid-template-columns: 32px 1fr; gap: 1.25rem; padding: 1.15rem 0; }
}
.section-dark .spec-list, .section-dark .spec-list li { border-color: var(--line-dark); }
.spec-list li .num {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--brand);
  padding-top: 3px;
}
@media (min-width: 768px) { .spec-list li .num { font-size: .72rem; } }
.spec-list li strong { font-weight: 500; font-size: 1rem; display: block; letter-spacing: -.015em; }
@media (min-width: 768px) { .spec-list li strong { font-size: 1.05rem; } }
.spec-list li span { color: var(--steel-600); font-size: .9rem; line-height: 1.5; margin-top: .2rem; display: block; }
@media (min-width: 768px) { .spec-list li span { font-size: .95rem; } }
.section-dark .spec-list li span { color: var(--steel-400); }

/* Modell-Links in spec-lists (Maschinen-Seite): Optik wie Text, Affordance beim Hover/Fokus.
   .is-stretched macht bei Einzelmodell-Zeilen die ganze Zeile klickbar (Stretched-Link). */
.spec-list li { position: relative; }
.spec-list li strong a.spec-link { color: inherit; text-decoration: none; }
.spec-list li strong a.spec-link:hover,
.spec-list li strong a.spec-link:focus-visible {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--brand-light); /* Blueprint: helle Linie unter dunklem Text */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.section-dark .spec-list li strong a.spec-link:hover,
.section-dark .spec-list li strong a.spec-link:focus-visible { color: var(--brand-light); }
.spec-list li strong a.spec-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
.spec-list a.spec-link.is-stretched::after { content: ""; position: absolute; inset: 0; }

/* ---- Kerf variant (homepage): blade marks + category kickers instead of numbers ---- */
.spec-list.is-kerf li {
  display: block;
  grid-template-columns: none;
  position: relative;
  padding: 1rem 0 1rem 1.4rem;
}
@media (min-width: 768px) { .spec-list.is-kerf li { padding: 1.15rem 0 1.15rem 1.6rem; } }
.spec-list.is-kerf li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25rem;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-deep), var(--brand));
  box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
  transition: height var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.section-dark .spec-list.is-kerf li::before { background: linear-gradient(180deg, var(--brand), var(--brand-light)); }
.spec-list.is-kerf li:hover { box-shadow: none; }
.spec-list.is-kerf li:hover::before { top: 1.05rem; height: 22px; }
.spec-list.is-kerf li .spec-kicker {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin: 0 0 .45rem;
}
@media (min-width: 768px) { .spec-list.is-kerf li .spec-kicker { font-size: .66rem; } }
.section-dark .spec-list.is-kerf li .spec-kicker { color: var(--brand-light); }
.spec-list.is-kerf li .spec-desc { color: var(--steel-600); font-size: .9rem; line-height: 1.5; margin-top: .25rem; display: block; }
@media (min-width: 768px) { .spec-list.is-kerf li .spec-desc { font-size: .95rem; } }
.section-dark .spec-list.is-kerf li .spec-desc { color: var(--steel-400); }

/* ----------  Product showcase — mobile-first  ---------- */
.showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .showcase { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
}

.show-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--canvas);
  isolation: isolate;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) { .show-card { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; } }

@media (min-width: 960px) {
  .show-card.is-feature { grid-column: span 7; aspect-ratio: 4 / 3.5; }
  .show-card.is-side { grid-column: span 5; aspect-ratio: 4 / 3.5; }
  .show-card.is-trio { grid-column: span 4; aspect-ratio: 5 / 6; }
}

.show-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease);
  will-change: transform;
}
.show-card:hover img { transform: scale(1.06); }
.show-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,15,20,.05) 30%, rgba(11,15,20,.85) 100%);
}
.show-card-body {
  padding: 1.25rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
}
@media (min-width: 768px) { .show-card-body { padding: 1.75rem; } }
@media (min-width: 1024px) { .show-card-body { padding: 2rem; } }

.show-card-body .meta {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(var(--brand-light-rgb), .1);
  border: 1px solid rgba(var(--brand-light-rgb), .18);
  border-radius: 999px;
  padding: .25rem .65rem;
}
@media (min-width: 768px) { .show-card-body .meta { font-size: .68rem; } }
.show-card-body h3 {
  color: var(--canvas);
  font-size: clamp(1.2rem, 3.5vw, 2.1rem);
  letter-spacing: -.03em;
  font-weight: 500;
}
.show-card-body .desc {
  margin-top: .55rem;
  color: rgba(255,255,255,.72);
  font-size: .85rem;
  max-width: 38ch;
  line-height: 1.5;
}
@media (min-width: 768px) { .show-card-body .desc { font-size: .95rem; } }
.show-card-arrow {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
@media (min-width: 768px) { .show-card-arrow { width: 52px; height: 52px; } }
.show-card:hover .show-card-arrow {
  background: var(--brand);
  border-color: var(--brand);
  transform: translate(4px, -4px);
}
.show-card-arrow svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .show-card-arrow svg { width: 18px; height: 18px; } }

/* ----------  Applications grid  ---------- */
.apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .apps { grid-template-columns: repeat(3, 1fr); } }
.app {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  color: var(--canvas);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 600px) { .app { aspect-ratio: 4 / 5; } }
.app img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.app::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,15,20,.05) 30%, rgba(11,15,20,.85) 100%);
}
.app:hover img { transform: scale(1.07); }
.app-body { padding: 1.25rem; width: 100%; }
@media (min-width: 768px) { .app-body { padding: 1.5rem; } }
.app-body .idx {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-light);
  font-weight: 500;
}
@media (min-width: 768px) { .app-body .idx { font-size: .68rem; letter-spacing: .14em; } }
.app-body h3 {
  color: var(--canvas);
  margin-top: .5rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.025em;
}
@media (min-width: 768px) { .app-body h3 { margin-top: .6rem; font-size: 1.45rem; } }
.app-body p { margin-top: .55rem; color: rgba(255,255,255,.72); font-size: .85rem; line-height: 1.5; }
@media (min-width: 768px) { .app-body p { margin-top: .65rem; font-size: .9rem; } }

/* ----------  Stats grid  ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
@media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-cell {
  padding: 1.75rem 1.25rem;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
@media (min-width: 768px) { .stat-cell { padding: 2.5rem 1.75rem; } }
@media (min-width: 1024px) { .stat-cell { padding: 3rem 2rem; } }

.stat-cell .lbl {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-400);
}
@media (min-width: 768px) { .stat-cell .lbl { font-size: .7rem; letter-spacing: .14em; } }
.stat-cell .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--canvas);
}
.stat-cell .num .unit {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brand-light);
  font-size: .55em;
  font-weight: 400;
  margin-left: .15em;
  letter-spacing: -.02em;
}
.stat-cell .desc { color: var(--steel-400); font-size: .85rem; margin-top: .5rem; line-height: 1.5; }
@media (min-width: 768px) { .stat-cell .desc { font-size: .9rem; } }

/* ----------  Process / timeline  ---------- */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
}
@media (min-width: 600px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .process {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 3rem;
  }
  .process::after {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--brand-light), rgba(var(--brand-light-rgb), .2) 85%, transparent);
    pointer-events: none;
  }
}

.process-step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark-strong);
  position: relative;
}
@media (min-width: 768px) { .process-step { padding-top: 1.5rem; } }
.process-step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 28px; height: 2px;
  background: var(--brand-light);
  z-index: 1;
}
.process-step .step-num {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-light);
}
@media (min-width: 768px) { .process-step .step-num { font-size: .72rem; letter-spacing: .14em; } }
.process-step h3 { color: var(--canvas); margin-top: .65rem; font-size: 1.1rem; letter-spacing: -.02em; font-weight: 500; }
@media (min-width: 768px) { .process-step h3 { margin-top: .75rem; font-size: 1.2rem; } }
.process-step p { margin-top: .55rem; color: var(--steel-400); font-size: .85rem; }
@media (min-width: 768px) { .process-step p { margin-top: .65rem; font-size: .9rem; } }

/* ----------  CTA block  ---------- */
.cta-block {
  background: var(--ink);
  color: var(--canvas);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .cta-block { padding: 3rem; border-radius: var(--radius-xl); gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .cta-block { grid-template-columns: 1.5fr 1fr; padding: 4.5rem; gap: 3rem; }
}

.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(var(--brand-rgb), .45), transparent 55%);
  z-index: -1;
}
.cta-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: -1;
  mask-image: linear-gradient(180deg, transparent, black 20%, transparent);
}
.cta-block h2 { color: var(--canvas); max-width: 16ch; }
.cta-block h2 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--brand-light);
}
.cta-block p { color: rgba(255,255,255,.78); margin-top: 1rem; font-size: 1rem; max-width: 48ch; }
@media (min-width: 768px) { .cta-block p { font-size: 1.05rem; } }
.cta-block .actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.75rem; }
@media (min-width: 768px) { .cta-block .actions { gap: 1rem; margin-top: 2rem; } }
.cta-block .actions .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 480px) { .cta-block .actions .btn { flex: 0 0 auto; } }

.cta-side {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.5rem;
}
@media (min-width: 768px) { .cta-side { padding: 1.75rem; } }
.cta-side dt {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .4rem;
}
@media (min-width: 768px) { .cta-side dt { font-size: .7rem; letter-spacing: .14em; } }
.cta-side dd {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  letter-spacing: -.015em;
  word-break: break-word;
}
@media (min-width: 768px) { .cta-side dd { font-size: 1.1rem; margin-bottom: 1.4rem; } }
.cta-side dd:last-child { margin-bottom: 0; }

/* ----------  Quote  ---------- */
.quote {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.quote::before {
  content: "\201C";
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: .8;
  color: var(--brand);
  opacity: .07;
  position: absolute;
  top: -.1em;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.section-dark .quote::before { color: var(--brand-light); opacity: .09; }
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 4.5vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink);
  position: relative;
}
.quote blockquote em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brand);
}
.section-dark .quote blockquote { color: var(--canvas); }
.section-dark .quote blockquote em { color: var(--brand-light); }
.quote .cite {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-600);
}
@media (min-width: 768px) { .quote .cite { margin-top: 2.25rem; font-size: .8rem; } }
.quote .cite strong {
  font-family: var(--font-sans);
  font-size: .95rem;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-bottom: .25rem;
  font-weight: 500;
}
.section-dark .quote .cite { color: var(--steel-400); }
.section-dark .quote .cite strong { color: var(--canvas); }

/* ----------  News cards  ---------- */
.news-card {
  background: var(--canvas);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.news-card-image { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.news-card:hover .news-card-image img { transform: scale(1.05); }
.news-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 768px) { .news-card-body { padding: 1.75rem; } }
.news-card-meta {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
@media (min-width: 768px) { .news-card-meta { font-size: .7rem; letter-spacing: .12em; } }
.news-card h3 { font-size: 1.1rem; margin-top: .75rem; line-height: 1.3; letter-spacing: -.02em; }
@media (min-width: 768px) { .news-card h3 { font-size: 1.2rem; margin-top: .85rem; } }
.news-card p { color: var(--steel-600); margin-top: .75rem; font-size: .9rem; line-height: 1.55; flex: 1; }
@media (min-width: 768px) { .news-card p { margin-top: .85rem; font-size: .95rem; } }
.news-card .link { margin-top: 1rem; color: var(--ink); font-weight: 500; font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
@media (min-width: 768px) { .news-card .link { margin-top: 1.25rem; font-size: .9rem; } }
.news-card:hover .link { gap: .65rem; }

/* ----------  Forms  ---------- */
.form {
  display: grid; gap: 1rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .form { gap: 1.25rem; padding: 2.25rem; }
}
@media (min-width: 1024px) { .form { padding: 2.75rem; } }
.form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .form-row { gap: 1.25rem; grid-template-columns: 1fr 1fr; }
}
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--steel-600);
}
@media (min-width: 768px) { .field label { font-size: .72rem; letter-spacing: .12em; } }
.field input, .field textarea, .field select {
  padding: .85rem 1rem;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--canvas);
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .20);
}
.field-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--steel-600); line-height: 1.45; }
.field-check input { margin-top: 1px; flex-shrink: 0; min-height: 0; width: 20px; height: 20px; accent-color: var(--brand); }
.field input[type="file"] { padding: .55rem; font-size: .85rem; }
.field input[type="file"]::file-selector-button {
  margin-right: .85rem; padding: .5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--canvas); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--brand); color: var(--brand); }

/* ----------  Spec table  ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.section-dark .spec-table { background: var(--ink-2); border-color: var(--line-dark); }
.spec-table th, .spec-table td {
  padding: .9rem 1.1rem;
  text-align: left;
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
@media (min-width: 768px) { .spec-table th, .spec-table td { padding: 1.05rem 1.35rem; font-size: .95rem; } }
.section-dark .spec-table th, .section-dark .spec-table td { border-bottom-color: var(--line-dark); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-600);
  width: 40%;
  background: var(--steel-50);
}
@media (min-width: 768px) { .spec-table th { font-size: .7rem; letter-spacing: .1em; } }
.section-dark .spec-table th { background: rgba(255,255,255,.02); color: var(--steel-400); }

/* Werte: deutlicher, dunkler, sofort lesbar */
.spec-table td {
  font-weight: 600;
  font-size: .975rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
@media (min-width: 768px) { .spec-table td { font-size: 1.025rem; } }
.section-dark .spec-table td { color: var(--canvas); }

/* Erste Zeile — Haupt-Kennwert hervorheben */
.spec-table tbody tr:first-child th { background: var(--brand-tint); color: var(--brand-deep); }
.spec-table tbody tr:first-child td { color: var(--brand-deep); font-size: 1.05rem; }
@media (min-width: 768px) { .spec-table tbody tr:first-child td { font-size: 1.1rem; } }
.section-dark .spec-table tbody tr:first-child th { background: rgba(var(--brand-light-rgb), .07); color: var(--brand-light); }
.section-dark .spec-table tbody tr:first-child td { color: var(--brand-light); }

/* Hover-Effekt auf Zeilen (Desktop) */
@media (hover: hover) {
  .spec-table tbody tr { transition: background var(--dur-fast); }
  .spec-table tbody tr:hover th,
  .spec-table tbody tr:hover td { background: var(--brand-tint); }
  .spec-table tbody tr:hover td { color: var(--brand-deep); }
  .section-dark .spec-table tbody tr:hover th,
  .section-dark .spec-table tbody tr:hover td { background: rgba(var(--brand-light-rgb), .07); }
  .section-dark .spec-table tbody tr:hover td { color: var(--brand-light); }
}

/* Mobile: th/td vertikal stapeln auf sehr kleinen Screens */
@media (max-width: 479px) {
  .spec-table { display: block; }
  .spec-table tbody { display: block; }
  .spec-table tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .spec-table tr:last-child { border-bottom: 0; }
  .spec-table th {
    width: auto;
    background: transparent;
    padding: 0 0 .2rem 0;
    border-bottom: 0;
    font-size: .62rem;
  }
  .spec-table td {
    padding: 0;
    border-bottom: 0;
    font-size: 1rem;
  }
  .section-dark .spec-table tr { border-bottom-color: var(--line-dark); }
}

/* ----------  Spec-Stats (Key-Metrics Strip)  ---------- */
.spec-stats {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}
@media (min-width: 480px) {
  .spec-stats { grid-template-columns: repeat(3, 1fr); }
}
.spec-stat {
  padding: 1rem .75rem;
  text-align: center;
  border-right: 1px solid var(--line);
  background: var(--canvas);
}
.spec-stat:last-child { border-right: 0; }
.spec-stat-val {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -.04em;
  line-height: 1;
  display: block;
}
.spec-stat-key {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-top: .35rem;
  display: block;
}
@media (min-width: 768px) {
  .spec-stat { padding: 1.25rem 1rem; }
  .spec-stat-val { font-size: 1.6rem; }
  .spec-stat-key { font-size: .65rem; }
}

/* ----------  Footer  ---------- */
.footer {
  background: var(--ink);
  color: var(--steel-300);
  padding: 2.5rem 0 1rem;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.06);
}
@media (min-width: 600px) { .footer { padding: 3.5rem 0 1.5rem; } }
.footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(255,255,255,.028) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) { .footer { padding: 5rem 0 2rem; } }
@media (min-width: 1024px) { .footer { padding: 6rem 0 2rem; } }

.footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}
@media (min-width: 768px) { .footer::before { background-size: 56px 56px; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-bottom: 3rem;
  position: relative;
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3.5rem; margin-bottom: 5rem; }
}

.footer-brand .logo {
  height: 48px;
  width: auto;
  display: block;
  opacity: .92;
}
@media (min-width: 768px) { .footer-brand .logo { height: 56px; } }
.footer-brand .meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-top: 1.25rem;
}
@media (min-width: 768px) { .footer-brand .meta { font-size: .72rem; letter-spacing: .14em; } }

.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  color: var(--canvas);
  margin-top: 1.1rem;
  max-width: 22ch;
  line-height: 1.3;
}
@media (min-width: 768px) { .footer-tagline { font-size: 1.4rem; margin-top: 1.25rem; } }

.footer h3.footer-col {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
@media (min-width: 768px) { .footer h3.footer-col { font-size: .72rem; letter-spacing: .14em; margin-bottom: 1.4rem; } }
.footer ul { display: grid; gap: .65rem; }
.footer a { color: var(--steel-300); transition: color var(--dur-fast); font-size: .92rem; }
@media (min-width: 768px) { .footer a { font-size: .95rem; } }
.footer a:hover { color: var(--canvas); }

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-500);
  position: relative;
}
@media (min-width: 768px) {
  .footer-bottom { padding-top: 2rem; flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .72rem; }
}
.footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
@media (min-width: 768px) { .footer-bottom-links { gap: 1.75rem; } }

/* ----------  Reveal animations  ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .reveal { transform: translateY(32px); transition-duration: .95s; }
}
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
@media (min-width: 768px) {
  .reveal-delay-1 { transition-delay: .1s; }
  .reveal-delay-2 { transition-delay: .2s; }
  .reveal-delay-3 { transition-delay: .3s; }
  .reveal-delay-4 { transition-delay: .4s; }
}

/* Padding gegen abgeschnittene Unterlängen (overflow:hidden), per negativem
   Margin kompensiert -> Zeilenabstand kommt ausschließlich aus line-height
   (einheitlich, auch wenn eine Masken-Zeile intern umbricht). */
.mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: .2em;
  margin-bottom: -.2em;
  line-height: 1.1;
}
.mask-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
}
.mask-line.is-visible > span, .is-visible .mask-line > span { transform: translateY(0); }
.mask-line-1 > span { transition-delay: .05s; }
.mask-line-2 > span { transition-delay: .15s; }
.mask-line-3 > span { transition-delay: .25s; }
.mask-line-4 > span { transition-delay: .35s; }

.clip-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.6s var(--ease-out);
}
.clip-reveal.is-visible { clip-path: inset(0 0 0 0); }
.clip-reveal img { transform: scale(1.25); transition: transform 2.4s var(--ease-out); }
.clip-reveal.is-visible img { transform: scale(1); }

/* Wird per JS auf <main> gesetzt (NICHT auf body: aktive Animation auf dem body
   bricht in WebKit/iOS position:fixed der Body-Kinder — Bar/FAB/Banner/Drawer). */
.page-enter {
  opacity: 0;
  animation: pageEnter .9s var(--ease-out) .1s forwards;
}
@keyframes pageEnter { to { opacity: 1; } }

/* ----------  Floating Action Button — Kontakt  ---------- */
.fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .65rem;
  pointer-events: none;
}
.fab-btn { pointer-events: auto; }
.fab.is-open .fab-item { pointer-events: auto; }
@media (min-width: 768px) {
  .fab { right: 2rem; bottom: 2rem; }
}

.fab-menu {
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: .4rem;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04);
  min-width: 196px;
  opacity: 0;
  transform: translateY(10px) scale(.95);
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab-menu { visibility: hidden; }
.fab.is-open .fab-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}
.fab { transition: opacity .3s var(--ease), visibility 0s; }
.fab.is-hero-hidden { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
@media (max-width: 479px) {
  .fab-btn { padding: .85rem; }
  .fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}

.fab-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  color: var(--steel-200);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: -.01em;
  transition: background var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
}
.fab-item:hover {
  background: rgba(255,255,255,.07);
  color: var(--canvas);
}
.fab-item-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--brand-light);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fab-item:hover .fab-item-icon {
  background: rgba(var(--brand-light-rgb), .12);
  color: var(--brand-light);
}
.fab-item-icon svg { width: 17px; height: 17px; }

.fab-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  background: var(--brand);
  color: var(--canvas);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-brand);
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast), box-shadow var(--dur);
  white-space: nowrap;
}
.fab-btn:hover { background: var(--brand-deep); }
.fab-btn:active { transform: scale(.97); }
.fab.is-open .fab-btn {
  background: var(--steel-700);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.fab-btn-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.fab-btn .fab-icon-close { display: none; }
.fab.is-open .fab-btn .fab-icon-open  { display: none; }
.fab.is-open .fab-btn .fab-icon-close { display: block; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: width .12s linear;
}

/* Grain — disabled on mobile to save GPU */
.grain { display: none; }
@media (min-width: 768px) and (hover: hover) {
  .grain {
    position: fixed; inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
    background-size: 160px;
    display: block;
  }
}

/* Card shine — desktop only with hover */
@media (hover: hover) and (min-width: 768px) {
  .show-card::after, .app::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
    background-size: 250% 250%;
    background-position: 100% 0;
    transition: background-position 1.1s var(--ease-out);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
  }
  .show-card:hover::after, .app:hover::after { background-position: 0 100%; }
}

/* ----------  Contact cards (Kontakt-Seite)  ---------- */
.contact-card {
  padding: 1.5rem;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 480px) { .contact-card { padding: 2rem; } }
@media (min-width: 768px) { .contact-card { padding: 2.25rem; } }
.contact-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.contact-card-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-card-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-top: .75rem;
}
.contact-card h3 {
  font-size: 1.15rem;
  letter-spacing: -.02em;
  line-height: 1.35;
  margin-top: .5rem;
  word-break: break-word;
}
.contact-card.is-phone h3 { font-size: 1.4rem; }

/* ----------  Application link cards  ---------- */
.application-link-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  position: relative;
}
.application-link-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}
.application-link-card strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.application-link-card span {
  font-size: .82rem;
  color: var(--steel-600);
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.application-link-card svg.arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--brand);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
}
.application-link-card:hover svg.arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ----------  Gallery grid  ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  display: block;
}
@media (min-width: 768px) {
  .gallery-item { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,15,20,.82) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.1rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  border-radius: inherit;
}
@media (min-width: 768px) { .gallery-item-overlay { padding: 1.4rem; } }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--canvas);
  font-weight: 500;
}
.gallery-item-overlay svg { color: var(--brand-light); flex-shrink: 0; }

/* ----------  FAQ Accordion  ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.4;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast);
}
@media (min-width: 768px) {
  .faq-item summary { font-size: 1.075rem; padding: 1.4rem 0; }
}
.faq-item summary::-webkit-details-marker,
.faq-item summary::marker { display: none; content: ""; }
.faq-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--steel-100);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur);
  color: var(--steel-500);
}
@media (min-width: 768px) { .faq-icon { width: 32px; height: 32px; } }
.faq-icon svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.faq-item[open] summary { color: var(--brand-deep); }
.faq-item[open] .faq-icon {
  background: var(--brand-tint);
  color: var(--brand);
  transform: rotate(45deg);
}
.faq-answer {
  padding-bottom: 1.5rem;
  color: var(--steel-600);
  line-height: 1.7;
  max-width: 72ch;
  font-size: .95rem;
}
@media (min-width: 768px) { .faq-answer { font-size: 1rem; padding-bottom: 1.75rem; } }

/* ----------  Utilities  ---------- */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.divider { height: 1px; background: var(--line); margin: 2.5rem 0; }
@media (min-width: 768px) { .divider { margin: 4rem 0; } }
@media (min-width: 1024px) { .divider { margin: 5rem 0; } }
.section-dark .divider { background: var(--line-dark); }
.mono { font-family: var(--font-mono); font-size: .85em; letter-spacing: .04em; }

/* ----------  Prose / Legal  ---------- */
.prose { max-width: 720px; }
/* h2 und h3 bewusst identisch: die Rechtsseiten nutzen h2 als Abschnittsebene direkt
   unter der h1 (kein Heading-Sprung, a11y), sollen optisch aber unveraendert bleiben. */
.prose h2, .prose h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.08; margin-top: 2.5rem; margin-bottom: .75rem; color: var(--ink); letter-spacing: -.01em; }
.prose h4 { font-size: 1rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: .5rem; color: var(--ink); }
.prose p { margin-bottom: 1rem; color: var(--steel-700); line-height: 1.75; }
.prose ul, .prose ol { margin: .5rem 0 1rem 1.25rem; }
.prose ul li, .prose ol li { color: var(--steel-700); line-height: 1.7; margin-bottom: .35rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
/* Blueprint-Prinzip: Auf hellem Grund trägt Navy die Farbe, --brand-light die Linie.
   --brand-light als Textfarbe wäre hier unlesbar (2,02:1), als Unterstreichung neben
   13:1-Text ist es dagegen genau der Akzent, den die dunkle Marke sonst verliert.
   Beim Hover verdichtet sich die Linie zu Navy, statt dass der Text die Farbe wechselt. */
.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--brand-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover,
.prose a:focus-visible { text-decoration-color: var(--brand); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose address { font-style: normal; color: var(--steel-700); line-height: 1.7; margin-bottom: 1rem; }
.prose .legal-meta { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--steel-600); margin-bottom: 2.5rem; }

/* <picture> als Layout-neutraler Wrapper: sonst bezieht sich img{height:100%} auf das
   inline-picture statt auf den Bildrahmen -> Leerflächen unter Bildern (G-18). */
.media-frame picture, .gallery-item picture, .news-card-image picture,
.maschine-card-img picture, .nav-brand picture, .footer-brand picture { display: contents; }

/* Druck-Kopf nur im Druck */
.print-header { display: none; }

/* A11y */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  padding: .75rem 1.25rem; background: var(--ink); color: var(--canvas); border-radius: 8px;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* Auf dunklem Grund wäre Navy als Fokusring praktisch unsichtbar (1,47:1 gegen --ink) —
   mit dem früheren Teal waren es noch 3,83:1. Dort übernimmt --brand-light mit 9,53:1.
   Ohne diese Umkehr wäre die Tastaturbedienung auf allen dunklen Sektionen, im Footer,
   im Cookie-Banner und auf den Seiten-Heroes faktisch blind. */
.hero :focus-visible,
.section-dark :focus-visible,
.page-hero :focus-visible,
.footer :focus-visible,
.cookie-banner :focus-visible,
.err-page :focus-visible { outline-color: var(--brand-light); }

/* ----------  Mobile Sticky CTA Bar (nur kontakt.html)  ---------- */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .75rem var(--gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: .65rem;
}
.mobile-cta-bar .btn { flex: 1; justify-content: center; font-size: .875rem; }
.mobile-cta-bar .btn-ghost {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.2);
  background: transparent;
}
.mobile-cta-bar .btn-ghost:hover {
  background: rgba(255,255,255,.08);
  color: var(--canvas);
  border-color: rgba(255,255,255,.35);
}
@media (min-width: 1024px) {
  .mobile-cta-bar { display: none; }
}

/* ----------  WhatsApp contact-card icon variant  ---------- */
.contact-card-icon.is-whatsapp {
  background: rgba(37,211,102,.1);
  color: #25D366;
}

/* ----------  Footer Social Links  ---------- */
.footer-social {
  display: flex;
  gap: .65rem;
  margin-top: 1.25rem;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  color: var(--steel-300);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  font-size: 0;
}
.footer-social a:hover {
  background: var(--brand);
  color: var(--canvas);
  border-color: var(--brand);
}
.footer-social svg { width: 16px; height: 16px; }

/* ----------  Machine Wizard  ---------- */
.wizard-inline {
  background: var(--ink-2); border-radius: var(--radius-xl);
  padding: 1.25rem 1.25rem; overflow: hidden;
}
@media (min-width: 480px) {
  .wizard-inline { padding: 1.5rem 1.75rem; }
}
.wizard-progress { display: flex; gap: .45rem; align-items: center; }
.wizard-pdot {
  width: 28px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.12);
  transition: background var(--dur-fast);
}
.wizard-pdot.is-active { background: var(--brand-light); }
.wizard-pdot.is-done  { background: var(--brand); }
.wizard-viewport {
  overflow: hidden;
  /* No transform here — on iOS Safari, transform on a child causes it to
     use the parent's padding-box width instead of content-box width,
     making the panes 40px too wide and clipping the right column */
}
.wizard-track {
  display: flex;
  align-items: flex-start;
  transition: transform 480ms cubic-bezier(.4,0,.2,1);
  /* will-change promotes the track to its own compositing layer, which is
     sufficient for smooth animation without needing transform on the parent */
  will-change: transform;
}
.wizard-pane {
  /* flex: 0 0 100% is more reliable than min-width:100% + flex-shrink:0 in all browsers */
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-top: .25rem;
  padding-bottom: .75rem;
  will-change: opacity;
}
.wizard-q { font-size: 1.0625rem; font-weight: 600; color: var(--canvas); margin-bottom: .3rem; }
.wizard-hint { font-size: .8375rem; color: var(--steel-400); margin-bottom: 1rem; }
.wizard-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
@media (min-width: 480px) { .wizard-opts { gap: .65rem; } }
@media (min-width: 640px) { .wizard-opts { grid-template-columns: repeat(4, 1fr); } }
.wizard-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: .8rem .85rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  color: var(--steel-200); font: inherit; font-size: .875rem; font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 480px) { .wizard-opt { padding: .9rem 1rem; } }
.wizard-opt:hover  { background: rgba(255,255,255,.08); border-color: var(--brand-light); color: var(--canvas); }
.wizard-opt:active { background: rgba(255,255,255,.12); border-color: var(--brand-light); color: var(--canvas); }
.wizard-opt-icon { color: var(--brand-light); flex-shrink: 0; }
.wizard-opt-title { font-weight: 600; color: inherit; }
.wizard-opt-desc { font-size: .78rem; color: var(--steel-400); line-height: 1.4; }
.wizard-back {
  background: none; border: 0; padding: .6rem 0; margin-bottom: .75rem;
  color: var(--steel-500); font: inherit; font-size: .8375rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
  transition: color var(--dur-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wizard-back:hover, .wizard-back:active { color: var(--steel-300); }
.wizard-rcards { display: grid; gap: .75rem; }
@media (min-width: 480px) { .wizard-rcards { gap: .85rem; } }
@media (min-width: 560px) { .wizard-rcards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.wizard-rcard {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
@media (min-width: 480px) { .wizard-rcard { padding: 1.1rem 1.25rem; } }
.wizard-rcard-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-light); background: rgba(var(--brand-light-rgb), .1);
  border-radius: 4px; padding: .2rem .5rem; align-self: flex-start;
}
.wizard-rcard-name { font-size: 1rem; font-weight: 700; color: var(--canvas); }
.wizard-rcard-desc { font-size: .8125rem; color: var(--steel-300); line-height: 1.5; }
.wizard-rcard-cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  color: var(--brand-light); font-size: .8125rem; font-weight: 500; text-decoration: none;
  min-height: 36px;
  transition: color var(--dur-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wizard-rcard-cta:hover, .wizard-rcard-cta:active { color: var(--canvas); }
.wizard-rcard-link {
  display: inline-flex; align-items: center; margin-top: .1rem; margin-bottom: .1rem;
  color: var(--steel-400); font-size: .775rem; font-weight: 500; text-decoration: none;
  transition: color var(--dur-fast);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.wizard-rcard-link:hover, .wizard-rcard-link:active { color: var(--brand-light); }
.wizard-restart {
  background: none; border: 0; padding: .5rem 0; margin-top: 1rem;
  color: var(--steel-500); font: inherit; font-size: .8125rem; cursor: pointer;
  display: inline-flex; align-items: center;
  min-height: 44px;
  transition: color var(--dur-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wizard-restart:hover, .wizard-restart:active { color: var(--steel-300); }

/* ----------  Availability Badges  ---------- */
.avail-notice {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.2);
  border-radius: 999px; padding: .4rem 1rem;
  font-size: .8125rem; font-weight: 500; color: #166534;
  margin-bottom: 1.5rem;
}
.avail-notice .avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); flex-shrink: 0;
}
.avail-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .22rem .6rem; border-radius: 999px; margin-bottom: .5rem;
}
.avail-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.avail-badge.is-green { background: rgba(34,197,94,.1); color: #15803D; border: 1px solid rgba(34,197,94,.3); }
.avail-badge.is-green::before { background: #22c55e; }
.avail-badge.is-amber { background: rgba(245,158,11,.1); color: var(--accent-deep); border: 1px solid rgba(245,158,11,.3); }
.avail-badge.is-amber::before { background: #f59e0b; }

/* ----------  ROI Rechner  ---------- */
.roi-section { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roi-inputs { display: grid; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 560px) { .roi-inputs { grid-template-columns: 1fr 1fr; } }
.roi-field label {
  display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--steel-600); margin-bottom: .6rem;
}
.roi-slider { width: 100%; accent-color: var(--brand); cursor: pointer; margin-bottom: .35rem; }
.roi-days-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--steel-600); }
.roi-days-row strong { font-size: .9rem; color: var(--ink); font-weight: 700; }
.roi-select {
  width: 100%; padding: .65rem .9rem; padding-right: 2.25rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center / 16px;
  color: var(--ink); font: inherit; font-size: .9375rem; appearance: none; cursor: pointer;
  transition: border-color var(--dur-fast);
}
.roi-select:focus { border-color: var(--brand); outline: none; }
.roi-comparison {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0; align-items: stretch;
  background: var(--canvas); border: 1.5px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden;
  margin-bottom: 1.25rem;
}
.roi-col { text-align: center; padding: 1.5rem 1.25rem; }
.roi-col-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--steel-600); margin-bottom: .5rem;
}
.roi-amount { font-size: 1.75rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; transition: color var(--dur); }
.roi-amount.is-winner { color: var(--brand); }
.roi-col-sub { font-size: .75rem; color: var(--steel-600); margin-top: .3rem; line-height: 1.4; }
.roi-vs {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem .75rem; background: var(--paper-2);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--steel-600);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
@media (max-width: 520px) {
  .roi-comparison { grid-template-columns: 1fr; }
  .roi-vs {
    padding: .65rem 1.25rem; text-align: center;
    border-left: none; border-right: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .roi-col { padding: 1.25rem 1rem; }
  .roi-amount { font-size: 1.5rem; }
}
.roi-verdict {
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.roi-verdict.is-buy { background: rgba(var(--brand-rgb), .07); border: 1px solid rgba(var(--brand-rgb), .2); }
.roi-verdict.is-rent { background: rgba(var(--brand-light-rgb), .05); border: 1px solid rgba(var(--brand-light-rgb), .15); }
.roi-verdict-msg { font-size: .9rem; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }
@media (max-width: 559px) {
  .roi-verdict { flex-direction: column; align-items: stretch; }
  .roi-verdict-msg { flex: none; }
  .roi-verdict .btn { width: 100%; justify-content: center; }
}
.roi-disclaimer { font-size: .72rem; color: #525c6e; line-height: 1.6; text-align: center; }

/* ----------  Cookie Consent Banner  ---------- */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 8000;
  padding: 1rem var(--gutter);
  background: var(--steel-900);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  transform: translateY(110%);
  pointer-events: none;
  transition: transform .45s var(--ease);
}
.cookie-banner { visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
.cookie-banner.is-visible { transform: translateY(0); pointer-events: auto; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.cookie-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1; min-width: 240px; }
.cookie-banner-title {
  display: block;
  color: var(--canvas);
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: .3rem;
}
.cookie-banner-body { color: var(--steel-300); font-size: .8125rem; line-height: 1.6; }
.cookie-banner-body a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-btn {
  padding: .6rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cookie-btn-decline {
  background: transparent;
  color: var(--steel-200);
  border-color: rgba(255,255,255,.18);
}
.cookie-btn-decline:hover { background: rgba(255,255,255,.07); color: var(--canvas); border-color: rgba(255,255,255,.28); }
.cookie-btn-accept { background: var(--brand); color: var(--canvas); }
.cookie-btn-accept:hover { background: var(--brand-deep); }
.footer-consent-btn {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  opacity: .65;
  transition: opacity var(--dur-fast);
}
.footer-consent-btn:hover { opacity: 1; }
@media (max-width: 599px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: .85rem; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ----------  Print  ---------- */
@media print {
  .topbar, .nav, .mobile-nav, .nav-cta, .hero-actions,
  .cta-block, .gallery-grid, .apps > :nth-child(n+4),
  .btn, [data-form], .footer-grid, .footer-bottom-links,
  .page-hero-bg, .quote::before, .process::after,
  .mobile-cta-bar, .footer-social, .fab, .cookie-banner, .scroll-top { display: none !important; }

  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

  body { font-size: 10pt; font-family: "Inter", Arial, sans-serif; }
  h1, h2, h3, .serif-italic { font-family: "Inter", Arial, sans-serif !important; font-style: normal !important; }
  .print-header { display: flex !important; align-items: center; gap: .6cm; padding-bottom: .3cm; margin-bottom: .2cm; border-bottom: 1px solid #999; font-size: 8pt; }
  .print-header img { height: 1cm; width: auto; }
  .breadcrumbs, .scroll-progress, .grain, .btn-link, .faq-icon, .media-frame .tag,
  #anwendungen-maschine, .application-link-card, .hero-gauge, .hero-dots, .hero-motion { display: none !important; }
  .reveal, .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .mask-line > span { transform: none !important; }
  .spec-table, .faq-item, .spec-table tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .container { max-width: 100%; padding: 0; }

  .page-hero { min-height: auto; padding: 1cm 0 .5cm; border-bottom: 2px solid #000; margin-bottom: .8cm; }
  .page-hero h1 { font-size: 22pt; letter-spacing: -.02em; }
  .page-hero p { font-size: 11pt; }

  h2 { font-size: 15pt; margin-top: 1cm; }
  h3 { font-size: 12pt; margin-top: .6cm; }
  p, li { font-size: 10pt; line-height: 1.55; }

  .spec-table { width: 100%; border-collapse: collapse; margin: .5cm 0; }
  .spec-table th, .spec-table td { border: 1px solid #bbb; padding: .25cm .4cm; font-size: 9pt; text-align: left; }
  .spec-table th { background: #eee !important; font-weight: 700; }

  .section, .section-dark { padding: .6cm 0 !important; background: transparent !important; }
  .split { display: block; }
  .media-frame { aspect-ratio: auto !important; box-shadow: none !important; max-height: 8cm; margin-bottom: .4cm; }
  .media-frame img { max-height: 8cm; width: auto !important; height: auto !important; object-fit: contain; transform: none !important; }
  .spec-list li { border: none; padding: .2cm 0; }
  .spec-list li .num { display: none; }
  .spec-list.is-kerf li::before { display: none; }
  .spec-list.is-kerf li .spec-kicker { color: #000; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: .4cm; }

  a[href]::after { content: none; }

  main::after {
    content: "Lingener Baumaschinen GmbH & Co. KG · Diekstrasse 59 · 49809 Lingen (Ems) · Tel. +49 (0) 591 76 314 · info@lingener-baumaschinen.de · lingener-baumaschinen.de";
    display: block;
    margin-top: 1cm;
    padding-top: .4cm;
    border-top: 1px solid #999;
    font-size: 8pt;
    color: #555 !important;
  }

  @page { margin: 1.5cm 1.8cm; }
}

/* === LANGUAGE SWITCH === */
.lang-switch {
  display: flex;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  padding: .26rem .52rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #666;
  text-decoration: none;
  border-radius: calc(var(--radius) - 2px);
  transition: background var(--dur-fast), color var(--dur-fast);
  line-height: 1;
}
.lang-btn:hover { color: #111; background: rgba(0,0,0,.07); }
.lang-btn.is-active { background: #111; color: #fff; pointer-events: none; }

.mobile-lang-switch {
  display: flex;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
  margin-top: .5rem;
  align-self: flex-start;
}

/* ===  Scroll-to-top button  === */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 9200;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--canvas);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background var(--dur-fast);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
@media (min-width: 768px) {
  .scroll-top { right: 2rem; bottom: 6.5rem; }
}
.scroll-top { visibility: hidden; }
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
.scroll-top:hover { background: var(--brand-deep); }
.scroll-top svg { width: 18px; height: 18px; }

/* ===  Maschinen-Karten (Listing) === */
.maschinen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.mf-tab {
  padding: .35rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.mf-tab:hover { border-color: var(--ink); color: var(--ink); }
.mf-tab.is-active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.maschinen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .maschinen-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.maschine-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--canvas);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.maschine-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.maschine-card.is-hidden { display: none; }

.maschine-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--steel-50);
}
.maschine-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.maschine-card:hover .maschine-card-img img { transform: scale(1.04); }

.maschine-card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .3rem;
}
.maschine-card-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand); /* a11y: --brand-light auf weißer Karte reicht nicht — früher #5EEAD4 mit 1,46:1, heute #6EC1E4 mit 2,02:1. Beides weit unter AA. */
}
.maschine-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.maschine-card-sub {
  font-size: .82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}
.maschine-card-badge {
  display: inline-block;
  margin-top: .5rem;
  padding: .2rem .6rem;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 99px;
  align-self: flex-start;
}
/* a11y: dunklere Textfarben, damit alle Badges ≥ 4.5:1 erreichen */
.maschine-card-badge.badge-neu { background: rgba(16,185,129,.14); color: #05603a; }
.maschine-card-badge.badge-gebraucht { background: rgba(234,179,8,.14); color: #7a4a06; }
.maschine-card-badge.badge-vorfuehrmaschine { background: rgba(59,130,246,.14); color: #1e40af; }

/* ── Opening Hours ─────────────────────────────────────────────────── */
.opening-hours {
  display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.25rem 1.25rem; background: var(--steel-900);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
}
@media (min-width: 600px) {
  .opening-hours { gap: 2rem; padding: 1.75rem 2rem; }
}
.opening-hours-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-light); white-space: nowrap; margin: 0; padding-top: .15rem;
}
.opening-hours-grid {
  display: grid; grid-template-columns: auto auto; gap: .3rem 1.25rem; margin: 0;
}
@media (min-width: 600px) { .opening-hours-grid { gap: .3rem 2rem; } }
.opening-hours-grid dt {
  font-size: .875rem; color: var(--steel-200); font-weight: 500;
}
.opening-hours-grid dd {
  font-size: .875rem; color: var(--canvas); font-weight: 400; margin: 0;
}
.opening-hours-grid dt.is-closed,
.opening-hours-grid dd.is-closed { color: var(--steel-400); }

/* ----------  Mobile-first refinements  ---------- */

/* Grid-3 at tablet (768px) — fills in the gap between 600px and 960px */
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Body bottom padding when the fixed mobile-cta-bar is present (contact page) */
@media (max-width: 1023px) {
  body:has(.mobile-cta-bar) .footer {
    padding-bottom: calc(1rem + 76px);
  }
}

/* Wizard result cards — tighter min-width on narrow mobile */
@media (max-width: 559px) {
  .wizard-rcards { grid-template-columns: 1fr; }
}

/* Footer grid — reduce margin-bottom on mobile */
@media (max-width: 599px) {
  .footer-grid { margin-bottom: 1rem; gap: 2rem; }
}

/* Hero actions — ensure buttons don't overflow at 320px */
@media (max-width: 374px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Team page ---- */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--steel-800);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--steel-500);
}
.img-placeholder-icon { opacity: .4; }
.img-placeholder-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
  line-height: 1.5;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }

.team-card {
  background: var(--steel-900);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--steel-800);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.team-card-photo {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--steel-800);
  color: var(--steel-600);
}
.team-card-photo svg { opacity: .35; }
.team-card-photo-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.team-card-body { padding: 1rem; }
.team-card-name {
  font-weight: 600;
  color: var(--canvas);
  font-size: .9rem;
  line-height: 1.3;
}
.team-card-role {
  color: var(--brand-light);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .3rem;
}

/* ---- Mockup-Beispielfotos (Team) ----
   TEMPORÄR: nur für die KI-Beispielbilder. Vor dem Go-Live mit echten Fotos
   entfernen — siehe team.njk (noindex + .mockup-badge). */
.team-card-photo { position: relative; }
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mockup-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--accent);
  color: var(--ink);
  padding: .25rem .45rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.media-frame .mockup-badge {
  top: .85rem;
  left: .85rem;
  font-size: .62rem;
  padding: .3rem .6rem;
}

.team-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.team-facts li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: .9rem;
  line-height: 1.4;
}
.team-facts-key {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-600);
  white-space: nowrap;
  min-width: 9rem;
}
.team-facts-val { color: var(--ink); font-weight: 500; }

.team-quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  padding-left: 1.5rem;
  margin: 0;
}
.team-quote em { font-style: italic; color: var(--brand); }