/* ==========================================================================
   home.css — Startseite mercan.taxi („Nachtfahrt")
   Eigenständiges Stylesheet der Startseite. index.html lädt NUR diese Datei.
   Enthält: Schriften, Tokens, Reset, Header/Nav/Sprachumschalter, Hero,
   Indexliste, Glaskarten im Raum, Footer, Reveal, Zeigergeräte, Breakpoints,
   Reduced Motion, Druck. Alle Schriften selbst gehostet (SIL OFL).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500-latin.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;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin.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;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-400-latin.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;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-mono-700-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-mono-700-latin.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;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.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;
}

/* Fallback gegen den Sprung, bis Barlow Condensed geladen ist. */
@font-face {
  font-family: "Barlow Condensed Fallback";
  src: local("Arial Narrow"), local("ArialNarrow"), local("Arial");
  size-adjust: 78%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #03060a;
  --ink-2: #0a1118;
  --red: #d8232a;
  --cyan: #4fe3ff;
  --silver: #cfe6f2;
  --violet: #8b7cff;
  --gold: #ffd28a;
  --text: #f2f4f6;
  --text-soft: #dfe4e9;
  --muted: #9aa6b2;
  --line: rgba(255, 255, 255, 0.12);
  --container: 1240px;
  --header-height: 72px;
  --radius-card: 22px;
  --radius-stat: 18px;
  --radius-tile: 16px;
  --radius-pill: 999px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;
  --edge: max(24px, calc((100vw - var(--container)) / 2));
  --card-edge: max(16px, calc((100vw - var(--container)) / 2 - 6vw));
  --fact-space: 236px;
  --accent: var(--red);
  --aura: rgba(216, 35, 42, 0.1);
}

/* --------------------------------------------------------------------------
   3. Reset und Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--ink) linear-gradient(var(--ink), var(--ink-2));
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

/* CSS-Fallback-Schein: trägt die Seite ohne WebGL, ohne JS, bei Reduced Motion.
   Liegt über dem Canvas und wird bei scene-ready ausgeblendet. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle 34vw at 68vw 40vh, rgba(216, 35, 42, 0.12), transparent 70%),
    radial-gradient(circle 50vw at 30vw 110vh, rgba(79, 227, 255, 0.06), transparent 70%);
  content: "";
  transition: opacity 600ms ease, visibility 0s linear 600ms;
  pointer-events: none;
}

html.scene-ready body::before {
  opacity: 0;
  visibility: hidden;
}

.scene-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

html.no-webgl .scene-canvas,
html.scene-static .scene-canvas {
  display: none;
}

main {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  perspective: 1400px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--red);
}

h1,
h2,
h3,
p,
dl {
  margin-top: 0;
}

address {
  font-style: normal;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: #fff;
  background: var(--red);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Eyebrow: Space Mono, der leere <span> wird zum Lichtpunkt in der Sektionsfarbe. */
.eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow > span {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
}

/* --------------------------------------------------------------------------
   4. Header, Navigation, Sprachumschalter
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  color: var(--text);
  background: linear-gradient(rgba(3, 6, 10, 0.75), transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.site-header.is-scrolled {
  background-color: rgba(3, 6, 10, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.header-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 100%;
}

.brand {
  position: relative;
  z-index: 102;
  flex: 0 0 auto;
  display: block;
  width: 160px;
  text-decoration: none;
}

.brand img {
  width: 100%;
}

.main-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  margin-left: auto;
}

.main-nav > a {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 0;
  color: rgba(242, 244, 246, 0.7);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.main-nav > a[aria-current="page"] {
  color: rgba(242, 244, 246, 0.95);
}

/* Kein Unterstrich-Balken: ein 3-px-Punkt unter dem aktiven Link. */
.main-nav > a[aria-current="page"]:not(.nav-login):not(.nav-contact)::after {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 3px;
  height: 3px;
  background: var(--red);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

/* Pills */
.main-nav > a.nav-login,
.main-nav > a.nav-contact,
.language-switcher summary strong {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.main-nav > a.nav-login,
.main-nav > a.nav-contact {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  line-height: 1;
  border-radius: var(--radius-pill);
}

.main-nav > a.nav-login {
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.main-nav > a.nav-login[aria-current="page"] {
  border-color: rgba(255, 255, 255, 0.6);
}

.main-nav > a.nav-contact {
  color: #fff;
  background: rgba(216, 35, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.nav-toggle {
  position: relative;
  z-index: 102;
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.nav-toggle span + span {
  margin-top: 6px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Sprachumschalter (wird von i18n.js an .header-inner gehängt) */
.language-switcher {
  position: relative;
  z-index: 103;
  flex: 0 0 auto;
  color: var(--text);
}

.language-switcher summary {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  color: var(--text);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.language-switcher summary::marker {
  content: "";
}

/* Sichtbare Pill 32 px hoch, Tap-Ziel 44 px. */
.language-switcher summary::before {
  position: absolute;
  inset: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  content: "";
  transition: border-color var(--dur-fast) ease;
  pointer-events: none;
}

.language-switcher-label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.language-switcher-chevron {
  display: inline-flex;
  justify-content: center;
  width: 10px;
  color: rgba(242, 244, 246, 0.7);
  font-size: 10px;
  line-height: 1;
  transition: transform var(--dur-fast) ease;
}

.language-switcher[open] .language-switcher-chevron {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 5;
  width: 210px;
  padding: 6px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-tile);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.language-menu a {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--text-soft);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.language-menu a[aria-current="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.language-menu small {
  color: #c9d2da;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   5. Hero — Komposition und Zeit
   -------------------------------------------------------------------------- */
.hero {
  --accent: var(--red);

  position: relative;
  z-index: 1;
  min-height: 100svh;
}

/* Feine diagonale Lichtstreifen (Referenz t=0), auch ohne WebGL. */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  background-image: repeating-linear-gradient(115deg, transparent 0 240px, rgba(207, 230, 242, 0.035) 240px 241px, transparent 241px 560px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 46vw) minmax(0, 1fr);
  align-items: center;
  min-height: calc(100svh - var(--fact-space));
  padding-top: var(--header-height);
}

.hero-copy {
  position: relative;
  max-width: 46vw;
  padding-block: 24px;
}

/* Scrim: dämpft die Ambiente-Wolke hinter der Textspalte, nicht die Logo-Zone. */
.hero-copy::before {
  position: absolute;
  inset: -20vh -8vw -20vh -30vw;
  z-index: -1;
  background: radial-gradient(70vw 60vh at 32% 55%, rgba(3, 6, 10, 0.72), transparent 70%);
  content: "";
  pointer-events: none;
}

.hero h1 {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.2vw, 8.6rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.28), 0 0 60px rgba(79, 227, 255, 0.14);
}

.hero h1 em {
  color: var(--red);
  font-style: normal;
  text-shadow: 0 0 20px rgba(216, 35, 42, 0.45), 0 0 70px rgba(216, 35, 42, 0.25);
}

.hero-lead {
  max-width: 46ch;
  margin: 0 0 28px;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.button > span {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.button-primary {
  color: #fff;
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.18);
}

.button-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Kennzahlen-Glaskarte: unten rechts am Containerrand, 3D-Neigung folgt der Maus. */
.hero-strip {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.hero-bar {
  position: relative;
  isolation: isolate;
  width: min(328px, 100%);
  padding: 22px;
  color: var(--text);
  border-radius: var(--radius-stat);
  pointer-events: auto;
}

/* Glas auf einem inneren Layer: Backdrop nie auf dem geneigten Element selbst. */
.hero-bar::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(rgba(6, 10, 16, 0.72), rgba(6, 10, 16, 0.72)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.2)) border-box;
  border: 1px solid transparent;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 80px rgba(0, 0, 0, 0.5);
  content: "";
}

/* Glanzstreifen wandert mit --pointer-x (vom Core gesetzt). */
.hero-bar::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 60%);
  background-position: calc(50% + var(--pointer-x, 0) * 50%) 0;
  background-size: 200% 100%;
  content: "";
  pointer-events: none;
}

.hero-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(79, 227, 255, 0.45), 0 0 12px rgba(79, 227, 255, 0.6);
  animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 227, 255, 0.45), 0 0 12px rgba(79, 227, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(79, 227, 255, 0), 0 0 16px rgba(79, 227, 255, 0.85);
  }
}

.hero-stat {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.9;
}

.hero-stat span {
  padding-bottom: 4px;
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.35;
}

.hero-card-grid {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-card-grid > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.hero-card-grid small {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-card-grid strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
}

.hero-card-footer {
  padding-top: 14px;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.hero-card-footer span {
  padding-inline: 6px;
  color: var(--red);
}

/* Koordinaten-Label der Referenz */
.hero-index {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-height) + 24px);
  right: var(--edge);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  opacity: 0.5;
}

/* Zeitliche Trennung: Szene zuerst, Text tritt gestaffelt ein. */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .eyebrow {
  animation: hero-enter 900ms var(--ease-out) 1.6s both;
}

.hero h1 {
  animation: hero-enter 900ms var(--ease-out) 1.9s both;
}

.hero-lead,
.hero .button-row {
  animation: hero-enter 900ms var(--ease-out) 2.2s both;
}

.hero-strip,
.fact-list {
  animation: hero-enter 900ms var(--ease-out) 2.5s both;
}

html.no-js .hero .eyebrow,
html.no-js .hero h1,
html.no-js .hero-lead,
html.no-js .hero .button-row,
html.no-js .hero-strip,
html.no-js .fact-list,
html.no-webgl .hero .eyebrow,
html.no-webgl .hero h1,
html.no-webgl .hero-lead,
html.no-webgl .hero .button-row,
html.no-webgl .hero-strip,
html.no-webgl .fact-list,
html.scene-static .hero .eyebrow,
html.scene-static .hero h1,
html.scene-static .hero-lead,
html.scene-static .hero .button-row,
html.scene-static .hero-strip,
html.scene-static .fact-list {
  animation: none;
}

/* --------------------------------------------------------------------------
   6. Indexliste unten links (.fact-bar) — kein Balken, keine Fläche
   -------------------------------------------------------------------------- */
.fact-bar {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--fact-space));
  pointer-events: none;
}

.fact-list {
  display: grid;
  grid-template-columns: minmax(0, 320px);
  row-gap: 4px;
  align-content: end;
  justify-content: start;
  min-height: var(--fact-space);
  padding-bottom: 32px;
  line-height: 1.9;
}

.fact-list > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  pointer-events: auto;
}

.fact-list span {
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.9;
  opacity: 0.5;
}

.fact-list strong {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fact-list strong::before {
  color: var(--red);
  font-weight: 400;
  content: "→";
}

.fact-list > div:nth-child(3) strong {
  text-transform: none;
}

.fact-list small {
  grid-column: 2;
  display: block;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Sektionen als Glaskarten im Raum
   -------------------------------------------------------------------------- */
.scene-card {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 16vh;
  padding-inline: var(--card-edge);
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.scene-card.card-left {
  justify-content: flex-start;
}

.scene-card.card-right {
  justify-content: flex-end;
}

.scene-card.card-center {
  justify-content: center;
}

.contact-band {
  margin-bottom: 16vh;
}

/* Sektionsfarben (max. zwei Buntfarben je Viewport) */
#ueber-uns {
  --accent: var(--silver);
  --aura: rgba(207, 230, 242, 0.1);
}

#leistungen {
  --accent: var(--red);
  --aura: rgba(216, 35, 42, 0.18);
}

#fuhrpark {
  --accent: var(--cyan);
  --aura: rgba(79, 227, 255, 0.22);
}

.values-section {
  --accent: var(--silver);
  --aura: rgba(207, 230, 242, 0.1);
}

#wagengebot {
  --accent: var(--violet);
  --aura: rgba(139, 124, 255, 0.26);
}

.team-power-section {
  --accent: var(--red);
  --aura: rgba(216, 35, 42, 0.18);
}

.contact-band {
  --accent: var(--red);
  --aura: rgba(216, 35, 42, 0.18);
}

/* Aura hinter der Karte, zur freien Seite versetzt — Gradient, kein filter. */
.scene-card::before {
  position: absolute;
  top: 20%;
  z-index: 0;
  width: min(70vw, 672px);
  height: 60%;
  background: radial-gradient(closest-side, var(--aura), transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.card-left::before {
  left: 44%;
}

.card-right::before {
  right: 44%;
}

.card-center::before {
  left: 50%;
  transform: translateX(-50%);
}

/* Neigungs-Wrapper: nur transform. */
.card-3d {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  min-width: 0;
  transform-style: flat;
  backface-visibility: hidden;
}

.card-even .card-3d {
  width: min(880px, 100%);
}

/* Glasfläche: Backing + Verlaufsfüllung + Verlaufskante + Innenkante. Kein Backdrop. */
.card-glass {
  position: relative;
  min-width: 0;
  padding: 56px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(6, 10, 16, 0.72);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 40px 120px rgba(0, 0, 0, 0.55);
  contain: paint;
}

.card-even .card-glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.094), rgba(255, 255, 255, 0.038)),
    rgba(6, 10, 16, 0.72);
}

.card-glass::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.2));
  border-radius: inherit;
  content: "";
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Innen-Lichtfleck oben auf der freien Seite */
.card-glass::after {
  position: absolute;
  top: -12%;
  z-index: 0;
  width: 40%;
  height: 46%;
  background: radial-gradient(closest-side, var(--accent), transparent);
  border-radius: 50%;
  content: "";
  opacity: 0.3;
  pointer-events: none;
}

.card-left .card-glass::after,
.card-center .card-glass::after {
  right: -8%;
}

.card-right .card-glass::after {
  left: -8%;
}

.card-glass > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Restneigung ±2,5° — nie 0, die Karten bleiben im Raum. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .card-left .card-3d {
    transform: rotateY(2.5deg) rotateX(1deg);
  }

  .card-right .card-3d {
    transform: rotateY(-2.5deg) rotateX(1deg);
  }

  .card-center .card-3d {
    transform: rotateY(1.5deg) rotateX(1deg);
  }
}

/* Parallaxe und Eintritt über die Scroll-Timeline; Firefox sieht die Restneigung. */
@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    @keyframes card-fly-left {
      0% {
        opacity: 0;
        transform: translateY(6%) rotateY(6deg) rotateX(2deg);
      }

      16% {
        opacity: 1;
      }

      40% {
        transform: translateY(1.2%) rotateY(2.5deg) rotateX(1deg);
      }

      100% {
        opacity: 1;
        transform: translateY(-6%) rotateY(2.5deg) rotateX(1deg);
      }
    }

    @keyframes card-fly-right {
      0% {
        opacity: 0;
        transform: translateY(3%) rotateY(-6deg) rotateX(2deg);
      }

      16% {
        opacity: 1;
      }

      40% {
        transform: translateY(0.6%) rotateY(-2.5deg) rotateX(1deg);
      }

      100% {
        opacity: 1;
        transform: translateY(-3%) rotateY(-2.5deg) rotateX(1deg);
      }
    }

    @keyframes card-fly-center {
      0% {
        opacity: 0;
        transform: translateY(6%) rotateY(4deg) rotateX(2deg);
      }

      16% {
        opacity: 1;
      }

      40% {
        transform: translateY(1.2%) rotateY(1.5deg) rotateX(1deg);
      }

      100% {
        opacity: 1;
        transform: translateY(-6%) rotateY(1.5deg) rotateX(1deg);
      }
    }

    .card-left .card-3d {
      animation: card-fly-left linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .card-right .card-3d {
      animation: card-fly-right linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .card-center .card-3d {
      animation: card-fly-center linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* Typografie in den Karten */
.scene-card h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
}

.scene-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.scene-card p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.scene-card p:last-child {
  margin-bottom: 0;
}

.scene-card .lead {
  color: var(--text);
  font-size: 1.1rem;
}

/* Über uns */
#ueber-uns .section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

#ueber-uns .section-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  column-gap: 40px;
  align-items: start;
}

#ueber-uns .section-copy .profile-list {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.profile-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.profile-list > div {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.profile-list dt {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-list dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

/* Leistungen */
.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: 36px;
}

.section-intro > p {
  margin: 0 0 6px;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-tile);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.service-number {
  display: block;
  margin-bottom: 40px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  opacity: 0.5;
}

.service-card h3 {
  margin-bottom: 14px;
  font-size: 2rem;
}

.service-card p {
  margin: 0;
  font-size: 0.95rem;
}

.card-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(216, 35, 42, 0.6);
}

/* Höhere Spezifität als `.scene-card p`, sonst setzt jene Regel den Abstand
   auf 0 und der Hinweis klebt an der Unterkante der Leistungskarten. */
.scene-card .service-note {
  margin: 32px 0 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.service-promise {
  margin-top: 40px;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--red);
}

.service-promise > p:first-child {
  margin: 0 0 10px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.service-promise h3 {
  max-width: 22ch;
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
}

.service-promise > p:last-child {
  max-width: 60ch;
  margin: 0;
}

/* Fuhrpark — nur Cyan */
.fleet-watermark {
  position: absolute;
  right: -2vw;
  bottom: -0.2em;
  z-index: 0;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 40vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.8;
  opacity: 0.035;
  user-select: none;
  pointer-events: none;
}

.fleet-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.fleet-number {
  color: #eafcff;
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 22rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.8;
  text-shadow: 0 0 24px rgba(79, 227, 255, 0.35), 0 0 80px rgba(79, 227, 255, 0.22);
}

.fleet-content > p:not(.eyebrow) {
  max-width: 56ch;
  margin: 22px 0 0;
}

.fleet-future {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(79, 227, 255, 0.25);
  border-bottom: 1px solid rgba(79, 227, 255, 0.25);
}

.fleet-future > span {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #eafcff;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.fleet-future > span::before {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(79, 227, 255, 0.7);
  content: "";
}

.fleet-future p {
  margin: 0;
  font-size: 0.95rem;
}

.fleet-future strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 500;
}

.fleet-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.fleet-meta small {
  display: block;
  margin-bottom: 4px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fleet-meta strong {
  display: block;
  color: var(--text);
  font-weight: 500;
}

/* Werte — Silber */
.values-section .section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.values-list {
  border-top: 1px solid var(--line);
}

.values-list article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.values-list article > span {
  padding-top: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.values-list h3 {
  margin-bottom: 6px;
  font-size: 1.5rem;
}

.values-list p {
  margin: 0;
  font-size: 0.95rem;
}

/* WagenGebot — nur Violett */
.wagengebot-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

/* Die Wortmarke liegt zu 79 % auf Transparenz; nur ihre Tinte ist dunkelblau.
   invert() dreht die Helligkeit, hue-rotate(180deg) dreht den Farbton zurück —
   aus Dunkelblau wird Hellblau, aus Schwarz Weiß, das Grün bleibt Grün. Damit
   steht die Marke frei im dunklen Bild und braucht keine helle Platte mehr,
   die vorher als greller Block aus der Sektion stach. */
.wagengebot-logo {
  width: min(100%, 264px);
  height: auto;
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 22px rgba(139, 124, 255, 0.45));
}

.project-status {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  max-width: 100%;
  margin: 28px 0 0;
  padding: 6px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  border: 1px solid rgba(139, 124, 255, 0.45);
  border-radius: var(--radius-pill);
}

.project-status span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--violet);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(139, 124, 255, 0.8);
}

.project-partnership {
  margin: 28px 0 24px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-tile);
}

.project-partnership-label {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-partnership-label::after {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
}

.project-partner-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.project-partner-tile {
  position: relative;
  display: grid;
  min-width: 0;
  height: 150px;
  padding: 18px;
  place-items: center;
  background: rgba(139, 124, 255, 0.07);
  border: 1px solid rgba(139, 124, 255, 0.2);
  border-radius: var(--radius-tile);
}

.project-partner-tile-arz {
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.project-partner-tile-arz::after {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  color: rgba(242, 244, 246, 0.7);
  font-size: 0.9rem;
  content: "↗";
}

.project-partner-logo-mercan,
.project-partner-logo-arz {
  display: block;
  min-width: 0;
  object-fit: contain;
}

.project-partner-logo-mercan {
  width: min(100%, 220px);
  height: 60px;
  object-fit: cover;
  object-position: center;
}

/* Diese Vorlage hat einen vollflächig undurchsichtigen weißen Hintergrund
   (0 % transparente Pixel) — kein Blendmodus kann ihn entfernen. Deshalb
   bekommt sie bewusst ein eigenes helles Schild, wie eine aufgelegte
   Visitenkarte. Der Mercan-Partnerlogo daneben ist transparent und steht
   deshalb direkt auf der dunklen Kachel. */
.project-partner-logo-arz {
  width: min(78%, 132px);
  height: auto;
  padding: 10px;
  background: #f2f4f6;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(139, 124, 255, 0.28), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.project-partner-symbol {
  display: grid;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  place-items: center;
}

.wagengebot-copy h2 {
  margin-bottom: 20px;
}

.wagengebot-copy .partner-description {
  margin: 18px 0;
  padding-left: 18px;
  border-left: 2px solid var(--violet);
}

/* Team — Rot + Weiß */
.team-power-mark {
  position: absolute;
  bottom: -0.15em;
  left: -1vw;
  z-index: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 28vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.8;
  opacity: 0.035;
  user-select: none;
  pointer-events: none;
}

.team-power-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: end;
}

.team-power-copy h2 {
  margin-bottom: 20px;
}

.team-power-copy h2 em {
  color: var(--red);
  font-style: normal;
}

.team-power-action {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.team-power-action p {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Kontakt — Rot */
.contact-band-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

.contact-band h2 {
  margin-bottom: 14px;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.mail-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-tile);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.mail-link small {
  grid-column: 1;
  display: block;
  margin-bottom: 2px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mail-link strong {
  grid-column: 1;
  display: block;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.mail-link-phone strong {
  white-space: nowrap;
}

.mail-link > span {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--red);
  font-size: 1.2rem;
}

.text-link-light {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.text-link-light > span {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   8. Footer — dunkel, kein Glas, keine Bewegung
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  color: var(--text);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand img {
  width: 180px;
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 280px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.footer-column h2 {
  margin: 0 0 14px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-column p {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.8;
}

.footer-column a {
  color: var(--text);
  text-decoration: none;
}

.footer-column a:focus-visible {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-block: 18px;
  color: var(--text-soft);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Reveal (site.js setzt .revealed; Reveal und Neigung nie auf demselben Element)
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-delay {
  transition-delay: 120ms;
}

.js .reveal-delay-2 {
  transition-delay: 240ms;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   10. Zeigergeräte — sämtliche Hover-Zustände liegen hier
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .main-nav > a:not(.nav-login):not(.nav-contact):hover {
    color: var(--text);
  }

  .main-nav > a.nav-contact:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }

  .main-nav > a.nav-login:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .language-switcher summary:hover::before {
    border-color: rgba(255, 255, 255, 0.45);
  }

  .language-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .button-primary:hover {
    background: #e02b32;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .button-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .service-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .mail-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .text-link-light:hover,
  .footer-column a:hover {
    text-decoration: underline;
  }

  .project-partner-tile-arz:hover {
    border-color: rgba(139, 124, 255, 0.6);
    transform: translateY(-2px);
  }

  /* Kennzahlkarte folgt der Maus über --pointer-x/--pointer-y des Cores. */
  .hero-bar {
    transform: perspective(900px) rotateY(calc(var(--pointer-x, 0) * 8deg)) rotateX(calc(var(--pointer-y, 0) * -5deg));
    transition: transform 600ms var(--ease-out);
  }

  /* Magnetische Elemente. site.js setzt --mx/--my, sonst bleiben sie 0. */
  .is-magnetic {
    --mx: 0px;
    --my: 0px;

    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }

  .button.is-magnetic:hover {
    transform: translate(var(--mx), calc(var(--my) - 2px));
  }

  .service-card.is-magnetic:hover {
    transform: translate(var(--mx), var(--my));
  }

  /* Zeigerring, silbern — keine dritte Buntfarbe. */
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(207, 230, 242, 0.8);
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(0.55);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    pointer-events: none;
  }

  .cursor-ring.is-active {
    opacity: 1;
    transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   11. Breakpoints
   -------------------------------------------------------------------------- */

/* Header nur mit Backdrop ab 861 px (Backdrop-Budget: Header + Kennzahlkarte). */
@media (min-width: 861px) {
  .site-header.is-scrolled {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .hero-bar::before {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* Zwei-Zeilen-Header: Serbisch passt einzeilig erst ab ca. 1 281 px. */
@media (max-width: 1280px) and (min-width: 861px) {
  :root {
    --header-height: 112px;
  }

  .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 16px;
    align-content: center;
  }

  .brand {
    order: 1;
  }

  .language-switcher {
    order: 2;
    margin-left: auto;
  }

  .main-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-end;
    height: 48px;
    margin-left: 0;
  }
}

@media (max-width: 1180px) {
  .main-nav {
    gap: 20px;
  }
}

@media (max-width: 1050px) {
  .footer-top {
    grid-template-columns: 1.25fr 1fr 0.8fr;
  }

  .footer-column:last-child {
    grid-column: 3;
  }
}

/* Mobil: Burger + Overlay, nichts absolut positioniert im Hero, keine Neigung. */
@media (max-width: 860px) {
  :root {
    --header-height: 64px;
    --fact-space: 0px;
  }

  main,
  .scene-card {
    perspective: none;
  }

  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .header-inner {
    gap: 8px;
  }

  .brand {
    order: 1;
    width: 140px;
  }

  .language-switcher {
    order: 2;
    margin-right: 112px;
    margin-left: auto;
  }

  .language-menu {
    right: auto;
    left: 0;
  }

  .nav-toggle {
    order: 3;
    display: flex;
  }

  /* Overlay: die Nav selbst bleibt ohne opacity/transform (Viewport-Bezug für
     die fixe Kontakt-Pill); versteckt werden nur die Kinder. */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    order: 4;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    justify-content: center;
    height: auto;
    margin: 0;
    padding: calc(var(--header-height) + 24px) 24px 40px;
    background: transparent;
    pointer-events: none;
  }

  .main-nav > a {
    width: min(100%, 520px);
    min-height: 48px;
    margin-inline: auto;
    padding: 14px 0;
    color: var(--text);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
  }

  .main-nav > a[aria-current="page"]:not(.nav-login):not(.nav-contact)::after {
    display: none;
  }

  .js .main-nav > a {
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 220ms ease, visibility 0s linear 220ms;
  }

  .main-nav.is-open {
    overflow-y: auto;
    background: var(--ink);
    pointer-events: auto;
  }

  .js .main-nav.is-open > a {
    visibility: visible;
    clip-path: inset(0);
    transition: clip-path 280ms var(--ease-out), visibility 0s;
  }

  .main-nav > a.nav-login,
  .main-nav > a.nav-contact {
    height: 48px;
    margin-top: 12px;
    padding: 0 20px;
    justify-content: center;
    font-size: 0.8rem;
    border-radius: var(--radius-pill);
  }

  .main-nav > a.nav-login {
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  .main-nav > a.nav-contact {
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Kontakt-Pill bleibt im geschlossenen Zustand neben dem Burger sichtbar. */
  .js .main-nav:not(.is-open) > .nav-contact {
    position: fixed;
    top: 14px;
    right: 64px;
    z-index: 102;
    width: auto;
    min-height: 0;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 0.75rem;
    visibility: visible;
    clip-path: none;
    transition: none;
    pointer-events: auto;
  }

  .main-nav.is-open > .nav-contact {
    position: static;
  }

  /* Ohne JavaScript: Navigation im Fluss unter der Marke. */
  .no-js .site-header {
    position: absolute;
    height: auto;
    padding-block: 8px;
    background: rgba(3, 6, 10, 0.9);
  }

  .no-js .header-inner {
    flex-wrap: wrap;
  }

  .no-js .nav-toggle {
    display: none;
  }

  .no-js .main-nav {
    position: static;
    inset: auto;
    flex: 1 0 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: flex-start;
    padding: 0 0 8px;
    pointer-events: auto;
  }

  .no-js .main-nav > a {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 6px 0;
    font-size: 1rem;
    border-bottom: 0;
  }

  .no-js .main-nav > a.nav-login,
  .no-js .main-nav > a.nav-contact {
    height: 36px;
    margin-top: 0;
    padding: 0 14px;
    font-size: 0.75rem;
  }

  /* Hero im Fluss: Logo-Zone als Platzhalter, dann Text, Buttons, Karte, Liste. */
  .hero {
    min-height: 0;
  }

  .hero-layout {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-height) + 16px + 20vw);
  }

  .hero-copy {
    max-width: none;
    padding-block: 12px 0;
  }

  .hero-copy::before {
    inset: -10vh -16px -40px;
    background: linear-gradient(to top, rgba(3, 6, 10, 0.72), rgba(3, 6, 10, 0.4) 60%, transparent);
  }

  .hero h1 {
    margin-bottom: 18px;
  }

  .hero-lead {
    margin-bottom: 22px;
    font-size: 0.95rem;
  }

  /* Ohne Weichzeichner (Leistung) reicht Teildeckung nicht: Fließtext schien
     beim Scrollen durch die Kopfleiste durch. Deshalb hier deckend — die
     `background`-Kurzform ersetzt auch den Verlauf des Grundzustands. */
  .site-header.is-scrolled {
    background: #03060a;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .hero-strip {
    position: static;
    margin-top: 48px;
    pointer-events: auto;
  }

  .hero-bar {
    width: 100%;
    transform: none;
  }

  .hero-index {
    display: none;
  }

  .fact-bar {
    margin-top: 0;
  }

  .fact-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    min-height: 0;
    padding: 44px 0 8px;
  }

  /* Der Hinweis stand direkt an der Unterkante der zweiten Leistungskarte. */
  .scene-card .service-note {
    margin-top: 36px;
  }

  .service-promise {
    margin-top: 48px;
  }

  .project-partnership {
    margin: 36px 0 28px;
    padding: 20px;
  }

  /* Karten: volle Breite minus 16 px je Seite, kein Versatz, keine Neigung. */
  .scene-card {
    margin-top: 10vh;
    padding-inline: 16px;
  }

  .contact-band {
    margin-bottom: 10vh;
  }

  .scene-card::before {
    top: 10%;
    width: 90vw;
    height: 40%;
  }

  .card-left::before {
    left: 30%;
  }

  .card-right::before {
    right: 30%;
  }

  .card-3d,
  .card-even .card-3d {
    width: 100%;
    transform: none;
    animation: none;
  }

  .card-glass {
    padding: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
      rgba(8, 13, 20, 0.86);
    contain: none;
  }

  .card-even .card-glass {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.094), rgba(255, 255, 255, 0.038)),
      rgba(8, 13, 20, 0.86);
  }

  .card-glass::after {
    top: 0;
    width: 60%;
    height: 40%;
  }

  .card-left .card-glass::after,
  .card-center .card-glass::after {
    right: 0;
  }

  .card-right .card-glass::after {
    left: 0;
  }

  #ueber-uns .section-copy,
  .section-intro,
  .fleet-layout,
  .wagengebot-layout,
  .team-power-layout,
  .contact-band-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #ueber-uns .section-copy .profile-list {
    grid-column: auto;
    grid-row: auto;
    margin-top: 8px;
  }

  .section-intro {
    margin-bottom: 24px;
  }

  .service-card {
    padding: 22px 20px 26px;
  }

  .service-number {
    margin-bottom: 24px;
  }

  .fleet-watermark {
    right: -4vw;
    font-size: 60vw;
  }

  .fleet-number {
    font-size: clamp(6rem, 22vw, 9rem);
  }

  .team-power-mark {
    font-size: 44vw;
  }

  .team-power-action {
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .footer-column:last-child {
    grid-column: auto;
  }

  /* Kein schwebendes Telefon mehr: Die Nummer steht als normale Kontaktkachel
     im Kontaktbereich, gleichwertig neben der E-Mail. Eine feste Pill lag
     beim Scrollen dauerhaft über dem Fließtext. */
}

@media (max-width: 600px) {
  .button-row {
    flex-direction: column;
  }

  .button-row .button,
  .team-power-action .button {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.8rem;
    white-space: normal;
  }

  .project-status {
    width: 100%;
  }

  .service-grid,
  .fleet-meta,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }

  .project-partner-lockup {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 8px;
  }

  .project-partner-tile {
    height: 120px;
    padding: 10px;
  }

  .project-partner-logo-mercan {
    width: min(100%, 150px);
    height: 40px;
  }

  .project-partner-logo-arz {
    width: min(65%, 100px);
  }

  .project-partner-symbol {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .brand {
    width: 112px;
  }

  .language-switcher {
    margin-right: 108px;
  }

  .language-switcher summary {
    padding: 0 10px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .eyebrow,
  .hero-card-top,
  .hero-card-grid small,
  .fact-list strong,
  .profile-list dt,
  .fleet-meta small,
  .mail-link small,
  .footer-column h2,
  .service-promise > p:first-child,
  .project-partnership-label,
  .project-status {
    letter-spacing: 0.12em;
  }

  .hero-card-grid > div {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }

  .hero-card-grid strong {
    text-align: left;
  }
}

@media (max-width: 359px) {
  .brand {
    width: 96px;
  }
}

/* --------------------------------------------------------------------------
   11b. Liegendes Telefon
   Ein Bildschirm, der breiter als 860 px, aber sehr flach ist, ist kein
   Desktop, sondern ein quer gehaltenes Telefon (Plus- und Pro-Max-Modelle
   messen liegend 926-956 px). Ohne diese Regel gälte dort das Desktop-Layout:
   --fact-space bliebe bei 236 px und zöge die Indexliste per negativem Rand
   über Fließtext und Schaltflächen.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-height: 620px) {
  :root {
    --fact-space: 0px;
  }

  .hero {
    min-height: 0;
  }

  .hero-layout {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 24px;
  }

  .hero-copy {
    max-width: min(100%, 640px);
    padding-block: 12px 0;
  }

  .hero-copy::before {
    inset: -10vh -16px -40px -16px;
    background: linear-gradient(to top, rgba(3, 6, 10, 0.72), rgba(3, 6, 10, 0.4) 60%, transparent);
  }

  .hero-strip {
    position: static;
    margin-top: 24px;
    justify-content: flex-start;
    pointer-events: auto;
  }

  .hero-bar {
    width: min(328px, 100%);
    transform: none;
  }

  .hero-index {
    display: none;
  }

  .fact-bar {
    margin-top: 0;
  }

  .fact-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    min-height: 0;
    padding: 24px 0 8px;
  }

  .scene-card {
    margin-top: 8vh;
  }
}

/* --------------------------------------------------------------------------
   12. Reduced Motion — harte Ruhe
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero .button-row,
  .hero-strip,
  .fact-list,
  .status-dot,
  .card-3d {
    animation: none !important;
  }

  .card-3d,
  .hero-bar,
  .button.is-magnetic:hover,
  .service-card.is-magnetic:hover,
  .project-partner-tile-arz:hover {
    transform: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .cursor-ring {
    display: none !important;
  }

  body::before {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   13. Druck — hell, schlicht, kein Canvas
   -------------------------------------------------------------------------- */
@media print {
  .scene-canvas,
  .site-header,
  .skip-link,
  .hero-grid,
  .hero-index,
  .fleet-watermark,
  .team-power-mark,
  .cursor-ring,
  .scene-card::before,
  /* Der Telefon-Link steht hier bewusst NICHT mehr: Er ist keine schwebende
     Schaltfläche mehr, sondern Inhalt — und gehört auf den Ausdruck. */
  .card-glass::before,
  .card-glass::after,
  .hero-bar::before,
  .hero-bar::after,
  .hero-copy::before {
    display: none !important;
  }

  html,
  body {
    color: #111 !important;
    background: #fff !important;
  }

  body::before {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  main {
    perspective: none;
  }

  .hero,
  .hero-layout {
    display: block;
    min-height: 0;
    padding-top: 24px;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-strip {
    position: static;
    margin-top: 24px;
  }

  .hero-bar {
    width: 100%;
    border: 1px solid #999;
    transform: none !important;
  }

  .fact-bar {
    margin-top: 0;
  }

  .fact-list {
    min-height: 0;
    padding: 16px 0;
  }

  .scene-card {
    display: block;
    margin: 24px 0 0;
    padding: 0;
    perspective: none;
  }

  .card-3d,
  .card-even .card-3d {
    width: 100%;
    animation: none !important;
    transform: none !important;
  }

  .card-glass,
  .card-even .card-glass {
    padding: 24px;
    background: #fff;
    border: 1px solid #999;
    box-shadow: none;
    contain: none;
  }

  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero .button-row,
  .hero-strip,
  .fact-list,
  .card-3d,
  .status-dot {
    animation: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero h1,
  .hero h1 em,
  .scene-card h2,
  .scene-card h3,
  .scene-card p,
  .eyebrow,
  .hero-lead,
  .hero-bar,
  .hero-bar *,
  .fact-list *,
  .profile-list dt,
  .profile-list dd,
  .fleet-number,
  .fleet-future > span,
  .fleet-meta *,
  .service-number,
  .values-list *,
  .mail-link,
  .mail-link *,
  .text-link-light,
  .team-power-copy h2 em,
  .team-power-action p,
  .site-footer,
  .site-footer *,
  .project-status,
  .project-partnership-label,
  .project-partner-symbol {
    color: #111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  .service-card,
  .mail-link,
  .project-partnership,
  .project-partner-tile {
    background: #fff;
    border: 1px solid #999;
  }

  .button {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #111;
  }

  .site-footer {
    background: #fff;
    border-top: 1px solid #999;
  }

  .project-partner-logo-arz {
    filter: none;
    mix-blend-mode: normal;
  }
}