/* ============================================================================
   JAN JANSSEN.CH — globales Stylesheet
   ========================================================================== */

:root {
  --bg: #131311;          /* Grundton der Seite (dunkles Warmgrau) */
  --ink: #f2f1ec;         /* Haupt-Textfarbe */
  --ink-muted: #9a988f;   /* gedämpfter Text */
  --line: rgba(242, 241, 236, 0.14);
  --accent: #f2f1ec;
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Nur für Screenreader/Suchmaschinen sichtbar (SEO-Text, H1) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Galerie-Seite: kein Scrollen, alles im Viewport ---------------------- */
body.gallery-page {
  overflow: hidden;
  height: 100dvh;
  touch-action: none;          /* Drag steuert die Spirale, nicht den Scroll */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
body.gallery-page.dragging { cursor: grabbing; }

/* Schneidematten-Hintergrund (Canvas) ganz hinten */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* WebGL-Canvas darüber */
#gl-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
}

/* ---- Header / Hauptmenü (reines DOM, unabhängig von WebGL) ---------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  pointer-events: none;          /* nur die Kinder fangen Klicks */
}
.site-header a { pointer-events: auto; }
/* Auf der statischen Seite bekommt der fixierte Header einen Verlauf,
   damit der Text beim Scrollen nicht durch Logo/Menü läuft */
body.static-page .site-header {
  background: linear-gradient(to bottom, var(--bg) 55%, rgba(19, 19, 17, 0));
  padding-bottom: 34px;
}

.site-logo-link { display: block; line-height: 0; }
/* Logo als CSS-Maske: die Form kommt aus assets/logo/logo.svg (Datei
   ersetzen genügt), die Füllung ist hier steuerbar — so kann der
   Liquid-Glass-Hover die Fläche animieren */
.site-logo-mark {
  display: block;
  width: 70px;
  height: 55px;
  background-color: var(--ink);
  -webkit-mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.4, 1);
}
.site-logo-link:hover .site-logo-mark {
  transform: scale(1.07);
  background-color: transparent;
  /* "Liquid Glass": durchlaufender, glasig schimmernder Verlauf */
  background-image: linear-gradient(115deg,
    rgba(242, 241, 236, 0.45) 0%,
    #ffffff 22%,
    rgba(178, 200, 235, 0.9) 45%,
    rgba(255, 255, 255, 0.95) 62%,
    rgba(214, 231, 255, 0.55) 80%,
    rgba(242, 241, 236, 0.45) 100%);
  background-size: 240% 240%;
  animation: logo-liquid 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 14px rgba(242, 241, 236, 0.35));
}
@keyframes logo-liquid {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================================
   HAUPTMENÜ — EIN einziges Element (Markup aus js/menu.js).
   Die kleine weiße Pille ("● MENU") IST die Menü-Box: beim Klick wächst
   derselbe weiße Körper per width/height-Transition zur großen Box auf,
   beim Schließen schrumpft er zurück zur Pille. Kein zweites Panel.
   ========================================================================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(10, 10, 9, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }

.menu {
  /* Zielmaße der offenen Box (mobil per Media-Query überschrieben) */
  --menu-w: min(460px, calc(100vw - 56px));
  --menu-h: calc(100dvh - 58px);
  position: fixed;
  top: 29px;   /* optisch auf Header-Höhe */
  right: 28px;
  z-index: 200;
  width: 100px; /* Pillen-Maße (geschlossen) */
  height: 42px;
  background: #ffffff;
  /* konstant 22px: wirkt auf der 42px-Pille voll rund (Radius wird auf die
     halbe Höhe begrenzt) UND ist zugleich die Standard-Rundung der offenen
     Box — die Kanten sind beim Aufwachsen also von Anfang an final */
  border-radius: 22px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Inhalt wird beim Aufwachsen freigelegt */
  transition:
    width 0.55s cubic-bezier(0.34, 1.15, 0.35, 1),  /* wächst mit leichtem  */
    height 0.55s cubic-bezier(0.34, 1.15, 0.35, 1), /* Überschwinger        */
    transform 0.25s ease,
    opacity 0.5s ease 0.4s; /* Wieder-Einblenden nach Projekt-Schließen */
}
.menu:not(.is-open):hover { transform: scale(1.04); }
.menu:not(.is-open):active { transform: scale(0.97); }
.menu.is-open {
  width: var(--menu-w);
  height: var(--menu-h);
}

/* Schimmer-Effekt (wie beim Logo) — nur auf der geschlossenen Pille */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background-image: linear-gradient(115deg,
    transparent 15%,
    rgba(178, 200, 235, 0.5) 40%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(178, 200, 235, 0.45) 60%,
    transparent 85%);
  background-size: 240% 240%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Liquid-Glass-Schimmer NUR auf echten Zeigergeräten — sonst bleibt der
   „sticky hover" am Handy hängen und der Button schimmert nach dem Schließen
   dauerhaft weiter. */
@media (hover: hover) and (pointer: fine) {
  .menu:not(.is-open):hover::before {
    opacity: 1;
    animation: logo-liquid 2s ease-in-out infinite;
  }
}

/* Klickfläche: geschlossen die ganze Pille — offen nur die ✕-Ecke */
.menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 42px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: width 0.3s ease, height 0.3s ease;
}
.menu.is-open .menu-toggle { width: 76px; height: 68px; }

/* Beschriftung (● menu) und ✕ liegen übereinander und blenden um */
.menu-toggle-label,
.menu-toggle-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.16s ease;
}
.menu-toggle-label {
  color: #141414;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-toggle-x {
  opacity: 0;
  color: #141414;
  font-size: 1.3rem;
  font-weight: 900;
}
.menu.is-open .menu-toggle-label { opacity: 0; }
.menu.is-open .menu-toggle-x { opacity: 1; transition-delay: 0.3s; }
/* ✕ dreht sich beim Hover einmal um sich selbst */
.menu.is-open .menu-toggle:hover .menu-toggle-x { animation: x-spin 0.5s ease; }
@keyframes x-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Buchstaben wackeln beim Hover nacheinander kurz auf — NUR auf echten
   Zeigergeräten. Sonst bleibt der „sticky hover" nach dem Antippen auf dem
   Handy hängen und der Button friert nach dem Schließen im Wackel-Zustand ein. */
.mb-letter { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .menu:not(.is-open):hover .mb-letter {
    animation: letter-wobble 0.55s ease both;
    animation-delay: calc(var(--li) * 0.07s);
  }
}
@keyframes letter-wobble {
  0%   { transform: none; }
  35%  { transform: scale(1.35) rotate(8deg); }
  65%  { transform: scale(1.15) rotate(-6deg); }
  100% { transform: none; }
}

/* Inhalt der offenen Box: hat IMMER die Zielmaße (bricht beim Wachsen
   also nicht um) und wird von der wachsenden Pille einfach freigelegt */
.menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--menu-w);
  height: var(--menu-h);
  display: flex;
  flex-direction: column;
  padding: 84px 34px 26px;
  color: #141414;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.menu.is-open .menu-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease 0.12s;
}

.menu-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Ein Menüpunkt = großes Label + aufklappbarer Inhalt (Accordion) */
.menu-sec-label {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #141414;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  width: fit-content;
  transition:
    color 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.4, 1);
}
.menu-sec-label:hover { transform: translateX(0.12em); }
.menu-sec-label:active { transform: translateX(0.12em) scale(0.96); }
/* Ist ein Punkt offen, grauen die anderen aus — bleiben aber klickbar */
.menu.has-open .menu-sec:not(.open) .menu-sec-label { color: #c8c7c1; }
.menu.has-open .menu-sec:not(.open) .menu-sec-label:hover { color: #8f8e88; }

/* Inhalt klappt per Grid-Animation weich auf und schiebt die
   nachfolgenden Punkte dabei nach unten */
.menu-sec-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.menu-sec.open .menu-sec-body { grid-template-rows: 1fr; }
.menu-sec-inner { min-height: 0; overflow: hidden; }
.menu-sec-content {
  padding: 14px 0 26px 2px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-sec.open .menu-sec-content {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}
.menu-sec-content p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #141414;
}
.menu-sec-content a { color: #141414; text-decoration: none; }
.menu-sec-content a:hover { text-decoration: underline; }

/* Menüpunkte + Kunden-Banner poppen nach dem Aufwachsen gestaffelt auf */
.menu-sec, .menu-langs, .menu-clients { opacity: 0; }
body.menu-open .menu-sec,
body.menu-open .menu-langs,
body.menu-open .menu-clients {
  opacity: 1;
  animation: item-pop 0.45s cubic-bezier(0.34, 1.4, 0.4, 1) backwards;
}
body.menu-open .menu-sec:nth-child(1) { animation-delay: 0.3s; }
body.menu-open .menu-sec:nth-child(2) { animation-delay: 0.38s; }
body.menu-open .menu-sec:nth-child(3) { animation-delay: 0.46s; }
body.menu-open .menu-langs { animation-delay: 0.34s; }
body.menu-open .menu-clients { animation-delay: 0.6s; }
@keyframes item-pop {
  0%   { opacity: 0; transform: scale(0.9) translateY(12px); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}

/* Sprachauswahl im Menü (DE · EN · FR · IT) — dezent, oben auf Höhe des ✕ */
.menu-langs {
  position: absolute;
  top: 30px;
  left: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  z-index: 2;
}
.menu-lang {
  background: none;
  border: none;
  padding: 4px 3px;
  color: #141414;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.menu-lang:hover { opacity: 0.65; }
.menu-lang.is-active { opacity: 1; }
/* dünner Mittelpunkt als Trenner zwischen den Sprachen */
.menu-lang:not(:last-of-type)::after {
  content: "·";
  margin-left: 7px;
  opacity: 0.4;
  pointer-events: none;
}

/* Kunden-Laufband unten im Menü (ersetzt Mail + Social-Icons) */
.menu-clients { margin-top: 8px; }
.menu-clients-label {
  display: block;
  color: #141414;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.menu-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 54px;
  pointer-events: none; /* rein dekorativ: kein Hover, nicht anklickbar */
  display: flex;
  align-items: center;
  /* weißer Rand-Fade links & rechts (Menü-Hintergrund ist weiß) */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, #000 11%, #000 89%, transparent 100%);
}
.menu-marquee-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  will-change: transform;
  /* Bewegung wird pixelgenau per JS (js/menu.js) gesetzt — bewusst KEINE
     CSS-Animation: translateX(%) hing an der Bandbreite, die erst nach dem
     Laden aller Logos feststeht → beim Reload entstand eine Lücke. */
}
.menu-client {
  height: 32px; /* Fallback; echte Höhe wird je Logo inline gesetzt (optisch normiert) */
  width: auto;
  flex: none;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
/* Hinweis: Das Kunden-Laufband läuft bewusst IMMER (Marken-Element) — auch
   bei „Bewegung reduzieren". Sonst steht es auf vielen iPhones still, weil
   diese Einstellung dort häufig aktiv ist. */

/* ---- Info-Leiste unten (aktuelles Projekt + Bedienhinweis) ----------------- */
.gallery-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}
.hud-project-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 1.3em;
  transition: opacity 0.3s ease;
}
.hud-project-meta {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-height: 1em;
}
.hud-hint {
  margin-top: 10px;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.8;
  transition: opacity 1s ease;
}
.hud-hint.hidden { opacity: 0; }
/* ---- Auflöse-Animation beim Öffnen eines Projekts ---------------------------
   body.project-open lässt Logo, Menü-Pille und HUD einfach VERBLASSEN
   (die Karten räumt js/main.js per Spiral-Drehung leer). Beim Schließen
   blenden die Elemente leicht verzögert wieder ein, wenn die Box weg ist. */
@keyframes show-von-oben-links {
  from { opacity: 0; transform: translate(-30px, -26px); }
  to   { opacity: 1; transform: none; }
}
/* Einzug beim Laden — "backwards" statt "both": ein gehaltener End-Frame
   würde die Verblass-Transition (opacity) dauerhaft überschreiben */
.gallery-page .site-header,
.gallery-page .menu {
  animation: show-von-oben-links 0.5s ease 0.55s backwards;
}
.gallery-page .gallery-hud {
  animation: show-von-oben-links 0.45s ease 0.75s backwards;
}
/* Verblassen per Transition: Hinweg sofort, Rückweg mit Verzögerung */
.gallery-page .site-header,
.gallery-page .gallery-hud {
  transition: opacity 0.5s ease 0.4s;
}
body.project-open .site-header,
body.project-open .gallery-hud {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.project-open .menu {
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.55s cubic-bezier(0.34, 1.15, 0.35, 1),
    height 0.55s cubic-bezier(0.34, 1.15, 0.35, 1),
    transform 0.25s ease,
    opacity 0.35s ease; /* Hinweg ohne Verzögerung */
}

/* ---- Lade-Anzeige -----------------------------------------------------------
   Das Logo-Emblem dreht sich wie eine Münze im Raum (CSS-3D), darunter
   pulsiert ein Bodenschatten im Takt. Nutzt dieselbe Logo-Maske wie der
   Header — Logo-Datei tauschen genügt auch hier.                            */
.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--bg);
  transition: opacity 0.6s ease;
}
.loader.done { opacity: 0; pointer-events: none; }

.loader-stage {
  perspective: 700px; /* macht die Drehung räumlich */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loader-logo {
  display: block;
  width: 108px;
  height: 85px;
  background-color: var(--ink);
  -webkit-mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  animation: loader-flip 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes loader-flip {
  0%   { transform: rotateX(10deg) rotateY(0deg); }
  100% { transform: rotateX(10deg) rotateY(360deg); }
}
/* Bodenschatten: wird schmal, wenn das Logo auf der Kante steht */
.loader-shadow {
  width: 84px;
  height: 10px;
  margin-top: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  animation: loader-shadow 0.95s ease-in-out infinite alternate;
}
@keyframes loader-shadow {
  from { transform: scaleX(1); opacity: 0.7; }
  to   { transform: scaleX(0.35); opacity: 0.35; }
}
.loader-text {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  animation: loader-text 1.9s ease-in-out infinite;
}
@keyframes loader-text {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---- Projekt-Ansicht (Box von unten, volle Breite) --------------------------
   Randlose, scrollbare Box (ohne sichtbaren Scrollbalken). Fest im
   Rahmen: ✕ oben rechts, Logo dezent oben links, drei schwebende
   Buttons unten mittig (← close →).                                        */
.project-view {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Desktop: Box geht NICHT über die volle Monitorbreite — die festen
     Rahmen-Elemente (Logo, Buttons) ankern damit an der Box-Kante */
  width: min(1040px, 100vw);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 1.2s;
}
body.project-open .project-view {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.project-box {
  width: 100%;                  /* füllt die (begrenzte) project-view */
  height: 88dvh;
  background: #1d1c1a;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrollbalken ausblenden (Inhalt bleibt scrollbar) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateY(105%);
  transition: transform 0.65s cubic-bezier(0.3, 0.9, 0.3, 1);
  transition-delay: 0s;   /* beim Schließen sofort nach unten */
}
.project-box::-webkit-scrollbar { display: none; }
body.project-open .project-box {
  transform: translateY(0);
  transition-delay: 1.1s; /* die Spirale erst weitgehend leerdrehen lassen
                             (SPIN_DUR 2s in main.js), dann hochfahren */
}

.project-box-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 24px 130px; /* unten Platz für die schwebenden Buttons */
}
.project-title {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-meta {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.project-description {
  margin-top: 22px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 58ch;
}
/* Medien als Collage: Spalten-Layout (masonry) — JEDES Bild behält sein
   natürliches Seitenverhältnis, NICHTS wird angeschnitten.
   Desktop: die Collage startet direkt zweispaltig, das Titelbild ist das
   erste Bild der linken Spalte (kein Sonderfall — ein „fast gleich
   breites" Hero sah daneben unsauber aus). Mobil spannt das Titelbild
   über die volle Rasterbreite (.m-hero in der Media-Query). */
.project-media {
  margin-top: 28px;
  columns: 2;
  column-gap: 14px;
}
/* layout "pages" (Magazin/Barkarte): eine Spalte, Seiten in fester
   Reihenfolge direkt untereinander — keine Collage */
.project-media.m-pages { columns: 1; }
.project-media img,
.project-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 14px;
  break-inside: avoid;
}

/* ---- Reines Video-Projekt: Video füllt den Screen, bleibt aber immer
   vollständig sichtbar (contain, nie beschnitten) ------------------------- */
.project-box.m-video-solo .project-box-inner {
  max-width: none;   /* volle Breite freigeben (statt 860px) */
  padding: 64px 0 130px;
  height: 100%;      /* feste Höhe → flex verteilt sauber, kein Überlauf */
  display: flex;
  flex-direction: column;
}
/* Titel/Meta/Beschreibung behalten ihren Textrand und die schmale Spalte */
.project-box.m-video-solo .project-head,
.project-box.m-video-solo .project-description {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.project-box.m-video-solo .project-media {
  margin-top: 24px;
  columns: auto;      /* kein Spalten-Layout */
  flex: 1;            /* nimmt die restliche Höhe ein … */
  min-height: 0;      /* … darf dabei aber schrumpfen (kein Überlauf) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.project-box.m-video-solo .project-media video {
  width: 100%;
  height: 100%;
  max-height: 100%;   /* passt exakt in die verbleibende Boxhöhe */
  margin: 0;
  object-fit: contain; /* Video immer komplett im Bild, Rest bleibt schwarz */
  background: #000;
  border-radius: 12px;
}

/* Seitenkopf: Titel/Meta links, weißes Logo rechts (scrollt mit) */
.project-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.project-logo {
  flex: none;
  width: 56px;
  height: 44px;
  background-color: var(--ink);
  pointer-events: none;
}

/* Feste Elemente im Rahmen der Box (scrollen NICHT mit) */
.project-controls {
  position: absolute;
  z-index: 103;
  opacity: 0;
  transition: opacity 0.35s ease 0s;
}
body.project-open .project-controls {
  opacity: 1;
  transition-delay: 1.6s; /* erscheinen, wenn die Box steht */
}

/* Chevron oben mittig IN der Box (iOS-Sheet-Grabber): sitzt fest an der
   Box und macht jede Bewegung mit (Runterziehen, Wischen, Hereingleiten).
   Sticky = bleibt beim Scrollen am oberen Boxrand. Zeigt „runterziehen
   zum Schließen", tippen schließt ebenfalls — nur mobil sichtbar */
.project-grabber {
  display: none;
  position: sticky;
  top: 6px;
  z-index: 5;
  width: max-content;
  margin: 6px auto -30px; /* negativ: nimmt dem Inhalt keinen Platz weg */
  padding: 6px 14px;      /* großzügige Tippfläche */
  background: none;
  border: none;
  color: rgba(242, 241, 236, 0.85);
  cursor: pointer;
  line-height: 0;
}
/* nach dem Erscheinen zweimal sanft nach unten dippen: „hier ziehen" */
@keyframes grabber-dip {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(6px); }
}
body.project-open .project-grabber svg {
  animation: grabber-dip 1.1s ease-in-out 2.6s 2;
}

/* drei schwebende Buttons unten mittig: ← close → */
.project-controls {
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-controls button {
  font-family: inherit;
  color: #141414;              /* weiß mit dunkler Schrift — wie die Menü-Pille */
  background: #ffffff;
  border: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.project-controls button:hover { transform: translateY(-2px); }
.project-controls button:active { transform: scale(0.94); }
.pc-prev, .pc-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1rem;
}
.pc-close {
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Statische Seite (Impressum / AGB / Kontakt / Leistungen) -------------- */
body.static-page {
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(242, 241, 236, 0.04), transparent 70%),
    var(--bg);
}
.static-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 28px 100px;
}
.static-wrap h1 {
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.static-intro {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 48px;
}
.static-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 64px;
}
.static-toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}
.static-toc a:hover { border-color: var(--ink); }

.static-section {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;   /* Anker landen nicht unter dem Header */
}
.static-section h2 {
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.static-section h3 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin: 26px 0 8px;
}
.static-section p,
.static-section li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-muted);
}
.static-section ul { padding-left: 20px; margin: 10px 0; }
.static-section a { color: var(--ink); }
.static-section strong { color: var(--ink); font-weight: 600; }

.todo-note {
  display: block;
  margin: 8px 0;
  padding: 10px 14px;
  border: 1px dashed rgba(242, 200, 120, 0.45);
  border-radius: 6px;
  color: #e8c47c;
  font-size: 0.78rem;
  line-height: 1.5;
}

.static-footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.static-footer a { color: var(--ink-muted); text-decoration: none; }
.static-footer a:hover { color: var(--ink); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 640px) {
  .site-header { padding: 16px 18px; }
  /* Menü-Pille/Box am Handy: kleinere Abstände, Box fast vollflächig */
  .menu {
    top: 16px;
    right: 18px;
    --menu-w: calc(100vw - 36px);
    --menu-h: calc(100dvh - 32px);
  }
  .site-logo-link img { height: 42px; }
  body.menu-open .site-logo-link { opacity: 0; transition: opacity 0.2s ease; }
  .main-nav { gap: 18px; }
  .project-box { height: 92dvh; border-radius: 16px 16px 0 0; }
  .project-box-inner { padding: 56px 16px 120px; }
  .project-logo { width: 44px; height: 35px; }
  /* Handy = reine Gesten-UI (Apple-like): keine Buttons, stattdessen
     Chevron oben (runterziehen/tippen = schließen, wischen = blättern) */
  .project-controls { display: none; }
  .project-grabber { display: block; }
  .project-media { column-gap: 10px; }
  .project-media img,
  .project-media video { margin-bottom: 10px; }
  /* Titelbild mobil: volle Rasterbreite, natürliche Höhe */
  .project-media .m-hero { column-span: all; }
  .static-wrap { padding-top: 110px; }
}