/* ==========================================================================
   Formula GmbH — styles.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --bg-void:         #05060A;
  --bg-elevated:     #0B0D14;
  --bg-glass:        rgba(255, 255, 255, 0.03);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-glow:     rgba(14, 157, 91, 0.40);

  /* Text */
  --ink-primary:     #F4F5F7;
  --ink-secondary:   #A6ADBA;
  --ink-muted:       #5C636E;

  /* Marke */
  --brand-green:     #0E9D5B;
  --brand-glow:      #4EFFA9;

  /* Atmosphäre */
  --aurora-1: radial-gradient(circle at 20% 30%, rgba(14,157,91,0.18), transparent 50%);
  --aurora-2: radial-gradient(circle at 80% 60%, rgba(14,157,91,0.10), transparent 55%);
  --aurora-3: radial-gradient(circle at 50% 90%, rgba(78,255,169,0.08), transparent 50%);

  /* Markenschrift (Kundenvorgabe 2026-08-17): ITC Avant Garde Gothic für die
     Wortmarke und den Firmendeskriptor. Reihenfolge: lizenzierte bzw. lokal
     installierte Originalschrift → Century Gothic (von Monotype metrisch auf
     die ITC Avant Garde abgestimmt, kommt über Microsoft Office, NICHT mit
     Windows) → TeX Gyre Adventor als selbstgehosteter, metrisch identischer
     Klon. Details im @font-face-Block weiter unten. */
  --font-brand: 'Formula Sans',
                'ITC Avant Garde Gothic Pro', 'ITC Avant Garde Gothic Std',
                'ITC Avant Garde Gothic', 'AvantGarde Bk BT',
                'Century Gothic',
                'TeX Gyre Adventor', 'URW Gothic',
                system-ui, sans-serif;

  /* Layout */
  --maxw:            1280px;
  --gutter:          clamp(24px, 5vw, 64px);
  --section-y:       clamp(96px, 12vw, 160px);
  --radius:          16px;
  --radius-pill:     999px;
}

/* --------------------------------------------------------------------------
   Markenschrift
   --------------------------------------------------------------------------
   ITC Avant Garde Gothic ist lizenzpflichtig (Monotype/ITC) und darf nicht
   ohne Lizenz ausgeliefert werden. Der Aufbau hier deckt drei Fälle ab, ohne
   dass an einer der 28 Seiten etwas geändert werden müsste:

   1. Besucher mit lokal installierter ITC Avant Garde Gothic sehen sie sofort
      — die local()-Einträge unten decken die gängigen Schreibweisen ab
      (Pro- und Std-Fassung, PostScript- und Klarnamen).
   2. Sobald die lizenzierten Webfont-Dateien vorliegen, werden sie unter
      fonts/ abgelegt und die vorbereitete url()-Zeile eingekommentiert.
      Vorher steht dort bewusst KEINE url(), damit kein 404 pro Seitenaufruf
      entsteht — ohne Treffer fällt die Face-Definition einfach durch.
   3. Alle übrigen Besucher bekommen TeX Gyre Adventor (siehe unten).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Formula Sans';
  src: local('ITC Avant Garde Gothic Pro Book'), local('ITCAvantGardePro-Bk'),
       local('ITC Avant Garde Gothic Std Book'), local('ITCAvantGardeStd-Bk'),
       local('ITC Avant Garde Gothic Book'), local('ITC Avant Garde Gothic');
       /* , url('../fonts/avantgarde-book.woff2') format('woff2') */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Formula Sans';
  src: local('ITC Avant Garde Gothic Pro Demi'), local('ITCAvantGardePro-Demi'),
       local('ITC Avant Garde Gothic Std Demi'), local('ITCAvantGardeStd-Demi'),
       local('ITC Avant Garde Gothic Demi');
       /* , url('../fonts/avantgarde-demi.woff2') format('woff2') */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* TeX Gyre Adventor ist kein Ersatz, sondern derselbe Schriftschnitt:
   URW zeichnete URW Gothic L als metrisch identischen Klon der ITC Avant
   Garde Gothic und gab ihn für TeX Gyre unter der GUST Font License frei
   (juristisch identisch zur LPPL 1.3c — kommerzielle Nutzung und
   Selbsthosting ausdrücklich erlaubt, Lizenztext in fonts/).
   Nachgemessen: x-Höhe 547, Versalhöhe 739, „o" 655, „n" 610, „H" 683 —
   identisch mit URW Gothic Book.
   Bewusst NICHT die Artifex-Fassung aus urw-base35-fonts: die steht unter
   AGPL-3.0, deren Font Exception nur das Einbetten in PDF/PostScript deckt,
   nicht das Ausliefern als Webfont. */
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Kein natives scroll-behavior: smooth — Lenis setzt die Scrollposition
   pro Frame; eine zusätzliche Browser-Glättung macht das Scrollen zäh. */

body {
  background: var(--bg-void);
  color: var(--ink-primary);
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  min-width: 360px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

::selection {
  background: rgba(14, 157, 91, 0.35);
  color: var(--ink-primary);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 500;
  padding: 10px 18px;
  background: var(--brand-green);
  color: var(--bg-void);
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.skip-link:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1 {
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}

h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 1.3;
}

p, li {
  font-size: 16px;
  line-height: 1.65;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Atmosphärische Ebenen
   -------------------------------------------------------------------------- */
.aurora {
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  opacity: 0.6;
  background-image: var(--aurora-1), var(--aurora-2), var(--aurora-3);
  animation: aurora-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.06); }
  100% { transform: translate(-2%, 3%) scale(1.02); }
}

/* Filmkorn als einmalig gerastertes, gekacheltes Hintergrundbild statt
   Live-SVG-Filter mit mix-blend-mode — letzterer erzwingt bei jedem
   Scroll-Frame eine Neukomposition des gesamten Viewports. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  transform: translateZ(0);
}

main {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  position: relative;
  z-index: 1;
}

.topo {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.topo svg {
  width: 200%;
  height: 100%;
}
.topo path {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1;
  animation: topo-flow linear infinite;
}

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

/* --------------------------------------------------------------------------
   Layout-Helfer
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* --------------------------------------------------------------------------
   Glaskomponenten
   -------------------------------------------------------------------------- */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px -10px var(--border-glow);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 24px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  --tracking: 0.015em;
  /* Bei 22–26 px zählt jedes Zehntel Pixel: der Punkt braucht hier relativ
     mehr Abstand als im Hero, damit er nicht am „a" klebt. */
  --mark-gap: 0.09em;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: calc(-1 * var(--tracking));
  color: var(--brand-green);
  text-transform: lowercase;
  transition: color 200ms ease-out;
  display: inline-flex;
  align-items: baseline;
}
.brand-logo:hover {
  color: var(--brand-glow);
}

/* Firmenlogo als Marken-Punkt hinter dem Schriftzug.
   Weißer Grund mit zwei grünen Wellen (Kundenvorgabe 2026-08-20). Bewusst
   ohne den grünen Rahmen des Originals: der ist nur 9,6 % der Höhe stark und
   skaliert im Header (10 px) auf eine Sub-Pixel-Haarlinie — dort zerfiele das
   Zeichen zu einem grauen Fleck.
   Die Farben stehen fest im Inline-SVG, das Zeichen ist damit in jedem Kontext
   identisch — deshalb hier keine color-Deklaration mehr. */
.brand-mark {
  display: inline-block;
  height: 0.40em;
  aspect-ratio: 2224 / 1944;
  flex: 0 0 auto;
  /* Die runden Buchstaben (o, a, u) von Geist 900 ragen 0.015em unter die
     Grundlinie — ohne den Versatz sitzt das Zeichen optisch zu hoch. */
  transform: translateY(0.015em);
  /* Abstand zum Schriftzug: letter-spacing wirkt in CSS AUCH hinter dem
     letzten Buchstaben und zieht das Zeichen dadurch in die Tusche des „a"
     (im Hero waren das 10,9 px Überlappung). Deshalb erst das Tracking
     zurückholen, dann den optischen Abstand dazugeben. Über --tracking
     bleibt die Korrektur automatisch an der jeweiligen Laufweite. */
  margin-left: calc(var(--tracking, 0em) + var(--mark-gap, 0.05em));
}
.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-hairline);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-primary);
  transition: border-color 200ms ease-out, background 200ms ease-out, backdrop-filter 200ms ease-out;
}
.menu-trigger:hover {
  border-color: var(--border-glow);
}
.menu-trigger i, .menu-trigger svg {
  width: 16px;
  height: 16px;
}

.header-scrolled .menu-trigger {
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  background: rgba(11, 13, 20, 0.8);
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
  color: var(--bg-void);
  font-weight: 500;
  font-size: 15px;
  transition: background 200ms ease-out, transform 200ms ease-out;
  will-change: transform;
}
.cta-pill:hover {
  background: var(--brand-glow);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Fullscreen-Menü
   -------------------------------------------------------------------------- */
.mega-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 6, 10, 0.94);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: none;
  overflow-y: auto;
}
.mega-menu.open {
  display: block;
}

.mega-menu-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 120px var(--gutter) 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  min-height: 100%;
  align-content: start;
}

@media (min-width: 768px) {
  .mega-menu-inner {
    grid-template-columns: 1.4fr 1fr;
  }
}

.mega-menu-close {
  position: fixed;
  top: 24px;
  right: var(--gutter);
  z-index: 210;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  border: 1px solid var(--border-hairline);
  transition: border-color 200ms ease-out;
}
.mega-menu-close:hover {
  border-color: var(--border-glow);
}
.mega-menu-close i, .mega-menu-close svg {
  width: 20px;
  height: 20px;
}

.mega-menu-main {
  list-style: none;
}
.mega-menu-main > li {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(16px);
}
.mega-menu.open .mega-menu-main > li {
  animation: menu-reveal 400ms ease-out forwards;
}

@keyframes menu-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.mega-menu-main > li > a {
  font-weight: 500;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-primary);
  transition: color 200ms ease-out;
}
.mega-menu-main > li > a:hover,
.mega-menu-main > li > a:focus-visible {
  color: var(--brand-green);
}

/* Inline-Unterpunkte (mobil) */
.mega-menu-sub-inline {
  list-style: none;
  margin-top: 10px;
}
.mega-menu-sub-inline li {
  margin-bottom: 6px;
}
.mega-menu-sub-inline a {
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-secondary);
  transition: color 200ms ease-out;
}
.mega-menu-sub-inline a:hover,
.mega-menu-sub-inline a:focus-visible {
  color: var(--brand-glow);
}

/* Rechte Spalte (Desktop) */
.mega-menu-subpanel {
  display: none;
  border-left: 1px solid var(--border-hairline);
  padding-left: 48px;
  align-self: stretch;
}
.mega-menu-subpanel ul {
  list-style: none;
  position: sticky;
  top: 140px;
}
.mega-menu-subpanel li {
  margin-bottom: 14px;
}
.mega-menu-subpanel a {
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-secondary);
  transition: color 200ms ease-out;
}
.mega-menu-subpanel a:hover,
.mega-menu-subpanel a:focus-visible {
  color: var(--brand-glow);
}

@media (min-width: 768px) {
  .mega-menu-sub-inline {
    display: none;
  }
  .mega-menu-subpanel {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Hero (index)
   -------------------------------------------------------------------------- */
/* Höhe: min-height ist ein Minimum — der Hero wächst bei Bedarf darüber hinaus,
   der Inhalt kann also nie abgeschnitten werden. Der Deckel von 820px ersetzt das
   frühere 100vh: der Hero-Inhalt misst rund 765px, ein reines 100vh blies die
   Sektion auf großen Monitoren auf bis zu 1245px auf und schob das Kachelraster
   weit unter die Falz. svh statt vh, damit die ein- und ausfahrende Adressleiste
   mobiler Browser die Höhe nicht springen lässt.
   820 ist auf den häufigsten Desktop gerechnet: 1920×1080 ergibt rund 990px
   Viewport, daraus 820 + 56 Padding = die erste Kachelreihe ragt etwa 110px ins
   Bild. Unterhalb von rund 830px Fensterhöhe trägt der Hero-Inhalt allein schon
   die volle Höhe — dort wirkt nur noch das kleinere Section-Padding. */
.hero {
  min-height: min(100svh, 820px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 48px;
  padding-top: 140px;
  padding-bottom: 64px;
}

@media (min-width: 900px) {
  .hero {
    /* minmax(0,…): die große Wortmarke darf die Spalte nicht aufblähen */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    padding-top: 110px;
    gap: 32px;
  }
}

/* Das Kachelraster rückt dicht an den Hero (Kundenwunsch 2026-08-24). Bewusst
   über den Geschwisterselektor statt über eine neue Klasse: die Beziehung „die
   Sektion direkt unter dem Hero“ ist genau das, was gemeint ist, und so bleiben
   alle 28 HTML-Dateien und der Generator unangetastet. Spezifität (0,2,0)
   schlägt .section (0,1,0) ohne !important. Das untere Padding bleibt auf
   --section-y, damit der Abstand zum Adressblock unverändert ist. */
.hero + .section {
  padding-top: clamp(32px, 4vw, 56px);
}

.hero.no-webgl {
  grid-template-columns: 1fr;
}
.hero.no-webgl .hero-stage {
  display: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-secondary);
  margin-bottom: 28px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-green);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 157, 91, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(14, 157, 91, 0); }
}

/* Wortmarke als dominantes Hero-Element (Kundenfassung 2026-08-17).
   Rein dekorativ — die inhaltliche H1 steht direkt darunter. */
.hero-wordmark {
  --tracking: 0.02em;
  font-family: var(--font-brand);
  font-weight: 700;
  /* Rückfalllösung; darunter exakt an die Spaltenbreite gekoppelt, damit die
     Wortmarke nie in die Molekülspalte überläuft. */
  font-size: clamp(56px, 10vw, 148px);
  line-height: 0.82;
  letter-spacing: calc(-1 * var(--tracking));
  color: var(--ink-primary);
  display: flex;
  align-items: baseline;
  margin-bottom: 30px;
}
/* Ein Punkt in Geist 900 ist 0.18em hoch und 0.26em breit. Bei 0.26em Höhe
   belegt das Markenzeichen (Seitenverhältnis 1.144) mit 0.30em fast genau
   dieselbe Fläche wie der Punkt, den es ersetzt. */
.hero-wordmark .brand-mark {
  height: 0.26em;
}

/* „formula" plus Markenzeichen brauchen zusammen das 3,90-fache der
   Schriftgröße (gemessen mit der Markenschrift bei --tracking 0.02em).
   Bei 25,7cqw wäre die Textspalte exakt ausgefüllt — 23.5cqw lässt rund 8 %
   Luft, sodass die Wortmarke nie in die Molekülspalte läuft.
   Der Wert hängt an --tracking: wird die Laufweite geändert, ändert sich die
   Breite mit und der Wert muss nachgemessen werden. Über die Fontstack selbst
   ist er stabil, weil Century Gothic und TeX Gyre Adventor metrisch auf die
   ITC Avant Garde abgestimmt sind. */
.hero-copy {
  container-type: inline-size;
}
@supports (container-type: inline-size) {
  .hero-wordmark {
    font-size: 23.5cqw;
  }
}

.hero h1 {
  margin-bottom: 22px;
}
/* Firmendeskriptor in der Markenschrift (Kundenvorgabe 2026-08-17). */
.hero .hero-descriptor {
  display: block;
  font-family: var(--font-brand);
  font-size: clamp(21px, 2.4vw, 33px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 24ch;
  color: var(--ink-primary);
}
.hero .hero-company-de {
  display: block;
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink-muted);
  margin-top: 11px;
  max-width: 34ch;
}
.hero h1 .scramble-word {
  display: inline-block;
}

.hero-subline {
  font-size: 17px;
  color: var(--ink-secondary);
  max-width: 46ch;
  margin-bottom: 32px;
}

/* Leistungszeile mit Gedankenstrichen wie im Original der alten Website;
   EU-Import / Re-test als hervorgehobene Pille (Kundenfassung 2026-08-17). */
.hero-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 10px;
  font-size: 14px;
  color: var(--ink-secondary);
  margin-bottom: 34px;
}
.hero-claim .sep {
  color: var(--ink-muted);
}
.hero-claim .claim-core {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 5px 15px;
  border: 1px solid var(--brand-green);
  border-radius: var(--radius-pill);
  background: rgba(14, 157, 91, 0.08);
  color: var(--brand-glow);
  font-weight: 500;
  box-shadow: 0 0 24px rgba(14, 157, 91, 0.10);
}
/* Die Pille führt zum Kapitel „Import and Warehouse for Quarantine Storage"
   (Kundenwunsch 2026-08-20). */
a.claim-core {
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
a.claim-core:hover,
a.claim-core:focus-visible {
  background: rgba(14, 157, 91, 0.18);
  border-color: var(--brand-glow);
  color: #FFFFFF;
}

.hero-claim .claim-core::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 10px rgba(14, 157, 91, 0.6);
  flex: 0 0 auto;
}

/* Karte 01 (EU-Import) dauerhaft mit grünem Balken hervorgehoben —
   ohne den geschlossenen Rasterblock aufzubrechen. */
.nav-grid-card.nav-grid-highlight::after {
  opacity: 1;
}
.nav-grid-card.nav-grid-highlight .nav-grid-index {
  color: var(--brand-glow);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--brand-green);
  transition: color 200ms ease-out, gap 200ms ease-out;
}
.text-link:hover {
  color: var(--brand-glow);
  gap: 12px;
}
.text-link i, .text-link svg {
  width: 16px;
  height: 16px;
}

/* Bühne für das Molekül: rechts neben der Wortmarke, mit Bodenschatten
   (Idee aus der Kundenfassung 2026-08-17). */
.hero-stage {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 620px;
}

/* Quadratisch: das Molekül wird in jeder Rotationslage über seine
   Hüllkugel eingepasst — bei gleichen Kantenlängen bleibt kein Leerraum. */
#hero-canvas {
  /* Die Höhenbegrenzung muss über die BREITE laufen: ein max-height würde
     nur die Höhe beschneiden und das Quadrat wieder aufheben. */
  width: min(100%, 62vh);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  pointer-events: none;
}
@media (max-width: 899px) {
  #hero-canvas {
    width: min(100%, 46vh);
  }
}
#hero-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Wirkstoffbezeichnung unter dem Modell (Kundenwunsch 2026-08-17).
   Schreibweise exakt wie im Substanzregister der Seite. */
.hero-stage-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -26px;
  text-align: center;
  color: var(--ink-muted);
  pointer-events: none;
}

.hero-stage-shadow {
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 6px;
  height: 16px;
  border-radius: 50%;
  background: rgba(14, 157, 91, 0.22);
  filter: blur(12px);
  pointer-events: none;
  animation: hero-stage-shadow 4.8s ease-in-out infinite;
}
@keyframes hero-stage-shadow {
  0%, 100% { transform: scaleX(0.82); opacity: 0.28; }
  50%      { transform: scaleX(1.08); opacity: 0.16; }
}

/* --------------------------------------------------------------------------
   Navigationsraster (index)
   -------------------------------------------------------------------------- */
/* Geschlossenes Haarlinien-Raster mit bildfüllenden Karten
   (Gestaltung aus der Kundenfassung 2026-08-17, Bilder aus unserem Bestand). */
.nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border-hairline);
  border-left: 1px solid var(--border-hairline);
}
@media (min-width: 560px) {
  .nav-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .nav-grid { grid-template-columns: repeat(3, 1fr); }
}

.nav-grid-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 232px;
  padding: 24px;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  /* Bildquelle kommt je Karte als --card-img aus dem Markup.
     background-blend-mode: color legt einen Grünton über die Luminanz des
     Fotos — dadurch reihen sich auch fremdfarbige Motive in die Markenwelt ein. */
  background-color: var(--bg-elevated);
  background-image:
    linear-gradient(rgba(14, 157, 91, 0.20), rgba(14, 157, 91, 0.20)),
    var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: color, normal;
  transition: transform 200ms ease-out;
}
.nav-grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Abdunkelung auf die Motive abgestimmt: die Kartenbilder sind von Haus aus
     dunkel (mittlere Helligkeit oben 51/255), deshalb genügt oben ein leichter
     Schleier. Die weiße Ziffer erreicht damit immer noch 8,7:1 Kontrast auf
     dem hellsten Motiv. Unten bleibt es kräftig, dort steht die Überschrift. */
  background:
    linear-gradient(180deg, rgba(5,6,10,0.34) 0%, rgba(5,6,10,0.44) 46%, rgba(5,6,10,0.90) 100%),
    linear-gradient(90deg, rgba(14,157,91,0.14), transparent 64%);
  transition: background 200ms ease-out;
}
.nav-grid-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-green);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.nav-grid-card:hover {
  transform: translateY(-2px);
}
.nav-grid-card:hover::before {
  background:
    linear-gradient(180deg, rgba(5,6,10,0.18) 0%, rgba(5,6,10,0.30) 46%, rgba(5,6,10,0.86) 100%),
    linear-gradient(90deg, rgba(14,157,91,0.18), transparent 64%);
}
.nav-grid-card:hover::after,
.nav-grid-card:focus-visible::after {
  opacity: 1;
}
/* Der globale Fokusring liegt 3px AUSSERHALB der Karte und wird im
   lückenlosen Raster von der Nachbarkarte überdeckt — deshalb nach innen. */
.nav-grid-card:focus-visible {
  outline-offset: -4px;
}

/* Kartenmotive. Bewusst hier und nicht als Inline-Style im HTML: relative
   URLs in Custom Properties werden gegen das Stylesheet aufgelöst, nicht
   gegen das Dokument — als Inline-Style zeigten die Pfade auf css/img/. */
/* Motive aus der Fassung des Kunden vom 2026-08-19, Zuordnung exakt wie dort.
   Bewusst als Dateien statt als base64-Data-URIs wie in der Vorlage: dort
   blähten die neun Bilder die Startseite auf ~700 KB auf, blockierten das
   erste Rendern und waren nicht cachebar. Als Dateien werden sie einmal
   geladen und danach aus dem Cache bedient.
   Die echten Werksfotos bleiben auf den jeweiligen Unterseiten. */
.nav-grid-card:nth-child(1) { --card-img: url(../img/card-import-warehouse.jpg); }
.nav-grid-card:nth-child(2) { --card-img: url(../img/card-development.jpg); }
.nav-grid-card:nth-child(3) { --card-img: url(../img/card-manufacturing.jpg); }
.nav-grid-card:nth-child(4) { --card-img: url(../img/card-analytical-equipment.jpg); }
.nav-grid-card:nth-child(5) { --card-img: url(../img/card-clinical-supplies.jpg); }
.nav-grid-card:nth-child(6) { --card-img: url(../img/card-gmp-service.jpg); }
.nav-grid-card:nth-child(7) { --card-img: url(../img/card-special-service.jpg); }
.nav-grid-card:nth-child(8) { --card-img: url(../img/card-experiences.jpg); }
.nav-grid-card:nth-child(9) { --card-img: url(../img/card-cooperations.jpg); }
.nav-grid-card .nav-grid-index {
  color: var(--ink-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.nav-grid-card h3 {
  color: var(--ink-primary);
  max-width: 20ch;
  transition: color 200ms ease-out;
}
.nav-grid-card:hover h3 {
  color: var(--brand-glow);
}

/* --------------------------------------------------------------------------
   Seitenkopf für Unterseiten
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: 180px;
  padding-bottom: 48px;
}
.page-head .page-eyebrow {
  color: var(--ink-secondary);
  margin-bottom: 20px;
  display: inline-block;
}
.page-head h1 {
  font-size: clamp(40px, 5vw, 72px);
}
.page-subtitle {
  margin-top: 20px;
  font-size: 18px;
  color: var(--ink-secondary);
  max-width: 60ch;
}

.page-body {
  padding-bottom: var(--section-y);
}
.page-body > * + * {
  margin-top: 32px;
}
.page-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 20px;
}
.list-lead {
  color: var(--ink-secondary);
  margin-bottom: 16px;
}

.content-narrow {
  max-width: 820px;
}
.content-narrow p + p {
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Seitenbilder
   -------------------------------------------------------------------------- */
.page-media {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 820px;
}
.page-media img {
  width: 100%;
  height: auto;
  display: block;
}
.page-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 820px;
}
@media (min-width: 640px) {
  .page-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.page-media-grid .page-media {
  max-width: none;
}
.page-media-grid .page-media img {
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Kontaktpersonen-Layout
   -------------------------------------------------------------------------- */
.person-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 768px) {
  .person-layout {
    grid-template-columns: 280px 1fr;
    gap: 48px;
  }
}

.person-nav ul {
  list-style: none;
}
@media (min-width: 768px) {
  .person-nav {
    position: sticky;
    top: 120px;
  }
}
.person-nav a {
  display: block;
  padding: 14px 20px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  background: var(--bg-glass);
  color: var(--ink-secondary);
  margin-bottom: 10px;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.person-nav a:hover {
  color: var(--ink-primary);
  border-color: var(--border-glow);
}
.person-nav a[aria-current="page"] {
  color: var(--ink-primary);
  border-color: var(--brand-green);
}

.person-card .person-photo {
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
  max-width: 320px;
  margin-bottom: 24px;
}
.person-card .person-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.person-card .person-role {
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.person-card .person-name {
  margin-bottom: 20px;
}
.person-card p {
  color: var(--ink-secondary);
}
.person-card a:hover {
  color: var(--brand-glow);
}

/* --------------------------------------------------------------------------
   Subnav-Pillen
   -------------------------------------------------------------------------- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.subnav a {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-hairline);
  color: var(--ink-secondary);
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.subnav a:hover {
  color: var(--ink-primary);
  border-color: var(--border-glow);
}
.subnav a[aria-current="page"] {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--bg-void);
}

/* --------------------------------------------------------------------------
   Spec-Liste
   -------------------------------------------------------------------------- */
.spec-list {
  list-style: none;
}
.spec-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--brand-green);
}
.spec-list .spec-sublist {
  list-style: none;
  margin-top: 12px;
}
.spec-list .spec-sublist li::before {
  background: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Datentabelle
   -------------------------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}
.data-table th {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.data-table td {
  color: var(--ink-primary);
}

/* --------------------------------------------------------------------------
   Zitationskarte
   -------------------------------------------------------------------------- */
.citation-card h3 {
  margin-bottom: 12px;
}
.citation-authors {
  color: var(--ink-secondary);
  margin-bottom: 10px;
}
.citation-journal {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Substanzraster
   -------------------------------------------------------------------------- */
.substance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.substance-grid > div {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-secondary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}

/* --------------------------------------------------------------------------
   Formularfelder
   -------------------------------------------------------------------------- */
.form-field {
  margin-bottom: 24px;
}
.form-field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 10px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 13px 16px;
  font: inherit;
  color: var(--ink-primary);
  caret-color: var(--brand-glow);
  transition: border-color 200ms ease-out, background 200ms ease-out;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.38);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(14, 157, 91, 0.25);
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6ADBA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-field select option {
  background: var(--bg-elevated);
  color: var(--ink-primary);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
}

/* Statusmeldungen des Kontaktformulars. Wortlaut aus Contact Form 7 4.9.1 —
   dem Plugin, das die alte Website nutzte; die Feldbeschriftungen stammen aus
   derselben Standardvorlage. Kein neu erfundener Text. */
.form-status {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  font-size: 15px;
  line-height: 1.5;
  display: none;
}
.form-status[data-state="sending"],
.form-status[data-state="ok"],
.form-status[data-state="error"] {
  display: block;
}
.form-status[data-state="sending"] {
  color: var(--ink-secondary);
}
.form-status[data-state="ok"] {
  color: var(--brand-glow);
  border-color: var(--brand-green);
  background: rgba(14, 157, 91, 0.10);
}
.form-status[data-state="error"] {
  color: #FFB4B4;
  border-color: rgba(229, 59, 59, 0.55);
  background: rgba(229, 59, 59, 0.10);
}
.form-field button[disabled],
button.cta-pill[disabled] {
  opacity: 0.55;
  pointer-events: none;
}
/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus. Bewusst nicht
   display:none — manche Bots überspringen versteckte Felder gezielt. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Kontaktblock
   -------------------------------------------------------------------------- */
.contact-block {
  font-style: normal;
}
.contact-block p {
  color: var(--ink-secondary);
}
.contact-block .contact-name {
  color: var(--ink-primary);
  font-weight: 500;
}
.contact-block a:hover {
  color: var(--brand-glow);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section-y);
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border-hairline);
  position: relative;
  z-index: 1;
}

.footer-main {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 64px var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

.footer-brand .brand-logo {
  font-size: 26px;
}
.footer-brand p {
  margin-top: 12px;
  color: var(--ink-secondary);
  font-size: 14px;
  max-width: 28ch;
}

/* Firmendeskriptor überall in der Markenschrift — außer im Rechtstext der
   AGB, wo er als Zitat im Fließsatz steht und keine Auszeichnung bekommt. */
.company-line {
  font-family: var(--font-brand);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 640px) {
  .footer-sitemap {
    grid-template-columns: repeat(4, 1fr);
  }
}
.footer-sitemap ul {
  list-style: none;
}
.footer-sitemap li {
  margin-bottom: 8px;
}
.footer-sitemap a {
  font-size: 13px;
  color: var(--ink-secondary);
  transition: color 200ms ease-out;
}
.footer-sitemap a:hover {
  color: var(--brand-glow);
}

.footer-contact p {
  font-size: 14px;
  color: var(--ink-secondary);
}
.footer-contact a:hover {
  color: var(--brand-glow);
}

.footer-microbar {
  border-top: 1px solid var(--border-hairline);
}
.footer-microbar-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 20px var(--gutter);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}
.footer-microbar-inner a {
  color: var(--ink-secondary);
  transition: color 200ms ease-out;
}
.footer-microbar-inner a:hover {
  color: var(--brand-glow);
}

/* --------------------------------------------------------------------------
   Scroll-Reveal
   -------------------------------------------------------------------------- */
/* Bewusst über die eigenständige translate-Eigenschaft statt über transform:
   sonst überschreibt .reveal.revealed den Hover-Lift der Karten und der
   Glaskarten (gleiche Spezifität, aber später in der Datei). */
.reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 600ms ease-out, translate 600ms ease-out;
  /* Sicherheitsnetz. main.js steht in jeder Seite hinter drei Fremdskripten
     von unpkg und cdnjs; blockiert eines davon (Firewall, Blocker, CDN-Ausfall),
     wird .revealed nie gesetzt und der Inhalt bliebe dauerhaft auf opacity 0.
     Seit das Kachelraster oberhalb der Falz liegt, wäre das eine leere Fläche
     direkt unter dem Hero. Nach 4s blendet der Inhalt daher von allein ein.
     Läuft main.js normal, ist die Animation längst abgeschaltet — sichtbar
     wird dieser Zweig also nur im Störfall. */
  animation: reveal-fallback 600ms ease-out 4s both;
}
.reveal.revealed {
  opacity: 1;
  translate: 0 0;
  animation: none;
}
@keyframes reveal-fallback {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* --------------------------------------------------------------------------
   Lesespalte (GTC)
   -------------------------------------------------------------------------- */
.reading-column {
  max-width: 720px;
}
.reading-column p,
.reading-column li {
  font-size: 17px;
  line-height: 1.75;
}
.reading-column h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 56px;
  margin-bottom: 20px;
}
.reading-column h3 {
  margin-top: 36px;
  margin-bottom: 14px;
}
.reading-column p {
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .aurora,
  .topo path,
  .hero-eyebrow .pulse-dot,
  .hero-stage-shadow {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    translate: none;
    transition: none;
    /* Muss mit: der gefüllte Zustand einer Animation schlägt sonst das
       opacity: 1 dieser Regel und der Inhalt bliebe unsichtbar. */
    animation: none;
  }
  .hero-stage-shadow {
    opacity: 0.2;
  }
  .nav-grid-card,
  .nav-grid-card:hover {
    transform: none;
  }
  .mega-menu-main > li {
    opacity: 1;
    transform: none;
  }
  .mega-menu.open .mega-menu-main > li {
    animation: none;
  }
  .glass-card,
  .glass-card:hover {
    transform: none;
    transition: box-shadow 200ms ease-out;
  }
  .cta-pill,
  .cta-pill:hover {
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}