/* Design & Code: © PhilippSchafer.eu */

/* ============================================================
   PHILIPP SCHÄFER — Global Stylesheet
   Fonts: Helvetica Neue / Helvetica / Arial (system stack, no external CDN)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:           #faf9f5;
  --text:         #1d1e20;
  --muted:        #999;
  --border:       rgba(29,30,32,0.15);
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease-out:     cubic-bezier(0.77, 0, 0.175, 1);
  --transition:   0.5s ease;
}

/* Inverted (dark) mode */
body.inverted {
  --bg:     #1d1e20;
  --text:   #faf9f5;
  --border: rgba(250,249,245,0.15);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent iOS Safari from auto-zooming text on landscape rotation */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  transition: background var(--transition), color var(--transition);
}

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

sup {
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0.05em;
}

/* ── Custom Cursor ─────────────────────────────────────────── */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--text);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background var(--transition);
  mix-blend-mode: difference;
}
.cursor.hover {
  width: 36px;
  height: 36px;
}

/* ── HEADER ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 36px;
  pointer-events: none;
}

.logo {
  color: var(--text);
  pointer-events: all;
  transition: color var(--transition);
  line-height: 1;
}
.logo svg {
  height: 16.8px;
  width: auto;
  display: block;
}
/* Logo (and all sticky elements) white when over full-bleed photo */
.logo.on-photo { color: #fff; }

.main-nav {
  display: flex;
  gap: 32px;
  pointer-events: all;
}
.main-nav a {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.45;
  transition: opacity 0.2s, color var(--transition);
  padding-bottom: 2px;
  cursor: none;
}
.main-nav a:hover   { opacity: 0.8; }
.main-nav a.active  { opacity: 1; border-bottom: 1px solid var(--text); }
/* Nav turns white over photo */
.main-nav.on-photo a        { color: #fff; }
.main-nav.on-photo a.active { border-bottom-color: #fff; }

/* ── STICKY FOOTER OVERLAY ─────────────────────────────────── */
/* Berlin clock / Contact (BL) + Lang / Invert (BR) */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 36px 28px;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* Mobile: fade out when page-footer scrolls into view */
.site-footer.footer-overlap {
  opacity: 0;
}
/* Kill all child pointer events so hidden elements don't intercept taps */
.site-footer.footer-overlap * {
  pointer-events: none !important;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: all;
}

.clock {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.blink { animation: blink 1s step-end infinite; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.contact-link {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.6;
  transition: opacity 0.2s, color var(--transition);
  pointer-events: all;
  cursor: none;
}
.contact-link:hover { opacity: 1; }

/* Footer-left turns white over photo */
.footer-left.on-photo .clock        { color: rgba(255,255,255,0.6); }
.footer-left.on-photo .contact-link { color: #fff; opacity: 0.8; }

.footer-right {
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: all;
}

.btn-lang, .btn-invert {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color var(--transition);
}
.btn-invert { font-size: 18px; }
.btn-lang:hover, .btn-invert:hover {
  background: var(--text);
  color: var(--bg);
}

/* Footer-right turns white over photo */
.footer-right.on-photo .btn-lang,
.footer-right.on-photo .btn-invert {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.footer-right.on-photo .btn-lang:hover,
.footer-right.on-photo .btn-invert:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ── ABOUT PAGE ────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Left: sticky photo */
.about-photo {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Curtain reveal animation */
.curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  animation: curtainReveal 1.4s var(--ease-out) 0.2s forwards;
}
@keyframes curtainReveal {
  0%  { transform: scaleY(1);   transform-origin: top; }
  45% { transform: scaleY(0);   transform-origin: top; }
  46% { transform: scaleY(0);   transform-origin: bottom; }
  100%{ transform: scaleY(0);   transform-origin: bottom; }
}

/* Light / spotlight overlay */
.light-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
.light-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%);
}
@media (min-width: 901px) {
  .light-overlay::after {
    background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.30) 100%);
  }
}
.light-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 40% 40% at var(--lx, 50%) var(--ly, 50%),
    rgba(255,240,200,0.12) 0%,
    transparent 70%
  );
}

/* Right: content */
.about-content {
  padding: 120px 60px 100px 64px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.about-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 38px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.7s ease 1.1s forwards;
}

.about-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.3s forwards;
}

.about-bio {
  font-size: 13.5px;
  line-height: 1.85;
  max-width: 460px;
  margin-bottom: 60px;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.4s forwards;
}

/* Info grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--border);
  margin-bottom: 0;
  margin-top: auto;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.6s forwards;
  transition: border-color var(--transition);
}
.info-col {
  padding: 25px 25px 0;
  border-right: 0.5px solid var(--border);
  transition: border-color var(--transition);
}
.info-col:first-child { padding-left: 0; }
.info-col:last-child  { border-right: none; padding-right: 0; }

.info-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  transition: color var(--transition);
}
.info-col p, .info-col a {
  font-size: 11.5px;
  line-height: 2;
  display: block;
  color: var(--text);
  transition: color var(--transition);
}

/* Experience */
.exp-section {
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.8s ease 2.0s forwards;
}
.section-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  margin-top: 24px;
  border-top: 0.5px solid rgba(29,30,32,0.2);
  padding-top: 25px;
  display: block;
  transition: color var(--transition);
}
body.inverted .section-label { border-top-color: rgba(250,249,245,0.2); }

.exp-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid rgba(29,30,32,0.1);
  transition: border-color var(--transition);
}
body.inverted .exp-row { border-bottom-color: rgba(250,249,245,0.1); }

.exp-year  { font-size: 10px; color: var(--muted); padding-top: 2px; }
.exp-title { font-size: 12px; line-height: 1.7; }
.exp-title a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.2s;
  cursor: none;
}
.exp-title a:hover { border-bottom-color: var(--text); }

/* Services */
.service-section {
  margin-top: 24px;
  opacity: 0;
  animation: fadeUp 0.8s ease 2.2s forwards;
}
.service-section .section-label {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 0.5px solid rgba(29,30,32,0.25);
  border-radius: 2px;
  color: var(--text);
  opacity: 0.6;
  transition: color var(--transition), border-color var(--transition);
}
body.inverted .service-tag { border-color: rgba(250,249,245,0.25); }

/* Selected Collabs */
.collabs-section {
  margin-top: 35px;
  margin-bottom: 42px;
  opacity: 0;
  animation: fadeUp 0.8s ease 2.4s forwards;
}
.collabs-section .section-label {
  border-top: none;
  padding-top: 0;
  margin-top: 24px;
}
.collab-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
}
.collab-logo {
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.25s;
  cursor: none;
}
.collab-logo:hover { opacity: 0.9; }
.collab-logo svg {
  width: auto;
  display: block;
  color: var(--text);
  transition: color var(--transition);
}

/* Individual logo heights — equal visual area (~1600px²) */
.collab-logos .collab-logo:nth-child(1) svg { height: 18px; } /* huf            AR 4.07 */
.collab-logos .collab-logo:nth-child(2) svg { height: 34px; } /* safelight       AR 1.44 */
.collab-logos .collab-logo:nth-child(3) svg { height: 24px; } /* finelines        AR 2.76 */
.collab-logos .collab-logo:nth-child(4) svg { height: 18px; } /* pocketskatemag  AR 4.13 */
.collab-logos .collab-logo:nth-child(5) svg { height: 34px; } /* giessenvintage  AR 1.58 */
.collab-logos .collab-logo:nth-child(6) svg { height: 26px; } /* frafimi          AR 2.76 */

/* ── SPLASH / INDEX PAGE ───────────────────────────────────── */
/* White background — header uses default dark colour, on-photo handles video overlap */
.splash-page { overflow-x: hidden; }

.splash {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 80px 36px 88px; /* header clearance top, sticky footer bottom */
  background: var(--bg);
  transition: background var(--transition);
}

/* Animated video wrapper — slides up on load */
.splash-inner {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: videoSlideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

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

/* iPhone Mockup ─────────────────────────────────────────────
   Das PNG ist in-flow und bestimmt die Größe des Containers.
   Video + ENTER sind absolut relativ zum Container positioniert.
   ─────────────────────────────────────────────────────────── */
.iphone-mockup {
  position: relative;
  flex-shrink: 1;               /* darf bei sehr kleinen Viewports schrumpfen */
}

/* PNG treibt die Containergröße (in-flow, kein absolute).
   max-height hält es in den verfügbaren Viewport-Bereich. */
.iphone-frame {
  display: block;
  height: auto;
  width: auto;
  max-height: calc(100vh - 210px); /* 80px header + 88px footer-pad + 22px gap + ~20px mute */
  max-width: 90vw;
  position: relative;           /* in-flow → gibt .iphone-mockup seine Abmessungen */
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Video wird exakt hinter den transparenten Screen-Ausschnitt gelegt.
   +0.9% Inset links/rechts kompensiert die abgerundeten Screen-Ecken im PNG. */
.iphone-screen {
  position: absolute;
  top: 12.12%;                  /* Oberkante des Screen-Ausschnitts im PNG */
  left: 0.9%;
  width: 98.2%;
  height: 75.9%;                /* Höhe des Screen-Ausschnitts + 0.2% Puffer gegen 1px-Lücke */
  object-fit: cover;
  z-index: 1;
  display: block;
}

/* ENTER button: overlaid near bottom of iPhone screen area
   Screen ends at ~87.81% from top → bottom: 14% setzt Button
   sicher oberhalb des Home-Indicator-Bereichs (12.19%) */
.splash-enter {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  padding: 14px 40px;
  transition: background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
  cursor: none;
}
.splash-enter:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

/* Mobile icon controls — hidden on desktop, shown below iPhone on mobile */
.splash-mobile-controls {
  display: none;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.splash-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s, color 0.2s, border-color var(--transition);
}
.splash-icon-btn svg { width: 15px; height: 15px; display: block; }
.splash-icon-btn:hover {
  background: var(--text);
  color: var(--bg);
}

/* Sound button: static, centered below video */
.splash-mute {
  position: static;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none; border: none;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.2s;
  cursor: none;
}
.splash-mute:hover { color: var(--text); }

/* Sound icon button — footer-right on splash page (desktop/tablet) */
.btn-sound-splash {
  display: none; /* hidden by default; shown via splash-page + min-width rule */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background 0.2s, color 0.2s, border-color var(--transition);
}
.btn-sound-splash svg { width: 15px; height: 15px; display: block; }
.btn-sound-splash:hover { background: var(--text); color: var(--bg); }

/* Splash page global overrides */
body.splash-page .btn-lang    { display: none; }
body.splash-page .splash-mute { display: none; }

/* Show sound icon button on desktop + tablet (≥ 769 px) */
@media (min-width: 769px) {
  body.splash-page .btn-sound-splash { display: flex; }
}

/* Tablet only (769 – 900 px): iPhone 15% smaller + nach oben setzen */
@media (min-width: 769px) and (max-width: 900px) {
  body.splash-page .iphone-frame {
    max-height: calc((100vh - 210px) * 0.85);
  }
  body.splash-page .splash {
    justify-content: flex-start;
    padding-top: 0px;
  }
}

/* ── WORK PAGE V2 ──────────────────────────────────────────── */
/* Nativer Browser-Scroll — kein Fixed-Wrapper mehr */
.work-page {
  overflow-x: hidden;
}

.work-content {
  /* normaler Document-Flow */
}

/* Zentrierter Content-Container mit großzügigem Abstand */
.work-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 72px;
}

/* ── Intro text ─────────────────────────────────────────────── */
.work-intro {
  padding: 148px 0 60px;
  max-width: 820px;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.25s forwards;
}

.work-intro__text {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 38px);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--transition);
}

.work-intro__link {
  display: inline-block;
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.4;
  transition: opacity 0.2s ease, color var(--transition);
  cursor: none;
}
.work-intro__link:hover { opacity: 1; }

/* ── Filter bar ─────────────────────────────────────────────── */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 48px;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.45s forwards;
}

.work-filter__btn {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 6px 15px;
  border: 0.5px solid var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  opacity: 0.45;
  cursor: none;
  transition: opacity 0.2s,
              background 0.2s,
              color 0.2s,
              border-color var(--transition);
}
.work-filter__btn:hover { opacity: 0.8; }
.work-filter__btn.is-active {
  opacity: 1;
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* ── Gallery grid — Querformat 4:3 ─────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Project thumbnails ─────────────────────────────────────── */
.project-thumb {
  position: relative;
  aspect-ratio: 4 / 3;          /* Querformat */
  overflow: hidden;
  display: block;
  background: var(--bg);        /* Leerraum bei contain */
  transition: background var(--transition),
              opacity 0.72s ease,
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  /* lazy-load start state */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.72s ease,
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-thumb.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Filter: fade out → dann aus dem Flow nehmen */
.project-thumb.is-filtered {
  opacity: 0 !important;
  transform: scale(0.97) !important;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}
.project-thumb.is-gone { display: none; }

.project-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;          /* vollständig sichtbar, kein Crop */
  display: block;
  transition: transform 0.85s var(--ease-out);
}
.project-thumb:hover img { transform: scale(1.03); }

/* Hover overlay — kein Abdunkeln, Titel mittig */
.project-thumb-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;          /* horizontal zentriert */
  justify-content: flex-end;   /* unten */
  padding: 0 24px 24px;
  opacity: 0;
  text-align: center;
  transition: opacity 0.32s ease;
}
.project-thumb:hover .project-thumb-overlay { opacity: 1; }

.project-thumb-name {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.project-thumb-category {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 5px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* Page-Footer im Container */
.work-container .page-footer {
  margin-top: 72px;
}

/* ── PROJECT PAGE ──────────────────────────────────────────── */
.project-page { padding: 100px 36px 100px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
  margin-bottom: 48px;
  animation: fadeUp 0.5s ease 0.2s forwards;
  cursor: none;
}
.back-link:hover { opacity: 0.9 !important; }

.project-hero {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.3s forwards;
  display: block;
}

.project-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 24px 0;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.5s forwards;
  transition: border-color var(--transition);
}
.meta-block { padding-right: 24px; }
.meta-block:last-child { padding-right: 0; }
.meta-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.meta-val { font-size: 12px; line-height: 1.7; }

.project-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  margin-bottom: 64px;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.7s forwards;
}
.project-desc { font-size: 13.5px; line-height: 1.9; }

.project-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.9s forwards;
}
.project-images img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

/* Horizontal gallery (optional, for photo-scroll layout) */
.project-gallery-wrap {
  padding: 60px 0;
  overflow: hidden;
}
.project-gallery-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: ew-resize;
  padding: 0 36px;
}
.project-gallery-track::-webkit-scrollbar { display: none; }
.project-gallery-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 70vh;
}
.project-gallery-item img { height: 100%; width: auto; object-fit: cover; display: block; }

/* ── GLOBAL FOOTER (non-sticky, page bottom) ───────────────── */
.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 36px 40px;
  border-top: 0.5px solid var(--border);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color var(--transition), color var(--transition);
}
.page-footer a {
  color: var(--muted);
  transition: color 0.2s;
  cursor: none;
}
.page-footer a:hover { color: var(--text); }

.footer-sep {
  display: none;   /* ausgeblendet — gap-Wert erzeugt gleichmäßigen Abstand */
}

/* Social icon links */
.footer-icon {
  display: flex;
  align-items: center;
  color: var(--muted);
  transition: color 0.2s;
  cursor: none;
}
.footer-icon:hover { color: var(--text); }
.footer-icon svg  { width: 13px; height: 13px; display: block; }

/* ── LEGAL PAGES ───────────────────────────────────────────── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 140px 36px 120px;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.3s forwards;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 48px;
  letter-spacing: 0.02em;
}
.legal-page h2 {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 32px 0 12px;
  color: var(--muted);
  transition: color var(--transition);
  font-weight: 300;
}
.legal-page p, .legal-page a {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text);
  transition: color var(--transition);
}
.legal-page a { border-bottom: 0.5px solid var(--border); }
.legal-page a:hover { opacity: 0.7; }

/* ── PROJECT PAGE V2 — Horizontal Gallery + Drawer ─────────── */

body.project-page-v2 { overflow: hidden; }

/* Full-screen gallery stage */
.proj-stage {
  position:   fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow:   hidden;
  z-index:    0;
  background: var(--bg);
  transition: background var(--transition);
}

/* Horizontal image track */
.proj-track {
  display: flex;
  height: 100%;
  will-change: transform;
  align-items: center;
}

/* Individual image items */
.proj-item {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.proj-item + .proj-item { margin-left: 3px; }

/* Play-Button Overlay — YouTube-Link-Items */
.proj-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity var(--transition);
  color: #fff;
}
.proj-item:hover .proj-item__play { opacity: 0.95; }
.proj-item--yt img { transition: filter var(--transition); }
.proj-item--yt:hover img { filter: brightness(0.75); }

.proj-item img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.proj-item video {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
  user-select: none;
}

/* Sound Toggle — fixed, above drawer bar (72px), visible only when video is active */
.proj-sound-btn {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  z-index: 200;
  transition: background 0.2s, opacity 0.2s;
  padding: 0;
}
.proj-sound-btn:hover { background: rgba(0, 0, 0, 0.65); }
.proj-sound-btn[hidden] { display: none; }
.proj-sound-btn svg { width: 14px; height: 14px; display: block; }

/* Video thumbnail placeholder in drawer */
.proj-thumb-video {
  height: 100%;
  aspect-ratio: 4 / 5;   /* matches 720×900 portrait video */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 30, 32, 0.06);
  overflow: hidden;
}
body.inverted .proj-thumb-video { background: rgba(250, 249, 245, 0.08); }
.proj-thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-thumb-video svg { width: 16px; height: 16px; color: var(--text); opacity: 0.45; }

/* Project title overlay — bottom-left above drawer */
.proj-title {
  position: fixed;
  left: 36px;
  bottom: calc(72px + 28px);
  z-index: 980;
  pointer-events: none;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.0s forwards;
  transition: opacity 0.3s ease;
}
.proj-title.drawer-open { opacity: 0 !important; }
.proj-title__name {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  display: block;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.proj-title__cat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-top: 3px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ── Bottom Drawer ───────────────────────────────────────────── */
.proj-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 990;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
  /* collapsed: only 72px bar visible */
  transform: translateY(calc(100% - 72px));
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--transition),
              border-color var(--transition);
}
.proj-drawer.is-open { transform: translateY(0); }

/* Bar — always visible */
.proj-drawer__bar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  position: relative;
}

/* Left / right clusters inside bar */
.proj-bar__left,
.proj-bar__right {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
}
.proj-bar__left  { left: 36px; }
.proj-bar__right { right: 36px; }

/* Separator dots */
.proj-bar__sep {
  font-size: 9px;
  color: var(--border);
  pointer-events: none;
  transition: color var(--transition);
}

/* Back link */
.proj-back {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  transition: opacity 0.2s, color var(--transition);
}
.proj-back:hover { opacity: 0.55; }

/* Image counter */
.proj-counter {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color var(--transition);
  pointer-events: none;
}

/* Lang + Invert buttons — compact in bar (no circle border) */
body.project-page-v2 .btn-lang,
body.project-page-v2 .btn-invert {
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  padding: 0;
  color: var(--text);
  transition: opacity 0.2s, color var(--transition);
}
body.project-page-v2 .btn-invert { font-size: 12px; }
body.project-page-v2 .btn-lang:hover,
body.project-page-v2 .btn-invert:hover {
  background: none;
  color: var(--text);
  opacity: 0.55;
}

/* Clock + contact in bar — same size as other bar elements */
body.project-page-v2 .clock {
  font-size: 10px;
  letter-spacing: 0.12em;
}
body.project-page-v2 .contact-link {
  font-size: 10px;
  letter-spacing: 0.10em;
  opacity: 0.55;
  pointer-events: all;
}
body.project-page-v2 .contact-link:hover { opacity: 1; }

/* On-photo: bar elements turn white when over gallery */
body.project-page-v2 .logo.on-photo,
body.project-page-v2 .main-nav.on-photo a { color: #fff; }
body.project-page-v2 .main-nav.on-photo a::after { background: #fff; }

/* Work Gallery: on-photo deaktiviert — Logo + Nav bleiben stets in var(--text) */
body.work-gallery .logo.on-photo,
body.work-gallery .main-nav.on-photo a         { color: var(--text) !important; }
body.work-gallery .main-nav.on-photo a::after  { background: var(--text) !important; }
body.work-gallery .main-nav.on-photo a.active  { border-bottom-color: var(--text) !important; }

/* Information toggle */
.proj-toggle {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: none;
  border: none;
  cursor: none;
  padding: 10px 20px;
  transition: opacity 0.2s, color var(--transition);
  position: relative;
  z-index: 1;
}
.proj-toggle:hover { opacity: 0.55; }
.proj-toggle::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 20px; right: 20px;
  height: 0.5px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease, background var(--transition);
}
.proj-drawer.is-open .proj-toggle::after { transform: scaleX(1); }

/* Expanded panel — 3 items: info (A), thumbs (B), footer (C)
   Desktop: A top-left · B right (spans 2 rows) · C bottom-left
   Mobile:  A → B → C (flex column via order)                    */
.proj-drawer__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "info  thumbs"
    "footer thumbs";
  border-top: 0.5px solid var(--border);
  transition: border-color var(--transition);
  max-height: 42vh;
}

/* A: meta + description */
.proj-drawer__info {
  grid-area: info;
  padding: 32px 40px 24px 36px;
  border-right: 0.5px solid var(--border);
  transition: border-color var(--transition);
  overflow-y: auto;
  scrollbar-width: none;
}
.proj-drawer__info::-webkit-scrollbar { display: none; }

/* Meta grid */
.proj-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 0.5px solid var(--border);
  transition: border-color var(--transition);
}
.proj-meta-item { padding-right: 16px; }
.proj-meta-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.proj-meta-val {
  font-size: 11.5px;
  line-height: 1.8;
  display: block;
}

.proj-desc {
  font-size:   11.5px;
  line-height: 1.85;
  font-weight: 300;
}
.proj-desc p         { margin: 0; }
.proj-desc p + p     { margin-top: 1.5em; }
.proj-desc a {
  color:                 var(--text);
  text-decoration:       underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition:            text-decoration-color 0.2s;
}
.proj-desc a:hover { text-decoration-color: var(--text); }

/* Client logo in meta */
.proj-client-logo {
  height: 14px;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
  transition: filter var(--transition);
}
/* Invert logo on dark mode so it stays visible */
body.inverted .proj-client-logo { filter: invert(1); }

/* C: Footer links — desktop: bottom-left, same left border as info */
.proj-drawer__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px 24px 36px;
  border-right: 0.5px solid var(--border);
  transition: border-color var(--transition);
}
.proj-drawer__footer a {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.proj-drawer__footer a:hover { color: var(--text); }
.proj-drawer__footer .footer-sep { display: none; }
.proj-drawer__footer .footer-icon {
  display: flex;
  align-items: center;
  letter-spacing: 0;
}
.proj-drawer__footer .footer-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* B: thumbnails */
.proj-drawer__thumbs {
  grid-area: thumbs;
  padding: 32px 36px 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.proj-thumbs-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition);
}

.proj-thumbs-wrap {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  align-items: flex-start;
}
.proj-thumbs-wrap::-webkit-scrollbar { display: none; }

.proj-thumb {
  flex-shrink: 0;
  height: 100%;
  max-height: 110px;
  cursor: none;
  opacity: 0.35;
  transition: opacity 0.25s;
}
.proj-thumb.is-active,
.proj-thumb:hover { opacity: 1; }
.proj-thumb img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
}

/* Responsive — mobile */
@media (max-width: 900px) {

  /* Panel: switch from grid to flex column, reorder A → B → C */
  .proj-drawer__panel {
    display: flex;
    flex-direction: column;
    max-height: 55vh;
    overflow-y: auto;
  }
  .proj-drawer__info   { order: 1; border-right: none; padding: 24px 20px 20px; }
  .proj-drawer__thumbs {
    order: 2;
    border-top: 0.5px solid var(--border);
    padding: 16px 20px;
    /* Override desktop overflow:hidden — let the wrap scroll freely */
    overflow: visible;
    height: auto;
    max-height: none;
    flex-shrink: 0;
  }
  /* Explicit px height for thumbs on mobile (100% doesn't resolve in this context) */
  .proj-thumb            { height: 72px; max-height: none; width: auto; flex-shrink: 0; }
  .proj-thumb img        { height: 100%; width: auto; }
  .proj-drawer__footer { order: 3; border-right: none; border-top: 0.5px solid var(--border); padding: 16px 20px 20px; flex-wrap: wrap; gap: 12px; }

  /* Meta: Client + Year gleich breit, Scope bekommt mehr Raum für längere Texte */
  .proj-meta { grid-template-columns: 1fr 1fr 2fr; }
  .proj-meta-item:last-child { grid-column: auto; }
  /* Year-Spalte: dezenter Abstand nach links von CLIENT */
  .proj-meta-item:nth-child(2) { padding-left: 10px; }

  /* Title offset */
  .proj-title { left: 20px; }

  /* Bar: tighter padding, hide clock (back + INFORMATION + counter/DE/◐ remain) */
  .proj-drawer__bar { padding: 0 20px; }
  .proj-bar__left  { left: 20px; gap: 8px; }
  .proj-bar__right { right: 20px; gap: 8px; }
  body.project-page-v2 .clock { display: none; }
  .proj-bar__left .proj-bar__sep:last-of-type { display: none; } /* sep before hidden clock */

}

/* ── Cookie Banner ─────────────────────────────────────────── */
/* Inverted relative to page: dark on white bg, light on dark bg */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9500;
  background: var(--text);
  color: var(--bg);
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--transition),
              color var(--transition);
}
.cookie-banner.is-visible  { transform: translateY(0); }
.cookie-banner.is-hidden   { transform: translateY(100%); }

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 36px;
}

.cookie-banner__text {
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  white-space: nowrap; /* no line break on desktop */
}

.cookie-link {
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: none;
}
.cookie-link:hover { opacity: 0.7; }

.cookie-banner__btns {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border-radius: 0;
  white-space: nowrap;
}

/* Both buttons identical: ghost style */
.cookie-btn--accept,
.cookie-btn--decline {
  background: transparent;
  color: var(--bg);
  border: 1px solid rgba(250, 249, 245, 0.4);
}
body.inverted .cookie-btn--accept,
body.inverted .cookie-btn--decline {
  border-color: rgba(29, 30, 32, 0.4);
}
.cookie-btn--accept:hover,
.cookie-btn--decline:hover {
  border-color: var(--bg);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cookie-banner__inner { flex-direction: column; align-items: center; gap: 16px; padding: 20px 20px 24px; }
  .cookie-banner__text  { white-space: normal; }
  .cookie-banner__btns  { justify-content: center; }
  .splash { padding: 74px 20px 80px; }
  .iphone-frame { max-height: calc(100vh - 190px); max-width: 72vw; }
  .page-footer { padding: 32px 20px 110px; gap: 16px; }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-photo {
    position: relative;
    height: 65vh;
  }
  .about-content {
    padding: 48px 24px 100px;
    min-height: auto;
  }
  .collab-logos { gap: 20px 28px; }
  .collab-logos .collab-logo:nth-child(1) svg { height: 16px; }
  .collab-logos .collab-logo:nth-child(2) svg { height: 27px; }
  .collab-logos .collab-logo:nth-child(3) svg { height: 20px; }
  .collab-logos .collab-logo:nth-child(4) svg { height: 16px; }
  .collab-logos .collab-logo:nth-child(5) svg { height: 26px; }
  .collab-logos .collab-logo:nth-child(6) svg { height: 20px; }
  .info-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .project-meta-row {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .project-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .project-images { grid-template-columns: 1fr; }
  .site-header { padding: 20px; }
  .site-footer  { padding: 0 20px 20px; }
  .project-page { padding: 90px 20px 90px; }
  .page-footer  { padding: 32px 20px; }
}

/* ── Work Page Mobile: on-photo-Wechsel deaktivieren ───────── */
/* Auf kleinen Bildschirmen liegt der Header ständig über Bildern —
   on-photo-Farbwechsel zu Weiß wird daher nur auf der Work-Page
   für Mobile deaktiviert. */
@media (max-width: 900px) {
  body.work-page .logo.on-photo                          { color: var(--text) !important; }
  body.work-page .main-nav.on-photo a                   { color: var(--text) !important; }
  body.work-page .main-nav.on-photo a.active            { border-bottom-color: var(--text) !important; }
  body.work-page .footer-left.on-photo .clock           { color: var(--muted) !important; }
  body.work-page .footer-left.on-photo .contact-link   { color: var(--text) !important; opacity: 0.6 !important; }
  body.work-page .footer-right.on-photo .btn-lang,
  body.work-page .footer-right.on-photo .btn-invert    { color: var(--text) !important; border-color: var(--border) !important; }
  body.work-page .footer-right.on-photo .btn-lang:hover,
  body.work-page .footer-right.on-photo .btn-invert:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
  }
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .work-container { padding: 0 48px; }
  .work-grid { gap: 12px; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .work-container { padding: 0 20px; }
  .work-intro     { padding: 112px 0 36px; }
  .work-filter    { padding: 0 0 28px; gap: 5px; }
  .work-intro__text { font-size: clamp(19px, 5.5vw, 26px); }
  /* Single column, 4:3 Querformat bleibt auch auf Mobile */
  .work-grid      { grid-template-columns: 1fr; gap: 8px; }
  .work-container .page-footer { margin-top: 48px; }
}

/* ── Splash Mobile Layout ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Clock und Contact ausblenden */
  body.splash-page .clock        { display: none; }
  body.splash-page .contact-link { display: none; }
  /* Original Inverter im Footer ausblenden (sitzt jetzt unter iPhone) */
  body.splash-page .btn-invert { display: none; }
  /* Icon Controls einblenden, engeres Gap */
  body.splash-page .splash-mobile-controls { display: flex; gap: 8px; }
  /* iPhone + Controls etwas nach unten verschieben */
  body.splash-page .splash {
    padding-top: 100px;
    padding-bottom: 60px;
    justify-content: center;
    gap: 28px;
  }
  body.splash-page .iphone-frame {
    max-height: calc(100vh - 260px); /* +30px Puffer gegen Safari-iOS Clipping (overflow-x:hidden) */
  }
}

@media (max-width: 560px) {
  .about-headline { font-size: 26px; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-col  { border-right: none; }
  .info-col:nth-child(3) { display: none; }
  .main-nav  { gap: 20px; }
  .btn-lang, .btn-invert { width: 38px; height: 38px; }
  #cursor { display: none; }
}

/* About — Tablet Landscape: Languages ausblenden, 2-Spalter PERSONAL + EDUCATION */
@media (min-width: 901px) and (max-width: 1180px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
  .info-col:nth-child(3) { display: none; }
  .info-col:nth-child(2) { border-right: none; padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════
   WORK GALLERY PAGE  (body.work-gallery)
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop-Track: 36px links = Logo-Alignment; Roberto (Item 1) sitzt
   dadurch automatisch auf der horizontalen Mittelachse beim ersten Laden ── */
body.work-gallery .proj-track {
  padding-left: 36px;
}

/* ── Work-Items: <a>-Links, 3:4-Hochformat via CSS ─────────── */
body.work-gallery .proj-item {
  cursor:        none;
  text-decoration: none;
  display:       block;
  aspect-ratio:  3 / 4;   /* Breite = Höhe × ¾ — sofort, ohne Bilder-Load */
  /* Höhe responsiv: 3 Items + 2×3px Gap passen exakt zwischen die 36px-Seitenmargen.
     Formula: (100vw − 2×36px Margin − 2×3px Gap) / 3 Items × 4/3 Aspect-Ratio
     = (100vw − 78px) × 4 / 9                                                    */
  height: calc((100vw - 78px) * 4 / 9);
}
body.work-gallery .proj-item img {
  width:            100%;
  height:           100%;
  object-fit:       contain;    /* Querformat-Bilder ohne Crop einpassen */
  background:       var(--bg);
  transition:       background var(--transition);
}

/* ── Direktionaler Cursor  ← / →  (nur auf dem Gallery-Stage) ─ */
body.work-gallery .cursor.cursor-directional {
  background:     transparent;
  border-radius:  0;
  width:          auto;
  height:         auto;
  font-family:    var(--font-body);
  font-size:      16px;
  font-weight:    300;
  letter-spacing: 0;
  color:          #fff;
  mix-blend-mode: difference;
  line-height:    1;
  transition:     none;
}
body.work-gallery .cursor.cursor-directional.hover {
  width: auto; height: auto;
}

/* ── Aktiver Projekttitel — zentriert, dauerhaft sichtbar ───── */
.work-active-title {
  position:       fixed;
  left:           0;
  right:          0;
  bottom:         calc(72px + 28px);
  text-align:     center;
  z-index:        975;
  pointer-events: none;
  opacity:        0;
  animation:      fadeUp 0.6s ease 1.1s forwards;
  transition:     opacity 0.15s ease;
}
.work-active-title.drawer-open { opacity: 0 !important; }
.work-active-title.title-fade  { opacity: 0; }

/* Work-Titel: kein Text-Schatten, Farbe folgt var(--text) — kein always-white */
.work-active-title .proj-title__name {
  color:       var(--text);
  text-shadow: none;
}
.work-active-title .proj-title__cat {
  color:       var(--text);
  opacity:     0.55;
  text-shadow: none;
}

/* ── INDEX-Toggle-Wrap (Desktop: nur Button; Mobile: Uhr + Button) */
.work-toggle-wrap {
  display:     flex;
  align-items: center;
  gap:         0;
}
.work-clock-mobile { display: none; }  /* Desktop: unsichtbar */

/* ── Intro-Text im INDEX-Drawer (NUR Desktop sichtbar) ─────── */
.work-drawer-intro {
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.03em;
  line-height:    1.65;
  color:          var(--text);
  opacity:        0.7;
  margin-bottom:  20px;
  max-width:      360px;
}
.work-drawer-intro__link {
  display:         inline-block;
  font-size:       10px;
  font-weight:     300;
  letter-spacing:  0.13em;
  text-transform:  uppercase;
  color:           var(--text);
  opacity:         0.5;
  transition:      opacity 0.2s ease;
  text-decoration: none;
}
.work-drawer-intro__link:hover { opacity: 1; }

/* ── Work Item Title Overlay (per Item, Mobile + Tablet) ────── */
.work-item-title {
  display:    none;
  text-align: center;
  padding:    10px 0 4px;
}

/* ══════════════════════════════════════════════════════════════
   WORK GALLERY — MOBILE (≤ 900 px): vertikaler Einzel-Scroller
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Body: normaler vertikaler Scroll statt overflow:hidden */
  body.project-page-v2.work-gallery {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Stage: aus dem Fixed-Flow nehmen */
  body.work-gallery .proj-stage {
    position: relative;
    width:    100%;
    height:   auto;
    overflow: visible;
  }

  /* Track: Spalte statt Zeile, kein JS-Transform */
  body.work-gallery .proj-track {
    flex-direction:  column;
    height:          auto;
    will-change:     auto;
    transform:       none !important;
    align-items:     stretch;
    gap:             2px;
    padding-top:     64px;
    padding-bottom:  80px;
    padding-left:    0;    /* Desktop-padding-left: 36px zurücksetzen */
  }

  /* Klone unsichtbar machen */
  body.work-gallery .proj-item--clone { display: none; }

  /* Jedes Item: volle Breite, 3:4 Container — hält transparenten Rand in Schach */
  body.work-gallery .proj-item {
    height:       auto;
    width:        100%;
    aspect-ratio: 3 / 4;
  }
  body.work-gallery .proj-item img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
    background: var(--bg);
  }

  /* Titeltext: var(--text) statt Weiß — reagiert auf Inverter-Switch */
  .work-item-title .proj-title__name {
    color:       var(--text);
    text-shadow: none;
  }
  .work-item-title .proj-title__cat {
    color:       var(--text);
    opacity:     0.55;
    text-shadow: none;
  }

  /* Titel und Zähler auf Mobile ausblenden */
  .work-active-title           { display: none; }
  body.work-gallery #proj-counter { display: none; }

  /* ── Berliner Uhr linksbündig (absolut), INDEX bleibt zentriert ── */
  .work-clock-mobile {
    display:        block;
    position:       absolute;
    left:           20px;
    font-family:    var(--font-body);
    font-size:      9px;
    font-weight:    300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text);
    opacity:        0.55;
    white-space:    nowrap;
    transition:     color var(--transition);
  }
  /* Desktop-Uhr im linken Bar-Bereich ausblenden */
  body.work-gallery .proj-bar__left .clock { display: none; }

  /* ── on-photo deaktivieren (Header liegt stets über Fotos) ── */
  body.work-gallery .logo.on-photo                  { color: var(--text) !important; }
  body.work-gallery .main-nav.on-photo a            { color: var(--text) !important; }
  body.work-gallery .main-nav.on-photo a.active     { border-bottom-color: var(--text) !important; }

  /* ── Intro-Panel ausblenden — MORE PROJECTS füllt den Drawer */
  body.work-gallery .work-intro-panel { display: none; }

  /* ── Drawer-Panel: Block-Layout statt 2-Spalten-Grid ──────── */
  body.work-gallery .proj-drawer__panel {
    display:     block;
  }
  body.work-gallery .proj-drawer__thumbs {
    width:      100%;
    overflow-y: auto;
    max-height: calc(52vh - 72px);
  }

  /* ── 3-Spalten Thumbnail-Grid ───────────────────────────── */
  body.work-gallery .proj-thumbs-wrap {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2px;
  }
  body.work-gallery .proj-thumb {
    aspect-ratio: 3 / 4;
    overflow:     hidden;
    background:   var(--bg);
  }
  body.work-gallery .proj-thumb img {
    width:      100%;
    height:     100%;
    object-fit: contain;   /* kein Crop — Querformate vollständig sichtbar */
  }

  /* Drawer: mehr Höhe für Thumbnail-Grid */
  body.work-gallery .proj-drawer.is-open {
    max-height: 65vh;
  }

  /* Titel-Overlay pro Item — position: absolute ankert den Titel immer
     am unteren Container-Rand, unabhängig von Portrait oder Landscape.
     Kein negativer margin-top nötig, kein separater Landscape-Override. */
  .work-item-title {
    display:    block;
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    8px 16px 14px;
    margin-top: 0;
  }
}

/* Mobile + Tablet Portrait: Drawer-Thumbnails kompakter (mehr pro Reihe) */
@media (max-width: 1180px) and (orientation: portrait) {
  body.work-gallery .proj-thumbs-wrap {
    grid-template-columns: repeat(5, 1fr);
    gap:                   1px;
  }
}

/* Tablet Portrait (601–1180 px): Einzug + Thumbnail-Grid */
@media (min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  body.work-gallery .proj-track {
    padding-left:  18%;
    padding-right: 18%;
  }
  body.work-gallery .proj-thumbs-wrap {
    gap: 0;
  }
  /* Titel: leicht mehr Abstand zum Container-Rand auf größeren Screens */
  .work-item-title {
    padding-bottom: 18px !important;
  }
}

/* Tablet — Imprint & Data Policy: main min-height schiebt page-footer unter den Viewport */
@media (min-width: 601px) and (max-width: 1024px) {
  body.page-imprint .legal-page,
  body.page-data-policy .legal-page { min-height: 100vh; }
}

/* Tablet — Work Drawer: Grid aktivieren + Abstände reduzieren */
@media (min-width: 601px) and (max-width: 1024px) {
  body.work-gallery .proj-drawer__thumbs { padding: 8px 16px 12px; }
  body.work-gallery .proj-thumbs-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
  }
  body.work-gallery .proj-thumb {
    aspect-ratio: 3 / 4;
    height: auto;
    width: auto;
  }
}