/* =========================================================
   Tokens
   ========================================================= */
:root {
  --bg: #000;
  --fg: #EEE7D7;               /* Schriftfarbe */
  --hover: #4164ff;            /* Hover-Farbe */
  --ph: #141414;               /* image placeholder */
  --serif: 'Baskerville', 'Libre Baskerville', 'Baskerville Old Face', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.455, .03, .515, .955);   /* easeInOutQuad */
  --fs-caps: 11px;             /* Helvetica, Titel – gross, fett (≈ 8pt) */
  --fs-txt: 14px;              /* Baskerville, Texte – klein (≈ 10pt) */
  --cols: 5;                   /* Seitenraster */
  --mg: 16px;                  /* page margin, fluid 16 → 20px */
  --rg: 40px;                  /* grid row gap, fluid 40 → 80px */
  --top: 16px;                 /* nav top padding */
  --row: calc(var(--fs-caps) * 1.3 + 6px);
}
@media (min-width: 390px) {
  :root {
    --mg: calc(16px + 4 * (100vw - 390px) / 1530);
    --rg: calc(40px + 40 * (100vw - 390px) / 1530);
  }
}
@media (max-width: 768px) { :root { --fs-caps: 12px; --fs-txt: 15px; } }

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); }
body {
  margin: 0;
  min-width: 360px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-caps);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
p, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
img { display: block; -webkit-user-drag: none; user-select: none; }
::selection { background: var(--hover); color: var(--fg); }
.content, .zoom, .flyer { user-select: none; -webkit-user-select: none; }

/* Typo-Rollen */
.caps { font-family: var(--sans); font-size: var(--fs-caps); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.txt  { font-family: var(--serif); font-size: var(--fs-txt); font-weight: 400; letter-spacing: 0; text-transform: lowercase; line-height: 1.4; }

/* Project meta (title) */
.meta { white-space: nowrap; }
.meta__client { margin-left: 7px; opacity: .4; }

/* Images: frame has the image's own ratio, fade in once loaded */
.frame { position: relative; background: var(--ph); overflow: hidden; }
.frame img, .fly img, .zoom__item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.frame img { opacity: 0; transition: opacity .5s; }
.frame img.loaded { opacity: 1; }
.frame.is-loaded, .fly.is-loaded, .zoom__item.is-loaded { background: transparent; }

/* =========================================================
   Preloader
   ========================================================= */
#preloader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
}
#preloader p { display: flex; align-items: baseline; gap: 2.5em; white-space: nowrap; }
#preloader.is-out { opacity: 0; transition: opacity .5s ease-in .2s; pointer-events: none; }
@media (max-width: 768px) { #preloader { display: none; } }

/* =========================================================
   Nav (difference-blended over everything)
   ========================================================= */
.nav {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
  color: var(--fg); mix-blend-mode: difference;
  opacity: 0;
}
.nav__top, .nav__bottom {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--mg); padding: 0 var(--mg);
}
.nav__top { padding-top: max(var(--top), env(safe-area-inset-top)); padding-bottom: 15px; }
.nav__bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.nav p { white-space: nowrap; }

.nav__left { grid-column: 1 / 2; grid-row: 1; display: flex; overflow: hidden; padding-bottom: 3px; }
body.zoom-open .nav__left { grid-column: 1 / 5; overflow: visible; }
.nav__title { grid-column: 1 / 3; grid-row: 1; display: flex; justify-content: flex-end; }
.nav__right { grid-column: 5 / 6; grid-row: 1; display: flex; justify-content: flex-end; align-items: flex-start; }

.btn, .nav__label { pointer-events: auto; margin: -10px; padding: 10px; }
.nav__label { pointer-events: none; }
.nav__label p { transition: opacity .2s ease; }
.nav__title, .btn, .nav__label { transition: opacity .3s var(--ease), color .2s ease; }
.fade-out { opacity: 0 !important; pointer-events: none !important; }
@media (hover: hover) { .btn:hover { color: var(--hover); } }

/* Name → About; im About wird er zur Mailadresse */
.nav__name { position: relative; white-space: nowrap; }
.nav__sep { position: relative; white-space: pre; }
.nav__sep i { font-style: normal; transition: opacity .4s var(--ease); }
.nav__sep i:last-child { position: absolute; left: 0; top: 0; }
.nav__sep i:last-child { opacity: 0; }
.nav__mail {
  position: absolute; top: 9.5px; left: calc(100% - 10px + var(--mg));
  font-family: var(--serif); font-size: var(--fs-txt); font-weight: 400;
  letter-spacing: 0; text-transform: lowercase; line-height: 1;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
body.about-open .nav__sep i:first-child { opacity: 0; }
body.about-open .nav__sep i:last-child { opacity: 1; }
body.about-open .nav__mail { opacity: 1; transform: none; transition-delay: .15s; }

/* Icons: Schliessen ×, Projekte ||, Galerie # */
.icon { display: block; line-height: 0; }
.icon svg { width: 11px; height: 11px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; }

.nav__mobile-current { display: none; grid-column: 1 / -1; }

@media (max-width: 768px) {
  .nav__top, .nav__bottom { grid-template-columns: repeat(6, 1fr); }
  .nav__left { display: none; }
  body.zoom-open .nav__left:nth-child(2) { display: flex; grid-column: 1 / -1; }
  .nav__title { grid-column: 1 / 6; justify-content: flex-start; }
  .nav__mail { left: 100%; transform: none; margin-left: -10px; }
  .nav__right { grid-column: 6 / 7; }
  body[data-status="feed"] .nav__mobile-current { display: block; }
  body.zoom-open .nav__mobile-current { display: none; }
  body.zoom-open .nav__title { visibility: hidden; }
}

/* =========================================================
   Content
   ========================================================= */
.content { opacity: 0; }

/* ---- Index grid (all images), 5er-Raster ---- */
.index__grid {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--mg); row-gap: var(--rg);
  align-items: start;
  padding: calc(var(--rg) + 34px) var(--mg) 50vh;
}
@media (max-width: 1024px) { .index__grid { --cols: 4; } }
@media (max-width: 768px)  { .index__grid { --cols: 3; column-gap: 10px; row-gap: 24px; padding-bottom: 30vh; } }
/* Jede Zelle ist quadratisch, das Bild sitzt darin oben links */
.thumb { cursor: pointer; aspect-ratio: 1; display: flex; align-items: flex-start; justify-content: flex-start; }
.thumb .frame { background: transparent; max-width: 100%; max-height: 100%; }
.thumb .frame.is-land { width: 100%; }
.thumb .frame.is-port { height: 100%; }
.thumb.is-kbd .frame { outline: 1px solid var(--hover); outline-offset: 5px; }

/* ---- Feed: jedes Projekt = eine Bildschirmhöhe, einrastend ---- */
html:has(body[data-status="feed"]) { scroll-snap-type: y mandatory; }
.feed { display: flex; flex-direction: column; padding: 0; }
.feed__item {
  --h: 56vh; --w: min(calc(var(--r) * var(--h)), calc(100vw - 2 * var(--mg)));
  position: relative; width: 100%; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.feed__item.is-port { --h: 70vh; }
.feed__img { width: var(--w); cursor: pointer; }
@media (max-width: 768px) {
  .feed__item, .feed__item.is-port { --h: 62svh; --w: min(calc(var(--r) * var(--h)), calc(100vw - 6 * var(--mg))); }
}
/* Label oben bündig mit dem Bild */
.feed__label { position: absolute; left: 0; top: calc(50% - var(--w) / var(--r) / 2); }
.feed__label p { position: absolute; top: 0; left: 0; padding-left: var(--mg); transition: opacity .3s var(--ease); }
@media (max-width: 768px) { .feed__label { display: none; } }

body[data-status="index"] .feed { display: none; }
body[data-status="feed"] .index { display: none; }
.is-hidden { visibility: hidden !important; }

/* ---- Stacking title list (feed, desktop) ---- */
.titles, .titles-counter, .titles-ghost {
  position: fixed; top: var(--top); left: var(--mg); z-index: 20;
  color: var(--fg); mix-blend-mode: difference; white-space: nowrap;
}
.titles {
  display: flex; flex-direction: column; align-items: flex-start;
  max-height: calc(100dvh - var(--top) - var(--mg)); overflow-y: auto; scrollbar-width: none;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.titles::-webkit-scrollbar { display: none; }
.titles.is-entering, .titles.is-leaving { opacity: 0; }
.titles__item { padding: 0 0 6px; text-align: left; pointer-events: auto; transition: opacity .3s var(--ease), color .2s ease; }
.titles__item:hover, .titles__item.is-current { color: var(--hover); }
.titles__item.is-arriving { opacity: 0; }
.titles-counter {
  height: var(--row); padding-bottom: 6px; pointer-events: none; opacity: 0;
  transition: opacity .55s var(--ease), transform .3s var(--ease);
}
.titles-counter.is-visible { opacity: 1; }
.titles-counter.is-pushed { transform: translateY(calc(-100% - 15px)); }
.titles-ghost { top: 0; left: 0; z-index: 21; pointer-events: none; transition: transform .42s var(--ease); }
body.zoom-open .titles, body.zoom-open .titles-counter, body.about-open .titles { display: none !important; }
.nav__label--index { transition: opacity .55s var(--ease) !important; }
@media (max-width: 768px) { .titles, .titles-counter { display: none !important; } }

/* =========================================================
   FLIP layer
   ========================================================= */
.flyer { position: fixed; inset: 0; z-index: 5; pointer-events: none; visibility: hidden; }
.fly {
  position: absolute; top: 0; left: 0; transform-origin: top left;
  background: var(--ph); will-change: transform, opacity; backface-visibility: hidden;
}

/* =========================================================
   Zoom (fullscreen)
   ========================================================= */
.zoom { position: fixed; inset: 0; z-index: 10; visibility: hidden; pointer-events: none; overflow: hidden; }
.zoom.is-open { visibility: visible; pointer-events: auto; }
.zoom__bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; }
.zoom__inner { position: absolute; inset: 0; overflow: hidden; }
.zoom__item { position: absolute; top: 0; left: 0; transform-origin: top left; }
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom { cursor: none; } }
.zoom__cursor {
  position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
  color: var(--fg); mix-blend-mode: difference; white-space: nowrap;
  transform: translate(-50%, -50%); opacity: 0; display: none;
}
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom__cursor { display: block; } }

/* =========================================================
   About – ganzer Hintergrund schwarz
   Labels rechtsbündig bis Ende Spalte 2, Text ab Spalte 4
   ========================================================= */
.about {
  position: fixed; inset: 0; z-index: 15; overflow-y: auto; visibility: hidden; opacity: 0;
  background: var(--bg); scrollbar-width: none;
}
.about::-webkit-scrollbar { display: none; }
.about__hit { position: fixed; inset: 0; }
.about__inner {
  position: relative; pointer-events: none;
  display: flex; flex-direction: column; gap: 72px;
  padding: 300px var(--mg) 80px;   /* Abstand Name → erstes Label ≈ 3× */
}
.about__row {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--mg);
  align-items: baseline; pointer-events: auto;
}
.about__lbl { grid-column: 1 / 3; text-align: right; }
.about__val {
  grid-column: 4 / 6;
  font-family: var(--serif); font-size: var(--fs-txt); font-weight: 400;
  letter-spacing: 0; text-transform: lowercase; line-height: 1.4;
}
.about__entry + .about__entry { margin-top: 1.4em; }
.about__val a { transition: color .2s ease; }
.about__val a:hover { color: var(--hover); }
@media (max-width: 1024px) {
  .about__val { grid-column: 3 / 6; }
}
@media (max-width: 768px) {
  .about__inner { gap: 44px; padding-top: 210px; }
  /* Mobile: 3er-Raster wie die Galerie – Label auf eigener Zeile links,
     Text darunter eingerückt ab Spalte 2 (Skizze Sven) */
  .about__row { grid-template-columns: repeat(3, 1fr); column-gap: 10px; row-gap: 14px; }
  .about__lbl { grid-column: 1 / 4; grid-row: 1; text-align: left; }
  .about__val { grid-column: 2 / 4; grid-row: 2; }
}