/* =====================================================================
   base.css — Reset, semantische Variablen, Typo-Defaults, Buttons,
   Container, Header, Utilities. (v3 „Das Frachtpapier")
   Section-Agents stylen gegen die semantischen --c-* Variablen,
   damit jede Section auf Papier UND in .theme-dark funktioniert.
   ===================================================================== */

/* ---------- Semantik: Nacht (Default — die Seite ist dunkel-dominant) ----------
   Route-Konzept v4: sechs dunkle Sektionen, EINE helle (Erfahrung) als
   Atempause. Sektionen stylen gegen --c-* und funktionieren dadurch auf
   Nacht UND Papier. --c-link / --c-ink-line kippen Grafik-Kleintext mit. */
:root {
  --c-bg:          var(--color-night);
  --c-bg-raised:   var(--color-night-raised);
  --c-bg-deep:     var(--color-night-deep);
  --c-text:        var(--color-cream);
  --c-muted:       var(--color-cream-muted);
  --c-subtle:      var(--color-cream-subtle);
  --c-line:        var(--color-line-dark);
  --c-line-strong: var(--color-line-dark-strong);
  --c-accent-hover: #f15a4a;
  --c-link:        var(--color-fill-light); /* lesbares Blau auf Nacht */
  --c-ink-line:    var(--color-cream);       /* „Ist"-Kostenlinie auf Nacht */
}

/* ---------- Semantik: Papier (die EINE helle Sektion: Erfahrung) ---------- */
.theme-light {
  --c-bg:          var(--color-paper);
  --c-bg-raised:   var(--color-paper-raised);
  --c-bg-deep:     var(--color-paper-deep);
  --c-text:        var(--color-ink);
  --c-muted:       var(--color-ink-muted);
  --c-subtle:      var(--color-ink-subtle);
  --c-line:        var(--color-line);
  --c-line-strong: var(--color-line-strong);
  --c-accent-hover: var(--color-accent-hover);
  --c-link:        var(--color-fill-ink);   /* lesbares Blau auf Papier */
  --c-ink-line:    var(--color-ink);
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ---------- Semantik: Nacht explizit (Termin/Footer — identisch zum Default) ---------- */
.theme-dark {
  --c-bg:          var(--color-night);
  --c-bg-raised:   var(--color-night-raised);
  --c-bg-deep:     var(--color-night-deep);
  --c-text:        var(--color-cream);
  --c-muted:       var(--color-cream-muted);
  --c-subtle:      var(--color-cream-subtle);
  --c-line:        var(--color-line-dark);
  --c-line-strong: var(--color-line-dark-strong);
  --c-accent-hover: #f15a4a;
  --c-link:        var(--color-fill-light);
  --c-ink-line:    var(--color-cream);
  background-color: var(--c-bg);
  color: var(--c-text);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* fängt randnahe Richtungs-Reveals ab (kein Horizontal-Scroll) */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--color-fill); color: var(--color-paper-raised); }

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

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

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

ul[role='list'], ol[role='list'] { list-style: none; }

[id] { scroll-margin-top: 6rem; }

/* ---------- Typo-Defaults ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }

p { max-width: 62ch; }

em, .serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Mono-Bausteine (Frachtpapier-Optik) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}

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

.section { padding-block: var(--space-section); position: relative; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.05em 1.7em;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-expo),
              border-color var(--dur-fast) var(--ease-expo),
              color var(--dur-fast) var(--ease-expo),
              transform var(--dur-fast) var(--ease-expo);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-night-deep); /* 4.6:1 auf Accent = AA; ink wäre 4.3:1 */
  border: 1px solid var(--color-accent);
}
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
}
.btn--ghost:hover { border-color: var(--c-text); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-expo);
}
.btn:hover .btn__arrow { transform: translateX(0.3em); }

/* ---------- Links mit aufziehendem Unterstrich ---------- */
.link-underline {
  position: relative;
  padding-bottom: 2px;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-fast) var(--ease-expo);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-night) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-line-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  transition: padding var(--dur-fast) ease;
}
.site-header.is-scrolled .site-header__inner { padding-block: var(--space-3); }

.site-header__logo {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.site-header__logo-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-cream-muted);
}

.site-header__nav {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-header__nav a { color: var(--color-cream-muted); }

/* Direktwahl im Header (nur Desktop): Entscheider rufen lieber an */
.site-header__phone {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.06em;
  color: var(--color-cream-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-expo);
}
.site-header__phone:hover,
.site-header__phone:focus-visible { color: var(--color-cream); }
@media (max-width: 1100px) {
  .site-header__phone { display: none; }
}
.site-header__nav a:hover { color: var(--color-cream); }

.site-header .btn { padding: 0.7em 1.2em; }

/* Header invertiert über der EINEN hellen Section (Erfahrung) */
.site-header.is-over-light.is-scrolled {
  background: color-mix(in srgb, var(--color-paper) 90%, transparent);
  border-bottom-color: var(--color-line);
}
.site-header.is-over-light .site-header__logo { color: var(--color-ink); }
.site-header.is-over-light .site-header__logo-sub { color: var(--color-ink-muted); }
.site-header.is-over-light .site-header__nav a { color: var(--color-ink-muted); }
.site-header.is-over-light .site-header__nav a:hover { color: var(--color-ink); }
.site-header.is-over-light .site-header__phone { color: var(--color-ink-muted); }
.site-header.is-over-light .site-header__phone:hover,
.site-header.is-over-light .site-header__phone:focus-visible { color: var(--color-ink); }
.site-header.is-over-light .site-header__burger span { background: var(--color-ink); }

/* ---------- Hamburger-Button (nur mobil sichtbar) ---------- */
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -8px;
  padding: 10px;
}
.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-cream);
  transition: transform var(--dur-fast) var(--ease-expo),
              opacity var(--dur-fast) var(--ease-expo),
              background-color var(--dur-fast) var(--ease-expo);
}
.site-header.nav-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .site-header__burger span:nth-child(2) { opacity: 0; }
.site-header.nav-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile-Navigationspanel ---------- */
.site-header__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--gutter) var(--space-8);
  background: color-mix(in srgb, var(--color-night) 96%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line-dark);
}
.site-header__mobile a:not(.btn) {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line-dark);
}
.site-header__mobile .btn { margin-top: var(--space-4); justify-content: center; }

@media (max-width: 760px) {
  .site-header__nav { display: none; }
  .site-header__cta { display: none; }
  .site-header__burger { display: flex; }
  .site-header__mobile { display: flex; }
  .site-header__mobile[hidden] { display: none; }
}



/* ---------- Preloader „Wege finden" (Overlay, 1× pro Session) ----------
   Sichtbar ab dem ersten Paint über html.intro-due (Inline-Script im Head) —
   Nacht-Grund, damit der Wipe nahtlos in den dunklen Hero übergeht.
   Alle Animations-Elemente starten via CSS unsichtbar; GSAP (initIntro)
   inszeniert Route, Wortmarke und Prozent-Zähler und entfernt das Overlay.
   Failsafes: html.intro-timeout (9 s, Inline-Script) versteckt das Overlay
   auch ohne motion.js; ohne JS (kein .intro-due) erscheint es nie. */
.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-night-deep);
  place-items: center;
  clip-path: inset(0 0 0 0);
}
html.intro-due .intro { display: grid; }
html.intro-timeout .intro { display: none !important; }
/* Defense-in-Depth: bei reduced-motion nie zeigen, selbst wenn ein
   JS-Gate einen Randfall übersähe */
@media (prefers-reduced-motion: reduce) {
  html.intro-due .intro { display: none !important; }
}

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  padding-inline: var(--gutter);
  width: 100%;
  max-width: 720px;
}

.intro__svg {
  width: min(560px, 84vw);
  height: auto;
  overflow: visible;
}
.intro__grid-dot { fill: var(--color-cream); }
.intro__grid { opacity: 0; }               /* GSAP blendet dezent auf */
.intro__route {
  stroke: var(--color-fill);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;                              /* GSAP zeichnet die Route */
}
.intro__stub {
  stroke: var(--color-line-dark-strong);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  opacity: 0;
}
.intro__wp   { fill: var(--color-fill); opacity: 0; }
.intro__node { fill: var(--color-fill); opacity: 0; }
.intro__lead {
  fill: var(--color-fill);
  filter: drop-shadow(0 0 6px rgba(65, 106, 238, 0.55));
  opacity: 0;
}
.intro__dot  { fill: var(--color-accent); opacity: 0; }
.intro__ring {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0;
}

/* Wortmarke im Header-Logo-Stil, groß und zentriert */
.intro__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  opacity: 0;                              /* GSAP fokussiert sie ein */
}
.intro__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
}
.intro__logo-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.78rem);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-cream-muted);
}
.intro__slogan {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  max-width: none;
}
.intro__slogan em {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
}

/* Status-Zeile: Ladefortschritt, mono, am unteren Rand */
.intro__status {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-cream-muted);
}
.intro__status-pct {
  font-variant-numeric: tabular-nums;
  color: var(--color-cream);
}

/* Während der Preloader läuft: Seite nicht scrollbar */
html.intro-lock { overflow: hidden; }

/* ---------- Section-Rhythmus: dunkle Töne wechseln sich subtil ab ----------
   Nur bestehende Nacht-Tokens — keine neuen Farben. */
.section--well { background-color: var(--color-night-deep); }

/* Die EINE helle Sektion setzt ihren Grund selbst (.theme-light in base),
   harter Schnitt ohne Transition — wie ein umgeblättertes Blatt. */
.section.theme-light { background-color: var(--c-bg); }

/* Eigene Stacking-Kontexte (Sektionsziffern bleiben hinter dem Text) */
main { position: relative; z-index: 1; }

/* ---------- 3.4 Riesige Sektionsziffer mit Parallax (Tiefe, kein Dekor-Code) ---------- */
.section__figure {
  position: absolute;
  top: clamp(2rem, 6vw, 5rem);
  right: var(--gutter);
  z-index: 0;
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: 20vw;
  line-height: 0.8;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-strong);
  text-stroke: 1px var(--c-line-strong);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  .section__figure { font-size: 34vw; top: clamp(1rem, 4vw, 2rem); }
}

/* ---------- Sticky Mobile-CTA-Leiste ---------- */
.mobile-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 1);
  display: none; /* per Default aus; nur mobil via Media Query */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--color-night) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line-dark);
  transform: translateY(120%);
  transition: transform var(--dur) var(--ease-expo);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta__note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cream-muted);
  line-height: 1.2;
}
.mobile-cta__btn { flex-shrink: 0; padding: 0.85em 1.3em; }

@media (max-width: 760px) {
  .mobile-cta:not([hidden]) { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}

/* ---------- Fokus & A11y ---------- */
:focus-visible {
  outline: 2px solid var(--color-fill);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-overlay) + 1);
  background: var(--color-ink);
  color: var(--color-paper-raised);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.skip-link:focus-visible { top: var(--space-4); }


/* ---------- 3.3 Route-Progressbar (die Signatur: Scroll = Weg mit Wegpunkten) ----------
   Linke Kante, Desktop. Füllung wächst mit --p (motion.js), Wegpunkte
   schalten auf .is-done. „Fakten → Wege" als permanentes UI. */
.route-progress {
  position: fixed;
  left: clamp(16px, 2.2vw, 34px);
  top: 50%;
  translate: 0 -50%;
  height: 42vh;
  width: 2px;
  background: var(--color-line-dark-strong);
  z-index: 50;
}
.route-progress__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: var(--color-accent);
}
.route-progress__wp {
  position: absolute;
  left: -3px;
  width: 8px; height: 8px;
  translate: 0 -50%;
  border: 1px solid var(--color-line-dark-strong);
  background: var(--color-night);
  transition: background-color var(--dur-fast) var(--ease-expo),
              border-color var(--dur-fast) var(--ease-expo);
}
.route-progress__wp.is-done {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.route-progress__wp[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  /* Chip statt nackter Schrift: lesbar auch über der hellen Erfahrung-Section */
  color: var(--color-cream-muted);
  background: color-mix(in srgb, var(--color-night) 88%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-expo);
  pointer-events: none;
}
/* Labels nur auf Hover — permanent eingeblendet würde der Chip mit
   linksbündigem Inhalt kollidieren (Rail ragt in die Content-Spalte). */
.route-progress:hover .route-progress__wp[data-label]::after { opacity: 1; }
@media (max-width: 1100px) { .route-progress { display: none; } }

/* ---------- 4. Klartext-Eyebrow am Sektionsanfang ----------
   Ehemals sticky — das schwebte beim Scrollen über Headlines und Fließtext
   (Text-über-Text). Jetzt statisch; Orientierung leistet die Route-Progressbar. */
.eyebrow--sticky {
  position: static;
  margin-bottom: var(--space-6);
}

/* ---------- Reveal-Grundzustand (verhindert FOUC vor motion.js) ---------- */
.js [data-reveal],
.js [data-reveal-lines] { opacity: 0; }
.js [data-reveal-stagger] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-lines] { opacity: 1 !important; }
}