/* ============================================================
   COMPONENTS — wiederverwendbare Bausteine
   ============================================================ */

/* --- Pixel-Intro (Startscreen-Overlay) -----------------------
   Vollbild-Intro: Pixel bauen sich als Welle aus der Mitte auf,
   das Logo taucht auf, alles löst sich wieder auf, das Logo swiped
   nach oben und der Header fährt von oben herein.
   Der Vanilla-Port der PixelCard-Engine steckt in js/main.js.
------------------------------------------------------------- */

/* Vor dem Reveal: blauer Grund (wie die Seite) + Seite ausblenden,
   damit nichts aufblitzt, bevor das per JS erzeugte Overlay steht.
   (Klasse wird durch das Inline-Script im <head> gesetzt.) */
html.intro-active {
  background: var(--color-bg);
}
html.intro-active body {
  overflow: hidden;
}
html.intro-active .site-header,
html.intro-active main,
html.intro-active .site-footer {
  visibility: hidden;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-bg); /* Blau von Anfang an */
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.intro-overlay__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Nur das „b" (Inline-SVG) – zentral, hell auf Blau, schwebt leicht (GSAP).
   Pfad 1 morpht später zum Kreis, Pfad 2/3 blenden aus. */
.intro-overlay__logo {
  position: relative;
  z-index: 2;
  width: min(140px, 22vw);
  height: auto;
  opacity: 0; /* GSAP blendet ein */
  overflow: visible;
  will-change: transform, opacity, filter;
  user-select: none;
  -webkit-user-drag: none;
}
.intro-overlay__logo path {
  fill: var(--color-text); /* exakt die Kachel-Farbe → nahtloser Übergang */
}

/* Cyan-Block für den Morph „b" → Kreis → Balken → Aufmacher-Kachel.
   Liegt (per JS) exakt über der echten .hero-frame; clip-path mit
   konstantem 40px-Radius öffnet ihn Schritt für Schritt. */
.intro-morph {
  position: fixed;
  z-index: 3;
  background: var(--color-text); /* Cyan wie die Kachel */
  will-change: clip-path, transform, opacity;
  pointer-events: none;
}

/* --- Header / Navigation ------------------------------------ */
/* Transparenter Header: kein Hintergrund/Blur/Border. Logo und Navi
   liegen direkt auf dem Seiteninhalt. Die Navigation bleibt immer weiß.
   Feste Höhe, damit der Wechsel Wortmarke ↔ Favicon nicht springt. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--container-pad);
  background: transparent;
}

.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-300);
  letter-spacing: -0.01em;
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Slide nach rechts (links neben die Navi) beim Scrollen. Bewegung auf
     dem Screen → kräftiges ease-in-out; nur transform (GPU). */
  transition: transform var(--dur-base) var(--ease-move);
  will-change: transform;
}
/* Wortmarke (Vollversion, am Seitenkopf sichtbar). Blendet schnell aus
   (Exit → ease-out), damit sie beim Slide nicht mitwandert. */
.site-header__logo-img {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity var(--dur-fast) var(--ease);
}
/* Favicon-Marke: blaues „b" auf weißem Kreis – wie die Navi.
   Absolut positioniert → beeinflusst die Header-Höhe nicht.
   Enter: fadet + skaliert von 0.9 herein (nie aus dem Nichts). */
.site-header__logo-mark {
  position: absolute;
  left: 0;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.site-header__logo-mark svg {
  height: 24px;
  width: auto;
  display: block;
}
.site-header__logo-mark svg path {
  fill: var(--color-bg);
}

/* Kompakt-Zustand (nach dem ersten Scrollen):
   Wortmarke raus, Favicon rein, Logo neben die Navigation geschoben.
   `--logo-shift` berechnet JS (Abstand bis links neben die Navi). */
.site-header--compact .site-header__logo {
  transform: translateX(var(--logo-shift, 0px));
}
.site-header--compact .site-header__logo-img {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site-header--compact .site-header__logo-mark {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

/* Bewegungsreduktion: kein Slide, nur sanftes Ein-/Ausblenden. */
@media (prefers-reduced-motion: reduce) {
  .site-header__logo {
    transition: none;
  }
}

.nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.nav a {
  font-size: var(--fs-200);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--color-text); }

.nav-toggle { display: none; }

@media (max-width: 640px) {
  .nav-toggle {
    display: inline-flex;
    font-size: var(--fs-300);
  }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(75vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-2xl);
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
  }
  .nav[data-open="true"] { transform: translateX(0); }
}

/* --- PillNav (Vanilla-Port, zentrierte weiße Pill-Navigation) --- */
.pill-nav-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.pill-nav {
  --nav-h: 42px;
  --pill-pad-x: 18px;
  --pill-gap: 3px;
  --bar-bg: #ffffff;
  --pill-bg: #ffffff;
  --pill-text: var(--color-bg);   /* Blau */
  --hover-bg: var(--color-bg);    /* Blaue Hover-Füllung */
  --hover-text: #ffffff;
  display: flex;
  align-items: center;
  width: max-content;
  box-sizing: border-box;
}
.pill-nav-items {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  background: var(--bar-bg);
  border-radius: 9999px;
  transition: background var(--dur-base) var(--ease);
}
.pill-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: var(--pill-gap);
  margin: 0;
  padding: 3px;
  height: 100%;
}
.pill-list > li { display: flex; height: 100%; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--pill-pad-x);
  background: var(--pill-bg);
  color: var(--pill-text);
  text-decoration: none;
  border-radius: 9999px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  line-height: 1;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

/* Der aktive Zustand wird visuell von der gleitenden Pille (Overlay)
   dargestellt – die Klasse dient nur noch als Marker fürs JS. */
.pill.is-active { color: var(--pill-text); background: transparent; }

/* Gleitende „Pille": blaue Kopie der Navigation mit weißer Schrift,
   die per clip-path auf ein pillenförmiges Fenster beschnitten wird.
   Das Fenster wandert mit dem Cursor und rastet an jedem Punkt ein. */
.pill-list--overlay {
  position: absolute;
  inset: 0;
  background: var(--hover-bg);
  pointer-events: none;
  z-index: 1;
  /* Startfenster – wird sofort per JS auf die aktive Seite gesetzt. */
  clip-path: inset(3px 100% 3px 0 round 9999px);
  will-change: clip-path;
}
.pill-list--overlay .pill {
  background: transparent;
  color: var(--hover-text);
}

.desktop-only { display: block; }
.mobile-only { display: none; }

.mobile-menu-button {
  width: 42px; height: 42px; border-radius: 50%;
  background: #ffffff; border: none;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 0; position: relative;
  transition: background var(--dur-base) var(--ease);
}
.hamburger-line { width: 16px; height: 2px; background: var(--color-bg); border-radius: 1px; transform-origin: center; transition: background var(--dur-base) var(--ease); }
.mobile-menu-popover {
  position: absolute; top: calc(100% + 8px); right: var(--container-pad);
  min-width: 200px;
  background: #ffffff; border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: 998; opacity: 0; transform-origin: top center; visibility: hidden;
  padding: 6px;
}
.mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mobile-menu-link {
  display: block; padding: 12px 16px;
  color: var(--color-bg); background: #fff;
  text-decoration: none; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  border-radius: 12px; transition: background 0.2s ease, color 0.2s ease; text-transform: uppercase;
}
.mobile-menu-link:hover,
.mobile-menu-link.is-active { background: var(--color-bg); color: #fff; }

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .pill-nav-container { display: none; }
  .mobile-menu-button { display: flex; }
}

/* --- Buttons ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-200);
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-bg);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* --- Project Card -------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: inherit;
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease);
}
.card:hover .card__media img,
.card:hover .card__media video { transform: scale(1.04); }

.card__title { font-size: var(--fs-300); font-weight: 600; }
.card__meta { font-size: var(--fs-100); color: var(--color-text-muted); }

/* --- Video-Block (Platzhalter-fähig) ------------------------- */
/* Nutzung:
   <div class="video" data-src="assets/video/demo.mp4" data-poster="assets/img/demo.jpg"></div>
   ODER Embed:
   <div class="video" data-embed="https://www.youtube.com/embed/XYZ" data-poster="..."></div>
   Ohne data-src / data-embed bleibt der Platzhalter-Zustand aktiv.
*/
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: grid;
  place-items: center;
}
.video video,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__play {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-accent) 90%, transparent);
  color: var(--color-bg);
  transition: transform var(--dur-fast) var(--ease);
}
.video__play:hover { transform: scale(1.08); }
.video__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent currentColor;
}
/* Platzhalter-Hinweis, wenn noch kein Video hinterlegt ist */
.video[data-placeholder="true"] .video__play { opacity: 0.5; cursor: default; }
.video__label {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  font-size: var(--fs-100);
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* --- Hero (Text + CardSwap daneben) -------------------------- */
/* Cyan-Kasten, vom blauen Body-BG wie ein Rahmen umgeben */
.hero-frame {
  display: flex;
  /* Hintergrundbild der Aufmacher-Kachel (Cyan als Fallback dahinter).
     Vertikal weiter oben verankert (25 %) → es wird mehr Wand gezeigt und die
     Bodenkante rutscht nach unten, der Raum wirkt größer/höher. */
  background: var(--color-text) url("../assets/img/Aufmacher-Kachel-BG.jpg") center 25% / cover no-repeat;
  color: var(--color-bg);               /* Schrift im Kasten = Blau */
  border-radius: 40px;                  /* abgerundete Ecken */
  overflow: hidden;                     /* Karten am Kastenrand anschneiden */
  /* horizontal am Logo/Header ausgerichtet (--container-pad), vertikal 24px */
  margin: 24px var(--container-pad);
  height: calc(100svh - 61px - 48px);   /* Header (~61px) + Rahmen (2×24) abziehen → passt ins Fenster */
}

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  padding: var(--space-lg) clamp(1.5rem, 5vw, 4rem);
}
/* Linke Zelle: volle Kachelhöhe + eigener Stacking-Kontext, damit das Porträt
   in den unteren Kachel-Anschnitt gesetzt werden kann und die drei Ebenen
   (Bold → Porträt → Marcel) sauber übereinanderliegen. Headline vertikal
   zentriert. */
.hero__text {
  position: relative;
  align-self: stretch;       /* füllt die Kachelhöhe (nicht mehr nur Inhalt) */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Headline vertikal mittig */
  isolation: isolate;        /* Stacking-Kontext für die z-Schichten */
}

/* Plakative Headline „Bold / Marcel". Das Porträt liegt als Schicht ZWISCHEN
   den beiden Wörtern: über „Bold" (z-1), hinter „Marcel" (z-3). Wichtig:
   die Headline darf KEINEN eigenen Stacking-Kontext bilden (kein z-index /
   isolation), sonst greifen die z-Werte der Wörter nicht gegen das Porträt. */
.hero__headline {
  position: relative;
  top: -3rem;                /* etwas höher gesetzt (position:relative → kein Stacking-Kontext) */
  width: max-content;
  max-width: 100%;
  margin: 0;
  line-height: 0.85;
}
.hero__word {
  display: block;
  position: relative;
  color: rgb(222 225 225);                   /* helles Grau-Weiß */
  font-weight: 700;                          /* Bold */
  text-transform: uppercase;                 /* All Caps */
  font-size: clamp(4rem, 11.08vw, 10.46rem);   /* +25 %, dann ×0,9845 → endet rechts bündig am „D" von BOLD */
  line-height: 0.85;
  letter-spacing: -0.02em;
}
/* „Bold" (4 Zeichen) 1,5× so groß wie „Marcel" (6 Zeichen) → bei der
   Monospace-Schrift füllen beide dieselbe Breite = Blocksatz-Optik. */
.hero__word--back {
  z-index: 1;
  font-size: clamp(6.09375rem, 16.875vw, 15.9375rem);   /* 1,5× Marcel, +25 % */
  /* Das „B" hat eine größere linke Seitenlage (Left Side Bearing) als das „M".
     Bei fixem 1,5×-Verhältnis ist der Ink-Versatz konstant 0.039em (BOLD-em) →
     nach links ausgleichen, damit B und M exakt linksbündig stehen. */
  text-indent: -0.039em;
}
.hero__word--front { z-index: 3; }   /* „Marcel" → vor dem Porträt */

/* Porträt sitzt im unteren Anschnitt der Kachel. Grundhöhe = 2/3 der
   Kachelhöhe, nach oben um 50 % vergrößert (× 1.5 → füllt die volle Höhe).
   Kachelhöhe = 100svh − Header(61) − Rahmen(48) = 100svh − 109px.
   Da unten verankert (bottom), wächst die Vergrößerung nach oben.
   bottom = −24px hebt die Hero-Innenpolsterung (--space-lg) auf → sitzt exakt
   auf der Kachel-Unterkante; .hero-frame schneidet es dort an. */
.hero__portrait {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--space-lg) * -1);
  transform: translateX(-50%);
  height: calc((100svh - 109px) * 2 / 3 * 1.5);
  width: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Inhalt der Unterseiten (Über mich, Work) im gerahmten Kasten */
.page-content {
  flex: 1;
  align-self: center;
  padding: var(--space-2xl) clamp(1.5rem, 5vw, 4rem);
  max-width: 70ch;
}
.page-content h1 { margin-bottom: var(--space-md); }
.page-content p { color: color-mix(in srgb, var(--color-bg) 65%, transparent); }
.page-content .stack > * + * { margin-top: var(--space-md); }
.hero__lead {
  color: color-mix(in srgb, var(--color-bg) 65%, transparent); /* gedämpftes Blau */
  max-width: 60ch;
  margin-top: var(--space-md);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .cardswap-wrap { height: 460px !important; }
  /* Einspaltig: Textzelle wieder auf Inhaltshöhe, Porträt mittig auf den
     Text zentriert (kein Unterkanten-Anschnitt), damit der Kopf nicht am
     oberen Kachelrand abgeschnitten wird. */
  .hero__text { align-self: center; }
  .hero__portrait {
    height: clamp(220px, 40svh, 400px);
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

/* --- Sketches-Kachel (exakt so groß wie der Aufmacher) ------- */
.sketch-frame {
  border-radius: 40px;
  overflow: hidden;
  background: var(--color-text);
  /* identische Maße wie .hero-frame; Abstand nach oben zum Statement
     verdoppelt: 2 × (container-pad + 50px). Der obere Rand dominiert die
     (kollabierende) Margin zum Statement → effektiver Abstand = dieser Wert. */
  margin: calc(2 * var(--container-pad) + 100px) var(--container-pad) 24px;
  height: calc(100svh - 61px - 48px);
}
.sketch-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 2 Kacheln unter dem Aufmacher --------------------------- */
/* Bündig mit der großen Kachel (hero-frame): gleicher Außenabstand
   links/rechts = --container-pad. Der Spalten-Gap ist ebenfalls
   --container-pad → linker Rand = Zwischenraum = rechter Rand
   (drei gleich große Lücken → symmetrisch). */
.feature-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--container-pad);
  /* Abstand oben = Zwischenraum (--container-pad); unten mehr Luft vor dem Footer */
  margin: var(--container-pad) var(--container-pad) var(--space-3xl);
}
/* Flieg-Einheit = Link (Kachel + CTA darunter), steigt als Ganzes auf. */
.feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
}
.feature-tile {
  /* halbe Höhe (50% der vorherigen Kachelhöhe) */
  min-height: calc((100svh - 148px) / 2);
  background: var(--color-text);     /* Cyan wie die große Kachel */
  border-radius: 40px;               /* gleiche Rundung wie hero-frame */
  overflow: hidden;                  /* Slider am Kachelrand beschneiden */
  position: relative;
}

/* CTA-Subline unter der Kachel: Text links, Pfeil rechts bündig zur Kachel. */
.feature-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--color-text);
}
.feature-cta__arrow {
  font-size: 1.3em;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease);
}
.feature-item:hover .feature-cta__arrow { transform: translateX(8px); }

/* Zeitstrahl-Vorschau in der Person-Kachel: zentrierte, blaue Typo auf Cyan.
   Jahr + Kurzlabel wechseln alle 5s (js/main.js), Hinweis bleibt stehen. */
.tl-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--color-bg);
  font-family: var(--font-mono);
}
.tl-preview__year {
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tl-preview__label {
  font-size: var(--fs-300);
  font-weight: 700;
  max-width: 24ch;
}
/* Jahr + Label faden beim Wechsel weich aus/ein (Klasse toggelt der JS-Timer). */
.tl-preview__year,
.tl-preview__label {
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.tl-preview.is-swapping .tl-preview__year,
.tl-preview.is-swapping .tl-preview__label {
  opacity: 0;
  transform: translateY(-12px);
}

/* Automatischer Projekt-Slider in der Grafik-Kachel (Crossfade). */
.slider { position: absolute; inset: 0; }
.slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.slider__img.is-active { opacity: 1; }

@media (max-width: 900px) {
  .feature-tiles { grid-template-columns: 1fr; }
  .feature-tile { min-height: 30svh; }
}

/* --- Scroll-Szene: Aufmacher weicht zurück, Kacheln steigen auf ---
   Beim Scrollen schrumpft + verblasst die große Kachel (Aufmacher) und
   weicht in den Hintergrund; die zwei Kacheln darunter steigen gestaffelt
   davor auf (links zuerst, rechts 200px später). Wird NUR aktiv, wenn
   js/main.js die Klasse setzt → bei prefers-reduced-motion Standard-Layout.
   Die eigentlichen Werte (scale/opacity/translate) setzt der rAF-Lerp inline. */
/* Stapelung von unten nach oben:
   Aufmacher (1) → Statement (2) → Sketches (3) → Link-Kacheln (4).
   Jede spätere Sektion legt sich über die frühere. */
.scene-on .hero-frame,
.scene-on .sketch-frame {
  position: sticky;
  top: var(--header-h, 61px);
  transform-origin: 50% 42%;  /* weicht leicht nach oben-hinten zurück */
  will-change: transform, opacity, filter;
}
.scene-on .hero-frame { z-index: 1; }
.scene-on .statement { position: relative; z-index: 2; }
.scene-on .sketch-frame { z-index: 3; }
.scene-on .feature-tiles {
  position: relative;
  z-index: 4;                 /* steigt VOR der Sketches-Kachel auf */
}
.scene-on .feature-item {
  will-change: transform;
  backface-visibility: hidden;
}

/* --- Statement: plakative Headline + Fließtext --------------- */
/* Links: laute Caps-Headline im Bold-Schnitt, füllt die linke Seite.
   Rechts: Fließtext linksbündig, per align-items:end an der Unterkante
   der Headline verankert. Außenränder + Spalten-Gap = --container-pad
   (bündig mit den Kacheln, gleicher Abstand nach oben). */
.statement {
  display: grid;
  grid-template-columns: 1.55fr 1fr;   /* Headline dominiert die linke Seite */
  gap: var(--container-pad);
  align-items: start;                   /* beide Spalten starten oben (Headline-Höhe) */
  /* sitzt zwischen Aufmacher und Kacheln → oben & unten gleicher Abstand */
  margin: var(--container-pad) var(--container-pad);
}
/* Linke Gruppe: plakative Headline + Subline direkt darunter. Rastet wie im
   About-Bereich mittig im Viewport ein (sticky) und bleibt stehen, während der
   Text rechts vorbeiscrollt. --pin-top setzt JS auf die vertikale Mitte
   (Viewport-Höhe − Höhe der Gruppe / 2). */
.statement__head {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--pin-top, 30vh);
  align-self: start;                    /* nicht auf Zeilenhöhe strecken → Sticky-Spielraum */
}
.statement__headline {
  margin: 0;
  font-family: var(--font-mono);        /* Geist Mono – Homepage-Font */
  font-weight: 700;                     /* Bold-Schnitt */
  text-transform: uppercase;            /* Cap Letters */
  color: var(--color-text);
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
/* Subline: gleiche Schriftgröße wie der Fließtext rechts, aber im Bold-Schnitt. */
.statement__subline {
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--fs-300);
  line-height: var(--lh-tight);
}
.statement__text {
  margin: 0;
  max-width: 46ch;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
}
@media (max-width: 900px) {
  .statement {
    grid-template-columns: 1fr;         /* gestapelt: Headline, dann Text */
    align-items: start;
    gap: var(--space-lg);
  }
  .statement__head { position: static; }  /* kein Pinning auf schmalen Screens */
}

/* --- CardSwap (Vanilla-Port, Original-CSS + Theme) ----------- */
.card-swap-container {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(28%, 0); /* Stapel in den rechten Seitenanschnitt schieben → mehr Platz links */
  transform-origin: bottom right;
  perspective: 900px;
  overflow: visible;
}

.card-swap-container .cs-card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 12px;
  border: 0;
  background: #000;

  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Inhalt */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  color: var(--color-text);
}
.card-swap-container .cs-card h3 { font-size: var(--fs-400); }
.card-swap-container .cs-card p { color: var(--color-text-muted); }

/* Aufmacher-Bilder auf den jeweiligen Karten. */
.card-swap-container .cs-card--branding,
.card-swap-container .cs-card--typo,
.card-swap-container .cs-card--ki {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end; /* Titel nach unten */
}

/* KI-Bild ist dunkel → weißer Titel mit leichtem Verlauf für Lesbarkeit. */
.card-swap-container .cs-card--ki {
  background-image: url("../assets/img/Aufmacher-Bild-KI.jpg");
}
.card-swap-container .cs-card--ki::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.card-swap-container .cs-card--ki > * { position: relative; z-index: 1; }

/* Branding- & Typo-Bild sind hell → kein dunkler Verlauf, dunkler Titel. */
.card-swap-container .cs-card--branding {
  background-image: url("../assets/img/Aufmacher-Bild-Branding.jpg");
}
.card-swap-container .cs-card--typo {
  background-image: url("../assets/img/Aufmacher-Bild-Typo.jpg");
}
.card-swap-container .cs-card--branding h3,
.card-swap-container .cs-card--typo h3 { color: #1c2b1e; }

@media (max-width: 768px) {
  .card-swap-container { transform: scale(0.75) translate(25%, 25%); }
}
@media (max-width: 480px) {
  .card-swap-container { transform: scale(0.55) translate(25%, 25%); }
}

/* --- Work-Seite: Scroll-Sequenz (Aufziehen → Horizontal-Galerie) ---
   Farbschema wie der Rest: blauer Hintergrund, helle (Cyan-)Kachel.
   Auf der Work-Seite wird der Header fixiert, damit die Bühne exakt den
   Viewport füllt und die Kachel sauber auf Vollbild wachsen kann. */
.page-work .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.work-scroll { position: relative; }

/* Bühne = ein Viewport, blauer „Rahmen" ringsum die Kachel. Wird gepinnt. */
.work-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--color-bg);
  overflow: hidden;
}

/* Die helle Kachel — Startzustand gerahmt (unter dem Header), GSAP zieht
   top/right/bottom/left auf 0 und den Radius auf 0 → Vollbild. */
.work-tile {
  position: absolute;
  top: 84px;
  right: var(--container-pad);
  bottom: 24px;
  left: var(--container-pad);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 40px;
  overflow: hidden;
  will-change: top, right, bottom, left, border-radius;
}

/* Galerie füllt die Kachel; der Track (10 Vollbild-Panels) wird
   horizontal verschoben — jedes Panel = ein kompletter Viewport. */
.work-gallery {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
}
.work-track {
  display: flex;
  height: 100%;
  margin: 0;
  will-change: transform;
}
.work-slide {
  position: relative;
  flex: 0 0 100vw;   /* Vollbild-Panel; JS setzt die exakte Pixelbreite */
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}

/* Stack-Slide (Projekt 05): trägt kein eigenes Hintergrundbild, sondern
   einen vertikal gestapelten Turm aus mehreren Vollbildern. Beim Erreichen
   verschiebt GSAP den Turm nach oben (JS), danach läuft der Track weiter. */
.work-slide--stack { background-image: none; }
.work-vstack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.work-vslide {
  flex: 0 0 100%;   /* jedes Bild = volle Panelhöhe */
  width: 100%;
  background-color: var(--color-bg);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}

/* --- Sticky Info-Button (Kreis + „i") --------------------------- */
.work-info {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-text);   /* Light-Blue wie die Kachel */
  color: var(--color-bg);          /* Blau */
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 33, 0.25);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.work-info:hover { transform: translateX(-50%) translateY(-2px); }
.work-info[aria-expanded="true"] { box-shadow: 0 4px 14px rgba(0, 0, 33, 0.3); }

/* --- Schwebende Info-Kachel ------------------------------------- */
.work-infocard {
  position: absolute;
  left: 50%;
  bottom: clamp(88px, calc(4vh + 68px), 112px);
  z-index: 55;
  width: min(90vw, 460px);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-text);   /* Light-Blue von der Startseite */
  color: var(--color-bg);          /* Blau */
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 33, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}
.work-infocard.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.work-infocard__title {
  font-size: var(--fs-400);
  margin-bottom: var(--space-sm);
}
.work-infocard__text {
  font-size: var(--fs-200);
  color: color-mix(in srgb, var(--color-bg) 80%, transparent);
}

/* Fallback ohne Scroll-Animation (reduced-motion / kein ScrollTrigger):
   Kachel statisch & vollflächig, Vollbild-Panels als native
   horizontale Scrollleiste mit Snap. */
.work--static .work-stage { height: auto; }
.work--static .work-tile {
  position: relative;
  inset: auto;
  margin: 0;
  border-radius: 0;
  padding-top: 84px;   /* Platz für den fixierten Header */
}
.work--static .work-gallery { position: relative; inset: auto; }
.work--static .work-track {
  height: 78vh;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.work--static .work-slide { scroll-snap-align: start; }
.work--static .work-info,
.work--static .work-infocard { display: none; }

/* --- Zeitstrahl / Werdegang (Port der LineSidebar) -----------
   Zwei zeit-synchrone Spalten IN der cyanfarbenen Kachel (die eine
   Bildschirmhöhe steht, intern gescrollt wird → man verlässt den
   Viewport nicht). CSS-Grid: 1 Zeile = 1 Jahr, deshalb liegt jedes
   Jahr in beiden Spalten auf gleicher Höhe. Blaue Schrift auf Cyan,
   Orange als Akzent. Jeder Eintrag liest den per rAF gelerpten
   --effect (0..1) → Farbe & Verschiebung; der mittige leuchtet. */
.hero-frame--timeline {
  --tl-rest: color-mix(in srgb, var(--color-bg) 44%, transparent);
  --tl-line: color-mix(in srgb, var(--color-bg) 20%, transparent);
  --tl-accent: #ff7100;
  --tl-shift: clamp(10px, 2vw, 24px);
  --tl-step: clamp(160px, 24vh, 250px); /* gleicher Abstand zwischen zwei Punkten */
  --tl-node-x: 10px;                    /* Abstand Strahl ↔ Eintragskante */
  --tl-pad-x: clamp(1.5rem, 3.5vw, 3rem); /* horizontaler Innenabstand der Kachel */
  --tl-date-fs: clamp(2rem, 5vw, 3.75rem); /* Zahlen +25% */
  /* vertikale Mitte der Jahreszahl (Body-Padding + halbe Zeilenhöhe 0.95) →
     Punkt und Balken sitzen auf Höhe der Zahl. */
  --tl-dot-y: calc(0.1rem + 0.44 * var(--tl-date-fs));
  padding: 0; /* die Kachel-Box füllt den Rahmen selbst */
  /* Kein Aufmacher-Hintergrundbild hier — diese Kachel ist einfarbig Cyan.
     (Das Bild aus .hero-frame gehört nur zur Start-Aufmacherkachel.) */
  background: var(--color-text);
}

/* Etwas Abstand vom Kachelrand, damit der Strahl nicht an der Kante klebt und
   die Punkte (Kreise) rundum frei stehen. position: relative = Bezug für die
   absolut liegende Sticky-Headline. */
.timeline-box {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Kein vertikaler Innenabstand: der Scroll-Container reicht bis an die
     Ober-/Unterkante der Kachel, sodass Text und Strahl bündig am Kachelrahmen
     abgeschnitten werden (nicht mit Cyan-Streifen davor). Der nötige Abstand
     vor dem ersten / nach dem letzten Eintrag kommt aus dem Inner-Padding (JS). */
  padding: 0 var(--tl-pad-x);
}

/* Headline HINTER der Kachel (weiß/hell auf Blau, wie die Text-Section-Headlines).
   position: fixed → nimmt keinen Flussplatz weg, sitzt oben mit kleinem Abstand.
   Die Kachel (z-index 1) ist am Start oben angeschnitten und gibt die Headline
   frei; beim Wachsen schiebt sie sich darüber (JS blendet die Headline dann aus). */
.timeline-lead__title {
  position: fixed;
  /* +25px mehr Abstand nach oben; der Abstand nach unten (zur Kachel) wird per
     JS auf denselben Wert gesetzt. */
  top: calc(var(--header-h, 61px) + clamp(0.5rem, 2vh, 1.5rem) + 25px);
  left: 0;
  right: 0;
  z-index: 0;
  /* linksbündig mit der linken Kante der Kachel (= --container-pad Rand). */
  padding-inline: var(--container-pad);
  margin: 0;
  pointer-events: none;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);               /* hell auf Blau, wie die anderen Headlines */
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
/* Leere Scrollstrecke für Wachsen + Durchscrollen des Zeitstrahls (blau wie die
   Seite). Höhe setzt JS (Wachs- + Lesestrecke); 0 als Fallback (reduced motion). */
.timeline-growspace {
  height: 0;
}

/* Bewegungsreduktion: keine Szene → Headline normal im Fluss über der Kachel
   (nicht fixed, sonst würde sie den Inhalt überlagern). */
@media (prefers-reduced-motion: reduce) {
  .timeline-lead__title {
    position: static;
    transform: none;
    margin: var(--space-xl) 0 var(--space-lg);
  }
}

/* Der interne Scroll-Container — hier passiert das Scrollen. */
.timeline-scroll {
  position: relative;
  flex: 1;
  min-height: 0;                 /* erlaubt dem Flex-Kind zu scrollen */
  overflow-y: auto;
  overflow-x: hidden;
  /* Am unteren Ende der Liste kettet der Scroll auf die Seite weiter
     (Kachel fährt dann in den Hintergrund). Oben bleibt er in der Kachel. */
  overscroll-behavior-y: auto;
  scrollbar-width: none;         /* Leiste ausblenden (Highlight zeigt Position) */
}
.timeline-scroll::-webkit-scrollbar { width: 0; height: 0; }

.timeline__inner {
  position: relative;
  padding-block: clamp(4rem, 30vh, 14rem); /* Fallback; JS setzt exakte Werte */
}

/* Zwei Spalten, gemeinsame Zeilen (grid-template-rows per JS). */
.timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
}

/* Ein Eintrag: sitzt in EINER Zeile (gleicher Abstand). Der Balken links
   verbindet den Punkt mit dem nächsten (--span Schritte); der letzte Punkt
   einer Spalte hat span 0 → kein Balken. Der Text steht oben. */
.tl-entry {
  --effect: 0;
  --span: 0;
  position: relative;
  /* Strahl um --tl-node-x eingerückt, damit die Kreise voll sichtbar sind */
  padding-left: calc(var(--tl-node-x) + clamp(20px, 2.4vw, 34px));
  min-width: 0;
}

/* Endet eine Spalte früher, „klebt" ihr letzter Punkt in der Mitte fest,
   während die längere Spalte weiterscrollt. Die Jahreszahl liegt dann auf
   halber Höhe — genau wie der letzte Punkt der anderen Spalte am Ende. */
.tl-entry--pin {
  position: sticky;
  top: calc(50% - 0.1rem - 0.475 * var(--tl-date-fs));
  z-index: 3;
  align-self: start;
}

/* Verbindungsbalken: startet auf Höhe der Zahl, mittig auf dem Strahl
   (translateX(-50%) zentriert die 2px auf --tl-node-x), Länge = --span × Schritt. */
.tl-entry__bar {
  position: absolute;
  left: var(--tl-node-x);
  top: var(--tl-dot-y);
  width: 2px;
  height: calc(var(--span) * var(--tl-step));
  transform: translateX(-50%);
  background: color-mix(
    in srgb,
    var(--tl-accent) calc(var(--effect) * 100%),
    var(--tl-line)
  );
}
/* Knoten auf Höhe der Zahl, exakt mittig auf dem Strahl. Voll deckend (solide
   Fläche) → der Balken scheint nicht durch, keine Transparenz-Überlagerung. */
.tl-entry__dot {
  position: absolute;
  left: var(--tl-node-x);
  top: var(--tl-dot-y);
  z-index: 1; /* über dem Balken */
  width: calc(10px + var(--effect) * 5px);
  height: calc(10px + var(--effect) * 5px);
  border-radius: 50%;
  background: var(--tl-accent);
  transform: translate(-50%, -50%);
}

.tl-entry__body {
  position: relative;
  display: block;
  padding-top: 0.1rem;
  transform: translateX(calc(var(--effect) * var(--tl-shift)));
}

/* Kleine Spalten-Überschrift, nur über dem ersten Eintrag jeder Spalte.
   Absolut positioniert, damit sie die Jahreszahl NICHT nach unten schiebt
   (Startjahr bleibt in beiden Spalten auf gleicher Höhe). */
.tl-entry__col {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

/* Das plakative Element: große Jahresspanne, Geist Mono */
.tl-entry__date {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: var(--tl-date-fs);
  color: color-mix(
    in srgb,
    var(--tl-accent) calc(var(--effect) * 100%),
    var(--tl-rest)
  );
}

.tl-entry__place {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: -0.01em;
  color: color-mix(
    in srgb,
    var(--color-bg) calc(60% + var(--effect) * 40%),
    transparent
  );
}
.tl-entry__role {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  line-height: 1.35;
  color: color-mix(
    in srgb,
    var(--color-bg) calc(42% + var(--effect) * 33%),
    transparent
  );
}

@media (max-width: 640px) {
  /* Auf schmalen Screens untereinander statt zweispaltig wäre unklar für
     die Zeitachse — Spalten bleiben, nur enger + kleinere Typo. */
  .hero-frame--timeline {
    --tl-step: clamp(132px, 22vh, 190px);
    --tl-date-fs: clamp(1.7rem, 8vw, 2.6rem); /* Zahlen +25% */
  }
  .timeline-grid { column-gap: clamp(0.75rem, 3vw, 1.5rem); }
  .tl-entry { padding-left: calc(var(--tl-node-x) + 16px); }
}

/* --- Outro-Textsektion (außerhalb der Kachel, auf blauem Grund) ---
   Rückt beim Scrollen hoch, während die Kachel zurückweicht. */
.about-outro {
  position: relative;
  z-index: 2;
  background: var(--color-bg); /* deckt die zurückweichende Kachel sauber ab */
  padding: clamp(3rem, 10vh, 7rem) var(--container-pad) clamp(4rem, 12vh, 9rem);
}
.about-outro__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  /* Zwei Spalten: links die plakative Headline, rechts der komplette Text.
     Beide Zellen füllen die Zeilenhöhe (stretch) → die Headline kann über die
     ganze Texthöhe hinweg mittig kleben und rastet erst am unteren Textende
     wieder aus. */
  display: grid;
  grid-template-columns: 1.55fr 1fr;    /* Headline dominiert die linke Seite */
  gap: var(--container-pad);
  align-items: stretch;
  font-family: var(--font-mono);
}
.about-outro__headcol { min-width: 0; }
/* Headline wie .statement__headline (laut, Caps, Bold, enge Zeilen). Sie rastet
   mittig im Viewport ein (sticky) und bleibt stehen, während der Text rechts
   weiterscrollt – bis dessen Unterkante die Headline-Unterkante erreicht (Ende
   der stretch-Zelle). --pin-top setzt JS auf die vertikale Mitte
   (Viewport-Höhe − Headline-Höhe / 2). */
.about-outro .about-outro__q {
  position: sticky;
  top: var(--pin-top, 30vh);
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
/* Rechte Spalte: Text startet oben, auf Höhe der Headline-Oberkante. */
.about-outro__body {
  min-width: 0;
  max-width: 46ch;
}
.about-outro p {
  margin: 0;
  text-align: left;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
/* Zweite Frage als Subline über dem zweiten Textabschnitt. */
.about-outro__subq {
  margin: clamp(2rem, 6vh, 4rem) 0 var(--space-md);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  color: var(--color-text);
}

/* --- Szene: Kachel weicht in den Hintergrund, Outro rückt davor ---
   JS setzt `.laufbahn-on` und lerpt scale/opacity/blur inline (nur wenn
   keine Bewegungsreduktion). Die Kachel wird sticky = bleibt beim Scrollen
   stehen und verblasst; die Outro-Sektion steigt davor auf. */
.laufbahn-on .hero-frame--timeline {
  position: sticky;
  /* +24px = der obere Rahmenabstand der Startseiten-Kachel, damit die Kachel
     an ihrer vollen Größe genauso sitzt wie auf der Startseite (24px Luft unter
     dem Header) und nicht am Header klebt / höher wirkt. */
  top: calc(var(--header-h, 61px) + 24px);
  z-index: 1;
  transform-origin: 50% 42%;
  /* Am Start oben angeschnitten (reduzierte Höhe, unten verankert). JS fährt
     --grow-clip beim Scrollen auf 0 → die Kachel wächst nach oben über die
     Headline auf ihre volle Höhe. round 40px hält die abgerundeten Ecken. */
  clip-path: inset(var(--grow-clip, 0px) 0 0 0 round 40px);
  will-change: transform, opacity, filter, clip-path;
}

@media (max-width: 900px) {
  /* gestapelt (Headline, dann Text); kein Pinning auf schmalen Screens */
  .about-outro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .about-outro .about-outro__q { position: static; }
}

/* --- Footer -------------------------------------------------- */
.site-footer {
  padding: var(--space-2xl) var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-100);
}
/* Rechtliches + Kontakt: dezente Links rechts im Footer */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}
.site-footer__nav a {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-text);
}

/* --- Rechtstexte (Impressum / Datenschutz) ------------------- */
.legal {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  padding: clamp(6rem, 16vh, 10rem) var(--container-pad) clamp(4rem, 12vh, 9rem);
}
.legal__inner {
  max-width: 72ch;
  margin-inline: auto;
  font-family: var(--font-mono);
}
.legal__title {
  font-size: var(--fs-500);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs);
}
.legal__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-200);
  margin-bottom: var(--space-2xl);
}
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.legal h3 {
  font-size: var(--fs-300);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
}
.legal p,
.legal li {
  font-size: var(--fs-200);
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.legal p + p { margin-top: var(--space-md); }
.legal ul {
  list-style: none;
  margin: var(--space-sm) 0;
  padding: 0;
}
.legal li {
  position: relative;
  padding-left: 1.25em;
  margin-top: var(--space-2xs);
}
.legal li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}
.legal a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.legal a:hover,
.legal a:focus-visible { text-decoration-color: var(--color-text); }
.legal address {
  font-style: normal;
  line-height: 1.7;
}