/* =====================================================================
   B-Trade24 GmbH · One-Pager
   Richtung: "Frachtkennung und Seekarte"
   Signature: die Routenlinie (gestrichelt, Wegpunkt, Mono-Koordinate)
   ===================================================================== */

/* ---------- Schriften (lokal, keine externen Requests) ---------- */
/* Archivo, Variable: wght 300–800, wdth 62–125 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-latin-ext-300_800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-latin-300_800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Hanken Grotesk, Variable: wght 300–600 */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/HankenGrotesk-latin-ext-300_600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/HankenGrotesk-latin-300_600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono: 400- und 500-Datei sind identisch (Variable), daher ein Block je Subset.
   Variable Font, deckt 400 bis 500 ab. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
/* CI: Graphit #3f3f3f, Orange #e28700 (Logofarben, exakt aus der Illustrator-Datei).
   Kontraste (WCAG, gerechnet):
   --text-primary auf --canvas 13.17 · auf --panel 14.16
   --text-secondary auf --canvas 6.16 · auf --panel 6.63
   --surface-dark (Button-Text) auf --accent 6.26
   --accent auf --surface-dark 6.26 · auf --panel-dark 5.36 (Fokus dunkel)
   --accent-ink auf --canvas 4.69 · auf --panel 5.05 (Fokus hell, Orange als Text auf hell)
   --accent auf --canvas 2.34: dort nie als Text oder Fokus, nur Fläche mit dunklem Text
   --on-dark auf --surface-dark 14.63 · auf --panel-dark 12.52
   --on-dark-secondary auf --surface-dark 7.64 · auf --panel-dark 6.53
   --technical auf --surface-dark 5.78
   --line-strong auf --canvas 3.66 · auf --panel 3.94
   --line-strong-on-dark auf --surface-dark 3.27 */
:root {
  --canvas: #eceeeb;
  --panel: #f5f6f3;
  --surface-dark: #1a1c1f;
  --panel-dark: #26292d;
  --graphite: #3f3f3f;
  --text-primary: #232528;
  --text-secondary: #53585d;
  --on-dark: #eceeeb;
  --on-dark-secondary: #a9aeb3;
  --brand-orange: #e28700;
  --accent: var(--brand-orange);
  --accent-hover: #f09a1e;
  --accent-ink: #9a5a00;
  --accent-muted: rgb(226 135 0 / 0.18);
  --focus: var(--accent-ink);
  --line: rgb(var(--ink-rgb) / 0.14);
  --line-strong: #767b80;
  --line-on-dark: rgb(var(--technical-rgb) / 0.24);
  --line-strong-on-dark: #686d73;
  --technical: #8b98a1;
  --technical-ink: #66737c;
  --stage-rgb: 26 28 31;
  --technical-rgb: 139 152 161;
  --ink-rgb: 35 37 40;
  --panel-rgb: 245 246 243;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-h1: clamp(2.2rem, 1.1rem + 4.3vw, 5.1rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.5vw, 3.4rem);
  --fs-item: clamp(1.35rem, 0.95rem + 1.55vw, 2.15rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  --fs-mono: 0.75rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;
  --section-y: clamp(5rem, 3rem + 7vw, 9.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 650; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
main:focus { outline: none; }

/* Fokusfarbe: --accent-ink auf hell, --accent auf dunkel (beide >= 3:1) */
.site-header, .hero, .on-dark, .site-footer, .band, .menu { --focus: var(--accent); }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--accent); color: var(--surface-dark);
  font-weight: 600; text-decoration: none; border-radius: 2px;
  --focus: var(--surface-dark);
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: min(76rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Mono-Label, z. B. Kicker, Positionsnummern */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hintergrund-Ebene: Gradnetz der Seekarte ---------- */
/* Liegt über den Abschnittsflächen und unter dem Inhalt (z-index 1),
   damit das Raster auf hell und dunkel gleichermaßen leise sichtbar ist. */
.environment {
  position: fixed;
  inset: 0 -160px -160px 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(var(--technical-rgb) / 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--technical-rgb) / 0.12) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--technical-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--technical-rgb) / 0.05) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  animation: env-drift 120s linear infinite;
  animation-delay: -40s;
  will-change: transform;
}
@keyframes env-drift { to { transform: translate3d(-160px, -160px, 0); } }

/* Alles Inhaltliche liegt über dem Raster */
.layer { position: relative; z-index: 2; }

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-x: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.8rem var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(1px); }
.btn__arrow {
  width: 1rem; height: 1rem; flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--accent); color: var(--surface-dark); }
.btn--primary::before { background: var(--accent-hover); }

.btn--ghost { border-color: var(--line-strong-on-dark); color: var(--on-dark); }
.btn--ghost::before { background: rgb(var(--technical-rgb) / 0.14); }

.btn--line { border-color: var(--line-strong); color: var(--text-primary); }
.btn--line::before { background: rgb(var(--ink-rgb) / 0.06); }

.btn--sm { min-height: 2.5rem; padding: 0.55rem 1rem; font-size: 0.9375rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--on-dark);
}
/* solide Fläche als Pseudo-Element: nur opacity wird überblendet,
   backdrop-filter sitzt nicht am Header selbst (sonst würde das fixe Menü eingesperrt) */
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: rgb(var(--stage-rgb) / 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-on-dark);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-header.is-solid::before,
.site-header.menu-open::before { opacity: 1; }

.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

/* Logo (Kundendatei, unverändert). Seitenverhältnis 2764:467 */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.brand__logo { display: block; height: 2.1rem; width: auto; }
@media (max-width: 30rem) { .brand__logo { height: 1.8rem; } }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; gap: 1.75rem; }
.nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: none;
}
.nav__list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.6rem;
  height: 1px;
  background: var(--technical);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__list a:hover::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.25rem 0 0.75rem;
  border: 0;
  background: none;
  color: var(--on-dark);
  font: 500 0.9375rem/1 var(--font-body);
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 22px; height: 12px; }
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-in-out);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(5.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-5.25px) rotate(-45deg); }

/* Mobiles Menü: Overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: var(--surface-dark);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu__list { counter-reset: m; border-top: 1px solid var(--line-on-dark); }
.menu__list li { border-bottom: 1px solid var(--line-on-dark); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 650;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.1;
  color: var(--on-dark);
  text-decoration: none;
  transform: translateY(10px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.menu.is-open .menu__list a { transform: none; }
.menu__list .mono { color: var(--on-dark-secondary); }
.menu__foot { margin-top: 2rem; display: grid; gap: 1.25rem; }
.menu__foot .btn { justify-self: start; }
.menu__contact { color: var(--on-dark-secondary); font-size: 0.9375rem; line-height: 1.7; }
.menu__contact a { color: var(--on-dark); }

@media (max-width: 60rem) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Wegmarke: Abschnittstrenner mit Routensegment ---------- */
.waymark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--text-secondary);
}
.waymark__label { display: inline-flex; gap: 0.6rem; white-space: nowrap; }
.waymark__no { color: var(--text-primary); }
.waymark__route {
  flex: 1 1 auto;
  min-width: 2.5rem;
  max-width: 14rem;
  height: 1px;
  background-image: repeating-linear-gradient(to right, var(--technical-ink) 0 6px, transparent 6px 12px);
  transform-origin: left center;
}
/* Wegpunkt als Sechseck, Spitzen links/rechts wie im Bildzeichen.
   --pt-c: Linienfarbe, --pt-bg: Fläche dahinter */
.hex-pt {
  --pt-c: var(--accent);
  --pt-bg: var(--canvas);
  position: relative;
  flex: none;
  width: 15px; height: 13px;
  background: var(--pt-c);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hex-pt::before,
.hex-pt::after {
  content: "";
  position: absolute;
  clip-path: inherit;
}
.hex-pt::before { inset: 1.6px 1.85px; background: var(--pt-bg); }
.hex-pt::after { inset: 4.1px 4.75px; background: var(--pt-c); }
.hex-pt--tech { --pt-c: var(--technical-ink); }
.on-dark .hex-pt, .site-footer .hex-pt { --pt-bg: var(--surface-dark); }
.on-dark .hex-pt--tech, .site-footer .hex-pt--tech { --pt-c: var(--technical); }
.waybill .hex-pt { --pt-bg: var(--panel); }
.waymark__coord { white-space: nowrap; }
@media (max-width: 30rem) { .waymark__coord { display: none; } }
.on-dark .waymark { color: var(--on-dark-secondary); }
.on-dark .waymark__no { color: var(--on-dark); }
.on-dark .waymark__route { background-image: repeating-linear-gradient(to right, var(--technical) 0 6px, transparent 6px 12px); }

/* Eintritt der Wegmarke: Linie zeichnet sich, dann der Punkt */
.js .waymark.reveal .waymark__route { transform: scaleX(0); transition: transform 900ms var(--ease-in-out); }
.js .waymark.reveal .waymark__pt { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-base) var(--ease-out) 700ms, transform var(--dur-base) var(--ease-out) 700ms; }
.js .waymark.reveal .waymark__coord { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) 800ms; }
.js .waymark.reveal.in .waymark__route { transform: none; }
.js .waymark.reveal.in .waymark__pt { opacity: 1; transform: none; }
.js .waymark.reveal.in .waymark__coord { opacity: 1; }

/* ---------- Eintritte (IntersectionObserver setzt .in) ---------- */
.js .reveal .part {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.in .part { opacity: 1; transform: none; }
.js .reveal.in .d1 { transition-delay: 70ms; }
.js .reveal.in .d2 { transition-delay: 140ms; }
.js .reveal.in .d3 { transition-delay: 210ms; }
.js .reveal.in .d4 { transition-delay: 280ms; }
.js .reveal.in .d5 { transition-delay: 350ms; }
.js .reveal.in .d6 { transition-delay: 420ms; }
.js .reveal.in .d7 { transition-delay: 490ms; }
.js .reveal.in .d8 { transition-delay: 560ms; }
.js .reveal.in.settled .part { transition-delay: 0s; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--on-dark);
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero__media picture, .hero__img {
  width: 100%; height: 100%;
}
.hero__img {
  object-fit: cover;
  object-position: 62% 55%;
  filter: saturate(0.85) contrast(1.05) brightness(0.84);
  transform: scale(1.04);
  animation: ken-burns 48s var(--ease-in-out) infinite alternate;
  animation-delay: -6s;
}
@keyframes ken-burns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.11) translate3d(-1.2%, -0.8%, 0); }
}
.hero__shade {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(var(--stage-rgb) / 0.78) 0%, rgb(var(--stage-rgb) / 0.30) 26%, rgb(var(--stage-rgb) / 0.45) 52%, rgb(var(--stage-rgb) / 0.94) 100%),
    linear-gradient(90deg, rgb(var(--stage-rgb) / 0.82) 0%, rgb(var(--stage-rgb) / 0.45) 52%, rgb(var(--stage-rgb) / 0.12) 100%);
}
/* leichte Blautönung, damit das Abendlicht zur Serie passt */
.hero__shade::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--panel-dark);
  mix-blend-mode: color;
  opacity: 0.12;
}

/* Routenbögen: Box wird über den Ursprung (Zülpich) positioniert */
.hero__routes {
  --rw: min(72vw, 1150px);
  --ox: 82.6vw;
  --oy: 33svh;
  position: absolute;
  z-index: 2;
  width: var(--rw);
  height: auto;
  aspect-ratio: 1000 / 700;
  left: calc(var(--ox) - 0.6 * var(--rw));
  top: calc(var(--oy) - 0.33 * var(--rw));
  overflow: visible;
  pointer-events: none;
}
.route {
  fill: none;
  stroke: var(--technical);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}
.route-mask { mask-type: alpha; }
.route-draw {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 10;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: route-draw 2.8s var(--ease-in-out) forwards;
}
.route-draw.r1 { animation-delay: 0.35s; }
.route-draw.r2 { animation-delay: 0.6s; }
.route-draw.r3 { animation-delay: 0.85s; }
.route-draw.r4 { animation-delay: 1.1s; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }

.route-pt {
  fill: var(--surface-dark);
  stroke: var(--technical);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: fade-in 600ms var(--ease-out) forwards;
}
.route-pt.r1 { animation-delay: 1.75s; }
.route-pt.r2 { animation-delay: 2.0s; }
.route-pt.r3 { animation-delay: 2.25s; }
.route-pt.r4 { animation-delay: 2.5s; }
@keyframes fade-in { to { opacity: 1; } }

.origin__ring { fill: var(--surface-dark); stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Orange = Wegpunkte der eigenen Route (Ursprung, Abschnitte, Kurs, Ziel): geplante Betonung */
.origin__dot { fill: var(--accent); }
.origin__tick { stroke: var(--on-dark-secondary); stroke-width: 1; vector-effect: non-scaling-stroke; }
.origin__ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ping 6s var(--ease-out) infinite;
  animation-delay: 1.4s;
}
@keyframes ping {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.4); }
}
.origin__readout {
  font-size: 12.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  fill: var(--on-dark);
  letter-spacing: 0.06em;
}
.origin__place { fill: var(--on-dark-secondary); letter-spacing: 0.22em; }
.origin__leader { stroke: var(--on-dark-secondary); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.origin { opacity: 0; animation: fade-in 700ms var(--ease-out) 0.15s forwards; }

.voyager { fill: var(--on-dark); }

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(5.5rem, 13svh, 9rem);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--on-dark-secondary);
}
.kicker::before {
  content: "";
  width: 2.25rem; height: 1px;
  background-image: repeating-linear-gradient(to right, var(--technical) 0 5px, transparent 5px 10px);
}
.hero h1 {
  max-width: 19ch;
  font-size: var(--fs-h1);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--on-dark);
}
.hero h1 .h1-b {
  display: block;
  font-weight: 340;
  color: var(--on-dark);
}
.hero__lead {
  max-width: 54ch;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--on-dark);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 3.2vw, 2.5rem);
}

/* Eintritt Hero: gestaffelt, Ende spätestens nach ca. 900 ms */
.enter { animation: rise 540ms var(--ease-out) both; }
.enter.e1 { animation-delay: 60ms; }
.enter.e2 { animation-delay: 140ms; }
.enter.e3 { animation-delay: 230ms; }
.enter.e4 { animation-delay: 320ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Scroll-Andeutung: Routensegment läuft aus dem Bild in die Seite */
.hero__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: clamp(3rem, 8svh, 5rem);
  background-image: repeating-linear-gradient(to bottom, var(--technical) 0 5px, transparent 5px 10px);
}
.hero__cue::after {
  content: "";
  position: absolute;
  left: -3px; top: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--on-dark);
  animation: cue 3.2s var(--ease-in-out) infinite;
  animation-delay: 1.2s;
  opacity: 0;
}
@keyframes cue {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(clamp(3rem, 8svh, 5rem) - 7px)); }
}

/* Lebende Elemente pausieren außerhalb des Sichtfelds */
.is-offscreen *, .is-offscreen { animation-play-state: paused !important; }

@media (max-width: 47.99rem) {
  .hero__routes {
    --rw: 150vw;
    --ox: 66vw;
    --oy: calc(var(--header-h) + 5.75rem);
  }
  /* Platz für Ursprung und Readout über dem Inhalt reservieren */
  .hero__content { padding-top: calc(var(--header-h) + 10.5rem); padding-bottom: 4.75rem; }
  .origin__readout { font-size: 20px; }
  .route.r4, .route-pt.r4 { display: none; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgb(var(--stage-rgb) / 0.72) 0%, rgb(var(--stage-rgb) / 0.32) 22%, rgb(var(--stage-rgb) / 0.55) 42%, rgb(var(--stage-rgb) / 0.95) 64%, rgb(var(--stage-rgb) / 0.97) 100%);
  }
  .hero__img { object-position: 64% 50%; }
}

/* =====================================================================
   LEISTUNGEN · Split, Bild sticky links, Route mit vier Wegpunkten rechts
   ===================================================================== */
.section { position: relative; padding-block: var(--section-y); }
.section-head h2 { font-size: var(--fs-h2); font-stretch: 112%; font-weight: 680; line-height: 1.05; letter-spacing: -0.01em; }

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.services__media {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

/* Bildserie: einheitliches Grading + Kartenrahmen-Ecken */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--panel-dark);
}
.photo picture { height: 100%; }
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.06) brightness(0.9);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--stage-rgb) / 0.05) 40%, rgb(var(--stage-rgb) / 0.42) 100%);
  pointer-events: none;
}
.photo__tint {
  position: absolute; inset: 0;
  background: var(--panel-dark);
  mix-blend-mode: color;
  opacity: 0.2;
  pointer-events: none;
}
.frame-corners { position: relative; padding: 12px; }
.frame-corners::before,
.frame-corners::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid var(--technical-ink);
  pointer-events: none;
}
.frame-corners::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame-corners::after { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.services__photo { aspect-ratio: 4 / 5; }
/* Ausschnitt: linker Bildteil (Brücke, Stapelplatz), Reedereischriftzüge am Rumpf bleiben außerhalb */
.services__photo img { object-position: 4% 40%; }
.photo__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  color: var(--text-secondary);
}

.services__list {
  position: relative;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
/* durchgehende Route hinter den Wegpunkten */
.services__list::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, var(--technical-ink) 0 6px, transparent 6px 12px);
  opacity: 0.8;
}
.service {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 15px minmax(0, 1fr);
  column-gap: 1.75rem;
  align-items: baseline;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.service__no { color: var(--text-secondary); font-size: 0.8125rem; }
.service__pt { align-self: center; }
.service h3 {
  font-size: var(--fs-item);
  font-stretch: 110%;
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.005em;
  hyphens: manual;
}

@media (max-width: 56rem) {
  .services__grid { grid-template-columns: 1fr; }
  .services__media { position: static; order: 2; }
  .services__photo { aspect-ratio: 16 / 11; }
  .services__photo img { object-position: 8% 45%; }
}
@media (max-width: 30rem) {
  .service { grid-template-columns: 2.25rem 15px minmax(0, 1fr); column-gap: 1rem; }
  .services__list::before { left: calc(2.25rem + 1rem + 7px); }
}
@media (min-width: 30.01rem) {
  .services__list::before { left: calc(3.25rem + 1.75rem + 7px); }
}

/* =====================================================================
   BILDBAND · Vollbreite, Route ab Wegpunkt am Bug
   ===================================================================== */
.band {
  position: relative;
  margin: 0;
  height: clamp(24rem, 74svh, 48rem);
  overflow: hidden;
  background: var(--surface-dark);
}
.band__stage {
  position: absolute; inset: 0;
  animation: band-drift 40s var(--ease-in-out) infinite alternate;
  animation-delay: -10s;
}
@keyframes band-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.08) translate3d(-0.8%, 0.6%, 0); }
}
.band picture, .band img { width: 100%; height: 100%; }
.band img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(0.25) contrast(1.05) brightness(0.85);
}
.band__tint {
  position: absolute; inset: 0;
  background: var(--panel-dark);
  mix-blend-mode: color;
  opacity: 0.22;
}
.band__shade {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(var(--stage-rgb) / 0.75) 0%, rgb(var(--stage-rgb) / 0) 22%, rgb(var(--stage-rgb) / 0) 70%, rgb(var(--stage-rgb) / 0.85) 100%);
  pointer-events: none;
}
.band__overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.course {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}
.course-pt { fill: var(--surface-dark); stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.course-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  fill: var(--on-dark);
  paint-order: stroke;
  stroke: rgb(var(--stage-rgb) / 0.55);
  stroke-width: 4px;
  stroke-linejoin: round;
}
@media (max-width: 47.99rem) { .course-text { font-size: 24px; } }
.js .band.reveal .band__overlay { opacity: 0; transition: opacity 1.2s var(--ease-out) 200ms; }
.js .band.reveal.in .band__overlay { opacity: 1; }

/* =====================================================================
   WARENBEREICHE · Ladungsliste als Raster
   ===================================================================== */
.goods { background: transparent; }
.goods__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.goods__meta { color: var(--text-secondary); text-align: right; line-height: 1.9; }
.manifest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--text-primary);
  border-left: 1px solid var(--line);
  background: rgb(var(--panel-rgb) / 0.72);
}
.cargo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  min-height: 13.5rem;
  padding: 1.25rem 1.35rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cargo__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.cargo__pos { color: var(--text-secondary); padding-top: 0.15rem; }
.cargo__icon {
  width: 2.5rem; height: 2.5rem;
  color: var(--technical-ink);
  stroke: currentColor;
  stroke-width: 1.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cargo h3 {
  margin-top: auto;
  font-size: clamp(1.08rem, 0.98rem + 0.35vw, 1.28rem);
  font-stretch: 104%;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  hyphens: manual;
}

@media (max-width: 64rem) {
  .manifest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .goods__head { grid-template-columns: 1fr; }
  .goods__meta { text-align: left; }
  .manifest { grid-template-columns: 1fr; }
  .cargo {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas: "icon pos" "icon name";
    column-gap: 1rem;
    row-gap: 0.3rem;
    align-items: center;
    min-height: 0;
    padding: 1.1rem 1rem;
  }
  .cargo__top { display: contents; }
  .cargo__icon { grid-area: icon; width: 2rem; height: 2rem; }
  .cargo__pos { grid-area: pos; padding-top: 0; }
  .cargo h3 { grid-area: name; margin-top: 0; }
}

/* =====================================================================
   GRUNDSÄTZE · dunkle Bühne, drei Begriffe als Wegpunkte einer Route
   ===================================================================== */
.principles-section {
  background: var(--surface-dark);
  color: var(--on-dark);
}
.principles-section .section-head h2 { color: var(--on-dark); }
.principles {
  --gap: clamp(2.25rem, 5vw, 4.25rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  row-gap: var(--gap);
}
.principle {
  --indent: 0%;
  position: relative;
  padding-left: var(--indent);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 0.6rem + 5.2vw, 5rem);
  font-stretch: 116%;
  font-weight: 660;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.principle__word { display: block; padding-left: clamp(1.75rem, 3vw, 3rem); }
.principle__pt {
  position: absolute;
  left: var(--indent);
  top: 0.52em;
  width: 19px; height: 17px;
  margin: -8.5px 0 0 -9.5px;
  z-index: 1;
}
.principle__pt::before { inset: 2px 2.3px; }
.principle__pt::after { inset: 5.5px 6.3px; }
/* Verbindung zum vorigen Wegpunkt: von dessen Mittelpunkt zu diesem */
.principle__link {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(-1 * var(--gap) - 0.52em);
  height: calc(var(--gap) + 1.04em);
  overflow: visible;
}
.principle__link line {
  stroke: var(--technical);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
}
.principle:nth-child(1) .principle__word { color: var(--on-dark); }

.js .principles.reveal .principle__link { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.js .principles.reveal.in .principle__link { opacity: 1; }
.js .principles.reveal.in .principle:nth-child(2) .principle__link { transition-delay: 300ms; }
.js .principles.reveal.in .principle:nth-child(3) .principle__link { transition-delay: 520ms; }

.principle__link .link-wide { display: none; }
@media (min-width: 48rem) {
  .principle__link .link-wide { display: inline; }
  .principle__link .link-narrow { display: none; }
  .principle:nth-child(2) { --indent: 12%; }
  .principle:nth-child(3) { --indent: 24%; }
}

/* =====================================================================
   KONTAKT · Frachtbrief
   ===================================================================== */
.contact__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.waybill {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgb(var(--stage-rgb) / 0.04), 0 24px 60px -32px rgb(var(--stage-rgb) / 0.35);
}
.waybill__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
  border-bottom: 1.5px solid var(--text-primary);
}
.waybill__firm { margin: 0; }
.waybill__firm img { display: block; height: clamp(2.2rem, 1.6rem + 2vw, 3.25rem); width: auto; }
.waybill__coord { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text-secondary); }
.waybill__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.field {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.field:nth-child(odd) { border-right: 1px solid var(--line); }
.field__label { display: block; margin-bottom: 0.7rem; color: var(--text-secondary); }
.field__value {
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.15vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  font-style: normal;
}
.field__value a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
}
.field__value a:hover { text-decoration-color: var(--text-primary); }
.field__sub { display: block; margin-top: 0.35rem; font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--text-secondary); }
.waybill__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
}
.waybill__actions .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--line-strong);
}
.text-link:hover { text-decoration-color: var(--text-primary); }
.text-link svg { width: 0.9rem; height: 0.9rem; }

@media (max-width: 44rem) {
  .waybill__grid { grid-template-columns: 1fr; }
  .field:nth-child(odd) { border-right: 0; }
  .text-link { margin-left: 0; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  position: relative;
  background: var(--surface-dark);
  color: var(--on-dark-secondary);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.9375rem;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer__route { display: flex; align-items: center; gap: 0.9rem; flex: 1 1 12rem; max-width: 26rem; }
.footer__route .waymark__route { max-width: none; background-image: repeating-linear-gradient(to right, var(--technical) 0 6px, transparent 6px 12px); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  line-height: 1.7;
}
.footer__legal-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer__legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--line-strong-on-dark);
}
.footer__legal-nav a:hover { text-decoration-color: var(--on-dark); }

/* =====================================================================
   UNTERSEITEN (Impressum, Datenschutz)
   ===================================================================== */
.page-sub .site-header::before { opacity: 1; }
.legal {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: var(--section-y);
}
.legal h1 {
  font-size: var(--fs-h2);
  font-stretch: 112%;
  font-weight: 680;
  line-height: 1.05;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal__body {
  max-width: 48rem;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.legal__body h2 {
  font-size: 1.25rem;
  font-stretch: 108%;
  font-weight: 650;
  margin: 2.5rem 0 0.9rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body p, .legal__body li, .legal__body dd { max-width: 65ch; }
.legal__body h3 {
  font-size: 1rem;
  font-weight: 650;
  margin: 1.6rem 0 0.6rem;
}
.legal__body p + p, .legal__body p + ul, .legal__body ul + p, .legal__body dl + p, .legal__body p + dl { margin-top: 0.9rem; }
.legal__body .legal__stand { margin-top: 2.5rem; color: var(--text-secondary); font-size: 0.875rem; }
.legal__body ul { display: grid; gap: 0.6rem; }
.legal__body ul li { position: relative; padding-left: 1.4rem; }
.legal__body ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--technical-ink);
  border-radius: 50%;
}
.legal__body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0; }
.legal__body dt { color: var(--text-secondary); }
.legal__body dd { margin: 0; }
.legal__body a { overflow-wrap: anywhere; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }
.credits li { overflow-wrap: anywhere; }
.placeholder {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px dashed var(--line-strong);
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-primary);
}
.notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  margin-bottom: 2rem;
  border: 1px dashed var(--line-strong);
  background: var(--canvas);
}
@media (max-width: 30rem) {
  .legal__body dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal__body dd { margin-bottom: 0.6rem; }
}

/* ---------- Touch-Ziele ---------- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; }
}

/* ---------- versteckter Tab: alles anhalten ---------- */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .environment { animation: none; }
  .hero__img, .band__stage { animation: none; }
  .hero__media { transform: none !important; }
  .origin__ping, .hero__cue::after { animation: none; opacity: 0; }
  .voyager { display: none; }
  .js .reveal .part { opacity: 1; transform: none; }
  .js .waymark.reveal .waymark__route { transform: none; }
  .js .waymark.reveal .waymark__pt, .js .waymark.reveal .waymark__coord { opacity: 1; transform: none; }
  .js .band.reveal .band__overlay, .js .principles.reveal .principle__link { opacity: 1; }
}