/* ============================================
   LEADPILOTS - COMPLETE CSS
   Struktur & Motion nach new.studio, Brand: LeadPilots
   ============================================ */

/* Fonts */
@font-face {
  font-family: 'Founders Grotesk';
  src: url('../assets/fonts/FoundersGrotesk_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../assets/fonts/FoundersGrotesk_RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../assets/fonts/FoundersGrotesk_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../assets/fonts/FoundersGrotesk_BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Martina Plantijn';
  src: url('../assets/fonts/MartinaPlantijn_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martina Plantijn';
  src: url('../assets/fonts/MartinaPlantijn_Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* CSS Variables */
:root {
  /* Phone-Skala: Überschriften wachsen mit der Breite (320 bis 430 px), Elemente bleiben im Verhältnis */
  --fs-h1: clamp(30px, calc(10.66vw - 4px), 50px);
  --fs-h2: clamp(24px, calc(6.6vw + 3px), 40px);
  --nav-h: 3.25rem;
  --btn-h: 48px;
  --color-foreground: #0a0a0f;
  --color-background: #f4f4f4;
  --color-blue: #1e3aff;
  --color-light-gray: #e8e8e8;
  --color-gray: #d0d0d0;
  --color-dark-gray: #6b6b6b;
  --color-white: #ffffff;

  --font-family-body: 'Founders Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-serif: 'Martina Plantijn', Georgia, serif;

  --font-size-h1: clamp(3rem, 8vw, 7rem);
  --font-size-h2: clamp(2rem, 5vw, 4.5rem);
  --font-size-h3: clamp(1.5rem, 3vw, 2.5rem);
  --font-size-p1: 1.125rem;
  --font-size-p2: 0.875rem;
  --font-size-caption: 0.75rem;

  --line-height-h1: 1.05;
  --line-height-h2: 1.1;
  --line-height-body: 1.5;

  --spacing-container: 1.25rem;
  --spacing-section: 7.5rem;

  --full-height: calc(var(--svh, 1vh) * 100);

  /* Mikro-Interaktionen: einheitliche Kurve, schnell genug zum Reagieren */
  --ease-ui: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-ui: 200ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p1);
  line-height: var(--line-height-body);
  color: var(--color-foreground);
  background-color: var(--color-background);
  overflow-x: hidden;
}

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

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

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

/* Typography */
.h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.h3 {
  font-size: var(--font-size-h3);
  font-weight: 400;
}

.p1 {
  font-size: var(--font-size-p1);
  line-height: 1.4;
}

.p2 {
  font-size: var(--font-size-p2);
  line-height: 1.4;
}

.caption {
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

em {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-weight: 400;
}

.text-dark-gray { color: var(--color-dark-gray); }
.text-foreground { color: var(--color-foreground); }
.text-white { color: var(--color-white); }

/* Layout */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--spacing-container);
  padding-right: var(--spacing-container);
}

/* Navigation */
/* Navigation — über dem Hero versteckt, erscheint beim Scrollen */
.nav-header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 2.5rem);
  max-width: 1400px;
  transition:
    transform var(--duration-ui) var(--ease-ui),
    opacity 260ms ease;
}

.nav-header.hidden {
  transform: translateX(-50%) translateY(calc(-100% - 2.5rem));
}

.nav-header.is-over-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(-100% - 2.5rem));
}

.nav-bar {
  background: linear-gradient(135deg, rgba(13, 17, 31, 0.58), rgba(30, 37, 60, 0.46));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border-radius: 0.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 12px 36px rgba(4, 8, 24, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  position: relative;
  color: var(--color-white);
  transition:
    background-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    color 260ms ease;
}

.nav-bar .wordmark {
  color: var(--color-white);
}

.nav-bar .nav-burger span {
  background: var(--color-white);
}

.nav-bar .nav-menu-section .caption,
.nav-bar .nav-menu-footer {
  color: rgba(255, 255, 255, 0.66);
}

.nav-header.is-over-footer .nav-bar {
  background: rgba(8, 20, 92, 0.76);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 38px rgba(3, 9, 48, 0.25);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.nav-header.is-over-footer .nav-burger span {
  background: var(--color-white);
}

.nav-header.is-over-footer .wordmark {
  color: var(--color-white);
}

.nav-header.is-over-footer .nav-menu-section .caption,
.nav-header.is-over-footer .nav-menu-footer {
  color: rgba(255, 255, 255, 0.66);
}

.nav-header.is-over-footer .nav-menu-item {
  color: var(--color-white);
}

.nav-header.is-over-footer .nav-logo:focus-visible,
.nav-header.is-over-footer .nav-burger:focus-visible {
  outline-color: var(--color-white);
}

.nav-toggle {
  display: flex;
  width: 100%;
  height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .nav-toggle {
    padding: 0 1.5rem;
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  min-width: 5.5rem;
}

.nav-logo svg {
  width: 100%;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.nav-links > a {
  display: none;
}

.nav-burger {
  position: relative;
  right: auto;
  height: 2.75rem;
  width: 2.75rem;
  transform: scaleX(1);
  cursor: pointer;
  padding: 0.25rem;
  display: block;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--duration-ui) var(--ease-ui);
}

.nav-burger:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.nav-logo:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.nav-burger.active {
  transform: scaleX(1);
}

.nav-burger span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 1.25rem;
  background: var(--color-foreground);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-burger span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 4px));
}

.nav-burger span:nth-child(2) {
  transform: translate(-50%, calc(-50% + 4px));
}

.nav-burger.active span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-burger.active span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Nav Menu (expanded) */
.nav-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.nav-menu.active {
  grid-template-rows: 1fr;
}

.nav-menu-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1rem;
  overflow: hidden;
}

@media (min-width: 640px) {
  .nav-menu-content {
    padding: 0 1.5rem;
  }
}

.nav-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nav-menu-section .caption {
  color: var(--color-dark-gray);
}

.nav-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-menu-item {
  display: block;
  width: fit-content;
  cursor: pointer;
  transition: opacity var(--duration-ui) var(--ease-ui);
  opacity: 0;
  transform: translateY(20px);
}

.nav-menu.active .nav-menu-item {
  opacity: 1;
  transform: translateY(0);
}

.nav-menu-item:hover {
  opacity: 0.4;
}

.nav-menu-item.h3 {
  font-size: var(--font-size-h3);
}

.nav-menu-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .nav-menu-footer {
    margin-bottom: 1.5rem;
  }
}

.nav-menu-contact {
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbar */
.custom-scrollbar {
  position: fixed;
  bottom: 1px;
  right: 1px;
  top: 0;
  z-index: 998;
  display: none;
}

@media (min-width: 640px) {
  .custom-scrollbar {
    display: block;
  }
}

.custom-scrollbar > div {
  position: relative;
  height: 100%;
}

.scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 150px;
  width: 8px;
  cursor: grab;
  /* Ohne backdrop-filter: deckender stattdessen, kein Neuverwischen pro Frame */
  background: rgba(107, 107, 107, 0.85);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  transition: opacity var(--duration-ui) var(--ease-ui);
}

.scrollbar-thumb:hover {
  opacity: 0.8;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  background: var(--color-blue);
  color: white;
  padding: 0.25rem 0.5rem;
  z-index: 999;
  opacity: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: opacity var(--duration-ui) var(--ease-ui);
}

/* Hero Section — siehe css/aspen-hero.css.
   Die Regeln der alten WebGL-Hero (.hero mit --full-height, .hero-content,
   .hero-subtitle, .hero-webgl) sind hier entfernt: sie ueberschrieben Hoehe
   und Overflow der neuen Hero. Die Klassen HeroWebGL und LeadPilotsHero in
   js/main.js bleiben vorerst liegen und laufen ins Leere, weil das Markup
   [data-leadpilots-hero] nicht mehr existiert — der Weg zurueck geht damit
   ueber die Git-Historie plus Wiedereinsetzen des alten Hero-Markups. */

/* Wordmark */
.wordmark {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
  line-height: 1;
  white-space: nowrap;
}

.wordmark sup {
  font-size: 0.55em;
  font-weight: 400;
  margin-left: 0.1em;
}

.nav-logo .wordmark {
  display: block;
}

/* Page Hero (für Unterseiten) */
.page-hero {
  height: calc(var(--svh) * 70);
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 3rem 1.25rem;
  color: white;
}

.page-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.15) 45%, rgba(10,10,12,0.55) 100%);
  pointer-events: none;
}

.page-hero-bg img,
.page-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ansatz: S/W-Grading ist ins Bild eingebacken (dort liegt auch die blaue
   Konturlinie, die nicht gegraust werden darf). */
.approach-hero .page-hero-bg img {
  filter: none;
}

/* Work Hero — Band mit rotierendem Wort, darunter drei Projektkacheln.
   Heller Grundton der Seite, den Kontrast liefern die Kacheln. */
.work-hero {
  position: relative;
  background: var(--color-background);
}

/* Ab Tablet-Breite besetzt der Hero die komplette erste Bildschirmseite:
   Band oben, Kachelzeile füllt exakt die Resthöhe — die Bilder fallen bei
   keinem Fensterformat mehr unten aus dem Viewport. */
@media (min-width: 700px) {
  .work-hero {
    display: flex;
    flex-direction: column;
    height: var(--full-height);
    min-height: 560px;
  }
}

.work-hero-band {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 8rem var(--spacing-container) 3rem;
}

.work-hero-lead {
  max-width: 30ch;
  font-size: var(--font-size-p1);
  line-height: 1.35;
  color: var(--color-dark-gray);
}

.work-hero-title {
  font-size: clamp(2.75rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.work-hero-title-fixed,
.work-hero-title-slot {
  display: block;
}

.work-hero-title-slot {
  color: var(--color-blue);
  transition: opacity 320ms var(--ease-ui);
}

@media (min-width: 900px) {
  .work-hero-band {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    padding: 11rem var(--spacing-container) 4rem;
  }

  .work-hero-lead {
    padding-bottom: 0.5rem;
  }

  .work-hero-title {
    text-align: right;
  }
}

/* Flache Desktop-Fenster: das Band gibt vertikalen Platz an die Bilder ab. */
@media (min-width: 1024px) and (max-height: 760px) {
  .work-hero-band {
    padding: 6rem var(--spacing-container) 2rem;
  }
}

.work-hero-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--color-background);
}

@media (min-width: 700px) {
  .work-hero-tiles {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    flex: 1 1 auto;
    min-height: 220px;
  }
}

.work-hero-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111111;
}

@media (min-width: 700px) {
  .work-hero-tile {
    /* Desktop: Höhe kommt aus der Resthöhe des Hero, kein Starrformat.
       min-height: 0 erlaubt das Stauchen unter die Bild-Inhaltsmindesthöhe. */
    aspect-ratio: auto;
    min-height: 0;
  }
}

.work-hero-tile picture {
  display: block;
  width: 100%;
  height: 100%;
}

.work-hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.74);
  transition: filter 500ms var(--ease-ui), transform 600ms var(--ease-ui);
}

.work-hero-tile:hover img,
.work-hero-tile:focus-visible img {
  filter: grayscale(0) contrast(1) brightness(0.88);
  transform: scale(1.04);
}

/* Freigestelltes Porträt sitzt auf Schwarz und bleibt entsättigt. */
.work-hero-tile--portrait {
  background: #000000;
}

.work-hero-tile--portrait img {
  object-position: 50% 24%;
  filter: grayscale(1) contrast(1.06) brightness(0.86);
}

.work-hero-tile--portrait:hover img,
.work-hero-tile--portrait:focus-visible img {
  filter: grayscale(1) contrast(1.12) brightness(1);
  transform: scale(1.03);
}

.work-hero-tile-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: clamp(0.9rem, 2vw, 1.5rem);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(4, 4, 8, 0.88), rgba(4, 4, 8, 0));
}

.work-hero-tile-title {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}

.work-hero-tile-client {
  display: block;
  font-size: var(--font-size-p2);
  opacity: 0.68;
}

.work-hero-tile:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: -4px;
}

/* Ankersprung nicht unter die fixierte Navigation laufen lassen. */
.work-row {
  scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  .work-hero-tile img,
  .work-hero-title-slot {
    transition: none;
  }

  .work-hero-tile:hover img,
  .work-hero-tile:focus-visible img {
    transform: none;
  }
}

/* Sections */
section {
  position: relative;
}

.section-label {
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .section-label {
    margin-bottom: 2rem;
  }
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6rem;
  }
}

.btn-wrapper {
  width: fit-content;
  margin-bottom: 0.5rem;
}

.divider {
  background: var(--color-gray);
  border: none;
  height: 1px;
  width: 100%;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .divider {
    margin-bottom: 2rem;
  }
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  width: fit-content;
  position: relative;
  box-shadow:
    0 1px 2px rgba(0,0,20,0.08),
    0 4px 12px rgba(30,58,255,0.14);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 180ms ease,
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background-color: #314aff;
    box-shadow:
      0 2px 4px rgba(0,0,20,0.10),
      0 8px 20px rgba(30,58,255,0.20);
    transform: translateY(-1px) scale(1.01);
  }
}

.btn-primary:active {
  background-color: #1830db;
  box-shadow:
    0 1px 2px rgba(0,0,20,0.08),
    0 3px 8px rgba(30,58,255,0.14);
  transform: translateY(0) scale(0.97);
  transition-duration: 90ms;
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(30,58,255,0.28),
    0 4px 12px rgba(30,58,255,0.16);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition-duration: 0.01ms;
  }

  .btn-primary:hover {
    transform: none;
  }
}

/* Digitales System & 3D-Referenzen */
.ambition {
  padding-top: var(--spacing-section);
  padding-bottom: 0;
}

/* Homepage: Gleicher Hintergrund und ein kompakterer Abstand verhindern,
   dass der Weissraum wie ein neues Dokument wirkt. (Die frueher hier
   weiterlaufenden Konstruktionslinien des Hero-Rasters sind entfernt.) */
#hero + .ambition {
  position: relative;
  margin-top: -1px;
  padding-top: clamp(4.5rem, 6vw, 6rem);
  background: #fff;
}

/* Der weisse Zug laeuft auf der Startseite bis zum CTA durch: Stufen und
   der Grund unter der Gruender-Karte bleiben Weiss — sonst stoesst das
   Grau der body-Flaeche (#f4f4f4) hart an den weissen Referenz-Bereich.
   Die Gruender-Karte selbst behaelt ihre eigene Flaeche (Card-Look).
   Scoping ueber #hero: nur die Startseite hat diesen Anker. */
#hero ~ .stairs,
#hero ~ leadpilots-founder-section {
  background: #fff;
}

.ambition h2 {
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .ambition h2 {
    margin-bottom: 6rem;
  }
}

.video-container {
  aspect-ratio: 16/9;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Referenzen: gepinnte Bühne, Projektwechsel als Wischmaske.
   Die gesamte Darstellung liegt in CSS — js/reel.js setzt nur --reveal
   und --edge pro Ebene. Kein WebGL, kein Canvas. */
.work-reel-sequence {
  position: relative;
  height: auto;
}

/* Nur wenn JS die Scroll-Steuerung übernimmt, wird der Wrapper hoch und die
   Bühne klebt. 475svh Wrapper minus 100svh Bühne = 375svh Scrollweg, also
   rund 94svh pro Projekt. */
.work-reel-sequence.is-scroll-driven {
  height: 475vh;
  height: 475svh;
}

.work-reel-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem var(--spacing-container) 2.5rem;
}

.work-reel-sequence.is-scroll-driven .work-reel-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.work-reel-figure {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

/* Die Karte ist höhenbegrenzt, damit Bild und Beschriftung zusammen in die
   gepinnte Bühne passen — die Beschriftung erbt die Breite und sitzt dadurch
   exakt auf den Bildkanten. */
.work-reel-sequence.is-scroll-driven .work-reel-figure {
  width: min(100%, calc((100svh - 14rem) * 16 / 9));
}

.work-reel-card {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.5rem;
  background: var(--color-light-gray);
  box-shadow:
    0 1px 2px rgba(10, 10, 15, 0.05),
    0 16px 36px -14px rgba(10, 10, 15, 0.18),
    0 56px 110px -44px rgba(10, 10, 15, 0.26);
}

.work-reel-layer {
  position: absolute;
  inset: 0;
}

/* Ebene 0 liegt immer offen, jede weitere wird von rechts aufgezogen.
   Weil die obere Ebene die untere vollständig verdeckt, zeigt jedes Pixel
   zu jedem Zeitpunkt genau ein Motiv — nie zwei zu je 50 %. */
.work-reel-layer + .work-reel-layer {
  --reveal: 0;
  --edge: 0;
  clip-path: inset(0 0 0 calc((1 - var(--reveal)) * 100%));
}

.work-reel-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Weiche Kante an der Wischgrenze: liegt innerhalb der Maske und verschwindet,
   sobald die Ebene ganz offen oder ganz zu ist. */
.work-reel-layer + .work-reel-layer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((1 - var(--reveal)) * 100%);
  width: clamp(3rem, 7vw, 6.5rem);
  opacity: var(--edge);
  background: linear-gradient(90deg, rgba(10, 10, 15, 0.36), rgba(10, 10, 15, 0.14) 28%, rgba(10, 10, 15, 0));
  pointer-events: none;
}

.work-reel-caption {
  --swap: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.125rem;
  opacity: calc(1 - 0.8 * var(--swap));
}

.work-reel-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.work-reel-name {
  font-size: var(--font-size-p1);
  line-height: 1.3;
  color: var(--color-foreground);
}

.work-reel-branch {
  font-size: var(--font-size-p2);
  line-height: 1.3;
  color: var(--color-dark-gray);
}

.work-reel-count {
  flex: none;
  font-size: var(--font-size-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark-gray);
  font-variant-numeric: tabular-nums;
}

@media (max-width:639.98px) {
  .work-reel-caption {
    margin-top: 0.875rem;
  }
}

/* Selected Work */
.selected-work {
  padding-bottom: var(--spacing-section);
}

.selected-work .container:first-child {
  padding-top: 3.75rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .selected-work .container:first-child {
    padding-top: 7.5rem;
  }
}

/* Work Rows — gestapelte Referenz-Rows (Bild links, Text rechts) */
.work-rows {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  position: relative;
  z-index: 1;
}

.work-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  color: inherit;
}

.work-row-media {
  overflow: hidden;
  border-radius: 0.5rem;
}

.work-row-media img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 600ms var(--ease-ui);
}

.work-row-media--top img {
  object-position: top;
}

.work-row:hover .work-row-media img {
  transform: scale(1.03);
}

.work-row-client {
  color: var(--color-dark-gray);
}

.work-row-title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
  margin-top: 0.75rem;
  transition: color var(--duration-ui) var(--ease-ui);
}

.work-row:hover .work-row-title {
  color: var(--color-blue);
}

.work-row-desc {
  color: var(--color-dark-gray);
  margin-top: 0.75rem;
}

.work-row .work-tags {
  margin-top: 1.25rem;
}

.work-row-btn {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2.25rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--color-foreground);
  border-radius: 0.375rem;
  font-size: var(--font-size-p2);
  font-weight: 500;
  color: var(--color-foreground);
  transition: background var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui);
}

.work-row:hover .work-row-btn {
  background: var(--color-foreground);
  color: var(--color-white);
}

/* Weitere Referenzen — kompakte Karten unter den großen Rows */
.work-more {
  margin-top: 6rem;
}

@media (min-width: 768px) {
  .work-more {
    margin-top: 7.5rem;
  }
}

.work-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .work-more-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 3rem;
  }
}

.work-more-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: inherit;
}

@media (min-width: 768px) {
  .work-more-item {
    gap: 1.25rem;
  }
}

.work-more-media {
  flex: 0 0 7.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

@media (min-width: 768px) {
  .work-more-media {
    flex-basis: 13rem;
  }
}

.work-more-media img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 600ms var(--ease-ui);
}

.work-more-item:hover .work-more-media img {
  transform: scale(1.05);
}

.work-more-title {
  color: var(--color-foreground);
  font-weight: 500;
  transition: color var(--duration-ui) var(--ease-ui);
}

.work-more-item:hover .work-more-title {
  color: var(--color-blue);
}

.work-more-sub {
  color: var(--color-dark-gray);
  margin-top: 0.25rem;
}

.work-more .work-tags {
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .work-rows {
    gap: 7.5rem;
  }

  .work-row {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-row-media img,
  .work-more-media img {
    transform: none;
    transition: none;
  }
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .work-tags {
    margin-top: 0.5rem;
  }
}

.tag {
  background: var(--color-light-gray);
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0.5rem;
  padding-bottom: 0.25rem;
  border-radius: 0.125rem;
  font-size: var(--font-size-caption);
  color: var(--color-dark-gray);
}

/* Portable founder / Who we are */
leadpilots-founder-section {
  display: block;
  width: 100%;
  background: transparent;
}

/* Reserve the component's expected aspect before its deferred module defines
   the element, so the following CTA does not jump during first paint. */
leadpilots-founder-section:not(:defined) {
  min-height: 88vw;
  background: transparent;
}

@media (max-width:767.98px) {
  leadpilots-founder-section:not(:defined) {
    min-height: 435vw;
  }
}

/* CTA Section */
.cta-section {
  position: relative;
  height: calc(var(--svh) * 90);
}

@media (orientation: portrait) {
  .cta-section {
    height: calc(var(--svh) * 70);
  }
}

.cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Das CTA-Bild animiert jetzt über translateY; overflow clippt den
     kurzen Schubweg beim Einblenden auf die Sektion. */
  overflow: hidden;
}

.cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,12,0.3) 0%, rgba(10,10,12,0.15) 45%, rgba(10,10,12,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

.cta-bg img,
.cta-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Bewegung aus, wenn das System es verlangt: Poster statt Video */
@media (prefers-reduced-motion: reduce) {
  .cta-bg video {
    display: none;
  }

  .cta-section--video .cta-bg {
    background: #06060a url('../assets/hero-bg/hero-skyline-poster.jpg') center / cover no-repeat;
  }
}

/* Video-CTA: flacher als die Bild-Variante. Der Loop hat unten und an den
   Raendern eine eigene Vignette — Text und Button sitzen deshalb tiefer,
   damit sie ganz im dunklen Rand stehen. */
.cta-section--video .cta-bg {
  background: #06060a url('../assets/hero-bg/hero-skyline-poster.jpg') center / cover no-repeat;
}

.cta-section--video {
  height: calc(var(--svh) * 66);
}

@media (orientation: portrait) {
  .cta-section--video {
    height: calc(var(--svh) * 55);
  }
}

.cta-section--video .cta-content {
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .cta-section--video .cta-content {
    padding-bottom: 1.5rem;
  }
}

.cta-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  color: white;
}

@media (min-width: 640px) {
  .cta-content {
    gap: 2rem;
    padding: 3rem;
  }
}

/* Insights */
.insights {
  padding-bottom: var(--spacing-section);
}

.insights .container:first-child {
  padding-top: 3.75rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .insights .container:first-child {
    padding-top: 7.5rem;
  }
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .insights-grid {
    gap: 2.5rem 1.5rem;
  }
}

.insight-item {
  grid-column: span 4;
  height: auto;
}

.insight-item a {
  display: block;
  position: relative;
  height: fit-content;
  transition: opacity var(--duration-ui) var(--ease-ui);
}

.insight-item a:hover {
  opacity: 0.8;
}

.insight-item img,
.insight-item video {
  width: 100%;
  height: auto;
}

.insight-item:nth-child(2) video {
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--color-light-gray);
}

.insight-meta {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .insight-meta {
    margin-top: 0.5rem;
  }
}

.insight-title {
  color: var(--color-foreground);
}

.insight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .insight-tags {
    margin-top: 0.5rem;
  }
}

.read-more {
  color: var(--color-dark-gray);
  text-decoration: underline;
  white-space: nowrap;
}

/* Case Study Detail Pages */
.case-study-hero {
  height: calc(var(--svh) * 80);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.case-study-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.case-study-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,12,0.25) 0%, rgba(10,10,12,0.05) 45%, rgba(10,10,12,0.6) 100%);
  pointer-events: none;
}

.case-study-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem 1.25rem;
  color: white;
  z-index: 2;
}

.case-study-content {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
}

.case-study-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-gray);
}

.case-study-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-study-meta-item .caption {
  color: var(--color-dark-gray);
}

.case-study-text {
  max-width: 800px;
  margin-bottom: 4rem;
}

.case-study-text h2 {
  margin-bottom: 1.5rem;
}

.case-study-text p {
  margin-bottom: 1rem;
  color: var(--color-dark-gray);
}

.case-study-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

@media (min-width: 640px) {
  .case-study-gallery {
    grid-template-columns: repeat(12, 1fr);
  }
}

.case-study-gallery img {
  width: 100%;
  grid-column: span 4;
}

@media (min-width: 640px) {
  .case-study-gallery img.full { grid-column: span 12; }
  .case-study-gallery img.half { grid-column: span 6; }
  .case-study-gallery img.third { grid-column: span 4; }
}

/* Next Project */
.next-project {
  padding-top: var(--spacing-section);
  border-top: 1px solid var(--color-gray);
}

.next-project a {
  display: block;
  transition: opacity var(--duration-ui) var(--ease-ui);
}

.next-project a:hover {
  opacity: 0.8;
}

.next-project img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Footer */
.footer {
  --footer-blue: #2442ff;
  --footer-blue-deep: #1732df;
  --footer-ink: #070b1c;
  --footer-line: rgba(255, 255, 255, 0.15);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-white);
  background: var(--footer-blue);
}

.footer-nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.footer-conversation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(52rem 32rem at 92% -20%, rgba(255, 255, 255, 0.16), transparent 64%),
    linear-gradient(130deg, var(--footer-blue) 0%, #2948ff 54%, var(--footer-blue-deep) 116%);
}

.footer-conversation::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: 0;
  width: min(36vw, 32rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32));
}

.footer-conversation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: clamp(4rem, 10vw, 10rem);
  align-items: end;
  min-height: clamp(20rem, 29vw, 25rem);
  padding-top: clamp(3.75rem, 6vw, 6rem);
  padding-bottom: clamp(3.75rem, 6vw, 6rem);
}

.footer-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  color: rgba(255, 255, 255, 0.72);
}

.footer-kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-white);
}

.footer-headline {
  max-width: 12.5ch;
  font-size: clamp(2.75rem, 4.5vw, 3.9rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 400;
}

.footer-headline em {
  display: block;
  letter-spacing: -0.04em;
}

.footer-conversation-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 27rem;
  padding-bottom: 0.25rem;
}

.footer-desc {
  max-width: 26rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
}

.footer-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100%, 20rem);
  min-height: 3.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(4, 11, 72, 0.2);
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease;
}

.footer-cta-button-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--footer-ink);
  color: var(--color-white);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-cta-button-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .footer-cta-button:hover {
    background: #f7f8ff;
    box-shadow: 0 18px 42px rgba(4, 11, 72, 0.3);
    transform: translateY(-2px);
  }

  .footer-cta-button:hover .footer-cta-button-icon {
    transform: translate(2px, -2px) rotate(4deg);
  }
}

.footer-cta-button:active {
  transform: translateY(0) scale(0.985);
}

.footer-cta-button:focus-visible,
.footer-link:focus-visible,
.footer-wordmark:focus-visible,
.footer-legal-link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}

.footer-trust span {
  position: relative;
}

.footer-trust span + span::before {
  content: '·';
  position: absolute;
  left: -0.55rem;
}

.footer-meta {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(130deg, var(--footer-blue) 0%, #2948ff 54%, var(--footer-blue-deep) 116%);
}

.footer-directory {
  display: grid;
  grid-template-columns: minmax(13rem, 1.25fr) minmax(10rem, 0.8fr) minmax(11rem, 0.85fr) minmax(15rem, 1.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  padding: clamp(2.75rem, 4vw, 3.75rem) 0;
  border-bottom: 1px solid var(--footer-line);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-wordmark {
  display: block;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 1.15rem;
  color: var(--color-white);
  line-height: 0.78;
}

.footer-wordmark-text {
  display: block;
  width: max-content;
  font-size: clamp(3.75rem, 5vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.78;
  transform-origin: left bottom;
}

.footer-brand-note {
  max-width: 18rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  line-height: 1.45;
}

[data-anim-logo] .footer-wordmark-text {
  opacity: 0;
  transform: translateY(18px);
}

[data-anim-logo].animated .footer-wordmark-text {
  animation: footerWordmarkIn 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col .caption {
  margin-bottom: 0.9rem;
  color: rgba(255, 255, 255, 0.56);
}

.footer-sitemap-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(4.75rem, 1fr));
  gap: 0 1rem;
  width: 100%;
  max-width: 14rem;
}

.footer-link,
.footer-legal-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  width: fit-content;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
  line-height: 1.35;
  transition: color 180ms ease;
}

.footer-link::after,
.footer-legal-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.18rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .footer-link:hover,
  .footer-legal-link:hover {
    color: var(--color-white);
  }

  .footer-link:hover::after,
  .footer-legal-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  color: rgba(255, 255, 255, 0.78);
}

.footer-legal,
.footer-emails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.footer-emails {
  justify-content: flex-end;
}

.footer-legal-link {
  min-height: 2rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8125rem;
}

.footer-home-link {
  color: var(--color-white);
  font-weight: 700;
}

@media (max-width: 1099px) {
  .footer-directory {
    grid-template-columns: minmax(12rem, 1.15fr) minmax(9rem, 0.8fr) minmax(10rem, 0.85fr) minmax(13rem, 1.05fr);
    gap: 2rem;
  }

  .footer-wordmark-text {
    font-size: clamp(3.25rem, 5.5vw, 4rem);
  }
}

@media (max-width: 839px) {
  .footer-conversation-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
  }

  .footer-headline {
    max-width: 11.5ch;
  }

  .footer-conversation-action {
    width: 100%;
    max-width: 31rem;
    justify-self: start;
  }

  .footer-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand-note {
    max-width: 23rem;
  }

  .footer-directory > .footer-col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2.75rem;
  }

  .footer-directory > .footer-col:last-child .caption {
    flex-basis: 100%;
  }
}

@media (max-width: 699px) {
  .footer-conversation-grid {
    gap: 2.25rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .footer-headline {
    max-width: 14ch;
    font-size: var(--fs-h2);
  }

  .footer-conversation-action {
    max-width: none;
    justify-self: stretch;
  }

  .footer-desc {
    margin-bottom: 1.35rem;
  }

  .footer-cta-button {
    width: 100%;
    min-height: var(--btn-h);
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    gap: 1rem;
  }

  .footer-cta-button-icon {
    width: 2rem;
    height: 2rem;
  }

  .footer-trust {
    max-width: 18rem;
  }

  .footer-directory {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2.75rem 0 2.25rem;
  }

  .footer-brand {
    grid-column: auto;
    padding-bottom: 2rem;
  }

  .footer-wordmark-text {
    font-size: clamp(3.75rem, 17vw, 5rem);
  }

  .footer-sitemap-links {
    max-width: 20rem;
  }

  .footer-directory .footer-col,
  .footer-directory > .footer-col:last-child {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-column: auto;
    gap: 0 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-directory > .footer-col:last-child .caption {
    grid-column: auto;
  }

  .footer-directory .footer-col .caption {
    margin: 0;
    padding-top: 0.8rem;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  .footer-directory .footer-col .footer-sitemap-links,
  .footer-directory .footer-col > .footer-link {
    grid-column: 2;
  }

  .footer-directory .footer-col > .footer-link + .footer-link {
    grid-row: auto;
  }

  .footer-link {
    min-height: 2.75rem;
  }

  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: 0;
    padding-top: 0.85rem;
    padding-bottom: 1rem;
  }

  .footer-emails {
    justify-content: flex-start;
  }

  .footer-legal-link {
    min-height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim-logo] .footer-wordmark-text,
  [data-anim-logo].animated .footer-wordmark-text {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Animations */
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-anim-blur] {
  opacity: 0;
  filter: blur(10px);
}

[data-anim-blur].animated {
  animation: blurIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-anim-element] {
  opacity: 0;
  transform: translateY(20px);
}

[data-anim-element].animated {
  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Die gestaffelten Verzoegerungen fuer .hero-content / .hero-subtitle sind
   mit der alten WebGL-Hero entfallen — die Selektoren griffen ins Leere. */

/* Gruppen-Stagger: Listen-Karten treten gestaffelt ein, ein Schritt entspricht
   der halben --duration-ui der Seite (0s / 0.1s / 0.2s). */
.stairs-list > [data-anim-element].animated:nth-child(2),
.work-rows > [data-anim-element].animated:nth-child(2),
.insights-grid > [data-anim-element].animated:nth-child(2) {
  animation-delay: calc(var(--duration-ui) * 0.5);
}

.stairs-list > [data-anim-element].animated:nth-child(3),
.work-rows > [data-anim-element].animated:nth-child(3),
.insights-grid > [data-anim-element].animated:nth-child(3) {
  animation-delay: var(--duration-ui);
}

/* Logo animation */
[data-anim-logo] text {
  opacity: 0;
  transform: translateY(20px);
}

[data-anim-logo].animated text {
  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Responsive */
@media (max-width:639.98px) {
  .nav-links a {
    display: none;
  }

  .nav-burger {
    transform: scaleX(1);
    position: relative;
  }

  .hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }
}

/* Utility */
.block { display: block; }
.w-fit { width: fit-content; }
.h-fit { height: fit-content; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-998 { z-index: 998; }
.z-999 { z-index: 999; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-3-2 { aspect-ratio: 3/2; }
.aspect-4-3 { aspect-ratio: 4/3; }
.rounded-xs { border-radius: 0.125rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ring-2 { border-width: 2px; }
.ring-white-30 { border-color: rgba(255,255,255,0.3); }
.bg-blue { background-color: var(--color-blue); }
.bg-light-gray { background-color: var(--color-light-gray); }
.bg-gray { background-color: var(--color-gray); }
.text-center { text-align: center; }
.text-white { color: white; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-24 { margin-bottom: 6rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-15 { padding-bottom: 3.75rem; }
.pt-15 { padding-top: 3.75rem; }
.pb-30 { padding-bottom: 7.5rem; }
.pt-30 { padding-top: 7.5rem; }
.whitespace-nowrap { white-space: nowrap; }
.underline { text-decoration: underline; }
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.transition-all { transition: all 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.hover\:opacity-40:hover { opacity: 0.4; }
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:scale-102:hover { transform: scale(1.02); }
.active\:scale-98:active { transform: scale(0.98); }

/* Stufen / Stairs — bewusst ohne Trennlinien, ruhiger Look */
.stairs {
  padding-bottom: var(--spacing-section);
}

.stairs-list {
  display: flex;
  flex-direction: column;
}

.stair-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 2.5rem 0;
}

@media (min-width: 768px) {
  .stair-item {
    grid-template-columns: 5rem 1fr 1.2fr;
    gap: 3rem;
    padding: 4rem 0;
    align-items: baseline;
  }

  .stair-body {
    align-self: start;
  }
}

.stair-num {
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: 700;
}

.stair-item h3 {
  margin-bottom: 0.5rem;
}

.stair-body p {
  color: var(--color-dark-gray);
  max-width: 34rem;
}

.stair-body .work-tags {
  margin-top: 1rem;
}

/* Prinzipien Grid */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-gray);
  border: 1px solid var(--color-gray);
}

@media (min-width: 640px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .principles-grid { grid-template-columns: repeat(3, 1fr); }
}

.principle-card {
  background: var(--color-background);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.principle-card .caption {
  color: var(--color-dark-gray);
}

.principle-card p {
  color: var(--color-dark-gray);
  font-size: var(--font-size-p2);
}

/* Artikel / Insight Detail */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
}

.article-body h2 {
  margin: 3rem 0 1.25rem;
}

.article-body h3 {
  margin: 2.5rem 0 1rem;
}

.article-body p {
  margin-bottom: 1.25rem;
  color: #3a3a3c;
}

.article-body ul, .article-body ol {
  margin: 0 0 1.25rem 1.25rem;
  color: #3a3a3c;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-meta {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--color-dark-gray);
}

.article-hero-img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  margin-top: 2.5rem;
}

/* ============================================
   WORK TUNNEL — statisches Grid als Fallback, echte CSS-3D-Szene
   im Enhancement. Der Viewport ist der einzige Clip; die Kamera bleibt
   fest, die Szene liegt auf Z und jede Karte wird tangential gedreht.
   ============================================ */

.work-tunnel {
  padding-top: 3.75rem;
  padding-bottom: var(--spacing-section);
  --tunnel-card-width: clamp(300px, 34vw, 560px);
  --tunnel-card-height: 0px;
  --tunnel-gap: clamp(20px, 1.8vw, 36px);
  --tunnel-angle-step: 20;
  --tunnel-perspective: clamp(1600px, 140vw, 2400px);
  --tunnel-viewport-height: 600px;
}

@media (min-width: 640px) {
  .work-tunnel {
    padding-top: 7.5rem;
  }
}

/* Auf der Startseite liegt der Tunnel innerhalb von .ambition — dort
   liefert die Eltern-Section den Abstandsrhythmus. */
.ambition .work-tunnel {
  padding-top: 0;
  padding-bottom: 0;
}

/* Kopfzeile bleibt ausserhalb des 3D-Viewports. */
.work-tunnel-head {
  position: relative;
  z-index: 3;
}

.work-tunnel-headrow {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1.5rem;
}

.work-tunnel-counter {
  font-size: var(--font-size-p2);
  line-height: 1.4;
  color: var(--color-dark-gray);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.work-tunnel-current {
  color: var(--color-blue);
  font-weight: 500;
}

.work-tunnel-viewport {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .work-tunnel-viewport {
    margin-top: 4rem;
  }
}

@media (max-width:767.98px) {
  .work-tunnel {
    --tunnel-card-width: clamp(280px, 80vw, 330px);
    --tunnel-gap: clamp(16px, 4.5vw, 20px);
    --tunnel-angle-step: 26;
    --tunnel-perspective: 1700px;
  }
}

/* --- Statische Grunddarstellung (ohne JS / Reduced Motion) --- */
.work-tunnel-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--spacing-container);
  padding-right: var(--spacing-container);
}

@media (min-width: 640px) {
  .work-tunnel-rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.work-tunnel-slide {
  display: flex;
  flex-direction: column;
  position: relative;
}

.work-tunnel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.25rem;
  box-shadow:
    0 1px 2px rgba(10, 10, 15, 0.05),
    0 16px 36px -14px rgba(10, 10, 15, 0.18),
    0 56px 110px -44px rgba(10, 10, 15, 0.26);
  user-select: none;
  -webkit-user-drag: none;
}

.work-tunnel-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.75rem;
}

.work-tunnel-name {
  display: block;
  color: var(--color-foreground);
  line-height: 1.3;
}

.work-tunnel-branch {
  display: block;
  color: var(--color-dark-gray);
  line-height: 1.3;
}

/* Die Steuerung ist im statischen Fallback nicht notwendig. */
.work-tunnel-controls {
  display: none;
}

/* --- Enhancement: feste Kamera + gemeinsamer preserve-3d-Raum --- */
.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-viewport {
  width: 100%;
  height: var(--tunnel-viewport-height);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-viewport.is-dragging {
  cursor: grabbing;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-camera {
  position: absolute;
  inset: 0;
  perspective: var(--tunnel-perspective);
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-scene {
  display: block;
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  /* Bewusst KEIN contain: layout/style — Layout-Containment wirkt in Blink
     als Gruppierungseigenschaft, erzwingt transform-style: flat und flacht
     den 3D-Zylinder zu einer Kartenreihe ab. */
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-slide {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tunnel-card-width);
  height: var(--tunnel-card-height);
  padding: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-slide.is-interactive {
  pointer-events: auto;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-slide:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
  box-shadow:
    0 2px 6px rgba(10, 10, 15, 0.10),
    0 14px 30px -20px rgba(10, 10, 15, 0.30);
  pointer-events: none;
}

.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-meta {
  display: none;
}

/* Ruhige, gemeinsam gefasste Steuerung im 3D-Viewport. */
.work-tunnel.is-enhanced:not(.is-reduced) .work-tunnel-controls {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 4;
  gap: 0.125rem;
  padding: 0.25rem;
  border: 1px solid rgba(10, 10, 15, 0.14);
  border-radius: 999px;
  /* Nahezu opak statt backdrop-filter: die Pill darf die bewegte 3D-Szene
     nicht pro Frame neu verwischen. */
  background: rgba(250, 250, 250, 0.96);
  box-shadow: 0 8px 28px rgba(10, 10, 15, 0.12);
}

.work-tunnel-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-foreground);
  transition: transform var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui), background-color var(--duration-ui) var(--ease-ui);
}

.work-tunnel-control:hover {
  color: var(--color-white);
  background: var(--color-blue);
}

.work-tunnel-control:active {
  transform: scale(0.94);
}

.work-tunnel-control:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.work-tunnel-arrow {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile: kleinere Buttons. */
@media (max-width:767.98px) {
  .work-tunnel-control {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim-blur], [data-anim-element], [data-anim-logo] text {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Mobile shell: one grid, immediately reachable navigation and readable type. */
@media (max-width:1023.98px) {
  :root {
    --spacing-container: 24px;
    --font-size-caption: 0.75rem;
    --font-size-p2: 0.875rem;
    --font-size-h1: var(--fs-h1);
  }
  body { overflow-x: visible; }
  .nav-header, .nav-header.hidden, .nav-header.is-over-footer {
    display: block;
    top: calc(env(safe-area-inset-top,0px) + var(--nav-notice-offset,0px) + 8px);
    width: calc(100% - 2 * var(--spacing-container));
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle { padding-inline: 12px; height: var(--nav-h); }
  .nav-bar { border-radius: 0.75rem; }
  .nav-logo { display: flex; min-height: 44px; align-items: center; }
  .nav-menu-content { min-height: 0; padding-inline: 20px; gap: 16px; }
  .nav-menu.active .nav-menu-content {
    max-height: calc(100dvh - env(safe-area-inset-top,0px) - var(--nav-notice-offset,0px) - 88px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .nav-menu-footer { flex-direction: column; gap: 16px; margin-bottom: 20px; }
  .nav-menu-section { min-width: 0; margin-top: 8px; }
  .nav-menu-item { min-height: 44px; padding-block: 8px; overflow-wrap: anywhere; }
  .nav-menu-item.h3 { font-size: 28px; }
  .nav-menu-footer .nav-menu-item { font-size: 14px; line-height: 1.45; }
  .nav-menu-section .caption { font-size: 12px; }
  .nav-menu.active .nav-menu-item { opacity: 1 !important; transform: none !important; }
  main [id] { scroll-margin-top: calc(env(safe-area-inset-top,0px) + 88px); }
  .page-hero { min-height: 380px; }
  .page-hero-content { padding: 104px var(--spacing-container) 36px; }
  main h1, main h2, main h3, .footer-headline { overflow-wrap: anywhere; }
  .article-body { padding-inline: var(--spacing-container); }
  .article-body a, .legal-copy a, .footer a { overflow-wrap: anywhere; }
  .footer-legal-link, .footer-home-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-emails { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer-emails a { font-size: 14px; min-height: 44px; }
  .btn-primary, .work-row-btn { min-height: var(--btn-h); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .tag { font-size: 12px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .stair-item > *, .work-row > *, .work-more-item > * { min-width: 0; }
  .work-row-body, .work-more-body { overflow-wrap: anywhere; }
  .stair-body p { overflow-wrap: anywhere; }
  .work-row-desc, .stair-body p, .principle-card p { font-size: 16px; }
  [data-anim-blur], [data-anim-element] {
    opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important;
  }
  .work-hero-band { padding: 112px var(--spacing-container) 40px; }
  .work-hero-title { font-size: var(--fs-h1); }
  .work-hero-title-slot { overflow-wrap: normal; }
  .work-hero { height: auto; min-height: 0; }
  .work-hero-tiles { min-height: 0; }
  .work-hero-tile { aspect-ratio: 16 / 10; }
  .cta-section--video .cta-bg { background: #06060a url('../assets/hero-bg/hero-skyline-poster.jpg') center / cover no-repeat; }
  .cta-section--video video { display: none; }
}
@media (max-width:639.98px) {
  :root { --spacing-container: 20px; }
  .nav-menu-content { padding-inline: 16px; }
  .work-hero-tiles { grid-template-columns: 1fr; }
  .work-hero-tile-client { font-size: 14px; }
  .work-row, .work-more-grid { grid-template-columns: minmax(0,1fr); }
  .work-more-item { flex-direction: column; }
  .work-more-media { flex: 0 0 auto; width: 100%; }
  .footer-headline { font-size: var(--fs-h2); }
}


/* Flat, manually controlled references: no clones, perspective or autoplay. */
.work-tunnel.is-flat .work-tunnel-viewport { height: auto; overflow: visible; touch-action: pan-y; }
.work-tunnel.is-flat .work-tunnel-camera { position: relative; perspective: none; pointer-events: auto; }
.work-tunnel.is-flat .work-tunnel-scene { display: block; position: relative; transform: none; padding-inline: var(--spacing-container); }
.work-tunnel.is-flat .work-tunnel-slide { position: relative; inset: auto; width: 100%; height: auto; margin: 0; transform: none; opacity: 1; pointer-events: auto; }
.work-tunnel.is-flat .work-tunnel-slide[hidden] { display: none; }
.work-tunnel.is-flat .work-tunnel-slide img { aspect-ratio: 16/10; width: 100%; height: auto; box-shadow: 0 8px 24px #0a0a0f12; }
.work-tunnel.is-flat .work-tunnel-meta { display: flex; padding-top: 16px; font-size: 16px; }
.work-tunnel.is-flat .work-tunnel-branch { font-size: 14px; }
.work-tunnel.is-flat .work-tunnel-controls { display: flex; position: relative; inset: auto; justify-content: center; gap: 12px; padding: 20px 0 0; transform: none; }
.work-tunnel.is-flat .work-tunnel-control { width: 44px; height: 44px; border: 1px solid var(--color-gray); background: var(--color-background); }

@media (hover:hover) {
  .work-tunnel.is-flat .work-tunnel-control:hover { background: var(--color-blue); color: var(--color-white); }
}