/* ============================================================
   angelslove — global styles
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-Light.otf') format('opentype');
  font-weight: 300; font-style: normal;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-Book.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-BookItalic.otf') format('opentype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-Regular.otf') format('opentype');
  font-weight: 450; font-style: normal;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Messina Sans';
  src: url('../fonts/MessinaSans-Black.otf') format('opentype');
  font-weight: 900; font-style: normal;
}

/* --- Variables --------------------------------------------- */
:root {
  /* Seite ist bewusst nur im hellen Schema gestaltet. "only light" verhindert,
     dass Browser im OS-Dark-Mode automatisch abdunkeln (Hintergrund, Formular-
     felder, Scrollbars, Autofill). Hintergrund bleibt so immer weiss. */
  color-scheme: only light;

  /* Marken-Rot — Akzentfarbe der Seite: Hover, aktiver Zustand, Labels. */
  --red:      #e2073b;
  --black:    #0e0e0e;
  --white:    #ffffff;
  --grey-100: #f5f5f5;
  --grey-200: #e8e8e8;
  --grey-400: #a0a0a0;
  --grey-700: #444444;

  --font:               'Messina Sans', sans-serif;

  /* --- Definiertes Type-System (CI/CD) ----------------------------
     Die ganze Seite baut auf wenigen, festen Bausteinen auf. Grössen
     und Laufweiten sind zentral hier definiert, damit gleiche Elemente
     überall gleich aussehen. */
  --tracking-headline:  -0.1em;   /* Big Headline (h1) */
  --tracking-subline:   -0.05em;  /* Subline (h2 / page-next) */
  --tracking-ui:        0.15em;   /* ALLE Mikro-UI: Nav, Tabs, Buttons, Links, Labels */
  --ui-size:            0.7rem;   /* einheitliche Grösse für ALLE Mikro-UI */

  --nav-h:              72px;
  --transition:         0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html {
  font-size: 16px;
  /* Kein scroll-behavior: smooth mehr — das übernimmt jetzt Lenis
     (js/main.js), sonst würden sich beide in die Quere kommen. */
  scroll-padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none; /* no rubber-band bounce → no white flash above the video */
  max-width: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}


img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* --- Typography -------------------------------------------- */
/* IDENTITÄT (CI/CD): Headlines + Sublines durchgehend Messina Sans,
   Mixed-Case (damit "angelslove" klein bleibt), sehr enge Laufweite —
   exakt wie im Figma-CI/CD ("Big Headlines" / "Subline"). Zwei feste
   Stufen: h1 = Big Headline (SemiBold, -0.1em), h2 = Subline
   (Regular, -0.05em). */
h1, h2, h3, h4 {
  font-family: var(--font);
  text-transform: none;
  line-height: 1.05;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 6vw, 5.2rem); font-weight: 600; letter-spacing: var(--tracking-headline); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 600; letter-spacing: var(--tracking-subline); }
h3 { font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: var(--tracking-subline); }
h4 { font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: var(--tracking-subline); }
p  { line-height: 1.7; font-weight: 450; }

/* Projekt-Titel behalten ihr eigenes System (admin-wählbare Display-Fonts,
   Uppercase, enge Laufweite) — nicht von der Serif-Identität überschreiben. */
.detail__title,
.detail__banner-title {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-headline);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/*
 * Layout: 3-column grid — logo (left) | links (center) | spacer (right).
 * Die Nav ist in jedem Zustand transparent (kein Hintergrundbalken).
 * Lesbarkeit über einen einheitlichen S/W-Farbwechsel:
 *   nav--dark     → weisser Text/Logo (über dunklen Flächen)
 *   nav--scrolled → schwarzer Text/Logo (über hellen Flächen)
 * Im Home-Flow misst zusätzlich js/main.js die Video-Helligkeit und setzt
 * bei hellen Frames .is-lum-light (dunkler Text). Der aktive Tab ist rot
 * (Ausnahme Contact Us: weiss auf rotem Grund).
 * Auf Home/Creative Space ist .nav__logo-wrap unsichtbar — dort übernimmt
 * optisch das grosse Hero-Logo, das in diese Position dockt.
 */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /* Extend the nav box up under the notch/status bar, but keep the
     visible row (logo, links) at its normal height below it. */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
  background: transparent;
  transition: border-color var(--transition), top var(--transition);
  border-bottom: 1px solid transparent;
}

/* Nav bleibt in jedem Zustand transparent. Lesbarkeit kommt über einen
   EINHEITLICHEN Farbwechsel (kein Blend mehr — der lag nur im Home-Flow und
   machte den Header dort inkonsistent + kippte Rot zu Türkis): weisser
   Text/Logo über dunklen Flächen (nav--dark), dunkler über hellen
   (nav--scrolled). Der Zustand wird beim Scrollen gesetzt (js/main.js). So
   sieht der Header auf ALLEN Seiten gleich aus. */
.nav--dark,
.nav--scrolled {
  background: transparent;
  border-bottom-color: transparent;
}

/* Logo-Video ist bereits weiss: über dunklen Flächen unverändert lassen,
   nur auf hellem (reinweissem) Grund zu schwarz invertieren. */
.nav--dark .nav__logo    { filter: none; }
.nav--scrolled .nav__logo { filter: invert(1); }

/* Logo wrap — left column */
.nav__logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav__logo {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  transition: filter var(--transition), opacity var(--transition);
}

.nav__logo:hover { opacity: 0.75; }

/* Logo: animiertes WebM-Video am Desktop, statisches PNG auf dem Handy.
   Grund: iOS (Safari/Chrome) spielt WebM/VP9 nicht ab und das Video hat
   keinen Alpha-Kanal → auf Mobile sonst ein weisses Rechteck. Standard =
   Desktop (Video sichtbar, PNG versteckt); die Media Query dreht es fürs
   Handy um. Gilt für Nav-Logo UND grosses Hero-Logo. */
/* Doppelte Klasse (Spezifität 0,2,0), damit diese Regeln die Basis-Regeln
   .nav__logo / .home__hero-logo { display:block } sicher schlagen — egal in
   welcher Reihenfolge sie in der Datei stehen. */
.nav__logo.nav__logo--static,
.home__hero-logo.home__hero-logo--static { display: none; }

@media (max-width: 600px) {
  .nav__logo.nav__logo--motion,
  .home__hero-logo.home__hero-logo--motion { display: none; }
  .nav__logo.nav__logo--static { display: block; }
  .home__hero-logo.home__hero-logo--static { display: block; }
}

/* Links — center column */
.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  list-style: none;
}

.nav__link {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: #fff; /* Standard: weiss (über dunklen Flächen, nav--dark) */
  transition: color var(--transition);
  position: relative;
  padding-bottom: 2px;
}
/* Heller Hintergrund (nav--scrolled, z.B. Creative Space) → dunkler Text. */
.nav--scrolled .nav__link { color: var(--black); }

/* Im Home-Flow misst js/main.js die Video-Helligkeit hinter der Nav: über
   heller Video-Stelle → .is-lum-light → dunkler Text (sonst weiss). Rein
   S/W. Der aktive Tab bleibt trotzdem rot. */
body.home-flow-active .nav.is-lum-light .nav__link { color: var(--black); }
body.home-flow-active .nav.is-lum-light .nav__toggle span { background: var(--black); }
body.home-flow-active .nav.is-lum-light .nav__link.active,
body.home-flow-active .nav.is-lum-light .nav__link:hover { color: var(--red); }

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 1.5px;
  /* currentColor: der Strich folgt der Textfarbe des aktiven Links — auf
     normalen Seiten also unser Rot, auf Contact Us weiss (siehe unten). */
  background: currentColor;
  transition: width var(--transition);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;
}

/* Aktiv/Hover: unser Rot — auf ALLEN Seiten (inkl. Creative Space). */
.nav__link.active,
.nav__link:hover {
  color: var(--red);
}
/* Contact Us hat einen roten Hintergrund — Rot wäre dort unsichtbar. Also
   auf dieser Seite alle Links weiss und der aktive/Hover-Tab weiss
   unterstrichen (currentColor → weisser Strich). */
body.is-book .nav__link { color: #fff; }
body.is-book .nav__link.active,
body.is-book .nav__link:hover { color: #fff; }

/* Home/Creative-Space-Flow: die normale Nav-Logo + der "Contact Us"-Link
   im zentrierten Link-Cluster werden ausgeblendet — diese Rolle
   übernimmt stattdessen .home__hero-chrome (Logo/Wordmark + Buttons über
   dem Hero-Video), das beim Scrollen selbst in den Header wandert (siehe
   js/main.js syncHomeHeroChrome + weiter unten im CSS). So bleiben die
   zentrierten Links auf Home nur "CREATIVE SPACE / PROJECTS / ABOUT US",
   exakt wie im Referenz-Design. */
/* Wichtig: .nav__logo-wrap per visibility (nicht display:none) ausblenden!
   .nav ist ein 3-Spalten-Grid (Logo | Links | Spacer) OHNE explizite
   grid-column-Zuweisung der Kinder — bei display:none würde das Kind
   komplett aus der Grid-Auto-Platzierung herausfallen und die Links
   rutschen dadurch eine Spalte nach links (in die Logo-Spalte statt die
   mittlere "1fr"-Spalte), die zentrierten Links landen so am linken statt
   in der Mitte. Mit visibility:hidden bleibt die (0px breite bzw.
   34px, exakt wie der Spacer) Spalte erhalten, die Links bleiben in der
   mittleren Spalte und damit echt zentriert. */
/* Im Home-Flow ist das normale Nav-Logo unsichtbar — seine Rolle übernimmt
   optisch das grosse Hero-Logo, das per JS in genau diese Position dockt.
   Es bleibt aber KLICKBAR (pointer-events: auto): weil die Nav über dem
   Hero-Chrome liegt, fängt dieses unsichtbare Nav-Logo den Klick auf das
   angedockte Logo ab → zurück nach oben (href="#home"). "Contact Us" ist
   dauerhaft in der Nav sichtbar. */
body.home-flow-active .nav__logo-wrap {
  opacity: 0;
  pointer-events: auto;
}

/* Right spacer — mirrors logo width so links stay centred */
.nav__spacer { width: 44px; }

/* Hamburger — mobile only */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  grid-column: 3;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff; /* weiss über dunkel (nav--dark) */
  transition: background var(--transition), transform 0.35s cubic-bezier(0.65,0,0.35,1), opacity 0.25s ease;
}
.nav--scrolled .nav__toggle span { background: var(--black); } /* dunkel über hell */
body.is-book .nav__toggle span { background: #fff; }           /* weiss über rot */

/* While the mobile menu is open, force the icon flat black so it stays
   legible against the white menu underneath. */
body.menu-open .nav__toggle span {
  background: var(--black);
}

/* Hamburger → X */
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu — fades/slides in (kein Kreis-Reveal), staggert dann
   die Links nach. */
.nav__mobile {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
  visibility: hidden;
  pointer-events: none;
}
.nav__mobile.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}
.nav__mobile .nav__link {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--black);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav__mobile.open .nav__link {
  opacity: 1;
  transform: translateY(0);
}
.nav__mobile.open .nav__link:nth-child(1) { transition-delay: 0.18s; }
.nav__mobile.open .nav__link:nth-child(2) { transition-delay: 0.25s; }
.nav__mobile.open .nav__link:nth-child(3) { transition-delay: 0.32s; }
.nav__mobile.open .nav__link:nth-child(4) { transition-delay: 0.39s; }
.nav__mobile .nav__link.active { color: var(--red); }

/* ============================================================
   PAGE TRANSITIONS
   display is controlled by JS — no CSS display rules here.
   ============================================================ */
.page {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  min-height: 100vh;
}
.page.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;   /* schlank, nicht bulky */
  border: 1px solid currentColor;
  transition: all var(--transition);
  cursor: pointer;
}
/* CI/CD-Standard: jeder Button füllt sich beim Hover mit dem Marken-Rot
   (weisser Text). Die Varianten unterscheiden sich nur im Ruhezustand
   (Rahmenfarbe), der Hover-Zustand ist überall identisch rot. */
.btn--white { color: var(--white); border-color: var(--white); }
.btn--white:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--outline { color: var(--black); border-color: var(--black); }
.btn--outline:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--red { color: var(--white); background: var(--red); border-color: var(--red); }
.btn--red:hover { background: transparent; color: var(--red); }

/* ============================================================
   CI/CD-STANDARD — LINKS (mit Pfeil + Wave)
   Inhalts-Links (Instagram, Mail, "Inspire me"): Pfeil-Prefix, Grösse
   --ui-size, Laufweite --tracking-ui, Semibold, Rot bei Hover, und beim
   Hover wandert das GANZE Element als Welle von links nach rechts.
   Die Default-Textfarbe bleibt kontextabhängig (weiss über dem Hero).
   Ausnahme Footer: eigener, ruhiger Stil (siehe Footer-Sektion).
   ============================================================ */
.link,
.about__person-insta,
.home__hero-inspire {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition), translate var(--transition);
}
.link::before,
.about__person-insta::before,
.home__hero-inspire::before {
  content: "→";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
}
.link:hover,
.about__person-insta:hover,
.home__hero-inspire:hover {
  color: var(--red);
  animation: linkWaveLTR 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.section { padding: clamp(7rem, 13vw, 15rem) clamp(1.5rem, 5vw, 6rem); }

/* Einheitliches Mikro-Label: schlichte graue Caps, weite Laufweite. */
.section__label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: block;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ============================================================
   CI/CD-STANDARD — QUOTES / KURZE EINLEITUNGEN
   Zitate und kurze Einleitungen sind durchgehend Messina Sans Italic
   (keine Serifenschrift mehr auf der Seite).
   Eine einzige wiederverwendbare Klasse .quote statt verstreuter Stile.
   ============================================================ */
.quote {
  font-family: var(--font);
  font-style: italic;
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .link:hover,
  .about__person-insta:hover,
  .home__hero-inspire:hover { animation: none; translate: 4px 0; }
  .page-next:hover .page-next__arrow { animation: none; translate: 8px 0; }
}

/* ============================================================
   HOME
   ============================================================
   "Shrink-to-Header"-Aufbau: #home bleibt ein normaler, scrollbarer
   Block, .home__hero ist darin nur noch ein 100dvh hoher Platzhalter im
   Dokumentfluss (reserviert den Scroll-Platz für Intro/Statement/
   Creative-Space darunter, siehe js/main.js: csEl.offsetTop-Logik bleibt
   dadurch unverändert). Das eigentliche Video steckt in
   .home__hero-shrink — fixed, volle Viewport-Breite, deren Höhe per JS
   beim Scrollen von 100dvh auf Nav-Höhe animiert wird. Weil das Video
   darin object-fit:cover + object-position:center nutzt, bleibt der
   Bildausschnitt exakt mittig, während der Platz kleiner wird. Logo +
   Buttons liegen NICHT hier, sondern in .home__hero-chrome (eigenes fixed
   Overlay, direkt nach der Nav im Markup) und wandern synchron dazu nach
   oben, siehe weiter unten. */
#home {
  position: relative;
}

.home__hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* real visible viewport on mobile — no white bar at bottom */
}

.home__hero-shrink {
  /* Liegt jetzt im normalen Fluss innerhalb von .home__hero und scrollt
     ganz normal mit weg — keine Fixed-/Shrink-Animation mehr. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.home__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* clicks pass through to CTA buttons */
}

/* Native video (when used instead of YouTube) */
.home__video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; /* Fokus bleibt immer mittig, auch während .home__hero-shrink schrumpft */
}

/* YouTube iframe — cover technique:
   Make the iframe bigger than the viewport and centre it.
   16:9 ratio: height = 56.25vw, width = 177.78vh              */
.home__video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;   /* 16:9 */
  min-height: 100vh;
  min-width: 177.78vh; /* 16:9 inverse */
  transform: translate(-50%, -50%);
  border: 0;
}

.home__overlay {
  position: absolute;
  inset: 0;
  /* Keine Abdunklung mehr — das Video läuft in voller Helligkeit. Die
     Lesbarkeit von Logo/Text kommt über den Invert-Blend (difference). */
  background: transparent;
  z-index: 1;
}

/* ---- Hero Chrome — Logo/Wordmark (unten links) + "Inspire Me"/
   "Contact Us" (unten rechts), liegen über dem Hero-Video. Fixed und
   unabhängig von der Nav; js/main.js (syncHomeHeroChrome) lässt Logo +
   "Contact Us" beim Scrollen nach oben in den Header wandern, während
   Wordmark + "Inspire Me" ausblenden (werden nicht übernommen — "Inspire
   Me" wird im Header später durch den Link "Creative Space" ersetzt).
   Nur sichtbar, solange body.home-flow-active gesetzt ist (siehe
   js/main.js). ---- */
.home__hero-chrome {
  /* Fixed über dem Video, damit das Logo beim Scrollen in den (fixierten)
     Header docken kann. Nur im Home-Flow sichtbar. Lesbarkeit über eine
     harte S/W-Umschaltung (kein Blend → keine bunten Artefakte): weiss über
     dem dunklen Video, schwarz über dem hellen Creative Space. */
  position: fixed;
  inset: 0;
  z-index: 999;              /* unter der Nav (1000) */
  pointer-events: none;
  visibility: hidden;
}
body.home-flow-active .home__hero-chrome { visibility: visible; }
/* Wenn das mobile Menü offen ist, Hero-Logo + Tagline ausblenden — sie sollen
   nicht durch das/über dem Overlay sichtbar sein. */
body.menu-open .home__hero-chrome { visibility: hidden; }

/* Logo (links) + Serif-Satz, vertikal mittig. Der ganze Block ist mittig
   verankert; das Logo dockt per JS-Transform von hier in den Header. */
.home__hero-intro {
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);
  right: clamp(1.5rem, 5vw, 5rem);   /* volle Breite verfügbar, Tagline begrenzt sich selbst */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  pointer-events: none;
}

/* Der klickbare Logo-Link wird von js/main.js (syncHomeHeroChrome) per
   transform in die Nav-Logo-Position bewegt + skaliert. */
.home__hero-logo-link {
  flex-shrink: 0;
  display: block;
  pointer-events: auto;
  transform-origin: left center;
  will-change: transform;
}
.home__hero-logo {
  /* An die Tagline-Grösse gekoppelt: das Video hat ~30% transparenten Rand,
     daher wird die Box grösser gewählt, damit das sichtbare Zeichen etwas
     grösser als der danebenstehende Text wirkt (und mit ihm mitskaliert). */
  width: calc(clamp(1.3rem, 2.4vw, 2.3rem) * 4.6);
  height: auto;
  aspect-ratio: 1 / 1;              /* stabile Grösse (Video 1:1), unabhängig vom Laden */
  object-fit: contain;
  display: block;
  filter: none;                     /* Logo-Video ist bereits weiss */
  transition: filter var(--transition);
}

/* Serif-Satz + Inspire-Link — blenden beim Scrollen aus (JS setzt opacity). */
.home__hero-text {
  pointer-events: auto;
  will-change: transform, opacity;
}
.home__hero-tagline {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 2.3rem);
  letter-spacing: var(--tracking-subline);
  line-height: 1.22;
  color: #fff;
  margin: 0;
  max-width: min(880px, 72vw);   /* breit genug für ~2 Zeilen, bis zur Mitte */
  transition: color var(--transition);
}

.home__hero-inspire {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: clamp(1rem, 1.8vw, 1.6rem);
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition), translate var(--transition);
}

/* Luminanzbasierte S/W-Umschaltung (js/main.js misst die Video-Helligkeit
   hinter dem Logo): über heller Stelle → schwarz, sonst weiss. Rein S/W. */
.home__hero-chrome.is-lum-light .home__hero-logo { filter: invert(1); }
.home__hero-chrome.is-lum-light .home__hero-tagline,
.home__hero-chrome.is-lum-light .home__hero-inspire { color: var(--black); }

@media (max-width: 600px) {
  /* Handy: Logo ÜBER dem Text stapeln (statt daneben), damit der Text die
     volle Breite bekommt. */
  .home__hero-intro { flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 90vw; }
  .home__hero-tagline { font-size: 1.25rem; max-width: 100%; }
}


/* ---- Intro — "Hey, wir sind angelslove" + kleines Thumbnail-Raster ----
   Massstab/Proportionen 1:1 aus dem Figma-Mockup (CI/CD, Projekt_Page,
   node 219:138-153) übernommen: Frame-Breite 2527px als Referenz,
   alle Grössen als vw-Anteile davon (px / 2527 * 100). */

/* Kleiner, klarer boxy Button (1px, scharfe Ecken, kleine Caps) */
.btn--minimal {
  display: inline-block;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--black);
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.btn--minimal:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.home__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(8rem, 16vw, 16rem) clamp(1.5rem, 5vw, 6rem) clamp(6rem, 12vw, 12rem);
}

.home__intro-text h1 {
  max-width: 15ch;
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  letter-spacing: var(--tracking-subline);
  text-transform: none;
  color: var(--black);
  line-height: 1.02;
}

.home__intro-text h1 .home__intro-bold {
  font-weight: 600; /* "love" bleibt als Gewicht-Akzent erhalten */
}

.home__intro-reg {
  font-size: 0.3em;
  font-weight: 400;
  vertical-align: super;
}

.home__intro-sub {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 34ch;
  color: var(--grey-400);
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.7;
}

.home__intro-thumbs {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: clamp(110px, 12vw, 168px);
}

.home__intro-thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: var(--grey-100);
}

/* ---- Statement — minimalistisch: kleines Label, grosse Serif-Italic-
   Aussage, sehr viel Whitespace, dünne Trennlinie oben. ---- */
.home__statement {
  padding: clamp(9rem, 20vw, 18rem) clamp(1.5rem, 5vw, 6rem);
  border-top: 1px solid var(--grey-200);
}

.home__statement-text {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: var(--tracking-subline);
  line-height: 1.15;
  color: var(--black);
}

/* ============================================================
   CREATIVE SPACE
   ============================================================ */
#creative-space {
  padding-top: calc(var(--nav-h) + 3.25rem);
  padding-bottom: 6.5rem;
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
}

.cs__header { margin-bottom: clamp(4rem, 9vw, 8rem); }
.cs__header h1 { max-width: 800px; }
.cs__subtitle {
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 44ch;
  color: var(--grey-700);
  font-size: 0.9rem;
  line-height: 1.7;
}
/* Zentrierte Variante (Mockup): nur das kleine rote Label, mittig, viel
   Luft bis zum ersten Bild des Feldes darunter. */
.cs__header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs__header--center .cs__subtitle { margin-left: auto; margin-right: auto; }
.cs__header--center .section__label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  margin-bottom: 0;
}

/* Freies "3D-Feld" statt Spalten-Masonry: jedes Bild bekommt per JS eine
   absolute Position/Grösse + eine individuelle Parallax-Geschwindigkeit
   (--cs-speed), sodass beim Scrollen der Eindruck eines Bild-Raums mit
   Tiefe entsteht (siehe js/main.js buildCreativeSpace/onCsFieldScroll).
   Höhe wird per JS gesetzt, abhängig von der Anzahl Bilder. */
.cs__field {
  position: relative;
  width: 100%;
}

.cs__item {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s ease;
  width: var(--cs-w);
  left: var(--cs-x);
  top: var(--cs-y);
  /* Kein dauerhaftes will-change mehr: nur sichtbare Bilder werden per JS
     transformiert (translate3d → eigene GPU-Ebene nur solange nötig). Sonst
     wären ALLE geladenen Bilder dauerhaft eigene Ebenen → progressiver Lag.
     transform wird laufend per JS gesetzt (onCsFieldScroll) — bewusst KEINE
     CSS-Transition darauf, sonst hinkt die Bewegung dem Scrollen hinterher. */
}
.cs__item.revealed { opacity: 1; }
/* Eingangsanimation (Fade+Rise beim ersten Erscheinen) läuft über eine
   separate Inner-Hülle, damit sie sich nicht mit dem Parallax-Transform
   auf dem äusseren .cs__item überschneidet. */
.cs__item-inner {
  transform: translateY(40px);
  transition: transform 0.7s ease;
  width: 100%;
}
.cs__item.revealed .cs__item-inner { transform: translateY(0); }

/* Caption liegt direkt im Bild (unten links), invertiert sich farblich
   gegen den Bildinhalt darunter — dadurch braucht sie keine eigene Zeile
   und der Abstand zwischen allen Items bleibt überall gleich gross. */
.cs__item-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.5rem 0.55rem;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  mix-blend-mode: difference;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.cs__item--clickable { cursor: pointer; }
.cs__item--clickable:hover .cs__img-wrap {
  transform: scale(1.045);
}

/* Bild-Lade-Animation: Shimmer-Skeleton, bis das Bild geladen ist */
.cs__img-wrap {
  position: relative;
  display: block;
  width: 100%;
  background: var(--grey-100);
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs__img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--grey-100) 30%,
    var(--grey-200, #e2e2e2) 50%,
    var(--grey-100) 70%
  );
  background-size: 200% 100%;
  animation: csShimmer 1.4s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.cs__img-wrap img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cs__img-wrap.is-loaded::before { opacity: 0; }
.cs__img-wrap.is-loaded img { opacity: 1; }

/* Hover-Video-Preview im Creative Space — spielt nur beim Darüberfahren. */
.cs__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.cs__item--has-video:hover .cs__video { opacity: 1; }

@keyframes csShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* „Mehr laden“-Button unter dem Grid */
.cs__load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cs__load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: all var(--transition);
}
.cs__load-more:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* ============================================================
   PROJECTS
   ============================================================ */
/* ---- Hero — random project cover, sticky to the top of the viewport
   so it stays put while the page scrolls (no parallax movement),
   sitting behind everything else. (Note: position:fixed doesn't work
   here because .page has a transform on it, which makes fixed
   descendants stick to the page instead of the viewport and scroll
   along with it — sticky isn't affected by that.) A scroll listener
   (js/main.js: onProjectsHeroScroll) fades its opacity down to 0 as
   the user scrolls, revealing the page's own black background
   underneath — i.e. it fades to black instead of moving. The body
   (filters + grid) is pulled up over it via negative margin and
   rendered ON TOP, so cards and filters are always fully crisp. ---- */
.projects__hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 92vh;
  height: 92dvh;
  margin-bottom: -42vh;
  overflow: hidden;
  background: var(--black);
  pointer-events: none;
}

.projects__hero-img,
.projects__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fades the photo itself to white toward the bottom — self-contained
   on the hero, independent of whatever sits on top of it. */
.projects__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 50%,
    rgba(14,14,14,0.6) 72%,
    var(--black) 92%
  );
}

/* ---- Body — rendered ON TOP of the sticky hero (higher z-index),
   pulled up over it via the hero's negative margin. Filters and cards
   are therefore always fully visible and crisp by construction.
   Tight padding-top so label / filters / cards sit close together. - */
.projects__body {
  position: relative;
  z-index: 2;
  background: transparent;
  padding-top: 1.5rem;
  padding-bottom: 8rem;
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
}

/* ---- Dark theme test — Projects page on near-black instead of
   white. Footer / page-next reuse shared classes, so they get the
   same light-on-dark treatment already used on the Kontakt page. -- */
#projects {
  background: var(--black);
  color: var(--white);
}

#projects .page-next__label { color: rgba(255, 255, 255, 0.5); }
#projects .page-next__title,
#projects .page-next__arrow { color: var(--white); }
#projects .page-next { border-top-color: rgba(255, 255, 255, 0.15); }
#projects .page-next:hover { background: rgba(255, 255, 255, 0.06); }

#projects .footer { border-top-color: rgba(255, 255, 255, 0.15); }
#projects .footer__copy { color: rgba(255, 255, 255, 0.45); }
#projects .footer__legal { color: rgba(255, 255, 255, 0.45); }
#projects .footer__legal:hover { color: var(--white); }
#projects .footer__logo { filter: invert(1); opacity: 0.4; }
#projects .footer__logo:hover { opacity: 0.9; }

/* ---- Filter bar — sharp, rectangular outline buttons, on-brand with
   the rest of the site (no rounded corners). Now that the page sits
   on a dark background, the plain white outline reads clearly without
   needing a frosted-glass backdrop. ------------------------------- */
.projects__filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* CI/CD-Standard TAB/FILTER — 1:1 identisch zu den Nav-Links im Header:
   gleiche Schriftgrösse (--ui-size), gleiche Laufweite (--tracking-ui),
   gleicher Unterstrich, der von 0 auf 100% wächst, aktiv/hover in Rot.
   Header-Tabs und Projekt-Filter sind damit exakt dasselbe Element. */
.projects__filter {
  position: relative;
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: none;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color var(--transition);
}
.projects__filter::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width var(--transition);
}
.projects__filter:hover,
.projects__filter.active { color: var(--red); }
.projects__filter:hover::after,
.projects__filter.active::after { width: 100%; }

/* ---- Handy: Dropdown statt einzelner Filter-Buttons — auf dem
   Desktop nicht sichtbar, siehe @media (max-width: 600px) für das
   eigentliche Erscheinungsbild. -------------------------------- */
.projects__filter-mobile { display: none; }

/* ---- Such-Button neben den Filtern — klappt per Klick zu einem
   Suchfeld auf (Lupe bleibt sichtbar, Eingabe wächst nach links), statt
   permanent Platz zu belegen. ------------------------------------- */
/* Rechte Aktionsgruppe: Titel-Umschalter + Suche, gemeinsam rechtsbündig. */
.projects__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

/* Titel-Umschalter — gleiche Box-Optik wie der Such-Button. Aktiv = Rot. */
.projects__titles-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
/* An (Titel sichtbar) = weiss (Basis oben); Aus (Titel versteckt) = rot. */
.projects__titles-toggle[aria-pressed="false"] { color: var(--red); border-color: var(--red); }
.projects__titles-toggle:hover { border-color: currentColor; }

/* Titel dauerhaft sichtbar, wenn der Umschalter aktiv ist. */
.projects__grid.show-titles .project-card__info { opacity: 1; transform: none; }

.projects__search {
  display: flex;
  align-items: center;
  margin-left: 0;
}
.projects__search-input {
  width: 0;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0;
  margin-right: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease, border-color var(--transition);
}
.projects__search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.projects__search.is-open .projects__search-input {
  width: clamp(160px, 30vw, 240px);
  opacity: 1;
  padding: 0 1rem;
  margin-right: 0.6rem;
  border-color: rgba(255, 255, 255, 0.6);
}
/* Bleibt weiss beim Anklicken/Fokussieren — wird nur beim Hovern rot. */
.projects__search.is-open .projects__search-input:focus { border-color: var(--white); outline: none; }
.projects__search.is-open .projects__search-input:hover { border-color: var(--red); }
.projects__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.projects__search-toggle:hover,
.projects__search.is-open .projects__search-toggle { border-color: var(--red); color: var(--red); }

/* Lupe ↔ Kreuz — zeigt im geschlossenen Zustand die Lupe, im offenen
   Zustand ein Kreuz zum Schliessen (statt der gleichen Lupe). */
.projects__search-icon--close { display: none; }
.projects__search.is-open .projects__search-icon--search { display: none; }
.projects__search.is-open .projects__search-icon--close { display: block; }

/* ---- Project grid ----------------------------------------- */
.projects__grid {
  display: grid;
  /* Grössere Cards, weniger Spalten, mehr Luft — weniger gleichzeitig im Blick. */
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.projects__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* ---- Project card — flush image, no white panel; sits directly
   on top of the hero photo, title appears as an overlay caption. */
.project-card {
  position: relative;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--transition);
  overflow: hidden;
  border-radius: 3px;
  will-change: transform;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.22);
}
.project-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.project-card:hover {
  transform: scale(1.015);
  box-shadow: 0 2rem 4rem rgba(0,0,0,0.3);
  transition: opacity 0.6s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow var(--transition);
}

.project-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background: var(--black);
  overflow: hidden;
}

.project-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.project-card:hover .project-card__thumb img { transform: scale(1.04); }

/* Typ-Label (Video / Fotografie / Design) — macht auf einen Blick
   klar, um welche Art Projekt es sich handelt, ohne eine Box oder
   zusätzliche Farbe einzuführen: reiner Text in Weiss, der sich per
   mix-blend-mode automatisch vom jeweiligen Bildhintergrund abhebt
   (hell wird dunkel, dunkel wird hell). */
.project-card__type {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 1;
  color: var(--white);
  mix-blend-mode: difference;
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

/* Ruhezustand: nur das Bild. Titel + Kategorie (mit Gradient) blenden erst
   beim Hover/Fokus sanft ein — das Raster wirkt dadurch ruhig wie eine
   Galerie, gelesen wird nur, wo man hinschaut. */
.project-card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.4rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}
.project-card:hover .project-card__info,
.project-card:focus-visible .project-card__info {
  opacity: 1;
  transform: translateY(0);
}
/* Bei aktiver Suche: Titel/Kategorie dauerhaft sichtbar (siehe main.js). */
.projects__grid.is-searching .project-card__info {
  opacity: 1;
  transform: none;
}

.project-card__category {
  display: block;
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  /* Rot nur beim Hover — im Ruhezustand gedämpft (Regel: Rot = Akzent). */
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.45rem;
  transition: color var(--transition);
}
.project-card:hover .project-card__category { color: var(--red); }

/* Vorbereitet für spätere Hover-Video-Preview (nur bei echten Videofiles,
   nicht bei YouTube-Links): ein <video class="project-card__video"> im Thumb
   wird beim Hover eingeblendet und abgespielt. Ohne Element passiert nichts. */
.project-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.project-card:hover .project-card__video { opacity: 1; }
/* Video-Cards: beim Hover Text ausblenden, damit das Video frei liegt.
   Höhere Spezifität als .show-titles, damit es auch bei sichtbaren Titeln greift. */
.projects__grid .project-card--has-video:hover .project-card__info { opacity: 0; }

.project-card__title {
  /* Grösser, da der Titel nur beim Hover (bzw. bei Suche) erscheint. */
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  /* Bleibt einzeilig — ein zu langer Titel wird mit "…" abgeschnitten,
     statt die Karte nach unten zu verlängern. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Press Start 2P" ist eine Pixel-Schrift, die bei gleicher Punktgrösse
   optisch deutlich grösser wirkt als die anderen Titel-Schriftarten —
   daher hier kleiner skaliert. */
.project-card__title[data-title-font="press-start-2p"] {
  font-size: clamp(0.78rem, 1.56vw, 1.02rem);
  letter-spacing: 0;
}
.detail__title[data-title-font="press-start-2p"] {
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  letter-spacing: 0;
}

/* "Rock Salt" wirkt durch ihre dicken, kräftigen Striche bei gleicher
   Punktgrösse deutlich grösser als die anderen Schriftarten — kleiner
   skaliert. "Reenie Beanie" ist dagegen eine sehr feine, schmale
   Handschrift und wirkt bei gleicher Punktgrösse kleiner — grösser
   skaliert. */
.project-card__title[data-title-font="rock-salt"] {
  font-size: clamp(0.96rem, 1.92vw, 1.2rem);
}
.detail__title[data-title-font="rock-salt"] {
  font-size: clamp(1.6rem, 4vw, 3.4rem);
}
.project-card__title[data-title-font="reenie-beanie"] {
  font-size: clamp(1.56rem, 3.12vw, 2.04rem);
}
.detail__title[data-title-font="reenie-beanie"] {
  font-size: clamp(2.6rem, 6.5vw, 5.8rem);
}

/* ---- Project Detail --------------------------------------- */
#project-detail {
  padding-top: var(--nav-h);
  padding-bottom: 0;
}

/* Fotografie/Design: Banner geht randlos bis nach oben (wie bei
   About/Projects-Hero) — der transparente Header schwebt direkt über
   dem Bild, statt über einer schwarzen Lücke. Titel + Galerie rutschen
   dadurch automatisch mit nach oben. */
#project-detail.project-detail--gallery {
  padding-top: 0;
}

/* ---- Dark theme test — Projekt-Detailseiten auf near-black statt
   weiss, analog zur bereits dunklen Projects-Übersicht. Um es wieder
   rückgängig zu machen: einfach diesen Block + den passenden Eintrag
   in js/main.js (showPage, "is-projects" Toggle) entfernen. -------- */
#project-detail {
  background: var(--black);
  color: var(--white);
}
#project-detail .detail__desc { color: rgba(255, 255, 255, 0.7); }
#project-detail .detail__meta-value,
#project-detail .detail__credit-name { color: var(--white); }
#project-detail .detail__gallery-item { background: rgba(255, 255, 255, 0.06); }

#project-detail .page-next__label { color: rgba(255, 255, 255, 0.5); }
#project-detail .page-next__title,
#project-detail .page-next__arrow { color: var(--white); }
#project-detail .page-next { border-top-color: rgba(255, 255, 255, 0.15); }
#project-detail .page-next:hover { background: rgba(255, 255, 255, 0.06); }

#project-detail .footer { border-top-color: rgba(255, 255, 255, 0.15); }
#project-detail .footer__copy { color: rgba(255, 255, 255, 0.45); }
#project-detail .footer__legal { color: rgba(255, 255, 255, 0.45); }
#project-detail .footer__legal:hover { color: var(--white); }
#project-detail .footer__logo { filter: invert(1); opacity: 0.4; }
#project-detail .footer__logo:hover { opacity: 0.9; }

.detail__video-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--black);
  position: relative;
}
.detail__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.detail__content {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 5rem) 0;
}

.detail__header {
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.detail__category {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
  display: block;
}

.detail__title {
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0;
}

.detail__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  margin-bottom: clamp(5rem, 9vw, 8rem);
  align-items: start;
}

.detail__desc {
  font-size: 1.05rem;
  color: var(--grey-700);
  line-height: 1.85;
  font-weight: 450;
}

.detail__meta-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.detail__meta-item {}

.detail__meta-label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 0.3rem;
}

.detail__meta-value {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1.5;
}

/* BTS — 4 images */
.detail__bts {
  margin-bottom: clamp(5rem, 8vw, 7rem);
}

.detail__bts-label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2rem;
  display: block;
}

.detail__bts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.detail__bts-item {
  aspect-ratio: 4/3;
  background: var(--black);
  overflow: hidden;
}

.detail__bts-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  cursor: pointer;
}
.detail__bts-item:hover img { transform: scale(1.03); }

/* Credits */
.detail__credits {
  margin-bottom: clamp(4rem, 7vw, 6rem);
}

.detail__credits-label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2rem;
  display: block;
}

.detail__credits-list {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 220px);
  gap: 1.5rem 4rem;
}

.detail__credit-role {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 0.2rem;
}

.detail__credit-name {
  font-size: 1rem;
  font-weight: 400;
  color: var(--black);
  letter-spacing: var(--tracking-headline);
  text-transform: lowercase;
}

/* ---- Banner + Galerie (Fotografie / Design) ------------------ */
/* Banner ist ein Hero-Block: nur der Titel liegt als Overlay unten links
   auf dem Bild, das nach unten zum Seitenhintergrund ausfadet. Direkt
   darunter folgt die Galerie (schiebt sich leicht über den ausfadenden
   Rand), die Beschreibung steht erst ganz unten kurz über Datum/Gear.
   Nur für Fotografie/Design im Einsatz — Video-Projekte blenden diesen
   Block komplett aus. */
.detail__banner {
  width: 100%;
  position: relative;
  min-height: 60vh;
  min-height: 60dvh;
  background: var(--black);
  overflow: hidden;
}
.detail__banner img {
  /* Absolut statt im Textfluss positioniert: so bestimmt einzig
     min-height die tatsächliche Boxhöhe (kein Kreisbezug über eine
     prozentuale Höhe auf ein Kind ohne definierte Elternhöhe) — dadurch
     greifen Fade, Overlay-Text und overflow:hidden zuverlässig. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail__banner-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(14,14,14,0) 38%,
    rgba(14,14,14,0.55) 72%,
    var(--black) 100%
  );
}

.detail__banner-text {
  position: absolute;
  left: clamp(1.5rem, 4vw, 5rem);
  right: clamp(1.5rem, 4vw, 5rem);
  bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 680px;
  z-index: 1;
}
.detail__banner-text .detail__category { color: var(--red); }
.detail__banner-text .detail__title { color: var(--white); margin-bottom: 1.25rem; }

/* Beschreibung unter der Galerie, kurz über Datum/Gear — auf allen
   Bildschirmgrössen gleich (Banner enthält nur noch den Titel). */
.detail__gallery-desc {
  max-width: 680px;
  font-size: 1.05rem;
  font-weight: 450;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.detail__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(5rem, 8vw, 7rem);
}

/* Fotografie/Design: Galerie überlappt den ausfadenden Banner-Rand
   leicht, kein zusätzliches Top-Padding aus .detail__content nötig —
   der Banner übernimmt Titel/Beschreibung bereits selbst. */
#project-detail.project-detail--gallery .detail__content {
  padding-top: 0;
}
#project-detail.project-detail--gallery .detail__gallery {
  position: relative;
  z-index: 2;
  /* Nur ein dezenter Überlapp auf das ausfadende Banner-Bild selbst —
     genug Abstand zur Beschreibung, damit Text und Fotos nicht zu eng
     aneinander rutschen. */
  margin-top: clamp(-2.5rem, -3vw, -1.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Restliche Infos (Datum, Gear/Programm, Credits) ganz unten unter den
   Bildern — die Beschreibung sitzt bereits oben im Banner-Overlay. */
.detail__gallery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(5rem, 8vw, 7rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.detail__gallery-meta .detail__meta-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
}

.detail__gallery-item {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--grey-100);
}
.detail__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  cursor: pointer;
}
.detail__gallery-item:hover img { transform: scale(1.03); }

/* Fotografie: Bilder werden nie beschnitten — jede Spalte ist gleich
   breit, die Höhe richtet sich frei nach dem jeweiligen Bildformat
   (Hoch- und Querformat gemischt). Design behält das Crop-Raster oben. */
.detail__gallery--masonry {
  display: block;
  columns: 3;
  column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.detail__gallery--masonry .detail__gallery-item {
  break-inside: avoid;
  width: 100%;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
}
.detail__gallery--masonry .detail__gallery-item {
  aspect-ratio: auto;
  background: none;
}
.detail__gallery--masonry .detail__gallery-item img {
  height: auto;
  object-fit: unset;
}
.detail__gallery--masonry .detail__gallery-item:hover img { transform: none; }

.detail__credits-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

/* ============================================================
   ABOUT US
   ============================================================ */
#about { padding-bottom: 8rem; }

.about__content {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
}

.about__intro {
  max-width: 620px;
  margin-bottom: clamp(6rem, 11vw, 11rem);
}
.about__intro h1 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.about__intro p { font-size: 0.95rem; line-height: 1.7; color: var(--grey-700); max-width: 42ch; }

/* Single screen-filling hero image of both founders — sits flush at
   the very top of the page, full-bleed, with the nav floating over it
   (same technique as the Home video). The actual text content follows
   underneath in .about__content. */
.about__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
}

.about__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
}

.about__hero-names {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(2.5rem, 6vw, 4rem));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.about__hero-person--right { text-align: right; }

.about__hero-name {
  display: block;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  text-transform: lowercase;
  color: var(--white);
}

.about__role {
  display: block;
  font-size: var(--ui-size);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-top: 0.4rem;
}

.about__hero-names .about__role {
  color: var(--white);
}

/* ---- Individual profiles: who we are, what we're good at --- */
.about__people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.about__person-name {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: lowercase;
  margin-bottom: 0;
}
.about__person-name + .about__role { margin-top: 0.3rem; margin-bottom: 1.2rem; }

.about__person-bio {
  font-size: 1rem;
  color: var(--grey-700);
}

.about__person-insta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1rem;
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  text-decoration: none;
  transition: color var(--transition), translate var(--transition);
}

/* ============================================================
   PAGE FLOW — next page navigation
   ============================================================ */
.page-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 5rem);
  border-top: 1px solid var(--grey-200);
  cursor: pointer;
  transition: background var(--transition);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.page-next:hover { background: var(--grey-100); }

.page-next__label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 0.9rem;
}

.page-next__title {
  font-family: var(--font);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: var(--tracking-subline);
  text-transform: none;
  color: var(--black);
  line-height: 1.02;
  transition: color var(--transition);
}
.page-next:hover .page-next__title { color: var(--red); }

.page-next__arrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--black);
  /* translate (nicht transform) animiert, damit die gespiegelte
     Zurück-Variante ihr inline transform:scaleX(-1) behält. */
  transition: translate var(--transition), color var(--transition);
  line-height: 1;
}
/* CI/CD-Standard für Links: der Pfeil "wandert" beim Hover in einer
   ruhigen Welle von links nach rechts und wieder zurück (Endlosschleife),
   in Marken-Rot. */
.page-next:hover .page-next__arrow {
  color: var(--red);
  animation: linkWaveLTR 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
@keyframes linkWaveLTR {
  0%   { translate: 0 0; }
  50%  { translate: 12px 0; }
  100% { translate: 0 0; }
}


/* ---- Related-Projekte: normale Card-Grösse, gefüllte Reihe ----
   Die Spaltenanzahl setzt js/main.js (repeat(N,1fr)) passend zur Breite,
   sodass die Reihe gefüllt ist und die Cards die gleiche Grösse wie im
   Projects-Grid haben (nicht riesig). */
.detail__related {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 4vw, 5rem) 0;
}
.detail__related .section__label { color: rgba(255, 255, 255, 0.55); }
.detail__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Fallback; JS überschreibt */
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 700px) {
  .detail__related-grid { grid-template-columns: 1fr !important; }
}

/* Book Us page: arrow and title in white */
#book .page-next__title,
#book .page-next__arrow { color: var(--white); }
#book .page-next:hover { background: rgba(255,255,255,0.08); }

/* ============================================================
   BOOK US — CI/CD red background
   ============================================================ */
#book {
  background: var(--red);
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  color: var(--white);
}

/* Nav override: when on Book Us page, scrolled nav gets red tint */
#book .book__inner {
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
  padding-bottom: 8rem;
}

.book__header { margin-bottom: clamp(4rem, 7vw, 7rem); }
.book__header h1 { color: var(--white); }

.book__body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(4rem, 7vw, 8rem);
  align-items: start;
}

.book__info h3 { margin-bottom: 2rem; color: var(--white); }

.book__phone {
  display: block;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  color: var(--white);
  margin-bottom: 1rem;
  transition: opacity var(--transition);
}
.book__phone:hover { opacity: 0.7; }

.book__tagline { font-size: 0.9rem; color: rgba(255,255,255,0.6); font-weight: 450; }

.book__divider {
  width: 1.5rem;
  height: 1.5px;
  background: rgba(255,255,255,0.4);
  margin: 2rem 0;
}

.book__email-label {
  font-size: var(--ui-size);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.4rem;
}
.book__email-val { font-size: 1rem; font-weight: 400; color: var(--white); }

/* Form on red background */
.book__form { display: flex; flex-direction: column; gap: 1.5rem; }

.form-field { display: flex; flex-direction: column; gap: 0.5rem; }

/* Honeypot: ausserhalb des Bildschirms statt display:none/visibility:hidden,
   damit Bots, die solche Tricks kennen, das Feld trotzdem als "echt" sehen
   und ausfüllen — Menschen sehen und erreichen es nie. */
.form-field__honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-field label {
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.form-field input,
.form-field textarea {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 450;
  color: var(--white);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.35);
  padding: 0.75rem 0;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
  resize: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255,255,255,0.35); }
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--white); }
.form-field textarea { height: 120px; }

/* Browser-Autofill (v.a. Chrome/Safari) legt sonst eine weisse Box
   hinter ausgefüllte Felder — Feld soll transparent bleiben, nur die
   Linie unten darf weiss werden (siehe :focus oben). */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  box-shadow: 0 0 0px 1000px transparent inset;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}
.form-field input:autofill,
.form-field textarea:autofill {
  background: transparent;
}

.form__submit { margin-top: 0.5rem; align-self: flex-start; }

/* Required marker */
.form-field label .required {
  color: var(--red);
  margin-left: 2px;
  opacity: 1;
}

/* Field error state */
.form-field.has-error input,
.form-field.has-error textarea {
  border-bottom-color: rgba(255,255,255,0.9);
}

.form-field__error {
  display: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 0.35rem;
}

.form-field.has-error .form-field__error {
  display: block;
}

.btn--book {
  color: var(--white);
  border-color: var(--white);
}
.btn--book:hover {
  background: var(--white);
  color: var(--red);
}

/* ============================================================
   KONTAKT-ERFOLGSMELDUNG — Kreis breitet sich vom Absenden-Button
   über die ganze Seite aus. Invertierte Farben zur restlichen
   Kontaktseite: weisser Hintergrund statt rot, roter Text statt weiss.
   ============================================================ */
.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--white);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.9s cubic-bezier(0.65,0,0.35,1), visibility 0s 0.9s;
  visibility: hidden;
  pointer-events: none;
}
.success-overlay.is-open {
  clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.9s cubic-bezier(0.65,0,0.35,1);
}
.success-overlay__content {
  max-width: 480px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.success-overlay.is-open .success-overlay__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}
.success-overlay__title {
  display: block;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.success-overlay__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(226, 7, 59, 0.75);
  margin-bottom: 2.25rem;
}
.success-overlay__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn--overlay { color: var(--red); border-color: var(--red); }
.btn--overlay:hover { background: var(--red); color: var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--grey-200);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 5rem);
  margin-top: clamp(4rem, 8vw, 7rem);
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.footer__copy { font-size: 0.62rem; color: var(--grey-400); letter-spacing: 0.1em; text-transform: uppercase; }
/* Je eine Spalte: Copyright über Impressum, Instagram über Mail —
   gestapelt statt in einer Zeile. */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer__logo { width: 28px; opacity: 0.4; transition: opacity var(--transition); margin-left: auto; }
.footer__logo:hover { opacity: 0.9; }
/* Footer-Links: ohne Pfeil UND ohne Wave, Gewicht Regular (die einzige
   Ausnahme vom Semibold-Standard der Mikro-UI). Gleiche Grösse + Laufweite,
   Rot nur beim Hover. */
.footer__legal {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: var(--ui-size);
  font-weight: 450;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--grey-400);
  text-decoration: none;
  transition: color var(--transition);
}
.footer__legal:hover { color: var(--red); }
#book .footer__legal { color: rgba(255,255,255,0.45); }
#book .footer__legal:hover { color: var(--white); }

/* Book Us & Projects nutzen denselben einheitlichen Nav-Balken wie alle
   anderen Seiten (.nav--scrolled: weisser Balken, schwarze Links) —
   keine eigene Balkenfarbe pro Seite mehr. */

/* Footer on Book Us (red bg) */
#book .footer {
  border-top-color: rgba(255,255,255,0.2);
  background: transparent;
  margin-top: 0;
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
}
#book .footer__copy { color: rgba(255,255,255,0.45); }
#book .footer__logo { filter: invert(1); opacity: 0.4; }
#book .footer__logo:hover { opacity: 0.9; }

/* ============================================================
   IMPRESSUM
   ============================================================ */
.impressum__inner {
  position: relative;
  max-width: 760px;
  padding: calc(var(--nav-h) + 5rem) clamp(1.5rem, 4vw, 5rem) 6rem;
  margin: 0 auto;
}
.impressum__header { margin-bottom: clamp(3rem, 5vw, 4rem); }
.impressum__body h3 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.9rem;
}
.impressum__body p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--grey-700);
}
.impressum__divider {
  width: 1.5rem;
  height: 1.5px;
  background: var(--grey-200);
  margin: 2rem 0;
}

/* Zugang zum Admin-Bereich */
.impressum__admin-access {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--grey-200);
}
.impressum__admin-btn { padding: 0.85rem 2rem; font-size: 0.65rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .detail__body { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__people { gap: 2.5rem; }
  /* Schmale Screens: Formular zuerst (direkt unter "Lass uns
     zusammenarbeiten"), Kontakt-Infos darunter. column-reverse dreht die
     DOM-Reihenfolge (Info, Formular) → Formular oben. */
  .book__body { display: flex; flex-direction: column-reverse; gap: 3rem; align-items: stretch; }
  .detail__gallery { grid-template-columns: repeat(2, 1fr); }
  .detail__gallery--masonry { columns: 2; }
}

@media (max-width: 600px) {
  :root { --nav-h: 60px; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .cs__item-caption { font-size: 0.5rem; padding: 0.4rem 0.45rem; }
  .projects__grid { grid-template-columns: 1fr; }
  /* Handy hat kein Hover: Titel/Kategorie dezent dauerhaft zeigen. */
  .project-card__info { opacity: 1; transform: none; }
  .projects__hero { height: 80vh; height: 80dvh; margin-bottom: -32vh; }

  /* Handy: einzelne Filter-Buttons weg, dafür ein schlankes Dropdown
     ohne Box — direkt rechts daneben die Lupe, ebenfalls ohne Box. */
  .projects__filter { display: none; }
  .projects__filters {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.85rem;
  }
  .projects__filter-mobile { display: block; }
  .projects__filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
    color: var(--white);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 1.4rem 0.5rem 0;
    cursor: pointer;
    /* Eigener kleiner Pfeil statt der nativen Browser-Box/-Optik */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px;
  }
  .projects__filter-select:focus { outline: none; border-bottom-color: var(--white); }
  .projects__filter-select option { color: var(--black); background: var(--white); }

  /* Lupe bleibt auf dem Handy ohne Box, solange das Suchfeld
     geschlossen ist — passt zum borderlosen Dropdown daneben. */
  .projects__search { margin-left: auto; }
  /* Titel-Umschalter weg — auf dem Handy sind die Titel ohnehin sichtbar. */
  .projects__titles-toggle { display: none; }
  .projects__search-toggle {
    border: none;
    background: transparent;
    width: 1.75rem;
    height: 1.75rem;
  }
  .projects__search.is-open .projects__search-toggle { border: none; }

  /* Mindestens 16px, sonst zoomt iOS Safari automatisch beim Fokus
     ins Suchfeld hinein. */
  .projects__search-input { font-size: 16px; }
  .about__people { grid-template-columns: 1fr; gap: 3rem; }
  .home__intro { flex-direction: column; gap: 2rem; }
  .home__intro-thumbs { width: 100%; max-width: 220px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .book__header h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  /* Kontakt-Infos unter dem Formular kompakter + ruhiger — nicht
     überfordernd: kleinere Überschrift/Telefon, engere Abstände. */
  .book__info h3 { font-size: 1.1rem; margin-bottom: 1rem; }
  .book__phone { font-size: 1.15rem; margin-bottom: 0.35rem; }
  .book__tagline { font-size: 0.85rem; }
  .book__divider { margin: 1.25rem 0; }
  .book__email-label { margin-bottom: 0.15rem; }
  .book__email-val { font-size: 0.95rem; }
  .detail__credits-list {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: unset;
    gap: 1.25rem;
  }
  .detail__gallery { grid-template-columns: 1fr; }
  /* Fotografie: auch auf dem Handy 2 Spalten statt nur 1 */
  .detail__gallery--masonry { columns: 2; column-gap: 0.6rem; }
  .detail__gallery--masonry .detail__gallery-item { margin-bottom: 0.6rem; }

  /* Im Banner steht auf dem Handy nur noch der (kurze) Titel, daher
     reicht eine normale Hero-Höhe statt der früheren 80vh. Titel bleibt
     unten-verankert, direkt über der Galerie (wie auf dem Desktop). */
  .detail__banner { min-height: 60vh; min-height: 60dvh; }
  .detail__gallery-meta { flex-direction: column; gap: 1.5rem; }
  .detail__gallery-meta .detail__meta-list { flex-direction: column; gap: 1.25rem; }
  #project-detail.project-detail--gallery .detail__gallery { margin-top: -1.25rem; padding-top: 1.5rem; }

  .detail__gallery-desc { font-size: 0.95rem; margin-bottom: 1.75rem; }
}


/* ---- Lightbox — Vollbild-Ansicht für Galerie- & BTS-Bilder ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,10,10,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}
.lightbox__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(3rem, 8vw, 6rem);
  background: none;
  border: none;
  color: var(--white);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }

@media (max-width: 600px) {
  .lightbox__nav { width: 3rem; font-size: 2rem; }
  .lightbox__close { font-size: 1.6rem; }
}