/* ============================================================
   Black4st — site.css: Komponenten + Layout der gesamten Site.
   Baut auf styles/tokens.css (Design-Tokens) auf — Kette:
   Brandbook → tokens.css → site.css → HTML/JS.
   Ein Kupfer-Akzent für AKTION; Wärme nur in Akzent & Licht.
   ============================================================ */

:root {
  /* --- warm graphite grounds (Heritage Precision) --- */
  --b4-black:        #050404;   /* hero cinematic stage — deepest surface */
  --b4-ink:          #090808;   /* page ground — deep neutral graphite */
  --b4-ink-2:        #0E0D0C;   /* alternating sections */
  /* #3 — cool gunmetal: a sparing tonal companion (steel vs brass), ONLY on technical blocks */
  --b4-steel:        #15181B;
  /* --- warm hairlines & card fills --- */
  --b4-line:         rgba(255,248,236,0.07);
  --b4-line-strong:  rgba(255,248,236,0.14);
  --b4-card:         rgba(255,248,236,0.028);
  --b4-card-hover:   rgba(255,248,236,0.055);
  /* --- scan signature — warm copper-amber (atmosphere ONLY, echoes the logo hue) --- */
  --b4-blue:         #E0925A;
  --b4-violet:       #B85C28;
  --scan-core:       #FBE6CF;   /* luminous warm cream core of the morph scan beam */
  /* --- warm dark glass --- */
  --glass-rgb:       16 13 9;
  /* --- layout --- */
  --b4-maxw:         1240px;
  --b4-pad:          clamp(20px, 5vw, 64px);
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  /* motion tokens (#5) — ONE easing, four deliberate durations */
  --mo-0:            110ms;   /* direkt: Rückmeldung unter dem Zeiger */
  --mo-1:            200ms;   /* micro: colour / opacity */
  --mo-2:            360ms;   /* standard: hover / transform */
  --mo-3:            600ms;   /* deliberate: large reveals */

  /* unify with the design-system tokens so every grey has ONE value (no drift) */
  --color-bg:             var(--b4-ink);
  --color-border-subtle:  var(--b4-line);
  --color-surface-subtle: var(--b4-card);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--b4-ink);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--color-accent); color: var(--color-text-on-accent); }

.wrap { max-width: var(--b4-maxw); margin: 0 auto; padding-inline: var(--b4-pad); }

/* Display utility — Plex Sans caps headlines, tightened tracking for premium sharpness */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--color-text);
  margin: 0;
}
/* LABEL family — small uppercase eyebrow / heading labels (IBM Plex Sans, NOT mono — mono is reserved for numbers).
   shared base; each member sets only its own weight / size / tracking / color. */
.kicker, .eyebrow, .rail-head, .feature-group, .hero-fullname {
  font-family: var(--font-body); text-transform: uppercase;
}
.kicker, .hero-fullname {
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: var(--fs-xs);
  color: var(--color-accent);
}
/* metrology eyebrow — mono technical label with a leading dimension-corner tick (engineering-drawing motif) */
.kicker {
  font-family: var(--font-mono); font-weight: 600;
  letter-spacing: 0.12em;
}
.kicker::before {
  content: ''; display: inline-block; vertical-align: middle; margin-right: 1.05em;
  width: 16px; height: 5px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  opacity: 0.9;
}
.eyebrow {
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
/* Einleitungsabsatz — trägt KEINE eigene Größe und keine eigene Farbe mehr (Textkonzept:
   eine Größe, eine Farbe). Er wirkt durch seine Stellung, nicht durch Schriftgrad. */
.lede { max-width: 68ch; }

/* ============================================================
   Buttons — elevated
   ============================================================ */
/* Die Absende-Schaltflächen von Plugin-Formularen sind mitgenannt (`input[type="submit"]`,
   `button[type="submit"]`). Ohne das zeichnet der Browser sie als System-Button: Arial,
   grau, 2px outset — gemessen im Kontaktformular von Contact Form 7 und im Suchformular.
   Wer eine eigene Button-Klasse mitbringt (`.btn`, WooCommerce' `.button`), behält sie. */
.btn,
input[type="submit"]:not(.btn):not(.button),
button[type="submit"]:not(.btn):not(.button) {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--fs-sm); text-decoration: none;
  border-radius: var(--radius-btn); cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--mo-2) var(--ease), background var(--mo-1) ease, border-color var(--mo-1) ease, box-shadow var(--mo-2) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary,
input[type="submit"]:not(.btn):not(.button),
button[type="submit"]:not(.btn):not(.button) {
  background: var(--color-accent-bright); color: var(--color-text-on-accent);
  padding: var(--space-xs) var(--space-xl);
  box-shadow: 0 6px 22px -8px rgb(var(--accent-bright-rgb) / 0.7);
}
.btn-primary:hover,
input[type="submit"]:not(.btn):not(.button):hover,
button[type="submit"]:not(.btn):not(.button):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px var(--accent-glow);
}
.btn-primary:active,
input[type="submit"]:not(.btn):not(.button):active,
button[type="submit"]:not(.btn):not(.button):active { transform: translateY(0); }

/* Aus-Zustand.

   Er fehlte im Entwurf, weil dort kein Button je abgeschaltet war. Im Shop passiert das
   sehr wohl: Das Captcha-Plugin sperrt den Absendeknopf des Kontaktformulars, bis die
   Prüfung gelöst ist. Mit der allgemeinen Feldregel (`input:disabled { opacity: 0.5 }`)
   ergab das eine halbdurchsichtige Kupferfläche über schwarzem Grund — ein trübes Braun,
   das nach Darstellungsfehler aussieht statt nach „noch nicht bereit".

   Deshalb ein eigener Zustand: neutrale Fläche, gedämpfte Schrift, voll deckend. Der
   Schlagschatten fällt weg — ein Leuchten unter einer toten Schaltfläche ist ein
   Widerspruch.

   Die `:not()`-Klammern stehen hier mit, obwohl sie inhaltlich nichts ausschließen: Ohne
   sie ist diese Regel (0,2,1) schwächer als die Aktiv-Regel darüber (0,3,1) und der
   Kupfergrund bliebe stehen. Gleiche Klammern, gleiche Spezifität — dann entscheidet die
   Reihenfolge, und die stimmt. */
.btn:disabled, .btn[aria-disabled="true"],
input[type="submit"]:not(.btn):not(.button):disabled,
input[type="button"]:not(.btn):not(.button):disabled,
button[type="submit"]:not(.btn):not(.button):disabled,
button:disabled {
  background: var(--b4-card);
  color: var(--color-text-muted);
  border-color: var(--b4-line);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

.btn:disabled:hover, .btn[aria-disabled="true"]:hover,
input[type="submit"]:not(.btn):not(.button):disabled:hover,
button[type="submit"]:not(.btn):not(.button):disabled:hover,
button:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--b4-card);
}
.btn-skeleton {
  background: var(--accent-faint); color: var(--color-accent);
  border-color: var(--color-accent);
  padding: var(--space-xs) var(--space-lg);
}
.btn-skeleton:hover {
  background: var(--accent-fill); border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -14px var(--accent-glow);
}
.btn-sm { padding: var(--space-xs) var(--space-lg); font-size: var(--fs-nav); }

/* ============================================================
   Top USP strip — slim, scrolls away
   ============================================================ */
.usp-strip {
  background: var(--b4-black); color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255,248,236,0.12);
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-2xs); letter-spacing: 0.18em;
}
.usp-strip .wrap {
  display: flex; justify-content: center; align-items: center;
  gap: 0; height: 30px; flex-wrap: wrap;
}
.usp-strip span { display: inline-flex; align-items: center; gap: 0.6em; padding: 0 clamp(14px, 3vw, 34px); position: relative; }
/* thin hairline separators between items — quiet, no full fill */
.usp-strip span + span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--b4-line-strong);
}
.usp-strip svg { width: 12px; height: 12px; color: var(--color-accent); opacity: 0.95; }

/* ============================================================
   Header — sticky, transparent over hero → solid on scroll
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  /* clearly a nav bar from the start: solid-ish warm graphite + a visible divider */
  background: rgb(var(--glass-rgb) / 0.82);
  -webkit-backdrop-filter: saturate(135%) blur(12px);
  backdrop-filter: saturate(135%) blur(12px);
  border-bottom: 1px solid rgba(255,248,236,0.12);
}
.site-header.solid {
  background: rgb(var(--glass-rgb) / 0.97);
  border-bottom-color: rgba(255,248,236,0.22);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.8);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; padding-bottom: var(--space-xs); box-sizing: border-box; gap: var(--space-xl);
}
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.main-nav { display: flex; align-items: center; gap: var(--space-xl); }
.main-nav a {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-nav); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text); text-decoration: none; opacity: 0.8;
  transition: opacity 200ms ease;
  position: relative; padding: var(--space-2xs) 0;
  display: inline-flex; align-items: center; white-space: nowrap;
  flex: 0 0 auto;
}
/* the marker: a precise 2px BRIGHT-copper underline beneath the acronym (machined tab indicator) */
.main-nav a::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 3px); height: 2px; width: auto;
  border-radius: var(--radius-hair); background: var(--color-accent-bright);
  box-shadow: 0 0 8px rgb(var(--accent-bright-rgb) / 0.45);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform var(--mo-2) var(--ease), opacity var(--mo-1) ease;
}
.main-nav a:hover, .main-nav a:focus-visible, .nav-item.active { opacity: 1; outline: none; }
/* idle: the active section shows its marker */
.nav-item.active::before { transform: scaleX(1); opacity: 1; }
/* pointer over the nav: suppress the active marker unless it is itself hovered/focused */
.main-nav:hover .nav-item.active:not(:hover):not(:focus-visible)::before { transform: scaleX(0); opacity: 0; }
/* the hovered/focused item's marker wins */
.main-nav a:hover::before,
.main-nav a:focus-visible::before { transform: scaleX(1); opacity: 1; }

/* --- self-explaining nav: the clarifying full name sits BELOW the code, left-aligned ---
   only ONE shows at a time: the active section while idle; only the hovered item while
   the pointer is over the header (everything else suppressed). */
.ni-code {
  display: inline-block;
  transition: color 220ms ease;
}
.ni-name {
  position: absolute; top: calc(100% + 3px); left: 0;
  white-space: nowrap; text-transform: none;
  font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.01em; line-height: 1;
  color: var(--color-text); pointer-events: none;
  opacity: 0; transform: translateY(-5px);
  transition: opacity 280ms ease, transform 400ms var(--ease);
}
/* idle: die aktive Familie steht AUFGEKLAPPT — Farbe, Machined Underline und die
   Klartext-Unterzeile (.ni-name) dauerhaft (Betreiber, 2026-08-21; ersetzt die
   frühere Entscheidung „Header im Ruhezustand einzeilig"). Fährt der Zeiger über
   die Navigation, gilt weiter: nur ein Name zugleich — der aktive weicht dem
   gehoverten (dieselbe Unterdrückung wie beim Unterstrich). */
.nav-item.active .ni-code { color: var(--color-text); }
.nav-item.active .ni-name { opacity: 0.95; transform: translateY(0); }
.main-nav:hover .nav-item.active:not(:hover):not(:focus-visible) .ni-name { opacity: 0; transform: translateY(-5px); }
/* the hovered/focused item shows its name + orange acronym */
.main-nav a:hover .ni-name,
.main-nav a:focus-visible .ni-name { opacity: 0.95; transform: translateY(0); }
.main-nav a:hover .ni-code,
.main-nav a:focus-visible .ni-code { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) {
  .ni-name { transition: opacity 200ms ease; transform: none; }
  .nav-item.active .ni-name,
  .main-nav:hover .nav-item.active:not(:hover):not(:focus-visible) .ni-name { transform: none; }
}
.header-actions { display: flex; align-items: center; gap: var(--space-2xs); }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  background: transparent; border: none; color: var(--color-text);
  border-radius: var(--radius-card); cursor: pointer; position: relative;
  transition: background 180ms ease, color 180ms ease;
}
.icon-btn:hover { background: var(--b4-card-hover); color: var(--color-accent-soft); }
.icon-btn svg { width: 19px; height: 19px; }
.cart-badge {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px;
  background: var(--color-accent); color: var(--color-text-on-accent);
  border-radius: var(--radius-card); font-size: var(--fs-2xs); font-weight: 700;
  display: grid; place-items: center; padding: 0 var(--space-2xs);
}
.nav-buy { margin-left: var(--space-xs); }

/* ============================================================
   HERO — pure black, product floats, scan-reveal slider
   ============================================================ */
.hero {
  position: relative; background: var(--b4-black);
  height: calc(100svh - 106px); min-height: min(580px, calc(100svh - 106px));
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
/* (Atmosphären-Pool entfernt — er addierte sich zum Bühnen-Glow und machte den
   App-Halo lauter als das Intro; es gilt allein das eine Bühnen-Lichtrezept) */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
/* faint top scrim sits BEHIND the hero content so it never mutes the orange title */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 22%,
    rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: 1;
}
.hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3vh, 40px); padding: 24px var(--b4-pad) 56px;
  width: 100%; max-width: 1340px; margin: 0 auto;
}

/* hero body: product (left) + variant gallery (right), gallery spans full height, top-flush with the title */
@property --rail-w {
  syntax: "<length>"; inherits: true; initial-value: 0px;
}
@property --stock-w {
  syntax: "<length>"; inherits: true; initial-value: 0px;
}
@property --rscale {
  syntax: "<number>"; inherits: true; initial-value: 1;
}
@property --rty {
  syntax: "<length-percentage>"; inherits: true; initial-value: 0%;
}
@property --rshx {
  syntax: "<length>"; inherits: true; initial-value: 0px;
}
.hero-body {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: 1320px; margin: 0 auto;
  display: grid;
  --rail-w: 0px; --stock-w: 0px;
  grid-template-columns: var(--stock-w) minmax(0, 1fr) var(--rail-w);
  align-items: stretch; column-gap: 0;
  padding: clamp(12px, 2.4vh, 30px) var(--b4-pad) clamp(12px, 1.8vh, 24px);
  transition: --rail-w 1700ms var(--ease), --stock-w 1700ms var(--ease);
}
/* columns are open from first paint so the product's LAYOUT size is stable;
   the intro shrink is then a pure compositor transform (no per-frame reflow = smooth).
   the side gaps live inside each rail's padding, so a collapsed rail leaves no empty gap */
.hero.cols-open .hero-body {
  --rail-w: clamp(244px, 18vw, 300px);
  --stock-w: clamp(238px, 17.5vw, 296px);
}
.hero-left {
  min-width: 0; display: flex; flex-direction: column;
}
.hero-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
}
/* NUR im Desktop-Layout (Bühne höhenfixiert, overflow hidden — mobil ist sie ab 900px
   height:auto und schneidet nie): flex-basis 0 statt auto — die Stage bekommt den
   Restraum der Bühne, statt mit ihrem Inhalt zu wachsen; nur so ist 100cqh die WIRKLICH
   verfügbare Höhe. container-type: size macht sie zum Bezug für die cqh-Klausel des
   .reveal. padding-bottom: Bodenluft für den Kontaktschatten (.reveal::before,
   bottom -4%). Betreiber-Befund 2026-08-26: Produktbild bei 1280×780 unten 16 px hart
   abgeschnitten; mit flex-basis 0 OHNE die Media-Grenze kollabierte die Stage mobil
   auf 0 — das Bild verschwand ganz (gemessen bei 390×844). */
@media (min-width: 901px) {
  .hero-stage {
    flex: 1 1 0;
    container-type: size;
    padding-bottom: var(--space-md);
  }
}
/* Licht & Tiefe: identisches Bühnen-Rezept wie die Content-Stages (.principle-media) —
   zentrierter Kupfer-Glow + Vignette; der Seitengrund (--b4-black) liegt im .hero darunter */
.hero-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(122% 108% at 50% 38%, transparent 48%, rgba(0,0,0,0.6)),
    radial-gradient(58% 64% at 50% 50%, rgb(var(--accent-rgb) / 0.11), transparent 74%);
}
/* Bodenkontakt wie auf den Content-Bühnen: weicher Kontaktschatten erdet das Produkt.
   In der App füllen die Produktbilder den Rahmen komplett (inset 0) und bringen
   halbtransparente Pixel mit — der Schatten liegt deshalb ÜBER den Bildebenen
   (z-index 5), sonst wird er verdeckt; durch Blur + Verlauf liest er sich als
   Schatten des Produkts, nicht als Overlay */
.reveal::before {
  content: ''; position: absolute; z-index: 5; pointer-events: none;
  left: 13%; right: 13%; bottom: -4%; height: 6%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,0.6), transparent 74%);
  filter: blur(3px);
}
.hero-stage > * { position: relative; z-index: 1; }
/* footer: faint warm material sheen along the top edge */
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 0.6), transparent);
}
/* copy block — title + action above the product */
.hero-overlay {
  position: relative; z-index: 4;
  flex: 0 0 auto; width: 100%;
  /* Wie .hero-top: ohne `min-width: 0` hält das Flex-Kind seine Inhaltsbreite und
     steht über der schmalen Mittelspalte. */
  min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: center; text-align: center;
  padding: 0 0 clamp(6px, 1.6vh, 18px);
  pointer-events: none;
}
.hero-top, .hero-bottom {
  opacity: 0; transform: translateY(16px);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
  /* Als Flex-Kind gilt sonst `min-width: auto`: Der Block schrumpft nie unter seine
     Inhaltsbreite von 500 px. Zwischen 901 und 941 px Fensterbreite ist die mittlere
     Hero-Spalte aber nur 329–365 px breit — Titel und Kaufknopf standen dort bis zu
     85 px über ihrer Spalte (gemessen 2026-08-03). Mit 0 bricht der Inhalt um,
     statt auszubrechen. */
  min-width: 0;
}
.hero-overlay.show .hero-top { opacity: 1; transform: none; }
.hero-overlay.show .hero-bottom { opacity: 1; transform: none; transition-delay: 120ms; }

/* --- the reveal stage --- */
.reveal {
  position: relative; justify-self: center;
  /* Höhenklausel über 100cqh (= reale Stage-Resthöhe) statt der früheren Pauschale
     (100svh - 340px): Die 340 unterschätzte den Kopfbereich, das Bild überragte die
     Bühne (overflow:hidden) und wurde bei knappen Fensterhöhen unten abgeschnitten —
     gemessen 2026-08-26: 16 px bei 1280×780; bei 1440×1000 ist die Klausel nicht
     bindend und das Layout pixelidentisch zum alten Stand. */
  width: min(100%, 840px, calc(100cqh * 1.777));
  aspect-ratio: 1672 / 941; user-select: none; touch-action: pan-y;
  --rscale: 1.04; --rty: 0%;
  opacity: 0;
  transform: translate(var(--rshx, 0px), var(--rty)) scale(var(--rscale));
  transform-origin: center center;
  /* registered custom props → these interpolate frame-smooth (no jumps) */
  transition: opacity 900ms var(--ease), --rscale 1500ms var(--ease), --rty 1500ms var(--ease);
}
.reveal.ready { opacity: 1; --rscale: 1; --rty: 0%; }
/* PHASE 1–2 — the object fills the hero while it appears and morphs (pure transform);
   sized + lifted so the FULL wireframe is visible (no bottom clip) */
.hero.phase-max .reveal.ready { --rscale: 1.68; --rty: -21%; }
/* PHASE 3–4 — product settles to its final size: one smooth, transform-only shrink */
/* Endzustand exakt 1.0: rastert pixelgenau (kein GPU-Upscale-Matsch) und ragt nicht
   über den Hero-Rand (overflow:hidden) — randlose Nahaufnahmen wie UP1 blieben sonst unten hängen */
.hero.gallery-open .reveal.ready { --rscale: 1; --rty: 0%; }
/* after the intro the product invites a click-to-zoom */
.hero.gallery-open .reveal.interactive { cursor: zoom-in; }

/* --- product lightbox (click-to-zoom) --- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(5,4,4,0);
  opacity: 0; visibility: hidden; pointer-events: none;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  /* CLOSE timing (applies when .open is removed) — slower, gentle fade-out */
  transition: opacity 1300ms var(--ease), background 1300ms var(--ease),
              backdrop-filter 1300ms var(--ease), -webkit-backdrop-filter 1300ms var(--ease),
              visibility 0s linear 1400ms;
}
.lightbox.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  background: rgba(5,4,4,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  /* OPEN timing */
  transition: opacity 950ms var(--ease), background 950ms var(--ease),
              backdrop-filter 950ms var(--ease), -webkit-backdrop-filter 950ms var(--ease);
}
.lightbox-frame {
  position: relative;
  padding: clamp(10px, 1.3vw, 18px);
  border: 1px solid var(--b4-line-strong);
  border-radius: var(--radius-lg);
  /* warmes Bühnen-Rezept wie Hero/Intro: Vignette + zentrierter Kupfer-Glow auf Glas */
  background:
    radial-gradient(122% 108% at 50% 38%, transparent 48%, rgba(0,0,0,0.6)),
    radial-gradient(58% 64% at 50% 50%, rgb(var(--accent-rgb) / 0.11), transparent 74%),
    rgb(var(--glass-rgb) / 0.55);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,248,236,0.05);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transform: scale(0.88); opacity: 0;
  /* CLOSE timing — slower than open for a soft collapse */
  transition: transform 1400ms var(--ease), opacity 1100ms var(--ease);
  will-change: transform;
}
.lightbox.open .lightbox-frame {
  transform: scale(1); opacity: 1;
  /* OPEN timing */
  transition: transform 1050ms var(--ease), opacity 820ms var(--ease);
}
.lightbox-img {
  display: block;
  max-width: calc(94vw - 36px); max-height: calc(90vh - 36px); object-fit: contain;
}
.lightbox-close {
  position: absolute; top: -19px; right: -19px;
  z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-round); cursor: pointer;
  background: var(--b4-card); border: 1px solid var(--b4-line-strong);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.lightbox-close:hover { color: var(--color-text-on-accent); background: var(--color-accent); border-color: var(--color-accent); transform: rotate(90deg); }
.lightbox-close:focus { outline: none; }
.lightbox-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lightbox-close svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-frame { transition: opacity 200ms ease; transform: none; }
}
/* (acknowledgment shiver removed — re-selecting the active model does nothing visual) */
.reveal img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; -webkit-user-drag: none;
}
.reveal .img-neon { z-index: 1; }
.reveal .img-real {
  z-index: 2;
  /* revealed from the RIGHT edge inward as the runner travels right→left (--pos: 0..100) */
  clip-path: inset(0 0 0 calc(100% - var(--pos, 100%)));
}
/* --- variant preview layer: a hovered model scans in over the main hero, top→bottom --- */
/* base layer holds the currently-shown variant beneath the incoming scan (so swaps don't flash the main hero) */
.reveal .img-preview-base {
  z-index: 3;
  opacity: 0; transition: opacity 300ms ease;
}
.reveal.preview-base-on .img-preview-base { opacity: 1; }
/* transparente Produkt-PNGs: während der Vorschau das Hauptbild ausblenden,
   statt es (wie früher bei opaken JPGs) mit schwarzem Layer-Grund zu verdecken */
.reveal.preview-base-on .img-real { opacity: 0; }
.reveal .img-preview {
  z-index: 4;
  opacity: 0; transition: opacity 200ms ease;
  /* visible from the top down to the scan line (--ppos: 0..100) */
  clip-path: inset(0 0 calc(100% - var(--ppos, 0%)) 0);
}
.reveal.previewing .img-preview { opacity: 1; }
/* transparente Produkt-PNGs: komplementärer Wipe — das ALTE Bild verschwindet
   oberhalb der Scanlinie im selben Takt, in dem das neue hereinscannt
   (sonst stünden beide Freisteller sichtbar übereinander) */
.reveal.previewing:not(.p-reverting) .img-real { clip-path: inset(var(--ppos, 0%) 0 0 0); }
.reveal.previewing:not(.p-reverting) .img-preview-base { clip-path: inset(var(--ppos, 0%) 0 0 0); }
/* revert: the preview recedes top→bottom, revealing the main hero beneath with the same motion */
.reveal.p-reverting .img-preview { clip-path: inset(var(--ppos, 0%) 0 0 0); }
.reveal.p-reverting .img-real { clip-path: inset(0 0 calc(100% - var(--ppos, 0%)) 0); }
/* the horizontal scan line that drives the preview reveal (mirrors the main morph beam) */
/* opacity is driven per-frame from JS so it never flashes as a static divider at the edges */
.p-runner {
  position: absolute; left: -2%; right: -2%; top: var(--ppos, 0%);
  height: 0; z-index: 5; transform: translateY(-50%);
  opacity: 0; pointer-events: none;
}
.p-runner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(224,146,90,0.65) 14%, var(--scan-core) 50%, rgba(224,146,90,0.65) 86%, transparent 100%);
  box-shadow: 0 0 18px 2px rgba(208,106,44,0.65);
}
.p-runner::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 60px;
  transform: translateY(-100%);
  background: linear-gradient(to top, rgba(208,106,44,0.18), transparent);
}
/* while previewing a model the morph control + scan beam step aside */
.reveal.previewing .handle { opacity: 0 !important; pointer-events: none; }
.reveal.swapping-img .handle { opacity: 0 !important; pointer-events: none; }
.reveal.previewing .runner { opacity: 0; }
/* the morph handle is an intro-only control — once the gallery opens it retires
   (it otherwise lingers as a small circle at the image's left, where the stock palette builds) */
.hero.gallery-open .handle { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .p-runner { display: none; }
}
/* the scan runner */
.runner {
  position: absolute; top: -2%; bottom: -2%; left: calc(100% - var(--pos, 100%));
  width: 0; z-index: 4; transform: translateX(-50%);
  pointer-events: none;
}
.runner .beam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--b4-blue) 12%, var(--scan-core) 50%, var(--b4-violet) 88%, transparent);
  box-shadow: 0 0 18px 2px rgba(208,106,44,0.65), 0 0 48px 8px rgba(184,92,40,0.30);
  transition: opacity 520ms ease;
}
.runner .glow {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 90px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(208,106,44,0) 0%, rgba(208,106,44,0.16) 50%, rgba(208,106,44,0) 100%);
  filter: blur(2px);
  transition: opacity 520ms ease;
}
/* draggable handle — intro-only; removed once the morph finishes */
.handle {
  position: absolute; top: 50%; left: calc(100% - var(--pos, 100%));
  transform: translate(-50%, -50%); z-index: 5;
  width: 30px; height: 30px; border-radius: var(--radius-round);
  display: none; place-items: center; cursor: ew-resize;
  background: rgba(10,14,20,0.62);
  border: 1.25px solid rgba(245,224,200,0.85);
  box-shadow: 0 0 16px rgba(208,106,44,0.5), 0 4px 13px rgba(0,0,0,0.45), inset 0 0 8px rgba(232,160,96,0.28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 400ms ease 200ms, box-shadow 200ms ease;
  touch-action: none;
}
.reveal.interactive .handle { opacity: 1; }
.handle:hover { box-shadow: 0 0 22px rgba(208,106,44,0.7), inset 0 0 9px rgba(232,160,96,0.35); }
.handle .chev { display: flex; align-items: center; gap: 0; color: var(--scan-core); }
.handle .chev svg { width: 9px; height: 9px; }
/* once the intro sweep is done only the circular handle remains;
   the beam returns while the user actively scrubs the control */
.reveal.interactive .runner .beam,
.reveal.interactive .runner .glow { opacity: 0; }
.reveal.interactive.scrubbing .runner .beam,
.reveal.interactive.scrubbing .runner .glow { opacity: 1; }

/* --- variant rail (full-height vertical gallery, opens after reveal) --- */
.variant-rail {
  position: relative; z-index: 4; align-self: stretch;
  width: 100%; min-height: 0; box-sizing: border-box;
  padding-left: clamp(18px, 2.4vw, 38px);
  display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px);
  opacity: 0; transform: translateX(22px);
  transition: opacity 800ms var(--ease) 360ms, transform 800ms var(--ease) 360ms;
  pointer-events: none;
}
.hero.gallery-open .variant-rail { opacity: 1; transform: none; pointer-events: auto; }
/* collapsed: gallery slides away, product reclaims the stage */
.hero.cols-open.gallery-collapsed .hero-body { --rail-w: 0px; }
.hero.gallery-open.gallery-collapsed .variant-rail { padding-left: 0; }
.hero.gallery-collapsed .variant-rail {
  opacity: 0; pointer-events: none; transform: translateX(16px);
}
.rail-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-xs);
  font-weight: 700;
  font-size: var(--fs-2xs); letter-spacing: 0.2em; color: var(--color-text-muted);
  padding: var(--space-3xs) var(--space-3xs) var(--space-xs); white-space: nowrap;
  border-bottom: 1px solid var(--b4-line);
}
.rail-title { margin-right: auto; }
.rail-toggle {
  display: grid; place-items: center; width: 27px; height: 27px; padding: 0;
  border: 1px solid var(--accent-strong); border-radius: var(--radius-card); cursor: pointer;
  background: var(--accent-fill); color: var(--color-accent);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.rail-toggle:hover { color: var(--color-text-on-accent); border-color: var(--color-accent); background: var(--color-accent); }
.rail-toggle svg { width: 16px; height: 16px; }
/* mirror the two headers: toggles sit at the OUTER screen edges, titles toward the centre */
.feature-rail .rail-toggle { order: -1; margin-right: auto; }
.feature-rail .rail-title { margin-right: 0; }
/* --- edge toggles: icon-only EXPAND tabs, shown only while a carousel is collapsed --- */
.edge-toggle {
  position: absolute; top: 50%; z-index: 7;
  width: 30px; height: 56px; display: grid; place-items: center;
  cursor: pointer; color: var(--color-text);
  background: rgba(20,26,33,0.9);
  border: 1px solid var(--b4-line);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 360ms var(--ease), color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.edge-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.edge-toggle svg { width: 18px; height: 18px; }
.edge-left  { left: 0;  border-left: 0;  border-radius: 0 var(--radius-card) var(--radius-card) 0; transform: translateY(-50%); }
.edge-right { right: 0; border-right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); transform: translateY(-50%); }
.hero.feature-collapsed   .edge-left  { opacity: 1; pointer-events: auto; }
.hero.gallery-collapsed .edge-right { opacity: 1; pointer-events: auto; }

/* --- stock rail (left): pick your rifle stock → activates the matching AMB --- */
.feature-rail {
  position: relative; z-index: 4; align-self: stretch;
  width: 100%; min-height: 0; box-sizing: border-box;
  padding-right: clamp(18px, 2.4vw, 38px);
  display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px);
  opacity: 0; transform: translateX(-22px);
  transition: opacity 800ms var(--ease) 360ms, transform 800ms var(--ease) 360ms;
  pointer-events: none;
}
.hero.gallery-open .feature-rail { opacity: 1; transform: none; pointer-events: auto; }
.hero.cols-open.feature-collapsed .hero-body { --stock-w: 0px; }
.hero.gallery-open.feature-collapsed .feature-rail { padding-right: 0; }
.hero.feature-collapsed .feature-rail { opacity: 0; pointer-events: none; transform: translateX(-16px); }
/* group label between stock tiles */
.feature-group {
  flex: 0 0 auto; padding: var(--space-xs) var(--space-3xs) var(--space-3xs);
  font-weight: 700;
  font-size: var(--fs-2xs); letter-spacing: 0.2em; color: var(--color-text-muted);
}
.feature-group:first-child { padding-top: 0; }
.feature {
  flex: 0 0 auto; cursor: pointer; scroll-snap-align: start;
  display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs); position: relative; text-align: left;
  border: 1px solid var(--b4-line); border-radius: var(--radius-card);
  background: rgba(255,255,255,0.025); color: var(--color-text);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.feature:hover { border-color: var(--b4-line-strong); background: rgba(255,255,255,0.05); transform: translateX(4px); }
/* active-state dot (top-right) — mirrors the model card's .v-state */
.feature::after {
  content: ''; position: absolute; top: 10px; right: 10px;
  box-sizing: border-box; /* pseudo-elements don't inherit the global * rule → match the model's <span> */
  width: 8px; height: 8px; border-radius: var(--radius-round);
  border: 1px solid var(--b4-line); background: transparent;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.feature:hover::after { border-color: var(--color-text-muted); }
/* active marker — IDENTICAL to the model's: bold filled orange disc + glow */
.feature.is-active::after {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-ring); transform: scale(1.18);
}
/* compatible with the active model */
.feature.is-compatible { border-color: var(--accent-line); background: var(--accent-faint); }
/* the specific stock the user picked */
.feature.is-active { border-color: var(--color-accent); background: var(--accent-tint); }
.f-thumb {
  width: 84px; height: 62px; border-radius: var(--radius-card); overflow: hidden;
  background: rgb(var(--glass-rgb) / 0.55); border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
}
.f-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  /* all inactive icons share ONE readable dim level (in-family or not); active comes forward */
  opacity: 0.5;
}
.feature:hover .f-thumb img { opacity: 0.72; }
.feature.is-active .f-thumb img { opacity: 1; }
.f-thumb-icon { color: var(--color-text-muted); }
.f-thumb-icon svg { width: 22px; height: 22px; }
.feature.is-active .f-thumb-icon, .feature.is-compatible .f-thumb-icon { color: var(--color-accent); }
.f-meta { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; padding-right: var(--space-md); }
/* .f-name / .f-brand fold into the shared families below (see .v-name / .v-tag).
   .f-brand only adds the uppercase + tracking treatment on top of the shared meta base. */
.f-brand { text-transform: uppercase; letter-spacing: 0.12em; }
.rail-count {
  font-family: var(--font-display); letter-spacing: 0;
  color: var(--color-accent); font-size: var(--fs-small);
}
/* scrollable carousel track (vertical on desktop) */
.rail-track {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px);
  justify-content: safe center;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-xs); margin-right: -6px;
  scrollbar-width: thin; scrollbar-color: var(--b4-line-strong) transparent;
  -webkit-overflow-scrolling: touch;
  /* fade only at the BOTTOM to signal more items — never clip the first card's top frame */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.rail-track::-webkit-scrollbar { width: 5px; }
.rail-track::-webkit-scrollbar-thumb { background: var(--b4-line-strong); border-radius: var(--radius-hair); }
.variant {
  flex: 0 0 auto; height: clamp(84px, 9vh, 96px);
  scroll-snap-align: start; cursor: pointer;
  display: grid; grid-template-columns: minmax(92px, 48%) minmax(0,1fr); align-items: center; gap: clamp(8px, 0.8vw, 13px);
  padding: clamp(8px, 1vh, 12px); position: relative;
  border: 1px solid var(--b4-line); border-radius: var(--radius-card);
  background: rgba(255,255,255,0.025);
  text-decoration: none; color: var(--color-text);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
.variant:hover {
  border-color: var(--b4-line-strong);
  background: rgba(255,255,255,0.05);
  transform: translateX(-4px);
}
.variant.is-active {
  border-color: var(--color-accent);
  background: var(--accent-tint);
}
/* synchronised scan line on the active gallery card during a model change (animation only) */
.variant.v-scanning::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: var(--vppos, 0%);
  height: 2px; z-index: 3; pointer-events: none; border-radius: var(--radius-hair);
  background: linear-gradient(90deg, transparent, var(--scan-core, var(--color-accent)), transparent);
  box-shadow: 0 0 8px var(--color-accent);
}
.v-thumb {
  width: 100%; height: 100%; border-radius: var(--radius-card); overflow: hidden;
  background: transparent; border: none;
  display: grid; place-items: center;
}
.v-thumb img { width: 100%; height: 100%; object-fit: contain; }
.v-meta { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
/* NAME family — carousel card names (right=model, left=feature): Montserrat caps */
.v-name, .f-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-rail); letter-spacing: 0.005em; line-height: 1.08;
  color: var(--color-text);
  white-space: normal; overflow-wrap: anywhere;
}
.variant.is-active .v-name, .feature.is-active .f-name { color: var(--color-accent); }
/* META family — secondary line under a card name */
.v-tag, .f-brand {
  font-size: var(--fs-rail-sm); color: var(--color-text-muted); line-height: 1.3;
}
/* active-state marker (top-right) — replaces the old external-link arrow */
.v-state {
  position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: var(--radius-round);
  border: 1px solid var(--b4-line); background: transparent;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.variant:hover .v-state { border-color: var(--color-text-muted); }
.variant.is-active .v-state {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-ring); transform: scale(1.18);
}

/* --- small stock pictograms at the LEFT edge of the product image (nearest the stock carousel) --- */
.feature-edge {
  /* horizontale Leiste unter der Kauf-CTA — liegt im Fluss, nie über dem Produktbild.
     Höhe FEST reserviert: Icon-Sichtbarkeit wechselt per display — ohne feste Höhe
     kollabiert die Leiste kurz und das Produktbild springt vor ihrem Erscheinen */
  /* block statt inline-flex: als Inline-Box verschob die Baseline-Logik den Header
     um ~6px, sobald alle Icons per display versteckt waren (Bild-Hopser beim Scan) */
  display: flex; width: fit-content; flex-direction: row; align-items: center; gap: var(--space-2xs);
  height: 70px; min-width: 84px;
  /* horizontal scrollbar — die Schaftliste wächst in Zukunft */
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--b4-line-strong) transparent;
  margin-top: var(--space-xl); padding: var(--space-2xs);
  /* glass panel — matches the name plate so it sits harmoniously over the product */
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-card);
  background: rgb(var(--glass-rgb) / 0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--ease) 820ms;
}
.hero.gallery-open .feature-edge { opacity: 1; pointer-events: auto; }
/* das Glas-Chrome erscheint erst MIT seinen Icons — sonst blitzt die leere,
   auf ihr Padding kollabierte Pille als kleiner Kreis links der Bühne auf */
.hero.gallery-open .feature-edge:not(.lit) { opacity: 0; pointer-events: none; }
/* während des Modellwechsel-Scans tritt die KOMPLETTE Palette sofort ab
   (sonst bleibt allein der Kupfer-Ring des aktiven Icons als "Kreis" stehen)
   und kehrt nach dem Scan geschlossen zurück */
.hero:has(.reveal.swapping-img) .feature-edge,
.hero:has(.reveal.p-scanning) .feature-edge {
  opacity: 0; pointer-events: none; transition-delay: 0ms;
}
/* stock carousel collapsed → hide the on-image stock pictograms too */
.hero.feature-collapsed .feature-edge { opacity: 0; pointer-events: none; }

.fe-item {
  --se-rest: 0.5;
  width: 76px; height: 56px; padding: var(--space-2xs); cursor: pointer;
  border: 1px solid transparent;
  background: transparent; border-radius: var(--radius-card); overflow: hidden;
  display: grid; place-items: center; flex: 0 0 auto;
  opacity: var(--se-rest);
  /* snap to final state — NO transitions on background/border/opacity so the active icon doesn't dwell bright */
  transition: none;
}
.fe-item, .fe-item * { animation: none !important; }
/* hidden until the strip is lit (so the wave is the first thing seen) */
.feature-edge:not(.lit) .fe-item { opacity: 0; }
/* each pictogram waves in from top→bottom; backwards fill hides it during its stagger delay,
   then it returns to its resting opacity and STAYS */
@keyframes seRollIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.9); }
  60%  { opacity: var(--se-rest); }
  to   { opacity: var(--se-rest); transform: translateY(0) scale(1); }
}
/* per-item wave animation removed — click goes straight to final state, no transient bright frame */
@media (prefers-reduced-motion: reduce) {
  .feature-edge:not(.lit) .fe-item { opacity: var(--se-rest); }
}
.feature-edge::-webkit-scrollbar { height: 5px; }
.feature-edge::-webkit-scrollbar-thumb { background: var(--b4-line-strong); border-radius: var(--radius-hair); }
.feature-edge::-webkit-scrollbar-track { background: transparent; }
.fe-item img {
  width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-badge);
}
.fe-item i, .fe-item svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.fe-item:hover { opacity: 0.9; border-color: var(--b4-line-strong); }
/* compatible-but-not-selected: darker / recessed */
.fe-item.is-compatible { --se-rest: 0.4; background: transparent; }
/* selected: clean single orange ring + warm fill (no scale — transform-scale on an image blurs mid-transition) */
.fe-item.is-active {
  --se-rest: 1; background: var(--accent-fill);
  border: 1.5px solid var(--color-accent);
}
.fe-item.is-active i, .fe-item.is-active svg { color: var(--color-accent); }

/* --- Modell-Info im Header über der Bühne (ersetzt die frühere Glas-Plakette):
   der App-Titel IST das aktive Modell — wechselt beim Modellwechsel mit weichem Fade */
.hero-top .model-code, .hero-top .model-tag { transition: opacity 220ms ease; }
.hero-top.swapping .model-code, .hero-top.swapping .model-tag { opacity: 0; }
/* Bestätigungs-Chip — ruhige positive Rückmeldung "Passt zu Ihrem Schaft"
   (ersetzt das frühere Titel-Schütteln, das wie eine Warnung las):
   Glas-Pille unten mittig auf der Bühne, Häkchen in Patina-Grün (Verdigris —
   Grün aus der Kupfer-Materialwelt), erscheint kurz und tritt wieder ab */
.fit-confirm {
  /* sitzt unter der Schaft-Palette, linksbündig mit ihr — absolut verankert,
     damit das Erscheinen nie das Layout verschiebt */
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -5px);
  /* fixe Geometrie: absolut positionierte Boxen schrumpfen sonst auf den Restraum
     und der Text bricht um — die Pille wurde "fast rund" */
  width: max-content; white-space: nowrap;
  z-index: 6; display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill);
  background: rgb(var(--glass-rgb) / 0.62); border: 1px solid var(--b4-line-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.04em; color: var(--color-text);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease, transform 420ms var(--ease);
}
.fit-confirm.show { opacity: 1; transform: translate(-50%, 0); }
.fit-confirm svg { width: 14px; height: 14px; color: var(--color-patina); }
@media (prefers-reduced-motion: reduce) { .fit-confirm { transition: opacity 200ms ease; transform: translate(-50%, 0); } }

/* --- hero copy (framing the product) --- */
.hero-top { max-width: 900px; position: relative; }
.hero-bottom { max-width: 680px; display: flex; flex-direction: column; align-items: center; }
/* Risk-Reversal direkt am Kauf-Moment — eine stille Zeile unter dem CTA */
.buy-note {
  margin: var(--space-xs) 0 0; font-family: var(--font-body); font-size: var(--fs-xs);
  color: var(--color-text-muted); letter-spacing: 0.02em;
}
.buy-note i, .buy-note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: var(--space-2xs); color: var(--color-accent); }
.hero-code {
  font-size: var(--fs-d1);
  line-height: 0.94; letter-spacing: 0.02em; margin: 0;
  color: var(--color-text);
  text-shadow: 0 2px 34px rgba(0,0,0,0.55);
}
/* .hero-fullname shares the .kicker treatment (see LABEL family); only hero positioning here.
   Seit dem PLP-Kopf-Standard (2026-08-26) steht sie als <span> IN der h1 (MUSTER.md § PLP-Kopf) —
   display:block hält sie auf ihrer eigenen Zeile, line-height löst sie von der 0.94er-Zeile des hero-code. */
.hero-fullname {
  display: block;
  margin: var(--space-sm) 0 0;
  line-height: 1.5;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.hero-top .hero-cta { margin-top: var(--space-md); }
.hero-sub {
  color: var(--color-text); opacity: 0.92;
  font-size: var(--fs-md);
  line-height: 1.55; margin: 0 auto var(--space-xl); max-width: 540px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.hero-cta { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; pointer-events: auto; }

/* persistent animation on/off control (bottom-right of the hero stage) */
.anim-toggle {
  position: absolute; right: 0; bottom: 0; z-index: 7;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); border-radius: var(--radius-pill);
  background: rgb(var(--glass-rgb) / 0.66); border: 1px solid var(--b4-line-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--color-text); cursor: pointer;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-2xs); letter-spacing: 0.13em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--ease) 1000ms, color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.hero.gallery-open .anim-toggle { opacity: 0.45; pointer-events: auto; }
.hero.gallery-open .anim-toggle:hover, .hero.gallery-open .anim-toggle:focus-visible { opacity: 1; }
.anim-toggle:hover { border-color: var(--color-accent); background: rgb(var(--glass-rgb) / 0.82); }
.at-ico { width: 14px; height: 14px; color: var(--color-accent); flex: 0 0 auto; }
/* the switch track + sliding knob */
.at-switch {
  position: relative; flex: 0 0 auto;
  width: 32px; height: 18px; border-radius: var(--radius-pill);
  background: var(--color-accent); transition: background 220ms ease;
}
.at-knob {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: var(--radius-round);
  background: var(--color-text-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 240ms var(--ease);
}
.anim-toggle[aria-pressed="true"] .at-knob { transform: translateX(14px); }
/* OFF state */
.anim-toggle.off { color: var(--color-text-muted); }
.anim-toggle.off .at-ico { color: var(--color-text-muted); }
.anim-toggle.off .at-switch { background: rgba(255,255,255,0.18); }
@media (max-width: 760px) {
  .anim-toggle { font-size: var(--fs-2xs); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); gap: var(--space-xs); }
}
/* Touch: Toggle-Höhe auf das 44px-Mindest-Trefferziel anheben (Breite ist ausreichend) */
@media (hover: none) {
  .anim-toggle { min-height: 44px; }
}

/* ============================================================
   Trust / standards band
   ============================================================ */
.standards {
  border-top: 1px solid var(--b4-line); border-bottom: 1px solid var(--b4-line);
  background: var(--b4-ink);
}
.standards .wrap {
  display: grid;
  /* minmax(0,1fr) statt 1fr: Eine `1fr`-Spalte wächst sonst auf die min-content-Breite
     ihres Inhalts, und die nowrap-Wertgruppen („MIL-A-8625 III") zogen darüber die
     ganze Seite auf. Genau das sollte die Regel unten verhindern — sie griff aber nur
     zwischen 901 und 1080 px. Bei 481 px und bei 1081 px lief die Seite über. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3xs); padding-inline: 0;
}
.std {
  /* NICHT --b4-pad: Der Seitenabstand geht bis 64 px und ließ von einer 310 px
     breiten Spalte nur 182 px für den Text übrig — die nowrap-Wertgruppen liefen
     darüber hinaus. Der Abstand richtet sich hier nach der Spalte, nicht nach der
     Seite. */
  padding: 30px clamp(16px, 2.2vw, 30px); position: relative;
}
.std + .std::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: var(--b4-line);
}
.std .std-k { font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.std .std-v { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-body); letter-spacing: 0.01em; color: var(--color-text); text-wrap: balance; }
/* Werte wie „M-LOK®" oder „MIL-A-8625 III" nie intern trennen — Umbruch nur zwischen Begriffen */
.std .std-v .nb { white-space: nowrap; }
/* Responsive-Grundregel: 4 Spalten + nowrap-Wertgruppen brauchen ~1000px echte Breite —
   darunter 2×2, damit das Band die Seite NIE horizontal aufzieht (gilt site-weit) */
/* Vier Spalten tragen erst ab ~1200 px. Die frühere Regel galt nur von 901 bis 1080 —
   darüber und darunter stand das Band wieder vierspaltig da und lief über. Jetzt
   lückenlos: 4 Spalten ab 1201, 2 Spalten bis 1200, eine einzige bis 560. */
@media (max-width: 1200px) {
  .standards .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std + .std::before { display: none; }
  .std { border-top: 1px solid var(--b4-line); }
  .std:nth-child(-n+2) { border-top: none; }
}


/* ============================================================
   Section scaffold
   ============================================================ */
.section { padding: clamp(64px, 8vw, 120px) 0; }
/* Die erste Bühne schließt kompakt an den Kopf an: Das volle Sektions-Padding trägt den
   Rhythmus ZWISCHEN Bühnen — über der ersten begrenzt schon Header/Modell-Leiste. Mobil
   gilt das seit dem Responsive-Audit (24 px, @media unten); Desktop nachgezogen nach
   Betreiber-Entscheidung bei der CG-Abnahme (2026-08-20: 118 px gemessen → 40 px). */
.amb-intro.section { padding-top: var(--space-3xl); }
.section.alt { background: var(--b4-ink-2); border-block: 1px solid var(--b4-line); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .kicker { display: block; margin-bottom: var(--space-md); }
.section-head h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-md); }

/* Principle — split */
.principle-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 6vw, 80px); align-items: center;
}
.principle-grid h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-lg); }
.principle-grid .lede + .lede { margin-top: var(--space-md); }
.principle-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card);
  overflow: hidden; border: 1px solid var(--b4-line-strong);
  /* feiner Lichtsaum an der Oberkante — hebt den Container vom tiefen Grund ab */
  box-shadow: inset 0 1px 0 rgba(255,248,236,0.05);
  background:
    radial-gradient(122% 108% at 50% 38%, transparent 48%, rgba(0,0,0,0.6)),
    radial-gradient(58% 64% at 50% 50%, rgb(var(--accent-rgb) / 0.11), transparent 74%),
    var(--b4-black);
}
/* Stage v2 — Bodenkontakt: weicher Kontaktschatten erdet das freigestellte Produkt. */
.principle-media::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 13%; right: 13%; bottom: 6%; height: 7%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,0.72), transparent 74%);
  filter: blur(2px);
}
/* Randfüllendes Foto statt freigestelltem Produkt: Das Bild bringt seinen eigenen Grund
   mit und verdeckt die Bühne vollständig — dann hat der Kontaktschatten nichts zu erden
   und liegt als dunkler Streifen über dem unteren Bilddrittel. Ausdrücklich als Modifier,
   nicht als Regel über `object-fit`: Auf der AMB-Landing bleibt er auch am cover-Bild
   stehen (Betreiber, 2026-08-08). */
.principle-media.is-foto::before { content: none; }
.principle-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Produktbild der Startseite als Link zur Familienseite (Betreiber, 2026-10-18) — der Link füllt die Bühne,
   sonst bezöge sich `height: 100%` des Bildes auf ein Inline-Element ohne Höhe. */
.principle-media > a.bild-link { display: block; width: 100%; height: 100%; }
/* Glas 90 % statt 55 %: Auf weißem Fotogrund hatte die gedämpfte Schrift nur 1,6 : 1 — gemessen jetzt
   5,6 : 1 auf Weiß, 6,8–7,2 : 1 auf dunklen Bildern (Betreiber 2026-10-16: „Lesbarkeit verbessern"). */
.principle-media .frame-label {
  position: absolute; left: 14px; bottom: 12px; font-size: var(--fs-2xs);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted);
  background: rgb(var(--glass-rgb) / 0.9); border: 1px solid var(--b4-line);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-badge);
}
/* Schild unten rechts — wo das Motiv unten links bis an den Rand reicht
   (Bühne CG-PRO, 2026-10-16: unten links 5–17 % auf dem Gerät, unten rechts 0 %). */
.principle-media .frame-label.is-rechts { left: auto; right: 14px; }

/* Benefit cards (AMB Landing "Technik" section) — distinct from the .feature carousel */
.benefit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);
}
.benefit {
  background: var(--b4-card); border: 1px solid var(--b4-line);
  border-radius: var(--radius-card); padding: var(--space-2xl) var(--space-2xl) var(--space-2xl);
  transition: background var(--mo-2) ease, border-color var(--mo-2) ease, transform var(--mo-3) var(--ease);
}
.benefit:hover { background: var(--b4-card-hover); border-color: var(--b4-line-strong); transform: translateY(-4px); }
.benefit .b-ico {
  width: 46px; height: 46px; border-radius: var(--radius-card); display: grid; place-items: center;
  background: var(--accent-tint); border: 1px solid var(--accent-line);
  color: var(--color-accent); margin-bottom: var(--space-lg);
}
.benefit .b-ico svg { width: 22px; height: 22px; }
.benefit h3 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-body); letter-spacing: 0.01em; margin: 0 0 var(--space-sm); color: var(--color-text); }
.benefit p { color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.62; margin: 0; }

/* Spec table */
.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--b4-line); border-radius: var(--radius-card); overflow: hidden;
}
.spec {
  padding: var(--space-xl) var(--space-xl); border-right: 1px solid var(--b4-line); border-bottom: 1px solid var(--b4-line);
  background: var(--b4-steel);
}
.spec .s-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-stat); color: var(--color-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums slashed-zero; }
.spec .s-num small { font-size: var(--fs-body); color: var(--color-text-muted); font-weight: 600; margin-left: var(--space-2xs); }
.spec .s-lab { margin-top: var(--space-xs); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* Models */
.model-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-3xl); }
.model-tab {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: var(--fs-nav); padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill); border: 1px solid var(--b4-line-strong); background: transparent;
  color: var(--color-text-muted); cursor: pointer;
  transition: all 200ms ease;
}
.model-tab:hover { color: var(--color-text); border-color: var(--color-text); }
.model-tab.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
.model-panel {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; min-height: 280px;
}
.model-vis {
  aspect-ratio: 16 / 10; border-radius: var(--radius-card); background: var(--b4-black);
  border: 1px solid var(--b4-line-strong); position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,248,236,0.05);
  display: grid; place-items: center;
}
.model-vis .reticle { width: 64px; height: 64px; opacity: 0.5; }
.model-vis .vis-label { position: absolute; bottom: 14px; left: 16px; font-size: var(--fs-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.model-info h3 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-d3); margin: 0 0 var(--space-2xs); }
.model-info .m-tag { color: var(--color-accent); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-md); }
.model-info p { color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-lg); }
.model-info .m-fit { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.model-info .m-fit span { font-size: var(--fs-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-badge); border: 1px solid var(--b4-line); color: var(--color-text-muted); }

/* Founder strip */
.founder { background: var(--b4-ink); border-block: 1px solid var(--b4-line); }
.founder .wrap { display: flex; gap: clamp(28px, 5vw, 60px); align-items: center; padding-block: clamp(48px, 7vw, 84px); flex-wrap: wrap; }
.founder-portrait {
  width: 108px; height: 108px; flex: 0 0 auto; border-radius: var(--radius-round);
  background: var(--color-surface); border: 1px solid var(--b4-line-strong);
  display: grid; place-items: center; color: var(--color-text-muted);
  font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700;
}
.founder-text { flex: 1; min-width: 280px; }
/* Zitat-Piktogramm — sitzt links bündig im Zitatanfang, ersetzt typografische Anführungszeichen */
.founder-text .q-ico { display: inline-flex; color: var(--color-accent); margin-right: var(--space-xs); vertical-align: -4px; }
.founder-text .q-ico svg { width: 22px; height: 22px; opacity: 0.85; }
.founder-text blockquote { margin: 0 0 var(--space-md); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--color-text); opacity: 0.92; max-width: 66ch; }
.founder-text .f-meta { color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.6; margin-top: var(--space-lg); }
/* Der Gründername ist ein Label, keine Betonung: Er steht als `.accent` im Inhalt und
   holt sich Kupfer aus der Rolle. Vorher trug ein `strong` hier Farbe UND Gewicht —
   genau das, was das Brandbook der Betonung verbietet und `.accent` zuweist. */

/* Final CTA */
.final-cta { position: relative; text-align: center; padding: clamp(90px, 13vw, 170px) 0; overflow: hidden; background: var(--b4-black); }
.final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 70% at 50% 50%, var(--accent-tint), transparent 70%); }
.final-cta .wrap { position: relative; }
.final-cta h2 { font-size: var(--fs-h1); margin: var(--space-md) auto var(--space-lg); max-width: 14ch; }
.final-cta p { color: var(--color-text-muted); font-size: var(--fs-h4); margin: 0 auto var(--space-2xl); max-width: 540px; }
.final-cta .hero-cta { justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { position: relative; background: var(--b4-black); border-top: 1px solid rgba(255,248,236,0.22); padding-top: clamp(56px, 8vw, 96px); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-3xl);
  padding-bottom: var(--space-4xl); border-bottom: 1px solid var(--b4-line);
}
.footer-brand img { height: 30px; margin-bottom: var(--space-lg); }
.footer-brand p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 320px; }
.footer-col h2 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.footer-col a { display: block; color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); margin-bottom: var(--space-sm); opacity: 0.85; transition: color 160ms ease, opacity 160ms ease; }
.footer-col a:hover { color: var(--color-accent-soft); opacity: 1; }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl);
  padding-block: var(--space-xl); flex-wrap: wrap;
}
.footer-bar .copy { color: var(--color-text-muted); font-size: var(--fs-nav); }
.pay { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
/* Zahlarten-/Versand-Marken: offizielle Wortmarken (assets/payment/) als EINFARBIGE
   Masken im gedämpften Textgrau — wie graviert, keine Farb-Logos im ruhigen Footer.
   Pill-Geometrie identisch mit den früheren Text-Pills; Höhen optisch normiert. */
.pay .pm-mark { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; }
.pay .pm-mark::before {
  content: ''; display: block;
  height: var(--pm-h, 13px); width: calc(var(--pm-h, 13px) * var(--pm-ar, 3));
  background: var(--color-text-muted);
  -webkit-mask: var(--pm-url) center / contain no-repeat;
          mask: var(--pm-url) center / contain no-repeat;
}
.pm-visa       { --pm-url: url("../img/payment/visa.svg");       --pm-ar: 3.08; --pm-h: 11px; }
.pm-mastercard { --pm-url: url("../img/payment/mastercard-mark.svg"); --pm-ar: 7.26; --pm-h: 10px; }
.pm-amex       { --pm-url: url("../img/payment/amex-mark.svg");  --pm-ar: 2.98; --pm-h: 13px; }
.pm-sepa       { --pm-url: url("../img/payment/sepa-mark.svg");  --pm-ar: 3.45; --pm-h: 12px; }
.pm-klarna     { --pm-url: url("../img/payment/klarna.svg");     --pm-ar: 4.48; --pm-h: 11px; }
.pm-paypal     { --pm-url: url("../img/payment/paypal.svg");     --pm-ar: 3.76; --pm-h: 12px; }
.pm-apple-pay  { --pm-url: url("../img/payment/apple-pay.svg");  --pm-ar: 2.44; --pm-h: 13px; }
.pm-google-pay { --pm-url: url("../img/payment/google-pay.svg"); --pm-ar: 2.1;  --pm-h: 13px; }
.pm-dhl        { --pm-url: url("../img/payment/dhl-mark.svg");   --pm-ar: 6.53; --pm-h: 9px; }
.pay span {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted);
  border: 1px solid var(--b4-line); border-radius: var(--radius-badge); padding: var(--space-2xs) var(--space-xs); background: var(--b4-card);
}
.footer-license { padding: var(--space-md) 0 var(--space-3xl); color: var(--color-text-muted); font-size: var(--fs-xs); line-height: 1.6; max-width: 720px; }
.footer-license strong { color: var(--color-text); }

/* reticle svg helper */
.reticle-svg { color: var(--color-text-muted); }

/* ============================================================
   Legal / info sub-pages
   ============================================================ */
.page-head {
  background: var(--b4-black); border-bottom: 1px solid var(--b4-line);
  padding: clamp(48px, 9vh, 104px) 0 clamp(28px, 5vh, 52px);
}
.page-head .wrap { max-width: var(--container-max, 1200px); }
.page-head .kicker { display: block; margin-bottom: var(--space-sm); }
.page-head h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h1-page); line-height: 1.02; letter-spacing: 0.01em; margin: 0;
  color: var(--color-text);
}
.page-head .lead {
  margin: var(--space-md) 0 0; max-width: 60ch; color: var(--color-text-muted);
  font-size: var(--fs-body); line-height: 1.6;
}
.legal {
  padding: clamp(36px, 6vh, 72px) 0 clamp(56px, 9vh, 110px);
}
.legal .wrap { max-width: 820px; }
/* Überschriften folgen der globalen Skala — nur die Abstände sind hier größer, weil
   Rechtstexte lang sind. Eigene Größen gab es früher, doch die alte `.legal h3` war mit
   0.92rem KLEINER als der Fließtext: Die Hierarchie stand auf dem Kopf. */
.legal h2 { margin: var(--space-4xl) 0 var(--space-sm); scroll-margin-top: 96px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: var(--space-2xl) 0 var(--space-xs); }
.legal h4, .legal h5, .legal h6 { margin: var(--space-xl) 0 var(--space-xs); }
.legal p, .legal li { text-wrap: pretty; }
.legal p { margin: 0 0 var(--space-md); }
.legal ul, .legal ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.legal li { margin-bottom: var(--space-xs); }
.legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal .muted { color: var(--color-text-muted); font-size: var(--fs-body); }
/* status / "in Arbeit" note with a leading accent icon (product-landing stubs) */
.page-note { margin-top: var(--space-2xs); }
.page-note i, .page-note svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: var(--space-2xs); color: var(--color-accent); }
.legal hr { border: 0; border-top: 1px solid var(--b4-line); margin: var(--space-2xl) 0; }
/* info cards (contact, payment, shipping) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-xs) 0 var(--space-xl); }
.info-card {
  border: 1px solid var(--b4-line); border-radius: var(--radius-card, 8px);
  background: var(--b4-card); padding: var(--space-lg) var(--space-lg);
}
.info-card .ic-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); color: var(--color-accent); }
.info-card .ic-head svg { width: 26px; height: 26px; flex: none; }
.info-card h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0.02em; }
.info-card p { margin: 0; }
.info-card a { color: var(--color-accent); text-decoration: none; }
.info-card a:hover { text-decoration: underline; }
.pay-methods { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-xl); }
.pay-methods .pm {
  border: 1px solid var(--b4-line); border-radius: var(--radius-card); background: var(--b4-card);
  padding: var(--space-xs) var(--space-md); font-weight: 700; font-size: var(--fs-h6); letter-spacing: 0.02em;
  color: var(--color-text);
}
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-xl); }
.legal th, .legal td { text-align: left; padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--b4-line); font-size: var(--fs-body); }
.legal th { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 700; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xl); color: var(--color-accent); text-decoration: none; font-weight: 600; font-size: var(--fs-body); }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { text-decoration: underline; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.fx { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.fx.in { opacity: 1; transform: none; }
.fx-d1 { transition-delay: 90ms; }
.fx-d2 { transition-delay: 180ms; }
.fx-d3 { transition-delay: 270ms; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  /* header: wrap to two rows — logo+actions on top, a horizontal acronym nav below */
  /* padding-block statt padding-Shorthand — sonst verliert .wrap sein seitliches Padding */
  .header-inner { flex-wrap: wrap; height: auto; padding-block: var(--space-xs) var(--space-xs); row-gap: var(--space-xs); column-gap: var(--space-xs); }
  /* Logo mobil kompakter, damit Logo + Icons sicher in EINE Zeile passen */
  .brand img { height: 20px; }
  .main-nav {
    display: flex; order: 3; width: 100%; gap: var(--space-lg);
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-3xs);
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; padding-bottom: var(--space-2xs); }
  .main-nav .ni-name { display: none; }   /* mobile: acronyms only, no clarifier line */
  .main-nav a::before { top: calc(100% - 2px); }
  .standards .wrap { grid-template-columns: repeat(2, 1fr); }
  .std + .std::before { display: none; }
  .std { border-top: 1px solid var(--b4-line); }
  .principle-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .model-panel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* hero: stack the product + both carousels as horizontal carousels */
  .hero { height: auto; min-height: 0; overflow: visible; padding-bottom: var(--space-lg); }
  .hero.cols-open .hero-body {
    --rail-w: 0px; --stock-w: 0px;
    display: flex; flex-direction: column; gap: var(--space-sm);
    grid-template-columns: none; row-gap: var(--space-sm); column-gap: 0;
  }
  .hero-left { order: 0; }
  .feature-rail { order: 1; }
  .variant-rail { order: 2; }
  .variant-rail, .feature-rail {
    align-self: auto; gap: 0; width: 100%;
    padding-left: 0; padding-right: 0; opacity: 1; pointer-events: auto; transform: none;
  }
  .rail-track {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    align-items: center;
    scroll-snap-type: x proximity;
    gap: var(--space-xs); padding: var(--space-2xs) var(--space-3xs) var(--space-xs) var(--space-3xs);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }
  /* compact rail title for orientation; hide interactive chrome (search/toggles) */
  .rail-head { display: flex; align-items: center; padding: 0 var(--space-3xs) var(--space-2xs); }
  .rail-head .rail-toggle, .rail-head .rail-search-input, .rail-head .rail-search-btn { display: none; }
  .rail-title { font-size: var(--fs-2xs); }
  .edge-toggle { display: none; }
  .feature-group { display: none; }
  /* carousels never collapse on mobile (horizontal scrollers) */
  .hero.cols-open.gallery-collapsed .hero-body { --rail-w: 0px; }
  .hero.gallery-collapsed .variant-rail,
  .hero.feature-collapsed .feature-rail { opacity: 1; pointer-events: auto; transform: none; }
  .feature {
    grid-template-columns: 56px minmax(0,1fr); flex: 0 0 auto;
    width: 188px; scroll-snap-align: start; transform: none;
  }
  .feature .f-thumb { width: 56px; height: 42px; }
  .feature:hover { transform: none; }
  .variant {
    grid-template-columns: 104px minmax(0,1fr); flex: 0 0 auto;
    height: 110px; width: 256px; padding: var(--space-xs); scroll-snap-align: start;
    align-items: center; transform: none;
  }
  .variant:hover { transform: none; }
  .variant .v-thumb { height: 100%; }
  .variant .v-tag { white-space: normal; line-height: 1.25; }
  .feature-edge { display: none; }
}
/* --- Responsive-Härtung (Audit): Seite darf NIE horizontal scrollen;
   Touch-Ziele auf brauchbare Trefferflächen --- */
@media (max-width: 900px) {
  /* Mobil-Lesefolge der Bühnen-Sektionen: Titel/Untertitel → BILD → Text.
     display:contents löst den Textblock auf, die Kinder ordnen sich im Grid */
  .amb-intro .principle-text, #was-der-amb-ist .principle-text { display: contents; }
  /* display:contents macht den Grid-Gap (36px) zum Abstand ZWISCHEN ALLEN Kindern —
     mobil deshalb gap 0, Rhythmus über gezielte Margins */
  .amb-intro .principle-grid, #was-der-amb-ist .principle-grid { gap: 0; }
  .amb-intro .principle-text .hero-fullname { margin-top: var(--space-xs); }
  .amb-intro .principle-text .hero-code { order: -3; }
  .amb-intro .principle-text .hero-fullname { order: -2; }
  .amb-intro .principle-media { order: -1; margin: var(--space-md) 0 var(--space-lg); }
  #was-der-amb-ist .principle-text .kicker { order: -3; }
  #was-der-amb-ist .principle-text .display { order: -2; }
  #was-der-amb-ist .principle-media { order: -1; margin: var(--space-md) 0 var(--space-lg); }
  /* erstes Modul kompakt an den Header anschließen */
  .amb-intro.section { padding-top: var(--space-xl); }

  /* breite Tabellen scrollen im eigenen Rahmen statt die Seite aufzuziehen
     (thead+tbody bleiben EIN anonymes Tabellen-Objekt — Spalten fluchten weiter) */
  .spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Touch: Nav-Akronyme und Footer-Links mit echter Trefferhöhe */
  .main-nav a { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .footer-col a { display: inline-block; padding: var(--space-2xs) 0; }
}
@media (hover: none), (max-width: 900px) {
  /* Galerie-Punkte: deutlich größere Treffer (~30px pro Punkt, ohne Überlappung).
     Spezifischer als die Basisregeln, die später in der Datei stehen */
  .stage-gallery .stage-pager { gap: var(--space-lg); padding: var(--space-sm) var(--space-md); }
  .stage-gallery .sp-dot { width: 10px; height: 10px; }
  .stage-gallery .sp-dot::after { margin: calc(-1 * var(--space-xs)); padding: var(--space-xs); }
  /* Rail-Controls auf Touch-Tablets */
  .rail-toggle { width: 34px; height: 34px; }
  .rail-search-btn { padding: var(--space-xs); margin: calc(-1 * var(--space-xs)) 0 calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)); }
}
@media (max-width: 560px) {
  .usp-strip .wrap { gap: 0; font-size: var(--fs-2xs); height: auto; padding: var(--space-2xs) 0; }
  .usp-strip span { padding: var(--space-3xs) var(--space-xs); }
  .usp-strip span + span::before { display: none; }   /* separators break when wrapping */
  .footer-grid { grid-template-columns: 1fr; }
  .nav-buy { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fx, .reveal, .hero-copy { transition: none !important; }
}

/* ============================================================
   STOREFRONT tiles (index.html) — product-family hero placeholders.
   Centralized here (single source of truth); index.html carries no <style>.
   Heading uses the shared AMB hero title system: .display .hero-code + .hero-fullname + .hero-sub.
   ============================================================ */
html { scroll-behavior: smooth; }
/* „Bewegung reduzieren" im System: Anker springen direkt (2026-10-18). Steht nach beiden
   `scroll-behavior: smooth` (auch oben bei html) — davor würde es überschrieben. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.store-tile, .hero { scroll-margin-top: 72px; }
.store-tile {
  position: relative; border-bottom: 1px solid var(--b4-line);
  min-height: clamp(620px, 92vh, 1040px);
  display: grid; grid-template-rows: auto 1fr; align-content: center;
  gap: clamp(26px, 5vh, 56px);
  padding: clamp(96px, 13vh, 150px) var(--b4-pad) clamp(56px, 9vh, 104px);
  text-align: center; overflow: hidden;
}
.store-tile.alt { background: var(--b4-ink-2); }
.store-copy { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vh, 20px); }
.store-cta { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-xs); }
.store-soon {
  display: inline-flex; align-items: center; gap: var(--space-xs); align-self: center;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--color-text-muted);
  border: 1px solid var(--b4-line-strong); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md);
}
.store-soon i { width: 14px; height: 14px; }
.store-media { display: grid; place-items: center; min-height: 0; }
.store-media img.product-shot {
  max-width: min(100%, 980px); max-height: 52vh; width: auto; height: auto;
  object-fit: contain;
}
.store-media image-slot {
  width: min(100%, 880px); aspect-ratio: 16 / 9; max-height: 52vh;
  border: 1px solid var(--b4-line); border-radius: var(--radius-card);
}
.store-copy, .store-media { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .store-media img.product-shot, .store-media image-slot { max-height: 40vh; }
}

/* lightbox X — pinned to the viewport top-right so it's always reachable, visible for confidence */
.lightbox-close { display: grid !important; color: var(--color-accent);
  position: fixed; top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px); }

/* dynamic search in the feature-rail header */
.rail-search-input { display: none; flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-nav); padding: var(--space-3xs) var(--space-2xs); border-bottom: 1px solid var(--b4-line-strong); }
.rail-search-input::placeholder { color: var(--color-text-muted); }
.rail-head.searching .rail-title { display: none; }
.rail-head.searching .rail-search-input { display: block; }
.rail-search-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: var(--space-3xs); display: grid; place-items: center; }
.rail-search-btn:hover, .rail-head.searching .rail-search-btn { color: var(--color-accent); }
.rail-search-btn svg { width: 14px; height: 14px; }

/* rail search: design-conform clear X (token-coloured) */
.rail-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:11px;width:11px;cursor:pointer;background:var(--color-text-muted);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;}
.rail-search-input:focus::-webkit-search-cancel-button{background:var(--color-accent);}

/* ============================================================
   Touch devices: kill sticky :hover (iPad keeps :hover after a tap →
   icons briefly brighten/shift for ~1s before resetting). On no-hover
   pointers, force the rest/active state so a tap snaps straight to final.
   ============================================================ */
@media (hover: none) {
  .feature:hover { border-color: var(--b4-line); background: transparent; transform: none; }
  .feature:hover::after { border-color: var(--b4-line-strong); }
  .feature:hover .f-thumb img { opacity: 0.5; }
  .feature.is-active:hover .f-thumb img { opacity: 1; }
  .fe-item:hover { opacity: var(--se-rest); border-color: transparent; }
  .fe-item.is-active:hover { opacity: 1; }
  .variant:hover { border-color: var(--b4-line); background: transparent; transform: none; }
  .variant:hover .v-state { border-color: var(--b4-line-strong); }
}


/* ============================================================
   PLP-CONTENT-SEKTIONEN — Inhaltsbereiche unterhalb des Produkt-Heros.
   Dokumentiert in brandbook.html §08. Stimme: Flächen statt Schatten,
   Hairlines, Mono NUR für Werte/Technik.
   ============================================================ */

/* --- Spec-/Übersichts-Tabelle (Schlüssel/Wert + Modellübersicht) --- */
.spec-table { width: 100%; border-collapse: collapse; }
/* Folgt die Tabelle direkt auf eine Display-Überschrift, braucht sie eigenen Abstand —
   .display trägt margin 0 (Betreiber-Befund CG-Abnahme 2026-08-20: die PLP-Kalibertabelle
   klebte an der H2; gilt ebenso auf beiden CG-PDPs unter „Was Sie messen können"). */
.display + .spec-table { margin-top: var(--space-xl); }

/* Kleinbild im Textfluss: rechts neben dem Absatz, zoombar; schmale Screens stellen es
   als eigene Zeile. (Betreiber, CG-Abnahme 2026-08-20 — Positionierskala und
   Niederzug-CAD eingebettet im Maßstab-Abschnitt der PLP.) */
.bild-im-text { float: right; width: min(220px, 42%); margin: var(--space-2xs) 0 var(--space-sm) var(--space-lg); }
.bild-im-text { position: relative; z-index: 1; }   /* über dem Folgeabsatz, auch während .fx einblendet — sonst ging der Klick zum Zoom ins Leere (Betreiber 2026-10-17) */
.bild-im-text img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.bild-im-text.bild-platzhalter .bp-notiz { font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .bild-im-text { float: none; width: 100%; margin: var(--space-md) 0; }
}
.spec-table th, .spec-table td {
  text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--b4-line); font-size: var(--fs-body); line-height: 1.55;
}
.spec-table thead th {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-small);
  color: var(--color-text-muted); font-weight: 700;
  border-bottom: 1px solid var(--b4-line-strong); padding-top: 0;
}
.spec-table tbody th { font-weight: 600; color: var(--color-text); width: 30%; }
.spec-table td { color: var(--color-text-muted); }
/* Wertespalte in Mono — Metrologie-Sprache (Werte sind Messwerte) */
.spec-table .val, .spec-table .val a { font-family: var(--font-mono); letter-spacing: 0.01em; font-variant-numeric: tabular-nums slashed-zero; }
.spec-table a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.spec-table .t-note { display: block; margin-top: var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-sm); }
/* Zeilen mit Modell-Link sind komplett klickbar */
.spec-table tbody tr.row-link { cursor: pointer; transition: background var(--mo-1) ease; }
.spec-table tbody tr.row-link:hover { background: var(--b4-card); }

/* --- Unterblock innerhalb einer Section (z. B. Material & Fertigung) --- */
.sub-block { margin-top: clamp(48px, 6vw, 76px); }
.sub-block h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h4); letter-spacing: 0.01em; margin: 0 0 var(--space-lg); color: var(--color-text);
}

/* --- FAQ-Akkordeon (native details/summary) --- */
.faq { max-width: 820px; border-top: 1px solid var(--b4-line); }
.faq details { border-bottom: 1px solid var(--b4-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) var(--space-3xs); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  color: var(--color-text); transition: color var(--mo-1) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: 0 0 auto;
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body);
  color: var(--color-accent);
}
.faq details[open] summary::after { content: '\2013'; }
.faq summary:hover { color: var(--color-accent-soft); }
.faq .faq-a { padding: 0 var(--space-3xs) var(--space-lg); max-width: 66ch; color: var(--color-text); opacity: 0.88; line-height: 1.7; }
.faq .faq-a p { margin: 0 0 var(--space-sm); }
.faq .faq-a p:last-child { margin-bottom: 0; }
.faq .faq-a a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }

/* --- Hinweis-Karten (ruhige Karte, bewusst OHNE Akzentkante) --- */
.note-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-2xl); }
.note-card {
  background: var(--b4-card); border: 1px solid var(--b4-line);
  border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl);
}
.note-card p { margin: 0; }
/* Kurzantwort-Karte (shopweit vereinheitlicht, Betreiber 2026-08-25): dieselbe Optik wie
   der Hinweis-Kasten, aber eigene Rolle — und Luft zur Überschrift darüber, die der
   Kasten direkt unter einer Display-H2 sonst nicht hätte. */
.note-card.kurz-gesagt { margin: var(--space-2xl) 0 var(--space-xl); }
.note-card a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }

/* Inline-Content-Links (Fließtext) — orange + Unterstrich, wie note-card/faq.
   Pflicht laut Brandbook: Orange vs. umgebendes Grau ist allein zu kontrastarm. */
.content-link { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.lede a:not(.btn), .f-link a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
/* Weiterführender Verweis als eigene Zeile am Abschnittsende. Die Regel hing an
   `.founder-text`, weil sie dort entstand — die beiden f-links im Fließtext der
   CG-Landing standen dadurch ohne Abstand da (2026-08-08). Gleiche Werte, ohne den
   Elternselektor: Im Gründerblock ändert sich nichts. */
.f-link { margin-top: var(--space-sm); font-size: var(--fs-body); }

/* Block-Zwischenüberschrift in einer .principle-text-Spalte (z. B. Fertigungs-Blöcke).
   Zwischen Section-H2 und Body — Display-Caps, kleiner als die Haupt-H2. */
.principle-text .sub-h {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.1; margin: 0 0 var(--space-md); color: var(--color-text);
  font-size: var(--fs-d3);
}

/* --- Bild-Platzhalter-Integration (image-slot in festen Rahmen) ---
   Rahmen definiert Größe & Position; der Slot füllt ihn vollständig. */
.principle-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.principle-media .frame-label { z-index: 2; pointer-events: none; }
/* Hochformat-Variante (z. B. Teile-Flatlay) — Bild ungeschnitten, Rahmen folgt dem Bild */
.principle-media.is-portrait { aspect-ratio: 3 / 4; width: 100%; max-width: 460px; justify-self: center; }
.founder-portrait { position: relative; overflow: hidden; }
.founder-portrait image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Community-/Setup-Fotoraster (4:3-Karten) --- */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.shot {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card);
  overflow: hidden; background: var(--b4-black); border: 1px solid var(--b4-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,248,236,0.05);
}
.shot image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Markenhinweis-Schlusszeile (vor dem Footer) --- */
.trademark-note { border-top: 1px solid var(--b4-line); padding: clamp(28px, 4vw, 44px) 0; }
.trademark-note p { margin: 0; max-width: 820px; color: var(--color-text-muted); font-size: var(--fs-xs); line-height: 1.65; }


/* --- Detail-Ledger — Konstruktionsdetails als ruhige, nummerierte Protokollzeilen
   (Engineering-Dokument statt Karten-Raster; Heritage Precision: Ruhe, Souveränität) --- */
.detail-ledger { border-top: 1px solid var(--b4-line); }
.detail {
  display: grid; grid-template-columns: clamp(56px, 7vw, 104px) minmax(200px, 0.85fr) 1.5fr clamp(150px, 15vw, 196px);
  gap: clamp(18px, 3vw, 56px); align-items: start;
  padding: clamp(26px, 3.5vw, 42px) 0; border-bottom: 1px solid var(--b4-line);
}
/* Bauteil-Legende unter einem nummerierten Produktbild (/cg-pro/, „Woraus der CG-PRO besteht"):
   je Bauteil eine Zeile, die Nummer im Kupferring wie im Bild. Als Fließtext („3 Präzisionswellen")
   las sie sich wie eine Stückzahl (CG-Launch-Prüfung, Betreiber 2026-10-18). */
.bauteil-legende {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2xs) var(--space-lg);
}
.bauteil-legende li { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; }
.bauteil-legende .d-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; border: 1px solid var(--color-accent); border-radius: var(--radius-round);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs);
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.detail .d-num {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-nav);
  letter-spacing: 0.1em; color: var(--color-accent); padding-top: var(--space-2xs);
  font-variant-numeric: tabular-nums slashed-zero;
}
.detail h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-md); letter-spacing: 0.01em; line-height: 1.4;
  margin: 0; color: var(--color-text); text-wrap: balance;
}
.detail p { margin: 0; color: var(--color-text-muted); line-height: 1.7; font-size: var(--fs-body); max-width: 62ch; }
.detail p strong { font-weight: 600; }   /* Betonung nur über das Gewicht (Brandbook) */
/* eingezoomtes Feature-Detail rechts: kleiner Bühnenrahmen, gleiche Kanten-Sprache
   wie alle Bildcontainer (Hairline-strong + Lichtsaum) */
.detail-media {
  position: relative; aspect-ratio: 4 / 3; align-self: center;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--b4-black); border: 1px solid var(--b4-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,248,236,0.05);
}
.detail-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .detail { grid-template-columns: 44px 1fr; row-gap: var(--space-sm); }
  .detail p { grid-column: 2; }
  .detail-media { grid-column: 2; width: min(100%, 260px); }
}
/* Lizenz-/Statuszeile unter dem Ledger */
.lic-line { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-2xl); color: var(--color-text-muted); line-height: 1.65; font-size: var(--fs-body); max-width: 72ch; }
.lic-line svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-accent); margin-top: var(--space-3xs); }
.lic-line strong { font-weight: 600; }   /* Betonung nur über das Gewicht (Brandbook) */

/* PLP-Intro: Hero-Titelsystem im Fließlayout — der zweite Selektor trägt den Fall
   Fullname-in-der-h1 (PLP-Kopf-Standard 2026-08-26), wo die Lede direkt auf die h1 folgt */
.principle-text .hero-fullname + .lede,
.principle-text h1 + .lede { margin-top: var(--space-xl); }
.sub-block .lede + .spec-table { margin-top: var(--space-md); }

/* PLP-Seitentitel: Hero-Titelsystem im Fließlayout eine Stufe ruhiger
   (die Konfigurator-App behält ihre Bühnen-Skala) */
.principle-text .hero-code { font-size: var(--fs-d1); text-shadow: none; }


/* --- Inline-CTA — ruhiger, hairline-getrennter Handlungsanstoß im Fließtext
   (kein lautes Banner; Heritage Precision: souverän, klar) --- */
.inline-cta {
  margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3.5vw, 40px);
  border-top: 1px solid var(--b4-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 36px);
}
.inline-cta .ic-lead {
  margin: 0; max-width: 46ch; color: var(--color-text);
  font-size: var(--fs-body); line-height: 1.6;
}
.inline-cta .ic-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
/* CTA-Anschluss im Fließtext einer Spalte (Intro, Funktion) */
.text-cta { margin: clamp(26px, 3vw, 36px) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 640px) { .inline-cta .ic-actions { width: 100%; } .inline-cta .ic-actions .btn { flex: 1 1 auto; justify-content: center; } }


/* --- Schaft-Teaser — Kompatibilitäts-Marquee unter dem Seitentitel.
   Line-art-Schäfte (assets/stocks_v2) laufen ruhig durch, pausieren bei Hover;
   Klick teleportiert mit Vorauswahl in den Konfigurator. Heritage: ruhig, technisch, einladend. --- */
/* AMB-Intro kompakt: Eyecatcher + Marquee gehören zum Panel, ohne Scrollen sichtbar */
.amb-intro.section { padding-bottom: clamp(30px, 4vw, 50px); }
.schaft-eyecatch {
  margin-top: clamp(18px, 2.6vw, 30px); padding-bottom: clamp(13px, 1.8vw, 18px);
  border-bottom: 1px solid var(--b4-line);
}
.schaft-eyecatch .se-q {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h4); letter-spacing: 0.01em; color: var(--color-text);
}
.amb-intro .stock-marquee {
  margin-top: clamp(12px, 1.8vw, 18px);
  /* Teaser-Breite = AMB-Block: Marquee läuft im Container statt full-bleed */
  max-width: var(--b4-maxw); margin-left: auto; margin-right: auto;
  padding-inline: var(--b4-pad); box-sizing: border-box;
}
.stock-marquee {
  position: relative; overflow: hidden; padding: var(--space-2xs) 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.stock-marquee-track { display: flex; gap: var(--space-xs); width: max-content; animation: stockScroll 78s linear infinite; }
.stock-marquee:hover .stock-marquee-track,
.stock-marquee:focus-within .stock-marquee-track { animation-play-state: paused; }
/* zusätzlich manuell scrollbar (JS-Antrieb): greifen & ziehen, Trackpad-Swipe */
.stock-marquee { cursor: grab; touch-action: pan-y; }
.stock-marquee.dragging { cursor: grabbing; }
.stock-marquee.dragging .stock-chip { pointer-events: none; }
/* Der Chip ist ein Bedienelement, keine Bühne: Er reagiert mit --mo-0, damit die
   Rückmeldung dem Zeiger folgt statt ihm hinterherzulaufen. Bei --mo-1/--mo-2 lief
   die Blende beim Überstreichen mehrerer Chips noch, wenn der Zeiger längst weiter war. */
.stock-chip {
  position: relative;
  flex: 0 0 auto; width: 176px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-card);
  cursor: pointer; font: inherit; text-align: center;
  transition: background var(--mo-0) ease, border-color var(--mo-0) ease, transform var(--mo-0) var(--ease);
}
.stock-chip img { width: 100%; height: 84px; object-fit: contain; opacity: 0.38; transition: opacity var(--mo-0) ease; }
.stock-chip .sc-name {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-text-muted);
  transition: color var(--mo-0) ease, opacity var(--mo-0) ease; font-variant-numeric: tabular-nums;
}
/* "Wählen →" überblendet das Label AN ORT UND STELLE — reserviert keine eigene
   Zeile mehr (die machte den Chip hoch und unten leer/asymmetrisch) */
.stock-chip .sc-pick {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity var(--mo-0) ease, transform var(--mo-0) ease;
}
.stock-chip:hover, .stock-chip:focus-visible {
  background: var(--b4-card); border-color: var(--b4-line); transform: translateY(-4px); outline: none;
}
.stock-chip:hover img, .stock-chip:focus-visible img { opacity: 0.96; }
.stock-chip:hover .sc-name, .stock-chip:focus-visible .sc-name { opacity: 0; }
.stock-chip:hover .sc-pick, .stock-chip:focus-visible .sc-pick { opacity: 1; transform: translateY(0); }
.stock-teaser .st-note { margin-top: clamp(22px, 3vw, 32px); margin-bottom: 0; }
@keyframes stockScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .stock-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stock-marquee-track { animation: none; }
}



/* Breite Gruppen-Bühne (z. B. BR-Serie): flaches Format, Freisteller ungeschnitten */
.principle-media.is-wide { aspect-ratio: 2.5 / 1; }
.principle-media.is-wide img { object-fit: contain; object-position: center; padding: 3% 4%; box-sizing: border-box; }
/* Gefüllte Bühnenbilder sind klickbar → Konfigurator. */
.principle-media { transition: border-color 250ms ease; }
.principle-media:has(image-slot[data-filled]) { cursor: pointer; }
.principle-media:has(image-slot[data-filled]):hover { border-color: var(--b4-line-strong); }



/* Bühne ~15 % breiter bei GLEICHER Höhe: Bildanteil 48.8 % → ~56 % (1fr/1.28fr);
   das Seitenverhältnis wächst von 4:3 auf 4.6:3, sodass die Rahmenhöhe der
   alten 4:3-Bühne entspricht. Gespiegelt für Sektionen mit Bild links. */
/* NUR Desktop: breite Bühne neben dem Text. Mobil (≤900) stapelt .principle-grid
   auf 1 Spalte — diese Regeln dürfen das nicht überschreiben (sonst kollabieren
   Galerie & Funktionsschnitt zu Briefmarken) */
@media (min-width: 901px) {
  .amb-intro .principle-grid { grid-template-columns: 1fr 1.28fr; }
  #was-der-amb-ist .principle-grid { grid-template-columns: 1.28fr 1fr; }
  /* 4.6:3 gilt nur der Intro-Galerie (Bühnen-Kompositionen). Das Funktionsprinzip-
     Foto in #was-der-amb-ist ist 4:3 — die breite Bühne schnitt per cover oben den
     Hinterschaft ab (Betreiber, 2026-08-26); die Sektion bleibt beim 4:3-Grundformat. */
  .amb-intro .principle-media { aspect-ratio: 4.6 / 3; }
}
/* seitlicher Abstand: das Produkt steht mit Luft auf der Bühne statt an den Rahmenkanten */
.amb-intro .principle-media image-slot,
#was-der-amb-ist .principle-media image-slot { inset: 4% 5%; width: auto; height: auto; }

/* --- Intro-Bühnen-Galerie: alle 5 Modelle blätterbar.
   Bilder crossfaden im festen Rahmen; unten rechts dezente Kupfer-Punkte. --- */
.stage-gallery { cursor: pointer; }
.stage-gallery .sg-img {
  position: absolute; inset: 4% 5%; width: 90%; height: 92%;
  object-fit: contain; pointer-events: none; -webkit-user-drag: none;
  opacity: 0; transition: opacity 1100ms var(--ease);
}
.stage-gallery .sg-img.is-active { opacity: 1; }
.stage-pager {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-pill);
  background: rgb(var(--glass-rgb) / 0.45); border: 1px solid var(--b4-line);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.sp-dot {
  width: 7px; height: 7px; padding: 0; border-radius: var(--radius-round);
  border: 1px solid rgb(var(--accent-rgb) / 0.55); background: transparent;
  cursor: pointer; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.sp-dot:hover, .sp-dot:focus-visible { border-color: var(--color-accent); transform: scale(1.35); outline: none; }
.sp-dot.is-active {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 7px rgb(var(--accent-rgb) / 0.55);
}
/* Punkte vergrößern die Trefffläche unsichtbar (Touch) */
.sp-dot::after { content: ''; display: block; margin: calc(-1 * var(--space-xs)); padding: var(--space-xs); border-radius: var(--radius-round); }
@media (prefers-reduced-motion: reduce) { .stage-gallery .sg-img { transition: none; } }


/* ============================================================
   PRODUKTE-PANEL (Nav-Konzept A) — ein Header-Eintrag "Produkte",
   öffnet ein Glas-Panel mit allen Familien (skaliert auf beliebig viele).
   Ein Muster für Desktop & Mobil. Dokumentiert in brandbook §05.
   ============================================================ */
.nav-products {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: none; border: none; cursor: pointer; padding: var(--space-xs) 0;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-nav);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text);
  transition: color var(--mo-1) ease;
}
.nav-products:hover, .nav-products:focus-visible { color: var(--color-accent-soft); outline: none; }
.nav-products .np-chev {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--mo-2) var(--ease);
}
.site-header.nav-open .nav-products .np-chev { transform: rotate(225deg) translate(-2px, -2px); }
.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 90;
  background: rgb(var(--glass-rgb) / 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--b4-line); border-bottom: 1px solid var(--b4-line-strong);
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity var(--mo-2) var(--ease), transform var(--mo-2) var(--ease), visibility 0s linear var(--mo-2);
}
.site-header.nav-open .nav-panel {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity var(--mo-2) var(--ease), transform var(--mo-2) var(--ease);
}
.nav-panel-inner { max-width: var(--b4-maxw); margin: 0 auto; padding: 6px var(--b4-pad) 10px; }
.nav-panel .np-item {
  display: grid; white-space: normal; grid-template-columns: clamp(110px, 13vw, 170px) 1fr; align-items: baseline;
  gap: clamp(14px, 2vw, 26px); padding: var(--space-md) var(--space-3xs); text-decoration: none;
  border-bottom: 1px solid var(--b4-line);
  transition: background var(--mo-1) ease;
}
.nav-panel .np-item:last-child { border-bottom: none; }
.np-code {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h6);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text);
  transition: color var(--mo-1) ease;
}
.np-name { font-family: var(--font-body); font-size: var(--fs-h6); color: var(--color-text-muted); text-transform: none; letter-spacing: 0.01em; font-weight: 400; }
.nav-panel .np-item:hover .np-code, .nav-panel .np-item:focus-visible .np-code { color: var(--color-accent-soft); }
.nav-panel .np-item.active .np-code { color: var(--color-accent); }
.nav-panel .np-item.active { position: relative; }
.nav-panel .np-item.active .np-code::after {
  content: ''; display: block; width: 26px; height: 2px; margin-top: var(--space-2xs);
  background: var(--color-accent); border-radius: var(--radius-hair);
}
@media (max-width: 900px) {
  .nav-panel .np-item { grid-template-columns: 1fr; gap: var(--space-3xs); padding: var(--space-sm) var(--space-3xs); }
}


/* ============================================================
   HEADER-SUCHE (.header-search) — aufklappendes Feld neben der Lupe.
   Verhalten in js/search-ui.js (nur Klassen-Schaltung, KEIN CSS im JS).
   Mobil (≤900): Feld liegt absolut über dem Logo-Bereich, Logo weicht.
   ============================================================ */
.header-actions { position: relative; }
.header-search {
  display: flex; align-items: center; overflow: hidden;
  width: 0; opacity: 0;
  transition: width var(--mo-2) var(--ease), opacity var(--mo-1) ease;
}
.site-header.search-open .header-search { width: clamp(150px, 22vw, 280px); opacity: 1; }
/* Offene Suche braucht die Breite des Header-CTAs — der Pill weicht, solange gesucht wird */
.site-header.search-open .header-cta { display: none; }
.header-search input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--color-text); font-family: var(--font-body);
  font-size: var(--fs-sm); letter-spacing: 0.01em;
  padding: var(--space-xs) var(--space-2xs) var(--space-xs) var(--space-xs);
  border-bottom: 1px solid var(--b4-line-strong);
  transition: border-color var(--mo-1) ease;
}
.header-search input:focus { border-bottom-color: var(--color-accent); }
.header-search input::placeholder { color: var(--color-text-muted); text-transform: none; }
.header-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; height: 12px; width: 12px; cursor: pointer;
  background: var(--color-text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;
}
.header-search input:focus::-webkit-search-cancel-button { background: var(--color-accent); }
.icon-btn.is-active { color: var(--color-accent); }
@media (max-width: 900px) {
  .header-search {
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    margin-right: var(--space-2xs); background: transparent; z-index: 5;
  }
  .site-header.search-open .header-search { width: min(calc(100vw - 190px), 260px); }
  /* Logo weicht sauber, statt unter dem Feld hervorzulugen */
  .brand { transition: opacity 200ms ease; }
  .site-header.search-open .brand { opacity: 0; pointer-events: none; }
}


/* --- Hybrid-Nav: Desktop zeigt die Akronym-Zeile (Klartext bei Hover),
   Mobil den "Produkte"-Button mit Familien-Panel. Ein Markup, eine Weiche. --- */
@media (min-width: 901px) {
  .nav-products, .nav-panel { display: none; }
}
@media (max-width: 900px) {
  .main-nav .nav-item { display: none; }
}


/* --- Abschluss-CTA — letzte Conversion-Sektion vor dem Markenhinweis --- */
.closing-cta { border-top: 1px solid var(--b4-line); }
.closing-cta .section-head { margin-bottom: 0; }
.closing-cta .text-cta { margin-top: var(--space-xl); }
.closing-cta .page-note { margin-top: var(--space-md); }

/* --- Header-CTA — dezenter Seiten-Anker neben den Header-Icons (nur auf PLPs mit Konfigurator) --- */
.header-cta {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-nav);
  text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none;
  color: var(--color-accent); padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--b4-line-strong); border-radius: var(--radius-badge);
  transition: color var(--mo-1) ease, border-color var(--mo-1) ease;
  white-space: nowrap;
}
.header-cta:hover { color: var(--color-accent-bright); border-color: var(--color-accent); }
@media (max-width: 700px) { .header-cta { display: none; } }


/* --- Modelltabelle mobil: Karten statt Quer-Scroll.
   thead verschwindet, jede Zeile wird eine Hairline-Karte; Spaltennamen
   kommen als Mikro-Label aus data-label. Zeilen bleiben komplett klickbar. --- */
@media (max-width: 700px) {
  .sub-block { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Fallback für künftige Tabellen */
  .model-table thead { display: none; }
  .model-table, .model-table tbody { display: block; }
  .model-table tbody tr { display: block; padding: var(--space-md) var(--space-3xs) var(--space-lg); border-bottom: 1px solid var(--b4-line); }
  .model-table tbody th, .model-table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .model-table tbody th { font-size: var(--fs-body); }
  .model-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xs);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted);
    margin: var(--space-sm) 0 var(--space-3xs);
  }
}
/* Standards-Band: die nowrap-Wertgruppen brauchen ~208px je Zelle —
   unter 480px deshalb einspaltig statt 2×2, sonst drückt das Band die Seite auf */
@media (max-width: 480px) {
  .standards .wrap { grid-template-columns: 1fr; }
  .std { padding-block: var(--space-lg); }
}


/* --- Mobiler Sticky-CTA — fester "Modell finden"-Einstieg am unteren Rand (nur ≤700px).
   Weicht per .is-suppressed (Klassen-Schaltung), wenn Konfigurator/Abschluss-CTA/Footer sichtbar sind. --- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  padding: 10px var(--b4-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--b4-ink); border-top: 1px solid var(--b4-line-strong);
  transform: translateY(0); transition: transform var(--mo-2) var(--ease);
}
.sticky-cta .btn { width: 100%; justify-content: center; }
.sticky-cta.is-suppressed { transform: translateY(110%); }
@media (max-width: 700px) { .sticky-cta { display: block; } }


/* --- Mobile-Feinschliff (Audit-Folge) --- */
/* 1) iOS-Auto-Zoom verhindern: Inputs unter 16px lösen auf iOS Safari einen
   Seiten-Zoom beim Fokussieren aus — Touch-Geräte bekommen deshalb 16px */
@media (hover: none) {
  .header-search input { font-size: var(--fs-body); }
}
/* Querformat-Handy (kurze Höhe): Header + Section-Padding kompaktieren,
   damit Inhalt nicht von Chrome + Leerraum dominiert wird. Kein Nav-Umbau. */
@media (orientation: landscape) and (max-height: 520px) {
  .header-inner { padding-block: var(--space-2xs) var(--space-2xs); row-gap: var(--space-2xs); }
  .brand img { height: 18px; }
  .section { padding-block: clamp(28px, 7vh, 64px); }
  .amb-intro.section { padding-top: var(--space-sm); }
  .hero { min-height: 420px; }
}

/* 2) Anker-Sprünge landen unter dem Sticky-Header — Sektionen halten Abstand.

   Die klebende Höhe ist nicht überall gleich: Auf den Familien-Landings steht unter der
   Kopfzeile (75 px) noch die Modell-Leiste (53 px). Ohne die Fallunterscheidung verschwand
   der obere Rand jedes Sprungziels genau um diese 53 px unter der Leiste.

   `:has()` löst das ohne Eingriff ins Markup — und ohne Unterstützung landet der Sprung
   lediglich etwas höher, statt zu brechen. */
:root                    { --b4-sticky: 75px; }
:root:has(.family-bar)   { --b4-sticky: 128px; }

main section[id] { scroll-margin-top: calc(var(--b4-sticky) + 12px); }
/* Anker unterhalb der Sektionsebene (z. B. #kaliberlisten auf der Ladebrett-PLP):
   ohne eigenen Versatz verschwände das Sprungziel unter dem Sticky-Header — und auf
   Familienseiten kommt die Modell-Leiste als zweite Sticky-Ebene dazu. */
#kaliberlisten { scroll-margin-top: calc(var(--b4-sticky) + 64px); }

/* Bühnen-Sektionen: Der Sprung soll beim KICKER landen, nicht an der Sektions-Oberkante —
   sonst füllt das Bühnen-Padding (64–120 px) den Viewport mit Leere (Betreiber, CG-Abnahme
   2026-08-20: „Modell wählen"/„2-µm-Video" sprangen ins Schwarze). Deshalb wird das eigene
   padding-top gegengerechnet; die Oberkante darf dabei unter dem Kopf verschwinden.
   amb-intro trägt seit heute 40 px und rechnet mit seinem eigenen Wert. */
main section.section[id]   { scroll-margin-top: calc(var(--b4-sticky) + 12px - clamp(64px, 8vw, 120px)); }
main section.amb-intro[id] { scroll-margin-top: calc(var(--b4-sticky) + 12px - var(--space-3xl)); }
@media (orientation: landscape) and (max-height: 520px) {
  main section.section[id] { scroll-margin-top: calc(var(--b4-sticky) + 12px - clamp(28px, 7vh, 64px)); }
  main section.amb-intro[id] { scroll-margin-top: calc(var(--b4-sticky) + 12px - var(--space-sm)); }
}

/* Sprungmarke des Konfigurators: Sie sitzt unmittelbar vor der App, damit diese ganz im
   Bild steht. Ohne eigenen Abstand — der Sektionsrand darüber ist bereits Luft genug.
   Seit 2026-08-24 über die Klasse statt der id adressiert (Betreiber-Befund, BR-PLP):
   Die BR-Landing trägt dieselbe id auf ihrer SEKTION, und die frühere #modellwahl-Regel
   schlug dort per Spezifität die kompensierte Sektionsregel — der Sprung landete ~100 px
   über der Überschrift im Leeren. Die Klasse trifft nur die Sprungmarke. */
.scroll-anchor { display: block; height: 0; }
.scroll-anchor[id] { scroll-margin-top: var(--b4-sticky); }
/* Direkt-Anker auf eine Karte mitten in einer Sektion (Begriffsseite → Positionierskalen):
   die Sektionsregel oben greift nur für section[id], die Karte braucht ihren eigenen Rand. */
#positionierskalen { scroll-margin-top: calc(var(--b4-sticky) + 12px); }

/* Die Bühne des Konfigurators füllt genau das, was der klebende Kopf übrig lässt.
   Die allgemeine Regel zieht 106 px ab — Kopfzeile plus USP-Streifen, richtig für die
   Bühne der Startseite, die man beim Laden ganz oben sieht. Diese hier steht dagegen weit
   unten auf der Seite: Wer hierher springt, hat den Streifen längst weggescrollt, dafür
   klebt die Modell-Leiste über ihm. Mit dem alten Wert ragte die App 22 px über den
   unteren Rand hinaus. */
#konfigurator .hero {
  height: calc(100svh - var(--b4-sticky));
  min-height: min(580px, calc(100svh - var(--b4-sticky)));
}
/* 3) Tap-Feedback: Touch kennt kein Hover — Antippen muss sichtbar reagieren */
.btn:active { transform: translateY(1px); }
.stock-chip:active { background: var(--b4-card); border-color: var(--b4-line); }
.sp-dot:active::after { opacity: 0.5; }
@media (hover: none) {
  .model-table tbody tr.row-link:active { background: var(--b4-card); }
  .faq summary:active { color: var(--color-accent-soft); }
  .nav-item:active .ni-code, .np-item:active { color: var(--color-accent); }
}


/* ============================================================
   LIGHTBOX — Klick auf ein Detail-/Prinzipbild zeigt eine größere Ansicht.
   JS hängt .zoomable an .detail-media/.principle-media und togglet .is-open;
   Bildquelle ist Inhalt (data-zoom-src, sonst src). Alle Styles hier.
   ============================================================ */
.zoomable { position: relative; cursor: zoom-in; }
/* Kein Zoom-Knopf mehr (2026-07-29). Sechs Varianten wurden am echten Produktfoto
   verglichen — Kreis, Plakette, Kupferknopf, dezente Ecke. Keine überzeugte: Jedes Zeichen
   liegt als Fremdkörper auf dem Produkt. Es sagt allein der Zeiger — `cursor: zoom-in` an
   `.zoomable` oben. Die Fläche selbst ist der Auslöser, das ist Zeigefläche genug. */

body.lb-locked { overflow: hidden; }
.media-lightbox {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(5,4,4,0.93); cursor: zoom-out;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
}
.media-lightbox.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 300ms var(--ease);
}
.media-lightbox:focus { outline: none; }
.lb-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vw, 24px); }
.lb-img {
  max-width: 94vw; max-height: 80vh; border-radius: var(--radius-card);
  border: 1px solid var(--b4-line-strong); box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  transform: scale(0.98); transition: transform 300ms var(--ease);
}
.lb-cta { transform: translateY(6px); opacity: 0; transition: opacity 300ms var(--ease) 120ms, transform 300ms var(--ease) 120ms; }
.media-lightbox.is-open .lb-cta { transform: translateY(0); opacity: 1; }
.media-lightbox.is-open .lb-img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .media-lightbox, .lb-img, .lb-cta { transition: none; }
  .lb-img, .lb-cta { transform: none; }
}

/* ============================================================
   PDP — Produkt-Detailseite (Shop): Breadcrumb, Galerie, Kaufbox,
   Familien-Navigation. Doku: Brandbook §09.
   ============================================================ */
.crumbs { padding: var(--space-md) 0 0; }
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  /* Breadcrumb in der Anmutung des Kickers (Betreiber, 2026-08-19): Mono, Versalien,
     gesperrt. Beide sind Orientierungselemente, keine Inhalte — sie sollen dieselbe
     Sprache sprechen. Bewusst NICHT übernommen wird das Kupfer des Kickers: In `.crumbs`
     ist Kupfer den Links vorbehalten, die aktuelle Seite bleibt grau. Wäre alles kupfer,
     sähe der Standort aus wie ein Link — und der Breadcrumb verlöre seine einzige
     Aussage, nämlich wo man steht. Zum Textkonzept („Monospace nur Zahlen und
     technische Angaben"): Ein Pfad ist eine technische Angabe, und der Kicker steht
     bereits so. */
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  /* Die Größe muss auf `li` stehen, nicht auf `ol`: tokens.css setzt
     `p, li, dd, dt, td, th, …` auf `--fs-body`, und das ist spezifischer als
     eine Vererbung vom Elternelement. Ohne diese Zeile stünde der Breadcrumb
     mit 16 px da — größer als die Hauptnavigation mit 12,8 px. */
  font-size: var(--fs-xs);
}
.crumbs li + li::before { content: '/'; color: var(--color-text-muted); opacity: 0.5; }
.crumbs a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.crumbs a:hover { color: var(--color-accent-soft); }
.crumbs [aria-current="page"] { color: var(--color-text); }
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(18px, 3vw, 36px) 0 clamp(40px, 5vw, 72px); }
.pdp-gallery { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.pdp-main { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--b4-line); border-radius: var(--radius-card); overflow: hidden; background: radial-gradient(122% 108% at 50% 38%, transparent 48%, rgba(0,0,0,0.6)), radial-gradient(58% 64% at 50% 50%, rgb(var(--accent-rgb) / 0.11), transparent 74%), var(--b4-black); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-sm); }
.pdp-thumb { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--b4-line); border-radius: var(--radius-card); overflow: hidden; background: var(--b4-steel); transition: border-color 200ms ease; }
.pdp-thumb:has(image-slot[data-filled]), .pdp-thumb:has(image-slot[src]) { cursor: pointer; }
.pdp-thumb:has(image-slot[data-filled]):hover, .pdp-thumb:has(image-slot[src]):hover { border-color: var(--accent-line); }
.pdp-main image-slot, .pdp-thumb image-slot { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-text-muted); }
.pdp-main image-slot { transition: opacity 220ms ease; }
.pdp-main.is-swapping image-slot { opacity: 0; }
.buy-box { border: 1px solid var(--b4-line); border-radius: var(--radius-card); background: var(--b4-card); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: var(--space-sm); }
.buy-box .pdp-title { font-size: var(--fs-d3); line-height: 1.12; margin: 0; }
.bb-sub { margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.bb-price-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-3xs); }
.bb-price { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-price-lg); letter-spacing: 0.01em; font-variant-numeric: tabular-nums slashed-zero; }
.avail { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-patina); }
.avail::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-round); background: currentColor; }
.avail.is-pending { color: var(--color-text-muted); }
.bb-tax { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.6; }
.bb-tax a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.bb-cta { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-3xs); }
.bb-cta .btn { flex: 1 1 auto; text-align: center; }
.bb-fit { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.bb-fit a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.bb-meta { margin: var(--space-3xs) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-md); border-top: 1px solid var(--b4-line); padding-top: var(--space-sm); }
.bb-meta dt { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-small); font-weight: 700; align-self: baseline; }
.bb-meta dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-h6); }
.bb-usps { list-style: none; margin: 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--b4-line); display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-h6); }
.bb-usps li { display: flex; align-items: center; gap: var(--space-xs); }
.bb-usps svg { width: 14px; height: 14px; color: var(--color-accent); flex: none; }
/* Schluss-Hinweis der Buy-Box (_b4_hinweis) — RED-Besprechung 2026-08-21 */
.bb-hinweis { margin: 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--b4-line); font-size: var(--fs-sm); color: var(--color-text-muted); }
/* Steht der Hinweis als note-card (AMB-Aufbauhöhe, 2026-08-26), gilt das
   Karten-Padding — die Zeilen-Regel darüber drückte den Text an die Rahmenlinie
   (padding 0 seitlich) und malte eine doppelte Trennlinie (border-top). */
.note-card.bb-hinweis { padding: var(--space-lg) var(--space-xl); border-top: 0; margin-top: var(--space-sm); }
.val-todo { color: var(--color-text-muted); font-style: italic; }
.compat-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.compat-grid li { display: contents; }
.compat-grid .stock-chip { text-decoration: none; }
.compat-grid .stock-chip.is-static { pointer-events: none; }
/* Storefront: Marken-Claim-Band über den App-Sektionen */
.brand-band { padding: clamp(46px, 7vw, 84px) 0 0; }
/* Folgt die Standards-Leiste direkt (Startseite ohne AMB-Block, Release 1), braucht sie Luft —
   sonst lagen die Sprungmarken auf ihrer Linie (Betreiber, 2026-10-18). Mit dem AMB-Block
   dazwischen greift die Regel nicht. */
.brand-band + .standards { margin-top: clamp(28px, 4vw, 48px); }
.brand-band .claim { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-d2); letter-spacing: 0.02em; line-height: 1.1; color: var(--color-text); text-wrap: balance; }
.brand-band .claim-sub { margin: var(--space-sm) 0 0; color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.6; }
/* Storefront: Anker-Chips unterm Claim — ein Klick zur richtigen App */
.app-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: clamp(20px, 3vw, 30px); }
.app-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--b4-line); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); text-decoration: none; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.app-nav a:hover, .app-nav a:focus-visible { border-color: var(--accent-line); background: var(--accent-tint); color: var(--color-accent-bright); outline: none; }
/* Storefront: Gruppenkopf über thematisch verwandten Apps (z. B. Wiederladen) */
.group-head { padding: clamp(40px, 6vw, 64px) 0 0; }
.group-head.alt { background: var(--b4-ink); border-top: 1px solid var(--b4-line); }
.group-head .display { margin: var(--space-2xs) 0 0; font-size: var(--fs-d4); }
/* Kompakte App-Sektion innerhalb einer Gruppe */
.app-compact { padding-block: clamp(28px, 4vw, 48px); }
.group-head + .app-compact { border-top: none; }
/* Familien-Leiste: sticky Modell-Schnellwahl direkt unterm Header (Landings).
   top = gemessene Header-Höhe (--header-h aus app.js) */
.family-bar { position: sticky; top: var(--header-h, 60px); z-index: 50; background: var(--b4-ink); border-bottom: 1px solid var(--b4-line); }
.family-bar .wrap { display: flex; align-items: center; gap: var(--space-2xs) var(--space-md); flex-wrap: wrap; padding-block: var(--space-xs); }
.fb-label { flex: none; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
/* zweiter Block der Leiste: die Wissens-Beiträge der Familie — mit Luft zum Modell-Block */
.fb-wissen { margin-left: var(--space-md); }
.family-bar .model-nav { margin-top: 0; gap: var(--space-2xs); }
.family-bar .model-nav a { min-height: 34px; padding: 0 var(--space-sm); font-size: var(--fs-small); }
@media (hover: none) { .family-bar .model-nav a { min-height: 44px; } }
/* Modell-Schnellwahl: Mono-Code-Chips, direkt zur PDP — ein Muster für Storefront,
   Landing-Intro und Header-Panel (Doku: Brandbook §09) */
.model-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.model-nav a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-sm); border: 1px solid var(--b4-line); border-radius: var(--radius-btn); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums slashed-zero; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.model-nav a:hover, .model-nav a:focus-visible { border-color: var(--accent-line); background: var(--accent-tint); color: var(--color-accent-bright); outline: none; }
/* das gerade angezeigte Modell: Angeklickt-Optik wie .fam-card.is-current —
   der Chip verweist auf die eigene Seite und ist deshalb stillgelegt */
.model-nav a.is-current { border-color: var(--accent-line); background: var(--accent-tint); color: var(--color-accent-bright); pointer-events: none; }
@media (hover: none) { .model-nav a { min-height: 44px; } }
/* Modell-Ebene im Produkte-Panel (Header): eingerückte Mono-Links unter der Familie */
.np-models { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); padding: var(--space-3xs) var(--space-3xs) var(--space-sm); border-bottom: 1px solid var(--b4-line); }
.np-item + .np-models { margin-top: -6px; }
.np-models a { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.05em; color: var(--color-text-muted); text-decoration: none; }
.np-models a:hover, .np-models a:focus-visible { color: var(--color-accent-bright); outline: none; }
/* Storefront-Apps: Preisanker unter der Familien-Beschreibung */
.app-price { margin: var(--space-lg) 0 0; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-h4); letter-spacing: 0.01em; font-variant-numeric: tabular-nums slashed-zero; color: var(--color-text); }
.app-price .ap-note { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--color-text-muted); margin-left: var(--space-xs); }
/* Storefront: h2-Stufe der Apps = PLP-Seitentitel-Skala (Brandbook §08) — keine eigene, größere Stufe */
.hero-code.sub { font-size: var(--fs-d1); }
@media (min-width: 901px) { .principle-grid.flip .principle-media { order: -1; } }
/* Video-Einbettung (Landing): 16:9-Rahmen in der Bühnen-Sprache, 2er-Raster mit Umbruch */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(20px, 3vw, 30px); }
.video-item { margin: 0; }
.video-frame { aspect-ratio: 16 / 9; border: 1px solid var(--b4-line); border-radius: var(--radius-card); overflow: hidden; background: var(--b4-black); }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-item .frame-label { display: block; margin-top: var(--space-xs); }
/* Komponentenliste (CG-PRO Landing): nummerierte Bauteile, mehrspaltig */
.comp-list { columns: 2 340px; column-gap: var(--space-3xl); margin: var(--space-xl) 0 0; padding-left: var(--space-lg); max-width: 980px; }
.comp-list li { break-inside: avoid; padding: var(--space-xs) 0; border-bottom: 1px solid var(--b4-line); line-height: 1.55; }
.comp-list li::marker { font-family: var(--font-mono); color: var(--color-accent-bright); font-size: var(--fs-sm); }
/* Kaliberliste (PDP Ladebrett): lange Listen mehrspaltig, Werte in Mono */
.cal-grid { columns: 3 170px; column-gap: var(--space-xl); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.cal-grid li { break-inside: avoid; padding: var(--space-2xs) 0; border-bottom: 1px solid var(--b4-line); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; font-variant-numeric: tabular-nums slashed-zero; }
/* Warn-Variante der Hinweis-Karte — Icon im Kupfer, Akzent-Hairline */
.note-warn { border-color: var(--accent-line); }
/* Icon INLINE in der ersten Zeile, kein hängender Einzug: Die Folgezeilen laufen
   linksbündig unter dem Dreieck durch (Betreiber, 2026-08-26 — „linksbündig mit
   2. Zeile"). vertical-align setzt das 18-px-Icon auf die Zeilenmitte. */
.note-warn p { margin: 0; }
.note-warn svg { display: inline-block; width: 18px; height: 18px; color: var(--color-accent-bright); vertical-align: -3.5px; margin-right: var(--space-xs); }
/* Familien-Gruppen unter „Weitere Modelle": je Familie ein beschriftetes Raster */
.fam-group { margin-top: var(--space-xl); }
.fam-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; margin: 0 0 var(--space-sm); font-family: var(--font-label); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
.fam-group-link { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.18em; }
.fam-group-link:hover { color: var(--color-accent-soft); }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-sm); }
.fam-card { display: block; border: 1px solid var(--b4-line); border-radius: var(--radius-card); background: var(--b4-card); overflow: hidden; text-decoration: none; color: var(--color-text); transition: border-color 200ms ease, background 200ms ease; }
.fam-card .fam-media { display: block; aspect-ratio: 16 / 10; background: var(--b4-steel); border-bottom: 1px solid var(--b4-line); }
.fam-card .fam-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fam-card .fam-media.is-contain img { object-fit: contain; padding: 10%; box-sizing: border-box; opacity: 0.8; }
.fam-card .fam-body { display: block; padding: var(--space-sm) var(--space-md) var(--space-md); }
.fam-card .fam-stocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-xs) var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--b4-line); }
.fam-card .fam-stocks img { width: 100%; height: 44px; object-fit: contain; opacity: 0.6; transition: opacity 200ms ease; }
.fam-card:hover .fam-stocks img { opacity: 0.95; }
.fam-card .fam-price { display: block; margin-top: var(--space-xs); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body); color: var(--color-text); font-variant-numeric: tabular-nums slashed-zero; }
.fam-card:hover { border-color: var(--accent-line); background: var(--b4-steel); }
.fam-card .fam-code { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body); color: var(--color-accent-bright); }
.fam-card .fam-desc { display: block; margin-top: var(--space-2xs); font-size: var(--fs-nav); color: var(--color-text-muted); line-height: 1.5; }
.fam-card.is-current { border-color: var(--accent-line); background: var(--accent-tint); pointer-events: none; }
.fam-card.is-current .fam-code { color: var(--color-text); }
@media (max-width: 940px) { .pdp { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pdp-thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }

/* ============================================================
   Formulare
   ------------------------------------------------------------
   Im statischen Entwurf kamen sie kaum vor — im Shop sind sie der Kaufweg:
   Checkout, Konto, Kontakt. Ein Feld, das nicht wie ein Feld aussieht, kostet
   die Bestellung.

   Haltung wie überall: dunkle Fläche, Haarlinie, Kupfer nur für Fokus und
   Auswahl. Kein Feld bekommt einen hellen Grund — das wäre ein Fremdkörper
   und zwingt den Blick weg vom Text.
   ============================================================ */

.b4-field,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
textarea, select {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--b4-line);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--mo-1) ease, box-shadow var(--mo-1) ease;
}

input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }

textarea { min-height: 130px; resize: vertical; line-height: var(--lh-copy); }

/* Zahlenfelder und alles Technische in der Zweitstimme. */
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }

/* Auswahllisten: eigener Pfeil, weil der System-Pfeil auf dunklem Grund verschwindet. */
select {
  appearance: none;
  padding-right: var(--space-3xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A69C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  cursor: pointer;
}

select option { background: var(--color-surface); color: var(--color-text); }

/* Fokus — sichtbar, in der Markenfarbe. Nie entfernen: Wer per Tastatur
   durch den Checkout geht, sieht sonst nicht, wo er steht. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Beschriftung */
label {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--fs-h6);
}

/* Pflichtfeld-Stern — Rot, weil es eine Bedingung ist, keine Markenaussage. */
label .required, abbr.required { color: var(--color-error); text-decoration: none; border: 0; }

/* Kästchen und Punkte: eigene Zeichnung. Die System-Varianten sind hell und
   lassen sich nicht einfärben — im Checkout stehen hier die Pflicht-Checkboxen
   für AGB und Widerruf, sie müssen unmissverständlich als angehakt lesbar sein. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  /* `inline-block` ist Pflicht, nicht Kosmetik: Bei `display: inline` ignoriert der
     Browser width und height — die Fläche schrumpft auf wenige Pixel und das Kästchen
     verschwindet praktisch. WooCommerce setzt genau das auf seine Checkboxen. */
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 var(--space-xs) 0 0;
  padding: 0;
  border: 1px solid var(--color-text-muted);
  background: var(--color-surface);
  cursor: pointer;
  vertical-align: -3px;
  transition: border-color var(--mo-1) ease, background var(--mo-1) ease;
}

input[type="checkbox"] { border-radius: var(--radius-badge); }
input[type="radio"]    { border-radius: var(--radius-round); }

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--color-accent); }

input[type="checkbox"]:checked, input[type="radio"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1304' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--color-text-on-accent) 0 32%, transparent 34%);
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Zeile aus Kästchen + Beschriftung — die Beschriftung ist Fließtext, nicht Label. */
.b4-check {
  display: flex;
  align-items: flex-start;
  gap: 0;
  color: var(--color-text-muted);
  line-height: var(--lh-copy);
  cursor: pointer;
}

.b4-check input { margin-top: 0.25em; }

/* Zustände */
.b4-field.is-invalid, input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--color-error); }
.b4-field.is-valid,   input.is-valid,   textarea.is-valid,   select.is-valid   { border-color: var(--color-ok); }

.b4-hint  { display: block; margin-top: var(--space-2xs); font-size: var(--fs-nav); color: var(--color-text-muted); }
.b4-error { display: block; margin-top: var(--space-2xs); font-size: var(--fs-nav); color: var(--color-error); }

input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Automatisch ausgefüllte Felder: Chrome legt einen eigenen Grund darüber, den weder
   `background` noch `color-scheme` allein entfernen — nur ein Inset-Schatten überdeckt ihn.
   Betrifft im Checkout jede Adresszeile. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: inset 0 0 0 1000px var(--color-surface);
  caret-color: var(--color-text);
  transition: background-color 9999s ease-out;
}

/* Suchformular im Seiteninhalt — die zweite Suche neben der Lupe im Kopf.
   Sie steht dort, wo jemand nicht weitergekommen ist: auf der Fehlerseite und
   bei einer Suche ohne Treffer. Deshalb ein sichtbares Feld mit Button, kein
   aufklappbares Icon wie in der Chrome.

   `.search-form`, `.search-field` und `.search-submit` sind die Klassen, die
   WordPress selbst vergibt — damit greift die Gestaltung auch dort, wo das
   Markup nicht aus dem Theme kommt. */
.search-form {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  max-width: 520px;
  margin: 0 0 var(--space-2xl);
}

.search-form .search-field { flex: 1 1 auto; min-width: 0; }
.search-form .search-submit { flex: none; }

@media (max-width: 520px) {
  .search-form { flex-direction: column; }
  .search-form .search-submit { justify-content: center; }
}


/* ============================================================
   Standards-Band, schmalste Stufe — MUSS am Dateiende stehen
   ============================================================
   Weiter oben schaltet eine Regel auf zwei Spalten. Bei gleicher Spezifität gewinnt
   die spätere, und die stand hinter der Ein-Spalten-Regel: Bei 481 px standen noch
   zwei Spalten, und die Seite ließ sich seitlich schieben. Deshalb hier ganz unten. */
@media (max-width: 560px) {
  .standards .wrap { grid-template-columns: 1fr; }
  .std + .std::before { display: none; }
  .std { border-top: 1px solid var(--b4-line); }
  .std:nth-child(-n+2) { border-top: 1px solid var(--b4-line); }
  .std:first-child { border-top: none; }
}


/* ============================================================
   Hero: die Galerieleiste weicht, bevor der Titel ausbricht
   ============================================================
   Das dreispaltige Hero (Schaftwahl · Bühne · Galerieleiste) braucht rund 1100 px.
   Bei 901 px stehen beide Seitenspalten schon auf ihrem Minimum — 238 und 244 px —,
   für die Mitte bleiben 365. Der Textblock darüber misst 432 px und stand damit
   67 px über seiner Spalte (gemessen 2026-08-03 bei 901, 940 und 941 px).

   Kleinrechnen lässt sich das nicht: Eine der drei Spalten muss weichen. Es ist die
   GALERIELEISTE, nicht die Schaftwahl — der Konfigurator ist auf dieser Seite das,
   weswegen jemand herkommt; die Varianten sind weiter unten noch einmal erreichbar.

   Verwendet werden dieselben Deklarationen wie bei `.gallery-collapsed`, damit sich
   das eingeklappte Hero hier nicht anders verhält als dort. Die Regel steht am
   Dateiende, weil `.hero.gallery-open .variant-rail` weiter oben spezifischer ist. */
@media (max-width: 1080px) {
  .hero.cols-open .hero-body { --rail-w: 0px; }

  /* `display: none`, nicht `opacity: 0`. Durchsichtig heißt nicht abwesend: Die
     Leiste behielt ihre Inhaltsbreite und schob das Hero 94 px über die Seite —
     ein neuer Fehler an der Stelle des alten. Bei `.gallery-collapsed` genügt die
     Deckkraft, weil dort eine Animation läuft; ein Media Query braucht keine. */
  .variant-rail,
  .hero.gallery-open .variant-rail {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BILD-PLATZHALTER — geplantes Bild, noch nicht produziert
   ══════════════════════════════════════════════════════════════════════════
   Das Gerüst einer Seite soll stehen, bevor jemand fotografiert oder rendert.
   Ein Platzhalter reserviert die Fläche und trägt die Motivbeschreibung sichtbar
   bei sich — damit beim Bildtermin niemand raten muss, was gebraucht wird.

   Er ist bewusst NICHT hübsch: gestrichelter Rahmen, Kupfer-Label, Modul-Kennung.
   Ein Platzhalter, den man für Gestaltung halten kann, überlebt bis in die
   Produktion. Vor jedem Release müssen alle aufgelöst sein (pruefen/bin/verify-markup
   zählt sie, release/releases/<version>/ANLEITUNG.md erinnert daran).
   ══════════════════════════════════════════════════════════════════════════ */
.bild-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-lg) 0 0;
  padding: var(--space-xl);
  min-height: 180px;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
/* ── Schema: gezeichnete Erklärgrafik ──────────────────────────────────────
   Inline-SVG statt Bilddatei. Ein Schema besteht ausschließlich aus Geometrie,
   Markern und Beschriftungen — genau dem, was der Blueprint für KI-Bilder
   ausschließt. Gezeichnet ist jede Linie überprüfbar, der Quelltext liegt
   versioniert im Repo, die Farben kommen aus den Tokens, und es bleibt auf
   jedem Display scharf. Strichstärke 2,5 im viewBox-Maß (Betreiber,
   2026-08-08: „Kreislinien dünner").
   ────────────────────────────────────────────────────────────────────────── */
.schema {
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg);
  border: 1px solid var(--b4-line);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
.schema svg { display: block; width: 100%; height: auto; }
.schema figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.bild-platzhalter .bp-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.bild-platzhalter .bp-id {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.bild-platzhalter .bp-notiz {
  margin: var(--space-2xs) 0 0;
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Konstruktions-Karten (PDP CG-PRO, 2026-08-19)
 *
 * Der Block „Acht Konstruktionsentscheidungen" ist ein Kartenraster mit einem
 * Bild je Entscheidung. Statt einer neuen Kartensprache erweitert er die
 * vorhandene `.info-card` um eine Medienfläche — Rahmen, Radius, Hintergrund
 * und Innenmaß bleiben damit exakt die der übrigen Karten.
 *
 * `.hat-bild` trägt das `overflow: hidden`, das die randlose Medienfläche am
 * Radius abschneidet; ohne die eigene Klasse würde es für ALLE Info-Karten
 * gelten und dort Fokusringe beschneiden.
 *
 * Sieben der acht Flächen sind bis zum Bildtermin Platzhalter. Sie erben von
 * `.bild-platzhalter`, bekommen hier aber das Bildseitenverhältnis und eine
 * mittige Ausrichtung — sonst stünde in jeder Karte ein linksbündiger
 * Textblock, wo später ein Bild sitzt. Die Motivnotizen stehen in
 * redaktion/cg-pro/bilder.md, nicht in der Karte.
 * ------------------------------------------------------------------------ */
.info-card.hat-bild {
  overflow: hidden;
  padding-top: 0;
}
.info-card .ic-media {
  display: block;
  margin: 0 calc(var(--space-lg) * -1) var(--space-md);
  aspect-ratio: 4 / 3;
  background: var(--b4-steel);
  border-bottom: 1px solid var(--b4-line);
}
.info-card .ic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.info-card .ic-media.bild-platzhalter {
  /* `display` zurückholen: Die Regel oben setzt `block` und ist spezifischer als
     `.bild-platzhalter`, sonst stünden Label und Kennung in einer Zeile aneinander. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-md);
  text-align: center;
}
/* Motivnotiz auch in der Karte (Betreiber, 2026-08-20: „Beschreibung überall,
   wenn nötig mit kleinem Font") — ersetzt das display:none vom 2026-08-19.
   Eine Stufe kleiner als die Basis-Notiz (--fs-sm), damit die schmale Fläche
   nicht überläuft; die Wortlaute pflegt bilder.md. */
.info-card .ic-media.bild-platzhalter .bp-notiz {
  font-size: var(--fs-xs);
}

/* Zwei Spalten statt drei: Der Beschreibungs-Reiter ist eine Textspalte von rund
   690 px — bei `minmax(220px, …)` der Basis-`.info-grid` entstehen darin drei
   Karten à 220 px, und die Fließtexte brechen nach zwei bis drei Wörtern um. */
.konstruktions-karten {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Keine automatische Silbentrennung in den Kartenüberschriften. `hyphens: auto`
   steht global aus gutem Grund (tokens.css: verhindert waagerechtes Schieben auf
   schmalen Viewports); in einer kurzen Versal-Überschrift zerlegt es aber Wörter
   mitten im Begriff („KU-GELGELAGERT"). Der Notumbruch über `overflow-wrap`
   bleibt erhalten, lange Wörter laufen also weiterhin nicht über. */
.konstruktions-karten h3 {
  hyphens: manual;
}

/* Dasselbe in der Kaufbox (2026-08-21). Der Produkttitel steht dort in Versalien und
   in einer schmalen Spalte; `hyphens: auto` zerlegte „RD107 — HOLOSUN®-ADAPTER FÜR
   OSCHATZ-SPORTMODELLE" zu „HOLO-SUN". Ein getrennter Markenname liest sich wie ein
   Fehler. Gemessen, bevor die Regel kam: Von 17 Produkttiteln sind nur zwei länger als
   28 Zeichen — die übrigen sind Kürzel und brechen nie. Der Notumbruch bleibt über
   `overflow-wrap` erhalten (tokens.css). */
.product_title {
  hyphens: manual;
}

/* ---------------------------------------------------------------------------
 * Einheiten in Versal-Überschriften (Betreiber-Fund, 2026-08-19)
 *
 * `text-transform: uppercase` verwandelt Einheiten-Zeichen mit: Aus „2 µm" wird
 * „2 MM" — das Mikro-Zeichen µ wird zum griechischen Groß-My, optisch ein M, und
 * aus zwei Mikrometern werden zwei Millimeter, Faktor 1000. Ebenso wird die
 * Wellentoleranz „h6" zu „H6" — und H6 ist in der Passungslehre eine BOHRUNGS-
 * Toleranz, also eine sachlich andere Angabe. Einheiten und Toleranzklassen sind
 * case-sensitiv; in Überschriften werden sie deshalb einzeln in dieses span
 * gewickelt. Nur das Token, nie den ganzen Satz — die Überschrift bleibt versal.
 * ------------------------------------------------------------------------ */
.tt-none {
  text-transform: none;
}

/* Video als Karte (Betreiber, 2026-08-19, PDP CG-PRO): Ein einzelner Videorahmen auf
   offenem Sektionsgrund „schwebt" — ihm fehlt der Kasten, den Info- und Hinweiskarten
   haben. `.karte` gibt dem Video dieselbe Verankerung: Kartengrund, Haarlinie, Radius,
   Innenabstand; die Beschriftung rückt mit in die Karte. Als Modifikator, nicht global —
   die Video-Reihe der Landing (zwei Rahmen nebeneinander, eigener .alt-Grund) bleibt
   unverändert, bis sie besprochen ist. */
.video-item.karte {
  background: var(--b4-card);
  border: 1px solid var(--b4-line);
  border-radius: var(--radius-card);
  padding: var(--space-sm);
}
.video-item.karte .frame-label {
  margin-top: var(--space-sm);
  padding-inline: var(--space-3xs);
}