.lightbox-footer.is-no-projectlink .lb-project-toggle{display:none;}
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* keep as RGBA for highlight glow */
  --hover-soft: rgba(255, 230, 0, 0.55);
  /* THEME */
  --bg: #000;
  --fg: #fff;
  /* text colors (no opacity; always explicit RGB) */
  --fg-dim: rgb(199,199,199);
  --fg-muted: rgb(140,140,140);
  --fg-subtle: rgb(128,128,128);
  --line: #404040;
  --stage-top: rgba(0, 0, 0, 1.00);
  --stage-mid: rgba(0, 0, 0, 1.00);
  --stage-bot: rgba(28, 28, 30, 1.00);

  --content-pad: 24px;
  --arrow-size: 18px;

  /* FILTERBAR */
  --pill-gap: 10px;
  --pill-gap-group: 22px;
  /* on mobile: reserves space for the FILTERBAR label overlay */
  /* Left meta area width (acts as a mask over the first pills on mobile) */
  --filterbar-meta-w: clamp(84px, 22vw, 132px);

  /* DEBUG (remove when layout is approved) */
  --debug-filterbar-meta-bg: transparent;

  /* Accents (orange + lilac)
     NOTE: legacy var name kept for backwards compatibility.
     Historically --lilac was (mis)used to hold the orange accent. */
  /* Accent colors (backup of previous values)
     --accent-orange-old: rgb(255, 122, 28);
     --accent-lilac-old:  rgb(170, 160, 255);
  */
  /* slightly warmer orange + a touch clearer lilac */
  --accent-orange: rgb(255, 106, 18);
  --accent-lilac: rgb(142, 122, 255);
  --accent-yellow: rgb(255, 230, 0);

  /* legacy */
  --lilac: var(--accent-orange);

  /* Status colors */
  --new-badge: var(--accent-orange);

  /* Global hover highlight: markantes Gelb als Interaktionsfarbe */
  --hover: var(--accent-yellow);
  /* Badge tones
     STUDIUM = lighter (informative context)
     ARCHIV  = darker (reserved; tile badge currently hidden) */
  --archive-badge: rgb(135,135,135);
  --study-badge: rgb(170, 170, 170);
  /* calm, editorial accent (less techy than blue) */
  --prototype-badge: var(--accent-lilac);
  /* Safe areas (iOS notch / home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* GRID */
  --cols-desktop: 7;
  --tile-ratio: 3 / 4;
  --thumb-default: 140px;

  /* RHYTHM (wie Home) */
  --gap-main: 12px;

  /* PROJECT GRID */
  --cols-project: 4;
  --thumb-default-project: 240px;

  /* TYPO (Master: Project Title) */
  --fs-project-title: 34px;
  --fw-project-title: 600;
  --lh-project-title: 1.05;

  /* MAIN */
  --header-h: 96px;
  --footer-h: 88px;

  /* tighter spacing between header/main/footer */
  --edge: 16px;

  /* PANELS (dynamisch) */
  --panel-pad: clamp(18px, 4vw, 64px);
  --panel-bg: #0e0e0e; /* slightly lifted from main black to create the "tile" feeling */
  --panel-divider: rgba(255,255,255,0.08);

  /* Sichtbarer Anteil */
  --panel-visible-x: clamp(280px, 33.333vw, 520px);
  --panel-visible-y: clamp(320px, 33.333vh, 520px);

  /* Ideale Textspalten */
  --panel-inner-ideal: 520px;
  --panel-inner-side-ideal: 360px;

  /* UI feel */
  --press: 1px; /* ✅ softer click */
  --hitbox: 56px; /* größere Klickfläche (Header/Footer) */
}

/* Left panel: keep menu block centered, but left-align footer with menu text */
.panel-projects .panel-left-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: calc(100% - (var(--content-pad) * 2));
  margin: 0 auto;
}

.panel-projects .panel-footer-left{
  width: 100%;
  text-align: left;
}

/* Side panels: links default white, hover/active soft gray */
.panel-projects .media-list--links .media-item{
  color: #fff !important;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: color 120ms ease; /* v36: snappier hover */
}
.panel-about .project-list a,
.panel-about .publication-list a,
.panel-about .archive-list a{
  color: #fff !important;
}

.panel-projects .media-list--links .media-item:hover,
.panel-projects .media-list--links .media-item:focus-visible,
.panel-projects .media-list--links .media-item.is-active,
.panel-about .project-list a:hover,
.panel-about .project-list a:focus-visible,
.panel-about .project-list a.is-active,
.panel-about .archive-list a:hover,
.panel-about .archive-list a:focus-visible,
.panel-about .archive-list a.is-active{
  color: var(--c-ui-soft) !important;
}

/* The original hover style targets the inner label span – override robustly */
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:focus-visible .label,
.panel-projects .media-list--links .media-item.is-active .label{
  color: var(--c-ui-soft) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* External link indicator (e.g. Instagram): text left, arrow right */
.panel-projects .media-list--links .media-item.is-external .label{
  /* keep icon close to the word (reference-like, not a right-aligned control) */
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
}
.panel-projects .media-list--links .media-item.is-external .ext-icon{
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  position: relative;
  top: -0.45em; /* superscript feel (aligned with count) */
}
.panel-projects .media-list--links .media-item.is-external .ext-icon svg{
  width: 14px;
  height: 14px;
}

/* Lightbox title link: default white, hover soft gray */
.lb-link-title{
  color: #fff !important;
}
.lb-link-title:hover,
.lb-link-title:focus-visible{
  color: var(--c-ui-soft) !important;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

/* Custom cursor (flieder circle) */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}
.panel-projects .media-list--links .media-item{
  width: auto;
}

/* 5) Lightbox — landscape phones: give the media more room */
@media (orientation: landscape) and (max-height: 520px){
  .lightbox-stage .project-nav{ width: 56px; height: 56px; }
  .lightbox-prev, .lightbox-next{ top: 50%; }
  .lightbox-media{ max-width: 100vw; max-height: 100vh; }
}

.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--cursor-size, 18px);
  height: var(--cursor-size, 18px);
  border-radius: 999px;
  background: var(--lilac);
  background: color-mix(in srgb, var(--lilac) 85%, transparent);
  /* slightly more visible (esp. on white lightbox backdrop) */
  opacity: 0.9;
  --cursor-x: -9999px;
  --cursor-y: -9999px;
  --cursor-scale: 1;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) scale(var(--cursor-scale));
  pointer-events: none;
  /* keep above lightbox/panels */
  z-index: 10050;
  will-change: transform;
}

.cursor-dot.is-hidden { opacity: 0; }

@media (pointer: coarse) {
  .cursor-dot { display: none; }
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }
}

/* Use dynamic viewport units on mobile to avoid "vh jumps" (address bar).
   Fallback remains 100vh. */
.site {
  height: 100vh;
  height: 100dvh;
  position: relative;
}

/* MAIN SHELL (verschiebt sich bei Panels) */
.main-shell {
  height: 100vh;
  height: 100dvh;
  /* Header/Footer floaten über dem Content – der Scrollbereich liegt darunter */
  transition: transform 0.45s ease;
  will-change: transform;
  position: relative;
  z-index: 30; /* unter Panels */
}

/* HEADER */
.header {
  height: calc(var(--header-h) + var(--safe-top));
  position: fixed;
  top: 0;
  left: 0;
  /* Align to the scroll container width (prevents centering drift when .content shows a scrollbar). */
  right: var(--sbw, 0px);
  z-index: 220;
  background: transparent;
  padding-top: var(--safe-top);
  /* Header floats above content */
  transition: transform 0.45s ease;
  will-change: transform;
}

.header-inner{
  height: 100%;
  display: grid;
  /* 5-slot layout so the center logo never gets overlapped on very small screens.
     Only the middle "zones" are allowed to shrink. */
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  /* max-width + padding kommen über .frame */
}

/* Place header items into fixed grid slots */
.header .btn-projects{ grid-column: 1; justify-self: start; }
.header .header-zone-left{ grid-column: 2; }
.header .logo{ grid-column: 3; justify-self: center; }
.header .header-zone-right{ grid-column: 4; }
.header .btn-about{ grid-column: 5; justify-self: end; }


/* Tighten header/footer side padding on small screens so toggles can stay visible between corner buttons + logo */
@media (max-width: 430px){
  .header .frame,
  .footer .frame{
    padding-left: 12px;
    padding-right: 12px;
  }
  .header .logo{
    transform: scale(0.92);
    transform-origin: center;
  }
}
@media (max-width: 360px){
  .header .frame,
  .footer .frame{
    padding-left: 10px;
    padding-right: 10px;
  }
  .header .logo{
    transform: scale(0.88);
  }
}
/* Header "zones" between corner buttons and the centered logo.
   NOTE: background colors are DEBUG ONLY (requested), will be removed later. */
.header-zone{
  flex: 1 1 auto;
  min-width: 0; /* allow shrinking */
  display: flex;
  align-items: center;
  height: 100%;
  background: transparent; /* debug removed */
  overflow: hidden;
}
.header-zone-left{ justify-content: flex-start; }
.header-zone-right{ justify-content: flex-end; }

.header-toggles{
  display: inline-flex;
  align-items: center;
  /* keep spacing tight like tile titles; only shrink on tiny screens */
  /* tighter gap (closer to the earlier mono-style spacing) */
  gap: clamp(2px, 1.0vw, 6px);
  padding: 0;
  background: transparent; /* debug removed */
  border-radius: 0;
  white-space: nowrap;
  user-select: none;
  max-width: 100%;
}

/* =========================================================
   UI Toggle System (generic) — reused in header + footer
   ========================================================= */

.ui-toggle-zone{
  display: flex;
  align-items: center;
  max-width: 100%;
  gap: clamp(10px, 1.6vw, 18px);
}

.ui-toggle-zone--left{ justify-content: flex-start; }
.ui-toggle-zone--right{ justify-content: flex-end; }

.ui-toggle-group{
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 1.0vw, 6px);
  padding: 0;
  background: transparent;
  white-space: nowrap;
  user-select: none;
  max-width: 100%;
}

.ui-toggle{
  appearance: none;
  background: transparent;
  border: none;
  padding: 0 3px;
  margin: 0;
  font: inherit;
  font-weight: 500;
  letter-spacing: clamp(0em, 0.18vw, 0.02em);
  text-transform: none;
  color: var(--fg-subtle);
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1.15;
  font-size: clamp(8px, 2.6vw, var(--fs-tiletitle));
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.ui-toggle.is-active{ color: var(--fg); }

.ui-toggle:hover,
.ui-toggle:focus-visible{ color: var(--c-ui-soft); }

/* mobile: larger hit-area without changing layout flow */
@media (max-width: 640px){
  .ui-toggle{
    padding: 12px 10px;
    margin: -12px -10px;
  }
}

/* Allow JS-linked hover states (e.g. footer arrows <-> footer toggles) */
.ui-toggle.is-linked-hover{ color: var(--c-ui-soft); }


/* Footer filter indicators are always "active" (clickable) */
.footer .footer-filter-toggle.ui-toggle{
  color: rgba(255,255,255,1);
  opacity: 1;
}
.footer .footer-filter-toggle.ui-toggle:hover{
  color: var(--c-ui-soft);
}
.footer .footer-filter-toggle.ui-toggle.is-linked-hover{
  color: var(--c-ui-soft);
}

.header-toggles-left{ justify-content: flex-start; }
.header-toggles-right{ justify-content: flex-end; }

.header-toggle{
  appearance: none;
  background: transparent;
  border: none;
  /* compact horizontal padding so labels can stay visible on very small screens */
  padding: 0 3px;
  margin: 0;
  font: inherit;
  font-weight: 500;
  /* allow tracking to collapse on tiny screens before we ever truncate text */
  letter-spacing: clamp(0em, 0.18vw, 0.02em);
  text-transform: none;
  color: var(--fg-subtle);
  cursor: pointer;
  line-height: 1.15;
  /* Let typography shrink enough to always fit BETWEEN the dominant corner buttons + logo */
  /* aggressive scaling: keep labels visible between corner buttons + logo */
  font-size: clamp(8px, 2.6vw, var(--fs-tiletitle));
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header-toggle.is-active{
  color: var(--fg);
}

.header-toggle:hover,
.header-toggle:focus-visible{
  color: var(--c-ui-soft);
}



/* Header tiny screens: keep corner buttons + logo dominant, shrink the toggle typography instead */
@media (max-width: 360px){
  .header-toggles{ gap: 2px; }
  .header-toggle{ font-size: 8px; padding: 0 2px; }
}

/* Extra-small devices (iPhone SE width class): prioritize keeping ALL toggle labels visible */
@media (max-width: 330px){
  .header-toggles{ gap: 1px; }
  .header-toggle{ font-size: 7.5px; padding: 0 2px; letter-spacing: 0em; }
}

/* bündig */
.btn-projects { justify-self: start; }
.btn-about { justify-self: end; }

.footer {
  height: calc(var(--footer-h) + var(--safe-bottom));
  position: fixed;
  left: 0;
  /* Align to the scroll container width (prevents centering drift when .content shows a scrollbar). */
  right: var(--sbw, 0px);
  bottom: 0;
  z-index: 220;
  background: transparent;
  padding-bottom: var(--safe-bottom);
  /* Footer floats above content */
  transition: transform 0.45s ease;
  will-change: transform;
}

/* When side panels open, the whole "paper strip" (main + header + footer) should slide together. */
.header.shift-right,
.footer.shift-right { transform: translateX(var(--panel-visible-x)); }

.header.shift-left,
.footer.shift-left { transform: translateX(calc(-1 * var(--panel-visible-x))); }

/* During fast view switches the sticky footer can momentarily render at an outdated position
   until the first repaint/scroll. We hide it for 1–2 frames to avoid any visible "jump". */
body.is-nav-transition .footer{
  opacity: 0;
  pointer-events: none;
}


.footer-inner{
  height: 100%;
  /* Stable 3-slot layout (prev / center / next).
     Prevents any "wrong" initial placement during JS hydration
     (e.g., when only the next button is visible). */
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  /* max-width + padding kommen über .frame */
}
.footer-inner > .scroll-toggle{ grid-column: 3; justify-self: center; }

.footer-inner > .project-prev{ grid-column: 1; justify-self: start; }
.footer-inner > .footer-zone-left{ grid-column: 2; justify-self: start; }
.footer-inner > .footer-zone-right{ grid-column: 4; justify-self: end; }
.footer-inner > .project-next{ grid-column: 5; justify-self: end; }


/* Footer zones (left/right) host arrow buttons + filter indicators */
.footer-zone{
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 14px);
  min-width: 0;
}
.footer-zone-left{ grid-column: 2; justify-self: start; justify-content: flex-start; }
.footer-zone-right{ grid-column: 4; justify-self: end; justify-content: flex-end; }

/* Keep the indicator text visually aligned like header toggles */
.footer-filter-toggle{ min-height: 44px; }

/* --- Click-through header/footer (only interactive elements catch clicks) --- */
.header,
.footer{
  pointer-events: none;
}

/* Re-enable only the real controls */
.header button,
.header a,
.header .logo{
  pointer-events: auto;
}
.footer button,
.footer a{
  pointer-events: auto;
}

/* Buttons: kein Kreis-Hintergrund mehr */
.btn, .scroll-toggle, .project-nav {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  color: var(--fg);
}

/* Scroll toggle: arrow-only icon */
.scroll-toggle .scroll-arrow{
  display: block;
  margin: auto;
  width: 32px;
  height:  32px;
  transition: transform 160ms ease;
}
.scroll-toggle.is-up .scroll-arrow{
  transform: rotate(180deg);
}


/* Größere Hitbox, Icon bleibt bündig zur Frame-Kante */
.header .btn,
.footer .project-nav,
.footer .scroll-toggle{
  width: var(--hitbox);
  height: var(--hitbox);
}

.btn-projects{ width: 44px; height: 44px; }

/* Button icon alignment: icon flush with content edge */
.btn{ display: flex; align-items: center; justify-content: center; padding: 0; }
.btn-projects{ justify-content: flex-start; }
.btn-about{ justify-content: flex-end; }
.btn-icon{ margin: 0; width: 32px; height: 32px; display: block; }

/* Make icon-only hover impossible: let the whole button hitbox control hover */
.project-nav .btn-icon,
.btn .btn-icon{
  pointer-events: none;
}

/* ALIGN icons to content edge (right/left aligned within their Hitbox) */
.header .btn{ width: var(--hitbox); height: var(--hitbox); position:relative; }
.header .btn-projects .btn-icon{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
.header .btn-about .btn-icon{ position:absolute; right:0; top:50%; transform:translateY(-50%); }

.project-nav{ position:relative; }
.project-prev .btn-icon{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
.project-next .btn-icon{ position:absolute; right:0; top:50%; transform:translateY(-50%); }


/* typografische Icons */
.icon{
  font-size: var(--arrow-size);
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px); /* optische Mitte */
}

/* ✅ Press-Down Effekt (soft) */
.btn:active,
.scroll-toggle:active,
.project-nav:active,
.media-item:active,
.about-link:active {
  transform: translateY(var(--press));
}

/* Projects Button (= klein) / (x) */
.btn-projects span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: currentColor;
  top: 50%;
  transition: transform 0.35s ease;
}
/* "=" (kleiner) */
.btn-projects span:first-child { transform: translateY(-2.5px); }
.btn-projects span:last-child  { transform: translateY(2.5px); }

/* "x" (sauber zentriert) */
.btn-projects.is-active span:first-child { transform: translateY(0) rotate(45deg); }
.btn-projects.is-active span:last-child  { transform: translateY(0) rotate(-45deg); }

/* About Button (Dot) */
.btn-about {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Dot */
.dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
}
.is-active .dot { background: currentColor; }

/* Logo */
.logo { cursor: pointer; display: flex; justify-content: center; align-items: center; }
.logo-circle {
  width:  78px;
  height:  78px;
  border-radius: 999px;
  background: transparent; /* weißer Kreis entfernt */
  display: grid;
  place-items: center;
  position: relative;
}
.logo-circle img { height:   28px; width: auto; display: block; }

/* () removed per design decision */
.logo-circle::after { content: none; }

/* CONTENT: scrollt (Scrollbar am rechten Browserrand) */
.content {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}


/* Innerer Rahmen: Header/Main/Footer teilen identische Kanten */
.frame{
  /* Global layout width (desktop). */
  /* Full-bleed layout: no max-width clamp */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}

.main{
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--footer-h) + var(--safe-bottom));
  flex: 1 0 auto;
}

.main-inner{
  padding-top: var(--edge);
  padding-bottom: var(--edge);
}

/* VIEWS */
.home-view[hidden],
.project-view[hidden] { display: none !important; }

/* Ensure the native HTML [hidden] attribute actually hides elements.
   (We rely on this in SPA views like "Werkliste" to hide the base project header/media.) */
[hidden]{ display:none !important; }

/* MEDIA GRID (HOME) */
.home-opener{
  width: 100%;
  /* Home opener: more generous black stage than the tile grid,
     but intentionally lower than project image banners. */
  min-height: 46vh;
  /* No extra top padding – the header already creates white space.
     Keep spacing to the tiles via margin (so centering stays true). */
  padding-top: 0;
  padding-bottom: 0;
  /* No vertical gap below the opener; spacing is handled by the filter-bar. */
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Subtle "stage" background (reads as a dedicated hero area) */
  position: relative;
  isolation: auto;
}

.home-opener::before{
  content: '';
  position: absolute;
  inset: 0;
  /* Full-bleed stage, but without 100vw (prevents horizontal drift on mobile). */
  left: calc(-1 * var(--content-pad));
  width: calc(100% + (2 * var(--content-pad)));
  transform: none;
  border-radius: 0;
  /* Stage background: medium grey -> white (top), with a subtle edge to the tiles */
  background: transparent;
  box-shadow: none;
z-index: -1;
  pointer-events: none;
}
.home-opener-inner{
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  /* Optical centering between header logo and the first tile row */
  position: relative;
  /* keep opener optically centered after removing the overline spacer */
  top: -22px;
  padding-top: 0;
}


.home-opener-copy{
  /* keep the copy block clean and centered */
  text-align: center;
  /* larger opener copy */
  font-size: var(--fs-title);
  line-height: 1.25;

  /* aligns with panel links + project titles (mobile looked too thin at 500) */
  font-weight: 600;
}


.home-opener-copy .opener-line{ display:inline-block; }
.home-opener-copy .opener-line-nowrap{ white-space: normal; }
@media (max-width: 520px){
  .home-opener-copy{ font-size: clamp(18px, 6.5vw, 28px); }
}

@media (max-width: 720px){
  .home-opener{
    min-height: 40vh;
  }
}




.opener-contact{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Outer pill (the larger dark grey flat background) */
  min-height: 44px;
  padding: 6px 18px;
  border-radius: 999px;
  background: #2a2a2a;
  border: none;
  text-decoration: none;
  color: var(--fg);
}

.opener-contact .opener-contact-icon{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
  margin-left: -10px;
}

.opener-contact .opener-contact-label{
  /* back to the smaller label size (as before) */
  font-size: var(--fs-tiletitle);
  line-height: 1;
  font-weight: 500;
  transform: translateY(0.5px);
}

.opener-contact:hover{
  text-decoration: none;
  opacity: 1;
  color: var(--hover);
}
.opener-contact:active{
  transform: translateY(var(--press));
}

.opener-contact--disabled{
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}

/* Slightly larger text on bigger screens */
@media (min-width: 900px){
  .home-opener-inner{ font-size: 30px; top: -12px; }
}
/* Hide completely when not on filter "Alles" */
.home-opener.is-hidden{ display: none; }

.media-grid {
  display: grid;
  /* Fixed repeat() count for maximum browser compatibility.
     (Some grid implementations are picky about CSS variables in the repeat() count.) */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap-main);
  justify-content: stretch;
  align-content: start;
}

/* More columns on very wide screens */
@media (min-width: 1920px){ .media-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 2400px){ .media-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }

.tile {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

/* Portrait-Container bleibt fix, Bild bleibt vollständig sichtbar (kein Crop) */
.tile-thumb{
  width: 100%;
  line-height: 0;
  flex: 0 0 auto; /* nicht strecken – Höhe folgt Bild */
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative; /* enables thumbnail overlay badges */
}

/* Badge overlay on thumbnails (bottom-left) */
.tile-badge{
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  z-index: 2;
}

.tile-thumb.is-gif{
  background: #fff;
}
.tile-thumb img{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.tile-thumb video{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Hide native video controls (prevents flash on load) */
video{
  -webkit-touch-callout: none;
}
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button{
  display: none !important;
  -webkit-appearance: none;
}


/* Portrait-Crop: max 3:4 (BxH) – keine grauen Seitenflächen */
.tile-thumb.is-portrait{
  aspect-ratio: auto;
  align-items: flex-start;
  justify-content: center;
}
.tile-thumb.is-portrait img{
  height: auto;
  object-fit: contain;
}


.tile-filename {
  margin-top: 6px;
  font-size: var(--fs-tiletitle);
  line-height: 1.15;
  /* Titles should read as primary (white) everywhere: overview, lightbox, project page */
  color: var(--fg);
  display: flex;
  /* Better optical alignment between title text and status badges */
  align-items: center;
  gap: 9px; /* slightly tighter: keep air without looking detached */
  /* Keep the title row height consistent even when no badge is present,
     so tiles without a badge don't sit closer to the thumbnail. */
  min-height: 24px;
  white-space: nowrap;
}

/* Keep overview calm: no underline on hover */
.tile:hover .tile-filename { text-decoration: none; }

/* Keep the title truncating, while the "Neu" label stays visible */
.tile-title{
  color: var(--fg-subtle);
  /* Let the title shrink for ellipsis, but don't grow to push "Neu" to the far right */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Inline "Neu" label: outline-only, same proportions as the opener "Weiter" button */
.tile-new,
.project-new{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  padding: 3px 10px;
  font-size: var(--fs-label);
  line-height: 1;
  font-weight: var(--fw-label);
  /* Inverted (outline): transparent background, accent stroke + text */
  color: var(--new-badge);
  background: transparent;
  border: 2px solid var(--new-badge);
  border-radius: 999px;
  text-decoration: none;
  user-select: none;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  min-width: 32px;

  /* Keep badge centered on the title's midline */
  position: relative;
  top: 0;
  transform: translateY(0);
}
.tile-new{ pointer-events: auto; cursor: pointer; }
.project-new{ pointer-events: none; cursor: default; }


/* No hover styling – it should read as metadata, not UI */
.tile:hover .tile-new{ color: var(--new-badge); }

/* PROTOTYP badge (same as NEU, darker lilac) */
.tile-new.is-prototype{
  color: var(--prototype-badge);
  border-color: var(--prototype-badge);
}
.tile:hover .tile-new.is-prototype{ color: var(--prototype-badge); }

/* ARCHIV badge: same tone as tile title */
.tile-new.is-archive{
  color: var(--archive-badge);
  border-color: var(--archive-badge);
}

/* STUDIUM badge: own quiet tone (context marker) */
.tile-new.is-study,
.project-new.is-study{
  color: var(--study-badge);
  border-color: var(--study-badge);
}



/** Wrapper for multiple tile dots (keeps the same inline position as the old pill) */
.tile-dots{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
/* Overview tile status indicator: dot-only, color-coded (Neu/Prototyp/Studium) */
.tile-dots .tile-dot:nth-child(1){ z-index: 4; }
.tile-dots .tile-dot:nth-child(2){ z-index: 3; }
.tile-dots .tile-dot:nth-child(3){ z-index: 2; }
.tile-dots .tile-dot:nth-child(4){ z-index: 1; }

/* Color variants */

.tile-dot.is-study{ color: var(--study-badge); }



/* Proportional mini-pill widths (relative to top badges) */



/* Do not change color on hover – it should read as metadata, not UI */

/* Ensure thumbnail overlay badges stay anchored bottom-left.
   .tile-new sets position:relative, so we must override for the overlay variant. */
.tile-thumb .tile-badge{
  position: absolute !important;
  left: 10px;
  bottom: 10px;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}


/* Filter hide */
.tile.is-hidden { display: none; }

/* Responsive columns (HOME) */
/* Keep 7 tiles for typical desktop widths; reduce only when needed */
@media (max-width: 1440px) { .media-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1200px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px)  {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================
   PROJECT VIEW
========================= */



.project-header {
  display: grid;
  /* TEST: one wide text column instead of two (cols 2+3 merged) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap-main);
  align-items: start;
  margin-bottom: 52px; /* ✅ mehr Abstand zu Medien */
}

.project-mini {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}

.project-title {
  font-size: var(--fs-project-title);
  font-weight: var(--fw-project-title);
  line-height: var(--lh-project-title);
  margin-bottom: 12px;
}

/* Title line-break: code on line 1, name on line 2 */
.project-title .project-title-code,
.project-title .project-title-name{
  display: block;
}

/* Ensure the HTML 'hidden' attribute always wins, even if display is set above */
.project-new{ margin-top: 10px; }

.project-new.is-prototype{
  color: var(--prototype-badge);
  border-color: var(--prototype-badge);
}

/* A slightly smaller title variant (used on Datenschutzerklaerung, where the word is very long) */
.project-title.is-smaller {
  font-size: 30px;
}

.project-col--text {
  /* slightly larger long text (was a bit too reserved) */
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
}
.project-col--text p { margin-bottom: 18px; }

.project-facts {
  display: grid;
  gap: 12px;
}

/* Project Links list */
.project-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.project-links a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a:visited{
  color: inherit;
}
a:active{
  color: inherit;
}

/* Project fact links ("Projektdetails") */
.fact-link{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.fact-link svg{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.8;
  display: block;
  /* visually center icon to text cap-height */
  transform: translateY(1px);

  transform: translateY(1px);}
.fact-link:hover .fact-link-text{
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.project-links a svg{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.8;
  display: block;
  transform: translateY(1px);

  transform: translateY(1px);}
.project-links a:hover,
.project-links a:focus-visible{ 
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  color: var(--hover);
}

.project-fact-label {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin-bottom: 4px;

  font-family: var(--font-mono);
  text-transform: none;
}
.project-fact-value {
  font-size: 14px;
  color: var(--c-label);
}

/* Kontakt page: address block in the text column */
.contact-address{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg-muted);
}
.contact-address strong{ font-weight: 600; }

/* Contact page: make address in text column read like normal body copy */
.contact-address{
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Smaller paragraph style for legal/meta blocks (used in Kontakt -> Rechtliches facts) */
.contract-address{
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Page titles may contain line breaks (e.g. "Datenschutz\nErklärung") */
.project-title.is-page-title{
  white-space: pre-line;
}

/* If page titles are split into spans, keep the second line untransformed */
.project-title.is-page-title .title-line2{
  text-transform: none;
}

/* =========================
   LEGALS PAGE
========================= */
.header-spacer{
  width: 44px;
  height: 44px;
}

.footer-spacer{
  width: 44px;
  height: 44px;
}

.legal-header{
  margin-bottom: 0;
}

.legal-section{
  max-width: 62ch;
}

/* Legal headings should be uppercase throughout */
.legal-subtitle{
  }

.legal-section-title{
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin: 0 0 10px;
}

.legal-subtitle{
  font-size:11px;
  font-weight: 500;
  color: var(--fg-muted);
  margin: 18px 0 8px;
}

.legal-link{
  color: inherit;
  text-decoration: none;
}
.legal-link:hover{ text-decoration: none; color: var(--hover); }

/* Optional simplified footer variant (currently unused).
   Centers the single visible control. */
.footer--simple .footer-inner{
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Mediengrid unter Header – gleiches Raster */
.project-media-grid {
  display: grid;
  /* Fixed repeat() count for maximum browser compatibility. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-main);
  justify-content: stretch;
  align-content: start;
}

/* Project tiles: match the homepage title size (global tile-title scale) */
.project-view .tile-filename {
  font-size: var(--fs-tiletitle);
}

/* Responsive (PROJECT) */
@media (max-width: 1200px) {
  .project-header { grid-template-columns: 1fr; }
  .project-media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px)  {
  .project-header { grid-template-columns: 1fr; }
  .project-title { font-size: 28px; }
  .project-title.is-smaller { font-size: 26px; }
  /* On mobile/project detail view, always show a single column */
  .project-media-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px)  { .project-media-grid { grid-template-columns: 1fr; } }

/* PANELS */
.panel {
  position: fixed;
  top: 0;
  background: var(--panel-bg);
  color: #fff;
  overflow: auto;
  transition: transform 0.45s ease;
  z-index: 60;
}

/* Größen + Startpositionen */
.panel-projects {
  left: 0;
  width: 75vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  transform: translateX(-100%);
}

/* About Panel rechts */
.panel-about {
  right: 0;
  width: 75vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  transform: translateX(100%);
}

/* Öffnen */
.panel-projects.is-open { transform: translateX(calc(-100% + var(--panel-visible-x))); }
.panel-about.is-open    { transform: translateX(calc( 100% - var(--panel-visible-x))); }

/* MAIN shift passend dazu */
.main-shell.shift-right { transform: translateX(var(--panel-visible-x)); }
.main-shell.shift-left  { transform: translateX(calc(-1 * var(--panel-visible-x))); }

/* Panel Padding
   Keep the *panel* itself flush so header/footer align perfectly.
   Apply the "gutter" padding to the single inner wrapper instead (box-sizing keeps height stable). */
.panel-projects,
.panel-about{
  padding: 0;
}

/* Mirror .main-inner edge spacing (vertical) */
.panel-main-inner{
  padding-bottom: var(--edge);
}

/* Gentle separation at the bottom, but keep it subtle */
.panel-footer-inner{
  height: var(--footer-h);
  display: flex;
  align-items: center;
  border-top: none;
  padding-top: 0;
}

/* Panel inner container width (match both sides for a consistent axis)
   Apply to the NEW panel container blocks (header/main/footer) */
.panel-projects .panel-header-inner,
.panel-projects .panel-main-inner,
.panel-projects .panel-footer-inner,
.panel-about .panel-header-inner,
.panel-about .panel-main-inner,
.panel-about .panel-footer-inner{
  max-width: none;
  margin: 0;
}

/* Center the actual content block within the panel-body container */
.panel-projects .media-group,
.panel-projects .project-group{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Shared column layout for left-panel lists (filter + projects)
   Ensures that all labels start on the same vertical axis. */
:root {
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --panel-label-col: 42px;
  --panel-label-gap: 10px;
}

.project-group { margin-bottom: 48px; }

.project-group-title,
.media-group-title {
  /* Align headings with the label column */
  padding-left: 0;
  /* Back to the previous (smaller + darker) heading style */
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  color: var(--fg-subtle);
}

.project-list, .publication-list, .archive-list { list-style: none; }

/* Right panel project list */
.panel-about .project-list,
.panel-about .publication-list,
.panel-about .archive-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-about .project-list .project-item,
.panel-about .publication-list .project-item,
.panel-about .archive-list .project-item{ margin: 0; display: block; }

/* Button row (RIGHT PANEL): two columns (CODE | NAME) */
.panel-about button.project-row{
  display: grid;
  grid-template-columns: 4ch 1fr;
  column-gap: 10px;
  align-items: baseline;
  width: 100%;
}

/* Type: project NAME matches the panel link scale */
.panel-about button.project-row .code,
.panel-about button.project-row .project-name{
  /* Match main project title size (project pages) */
  font-size: var(--fs-project-title);
  font-weight: var(--fw-project-title);
  line-height: var(--lh-project-title);
  letter-spacing: 0;
}

/* Keep code and name on one row with a clean baseline */
.panel-about button.project-row .project-list-code,
.panel-about button.project-row .project-list-name{
  display: block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}
.panel-about button.project-row .project-list-name{
  white-space: normal;
}


/* Active project */
.panel-about .media-item--project.is-active .project-code-inline,
.panel-about .media-item--project.is-active .project-title-inline{
  color: var(--hover);
}

/* Long titles: allow wrap on very small screens */
@media (max-width: 520px){
  .home-opener-copy{ font-size: clamp(18px, 6.5vw, 28px); }
}
/* Category headings inside the project list */

.project-list .project-cat,
.publication-list .project-cat {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  margin: 18px 0 12px;
  color: var(--fg-subtle);
}
.project-list .project-cat:first-child { margin-top: 0; }

/* Actual project rows */
.project-list .project-item,
.publication-list .project-item,
.archive-list .project-item {
  display: block;
  margin-bottom: 14px;
}

/* CODE column: same appearance as NAME (tabular nums keeps rhythm) */
.project-list .code,
.publication-list .code,
.archive-list .code{
  font-variant-numeric: tabular-nums;
}

/* (old small-label styling removed – code should match title size) */
.project-list .name,
.publication-list .name,
.archive-list .name {
  cursor: pointer;
  font-size: var(--fs-project-title);
  font-weight: var(--fw-project-title);
  line-height: var(--lh-project-title);
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Panel lists: same type as project title */
.panel-about .project-list .name,
.panel-about .publication-list .name,
.panel-about .archive-list .name{
  font-size: var(--fs-project-title);
  font-weight: var(--fw-project-title);
  line-height: var(--lh-project-title);
}
.project-list button.name,
.publication-list button.name,
.archive-list button.name {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.project-list .name:hover,
.publication-list .name:hover,
.archive-list .name:hover{
  text-decoration: none;
  color: var(--hover);
}

/* Right panel: code is a quieter system index */
.panel-about .project-list .project-list-code,
.panel-about .publication-list .project-list-code,
.panel-about .archive-list .project-list-code{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-width: 4ch;
  white-space: nowrap;
  color: rgba(255,255,255,0.65);
}


/* Active project in right panel */
.project-list .name.is-current,
.publication-list .name.is-current,
.archive-list .name.is-current{ color: var(--hover); }

.media-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 48px; }
.media-item {
  background: none;
  border: none;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--panel-label-col) 1fr;
  column-gap: var(--panel-label-gap);
  align-items: center;
  padding: 0;
}

.media-item .dot { justify-self: center; }
.media-item .label { justify-self: start; }
.media-item:hover .label{
  text-decoration: none;
  color: var(--hover);
}
.media-item.is-active .dot { background: currentColor; }

/* Active page link (left panel) */
.media-list--links .media-item{
  grid-template-columns: 1fr;
  column-gap: 0;
}
.media-list--links .media-item .label{ justify-self: start; }
.media-list--links .media-item.is-active .label{ color: var(--hover); }

/* Panel filters: icon (circle/disc) + label, like opener-button (without pill bg) */
.media-list--filters{ gap: 14px; margin-bottom: 48px; }
.media-item--filter{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  width: auto;
}
.media-item--filter .media-icon{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
}
.media-item--filter .label{
  font-size: var(--fs-tiletitle);
  line-height: 1;
  font-weight: 500;
  transform: translateY(0.5px);
}

/* Panel links (left panel): remove dots, bigger type (match main project-title) */
.media-list--links{ gap: 14px; margin-bottom: 0; }

/* Left panel nav links: match main project title (size + weight) */
.panel-projects .media-list--links .media-item{
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
}
.panel-projects .media-list--links .label{ font-size: inherit; font-weight: inherit; }

.media-list--links .media-item{
  display: block;
  grid-template-columns: none;
  column-gap: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.05;
}

/* Instagram: rainbow letters */
[data-instagram-link] .label{
  display: inline-block;
  white-space: nowrap;
}
[data-instagram-link] .ig-letter{
  display: inline-block;
  transition: color 180ms ease;
}
/* On hover: force global hover color (grellgelb) */
[data-instagram-link]:hover .ig-letter{ color: var(--hover) !important; }

/* ABOUT */
.about-stack { width: min(var(--panel-inner-side-ideal), 100%); }

.about-title {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 18px;
  white-space: nowrap;
}

.about-text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin-bottom: 14px;
}

.about-section { margin-top: 22px; }

.about-section-title {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  color: var(--fg-subtle);
}

.about-list { list-style: none; }
.about-list li {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.about-link {
  color: var(--fg-muted);
  text-decoration: none;
}
.about-link:hover { text-decoration: none; color: var(--hover); }

.about-link--icon{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.about-link-icon{
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
}

.about-address{
  margin-top: 10px;
  color: var(--fg-muted);
}

/* Visibility helper */
.is-hidden { visibility: hidden; pointer-events: none; }


/* Lightbox: Tiles öffnen Vollbild */
.media-grid .tile,
.project-media-grid .tile,
.project-view .tile {
  /* Match the "link click" cursor used across the site (e.g. left panel list) */
  cursor: pointer;
}

/* Prevent scroll behind the lightbox (scrolling happens in .content) */
body.is-lightbox-open .content{
  overflow: hidden;
  /* Keep the page frame from "jumping" when the .content scrollbar disappears */
  padding-right: var(--sbw, 0px);
}

/* --- Lightbox (Vollbild) --- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.lightbox-dialog{
  position: absolute;
  inset: 0;
}

/* Lightbox uses the same .content scaffolding as the homepage */
.lightbox-content{
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* reserve scrollbar width for exact alignment with the page */
  padding-right: var(--sbw, 0px);
  display: flex;
  flex-direction: column;
}

/* Keep header grid logic, but visually hide center/right slots */
.lightbox-logo,
.lightbox-about{
  visibility: hidden;
  pointer-events: none;
}


.lightbox-main{ flex: 1 1 auto; min-height: 0; }
.lightbox-main-inner{
  position: relative;
  height: 100%;
}

.lightbox-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;

  touch-action: none;
}

.lightbox-stage-media{
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.lightbox-media{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  display: block;
  line-height: 0;
}



/* Only images get a white backing (helps with transparency); videos should not flash a white box. */
video.lightbox-media{ background: transparent; }



.lightbox-prev,
.lightbox-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* sit above media */
}

/* Keep arrows inside the same "frame" rectangle */
.lightbox-prev{ left: 0; }
.lightbox-next{ right: 0; }

/* Make arrows easier to tap without changing the 24px icon size */
.lightbox-stage .project-nav{
  width: 64px;
  height: 64px;
}

/* Lightbox arrows already use transform for vertical centering.
   Keep the same centering while applying the (soft) press effect. */
.lightbox-prev:active,
.lightbox-next:active{
  transform: translateY(-50%) translateY(var(--press));
}

.lightbox-scroll-spacer{
  opacity: 0;
  pointer-events: none;
}

/* Right footer slot: keep link/counter anchored to bottom-right like the page footer */
.lightbox-right{
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.lightbox-footer .lightbox-caption{ grid-column: 1; justify-self: start;  font-family: var(--font-mono); }

.lightbox-project-link{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: end;
  justify-items: end;
  min-width: 0;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
}

/* Lightbox link icon: hard swap between two SVG files (no fade/opacity tricks) */
.lightbox-project-link .lb-link-icon-wrap{
  width: 32px;
  height: 32px;
  position: relative;
  flex: 0 0 32px;
  display: block;
}
.lightbox-project-link .lb-link-icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lightbox-project-link .lb-link-icon.is-hover{ display:none; }
.lightbox-project-link:hover .lb-link-icon.is-normal{ display:none; }
.lightbox-project-link:hover .lb-link-icon.is-hover{ display:block; }


.lightbox-project-link:hover{ text-decoration: none; }
.lightbox-project-link:hover .lb-link-text{ text-decoration: none; color: var(--hover); }

.lightbox-counter{
  font-size: var(--fs-mono);
  line-height: 1.2;
  user-select: none;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;

  /* Optically center the dash (—) regardless of digit count.
     JS renders three spans: left / dash / right. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.6ch;
  white-space: nowrap;
}

.lightbox-counter .lb-counter-left{ text-align: right; }
.lightbox-counter .lb-counter-right{ text-align: left; }
.lightbox-counter .lb-counter-dash{
  display: inline-block;
  width: 1ch;
  text-align: center;
}

/* =========================================================
   Lightbox footer layout (match home footer logic / positions)
   ========================================================= */
.lightbox-footer .footer-inner{
  /* Mirror the stable 5-slot footer grid (prev / left / center / right / next)
     so the counter stays visually centered even with the right arrow present. */
  grid-template-columns: auto 1fr auto 1fr auto;
}

/* Empty slot to mirror the size of a round nav button.
   This keeps the left mono title aligned with the normal footer toggle position. */
.lightbox-footer .lb-footer-spacer{
  width: 44px;
  height: 44px;
  pointer-events: none;
}

/* IMPORTANT: keep the *same* 5-slot grid in every context.
   We only hide the project-link affordance via visibility so centering never shifts. */
.lightbox-footer.is-no-projectlink .footer-inner{
  grid-template-columns: auto 1fr auto 1fr auto;
}

/* Invisible spacer to balance the right arrow width (keeps center truly centered) */
.lightbox-footer .lightbox-footer-spacer{
  grid-column: 1;
  justify-self: start;
  width: var(--hitbox);
  height: var(--hitbox);
  opacity: 0;
  pointer-events: none;
}

.lightbox-footer .footer-zone-left{ grid-column: 2; justify-self: start; }
.lightbox-footer .lightbox-counter{ grid-column: 3; justify-self: center; }
.lightbox-footer .footer-zone-right{ grid-column: 4; justify-self: end; }
.lightbox-footer .project-next{ grid-column: 5; justify-self: end; }

/* Hide something but keep its allocated space (used for project-page lightbox footer). */
.is-keep-space-hidden{
  visibility: hidden;
  pointer-events: none;
}


.lb-toggle-mono{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  user-select: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lb-project-toggle{
  color: var(--fg); /* clickable/active */
}


/* =========================================================
   Lightbox footer v2 (isolated, fixed, 5-slot grid + debug colors)
   - avoids old selector collisions
   - uses iOS safe-area inset explicitly
   ========================================================= */

.lb-footer-v2{
  position: fixed;
  left: 0;
  /* Match the site footer/header behavior: avoid the "100vw includes scrollbar" drift.
     When the page has a scrollbar, the main footer uses right: var(--sbw).
     The lightbox overlay often removes the scrollbar, so we mirror the same rule
     to keep footer width/edges consistent across contexts. */
  right: var(--sbw, 0px);
  bottom: 0;
  z-index: 10000; /* above page footer */
  background: transparent;
  height: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none; /* click-through like header/footer */
}

/* Re-enable only real controls inside the footer */
.lb-footer-v2 button,
.lb-footer-v2 a{
  pointer-events: auto;
}

.lb-footer-v2-inner{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
}

/* Slots map to the same 5 columns */
.lb-footer-slot--1{ grid-column: 1; justify-self: start; }
.lb-footer-slot--2{ grid-column: 2; justify-self: start; }
.lb-footer-slot--3{ grid-column: 3; justify-self: center; }
.lb-footer-slot--4{ grid-column: 4; justify-self: end; }
.lb-footer-slot--5{ grid-column: 5; justify-self: end; }

/* Slot 1 acts like an invisible nav-sized spacer (keeps center stable) */
.lb-footer-slot--1{
  width: var(--hitbox);
  height: var(--hitbox);
}

/* Keep left/right zones from overflowing the grid */
.lb-footer-zone-left,
.lb-footer-zone-right{
  min-width: 0;
}

/* Debug mode: lightly tint each slot so we can see if the grid is stable */
.lb-footer-v2.is-debug .lb-footer-slot{
  border-radius: 6px;
}
.lb-footer-v2.is-debug .lb-footer-slot--1{ background: rgba(255, 0, 0, 0.12); }
.lb-footer-v2.is-debug .lb-footer-slot--2{ background: rgba(0, 255, 0, 0.12); }
.lb-footer-v2.is-debug .lb-footer-slot--3{ background: rgba(0, 140, 255, 0.12); }
.lb-footer-v2.is-debug .lb-footer-slot--4{ background: rgba(255, 220, 0, 0.12); }
.lb-footer-v2.is-debug .lb-footer-slot--5{ background: rgba(180, 0, 255, 0.12); }

/* Match the soft press-down of other links/buttons */
.lightbox-project-link:active{
  transform: translateY(var(--press));
}

/* Ensure the project-link is actually hidden when requested via the hidden attribute */
.lightbox-project-link[hidden]{
  display: none !important;
}

@media (max-width: 680px){
  .lightbox-caption{ max-width: 60%; font-size: 28px; }
}

/* === Scrollbar stability (prevents horizontal "jump" when scrollbar appears/disappears) === */
.content{
  /* Keep current behavior (auto) but reserve gutter when supported */
  scrollbar-gutter: stable;
}

/* Fallback for browsers without scrollbar-gutter support:
   always reserve space by forcing a vertical scrollbar */
@supports not (scrollbar-gutter: stable){
  .content{
    overflow-y: scroll;
  }
}
/* === end scrollbar stability === */

/* Remove default focus outlines (keeps clean icon-only UI) */
.btn:focus,
.btn:focus-visible,
.project-nav:focus,
.project-nav:focus-visible,
.lightbox-project-link:focus,
.lightbox-project-link:focus-visible{
  outline: none;
}


/* Right panel (About) – tighter spacing for icon links */
.about-list--tight li { margin-bottom: 0.22em; }
.about-list--tight li:last-child { margin-bottom: 0; }
.about-list--tight .about-link--icon { display: inline-flex; align-items: center; gap: 0.45em; }
.about-list--tight .about-link-icon { width: 0.95em; height: 0.95em; flex: 0 0 auto; }




/* Desktop DPR fix for fractional borders */
@media (min-resolution: 1dppx) and (max-resolution: 1.49dppx){
  .opener-contact{
    border-width: 2px;
  }
}



/* ================================
   TYPO ONLY (Inter) — based on OLD layout
   - Do NOT change panel architecture / transforms / widths
   - Unify type scale + labels + badges + panel text sizing
================================ */

:root{
  /* THEME */
  --bg: #000;
  --fg: #fff;
  --fg-dim: rgba(255,255,255,0.78);
  --fg-muted: var(--fg-muted);
  --fg-subtle: #808080;
  --line: #404040;
  --stage-top: rgba(0, 0, 0, 1.00);
  --stage-mid: rgba(0, 0, 0, 1.00);
  --stage-bot: rgba(28, 28, 30, 1.00);

  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* type scale */
  --fs-hero: 34px;
  --fs-title: 34px;
  --fs-body: 18px;
  --fs-meta: 14px;
  --fs-micro: 12px;
  /* matches the title line under thumbnails ("tile title") */
  --fs-tiletitle: 12px;
  --fs-badge: 12px;

  /* label system */
  --fs-label: 11px;
  --fs-mono: var(--fs-label);
  --fw-label: 400;
  --ls-label: 0.06em;

  /* tones (dark) */
  --c-title: var(--fg);
  --c-body: var(--fg);
  --c-meta: var(--fg-muted);
  --c-label: var(--fg-subtle);
}

/* global */
html, body{
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-body);
}

/* headings */
h1,h2,h3,h4,h5,h6,
.project-title{
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 600;
  color: var(--c-title);
}

/* project title sizing */
.project-view .project-title,
.project-header h1,
h1.project-title{
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* hero (home) */
.home-hero,
.hero,
.intro,
[data-hero]{
  font-size: var(--fs-hero);
  line-height: 1.2;
  font-weight: 500;
  color: var(--c-title);
}

/* body text blocks */
.project-text,
.project-text p,
.project-col--text,
.project-col--text p{
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-body);
  max-width: 64ch;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* subhead inside long text (e.g., LABORANTINNEN) */
.project-text-subhead{
  display: block;
  margin-top: 24px;
  margin-bottom: 8px;
}

/* facts (meta values) */
.project-col--facts{
  font-family: var(--font-sans) !important;
  font-size: var(--fs-meta);
  color: var(--c-meta);
}
.project-fact-value{
  font-family: var(--font-sans) !important;
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--c-meta);
}

/* label system: project code = meta headings = tile labels = lightbox caption */
.project-code,
.project-fact-label,
.lightbox-caption{
  font-family: var(--font-mono) !important;
  font-size: var(--fs-mono) !important;
  font-weight: var(--fw-label) !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase;
  color: var(--c-label) !important;
  line-height: 1.1;
}

/* Tile titles should be white (not label-grey) across overview, lightbox and project page */
.tile-filename{ color: var(--fg) !important; }

/* keep lightbox caption not huge */
.lightbox-caption{
  max-width: 70%;
}

/* tags/pills (non-badge) */
.tag,
.pill{
  font-family: 'Inter', sans-serif;
  font-size: calc(var(--fs-badge) - 1px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  }

/* panel-about typography only (no layout): readable on black */
.panel-about{
  color: var(--fg-muted);
}
.panel-about h1,
.panel-about h2,
.panel-about .about-title{
  color: #fff;
}
.panel-about .about-section-title{
  font-size: var(--fs-label) !important;
  font-weight: var(--fw-label) !important;
  letter-spacing: var(--ls-label) !important;
  color: var(--fg-subtle) !important;
}

/* From Kontakt onward: meta sizing */
.panel-about .about-list,
.panel-about .about-list li,
.panel-about .about-list a,
.panel-about [data-about-collabs]{
  font-size: var(--fs-meta) !important;
  line-height: 1.45 !important;
}

/* links hover (no underline, grellgelb) */
button, a, .btn{
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
a{
  text-decoration: none;
}
a:hover{
  color: var(--hover);
  text-decoration: none !important;
}

/* header axis */
.panel .panel-header{
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* align content inside header like main header inner */
.panel .panel-header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.panel-about .panel-header-inner{
  /* align with left panel / main content inset */
  width: 100%;
  max-width: none;
  margin: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* no vertical padding so it matches the main header row */
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}
.panel-about .about-title{
  margin: 0;
  line-height: 1;
}

/* content axis */
.panel .panel-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--edge);
  padding-bottom: var(--edge);
}

/* Footer axis (mirrors .footer height + safe-bottom) */
.panel .panel-footer{
  height: calc(var(--footer-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.panel .panel-footer-inner{
  height: var(--footer-h);
  display: flex;
  align-items: center;
}

/* keep lists/text from being centered automatically */
.panel .panel-body-inner{
  /* Center the content block reliably + avoid horizontal scrolling */
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}
.panel-projects .media-group,
.panel-projects .project-group{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ensure left panel headings align with codes (same left edge) */
.panel-projects .media-group-title,
.panel-projects .project-group-title{
  text-align: left !important;
  margin-left: 0 !important;
}

/* right panel: make sure about text starts right at content axis */
.panel-about .about-stack{
  margin-top: 0 !important;
}


/* === FIX: Left panel headings + code alignment (codes axis) === */
.project-group-title,
.media-group-title{
  padding-left: 0 !important; /* align to code column */
}
.project-list .code{
  justify-self: start !important;
  text-align: left !important;
}

/* Right panel title alignment is handled via the grid header layout above. */
.panel-about .about-title{
  position: static;
}

/* === BADGES (state colors) === */
/* Default = NEU (orange) via --new-badge */
.tile-new,
.project-new{
  color: var(--new-badge);
  border-color: var(--new-badge);
}


/* === BADGE COLOR SYSTEM === */
.badge-new { background: rgb(255, 106, 18); color: #000; }        /* Orange */
/* ARCHIV: subtle dark grey like tile titles */
.badge-archive { background: var(--fg-subtle); color: #000; }
.badge-prototype { background: rgb(142, 122, 255); color: #000; }  /* Lilac */


/* === ABOUT HEADER ALIGN FIX === */
.panel-about .panel-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: var(--panel-inner-ideal);
  margin: 0 auto;
  height: 100%;
}

.panel-about .about-title {
  margin: 0;
  line-height: 1;
  text-align: left;
}

.media-group,
.project-group{
  width: 100%;
}

/* === TIGHTER LIST SPACING === */
.filter-option{
  display: grid;
  grid-template-columns: 18px auto;
  column-gap: 10px;
  align-items: center;
}

.project-item{
  display: grid;
  grid-template-columns: 64px auto;
  column-gap: 14px;
  align-items: center;
}


/* === TRUE CONTENT-WIDTH CENTERING FIX === */

/* Panel body centers its inner wrapper */
.panel-projects .panel-body{
  display: flex;
  justify-content: center;
}

/* Groups stretch to that calculated width */
.media-group,
.project-group{
  width: 100%;
}

/* Ensure grid rows don't artificially stretch */
.project-item,
.filter-option{
  width: 100%;
}


/* === PANEL TRUE CENTERING (shrink-wrap to widest child) === */
.panel-projects .panel-body{
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/* children take the parent's computed width so all blocks share one axis */
/* Left panel (INFO links): shrink-wrap to the widest item and truly center */
.panel-projects .media-group.nav-group{
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}
.panel-projects .media-list--links{
  width: max-content;
  max-width: 100%;
  margin: 0;
}


/* === SCROLLBAR (dark) === */
/* Firefox */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.06); }
/* WebKit */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); }
::-webkit-scrollbar-thumb{ background: #383838; border-radius: 999px; border: 1.5px solid rgba(0,0,0,0); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.30); }




/* === UI: Difference blending (test) ===
   Apply blending on the overlay containers themselves.
   This avoids per-button stacking-context quirks (sticky/transform/etc.). */
.header,
.footer{
  mix-blend-mode: difference;
}

/* Ensure nested SVG/img/lines blend consistently */
.header *,
.footer *{
  mix-blend-mode: inherit;
}
/* ---- Tile seam performance fix ---- */

.tile-media {
  background: transparent;
  line-height: 0;
  font-size: 0;
}

.tile-media.is-gif {
  background: #fff;
}

.tile-media img,
.tile-media video {
  display: block;
  width: 100%;
  height: auto;
}

.tile-media::after {
  content: "";
  display: block;
  height: 0.5px;
  background: #fff;
}

/* ---- Lightbox: ensure navigation remains clickable ---- */
.lightbox-stage,
.lightbox-stage-media {
  pointer-events: auto !important;
}

.lightbox-prev,
.lightbox-next {
  pointer-events: auto !important;
  z-index: 5;
}

/* (removed) Lightbox: desktop click zones + custom cursor */

.lightbox-media.is-light-bg,
.tile-thumb.is-light-bg { background: #fff; }


/* v26: Right panel project list: two-column row (CODE | NAME) */
.panel-projects button.project-row,
.panel-about button.project-row{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  row-gap: 0;
}

/* Ensure CODE keeps label look (project-code) */
.panel-projects button.project-row .project-list-code,
.panel-about button.project-row .project-list-code{
  /* inherits from .project-code */
}

/* Name like <p> (slightly emphasized) */
.panel-projects button.project-row .project-list-name,
.panel-about button.project-row .project-list-name{
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  white-space: normal;
}



/* v27: Align right panel project list names in one vertical line */
.panel-projects button.project-row,
.panel-about button.project-row{
  display: grid;
  grid-template-columns: 48px 1fr; /* fixed code column */
  column-gap: 8px;
  align-items: center;
}

.panel-projects .project-list-code,
.panel-about .project-list-code{
  width: 48px;
}


/* v28: Right panel hover + active state like left, but only project NAME turns yellow */
.panel-projects button.project-row:hover .project-list-name,
.panel-about button.project-row:hover .project-list-name{
  color: var(--accent);
}

.panel-projects button.project-row.is-active .project-list-name,
.panel-about button.project-row.is-active .project-list-name{
  color: var(--accent);
}

/* Ensure code stays muted */
.project-list-code{
  color: var(--fg-muted);
}


/* v30: Active right-panel entry uses existing .is-current class */
.panel-projects button.project-row.is-current .project-list-name,
.panel-about button.project-row.is-current .project-list-name{
  color: var(--accent);
}


/* v33: optical vertical alignment tweak for code vs name */
.project-list-code{
  position: relative;
  top: -2px; /* lift code slightly for optical centering */
}

.project-list-name{
  line-height: 1.1;
}

.tile.is-cat-hidden { display: none; }


/* Ensure scroll button icon renders as a perfect circle (clip any non-square SVG background) */
.scroll-toggle .btn-icon{
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}



/* Opener / Scroll button: only arrow, no background */
.scroll-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
}

.scroll-toggle .scroll-arrow {
  display: block;
  width: 32px;
  height: 32px;
}


/* Opener Contact Button Cleanup */
.opener-contact,
.opener-contact .btn-icon {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.opener-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.opener-contact .btn-icon {
  display: block;
  margin: 0 auto;
}



/* --- Footer scroll button size fix --- */
.scroll-arrow {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  display: block;
}

.scroll-button img,
button img.scroll-arrow {
  max-width: none !important;
}


/* === TYPO SPACING SYSTEM: Label → Content === */
.project-fact-label,
.panel-section-label,
.project-col-text > h2,
.project-col-text > h3 {
  margin-bottom: 10px;
}

/* More air before subheadings inside running text */
.project-col-text p + h2,
.project-col-text p + h3 {
  margin-top: 22px;
}


/* === Refine spacing for Project Facts (right column) === */
.project-facts .project-fact-label {
  margin-bottom: 4px;   /* tighter label-to-value connection */
}

.project-facts .project-fact {
  margin-bottom: 8px;  /* space between fact groups */
}


/* Project Facts: label tone via fixed grey (no opacity) */
.project-facts .project-fact-label{
  color: rgb(160,160,160);
}


/* Lightbox: project link aligns like prev/next (text left, arrow right) */
.lightbox-project-link{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: end;
  justify-items: end;
  min-width: 0;
  justify-content: flex-end;
  gap: 10px;
}
.lightbox-project-link .lb-link-text{
  order: 1;
}
/* Lightbox caption uses same typography as grid tile titles */
.lightbox-caption{
  font-size: var(--fs-tiletitle);
  line-height: 1.1;
  color: var(--fg-subtle);
}


/* Lightbox project link more visible */
.lightbox-project-link{
  font-size: var(--fs-body);
  font-weight: 600;
}
/* === Unified project link system === */
.project-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  letter-spacing:0.02em;
}

.project-link svg{
  flex:0 0 auto;
}

/* Panel version (navigation list) */
.project-link--panel{
  font-size:var(--fs-small);
  font-weight:400;
  color:rgb(190,190,190);
}
.project-link--panel svg{
  width:12px;
  height:12px;
}

/* Lightbox version (context CTA) */
.project-link--lightbox{
  font-size:var(--fs-body);
  font-weight:600;
  color:rgb(255,255,255);
}
.project-link--lightbox svg{
  width:18px;
  height:18px;
}

/* Lightbox project link: code small, title normal (like right panel) */
.lightbox-project-link{
  gap: 10px;
}
.lightbox-project-link .lb-link-title{
  font-weight: 600;
}

/* Lightbox project link: align code vertically with title */



/* Tile title hover: keep it calm and readable (lighter grey, not darker) */
.tile:hover .tile-title { color: rgba(255,255,255,0.85); }






/* ===== Right panel spacing refined ===== */
.panel-about .panel-section-label{
  margin: 0 0 18px 0 !important; /* Heading → list (reduced) */
}
.panel-section-label.panel-section-label--sub{
  color: var(--fg-subtle);
  letter-spacing: 0.12em;
  font-weight: 400;
}
.panel-header .panel-section-label{
  margin-bottom: 0;
}
.panel-about .panel-section-label.panel-section-label--spaced{
  margin-top: 32px !important; /* Projects block → Archive block */
}
.panel-about .project-list,
.panel-about .publication-list,
.panel-about .archive-list{
  gap: 10px !important; /* Slightly more breathing room inside list */
}
.panel-about button.project-row{
  row-gap: 1px !important;
}


/* ===== Lightbox refinements ===== */

/* 1. Nudge project code (bottom right) 1px down */
.lightbox .project-link .code{
  transform: translateY(1px);
}

/* ===== Lightbox tweaks (code nudge, hover color, caption spacing) ===== */ (code nudge, hover color, caption spacing) ===== */

/* 1) Lightbox project link: nudge code 1px down */


/* 2) Lightbox project link: title turns yellow on hover/focus (like right panel) */
.project-link--lightbox:hover .lb-link-title,
.project-link--lightbox:focus-visible .lb-link-title,
.lightbox-project-link:hover .lb-link-title,
.lightbox-project-link:focus-visible .lb-link-title{
  color: var(--hover);
}

/* 3) Unify caption/tile title letter-spacing (match project headings style logic: no uppercase tracking) */
.lightbox-caption{
  font-size: var(--fs-tiletitle) !important;
  line-height: 1.1;
  color: var(--fg-subtle);
  letter-spacing: 0 !important;
  text-transform: none !important;
}



/* ===== Lightbox project link arrow size (hard) ===== */
.lightbox-project-link .lb-link-icon,
.project-link--lightbox svg{
  width: 24px !important;
  height: 24px !important;
}


/* Fine vertical alignment for lightbox arrow */
.lightbox-project-link .lb-link-icon,
.project-link--lightbox svg{
  transform: translateY(3px);
}


/* ===== Lightbox link arrow hover + tighter spacing ===== */

/* Arrow turns yellow on hover like project links */
.project-link--lightbox:hover svg,
.project-link--lightbox:focus-visible svg,
.lightbox-project-link:hover svg,
.lightbox-project-link:focus-visible svg{
  color: var(--hover);
  fill: currentColor;
}

/* Bring text and arrow closer together */
.lightbox-project-link{
  gap: 6px !important;
}

/* Lightbox: allow project code/title to breathe and cap title to two lines */
.lightbox-right{ min-width: 0; max-width: min(560px, 62vw); }

.lightbox-project-link .lb-link-title{
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lightbox-project-link .lb-link-icon-wrap{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  justify-self: end;
}


/* Smaller external-link arrows on info/state pages (not Lightbox) */
body:not(.lightbox) .panel-about .btn-icon,
body:not(.lightbox) .about-link-icon,
body:not(.lightbox) .project-link .btn-icon{
  width: 16px;
  height: 16px;
}


/* Small inline link arrows – baseline aligned */
a svg,
.fact-link svg,
.project-links a svg{
  position: relative;
  top: 0.08em;
  vertical-align: middle;
}

/* Prevent hover flicker by avoiding size/transform changes */
a svg,
.fact-link svg,
.project-links a svg{
  transition: opacity 0.15s ease, color 0.15s ease, fill 0.15s ease;
}


/* Lightbox arrows use image swap – never inherit small inline arrow rules */
.lightbox a svg,
.lightbox .fact-link svg{
  position: static;
  top: auto;
  vertical-align: baseline;
  transition: none;
}


/* === Small link arrow alignment fix (not lightbox) === */
.project-links a svg,
.fact-link svg{
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.08em;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* inherit hover color like text */
.project-links a:hover svg,
.fact-link:hover svg{
  color: var(--hover);
  opacity: 1;
}


/* Fine vertical alignment tweak for lightbox project link arrow */
.lightbox-project-link .lb-link-icon-wrap{
  transform: translateY(3px);
}


/* Lightbox project link code: match tile/project label typography */
.lightbox-project-link .lb-link-code{
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  margin: 0;
  transform: none;

  font-family: var(--font-mono);
}


/* Increase vertical spacing between code and title in Lightbox project link */
.lightbox-project-link{
  row-gap: 14px;
}


/* Lightbox project link: spacing between code (row 1) and title (row 2) */
.lightbox-project-link{
  column-gap: 6px !important;
  row-gap: 14px !important;
}


/* Force visible spacing between code and title in Lightbox */
.lightbox-project-link .lb-link-title{
  margin-top: 14px !important;
}


/* Lightbox project link: force separate row/column gaps (override legacy gap rules) */
.lightbox-project-link{
  gap: 0 !important;          /* neutralize older gap:6px/10px rules */
  column-gap: 6px !important; /* keep arrow close */
  row-gap: 14px !important;   /* more air between CODE and title */
}

   LIGHTBOX ONLY (Footer right): CODE + PROJECTNAME inline
   - Keeps CODE + TITLE next to each other (NOT stacked)
   - Increases horizontal spacing between CODE and TITLE
   - Micro vertical alignment: CODE ~1px lower vs title
   ========================================================= */

.lightbox .lightbox-footer .lightbox-project-link{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-end !important;

  /* hard reset any legacy grid/gap rules */
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;

  /* keep it behaving like a clean CTA */
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  min-width: 0;
}

.lightbox .lightbox-footer .lightbox-project-link .lb-link-code{
  /* desired spacing between CODE and TITLE */
  margin-right: 10px !important;

  /* tiny baseline correction */
  position: relative;
  top: 1px;

  white-space: nowrap;
}

.lightbox .lightbox-footer .lightbox-project-link .lb-link-title{
  margin: 0 !important;
  margin-right: 6px !important; /* title ↔ icon breathing room */

  /* prevent accidental stacking caused by margins/line breaks */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox .lightbox-footer .lightbox-project-link .lb-link-icon-wrap{
  flex: 0 0 32px;
  align-self: baseline;

  /* keep your existing “icon sits slightly lower” look */
  transform: translateY(3px);
}

/* Status colors (global) */
.tile-new,
.project-new,
.badge-new{ --badge-color: var(--new-badge); }

.tile-new.is-prototype,
.project-new.is-prototype,
.badge-prototype{ --badge-color: var(--prototype-badge); }

.tile-new.is-archive,
.project-new.is-archive,
.badge-archive{ --badge-color: var(--archive-badge); }

/* Apply the token to tile/project variants too */
.tile-new{ --badge-color: var(--new-badge); }
.tile-new.is-prototype{ --badge-color: var(--prototype-badge); }
.tile-new.is-archive{ --badge-color: var(--archive-badge); }
.tile-new.is-study{ --badge-color: var(--study-badge); }

.project-new{ --badge-color: var(--new-badge); }
.project-new.is-prototype{ --badge-color: var(--prototype-badge); }
.project-new.is-archive{ --badge-color: var(--archive-badge); }
.project-new.is-study{ --badge-color: var(--study-badge); }



/* --- Studium badge uses the same tone as tile titles (fg-subtle) --- */
.badge-study,
.tile-new.is-study,
.project-new.is-study{
  --badge-color: var(--study-badge);
}

/* Labor page: Kollaborateure list should wrap like normal text (no narrower widths) */
.project-col--text p.project-fact-value{
  width: 100%;
  max-width: none;
  line-height: inherit;
}

/* Mobile: show at least 3 tiles per row */
@media (max-width: 800px){
  .media-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px){
  .media-grid{ grid-template-columns: repeat(3, 1fr); }
}



/* Ensure project-fact-value inside long text keeps the fact value size
   (e.g., KOLLABORATEURE on LABOR page).
   Note: long-text content is rendered in .project-col--text, so we target both.
*/
.project-text p.project-fact-value,
.project-col--text p.project-fact-value{
  font-size: var(--fs-meta) !important;
  line-height: 1.35 !important;
}
/* ===== STEP PATCH v19 END ===== */



/* ===== STEP PATCH v20 START ===== */
/* F: Subtle tonal overlay to harmonize thumbnail brightness */
.tile,
.project-tile,
.grid-item{
  position: relative;
}

.tile::after,
.project-tile::after,
.grid-item::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0));
  pointer-events: none;
}
/* ===== STEP PATCH v20 END ===== */



/* ===== STEP PATCH v21 START ===== */
/* Hover: let thumbnails "light up" by fading out the tonal overlay */
.tile::after,
.project-tile::after,
.grid-item::after{
  transition: opacity 180ms ease;
  opacity: 1;
}

/* On hover, remove overlay (desktop) */
.tile:hover::after,
.project-tile:hover::after,
.grid-item:hover::after{
  opacity: 0;
}

/* Optional: keep overlay on touch devices (no hover) */
@media (hover: none){
  .tile:hover::after,
  .project-tile:hover::after,
  .grid-item:hover::after{
    opacity: 1;
  }
}
/* ===== STEP PATCH v21 END ===== */



/* ===== STEP PATCH v22 START ===== */
/* G: Tile "press" interaction like existing buttons (translateY on active) */
.tile,
.project-tile,
.grid-item{
  transition: transform 120ms ease;
  will-change: transform;
}

/* On press (mouse down / tap), nudge down slightly */
.tile:active,
.project-tile:active,
.grid-item:active{
  transform: translateY(var(--press));
}

/* Avoid press on touch scroll accidental? keep as-is; :active will only trigger on tap */
@media (prefers-reduced-motion: reduce){
  .tile,
  .project-tile,
  .grid-item{
    transition: none;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  summary,
  .lightbox-next,
  .lightbox-prev,
  .lightbox-close,
  .lightbox-project-link,
  .filter-pill,
  .filter-option,
  .pill,
  .tag,
  .tile,
  .project-tile,
  .grid-item{
    transition: none;
  }
}
/* ===== STEP PATCH v23 END ===== */


/* Clean status dots (overview tiles) */
.tile-dot{
  flex: 0 0 auto;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  border: none;
  color: var(--new-badge); /* default = NEU */
}

/* Status colors */
.tile-dot.is-new{ color: var(--new-badge); }
.tile-dot.is-prototype{ color: var(--prototype-badge); }
.tile-dot.is-archive{ color: var(--archive-badge); }
.tile-dot.is-study{ color: var(--study-badge); }
/* Project page headings/labels: mono, uppercase, dark grey */
.project-fact-label,
.panel-section-label,
[data-project-text-label]{
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Lightbox codes/captions: mono */
.lb-link-code,
.lightbox-caption,
.lightbox-caption *{
  font-family: var(--font-mono);
}

/* Overview status dots: true circles */
.tile-dot{
  flex: 0 0 auto;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  border: none;
  color: var(--new-badge); /* default = NEU */
}
.tile-dot.is-new{ color: var(--new-badge); }
.tile-dot.is-prototype{ color: var(--prototype-badge); }
.tile-dot.is-archive{ color: var(--archive-badge); }
.tile-dot.is-study{ color: var(--study-badge); }
/* ===== END FIX PACK ===== */

/* MONO enforcement */

.tile-title,
.lightbox-caption,
.lb-link-code,
.project-code,
.project-fact-label{
  font-family: var(--font-mono) !important;
}

/* Fix project media grid width */
/* Dot optical alignment */
.tile-dot{ position: relative; top: 0; }

/* Mono: tile titles, lightbox caption, codes, project labels */
.tile-title,
.tile-filename,
.lightbox-caption,
.lb-link-code,
.project-code,
.project-fact-label{
  font-family: var(--font-mono) !important;
}

/* Project + Labor grids should align with the main frame (no extra side padding here) */
@media (min-width: 1200px){
  .project-media-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* Dot optical alignment */
.tile-dot{ position: relative; top: 0; }


/* Project media grid: follow same container architecture as overview (frame provides side padding) */
.project-media-grid{
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px){
  .project-media-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Opener mono kicker */
.opener-kicker{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  margin-bottom: 14px;
}

/* Opener overline (replacement for MANIFEST) */
.opener-overline{
  font-family: var(--font-sans);
  font-weight: 500;
  /* Make the overline feel intentional (previously too tiny)
     Slightly larger than labels, but still clearly secondary. */
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.opener-overline--spacer{
  visibility: hidden;
}

/* ================================= */
/* OPENER: Gradient auf "beo"       */
/* ================================= */

.opener-title .beo-gradient {
  background: linear-gradient(90deg, #ff7a1c, #aaa0ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========================================= */
/* OPENER: Gradient auf "beo"               */
/* ========================================= */
.beo-gradient{
  background: linear-gradient(90deg,#ff7a1c,#aaa0ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}



/* (legacy Filter-Mehr/Weniger toggle rules removed — feature not used after v2026-02 rebuild) */

/* =========================================================
   MOBILE POLISH — iPhone widths
   - media grid: 2 cols on small phones, 3 cols otherwise
   - prevent sticky focus/hover styles on touch
========================================================= */
@media (max-width: 400px){
  .media-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 401px) and (max-width: 800px){
  .media-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* (legacy hover/tap rules for removed filter toggle deleted) */



/* ===============================
   v72 — Mobile filter polish (center rows + consistent rhythm)
   - Fix: media pills second row appears left-aligned on small phones (grid effect)
   - Fix: +/x toggle pill outer size matches other pills, but icon stays large
   - Fix: consistent vertical spacing between media group, toggle, and expanded groups
   =============================== */



/* ===============================
   v78 — Mobile filter final fixes
   1) + / x icon can be large WITHOUT changing pill outer size
   2) Mobile vertical spacing unified (no missing / extra gaps)
   =============================== */


/* =========================================================
   v12 — Mobile filter spacing (single source of truth)
   Fix: inconsistent vertical gaps around the +/X FILTER toggle on iOS.
========================================================= */

/* ===============================
   v81 — Robust fixes
   1) Left panel INFO links must be LEFT-aligned (not shrink-wrapped centered)
   2) Mobile: add real breathing room above the +/x FILTER toggle pill
   Placed at very end so it wins over legacy/duplicate rules.
   =============================== */

/* 1) LEFT PANEL — force container-based left alignment */
.panel-projects .panel-body{
  display: flex;
  justify-content: flex-start !important;
}
.panel-projects .media-list--links{
  width: 100% !important;
}
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .label{
  text-align: left !important;
  justify-self: start !important;
}

/* 2) MOBILE — ensure the toggle is not glued to the group above */

/* ===============================
   v82 — FINAL overrides
   - Mobile filter: ensure +/x FILTER row has breathing room (wins over v70 margin:0 !important)
   - Lightbox arrows: restore mix-blend-mode:difference
   =============================== */


/* ===============================
   v13 — Mobile filter rhythm (use GAP only)
   Ziel: Abstand zwischen "FILM"-Reihe und "+ FILTER" exakt wie zwischen Filterreihe 1 und 2.
   Lösung: Keine Margin-Stacking-Sonderfälle, sondern einheitliches gap.
   (Platzierung am Dateiende -> gewinnt gegen Altlasten inkl. !important.)
   =============================== */


/* Lightbox next/prev must blend against the media (white images included) */
.lightbox .lightbox-prev,
.lightbox .lightbox-next{
  mix-blend-mode: difference;
}
.lightbox .lightbox-prev .btn-icon,
.lightbox .lightbox-next .btn-icon{
  mix-blend-mode: inherit;
}

/* ===============================
   v22 — Mobile filter pills: centered wrapped rows (no orphan + no right-shift)
   - Flex-wrap + justify-content:center centers EACH line automatically.
   - Slight max-width constraint encourages a natural 3+2 wrap for 5 pills.
   =============================== */
/* ===============================
   v20 — Project page mobile spacing (readability)
   - Slightly more air between: code -> title -> badge -> "BESCHRIEB" -> text.
   =============================== */
@media (max-width: 720px){
  .project-header{ margin-bottom: 44px; }

  .project-mini{ margin-bottom: 14px; }

  .project-new{ margin-top: 14px; }

  /* "BESCHRIEB" label block spacing */
  .project-col--text .project-fact-label{ margin-top: 14px; }

  .project-col--text p{ margin-bottom: 20px; }
}

/* ===============================
   v20 — Left panel links: center container, width hugs content
   - Mirror the reliable centering behavior of the right panel.
   =============================== */
.panel-projects .media-group.nav-group{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel-projects .panel-section-label{
  width: fit-content !important;
  max-width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}

.panel-projects .media-list--links{
  width: fit-content !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links a.media-item{
  width: auto !important;
  max-width: 100% !important;
}

.panel-projects .panel-body{
  justify-content: center !important;
}

.panel-projects .media-group.nav-group{
  align-items: flex-start !important; /* internal left alignment */
  width: fit-content !important;
  max-width: calc(100% - (var(--content-pad) * 2)) !important;
}

/* The INFO label element carries both classes in markup */
.panel-projects .project-fact-label.panel-section-label{
  text-align: left !important;
  align-self: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* In case very narrow panels would clip: gently scale the menu typography */
@media (max-width: 900px){
  .panel-projects .media-list--links .media-item,
  .panel-projects .media-list--links a.media-item{
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1.05;
  }
}

/* 4) "Variante B (kompakter)" — apply consistently (desktop + mobile + landscape)
   Code → Titel: 10px
   Titel → Badge: 10px
   Badge → Abschnitt: 22px
   Abschnitt → Text: 12–14px
*/
.project-mini{ margin-bottom: 10px; }
.project-title{ margin: 0 0 10px; }
.project-new{ margin: 0 0 22px; }
.project-col--text .project-fact-label{ margin: 0 0 12px; }
.project-col--text p{ margin-top: 0; }

/* Worklist uses the same semantic blocks in this build; keep the rhythm identical */
.worklist .project-mini{ margin-bottom: 10px; }
.worklist .project-title{ margin: 0 0 10px; }
.worklist .project-new{ margin: 0 0 22px; }
.worklist .project-fact-label{ margin: 0 0 12px; }
.panel-about .panel-section-label{
  width: fit-content !important;
  max-width: 100% !important;
  text-align: left !important;
}
.panel-about .project-list,
.panel-about .publication-list,
.panel-about .archive-list{
  width: fit-content !important;
  max-width: 100% !important;
}
.panel-about .project-list > li,
.panel-about .publication-list > li,
.panel-about .archive-list > li{
  width: auto !important;
}

/* Footer blocks */
.panel-footer-left{ margin-top: auto; padding-top: var(--edge); }
.panel-footer-right{ margin-top: auto; padding-top: var(--edge); }

/* panel meta typography is defined further down (aligned to MAIN header/footer toggles) */

/* Panel link colors: default grey, hover/focus white (override global yellow hover)
   NOTE: left panel uses <button.media-item> for internal pages and <a.media-item> for Instagram.
   We style both via the shared .media-item selector.
   Keep the global --hover (yellow) for the rest of the site, but panels should go grey -> white. */
:root{
  /* panel/meta default grey (solid RGB, not opacity-dimming) */
  --c-ui-soft: rgb(186, 186, 186);
}

/* LEFT PANEL: info links */
.panel-projects .media-list--links .media-item{
  color: var(--c-ui-soft) !important;
}
.panel-projects .media-list--links .media-item .label{
  color: inherit !important;
}
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:focus-visible .label{
  color: #fff !important;
}

/* RIGHT PANEL: project names */
.panel-about .project-list .name,
.panel-about .publication-list .name,
.panel-about .archive-list .name{
  color: var(--c-ui-soft) !important;
}
.panel-about .project-list .name:hover,
.panel-about .project-list .name:focus-visible,
.panel-about .archive-list .name:hover,
.panel-about .archive-list .name:focus-visible{
  color: #fff !important;
  text-decoration: none;
}
.project-list .name.is-current,
.publication-list .name.is-current,
.archive-list .name.is-current{
  color: #fff !important;
}

/* Meta values: match panel default grey; meta links go white on hover */
.project-fact-value{ color: var(--c-ui-soft); }
.project-fact-value a{ color: var(--c-ui-soft); }
.project-fact-value a:hover,
.project-fact-value a:focus-visible{ color: #fff; }


/* === v136 footer alignment fixes === */
.panel-projects .panel-footer-left{
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: left;
}
.panel-copyright{
  text-transform: none !important;
}


/* === beo overrides (2026-02-23 17:08) === */

/* Unified soft UI grey for panels + metadata values (solid RGB, no opacity dimming) */
:root{
  --c-ui-soft: rgb(186,186,186);
}

/* Left panel footer: stick to bottom and align with the same left axis as the menu list */
.panel-projects .panel-body{ display:flex; flex-direction:column; }
.panel-projects .panel-footer-left{
  margin-top: auto !important;
  padding-top: var(--edge) !important;
  width: 100% !important;
}

/* Ensure the version text uses the same container left axis */
.panel-projects .panel-footer-left .panel-version{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(255,255,255,0.35);
}

/* Panel link colors: default soft grey, hover/focus white (no yellow) */
.panel-projects .media-list--links a,
.panel-about .project-list a,
.panel-about .publication-list a,
.panel-about .archive-list a{
  color: var(--c-ui-soft) !important;
  text-decoration: none;
}
.panel-projects .media-list--links a:hover,
.panel-projects .media-list--links a:focus-visible,
.panel-about .project-list a:hover,
.panel-about .project-list a:focus-visible,
.panel-about .publication-list a:hover,
.panel-about .publication-list a:focus-visible,
.panel-about .archive-list a:hover,
.panel-about .archive-list a:focus-visible{
  color: #fff !important;
}

/* Project list names inherit the link color (was appearing white due to other rules) */
.panel-about .project-list-name,
.panel-about .publication-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color: inherit !important;
}

/* Project meta values: soft grey (between old grey and white) */
.project-fact-value{
  color: var(--c-ui-soft) !important;
}
/* Meta links: soft grey -> white on hover */
.project-fact-value a,
.project-fact-value a:visited{
  color: var(--c-ui-soft) !important;
}
.project-fact-value a:hover,
.project-fact-value a:focus-visible{
  color: #fff !important;
}
.panel-projects .media-group.nav-group{ width: 100% !important; }
.panel-projects .panel-footer-left{
  width: 100% !important;
  text-align: left !important;
}
.panel-projects .panel-footer-left .panel-version{ text-align: left !important; }

/* 2) Side panels: DEFAULT white, HOVER/ACTIVE grey */
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links a,
.panel-projects .media-list--links .media-item .label,
.panel-about .project-list a,
.panel-about .archive-list a,
.panel-about .project-list .name,
.panel-about .archive-list .name,
.panel-about .project-list-name,
.panel-about .publication-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color: #fff !important;
}

/* Ensure list text actually follows link hover (avoid hard-coded white on inner spans) */
.panel-about .project-list-name,
.panel-about .publication-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color: inherit !important;
}

.panel-projects .media-list--links .media-item:hover,
.panel-projects .media-list--links .media-item:focus-visible,
.panel-projects .media-list--links a:hover,
.panel-projects .media-list--links a:focus-visible,
.panel-about .project-list a:hover,
.panel-about .project-list a:focus-visible,
.panel-about .publication-list a:hover,
.panel-about .publication-list a:focus-visible,
.panel-about .archive-list a:hover,
.panel-about .archive-list a:focus-visible,
.panel-about .project-list .name:hover,
.panel-about .project-list .name:focus-visible,
.panel-about .publication-list .name:hover,
.panel-about .publication-list .name:focus-visible,
.panel-about .archive-list .name:hover,
.panel-about .archive-list .name:focus-visible{
  color: var(--c-ui-soft) !important;
}

/* Left panel: force hover/active behavior onto inner label spans (some had their own colors). */
.panel-projects .media-list--links .media-item .label,
.panel-projects .media-list--links a .label{ color: inherit !important; }

.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:focus-visible .label,
.panel-projects .media-list--links a:hover .label,
.panel-projects .media-list--links a:focus-visible .label,
.panel-projects .media-list--links .media-item.is-current .label,
.panel-projects .media-list--links a.is-current .label{
  color: var(--c-ui-soft) !important;
}

/* Active/current items should also be grey (requested: hover/active) */
.project-list .name.is-current,
.publication-list .name.is-current,
.archive-list .name.is-current,
.panel-projects .media-list--links .media-item.is-current,
.panel-projects .media-list--links a.is-current{
  color: var(--c-ui-soft) !important;
}

/* Right panel current item: kill old accent highlight */
.panel-about button.project-row.is-current .project-list-name,
.panel-about button.project-row.is-current .project-list-code{
  color: var(--c-ui-soft) !important;
}

/* Lightbox footer project title: DEFAULT white, HOVER grey */
.lightbox-project-link .lb-link-title,
.lightbox .lb-link-title{
  color: #fff !important;
}
.project-link--lightbox:hover .lb-link-title,
.project-link--lightbox:focus-visible .lb-link-title,
.lightbox-project-link:hover .lb-link-title,
.lightbox-project-link:focus-visible .lb-link-title{
  color: var(--c-ui-soft) !important;
}

/* Kill any old yellow hover on lb-link-title */
.project-link--lightbox:hover .lb-link-title,
.lightbox-project-link:hover .lb-link-title{
  color: var(--c-ui-soft) !important;
}
.panel-projects .panel-body{
  display:flex;
  flex-direction:column;
}
.panel-left-content{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.panel-footer-left{
  margin-top:auto;
  align-self:flex-start;
}
/* ensure panel menu label can invert default/hover */
.panel-projects .media-list--links .media-item .label{
  color: var(--c-ui-strong) !important;
}
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item.is-active .label{
  color: var(--c-ui-soft) !important;
}

/* =========================================================
   HOTFIX: Panel centering + Home filter nav + Tile hover zoom
   (Aligned with nozoom behaviour + user feedback 2026-02-24)
   ========================================================= */

/* RIGHT PANEL (projects list): shrink container to content like nozoom panel-stack */
/* RIGHT PANEL: keep list left-aligned (match left panel) */
.panel-about .panel-body{
  display: block;
}

/* Ensure the inner block does not accidentally stretch wider than its contents */
.panel-about .project-list,
.panel-about .publication-list,
.panel-about .archive-list{
  width: 100%;
  max-width: none;
}

/* HOME: enable footer arrows to cycle filters (JS controls visibility) */
.footer .project-nav.is-filter-nav{
  /* same visuals, just semantic marker */
}


/* Place lightbox counter in the center slot of the footer grid */
.lightbox-footer .lightbox-counter{
  grid-column: 2;
  justify-self: center;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}


/* === Hyphenation for long German texts (projects + info pages) === */
.project-text,
.project-text p,
.project-col--text,
.project-col--text p,
.panel-body-inner p,
.panel-body-inner li{
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}


/* =========================================================
   Panels cleanup (2026-02-28 v25)
   - Left panel main is now ONE scroll container + ONE list node
   - Header/Footer typography + alignment mirrors MAIN header/footer
   ========================================================= */

/* Header label in panels: use the same typographic system as MAIN header toggles */
.panel-title{
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: clamp(0em, 0.18vw, 0.02em);
  text-transform: none;
  color: var(--fg-subtle);
  line-height: 1.15;
  font-size: clamp(10px, 2.2vw, 12px);
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* matches the toggle touch target */
}

/* Panel footer text: align + size like MAIN footer toggles */
.panel-version,
.panel-copyright{
  font: inherit;
  font-weight: 500;
  letter-spacing: clamp(0em, 0.18vw, 0.02em);
  color: var(--fg-subtle);
  line-height: 1.15;
  font-size: clamp(8px, 2.6vw, var(--fs-tiletitle));
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* mirrors toggle touch target + vertical centering */
}

/* Remove legacy centering hacks for the left panel (we want the same frame-axis as MAIN) */
.panel-projects .panel-body{
  display: block !important;
}
.panel-projects .media-list--links{
  width: 100% !important;
  margin: 0 !important;
}
.panel-projects .panel-footer-inner{
  justify-content: flex-start;
}


/* === PANEL: visible slice content anchoring (authoritative) ===================
   The panel overlay can be wider than the visible slice (slide animation).
   We anchor the content wrapper (.panel-inner) to the visible slice so that
   Header/Main/Footer are always in view.
============================================================================= */
.panel{ padding: 0; }

.panel-projects .panel-inner,
.panel-about .panel-inner{
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--panel-visible-x);
  /* Panels need a bit more breathing room than the MAIN shell.
     We override the shared `.frame` horizontal padding by redefining
     `--content-pad` locally (keeps mobile stable via clamp). */
  --content-pad: clamp(40px, 5vw, 72px);
  /* IMPORTANT: no block padding here.
     Header/Main/Footer heights must match the MAIN header/footer zones.
     Horizontal edge spacing comes from the shared `.frame` utility (same as MAIN). */
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.panel-projects .panel-inner{ right: 0; }
.panel-about  .panel-inner{ left: 0; }

/* ===============================
   v33 — Panel meta typography fixes (2026-03-01)
   - Version is MONO + UPPERSPACE (solid RGB, no opacity)
   - Ensure panel links use same weight as opener copy
   =============================== */

/* Panel links: lock weight to match opener (avoid legacy overrides making them heavier) */
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links a.media-item,
.panel-projects .media-list--links .label{
  font-weight: 500 !important;
}

/* Panel meta label "Struktur" stays subtle; Version is technical + receded */
.panel-projects .panel-footer-left .panel-version,
.panel-about .panel-footer-left .panel-version{
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 10px !important; /* clearly NOT Inter-sized */
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important; /* "UPPERSPACE" feel */
  color: rgb(95, 95, 95) !important; /* dark grey, solid RGB (visible on panel bg) */
}

/* Left panel footer currently has no left/right wrapper; target directly */
.panel-projects .panel-footer .panel-version{
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgb(95, 95, 95) !important;
}

/* v34 — small count badges next to left-panel links (Neuigkeiten / Werkliste) */
.panel-projects .media-list--links .nav-count{
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  /* tie badge to link color (default + hover) */
  color: currentColor;
  position: relative;
  top: -1.30em; /* v38: push higher so it reads like a real superscript */
}

/* v38 — optional square brackets (no parentheses) like a reference marker */
.panel-projects .media-list--links .nav-count::before{ content: "["; }
.panel-projects .media-list--links .nav-count::after{ content: "]"; }
.panel-projects .media-list--links .nav-count::before,
.panel-projects .media-list--links .nav-count::after{
  color: currentColor;
}

.panel-projects .media-list--links a:hover .nav-count,
.panel-projects .media-list--links a.is-active .nav-count{
  color: inherit;
}

/* On hover/active: keep badge tied to the link state */
.panel-projects .media-list--links .media-item:hover .nav-count,
.panel-projects .media-list--links .media-item:focus-visible .nav-count,
.panel-projects .media-list--links .media-item.is-active .nav-count{
  color: currentColor;
}

/* ------------------------------------------------------------
   RIGHT PANEL — rebuild to match left panel structure (v38)
------------------------------------------------------------ */

.panel-about .panel-title{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(165, 165, 165);
}

.panel-about .panel-tabs{
  display: inline-flex;
  gap: 10px;
  margin: 0 0 18px;
}

.panel-about .panel-tab{
  appearance: none;
  border: 1px solid rgb(55,55,55);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgb(28,28,28);
  color: rgb(210,210,210);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
}

.panel-about .panel-tab.is-active{
  border-color: rgb(190,190,190);
  background: rgb(24,24,24);
  color: #fff;
}

.panel-about .panel-tab:focus-visible{
  outline: 2px solid rgb(220,220,220);
  outline-offset: 2px;
}

/* Project rows: keep names plakativ, codes as subtle meta (Inter, not Mono) */
.panel-about .project-row{
  display: grid;
  grid-template-columns: 4.5ch 1fr;
  column-gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.panel-about .project-row .code{
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgb(255,255,255);
}

.panel-about .project-row .project-name{
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: rgb(255,255,255);
}

.panel-about .media-item--project:hover .project-row .project-name,
.panel-about .media-item--project:hover .project-row .code,
.panel-about .media-item--project:focus-visible .project-row .project-name,
.panel-about .media-item--project:focus-visible .project-row .code,
.panel-about .media-item--project.is-active .project-row .project-name,
.panel-about .media-item--project.is-active .project-row .code{
  color: var(--c-ui-soft);
}

/* When list is hidden via [hidden], keep layout clean */
.panel-about [hidden]{ display:none !important; }

/* ===== v51 finetune: right panel states + badge consistency + project polish ===== */

/* Right panel links should behave exactly like left panel:
   default white, hover soft grey, active/current soft grey + underline */
.panel-about .project-list a,
.panel-about .archive-list a,
.panel-about .project-list .project-row,
.panel-about .archive-list .project-row,
.panel-about .project-list .project-name,
.panel-about .archive-list .project-name,
.panel-about .project-list .code,
.panel-about .archive-list .code,
.panel-about .project-list-name,
.panel-about .archive-list .project-list-name,
.panel-about .project-list-code,
.panel-about .archive-list .project-list-code{
  color: #fff !important;
  text-decoration: none !important;
}

.panel-about .project-list a:hover,
.panel-about .project-list a:focus-visible,
.panel-about .archive-list a:hover,
.panel-about .archive-list a:focus-visible,
.panel-about .project-list a:hover .project-name,
.panel-about .project-list a:hover .code,
.panel-about .archive-list a:hover .project-name,
.panel-about .archive-list a:hover .code,
.panel-about .project-list a:focus-visible .project-name,
.panel-about .project-list a:focus-visible .code,
.panel-about .archive-list a:focus-visible .project-name,
.panel-about .archive-list a:focus-visible .code{
  color: var(--c-ui-soft) !important;
  text-decoration: none !important;
}

.panel-about .project-list a.is-current,
.panel-about .archive-list a.is-current,
.panel-about .project-list a.is-current .project-name,
.panel-about .archive-list a.is-current .project-name,
.panel-about .project-list a.is-current .project-list-name,
.panel-about .archive-list a.is-current .project-list-name,
.panel-about .project-list .media-item--project.is-active a,
.panel-about .archive-list .media-item--project.is-active a,
.panel-about .project-list .media-item--project.is-active .project-name,
.panel-about .archive-list .media-item--project.is-active .project-name{
  color: var(--c-ui-soft) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

/* Codes stay subtle and never get underline */
.panel-about .project-list a.is-current .code,
.panel-about .archive-list a.is-current .code,
.panel-about .project-list .media-item--project.is-active .code,
.panel-about .archive-list .media-item--project.is-active .code,
.panel-about .project-list a.is-current .project-list-code,
.panel-about .archive-list a.is-current .project-list-code,
.panel-about .project-list .media-item--project.is-active .project-list-code,
.panel-about .archive-list .media-item--project.is-active .project-list-code{
  color: var(--c-ui-soft) !important;
  text-decoration: none !important;
}

/* Slightly better readability for tile/project codes under images */
.tile-filename,
.tile-meta,
.tile-code,
.media-code,
.tile-caption-code{
  color: rgba(255,255,255,0.65) !important;
}

/* Tighter coupling between project code and project title on project pages */
.project-mini{ margin-bottom: 6px !important; }
.project-title{ margin: 0 0 6px !important; }

/* Opener: slightly tighter leading for stronger block */
.home-opener-copy{
  line-height: 1.18 !important;
}


/* =========================================================
   v52 — final panel/link/badge consistency fix
   ========================================================= */

:root{
  --panel-link-hover: rgb(186,186,186);
}

/* RIGHT PANEL — same interaction logic as left panel for Inter names:
   default white / hover soft grey / current soft grey + underline (NAME ONLY) */
.panel-about .project-row,
.panel-about .project-list .name,
.panel-about .publication-list .name,
.panel-about .archive-list .name{
  color: #fff !important;
  text-decoration: none !important;
}
.panel-about .project-row .project-list-name,
.panel-about .project-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color: #fff !important;
  text-decoration: none !important;
}
.panel-about .project-row:hover .project-list-name,
.panel-about .project-row:focus-visible .project-list-name,
.panel-about .project-list .name:hover .project-list-name,
.panel-about .project-list .name:focus-visible .project-list-name,
.panel-about .archive-list .name:hover .project-list-name,
.panel-about .archive-list .name:focus-visible .project-list-name{
  color: var(--panel-link-hover) !important;
  text-decoration: none !important;
}
.panel-about .project-row.is-current .project-list-name,
.panel-about .project-row.is-active .project-list-name,
.panel-about .project-list .name.is-current .project-list-name,
.panel-about .archive-list .name.is-current .project-list-name{
  color: var(--panel-link-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
/* project code remains quiet and never underlined */
.panel-about .project-row .project-list-code,
.panel-about .project-list .project-list-code,
.panel-about .publication-list .project-list-code,
.panel-about .archive-list .project-list-code{
  text-decoration: none !important;
  color: rgba(255,255,255,0.65) !important;
}

/* MAIN metadata links — default muted grey, hover white; no underline */
.fact-link,
.project-links a{
  color: var(--fg-muted) !important;
  text-decoration: none !important;
}
.fact-link:hover,
.fact-link:focus-visible,
.project-links a:hover,
.project-links a:focus-visible{
  color: #fff !important;
  text-decoration: none !important;
}
.fact-link svg,
.project-links a svg{
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
.fact-link:hover svg,
.fact-link:focus-visible svg,
.project-links a:hover svg,
.project-links a:focus-visible svg{
  color: #fff !important;
  stroke: currentColor !important;
}



/* =========================================================
   v54 — final interaction / badge / dot / meta cleanup
   ========================================================= */

:root{
  --ui-link-hover: rgb(186,186,186);
}

/* LEFT PANEL — same logic as right panel:
   default white / hover soft grey / active soft grey + underline */
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label,
.panel-projects .media-list--links .media-item .nav-count,
.panel-projects .media-list--links .media-item .nav-count::before,
.panel-projects .media-list--links .media-item .nav-count::after,
.panel-projects .media-list--links .media-item .ext-icon,
.panel-projects .media-list--links .media-item .ext-icon svg{
  color:#fff !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item:hover,
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:hover .nav-count,
.panel-projects .media-list--links .media-item:hover .nav-count::before,
.panel-projects .media-list--links .media-item:hover .nav-count::after,
.panel-projects .media-list--links .media-item:hover .ext-icon,
.panel-projects .media-list--links .media-item:hover .ext-icon svg,
.panel-projects .media-list--links .media-item:focus-visible,
.panel-projects .media-list--links .media-item:focus-visible .label,
.panel-projects .media-list--links .media-item:focus-visible .nav-count,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::before,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::after,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon svg{
  color:var(--ui-link-hover) !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item.is-active,
.panel-projects .media-list--links .media-item.is-active .label,
.panel-projects .media-list--links .media-item.is-active .nav-count,
.panel-projects .media-list--links .media-item.is-active .nav-count::before,
.panel-projects .media-list--links .media-item.is-active .nav-count::after,
.panel-projects .media-list--links .media-item.is-active .ext-icon,
.panel-projects .media-list--links .media-item.is-active .ext-icon svg{
  color:var(--ui-link-hover) !important;
  stroke:currentColor !important;
}
.panel-projects .media-list--links .media-item.is-active .label{
  text-decoration:underline !important;
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
}

/* RIGHT PANEL — name only follows interaction state */
.panel-about .project-list a,
.panel-about .archive-list a,
.panel-about .project-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color:#fff !important;
  text-decoration:none !important;
}
.panel-about .project-list a:hover .project-list-name,
.panel-about .archive-list a:hover .project-list-name,
.panel-about .project-list a:focus-visible .project-list-name,
.panel-about .archive-list a:focus-visible .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:none !important;
}
.panel-about .project-list a.is-current .project-list-name,
.panel-about .archive-list a.is-current .project-list-name,
.panel-about .project-list .media-item--project.is-active .project-list-name,
.panel-about .archive-list .media-item--project.is-active .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:underline !important;
  text-underline-offset:0.16em;
  text-decoration-thickness:1px;
}
.panel-about .project-list .project-list-code,
.panel-about .archive-list .project-list-code,
.panel-about .project-list a:hover .project-list-code,
.panel-about .archive-list a:hover .project-list-code,
.panel-about .project-list a.is-current .project-list-code,
.panel-about .archive-list a.is-current .project-list-code,
.panel-about .project-list .media-item--project.is-active .project-list-code,
.panel-about .archive-list .media-item--project.is-active .project-list-code{
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none !important;
}

/* MAIN metadata links — default muted grey, hover white, no underline */
.fact-link,
.project-links a,
.fact-link .fact-link-text,
.project-links a .fact-link-text{
  color:var(--fg-muted) !important;
  text-decoration:none !important;
}
.fact-link:hover,
.fact-link:hover .fact-link-text,
.fact-link:focus-visible,
.fact-link:focus-visible .fact-link-text,
.project-links a:hover,
.project-links a:hover .fact-link-text,
.project-links a:focus-visible,
.project-links a:focus-visible .fact-link-text{
  color:#fff !important;
  text-decoration:none !important;
}
.fact-link svg,
.project-links a svg{
  color:currentColor !important;
  stroke:currentColor !important;
  fill:none !important;
  opacity:1 !important;
}

/* ABOUT / LABOR collaborator list should be content-white, not label-grey */
.panel-about [data-about-collabs]{
  color:#fff !important;
}

/* Tile codes / dot rows: optical vertical centering */
.tile-meta,
.tile-caption,
.tile-filename{
  align-items:center;
}
.tile-dot{ position:relative; top:0.02em !important; }


/* === v55 authoritative interaction cleanup === */
:root{
  --ui-link-hover: rgb(186,186,186);
  --ui-link-muted: rgb(140,140,140);
  --ui-link-soft: rgb(110,110,110);
}

/* LEFT PANEL — default white / hover grey / active grey + underline */
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label,
.panel-projects .media-list--links .media-item .nav-count,
.panel-projects .media-list--links .media-item .nav-count::before,
.panel-projects .media-list--links .media-item .nav-count::after,
.panel-projects .media-list--links .media-item .ext-icon,
.panel-projects .media-list--links .media-item .ext-icon svg{
  color:#fff !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item:hover,
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:hover .nav-count,
.panel-projects .media-list--links .media-item:hover .nav-count::before,
.panel-projects .media-list--links .media-item:hover .nav-count::after,
.panel-projects .media-list--links .media-item:hover .ext-icon,
.panel-projects .media-list--links .media-item:hover .ext-icon svg,
.panel-projects .media-list--links .media-item:focus-visible,
.panel-projects .media-list--links .media-item:focus-visible .label,
.panel-projects .media-list--links .media-item:focus-visible .nav-count,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::before,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::after,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon svg{
  color:var(--ui-link-hover) !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item.is-active,
.panel-projects .media-list--links .media-item.is-active .label,
.panel-projects .media-list--links .media-item.is-active .nav-count,
.panel-projects .media-list--links .media-item.is-active .nav-count::before,
.panel-projects .media-list--links .media-item.is-active .nav-count::after,
.panel-projects .media-list--links .media-item.is-active .ext-icon,
.panel-projects .media-list--links .media-item.is-active .ext-icon svg{
  color:var(--ui-link-hover) !important;
  stroke:currentColor !important;
}
.panel-projects .media-list--links .media-item.is-active .label{
  text-decoration:underline !important;
  text-underline-offset:0.18em !important;
  text-decoration-thickness:1px !important;
}
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:focus-visible .label{
  text-decoration:none !important;
}

/* RIGHT PANEL — project NAME only follows interaction state */
.panel-about .project-list a,
.panel-about .publication-list a,
.panel-about .archive-list a{
  text-decoration:none !important;
}
.panel-about .project-list .project-list-name,
.panel-about .archive-list .project-list-name{
  color:#fff !important;
  text-decoration:none !important;
}
.panel-about .project-list .project-list-code,
.panel-about .publication-list .project-list-code,
.panel-about .archive-list .project-list-code{
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none !important;
}
.panel-about .project-list a:hover .project-list-name,
.panel-about .archive-list a:hover .project-list-name,
.panel-about .project-list a:focus-visible .project-list-name,
.panel-about .archive-list a:focus-visible .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:none !important;
}
.panel-about .project-list a.is-current .project-list-name,
.panel-about .archive-list a.is-current .project-list-name,
.panel-about .project-list .media-item--project.is-active .project-list-name,
.panel-about .archive-list .media-item--project.is-active .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:underline !important;
  text-underline-offset:0.16em !important;
  text-decoration-thickness:1px !important;
}
.panel-about .project-list a.is-current .project-list-code,
.panel-about .archive-list a.is-current .project-list-code,
.panel-about .project-list .media-item--project.is-active .project-list-code,
.panel-about .archive-list .media-item--project.is-active .project-list-code,
.panel-about .project-list a:hover .project-list-code,
.panel-about .archive-list a:hover .project-list-code,
.panel-about .project-list a:focus-visible .project-list-code,
.panel-about .archive-list a:focus-visible .project-list-code{
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none !important;
}

/* MAIN metadata links — default muted grey + grey arrow, hover white + white arrow, no underline */
.fact-link,
.project-links a,
.fact-link .fact-link-text,
.project-links a .fact-link-text{
  color:var(--ui-link-muted) !important;
  text-decoration:none !important;
}
.fact-link svg,
.project-links a svg,
.fact-link .link-arrow,
.project-links a .link-arrow{
  color:inherit !important;
  stroke:currentColor !important;
  fill:none !important;
}
.fact-link:hover,
.fact-link:hover .fact-link-text,
.fact-link:focus-visible,
.fact-link:focus-visible .fact-link-text,
.project-links a:hover,
.project-links a:hover .fact-link-text,
.project-links a:focus-visible,
.project-links a:focus-visible .fact-link-text{
  color:#fff !important;
  text-decoration:none !important;
}
.fact-link:hover svg,
.fact-link:focus-visible svg,
.project-links a:hover svg,
.project-links a:focus-visible svg{
  color:#fff !important;
  stroke:currentColor !important;
}

/* ABOUT/LABOR collaborators: content white, label subdued uppercase */
.panel-about [data-about-collabs]{
  color:#fff !important;
}
.tile-meta,
.tile-caption,
.tile-filename{
  align-items:center !important;
}
.tile-dot{ position:relative; top:0.03em !important; }

/* Opener slightly lighter than panel/project titles */
.home-opener-inner,
.home-opener-copy{
  font-weight:500 !important;
  line-height:1.18 !important;
}

/* =========================================================
   v56 mobile + consistency fixes (authoritative end overrides)
   ========================================================= */

/* Keep opener aligned with panel/project title weight again */
.home-opener-inner,
.home-opener-copy{
  font-weight:600 !important;
  line-height:1.22 !important;
}

/* Main content should use the same side insets as header/footer on small screens */
@media (max-width: 430px){
  :root{ --content-pad: 12px; }
}
@media (max-width: 360px){
  :root{ --content-pad: 10px; }
}

/* Left panel links: default white, hover soft grey, active soft grey + underline */
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label,
.panel-projects .media-list--links .media-item .nav-count,
.panel-projects .media-list--links .media-item .nav-count::before,
.panel-projects .media-list--links .media-item .nav-count::after,
.panel-projects .media-list--links .media-item .ext-icon,
.panel-projects .media-list--links .media-item .ext-icon svg{
  color:#fff !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item:hover,
.panel-projects .media-list--links .media-item:hover .label,
.panel-projects .media-list--links .media-item:hover .nav-count,
.panel-projects .media-list--links .media-item:hover .nav-count::before,
.panel-projects .media-list--links .media-item:hover .nav-count::after,
.panel-projects .media-list--links .media-item:hover .ext-icon,
.panel-projects .media-list--links .media-item:hover .ext-icon svg,
.panel-projects .media-list--links .media-item:focus-visible,
.panel-projects .media-list--links .media-item:focus-visible .label,
.panel-projects .media-list--links .media-item:focus-visible .nav-count,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::before,
.panel-projects .media-list--links .media-item:focus-visible .nav-count::after,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon,
.panel-projects .media-list--links .media-item:focus-visible .ext-icon svg{
  color:var(--c-ui-soft) !important;
  stroke:currentColor !important;
  text-decoration:none !important;
}
.panel-projects .media-list--links .media-item.is-active,
.panel-projects .media-list--links .media-item.is-active .label,
.panel-projects .media-list--links .media-item.is-active .nav-count,
.panel-projects .media-list--links .media-item.is-active .nav-count::before,
.panel-projects .media-list--links .media-item.is-active .nav-count::after,
.panel-projects .media-list--links .media-item.is-active .ext-icon,
.panel-projects .media-list--links .media-item.is-active .ext-icon svg{
  color:var(--c-ui-soft) !important;
  stroke:currentColor !important;
}
.panel-projects .media-list--links .media-item.is-active .label{
  text-decoration:underline !important;
  text-underline-offset:0.18em !important;
  text-decoration-thickness:1px !important;
}

/* Right panel: identical interaction logic, but underline ONLY the project name */
:root{ --ui-link-hover: var(--c-ui-soft); }
.panel-about .project-list a,
.panel-about .publication-list a,
.panel-about .archive-list a{ color:#fff !important; text-decoration:none !important; }
.panel-about .project-list .project-list-name,
.panel-about .archive-list .project-list-name{ color:#fff !important; text-decoration:none !important; }
.panel-about .project-list .project-list-code,
.panel-about .publication-list .project-list-code,
.panel-about .archive-list .project-list-code{ color:rgba(255,255,255,0.65) !important; text-decoration:none !important; }
.panel-about .project-list a:hover .project-list-name,
.panel-about .archive-list a:hover .project-list-name,
.panel-about .project-list a:focus-visible .project-list-name,
.panel-about .archive-list a:focus-visible .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:none !important;
}
.panel-about .project-list a.is-current .project-list-name,
.panel-about .archive-list a.is-current .project-list-name,
.panel-about .project-list .media-item--project.is-active .project-list-name,
.panel-about .archive-list .media-item--project.is-active .project-list-name{
  color:var(--ui-link-hover) !important;
  text-decoration:underline !important;
  text-underline-offset:0.16em !important;
  text-decoration-thickness:1px !important;
}
.panel-about .project-list a.is-current .project-list-code,
.panel-about .archive-list a.is-current .project-list-code,
.panel-about .project-list .media-item--project.is-active .project-list-code,
.panel-about .archive-list .media-item--project.is-active .project-list-code,
.panel-about .project-list a:hover .project-list-code,
.panel-about .archive-list a:hover .project-list-code,
.panel-about .project-list a:focus-visible .project-list-code,
.panel-about .archive-list a:focus-visible .project-list-code{
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none !important;
}

/* Landscape phones: make the left panel readable and keep more than one link visible */
@media (max-height: 500px) and (orientation: landscape){
  :root{ --panel-visible-x: min(58vw, 420px); }
  .panel-projects .panel-body{ overflow-y:auto; }
  .panel-projects .media-list--links{ gap: 10px !important; }
  .panel-projects .media-list--links .media-item,
  .panel-projects .media-list--links .label{
    font-size: clamp(18px, 6.2vh, 34px) !important;
    line-height: 1.04 !important;
  }
  .panel-projects .panel-header,
  .panel-projects .panel-footer,
  .panel-about .panel-header,
  .panel-about .panel-footer{ min-height: auto; }
}



/* Lightbox footer: true centered counter on mobile regardless of side controls */
@media (max-width: 800px){
  .lightbox-footer .footer-inner{ position: relative; }
  .lightbox-footer .lightbox-counter{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-self: auto !important;
    grid-column: auto !important;
    z-index: 2;
  }
}


/* =========================================================
   v59 — Mobile finish pass
   (filter pill touch rules removed in v102 filterbar rebuild)
   ========================================================= */

body.has-panel-open .content{
  pointer-events: none;
}

.panel,
.header,
.footer,
.lightbox,
.lightbox *{
  pointer-events: auto;
}

/* Lightbox footer: keep the counter truly centered, independent of left/right content. */
.lb-footer-v2-inner{
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.lb-footer-slot{
  display: inline-flex;
  align-items: center;
  min-height: var(--hitbox);
}

.lb-footer-slot--1{
  display: none;
}

.lb-footer-slot--2{
  grid-column: 1;
  justify-self: start;
}

.lb-footer-slot--3{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  grid-column: auto;
  justify-self: auto;
  z-index: 2;
}

.lb-footer-slot--4{
  grid-column: 2;
  justify-self: end;
}

.lb-footer-slot--5{
  grid-column: 3;
  justify-self: end;
}

.lb-footer-zone-left,
.lb-footer-zone-right,
.lightbox-counter,
.lb-project-toggle,
.lb-toggle-mono{
  display: inline-flex;
  align-items: center;
  min-height: var(--hitbox);
  line-height: 1;
}

.lb-footer-zone-left{
  justify-content: flex-start;
}

.lb-footer-zone-right{
  justify-content: flex-end;
}

.lightbox-counter{
  line-height: 1;
}

.lb-project-toggle{
  padding-top: 0;
  padding-bottom: 0;
}

/* Keep the media code fully flush with the frame edge. */
.lb-footer-zone-left .lb-toggle-mono,
.lb-footer-slot--2 .lb-toggle-mono{
  padding-left: 0;
  margin-left: 0;
}

/* Mobile: reduce collisions while preserving exact center. */
@media (max-width: 800px){
  .lb-footer-v2-inner{
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
  }

  .lb-footer-slot,
  .lb-footer-zone-left,
  .lb-footer-zone-right,
  .lightbox-counter,
  .lb-project-toggle,
  .lb-toggle-mono{
    min-height: 40px;
  }
}


/* === v60 authoritative cleanup (2026-03-15) ===============================
   - reduced grayscale system
   - unify panel footer tones
   - metadata links match metadata values
   - touch hover cleanup for filter pills
   - keep opener current, dots unchanged
============================================================================ */
:root{
  --bg: rgb(0,0,0);
  --fg: rgb(255,255,255);
  --panel-bg: rgb(20,20,20);
  --fg-dim: rgb(186,186,186);
  --fg-muted: rgb(186,186,186);
  --fg-subtle: rgb(110,110,110);
  --c-ui-soft: rgb(186,186,186);
  --c-body: var(--fg);
  --c-meta: rgb(186,186,186);
  --c-label: rgb(110,110,110);
  --ui-link-muted: rgb(186,186,186);
  --stage-top: rgba(0, 0, 0, 1);
  --stage-mid: rgba(0, 0, 0, 1);
  --stage-bot: rgba(0, 0, 0, 1);
}

.panel,
.panel-inner,
.panel-header,
.panel-body,
.panel-footer,
.panel-header-inner,
.panel-footer-inner{
  background: var(--panel-bg);
}

.project-col--facts,
.project-fact-value,
.project-fact-value p,
.project-fact-value span{
  color: var(--c-meta) !important;
}

.fact-link,
.fact-link:visited,
.project-links a,
.project-links a:visited,
.fact-link .fact-link-text,
.project-links a .fact-link-text,
.project-fact-value a,
.project-fact-value a:visited{
  color: var(--c-meta) !important;
}

.fact-link svg,
.project-links a svg,
.fact-link .link-arrow,
.project-links a .link-arrow,
.project-fact-value a svg,
.project-fact-value a .link-arrow{
  color: currentColor !important;
  stroke: currentColor !important;
}

.fact-link:hover,
.fact-link:hover .fact-link-text,
.fact-link:focus-visible,
.fact-link:focus-visible .fact-link-text,
.project-links a:hover,
.project-links a:hover .fact-link-text,
.project-links a:focus-visible,
.project-links a:focus-visible .fact-link-text,
.project-fact-value a:hover,
.project-fact-value a:focus-visible{
  color: var(--fg) !important;
}

.panel-footer .panel-version,
.panel-footer .panel-copyright,
.panel-projects .panel-footer .panel-version,
.panel-about .panel-footer .panel-version,
.panel-projects .panel-footer-left .panel-version,
.panel-about .panel-footer-left .panel-version{
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--c-label) !important;
}



/* Laborseite – Kollaborateure: gleiches Weiß, bewusst kompakter Satz wegen der langen Liste */
.project-col--text .labor-collabs-list{
  color: var(--fg) !important;
  font-size: var(--fs-meta) !important;
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: none !important;
}
.project-col--text .labor-collabs-list a,
.project-col--text .labor-collabs-list a:visited{
  color: inherit !important;
}


/* v62 — language + long-text refinement */
html[lang="de"],
html[lang="en"]{hyphens:auto;}
[data-project-text],
.worklist-wrap .project-header [data-project-text],
.news-wrap .project-header [data-project-text],
.project-text,
.project-fact-value,
.labor-collabs-list{hyphens:auto;overflow-wrap:break-word;word-break:normal;}
[data-project-text] p,
.project-text p,
.worklist-wrap .project-header [data-project-text] p,
.news-wrap .project-header [data-project-text] p{margin:0 0 1.05em 0;}
[data-project-text] p:last-child,.project-text p:last-child{margin-bottom:0;}


/* v64 — robust dot, badge and hyphenation cleanup */
.tile-dot{
  display:inline-block !important;
  flex:0 0 auto !important;
  inline-size:8px !important;
  block-size:8px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  max-width:8px !important;
  max-height:8px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-indent:-9999px !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
}
.tile-dot::before,
.tile-dot::after{
  content:none !important;
}
html, body,
.project-col--text,
.project-col--facts,
[data-project-text],
[data-project-text] p,
.project-fact-value,
.project-fact-value p,
.worklist-wrap [data-project-text],
.worklist-wrap [data-project-text] p,
.news-wrap [data-project-text],
.news-wrap [data-project-text] p,
.labor-collabs-list,
.labor-collabs-list p{
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}
[data-project-text],
[data-project-text] p,
.project-fact-value,
.project-fact-value p,
.labor-collabs-list{
  overflow-wrap:normal !important;
  word-break:normal !important;
  text-wrap:pretty;
}
[data-project-text] p,
.worklist-wrap [data-project-text] p,
.news-wrap [data-project-text] p{
  margin:0 0 1.1em 0 !important;
}
[data-project-text] p:last-child,
.worklist-wrap [data-project-text] p:last-child,
.news-wrap [data-project-text] p:last-child{
  margin-bottom:0 !important;
}
.project-code,
.tile-title,
.tile-filename,
.panel-version,
.lb-toggle-mono,
.lightbox-counter{
  font-size:12px !important;
  color:rgb(186,186,186) !important;
}


/* v65 — restore true tile dots + quieter mono hierarchy */
:root{
  --fg-dim: rgb(150,150,150);
  --fg-muted: rgb(150,150,150);
  --c-meta: rgb(150,150,150);
  --ui-link-muted: rgb(150,150,150);
}

.tile-dots{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.tile-dot{
  display:inline-block !important;
  flex:0 0 8px !important;
  inline-size:8px !important;
  block-size:8px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  max-width:8px !important;
  max-height:8px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-indent:-9999px !important;
  font-size:0 !important;
  line-height:0 !important;
  border-radius:50% !important;
  color:var(--fg-subtle) !important;
  background:currentColor !important;
  vertical-align:middle !important;
  position:relative !important;
  top:0.03em !important;
}
.tile-dot.is-new{ color: var(--new-badge) !important; }
.tile-dot.is-prototype{ color: var(--prototype-badge) !important; }
.tile-dot.is-archive{ color: var(--archive-badge) !important; }
.tile-dot.is-study{ color: var(--study-badge) !important; }

.project-code,
.tile-title,
.tile-filename,
.panel-version,
.lb-toggle-mono,
.lightbox-counter,
.lightbox-caption{
  color: rgb(150,150,150) !important;
  letter-spacing: 0.02em !important;
}

/* === v66 micro-refinement pack (2026-03-16) ==============================
   - tile mono hover to white
   - smaller dots globally
   - clearer separation: mono codes vs metadata values
   - lighter hero + tighter opener->filter rhythm
   - unified readable text measure across project/labor/news/legal/contact
============================================================================ */
:root{
  --mono-code: rgb(150,150,150);
  --meta-value: rgb(186,186,186);
  --meta-label: rgb(110,110,110);
}

/* hero / home rhythm */
.home-opener{
  min-height: 29vh !important;
}
.home-opener-inner{
  top: -16px !important;
}
.home-opener-copy{
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 1.16 !important;
}
.tile-dots{
  gap: 5px !important;
}
.tile-dot{
  flex: 0 0 5px !important;
  inline-size: 5px !important;
  block-size: 5px !important;
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  max-width: 5px !important;
  max-height: 5px !important;
  top: 0.02em !important;
}

/* mono system */
.project-code,
.tile-title,
.tile-filename,
.panel-version,
.lb-toggle-mono,
.lightbox-counter,
.lightbox-caption{
  color: var(--mono-code) !important;
  letter-spacing: 0.02em !important;
}
.project-col--facts,
.project-fact-value,
.project-fact-value p,
.project-fact-value span,
.fact-link,
.fact-link:visited,
.project-links a,
.project-links a:visited,
.fact-link .fact-link-text,
.project-links a .fact-link-text,
.project-fact-value a,
.project-fact-value a:visited{
  color: var(--meta-value) !important;
}

/* tiles: stronger interactive focus */
.tile:hover .tile-title,
.tile:hover .tile-filename,
.tile:focus-within .tile-title,
.tile:focus-within .tile-filename{
  color: var(--fg) !important;
}

/* project / labor / news / legal / contact text measure + rhythm */
.project-text,
.project-text p,
.project-col--text,
.project-col--text p,
[data-project-text],
[data-project-text] p,
.worklist-wrap [data-project-text],
.worklist-wrap [data-project-text] p,
.news-wrap [data-project-text],
.news-wrap [data-project-text] p,
.legal-section,
.contact-address,
.panel-about .about-list,
.panel-about .about-list li,
.panel-about [data-about-collabs]{
  max-width: 62ch !important;
}
.project-text,
.project-text p,
.project-col--text,
.project-col--text p,
[data-project-text],
[data-project-text] p,
.worklist-wrap [data-project-text],
.worklist-wrap [data-project-text] p,
.news-wrap [data-project-text],
.news-wrap [data-project-text] p,
.legal-section,
.contact-address{
  line-height: 1.68 !important;
}

/* navigation panel: quieter code column without opacity */
.panel-projects .project-list-code,
.panel-about .project-list-code{
  color: rgb(110,110,110) !important;
}


/* === v67 final polish (2026-03-16) =======================================
   - restore opener scale after oversized hero regression
   - project mini/code on project pages uses darker mono label tone
   - dots one step larger again (tiles + special pills)
   - lightbox/project footer parity prepared via linked-hover classes
   - worklist/news rhythm slightly unified
============================================================================ */
:root{
  --mono-code: rgb(150,150,150);
  --meta-value: rgb(186,186,186);
  --meta-label: rgb(110,110,110);
}

/* 1) opener back exactly to the v65 baseline */
.home-opener{
  min-height: 33vh !important;
  margin-bottom: 0 !important;
}
.home-opener-inner{
  top: -22px !important;
}
.home-opener-copy{
  font-size: var(--fs-title) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

/* 2) project page mini/code should read like the darker mono label system */
.project-view .project-mini,
.project-view [data-project-code],
.project-view .project-header .project-code,
.project-header .project-mini{
  color: var(--meta-label) !important;
}

/* keep fact values/links at the lighter meta value tone */
.project-fact-value,
.project-fact-value p,
.project-fact-value span,
.project-fact-value a,
.project-fact-value a:visited,
.fact-link,
.fact-link:visited,
.project-links a,
.project-links a:visited{
  color: var(--meta-value) !important;
}
.tile-dots{
  gap: 6px !important;
}
.tile-dot{
  flex: 0 0 6px !important;
  inline-size: 6px !important;
  block-size: 6px !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  max-width: 6px !important;
  max-height: 6px !important;
}

/* 4) lightbox/project footer linked-hover should mirror regular footer behavior */
.lb-project-toggle.is-linked-hover,
.lightbox .lb-project-toggle.is-linked-hover,
.lightbox .project-next.is-linked-hover{
  color: var(--c-ui-soft) !important;
}
.lightbox .project-next.is-linked-hover .btn-icon,
.lightbox .project-next.is-linked-hover svg{
  color: var(--c-ui-soft) !important;
}

/* 5) keep tile mono white on hover/focus */
.tile:hover .tile-title,
.tile:hover .tile-filename,
.tile:focus-within .tile-title,
.tile:focus-within .tile-filename{
  color: var(--fg) !important;
}

/* 6) slightly tighter, more even News / Werkliste rhythm */
.worklist .project-mini,
.news-wrap .project-mini{
  margin-bottom: 8px !important;
}
.worklist .project-title,
.news-wrap .project-title{
  margin: 0 0 8px !important;
}
.worklist-wrap .project-header,
.news-wrap .project-header{
  margin-bottom: 46px !important;
}


/* v72 — unify spacing between LABOR metadata sections */
.labor-meta-section{
  margin: 0;
}
.labor-meta-section + .labor-meta-section{
  margin-top: 24px;
}
.labor-meta-section .project-text-subhead{
  margin-top: 0;
}
.labor-meta-section p{
  margin: 0 !important;
}


/* v77 — booklet viewer for publication projects */
.booklet-viewer{
  width: 100%;
  margin-top: var(--edge);
  margin-bottom: calc(var(--edge) * 1.2);
}
.booklet-viewer__inner{
  width: 100%;
}
.booklet-viewer__stage{
  position: relative;
  min-height: 420px;
}
.booklet-viewer__figure{
  position: relative;
  --booklet-spine-top: 6px;
  --booklet-spine-height: calc(var(--booklet-media-height, 72vh) - 12px);
  background: transparent;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(56px, 6vw, 88px);
  overflow: hidden;
}
.booklet-viewer__spine{
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.28);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: .9;
  z-index: 2;
}
.booklet-viewer__image{
  width: 100%;
  max-height: 66vh;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity;
}
.booklet-viewer__figure.is-flip-next .booklet-viewer__image{
  animation: bookletFlipNext 320ms cubic-bezier(.22,.61,.36,1);
}
.booklet-viewer__figure.is-flip-prev .booklet-viewer__image{
  animation: bookletFlipPrev 320ms cubic-bezier(.22,.61,.36,1);
}
@keyframes bookletFlipNext{
  0%{ opacity:.55; transform:translate3d(28px,0,0) scale(.985); }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes bookletFlipPrev{
  0%{ opacity:.55; transform:translate3d(-28px,0,0) scale(.985); }
  100%{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.booklet-viewer__meta{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
}
.booklet-viewer__chapters{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  margin-top: 0;
}
.booklet-viewer__chapter{
  appearance: none;
  border: 0;
  background: none;
  padding: 0 3px;
  min-width: 16px;
  height: 24px;
  font-family: Inter, var(--font-sans), sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgb(110,110,110);
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
.booklet-viewer__chapter:hover,
.booklet-viewer__chapter:focus-visible{
  color: rgb(186,186,186);
  outline: none;
}
.booklet-viewer__chapter.is-active{
  color: rgb(255,255,255);
}
.booklet-viewer__counter{
  min-width: 8ch;
  justify-self: center;
  margin-top: 0;
}
.booklet-nav{
  width: var(--hitbox);
  height: var(--hitbox);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.booklet-nav--prev{ left: 0; }
.booklet-nav--next{ right: 0; }
.booklet-nav:active{
  transform: translateY(-50%) translateY(var(--press));
}
@media (max-width: 800px){
  .booklet-viewer__stage,
  .booklet-viewer__figure{
    min-height: 280px;
  }
  .booklet-viewer__figure{
    padding-left: 44px;
    padding-right: 44px;
  }
}


/* v78 — hierarchy: smaller media nav icons + publication panel + mobile opener */
.lightbox .lightbox-prev .btn-icon,
.lightbox .lightbox-next .btn-icon,
.booklet-nav .btn-icon{
  width: 32px;
  height: 32px;
}
.booklet-nav,
.lightbox-stage .project-nav{
  width: var(--hitbox);
  height: var(--hitbox);
}
.booklet-viewer__figure{
  --booklet-media-height: min(66vh, 860px);
  padding: 0 clamp(44px, 4vw, 64px);
  min-height: var(--booklet-media-height);
}
.booklet-viewer__spine{
  top: var(--booklet-spine-top, 6px);
  bottom: auto;
  height: var(--booklet-spine-height, calc(var(--booklet-media-height) - 12px));
  transform: translateX(-50%);
}
.booklet-viewer__figure.is-single .booklet-viewer__spine{
  display: none;
}
.booklet-viewer__image{
  width: auto;
  height: var(--booklet-media-height);
  max-width: min(100%, 1200px);
  max-height: var(--booklet-media-height);
}
.booklet-viewer__figure.is-flip-next .booklet-viewer__image,
.booklet-viewer__figure.is-flip-prev .booklet-viewer__image{
  animation: none !important;
}
@media (max-width: 800px){
  .booklet-viewer__figure{
    padding-left: 40px;
    padding-right: 40px;
    --booklet-media-height: min(48vh, 460px);
  }
  .booklet-viewer__image{
    max-width: calc(100% - 8px);
  }
  .booklet-viewer__spine{
    display: none;
  }
}



.tile-thumb{
  background: rgba(255,255,255,.04);
}
.tile-thumb img,
.tile-thumb video{
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}
.tile-thumb img.is-media-loading{
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.015);
}
.tile-thumb img.is-media-ready{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* v81 — media protection discouragement */
.tile-media, .lightbox-media, .booklet-viewer__image, .project-media img, .project-media video{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* v82 — publication pages: booklet above header, excerpt tiles below */
.booklet-viewer--publication-top{
  margin-top: 0;
  margin-bottom: calc(var(--edge) * 1.2);
}
.project-view .booklet-viewer + .project-header{
  margin-top: 0;
}
.project-view .booklet-viewer + .project-header .project-col--title{
  padding-top: 0;
}
.project-view .project-media-grid{
  margin-top: calc(var(--edge) * 0.4);
}


/* v90 — booklet chapter nav visibility hardening */
.booklet-viewer__meta > [data-booklet-chapters]{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
.booklet-viewer__chapters[hidden]{
  display:none !important;
}
.booklet-viewer__chapters{
  margin-bottom:0;
}
.booklet-viewer__chapter{
  font-family:Inter,var(--font-sans),sans-serif !important;
  font-weight:500;
}
.booklet-viewer__chapter[aria-pressed="true"]{
  color:rgb(255,255,255);
}

/* =========================================================
   v96 — responsive opener cleanup + booklet meta rebalance
   ========================================================= */

/* Opener:
   One responsive system for all viewport sizes.
   - same typographic basis as the left panel links
   - no separate mobile font stack/weight hacks
   - less vertical offset on small screens so the block stays optically centered */
.home-opener{
  min-height: clamp(150px, 30vh, 360px) !important;
}
.home-opener-inner{
  width: 100%;
  max-width: min(100%, 22ch);
  padding-inline: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
  top: clamp(-22px, -1.8vw, -8px) !important;
  gap: 0 !important;
}
.home-opener-copy,
.home-opener-copy .opener-line,
.home-opener-copy .opener-line-nowrap{
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.home-opener-copy{
  width: 100%;
  margin: 0 auto;
  font-size: clamp(24px, 5.2vw, 34px) !important;
  line-height: 1.08 !important;
  text-align: center;
  text-wrap: balance;
}
.home-opener-copy .opener-line,
.home-opener-copy .opener-line-nowrap{
  display: inline;
  white-space: normal !important;
}
.home-opener-copy br{
  display: block;
}

/* Booklet meta stack:
   The previous pass became too tight.
   Proposal: give the whole block a little more breathing room again,
   while keeping NAV and COUNTER visibly connected as one unit. */
.booklet-viewer__meta{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px !important;
  margin-top: 20px !important;
}
.booklet-viewer__chapters{
  min-height: 18px !important;
  height: auto;
  margin: 0 !important;
  line-height: 1 !important;
}
.booklet-viewer__chapter{
  height: auto !important;
  min-height: 18px !important;
  line-height: 1 !important;
  padding: 0 3px !important;
}
.booklet-viewer__counter{
  min-width: 8ch;
  min-height: 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.booklet-viewer__counter .lb-counter-left,
.booklet-viewer__counter .lb-counter-dash,
.booklet-viewer__counter .lb-counter-right{
  line-height: 1 !important;
}

/* =========================================================
   v97 — opener line stability + booklet meta micro-spacing
   ========================================================= */

/* Opener:
   keep the authored 3-line structure stable instead of balancing across lines.
   Slightly widen the block and let the font scale lower on very narrow screens,
   so the first line stays intact on desktop and iPhone SE alike. */
.home-opener-inner{
  max-width: min(100%, 28ch) !important;
}
.home-opener-copy{
  width: auto !important;
  max-width: 100%;
  font-size: clamp(18.5px, 4.6vw, 34px) !important;
  line-height: 1.04 !important;
  text-wrap: initial !important;
}
.home-opener-copy .opener-line,
.home-opener-copy .opener-line-nowrap{
  display: block !important;
  white-space: nowrap !important;
}
.home-opener-copy br{
  display: none !important;
}

/* Booklet meta:
   only a slight vertical opening between chapter nav and counter. */
.booklet-viewer__meta{
  gap: 6px !important;
  margin-top: 22px !important;
}




/* =========================================================
   v101 — booklet stage stays fixed; single/double scaling split cleanly
   ========================================================= */

/* Booklet:
   Keep one consistent stage height, but do not let both page formats scale
   with the same rule. Singles/covers should read by height; spreads should
   read by width. JS already marks the figure with .is-single / .is-double. */
.booklet-viewer__stage{
  --booklet-stage-height: min(72vh, 960px);
  min-height: var(--booklet-stage-height);
  display: flex;
  align-items: center;
}
.booklet-viewer__figure{
  width: 100%;
  min-height: var(--booklet-stage-height);
  height: var(--booklet-stage-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default = singles / cover / back cover: use reference spread height */
.booklet-viewer__image,
.booklet-viewer__figure.is-single .booklet-viewer__image{
  width: auto;
  height: var(--booklet-single-target-height, var(--booklet-stage-height));
  max-width: 100%;
  max-height: var(--booklet-single-target-height, var(--booklet-stage-height));
  margin: 0 auto;
}

/* Spreads: fill the available width inside the same stage */
.booklet-viewer__figure.is-double .booklet-viewer__image{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: var(--booklet-stage-height);
  margin: 0 auto;
}

.booklet-viewer__figure.is-double{
  padding-left: clamp(44px, 4vw, 64px);
  padding-right: clamp(44px, 4vw, 64px);
}

@media (max-width: 800px){
  .booklet-viewer__stage{
    --booklet-stage-height: min(56vh, 560px);
  }
  .booklet-viewer__figure{
    min-height: var(--booklet-stage-height);
    height: var(--booklet-stage-height);
    padding-left: 40px;
    padding-right: 40px;
  }
}


.panel-about .teaching-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.panel-about .teaching-list .project-item {
  display: block !important;
  margin-bottom: 14px !important;
}
.panel-about .teaching-list button.name,
.panel-about .teaching-list .name.project-row {
  cursor: pointer !important;
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
.panel-about .teaching-list .project-list-code {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  min-width: 4ch !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,0.65) !important;
}
.panel-about .teaching-list .project-list-name {
  font-size: var(--fs-project-title) !important;
  font-weight: var(--fw-project-title) !important;
  line-height: var(--lh-project-title) !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.panel-about .teaching-list .name:hover .project-list-name,
.panel-about .teaching-list .name:focus-visible .project-list-name,
.panel-about .teaching-list .name.is-current .project-list-name {
  color: var(--hover) !important;
  text-decoration: none !important;
}
.panel-about .project-list-archive-spacer {
  display: block !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.panel-about .project-list .project-item.is-panel-archive-item .name,
.panel-about .project-list .project-item.is-panel-archive-item .project-list-name {
  color: rgb(150,150,150) !important;
}
.panel-about .project-list .project-item.is-panel-archive-item .project-list-code {
  color: rgb(125,125,125) !important;
}


/* === PANEL CLEAN RESET 2026 === */
/* Rechtes Panel: eigener Namespace, kein Einfluss auf linkes Panel. */
.panel-about .beo-panel-tabs-clean {
  display: flex !important;
  gap: 16px !important;
  align-items: baseline !important;
}

.panel-about .beo-panel-tab-clean {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: rgb(105,105,105) !important;
  cursor: pointer !important;
}

.panel-about .beo-panel-tab-clean:hover,
.panel-about .beo-panel-tab-clean:focus-visible,
.panel-about .beo-panel-tab-clean.is-active {
  color: #fff !important;
}

.panel-about .beo-panel-nav-clean {
  display: block !important;
}

.panel-about .beo-panel-list-clean {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.panel-about .beo-panel-list-clean[hidden] {
  display: none !important;
}

.panel-about .beo-panel-item-clean {
  display: block !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

.panel-about .beo-panel-gap-clean {
  display: block !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.panel-about .beo-panel-row-clean {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  grid-template-columns: 4.5ch max-content !important;
  column-gap: 22px !important;
  align-items: baseline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
}

.panel-about .beo-panel-code-clean {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: rgb(170,170,170) !important;
  white-space: nowrap !important;
}

.panel-about .beo-panel-title-clean {
  display: inline-block !important;
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  white-space: nowrap !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-decoration: none !important;
}

.panel-about .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-row-clean:focus-visible .beo-panel-title-clean,
.panel-about .beo-panel-row-clean.is-current .beo-panel-title-clean {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.12em !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-code-clean {
  color: rgb(125,125,125) !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-title-clean {
  color: rgb(150,150,150) !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:focus-visible .beo-panel-title-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean.is-current .beo-panel-title-clean {
  color: rgb(170,170,170) !important;
}

/* Kontext: Institut und Professor/Betreuung zweizeilig anzeigen. */
[data-project-context] { white-space: pre-line !important; }


/* === v188 — opener trademark refinement (2026-05-12) =====================
   - bring back beo™ in opener, but quieter and optically smaller
   - opener visibility logic remains unchanged: only on Alle/start state
============================================================================ */
.home-opener-copy .opener-tm{
  display: inline-block;
  font-size: 0.58em;
  line-height: 1;
  font-weight: inherit;
  vertical-align: super;
  transform: translateY(-0.03em);
  margin-left: 0.03em;
}


/* === BRAND + RIGHT PANEL STATES 2026-05-12 === */
.brand-tm{
  font-size: 0.58em;
  line-height: 0;
  vertical-align: super;
  font-weight: inherit;
  letter-spacing: 0;
}

/* Rechtes Panel: gleiche Logik wie links — Hover dunkler, Active unterstrichen. */
.panel-about .beo-panel-row-clean .beo-panel-title-clean,
.panel-about .beo-panel-row-clean .beo-panel-code-clean{
  text-decoration: none !important;
}

.panel-about .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-row-clean:focus-visible .beo-panel-title-clean,
.panel-about .beo-panel-row-clean:hover .beo-panel-code-clean,
.panel-about .beo-panel-row-clean:focus-visible .beo-panel-code-clean{
  color: rgb(186,186,186) !important;
  text-decoration: none !important;
}

.panel-about .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color: rgb(186,186,186) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.12em !important;
}

.panel-about .beo-panel-row-clean.is-current .beo-panel-code-clean{
  color: rgb(186,186,186) !important;
  text-decoration: none !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:focus-visible .beo-panel-title-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:hover .beo-panel-code-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:focus-visible .beo-panel-code-clean{
  color: rgb(170,170,170) !important;
  text-decoration: none !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color: rgb(170,170,170) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.12em !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean.is-current .beo-panel-code-clean{
  color: rgb(170,170,170) !important;
  text-decoration: none !important;
}
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:hover .beo-panel-code-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:focus-visible .beo-panel-code-clean{
  color: rgb(105,105,105) !important;
  text-decoration: none !important;
}
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color: rgb(150,150,150) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.12em !important;
}
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean.is-current .beo-panel-code-clean{
  color: rgb(125,125,125) !important;
  text-decoration: none !important;
}

/* Right panel: minimally more breathing room between list entries. */
.panel-about .beo-panel-item-clean{
  margin-bottom: 8px !important;
}
.panel-about .beo-panel-gap-clean{
  height: 20px !important;
  min-height: 20px !important;
}


/* v-project-banner — reduced editorial project opener */
.project-banner{
  position: relative;
  width: 100vw;
  height: clamp(340px, 60vh, 780px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(var(--edge) * -1);
  margin-bottom: calc(var(--edge) * 1.15);
  overflow: hidden;
  background: rgb(0,0,0);
}
.project-banner[hidden]{ display:none !important; }
.project-banner-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
@media (max-width: 800px){
  .project-banner{
    height: clamp(300px, 48vh, 520px);
    margin-bottom: calc(var(--edge) * 0.95);
  }
}
@media (max-width: 480px){
  .project-banner{
    height: 320px;
  }
}

/* v-project-banner-fullbleed-top — banner starts at browser top behind transparent header */
body.has-project-banner .main{
  padding-top: 0;
}
body.has-project-banner .main-inner{
  padding-top: 0;
}
body.has-project-banner .project-banner{
  margin-top: 0;
}


/* v-project-banner-booklet-sync — align project/booklet text start on one opener grid */
:root{
  --project-opener-stage-height: clamp(340px, 60vh, 780px);
  --publication-opener-stage-height: clamp(340px, 60vh, 780px);
}
.project-banner{
  height: var(--project-opener-stage-height);
}
.booklet-viewer.booklet-viewer--publication-top{
  margin-top: 0;
  margin-bottom: calc(var(--edge) * 1.15);
}
.booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: var(--publication-opener-stage-height);
}
@media (max-width: 800px){
  :root{
    --project-opener-stage-height: clamp(300px, 48vh, 520px);
    --publication-opener-stage-height: clamp(300px, 48vh, 520px);
  }
}
@media (max-width: 480px){
  :root{
    --project-opener-stage-height: 320px;
    --publication-opener-stage-height: 320px;
  }
}


/* v-project-booklet-opener-sync-final — shared text-start grid for project banners and publication booklets */
:root{
  --publication-opener-stage-height: clamp(340px, 60vh, 780px);
  --opener-sync-meta-offset: 68px;
  --project-opener-stage-height: calc(var(--publication-opener-stage-height) + var(--opener-sync-meta-offset));
}
.project-banner{
  height: var(--project-opener-stage-height) !important;
}
.project-banner-img{
  object-position: center 42% !important;
}
.booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: var(--publication-opener-stage-height) !important;
}
.booklet-viewer.booklet-viewer--publication-top{
  margin-top: 0 !important;
  margin-bottom: calc(var(--edge) * 1.15) !important;
}
.project-view .booklet-viewer + .project-header,
body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}
@media (max-width: 800px){
  :root{
    --publication-opener-stage-height: clamp(300px, 48vh, 520px);
    --opener-sync-meta-offset: 58px;
  }
}
@media (max-width: 480px){
  :root{
    --publication-opener-stage-height: 320px;
    --opener-sync-meta-offset: 54px;
  }
}

/* v-project-booklet-opener-sync-pixel — real shared header baseline
   Booklet pages contain stage + chapter nav + counter + booklet bottom gap before
   the project-header. Project banner pages therefore need the same total opener
   height, not only the visible image height. */
:root{
  --publication-opener-stage-height: clamp(340px, 60vh, 780px);
  --publication-opener-meta-stack: 126px;
  --project-opener-stage-height: calc(var(--publication-opener-stage-height) + var(--publication-opener-meta-stack));
}
.project-banner{
  height: var(--project-opener-stage-height) !important;
  margin-bottom: 0 !important;
}
.booklet-viewer.booklet-viewer--publication-top{
  margin-top: 0 !important;
  margin-bottom: calc(var(--edge) * 1.15) !important;
}
.booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: var(--publication-opener-stage-height) !important;
}
.project-view .booklet-viewer + .project-header,
body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}
@media (max-width: 800px){
  :root{
    --publication-opener-stage-height: clamp(300px, 48vh, 520px);
    --publication-opener-meta-stack: 112px;
  }
}
@media (max-width: 480px){
  :root{
    --publication-opener-stage-height: 320px;
    --publication-opener-meta-stack: 96px;
  }
}

/* v-opener-sync-clean — final shared text-start for project banners + publication booklets
   The text start is defined as one common total opener height. Project pages get
   a small black breathing gap below the image; booklet pages include cover + chapter/counter stack. */
:root{
  --opener-text-start-y: clamp(700px, 76vh, 880px);
  --project-banner-bottom-gap: 28px;
  --booklet-meta-stack-height: 82px;
}

body.has-project-banner .project-banner{
  height: calc(var(--opener-text-start-y) - var(--project-banner-bottom-gap)) !important;
  margin-bottom: var(--project-banner-bottom-gap) !important;
}

body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}

.booklet-viewer.booklet-viewer--publication-top{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: calc(var(--opener-text-start-y) - var(--booklet-meta-stack-height)) !important;
}

.project-view .booklet-viewer + .project-header{
  margin-top: 0 !important;
}

@media (max-width: 800px){
  :root{
    --opener-text-start-y: clamp(560px, 70vh, 680px);
    --project-banner-bottom-gap: 22px;
    --booklet-meta-stack-height: 76px;
  }
}

@media (max-width: 480px){
  :root{
    --opener-text-start-y: 460px;
    --project-banner-bottom-gap: 18px;
    --booklet-meta-stack-height: 70px;
  }
}

/* v-opener-baseline-hard — one absolute content baseline for project banners + publication booklets
   Previous sync attempts matched visible media heights. This locks the whole opener block
   (project: image+gap / booklet: cover+chapters+counter) to one shared total height,
   so the following .project-header starts at the same y-position. */
:root{
  --opener-content-start-y: clamp(760px, 78vh, 900px);
  --project-banner-bottom-gap: 28px;
  --booklet-meta-stack-height: 82px;
}

body.has-project-banner .project-banner{
  height: calc(var(--opener-content-start-y) - var(--project-banner-bottom-gap)) !important;
  margin-bottom: var(--project-banner-bottom-gap) !important;
}
body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}

.project-view .booklet-viewer.booklet-viewer--publication-top{
  height: var(--opener-content-start-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__inner{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: calc(var(--opener-content-start-y) - var(--booklet-meta-stack-height)) !important;
  height: calc(var(--opener-content-start-y) - var(--booklet-meta-stack-height)) !important;
  min-height: 0 !important;
  flex: 0 0 calc(var(--opener-content-start-y) - var(--booklet-meta-stack-height)) !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__figure{
  height: 100% !important;
  min-height: 0 !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__meta{
  height: var(--booklet-meta-stack-height) !important;
  margin-top: 0 !important;
  flex: 0 0 var(--booklet-meta-stack-height) !important;
}
.project-view .booklet-viewer + .project-header{
  margin-top: 0 !important;
}

@media (max-width: 800px){
  :root{
    --opener-content-start-y: clamp(620px, 76vh, 720px);
    --project-banner-bottom-gap: 22px;
    --booklet-meta-stack-height: 78px;
  }
}
@media (max-width: 480px){
  :root{
    --opener-content-start-y: 650px;
    --project-banner-bottom-gap: 18px;
    --booklet-meta-stack-height: 74px;
  }
}

/* v-opener-shell-final — project/banner and booklet share one real wrapper height
   Both opener variants now occupy the exact same outer shell height. The project
   image is arranged inside that shell with its own breathing gap; the booklet
   stage + chapter/counter meta are arranged inside the same shell. Therefore the
   following .project-header starts at the same y-position for both page types. */
:root{
  --opener-shell-height: clamp(650px, 70vh, 820px);
  --project-banner-bottom-gap: 28px;
  --booklet-meta-stack-height: 82px;
}

body.has-project-banner .project-banner{
  height: var(--opener-shell-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--project-banner-bottom-gap) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.has-project-banner .project-banner-img{
  height: calc(100% - var(--project-banner-bottom-gap)) !important;
  object-position: center 42% !important;
}
body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}

.project-view .booklet-viewer.booklet-viewer--publication-top{
  height: var(--opener-shell-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__inner{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
  height: calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
  min-height: 0 !important;
  flex: 0 0 calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__figure{
  height: 100% !important;
  min-height: 0 !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__meta{
  height: var(--booklet-meta-stack-height) !important;
  margin: 0 !important;
  flex: 0 0 var(--booklet-meta-stack-height) !important;
}
.project-view .booklet-viewer + .project-header{
  margin-top: 0 !important;
}

@media (max-width: 800px){
  :root{
    --opener-shell-height: clamp(560px, 76vh, 700px);
    --project-banner-bottom-gap: 22px;
    --booklet-meta-stack-height: 78px;
  }
}
@media (max-width: 480px){
  :root{
    --opener-shell-height: 650px;
    --project-banner-bottom-gap: 18px;
    --booklet-meta-stack-height: 74px;
  }
}

/* === v191 — loosen project/booklet opener sync (2026-05-19) ===============
   Project pages and publication/booklet pages are different typologies.
   Remove the hard shared baseline/shell and let each opener breathe again.
   Project banners remain full-bleed and editorial; publication booklets keep their
   own viewer rhythm with chapters/counter. Mobile project banners are reduced to
   a proportional height so they do not dominate the first viewport. */
:root{
  --project-banner-loose-height: clamp(420px, 56vh, 760px);
  --project-banner-loose-gap: calc(var(--edge) * 1.15);
  --booklet-stage-loose-height: min(72vh, 960px);
}

body.has-project-banner .project-banner{
  height: var(--project-banner-loose-height) !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: var(--project-banner-loose-gap) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.has-project-banner .project-banner-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
}
body.has-project-banner .project-banner + .project-header{
  margin-top: 0 !important;
}

.project-view .booklet-viewer.booklet-viewer--publication-top{
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: calc(var(--edge) * 1.15) !important;
  padding: 0 !important;
  overflow: visible !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__inner{
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: var(--booklet-stage-loose-height) !important;
  height: var(--booklet-stage-loose-height) !important;
  min-height: var(--booklet-stage-loose-height) !important;
  flex: initial !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__figure{
  height: var(--booklet-stage-loose-height) !important;
  min-height: var(--booklet-stage-loose-height) !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__meta{
  height: auto !important;
  min-height: 0 !important;
  margin-top: 10px !important;
  flex: initial !important;
}
.project-view .booklet-viewer + .project-header{
  margin-top: 0 !important;
}

@media (max-width: 800px){
  :root{
    --project-banner-loose-height: clamp(320px, 58vh, 520px);
    --project-banner-loose-gap: calc(var(--edge) * 0.95);
    --booklet-stage-loose-height: min(56vh, 560px);
  }
}
@media (max-width: 480px){
  :root{
    --project-banner-loose-height: clamp(300px, 58vh, 430px);
    --project-banner-loose-gap: 22px;
    --booklet-stage-loose-height: 360px;
  }
}


/* v-labor-profile-markers — compact founder/brand signature near Labor title */
.labor-profile-markers{
  display:flex;
  align-items:center;
  margin-top:clamp(18px, 2.2vw, 30px);
  pointer-events:none;
  line-height:0;
  width:max-content;
}
.labor-profile-circle{
  width:clamp(64px, 5.4vw, 92px);
  height:clamp(64px, 5.4vw, 92px);
  border-radius:50%;
  overflow:hidden;
  display:block;
  background:rgb(20,20,20);
  flex:0 0 auto;
  position:relative;
  box-shadow:none;
}
.labor-profile-circle--logo{
  z-index:2;
}
.labor-profile-circle--portrait{
  z-index:1;
  margin-left:calc(clamp(64px, 5.4vw, 92px) * -0.28);
}
.labor-profile-circle img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.labor-profile-circle--logo img{
  object-fit:cover;
  padding:0;
  box-sizing:border-box;
}
@media (max-width: 760px){
  .labor-profile-markers{
    margin-top:16px;
    margin-bottom:2px;
  }
  .labor-profile-circle{
    width:58px;
    height:58px;
  }
  .labor-profile-circle--portrait{
    margin-left:-16px;
  }
}


/* v-labor-profile-markers-refined — smaller non-overlapping signature near title */
.labor-profile-markers{
  margin-top:clamp(12px, 1.4vw, 18px) !important;
  gap:8px !important;
  transform:none !important;
}
.labor-profile-circle{
  width:clamp(44px, 3.5vw, 60px) !important;
  height:clamp(44px, 3.5vw, 60px) !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:rgb(32,32,32) !important;
}
.labor-profile-circle--logo{
  z-index:2 !important;
  margin-left:0 !important;
  background:rgb(32,32,32) url('../images/logo.svg') center center / 58% auto no-repeat !important;
}
.labor-profile-circle--logo img{
  display:none !important;
}
.labor-profile-circle--portrait{
  z-index:1 !important;
  margin-left:0 !important;
}
.labor-profile-circle--portrait img{
  object-fit:cover !important;
  object-position:center center !important;
}
@media (max-width: 760px){
  .labor-profile-markers{
    margin-top:12px !important;
    gap:7px !important;
  }
  .labor-profile-circle{
    width:42px !important;
    height:42px !important;
  }
}

/* labor portrait cleanup */
.labor-profile-markers{margin-top:14px !important;}
.labor-profile-circle{width:56px !important;height:56px !important;}
.labor-profile-circle--portrait{margin-left:0 !important;}

/* === v2026-05-20 — Labor credits hierarchy micro-refinement === */
.project-col--text .labor-meta-section .labor-collabs-list{
  font-size: var(--fs-meta) !important;
  line-height: 1.48 !important;
  font-weight: 500 !important;
}

/* === v2026-05-21 — Home opener black-space correction =====================
   The previous patch was neutralized by later legacy overrides (v96).
   Put this at the very end so the homepage opener gets visibly more air,
   while project and booklet openers remain untouched. */
.home-view:not([hidden]) .home-opener{
  min-height: clamp(520px, 62vh, 720px) !important;
}
.home-view:not([hidden]) .home-opener-inner{
  top: clamp(-26px, -2vw, -14px) !important;
}
@media (max-width: 720px){
  .home-view:not([hidden]) .home-opener{
    min-height: clamp(340px, 48svh, 430px) !important;
  }
  .home-view:not([hidden]) .home-opener-inner{
    top: -12px !important;
  }
}

/* =========================================================
   v195 — status accent refinement from clean user ZIP
   - only sharpens NEU orange + PROTOTYP lilac
   - keeps existing pill logic/states intact
   - ensures overview tile dots use the same accents
   ========================================================= */
:root{
  --accent-orange: rgb(255, 112, 32);
  --accent-lilac: rgb(185, 168, 255);
  --new-badge: rgb(255, 112, 32);
  --prototype-badge: rgb(185, 168, 255);
}

/* Overview tile status dots */
.tile-dot,
.tile-dot.is-new{ color: var(--new-badge) !important; }
.tile-dot.is-prototype{ color: var(--prototype-badge) !important; }



/* =========================================================
   v197 — final accent sharpening (colors only)
   NEU = precise signal orange, PROTOTYP = clear architectural lilac.
   Mechanics/states intentionally unchanged from v196.
   ========================================================= */
:root{
  --accent-orange: rgb(255, 106, 18);
  --accent-lilac: rgb(142, 122, 255);
  --lilac: var(--accent-orange);
  --new-badge: var(--accent-orange);
  --prototype-badge: var(--accent-lilac);
}
.badge-new{ background: var(--new-badge) !important; color: rgb(0,0,0) !important; }
.badge-prototype{ background: var(--prototype-badge) !important; color: rgb(0,0,0) !important; }
.tile-dot.is-new{ color: var(--new-badge) !important; }
.tile-dot.is-prototype{ color: var(--prototype-badge) !important; }

/* =========================================================
   v198 — final lilac correction (color values only)
   NEU remains the sharpened signal orange.
   PROTOTYP returns to a lighter milky/chalky lilac.
   No state/hover/active mechanics changed.
   ========================================================= */
:root{
  --accent-orange: rgb(255, 106, 18);
  --accent-lilac: rgb(176, 166, 255);
  --lilac: var(--accent-orange);
  --new-badge: var(--accent-orange);
  --prototype-badge: var(--accent-lilac);
}
.tile-dot.is-new{ color: var(--new-badge) !important; }
.tile-dot.is-prototype{ color: var(--prototype-badge) !important; }
.badge-new{ background: var(--new-badge) !important; color: rgb(0,0,0) !important; }
.badge-prototype{ background: var(--prototype-badge) !important; color: rgb(0,0,0) !important; }
.lightbox .lightbox-main-inner,
.lightbox .lightbox-stage,
.lightbox .lightbox-stage-media{
  height: 100% !important;
  min-height: 0 !important;
}
.lightbox .lightbox-media{
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
@media (orientation: landscape) and (max-height: 520px){
  .lightbox .lightbox-media{
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* 2) Mobile/touch: header/footer frames must not block scroll/tap in empty space */
.header,
.footer,
.header-inner,
.footer-inner,
.lb-footer-v2,
.lb-footer-v2-inner{
  pointer-events: none !important;
}
.header button,
.header a,
.header .logo,
.header [role="button"],
.footer button,
.footer a,
.footer [role="button"],
.lb-footer-v2 button,
.lb-footer-v2 a,
.lb-footer-v2 [role="button"]{
  pointer-events: auto !important;
}
.content,
.main,
.main-inner{
  touch-action: pan-y !important;
}

/* Keep panels/lightbox themselves interactive despite the click-through frame logic */
.panel,
.panel *,
.lightbox,
.lightbox *,
.lightbox .lightbox-stage,
.lightbox .lightbox-stage-media,
.lightbox .lightbox-prev,
.lightbox .lightbox-next{
  pointer-events: auto;
}
.lightbox .lightbox-header,
.lightbox .lightbox-header .header-inner{
  pointer-events: none !important;
}
.lightbox .lightbox-header button,
.lightbox .lightbox-header a{
  pointer-events: auto !important;
}

/* 3) Side panels: expose full readable width on mobile/tablet instead of clipping the lists */
@media (max-width: 800px){
  :root{ --panel-visible-x: min(92vw, 380px); }
  .panel-projects,
  .panel-about{
    width: var(--panel-visible-x) !important;
    max-width: 92vw !important;
  }
  .panel-projects.is-open,
  .panel-about.is-open{
    transform: translateX(0) !important;
  }
  .panel-projects .panel-header-inner,
  .panel-projects .panel-main-inner,
  .panel-projects .panel-footer-inner,
  .panel-about .panel-header-inner,
  .panel-about .panel-main-inner,
  .panel-about .panel-footer-inner{
    padding-left: clamp(18px, 5vw, 28px) !important;
    padding-right: clamp(18px, 5vw, 28px) !important;
    box-sizing: border-box !important;
  }
  .panel-projects .media-list--links .media-item,
  .panel-projects .media-list--links .label,
  .panel-about button.project-row .project-list-name,
  .panel-about .project-list .name,
  .panel-about .publication-list .name,
  .panel-about .archive-list .name{
    font-size: clamp(23px, 8.2vw, 34px) !important;
    line-height: 1.07 !important;
  }
  .panel-about button.project-row{
    grid-template-columns: 4ch minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
  .panel-about button.project-row .project-list-name{
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
  .panel-projects .panel-body,
  .panel-about .panel-body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (min-width: 801px) and (max-width: 1100px){
  :root{ --panel-visible-x: min(54vw, 500px); }
  .panel-projects,
  .panel-about{
    width: var(--panel-visible-x) !important;
  }
  .panel-projects.is-open,
  .panel-about.is-open{
    transform: translateX(0) !important;
  }
}

@media (max-width: 480px){
  :root{ --panel-visible-x: min(80vw, 330px); }

  .panel-projects,
  .panel-about{
    width: var(--panel-visible-x) !important;
    max-width: var(--panel-visible-x) !important;
  }

  .panel-projects .panel-header-inner,
  .panel-projects .panel-main-inner,
  .panel-projects .panel-footer-inner,
  .panel-about .panel-header-inner,
  .panel-about .panel-main-inner,
  .panel-about .panel-footer-inner{
    padding-left: clamp(16px, 4.5vw, 22px) !important;
    padding-right: clamp(16px, 4.5vw, 22px) !important;
  }

  .panel-projects .media-list--links .media-item,
  .panel-projects .media-list--links .label,
  .panel-about button.project-row .project-list-name,
  .panel-about .project-list .name,
  .panel-about .publication-list .name,
  .panel-about .archive-list .name{
    font-size: clamp(22px, 7.6vw, 31px) !important;
    line-height: 1.08 !important;
  }
}


/* === v2026-06-15 panel-load/alignment/overflow fix =========================
   Shared LABOR + SHOP maintenance patch.
   Intention: no architectural changes; only stabilize initial render,
   align panel content axes, and prevent long panel texts from escaping mobile.
============================================================================ */

/* 1) Prevent the short "side slab" flash while CSS/JS initializes. */
html,
body{
  background: var(--bg) !important;
}

body.is-loading .header,
body.is-loading .footer,
body.is-loading .main-shell,
body.is-loading .panel-projects,
body.is-loading .panel-about{
  transition: none !important;
  animation: none !important;
}

/* Panels must start in their closed position without a transitional slide. */
body.is-loading .panel-projects{ transform: translateX(-100%) !important; }
body.is-loading .panel-about{ transform: translateX(100%) !important; }
body.is-loading .main-shell,
body.is-loading .header,
body.is-loading .footer{ transform: none !important; }

/* 2) One single axis for panel header/body/footer. */
:root{
  --panel-axis-x: clamp(28px, 5vw, 72px);
}

.panel .panel-header-inner,
.panel .panel-body,
.panel .panel-footer-inner{
  padding-left: var(--panel-axis-x) !important;
  padding-right: var(--panel-axis-x) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.panel .media-list,
.panel .project-list,
.panel .publication-list,
.panel .archive-list,
.panel .teaching-list,
.panel .panel-project-toggles{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Mobile/tablet panel typography: keep strong list appearance, but fit. */
.panel .media-list--links .media-item,
.panel-about button.project-row,
.panel-about .project-row{
  max-width: 100% !important;
}

.panel .media-list--links .media-item .label,
.panel-about .project-list-name,
.panel-about .project-name,
.panel-about button.project-row .project-list-name,
.panel-about button.project-row .project-name{
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Keep one-line logic as long as possible; JS below scales long names down. */
.panel .media-list--links .media-item .label,
.panel-about .project-list-name,
.panel-about .project-name{
  white-space: nowrap !important;
}

/* If text is still too long at the minimum size, this class allows a clean wrap. */
.panel .is-text-wrapped{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.05 !important;
}

/* Stronger mobile constraints without changing desktop architecture. */
@media (max-width: 520px){
  :root{ --panel-axis-x: clamp(24px, 9vw, 42px); }

  .panel-about .panel-project-toggles{
    gap: clamp(14px, 5vw, 28px) !important;
    flex-wrap: nowrap !important;
  }

  .panel-about .project-list,
  .panel-about .publication-list,
  .panel-about .archive-list,
  .panel-about .teaching-list{
    width: 100% !important;
  }

  .panel-about button.project-row,
  .panel-about .project-row{
    grid-template-columns: 4.2ch minmax(0, 1fr) !important;
    column-gap: clamp(12px, 4vw, 24px) !important;
  }
}


/* =========================================================
   v2026-06-15-4 — right-panel list architecture rebuild
   Goal: preserve visual language, remove hidden/max-content clipping.
   ========================================================= */

.panel-about .panel-inner{
  --beo-panel-inset: clamp(34px, 9vw, 58px);
  --beo-panel-title-fit: 30px;
  --beo-panel-code-fit: 15px;
  --beo-panel-code-col: 4.4ch;
  --beo-panel-row-gap: 20px;
}

/* One coherent horizontal axis: tabs, body and footer. */
.panel-about .panel-header-inner.frame,
.panel-about .panel-body.frame,
.panel-about .panel-footer-inner.frame{
  padding-left: var(--beo-panel-inset) !important;
  padding-right: var(--beo-panel-inset) !important;
  box-sizing: border-box !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Panel body/list container may clip vertical scrolling, but never the title row horizontally. */
.panel-about .panel-body,
.panel-about .panel-body.frame,
.panel-about .beo-panel-nav-clean,
.panel-about .beo-panel-list-clean,
.panel-about .beo-panel-item-clean{
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;
}

/* Tabs keep the original calm appearance, but align to the same axis. */
.panel-about .beo-panel-tabs-clean,
.panel-about .panel-project-toggles.beo-panel-tabs-clean{
  display: flex !important;
  align-items: baseline !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.panel-about .beo-panel-tab-clean{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* The actual row architecture: fixed code column + shrinkable title column.
   No max-content title column; no row clipping. */
.panel-about .beo-panel-row-clean{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  grid-template-columns: var(--beo-panel-code-col) minmax(0, 1fr) !important;
  column-gap: var(--beo-panel-row-gap) !important;
  align-items: baseline !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: visible !important;
}

.panel-about .beo-panel-code-clean{
  grid-column: 1 !important;
  display: block !important;
  font-size: var(--beo-panel-code-fit) !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.panel-about .beo-panel-title-clean{
  grid-column: 2 !important;
  display: block !important;
  font-size: var(--beo-panel-title-fit) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: none !important;
  width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: 0 !important;
  box-sizing: content-box !important;
}

.panel-about .beo-panel-item-clean.is-muted .beo-panel-title-clean{
  font-size: var(--beo-panel-title-fit) !important;
}

/* Small screens keep the same architecture, only slightly tighter. */
@media (max-width: 430px){
  .panel-about .panel-inner{
    --beo-panel-inset: clamp(28px, 8vw, 42px);
    --beo-panel-row-gap: 16px;
  }
}



/* === v042 — initial side-slab flash fix =====================================
   Hide closed side panels while the initial JS/CSS state is still settling.
   This prevents the brief white/black slab from flashing in from the left/right
   on page load, without changing the panel architecture after load.
============================================================================ */
body.is-loading .panel-projects,
body.is-loading .panel-about{
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-loading .panel-projects.is-open,
body.is-loading .panel-about.is-open{
  visibility: hidden !important;
}

/* =========================================================
   beo UI SYSTEM — LABOR
   One component system for filter pills, status badges and panel rows.
   Geometry matches SHOP; colors are LABOR theme only.
   ========================================================= */
:root{
  --beo-pill-h: 26px;
  --beo-pill-px: 16px;
  --beo-pill-radius: 999px;
  --beo-pill-dot: 5px;
  --beo-pill-gap-dot: 8px;
  --beo-pill-fs: 10px;
  --beo-pill-fw: 600;
  --beo-pill-ls: 0.015em;

  --beo-filter-bg-1: rgb(42,42,42);
  --beo-filter-bg-2: rgb(31,31,31);
  --beo-filter-fg: rgb(170,170,170);
  --beo-filter-active-bg: rgb(255,255,255);
  --beo-filter-active-fg: rgb(0,0,0);

  --beo-status-new: rgb(255,106,18);
  --beo-status-new-bg: rgba(255,106,18,.34);
  --beo-status-prototype: rgb(176,166,255);
  --beo-status-prototype-bg: rgba(176,166,255,.34);
  --beo-status-archive: rgb(140,140,140);
  --beo-status-archive-bg: rgba(140,140,140,.34);

  --beo-panel-code-size: 15px;
  --beo-panel-title-size: 30px;
  --beo-panel-row-gap: 20px;
  --beo-panel-code-col: 4.4ch;
}

/* Right panel rows: hover without underline; active/current with underline. */
.panel-about .beo-panel-tabs-clean{
  display:flex !important;
  align-items:baseline !important;
  gap:16px !important;
}
.panel-about .beo-panel-tab-clean{
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  font-family:var(--font-sans, Inter, Arial, sans-serif) !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  color:rgb(115,115,115) !important;
  cursor:pointer !important;
}
.panel-about .beo-panel-tab-clean.is-active,
.panel-about .beo-panel-tab-clean:hover,
.panel-about .beo-panel-tab-clean:focus-visible{
  color:rgb(255,255,255) !important;
}
.panel-about .beo-panel-nav-clean{
  overflow-y:auto !important;
  overflow-x:visible !important;
  -webkit-overflow-scrolling:touch !important;
}
.panel-about .beo-panel-list-clean{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.panel-about .beo-panel-row-clean{
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  display:grid !important;
  grid-template-columns:var(--beo-panel-code-col) minmax(0, 1fr) !important;
  column-gap:var(--beo-panel-row-gap) !important;
  align-items:baseline !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  text-align:left !important;
  cursor:pointer !important;
}
.panel-about .beo-panel-code-clean{
  font-family:var(--font-mono, monospace) !important;
  font-size:var(--beo-panel-code-size) !important;
  font-weight:400 !important;
  line-height:1.12 !important;
  color:rgb(140,140,140) !important;
}
.panel-about .beo-panel-title-clean{
  font-family:var(--font-sans, Inter, Arial, sans-serif) !important;
  font-size:var(--beo-panel-title-size) !important;
  font-weight:700 !important;
  line-height:1.12 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  color:rgb(255,255,255) !important;
  text-decoration:none !important;
}
.panel-about .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-row-clean:focus-visible .beo-panel-title-clean{
  color:rgb(210,210,210) !important;
  text-decoration:none !important;
}
.panel-about .beo-panel-row-clean:hover .beo-panel-code-clean,
.panel-about .beo-panel-row-clean:focus-visible .beo-panel-code-clean{
  color:rgb(170,170,170) !important;
}
.panel-about .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color:rgb(255,255,255) !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:0.12em !important;
}
.panel-about .beo-panel-row-clean.is-current .beo-panel-code-clean{
  color:rgb(170,170,170) !important;
}
.panel-about .beo-panel-item-clean.is-muted .beo-panel-title-clean{
  color:rgb(140,140,140) !important;
}
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-item-clean.is-muted .beo-panel-row-clean:focus-visible .beo-panel-title-clean{
  color:rgb(170,170,170) !important;
}
@media (max-width:800px){
  .panel-about .panel-body,
  .panel-projects .panel-body{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* =========================================================
   beo FILTERBAR MODULE v104
   Shared architecture for LABOR + SHOP.
   Three states only:
   - >=768px: grid label | centered wrapped groups | media count
   - <768px: grid label | horizontal pill snake | no media count
   Theme differences live in variables only.
   ========================================================= */
:root{
  --beo-filter-label-w: clamp(110px, 10vw, 150px);
  --beo-filter-count-w: clamp(110px, 10vw, 150px);
  --beo-filter-pill-gap: 10px;
  --beo-filter-group-gap: 24px;
  --beo-filter-row-gap: 12px;
  --beo-filter-pill-h: 26px;
  --beo-filter-pill-px: 14px;
  --beo-filter-pill-fs: 11px;
  --beo-filter-pill-fw: 450;
  --beo-filter-pill-radius: 999px;
  --beo-filter-dot: 5px;
  --beo-filter-dot-gap: 6px;
  --beo-filter-bottom-gap: 36px;

  --beo-filter-pill-bg: rgb(31,31,31);
  --beo-filter-pill-fg: rgba(255,255,255,.58);
  --beo-filter-pill-active-bg: rgb(255,255,255);
  --beo-filter-pill-active-fg: rgb(0,0,0);
  --beo-filter-pill-hover-bg: rgb(48,48,48);
  --beo-filter-pill-hover-fg: rgb(255,255,255);
}

.filter-bar{
  display:grid;
  grid-template-columns:var(--beo-filter-label-w) minmax(0, 1fr) var(--beo-filter-count-w);
  column-gap:16px;
  align-items:center;
  width:100%;
  margin-bottom:var(--beo-filter-bottom-gap);
}

.filterbar-meta{
  display:flex;
  align-items:center;
  height:var(--beo-filter-pill-h);
  min-height:var(--beo-filter-pill-h);
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  font-weight:400;
  line-height:1;
  letter-spacing:.06em;
  color:var(--fg-subtle);
  white-space:nowrap;
  user-select:none;
}
.filterbar-meta--left{ justify-content:flex-start; }
.filterbar-meta--right{ justify-content:flex-end; gap:.45em; }

.filterbar-center{
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.filter-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  align-content:center;
  gap:var(--beo-filter-row-gap) var(--beo-filter-group-gap);
  min-width:0;
  max-width:100%;
}

.filter-group{
  display:inline-flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--beo-filter-pill-gap);
  min-width:max-content;
}

.filter-pill{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:max-content;
  min-width:max-content;
  height:var(--beo-filter-pill-h);
  min-height:var(--beo-filter-pill-h);
  padding:0 var(--beo-filter-pill-px) 1px var(--beo-filter-pill-px);
  border:0;
  border-radius:var(--beo-filter-pill-radius);
  outline:0;
  box-shadow:none;
  font-family:var(--font-sans, Inter, Arial, sans-serif);
  font-size:var(--beo-filter-pill-fs);
  font-weight:var(--beo-filter-pill-fw);
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  cursor:pointer;
  transform:none;
  transition:background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.filter-pill:not(.filter-pill--status):not(.is-active):not(.active):not([aria-pressed="true"]){
  background:var(--beo-filter-pill-bg);
  color:var(--beo-filter-pill-fg);
}
.filter-bar .filter-pill:not(.filter-pill--status):not(.is-active):not(.active):not([aria-pressed="true"]):hover,
.filter-bar .filter-pill:not(.filter-pill--status):not(.is-active):not(.active):not([aria-pressed="true"]):focus-visible{
  background:var(--beo-filter-pill-hover-bg);
  color:var(--beo-filter-pill-hover-fg);
}
.filter-pill:not(.filter-pill--status):is(.is-active,.active,[aria-pressed="true"]){
  background:var(--beo-filter-pill-active-bg);
  color:var(--beo-filter-pill-active-fg);
}

.filter-pill--status{
  gap:var(--beo-filter-dot-gap);
  background:color-mix(in srgb, var(--status-color) 16%, var(--beo-filter-pill-bg));
  color:var(--status-color);
}
.filter-pill--status::before{
  content:'';
  display:block;
  flex:0 0 var(--beo-filter-dot);
  width:var(--beo-filter-dot);
  height:var(--beo-filter-dot);
  min-width:var(--beo-filter-dot);
  min-height:var(--beo-filter-dot);
  border-radius:50%;
  background:currentColor;
  transform:translateY(1px);
}
.filter-pill--status.is-status-neu{ --status-color:var(--new-badge); }
.filter-pill--status.is-status-prototyp{ --status-color:var(--prototype-badge); }
.filter-pill--status.is-status-archiv{ --status-color:var(--archive-badge); }
.filter-pill--status.is-status-reduced{ --status-color:rgb(58,145,70); }
.filter-pill--status.is-status-verkauft{ --status-color:var(--archive-badge); }
.filter-pill--status:not(.is-active):not(.active):not([aria-pressed="true"]):hover,
.filter-pill--status:not(.is-active):not(.active):not([aria-pressed="true"]):focus-visible{
  background:color-mix(in srgb, var(--status-color) 32%, var(--beo-filter-pill-bg));
  color:var(--status-color);
}
.filter-pill--status:is(.is-active,.active,[aria-pressed="true"]){
  background:color-mix(in srgb, var(--status-color) 32%, var(--beo-filter-pill-bg));
  color:var(--status-color);
}

@media (min-width:768px){
  .filter-bar{
    grid-template-columns:var(--beo-filter-label-w) minmax(0, 1fr) var(--beo-filter-count-w);
  }
  .filterbar-meta--right{ display:flex; }
  .filterbar-center{ justify-content:center; overflow:visible; }
  .filter-pills{
    flex-wrap:wrap;
    justify-content:center;
    overflow:visible;
    padding:0;
    gap:var(--beo-filter-row-gap) var(--beo-filter-group-gap);
  }
  .filter-group--category{
    flex-wrap:wrap;
    justify-content:center;
    min-width:0;
  }
}


/* Compact filterbar state: used when the center lane cannot hold the pill groups cleanly. */
.filter-bar.is-compact{
  grid-template-columns:var(--beo-filter-label-w) minmax(0, 1fr);
  column-gap:8px;
  align-items:center;
}
.filter-bar.is-compact .filterbar-meta--right{ display:none; }
.filter-bar.is-compact .filterbar-center{ justify-content:flex-start; overflow:hidden; }
.filter-bar.is-compact .filter-pills{
  width:100%;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  gap:var(--beo-filter-pill-gap);
  padding:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.filter-bar.is-compact .filter-group{ gap:var(--beo-filter-pill-gap); }
.filter-bar.is-compact .filter-group--category{
  flex-wrap:nowrap;
  justify-content:flex-start;
  min-width:max-content;
}
.filter-bar.is-compact .filter-pills::-webkit-scrollbar{ display:none; }

@media (max-width:767px){
  :root{
    --beo-filter-label-w: 118px;
    --beo-filter-bottom-gap: 32px;
  }
  .filter-bar{
    grid-template-columns:var(--beo-filter-label-w) minmax(0, 1fr);
    column-gap:8px;
    align-items:center;
  }
  .filterbar-meta--right{ display:none; }
  .filterbar-center{ justify-content:flex-start; overflow:hidden; }
  .filter-pills{
    width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    gap:var(--beo-filter-pill-gap);
    padding:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .filter-group{ gap:var(--beo-filter-pill-gap); }
  .filter-group--category{
    flex-wrap:nowrap;
    justify-content:flex-start;
    min-width:max-content;
  }
  .filter-pills::-webkit-scrollbar{ display:none; }
}

/* =========================================================
   v109 — global status badge component
   One clean badge system for overview/status filter look and detail pages.
   No active inversion: default soft, hover/active stronger.
   ========================================================= */
:root{
  --beo-status-badge-h: var(--beo-filter-pill-h, 26px);
  --beo-status-badge-px: var(--beo-filter-pill-px, 14px);
  --beo-status-badge-dot: var(--beo-filter-dot, 5px);
  --beo-status-badge-dot-gap: var(--beo-filter-dot-gap, 6px);
  --beo-status-badge-fs: var(--beo-filter-pill-fs, 11px);
  --beo-status-pill-bg: var(--beo-filter-pill-bg, rgb(238,238,238));
  --beo-status-new: var(--new-badge, rgb(255,106,18));
  --beo-status-prototype: var(--prototype-badge, rgb(176,166,255));
  --beo-status-reduced: var(--sale-badge, rgb(58,145,70));
  --beo-status-archive: var(--archive-badge, rgb(140,140,140));
  --beo-status-sold: var(--archive-badge, rgb(140,140,140));
}

.project-col--title .project-new[data-project-badge],
.project-view .project-new[data-project-badge],
.project-col--title [data-project-badge],
.project-view [data-project-badge]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--beo-status-badge-dot-gap);
  height:var(--beo-status-badge-h);
  min-height:var(--beo-status-badge-h);
  padding:0 var(--beo-status-badge-px) 1px var(--beo-status-badge-px);
  border:0;
  border-radius:999px;
  font-family:var(--font-sans, Inter, Arial, sans-serif);
  font-size:var(--beo-status-badge-fs);
  font-weight:var(--beo-filter-pill-fw, 450);
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  pointer-events:none;
  margin-top:18px;
  --status-color:var(--beo-status-new);
  color:var(--status-color);
  background:color-mix(in srgb, var(--status-color) 16%, var(--beo-status-pill-bg));
}
.project-col--title .project-new[data-project-badge]::before,
.project-view .project-new[data-project-badge]::before,
.project-col--title [data-project-badge]::before,
.project-view [data-project-badge]::before{
  content:'';
  display:block;
  flex:0 0 var(--beo-status-badge-dot);
  width:var(--beo-status-badge-dot);
  height:var(--beo-status-badge-dot);
  border-radius:50%;
  background:currentColor;
  transform:translateY(1px);
}
.project-col--title .project-new[data-project-badge].is-prototype,
.project-view .project-new[data-project-badge].is-prototype,
.project-col--title [data-project-badge].is-prototype,
.project-view [data-project-badge].is-prototype{
  --status-color:var(--beo-status-prototype);
}
.project-col--title .project-new[data-project-badge].is-reduced,
.project-view .project-new[data-project-badge].is-reduced,
.project-col--title [data-project-badge].is-reduced,
.project-view [data-project-badge].is-reduced{
  --status-color:var(--beo-status-reduced);
}
.project-col--title .project-new[data-project-badge].is-archive,
.project-view .project-new[data-project-badge].is-archive,
.project-col--title [data-project-badge].is-archive,
.project-view [data-project-badge].is-archive{
  --status-color:var(--beo-status-sold);
}
.project-col--title .project-new[data-project-badge]:hover,
.project-view .project-new[data-project-badge]:hover,
.project-col--title [data-project-badge]:hover,
.project-view [data-project-badge]:hover{
  color:var(--status-color);
  background:color-mix(in srgb, var(--status-color) 32%, var(--beo-status-pill-bg));
}

.tile-dots{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin-left:6px;
}
.tile-dot{
  display:inline-block;
  flex:0 0 auto;
  width:var(--beo-status-badge-dot);
  height:var(--beo-status-badge-dot);
  min-width:var(--beo-status-badge-dot);
  min-height:var(--beo-status-badge-dot);
  border:0;
  border-radius:50%;
  background:currentColor;
  color:var(--beo-status-new);
  transform:translateY(-0.01em);
}
.tile-dot.is-new{ color:var(--beo-status-new); }
.tile-dot.is-prototype{ color:var(--beo-status-prototype); }
.tile-dot.is-reduced{ color:var(--beo-status-reduced); }
.tile-dot.is-archive,
.tile-dot.is-sold{ color:var(--beo-status-sold); }
.tile-dot.is-study{ color:var(--study-badge, var(--beo-status-archive)); }

.tile-price-sale,
.project-price-sale{
  color:var(--beo-status-reduced);
}

/* === v113 — global detail rhythm: info block to gallery ====================
   Align the vertical spacing below the detail information block with the
   opener-to-information spacing above it. This keeps project/product detail
   pages from feeling more detached before the gallery than after the opener.
============================================================================ */
:root{
  --detail-info-gallery-gap: var(--project-banner-loose-gap, 28px);
}

.project-view .project-header{
  margin-bottom: var(--detail-info-gallery-gap);
}

@media (max-width: 800px){
  :root{
    --detail-info-gallery-gap: var(--project-banner-loose-gap, 22px);
  }
}
/* === end v113 ============================================================= */


/* =========================================================
   v117 — lightbox main-area media bounds
   Keep full-size lightbox media inside the real main area so it ends below
   the fixed header and above the fixed footer on LABOR + SHOP.
   ========================================================= */
.lightbox .lightbox-main{
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--footer-h) + var(--safe-bottom));
  box-sizing: border-box;
}

.lightbox .lightbox-main-inner{
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.lightbox .lightbox-stage,
.lightbox .lightbox-stage-media{
  height: 100%;
  min-height: 0;
}


/* === v118 — lightbox bounds fix on project pages ==========================
   Project pages set body.has-project-banner .main { padding-top: 0; } for the
   full-bleed opener. The lightbox also uses .main, so it needs its own scoped
   rule with higher specificity. This keeps lightbox media below the header
   zone on LABOR + SHOP without affecting normal project banners.
============================================================================ */
body.has-project-banner .lightbox .lightbox-main,
.lightbox .lightbox-content .lightbox-main{
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--footer-h) + var(--safe-bottom));
  box-sizing: border-box;
}

body.has-project-banner .lightbox .lightbox-main-inner,
.lightbox .lightbox-content .lightbox-main-inner{
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
/* === end v118 ============================================================= */

/* === v126 — detail textblock rhythm ======================================
   Keep FILTERBAR at v122 stable state. Increase the vertical breathing room
   before and after the detail text block evenly via shared rhythm variables.
   The same value is used for opener -> textblock and textblock -> gallery.
============================================================================ */
:root{
  --detail-textblock-rhythm-gap: 44px;
  --project-banner-loose-gap: var(--detail-textblock-rhythm-gap);
  --detail-info-gallery-gap: var(--detail-textblock-rhythm-gap);
}

.project-view .project-header{
  margin-bottom: var(--detail-info-gallery-gap);
}

@media (max-width: 800px){
  :root{
    --detail-textblock-rhythm-gap: 36px;
    --project-banner-loose-gap: var(--detail-textblock-rhythm-gap);
    --detail-info-gallery-gap: var(--detail-textblock-rhythm-gap);
  }
}

@media (max-width: 480px){
  :root{
    --detail-textblock-rhythm-gap: 30px;
    --project-banner-loose-gap: var(--detail-textblock-rhythm-gap);
    --detail-info-gallery-gap: var(--detail-textblock-rhythm-gap);
  }
}
/* === end v126 ============================================================= */

/* === v127 — publication booklet controller breathing room ================
   Booklet chapter/counter controls need more air below the medium and above
   the following detail text block. The medium loses a little height, the meta
   stack gains breathing room, and the header starts lower.
============================================================================ */
:root{
  --booklet-meta-stack-height: 116px;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__stage{
  --booklet-stage-height: calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
  height: calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
  min-height: 0 !important;
  flex: 0 0 calc(var(--opener-shell-height) - var(--booklet-meta-stack-height)) !important;
}
.project-view .booklet-viewer--publication-top .booklet-viewer__meta{
  height: var(--booklet-meta-stack-height) !important;
  min-height: var(--booklet-meta-stack-height) !important;
  padding-top: 22px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  flex: 0 0 var(--booklet-meta-stack-height) !important;
}
.project-view .booklet-viewer + .project-header{
  margin-top: 24px !important;
}
@media (max-width: 800px){
  :root{ --booklet-meta-stack-height: 104px; }
  .project-view .booklet-viewer + .project-header{ margin-top: 20px !important; }
}
@media (max-width: 480px){
  :root{ --booklet-meta-stack-height: 92px; }
  .project-view .booklet-viewer + .project-header{ margin-top: 18px !important; }
}
/* === end v127 ============================================================ */


/* === 2026-07-21 cross-site color transition ============================= */
.beo-site-transition-dot{
  position:fixed;
  z-index:2147483647;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  pointer-events:none;
  transform:scale(0.01);
  transform-origin:center;
  transition:transform 420ms cubic-bezier(.72,0,.28,1);
  will-change:transform;
}
.beo-site-transition-dot.is-expanding{ transform:scale(220); }
html.is-site-switching, html.is-site-switching body{ overflow:hidden !important; }
@media (prefers-reduced-motion:reduce){ .beo-site-transition-dot{ transition:none; } }