/* Emmy Zimmermann — portfolio
   Cream canvas, floating photo collage, giant fixed name. */

:root {
  --bg: #ffffff;
  --ink: #161616;
  --ink-soft: #8a887f;
  --line: #d9d7cd;
  --accent: #FF7EC0;
  --hov: #FFFF50;      /* hover yellow (v5.4) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

body {
  background: var(--bg);
  background-image: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.hue { font-family: "Outfit", "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; }

/* Outfit 900 — SELF-HOSTED (no Google Fonts request: GDPR, LG München I 3 O 17493/20) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-ext-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* self-made outline cut of Outfit (generated from the original letterforms) */
@font-face {
  font-family: "Outfit Outline";
  src: url("../fonts/OutfitOutline.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

/* ---------- page fade ---------- */
#page { opacity: 0; }
body.ready #page { opacity: 1; transition: opacity .5s var(--ease); }
body.leaving #page { opacity: 0; transition: opacity .26s var(--ease); }
/* fixed chrome (title, arrow, floating buttons) leaves with the page —
   otherwise the OLD page title stays visible while the next page loads */
body.leaving .ptitle-fixed, body.leaving .pback, body.leaving .pbar-float, body.leaving .mclient {
  opacity: 0 !important;
  transition: opacity .2s var(--ease);
}

/* ---------- giant fixed name ---------- */
.bigname {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: clamp(34px, 4vw, 64px);
  letter-spacing: .005em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: var(--accent);
  text-align: center;
  line-height: 1;
}
/* "EMMY ZIMMERMANN" is the anchor: centered from the start.
   HI and I'M sit above it and only fade out. */
.bigname .nm { display: block; position: relative; visibility: hidden; }
/* hidden until JS sizes it — kills the small-filled flash on every path;
   revealed by fitName() or by the intro sequence */
/* outline copy sits on top (native Outfit Outline font), crossfaded via .outline */
.bigname .nm::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0; width: 100%;
  font-family: "Outfit Outline", sans-serif;
  color: var(--accent);
  opacity: 0;
}
.bigname .nm.anim::after { transition: opacity .8s var(--ease); }
.bigname .nm.outline { color: transparent; }
.bigname .nm.outline::after { opacity: 1; }
.bigname .hi {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;                      /* hidden by default: no flash on normal visits */
  transition: opacity .5s var(--ease);
}
/* intro: the three lines appear one after another (s1 → s2 → s3 via JS).
   NOTE: the name must hide INSTANTLY when .intro is set (no transition in
   that state), otherwise it visibly fades out on load. It only transitions
   when fading IN via .s3. */
body.intro .bigname .nm { opacity: 0; }
body.intro.s1 .bigname .hi1 { opacity: 1; }
body.intro.s2 .bigname .hi2 { opacity: 1; }
body.intro.s3 .bigname .nm { opacity: 1; transition: opacity .5s var(--ease); }
.bigname .hi1 { bottom: calc(100% + 1.8em); }
.bigname .hi2 { bottom: calc(100% + 0.4em); }

/* small MENU hint under the heart (home wall): appears when scrolling UP */
.menu-hint {
  position: fixed;
  top: 66px; left: 50%;   /* closer to the heart (v5.9) */
  transform: translateX(-50%);
  z-index: 59;
  font-size: clamp(9px, 1.1vw, 17px);   /* half the subpage title size */
  letter-spacing: .04em;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  will-change: transform;
}
.menu-hint.show { opacity: 1; pointer-events: auto; }
body.menu-open .menu-hint { opacity: 0; pointer-events: none; }

/* ---------- plus button / menu ---------- */
.plus {
  position: fixed;
  top: 6px; left: 50%;
  margin-left: -36px;
  z-index: 60;
  width: 72px; height: 72px;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  text-align: center;
  color: var(--accent);
}
.plus.travel { transition: top 1.2s var(--ease); }
.plus .ic {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 72px;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.plus .ic-heart img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin: 15px auto 0;
}
.plus .ic-x { opacity: 0; transform: rotate(-45deg); }
body.menu-open .plus .ic-heart { opacity: 0; transform: scale(.5); }
body.menu-open .plus .ic-x { opacity: 1; transform: rotate(45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg) var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;              /* menu itself scrolls when taller than screen */
  overscroll-behavior: contain;  /* don't scroll the page underneath */
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
body.menu-open .menu { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }   /* freeze the page behind the menu */
/* margin:auto = centered when it fits, top-aligned + scrollable when not
   (flex centering alone cuts off the top on small screens) */
.menu-inner { text-align: center; max-width: 1200px; padding: 96px 24px 56px; margin: auto; }
.menu-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 34px; }
.menu-nav a {
  font-size: clamp(34px, 5.6vw, 58px);
  letter-spacing: .01em;
  line-height: 1.18;
  transition: opacity .3s var(--ease);
  display: block;
  will-change: transform;
  backface-visibility: hidden;
}
.menu-nav a[data-nav="overview"] { color: var(--accent); }   /* pink at rest */
.menu-nav a:hover { color: var(--hov); }                     /* ALL three hover yellow */
.menu-emmy { width: 280px; margin: 0 auto 32px; }   /* a touch more air above the bio */
.menu-emmy img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.menu-bio {
  font-family: "Outfit", "Arial Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.5;                /* a bit more air so it doesn't look dense */
  letter-spacing: .01em;
  text-align: justify;
  max-width: 1150px;               /* measured: exactly 8 lines at 22px */
  margin: 0 auto 30px;
  color: var(--ink);
}
.menu-bio .loc { color: var(--accent); font-style: normal; }   /* "I'm based in Berlin." */

.menu-contact { display: flex; gap: 26px; justify-content: center; margin-bottom: 14px; font-size: 16px; }
/* film representation, centered under the contact line */
.menu-rep {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 30px;
  font-size: 12px;
}
.menu-rep span { text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.menu-rep a {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  will-change: transform;
}
.menu-contact a {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: opacity .3s var(--ease);
  will-change: transform;   /* magnetic hover */
}
.menu-clients {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 1150px;               /* two lines with the grown client list (v4.6) */
  margin: 0 auto 26px;
}
.menu-foot { font-size: 10px; color: var(--ink); display: flex; gap: 16px; justify-content: center; }

/* menu entrance stagger */
.menu [data-stag] { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.menu-open .menu [data-stag] { opacity: 1; transform: none; }
body.menu-open .menu [data-stag="2"] { transition-delay: .06s; }
body.menu-open .menu [data-stag="3"] { transition-delay: .12s; }
body.menu-open .menu [data-stag="4"] { transition-delay: .18s; }
body.menu-open .menu [data-stag="5"] { transition-delay: .24s; }

/* ---------- home collage ---------- */
.field { position: relative; z-index: 2; }
.lane { position: absolute; top: 0; }
.card {
  margin-bottom: var(--gap, 34vh);
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.card.in { opacity: 1; transform: none; }
.card a { display: block; overflow: hidden; }
.card img {
  background: #f0f0f0;
  min-height: 80px;
  object-fit: cover;    /* if min-height wins over the natural ratio: crop, never distort */
  transform: scale(1.001);
  transition: transform 1s var(--ease);
}
.card video {
  display: block;
  width: 100%;
  height: auto;
  background: #f0f0f0;
  min-height: 80px;
  aspect-ratio: 16 / 9;   /* fixed ratio: no squashing before metadata loads */
}
.card video.portrait { aspect-ratio: 9 / 16; }
/* film still overlay: covers the tile until the video actually plays */
.card .vstill {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  min-height: 0;
  transition: opacity .35s var(--ease);
}
.card .vstill.hide { opacity: 0; pointer-events: none; }
/* hover: magnetic drift handled in JS (EZ.magnetic) */

/* ---------- bottom-center view toggle ---------- */
.toggle {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 18px;
}
.toggle a, .toggle button {
  font-family: "Outfit", "Arial Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--ink);
  opacity: .3;
  transition: opacity .3s var(--ease);
}
.toggle .on { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.toggle a:hover, .toggle button:hover { opacity: 1; }

/* ---------- work: collage of project covers ---------- */
.workfield { position: relative; z-index: 2; padding: 12vh 0 20vh; }
.wproj {
  position: relative;
  margin: 0 auto 22vh;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.wproj.in { opacity: 1; transform: none; }
.wproj a { display: block; overflow: hidden; }
.wproj img { transform: scale(1.001); transition: transform 1s var(--ease); }
.wproj .cap {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.wproj .cap .n { color: var(--ink-soft); font-size: 10px; }

/* work: full-bleed photo background behind the list (v5.4) */
.wbg { position: fixed; inset: 0; z-index: 0; }
.wbg img { width: 100%; height: 100%; object-fit: cover; }
.wbg-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }

/* work: list view */
.worklist {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1200px;              /* same geometry as the menu bio */
  margin: 0 auto;
  padding: clamp(150px, 18vh, 220px) 24px 18vh;   /* clears the WORK title under the heart */
}
.worklist a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 1vh 0;
  font-size: clamp(24px, 4.2vw, 48px);
  letter-spacing: .01em;
  transition: opacity .3s var(--ease), padding-left .35s var(--ease);
}
.worklist a { color: #fff; }                 /* client projects white on the photo */
.worklist a .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #fff; }
.worklist a { will-change: transform; }   /* magnetic hover, like the menu items */
.worklist a.pf { color: var(--accent); }   /* the four portfolios — brand pink, no side note */
/* hover = lighter, like the menu nav (inverted since v4.1: the rest stays ink) */
.worklist a:hover { padding-left: 14px; color: var(--hov); }
.worklist a:hover .n { color: var(--hov); }
.peek {
  position: fixed;
  z-index: 15;
  width: 400px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.peek.show { opacity: 1; transform: scale(1); }

/* ---------- project page: loose masonry ----------
   Original ratios, tiles vary in width/alignment with small uneven gaps
   (v4.3 — Alex: "keine erzwungene Symmetrie, lockerer"). White frame
   around the wall, photos start below the title's landing spot. */
.masonry {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 1.4vw;              /* v5.3: columns keep a little air — no touching tiles */
  width: 86vw;
  margin: 0 auto;
  padding: clamp(170px, 24vh, 260px) 0 6vh;
}
.mcol { flex: 1 1 0; min-width: 0; }

/* extra strip under the wall: LOVESTORY set-apart tiles (slightly rotated),
   CHALLENGE solo film in double size */
.mextra { position: relative; z-index: 2; width: 86vw; margin: 0 auto; padding: 8vh 0 0; }
.mextra-row { display: flex; gap: 2.5vw; justify-content: center; align-items: center; }
.mextra-row .mtile { width: 23%; }
.mfilm-solo { width: 44vw; margin: 0 auto; }
@media (max-width: 640px) {
  .mextra-row { flex-wrap: wrap; gap: 4vw; }
  .mextra-row .mtile { width: 46%; }
  .mfilm-solo { width: 86vw; }
}
/* client note, bottom-left of the gallery wall */
.mclient {
  position: relative; z-index: 2;
  width: 86vw; margin: 6vh auto 0; padding-bottom: 10vh;
  font-family: "Outfit", "Arial Black", sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: 13px; letter-spacing: .04em;
  color: var(--ink);
}

/* films sit INSIDE the masonry as photo-sized tiles (v4.9) */
.mfilm { cursor: pointer; }
.mfilm video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #f0f0f0; }
.mfilm video.portrait { aspect-ratio: 9 / 16; }
.mfilm .vstill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.mfilm .vstill.hide { opacity: 0; pointer-events: none; }
.mtile {
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.mtile.in { opacity: 1; transform: none; }
.mtile:hover { z-index: 6; }   /* magnetic scale may overlap neighbours */
.mtile .minner { display: block; position: relative; will-change: transform; }   /* magnetic layer, separate from the reveal layer */
.mtile img { background: #f0f0f0; }

.projfield { position: relative; z-index: 2; padding: 16vh 0 22vh; }
/* page/category title: NO entry animation (v4.8) — sits small and pink
   under the heart immediately on WORK, FILM and every category page.
   The only intro animation left is the home page name intro. */
.ptitle-fixed {
  position: fixed;
  top: 82px; left: 50%;   /* closer to the heart (v5.0) */
  transform: translate(-50%, 0);
  z-index: 30;
  font-size: clamp(18px, 2.2vw, 34px);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: var(--accent);
}
/* back ARROW left of the title (WORK + category pages): thin, modern.
   Fades in after a little scrolling and then STAYS (v5.1). */
.pback {
  position: fixed;
  z-index: 30;
  color: var(--hov);       /* always visible, always yellow (v5.4) */
  will-change: transform;
}
.pback svg { display: block; width: 30px; height: 14px; }
.pimg {
  position: relative;
  margin: 0 auto 14vh;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.pimg.in { opacity: 1; transform: none; }
.pimg a { display: block; overflow: hidden; }
.pimg img { transform: scale(1.001); transition: transform 1s var(--ease); }
.pimg .cl { margin-top: 8px; font-size: 10.5px; color: var(--ink-soft); }

.pbar {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 18px;
}
.pbar a, .pbar button {
  font-family: "Outfit", "Arial Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 19px;
  color: var(--ink);   /* full ink — was opacity .3, unreadable on photos */
  transition: color .3s var(--ease);
}

.info-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg) var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.info-panel.show { opacity: 1; pointer-events: auto; }
.info-inner { max-width: 440px; padding: 30px; text-align: center; }
.info-inner h2 { font-family: "Outfit", "Arial Black", sans-serif; text-transform: uppercase; font-weight: 900; font-size: 30px; margin-bottom: 16px; }
.info-inner .x { margin-top: 28px; font-size: 12px; border-bottom: 1px solid var(--ink); }

/* ---------- focus viewer ---------- */
body.focus-page { overflow: hidden; }
.viewer { position: fixed; inset: 0; background: var(--bg) var(--paper); z-index: 48; }

/* focus viewer: thumbnail rail (like the reference) */
.vrail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 150px;
  padding: calc(50vh - 50px) 36px calc(50vh - 50px) 18px;
  overflow-y: auto;
  z-index: 54;
  scrollbar-width: none;
}
.vrail::-webkit-scrollbar { display: none; }
.vrail img {
  display: block;
  width: 76px;
  height: auto;
  margin: 0 0 14px;
  opacity: .45;
  cursor: pointer;
  transition: opacity .25s var(--ease);
  will-change: transform;
}
.vrail img:hover { opacity: .85; }
.vrail img.on { opacity: 1; }
.stage {
  position: absolute;
  inset: 90px 90px 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage img { position: absolute; max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; }
.vclose {
  position: fixed;
  top: 6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: 60;
  width: 72px; height: 72px;
  font-size: 60px; font-weight: 700;
  line-height: 72px;
  color: var(--accent);      /* matches the menu "+" / X */
  transition: opacity .3s var(--ease);
}
.vclose:hover { opacity: .5; }
.vclose .vx { display: block; width: 100%; height: 100%; will-change: transform; }
/* client caption under the photo, flush with its left edge (JS positions it) */
.vcaption {
  position: fixed;
  z-index: 55;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);   /* pink, like the client note in the galleries */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.vbottom {
  position: fixed;
  bottom: 20px; left: 0; right: 0;
  padding: 0 26px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft);
  z-index: 52;
}
.vzone { position: fixed; top: 76px; bottom: 66px; width: 46%; z-index: 51; }
.vzone.prev { left: 0; cursor: n-resize; }
.vzone.next { right: 0; cursor: s-resize; }

/* minimal up/down arrows right of the image */
.varrows {
  position: fixed;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 56;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.varrows button {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  padding: 8px;
  opacity: .35;
  transition: opacity .25s var(--ease);
}
.varrows button:hover { opacity: 1; }
#arrdown { transform: rotate(180deg); }

/* ---------- film page ---------- */
.filmfield { position: relative; z-index: 2; padding: clamp(150px, 20vh, 220px) 0 8vh; }   /* clears the FILM title under the heart */
/* floating BACK on film.html: appears after 25% scroll, scrolls to the top */
.pbar-float {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.pbar-float.show { opacity: 1; pointer-events: auto; }
.pbar-float button, .pbar-float a {
  font-family: "Outfit", "Arial Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 19px;
  color: var(--hov);       /* yellow like the back arrow (v5.5) */
  will-change: transform;
}
.fitem {
  display: flex;
  align-items: center;
  gap: 3.5vw;
  margin: 0 auto 14vh;   /* v4.6: a bit tighter between films */
  padding: 0 6vw;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.fitem.middle { justify-content: center; }   /* the DATEV group row (v5.5) */
.fitem.in { opacity: 1; transform: none; }
.fitem.right { flex-direction: row-reverse; }
.fvid { width: 46vw; flex: 0 0 auto; cursor: pointer; position: relative; }
.fitem.portrait .fvid { width: 26vw; }
.fvid video { display: block; width: 100%; height: auto; background: #f0f0f0; aspect-ratio: 16 / 9; }
.fitem.portrait .fvid video, .fvid-group .fvid video { aspect-ratio: 9 / 16; }
/* still image sits on top until the video actually plays (no gray flash) */
.fvid .fstill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.fvid.playing .fstill { opacity: 0; }
/* grouped films: side by side, a bit of air, gently staggered up/down.
   Stagger via margin (NOT transform — magnetic hover owns transform). */
.fvid-group { display: flex; gap: 1.5vw; flex: 0 0 auto; align-items: flex-start; }
.fvid-group .fvid { width: 13.9vw; }
.fvid-group .fvid:nth-child(even) { margin-top: 2.2vw; }
.finfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fitem.right .finfo { text-align: right; align-items: flex-end; }
.finfo .ft { font-size: clamp(20px, 2.2vw, 34px); line-height: 1.05; }
.finfo a.ft { display: inline-block; }   /* work page: title is a link (magnetic needs a box) */
.finfo .fc { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.finfo .fp { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* popup player: dimmed page behind, video card centered.
   Width like the bio (1150px) but never cropped in small windows. */
.fplayer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(24, 21, 17, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.fplayer.show { opacity: 1; pointer-events: auto; }
/* responsive: full width minus the edge padding, scales with the window;
   capped by height so it never crops. Portrait films fill the height. */
.fplayer video {
  width: min(100%, calc(88vh * 16 / 9));
  height: auto;
  outline: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.fplayer video.portrait {
  width: auto;
  height: 88vh;
  max-width: 100%;
}
.fpx { color: var(--bg); }
.fpx {
  position: fixed;
  top: 14px; right: 18px;
  width: 52px; height: 52px;
  font-size: 38px;
  font-weight: 300;
  line-height: 52px;
  transform: rotate(45deg);
  z-index: 72;
  transition: opacity .3s var(--ease);
}
.fpx:hover { opacity: .5; }
body.fplayer-open { overflow: hidden; }

/* ---------- text pages ---------- */
.txtwrap { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 15vh 24px; }
.txt { max-width: 560px; overflow-wrap: break-word; hyphens: auto; }   /* long words/URLs must never widen the page */
.txt h1 { font-family: "Outfit", "Arial Black", sans-serif; text-transform: uppercase; font-weight: 900; font-size: 34px; margin-bottom: 18px; }
/* DE / EN switch next to the legal page title */
.lang-toggle { font-size: 13px; letter-spacing: .08em; margin-left: 14px; vertical-align: middle; white-space: nowrap; }
.lang-toggle button { text-transform: uppercase; opacity: .35; transition: opacity .3s var(--ease); }
.lang-toggle button:hover { opacity: .7; }
.lang-toggle button.on { opacity: 1; color: var(--accent); }
.lang-toggle .sep { opacity: .35; margin: 0 4px; }
.txt p { margin-bottom: 14px; }
.txt .muted { color: var(--ink-soft); }
.txt h2 { font-family: "Outfit", "Arial Black", sans-serif; text-transform: uppercase; font-weight: 900; font-size: 22px; margin: 36px 0 12px; }
.txt h3 { font-weight: 600; font-size: 13px; margin: 24px 0 8px; }
.txt ul { margin: 0 0 14px 18px; }
.txt li { margin-bottom: 8px; }
.txt a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .stage { inset: 70px 14px 64px; }
  .peek { display: none; }
  .menu-nav a { font-size: 40px; }
  .txt h1 { font-size: 25px; }   /* "Datenschutzerklärung" must fit a phone screen */
  .vrail { display: none; }
  .fitem, .fitem.right { flex-direction: column; gap: 14px; margin-bottom: 12vh; }
  .fvid, .fitem.portrait .fvid { width: 82vw; }
  .fvid-group { flex-wrap: wrap; gap: 2vw; width: 82vw; }
  .fvid-group .fvid { width: 40vw; }
  .fvid-group .fvid:nth-child(even) { margin-top: 0; }
  .fitem.right .finfo { text-align: left; align-items: flex-start; }
}

/* ---------- intro: name only, photos fade in afterwards ---------- */
body.intro { overflow: hidden; }
body.intro .card { opacity: 0 !important; transition: none !important; }
.card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .card, .wproj, .pimg { transition: none; transform: none; opacity: 1; }
  .card img, .wproj img, .pimg img { transition: none; animation: none !important; }
}