.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: #fff;
  --fg: #000;
  /* text colors (no opacity; always explicit RGB) */
  --fg-dim: rgb(56,56,56);
  --fg-muted: rgb(115,115,115);
  --fg-subtle: rgb(127,127,127);
  --line: #bfbfbf;
  --stage-top: rgba(255, 255, 255, 1.00);
  --stage-mid: rgba(255, 255, 255, 1.00);
  --stage-bot: rgba(227, 227, 225, 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(110,110,110);
  --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: #f1f1f1; /* slightly lifted from main black to create the "tile" feeling */
  --panel-divider: rgba(0,0,0,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: #fff;
  --fg: #000;
  --fg-dim: rgba(255,255,255,0.78);
  --fg-muted: var(--fg-muted);
  --fg-subtle: #808080;
  --line: #bfbfbf;
  --stage-top: rgba(255, 255, 255, 1.00);
  --stage-mid: rgba(255, 255, 255, 1.00);
  --stage-bot: rgba(227, 227, 225, 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"               */
/* ========================================= */
.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 badge/dot cleanup: tile dot sizing is now handled by v110. */
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;
  }
}


/* V014 SHOP LIGHT: color-only inversion from LABOR architecture */
html, body { background:#fff !important; color:#000 !important; }
body, .site, .home, .home-stage, .project-view { background:#fff !important; color:#000 !important; }
.header, .footer { color:#000 !important; }
.ui-toggle, .header-toggle, .lang-toggle { color:#9a9a9a !important; }
.ui-toggle.is-active, .header-toggle.is-active, .lang-toggle.is-active { color:#000 !important; }
.panel { background:#f1f1f1 !important; color:#000 !important; }
.panel * { color:inherit; }
.panel .media-item, .panel .media-item .label,
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label { color:#000 !important; }
.panel .media-item:hover, .panel .media-item:hover .label,
.panel .media-item.is-active, .panel .media-item.is-active .label { color:#6a6a6a !important; }
.logo img, .logo svg { filter: none !important; }
.tile-thumb { background:#e3e3e3 !important; }
.tile-thumb::after, .tile::after { display:none !important; opacity:0 !important; }
/* tile-dot colors are handled globally in v110 */
.beo-panel-tab-clean { color:#777 !important; }
.beo-panel-tab-clean.is-active { color:#000 !important; }
.beo-panel-code-clean { color:#777 !important; }
.beo-panel-title-clean { color:#000 !important; }
button, a { color:inherit; }

/* V015 SHOP LIGHT BACKGROUND FIX — architecture untouched, colors only */
:root{
  --bg: #ffffff !important;
  --fg: #000000 !important;
  --panel-bg: #f1f1f1 !important;
  --fg-dim: rgb(56,56,56) !important;
  --fg-muted: rgb(115,115,115) !important;
  --fg-subtle: rgb(127,127,127) !important;
  --c-ui-soft: rgb(115,115,115) !important;
  --c-body: #000000 !important;
  --c-meta: rgb(115,115,115) !important;
  --c-label: rgb(127,127,127) !important;
  --ui-link-muted: rgb(115,115,115) !important;
  --stage-top: #ffffff !important;
  --stage-mid: #ffffff !important;
  --stage-bot: #ffffff !important;
}
.header,
.header-inner,
.footer,
.footer-inner,
.ui-toggle-zone,
.ui-toggle-group{
  background: transparent !important;
  color: #000000 !important;
}
.header-toggle:not(.is-active),
.lang-toggle:not(.is-active),
.ui-toggle:not(.is-active),
.panel-version,
.panel-title,
.beo-panel-code-clean,
.beo-panel-tab-clean:not(.is-active){
  color: rgb(115,115,115) !important;
}
.panel,
.panel-inner,
.panel-header,
.panel-body,
.panel-footer,
.panel-header-inner,
.panel-main-inner,
.panel-footer-inner,
.panel-about,
.panel-projects{
  background: #f1f1f1 !important;
  color: #000000 !important;
}
.panel *,
.panel a,
.panel button,
.panel .label,
.panel .media-item,
.panel .media-list--links .media-item,
.panel .media-list--links .label,
.panel .project-row,
.panel .project-list-name,
.panel .publication-list .name,
.panel .archive-list .name{
  color: #000000 !important;
}
.panel .media-item:hover,
.panel .media-item:hover .label,
.panel .media-item.is-active,
.panel .media-item.is-active .label,
.panel button:hover,
.panel button:hover *{
  color: rgb(115,115,115) !important;
}
.tile-thumb,
.media-thumb,
.tile img,
.media-tile img{
  background: #e3e3e3 !important;
}
.tile-thumb::after,
.tile::after,
.media-thumb::after,
.media-tile::after{
  display:none !important;
  opacity:0 !important;
}
.logo img,
.logo svg,
.btn-icon,
.scroll-arrow{
  filter: none !important;
}
.btn,
.project-nav,
.scroll-toggle{
  color:#000 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.btn img,
.project-nav img,
.scroll-toggle img,
.btn-icon,
.scroll-arrow{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}


/* === V018 final: light-shop color logic + V012 button visibility + info panel restore === */
/* Buttons: force black visible SVGs on light background (V012 asset behavior, robust against old filters/hover images). */
.header .btn img,
.footer .project-nav img,
.footer .scroll-toggle img,
.btn-icon,
.scroll-arrow{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter: brightness(0) saturate(100%) !important;
  mix-blend-mode: normal !important;
}
.header .btn,
.footer .project-nav,
.footer .scroll-toggle{
  opacity:1 !important;
  visibility:visible !important;
  color:#000 !important;
}
.header .btn:hover img,
.footer .project-nav:hover img,
.footer .scroll-toggle:hover img{
  filter: brightness(0) saturate(100%) !important;
}

/* Left/right panel text: white-in-LABOR becomes black-in-SHOP. */
.panel,
.panel-inner,
.panel-header,
.panel-body,
.panel-footer{
  background:#f1f1f1 !important;
  color:#000 !important;
}
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label,
.panel-projects .nav-count,
.panel-about .beo-panel-tab-clean,
.panel-about .beo-panel-code-clean,
.panel-about .beo-panel-title-clean,
.panel-about .beo-panel-row-clean,
.panel-about .beo-panel-row-clean *{
  color:#000 !important;
}
.panel-title,
.panel-version{
  color:#777 !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.is-active,
.panel-projects .media-list--links .media-item.is-active .label,
.panel-about .beo-panel-tab-clean:not(.is-active),
.panel-about .beo-panel-code-clean{
  color:#777 !important;
}
.panel-about .beo-panel-tab-clean.is-active,
.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:#000 !important;
}

/* === V019 coherence pass: true light-shop inversion, LABOR geometry preserved === */
/* kill LABOR difference blending on light theme */
.header,
.footer,
.header *,
.footer *{
  mix-blend-mode:normal !important;
  filter:none !important;
}
.header .ui-toggle:not(.is-active),
.header-toggle:not(.is-active),
.footer .ui-toggle:not(.is-active),
.footer-filter-toggle:not(.is-active){
  color:#707070 !important;
}
.header .ui-toggle.is-active,
.header-toggle.is-active,
.header .ui-toggle[aria-pressed="true"],
.footer .ui-toggle.is-active,
.footer-filter-toggle.is-active,
.footer .ui-toggle[aria-pressed="true"]{
  color:#000 !important;
  font-weight:700 !important;
}
/* buttons/icons: black outline, transparent box, never difference-blended */
.btn,
.project-nav,
.scroll-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#000 !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
.btn img,
.btn-icon,
.project-nav img,
.scroll-toggle img,
.scroll-arrow,
.header .btn img,
.footer .project-nav img,
.footer .scroll-toggle img{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
.btn:hover img,
.project-nav:hover img,
.scroll-toggle:hover img{
  opacity:.72 !important;
  filter:none !important;
}

/* panel typography: everything formerly white in LABOR becomes black in SHOP */
.panel,
.panel *:not(svg):not(path):not(circle):not(line):not(polyline),
.panel a,
.panel button,
.panel .label,
.panel-title,
.panel-version,
.nav-count,
.ext-icon,
.beo-panel-tab-clean,
.beo-panel-code-clean,
.beo-panel-title-clean,
.beo-panel-row-clean,
.beo-panel-row-clean *{
  color:#000 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.panel-title,
.panel-version,
.panel .muted,
.beo-panel-tab-clean:not(.is-active),
.beo-panel-code-clean{
  color:#707070 !important;
}
.panel .media-item:hover,
.panel .media-item:hover .label,
.panel-about .beo-panel-row-clean:hover .beo-panel-title-clean,
.panel-about .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color:#000 !important;
}


/* === V020 FINAL CLEAN OVERRIDES: coherent shop colors without touching LABOR architecture === */
/* Header / Footer typography: keep LABOR sizing/weight feel, only color-invert. */
.header .ui-toggle,
.header-toggle,
.footer .ui-toggle,
.footer-filter-toggle{
  color:#6f6f6f !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  opacity:1 !important;
}
.header .ui-toggle.is-active,
.header-toggle.is-active,
.header .ui-toggle[aria-pressed="true"],
.footer .ui-toggle.is-active,
.footer-filter-toggle.is-active{
  color:#000 !important;
  font-weight:600 !important;
}
.header .ui-toggle:hover,
.header-toggle:hover,
.footer .ui-toggle:hover,
.footer-filter-toggle:hover{
  color:#000 !important;
}

/* Buttons: use the working outline SVGs as black icons, no filled blob, no inversion/mix-blend. */
.btn,
.project-nav,
.scroll-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
.btn .btn-icon,
.btn img,
.project-nav .btn-icon,
.project-nav img,
.scroll-toggle .scroll-arrow,
.scroll-toggle img{
  display:block !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  visibility:visible !important;
}
.btn:hover,
.project-nav:hover,
.scroll-toggle:hover{
  background:transparent !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
.btn:hover img,
.project-nav:hover img,
.scroll-toggle:hover img{
  opacity:.72 !important;
  filter:none !important;
}

/* Panel superscripts / small counters: former white becomes black in bright shop. */
.panel .nav-count,
.panel sup,
.panel .count,
.panel .media-list--links .nav-count{
  color:#000 !important;
  opacity:1 !important;
}

/* === V021: focused refinements requested 2026-05-31 === */
/* Header/footer: visually closer to LABOR, only active slightly stronger. */
.header .ui-toggle,
.header-toggle,
.footer .ui-toggle,
.footer-filter-toggle,
.footer a,
.header a{
  color:#6f6f6f !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  -webkit-font-smoothing:antialiased;
}
.header .ui-toggle.is-active,
.header-toggle.is-active,
.header .ui-toggle[aria-pressed="true"],
.footer .ui-toggle.is-active,
.footer-filter-toggle.is-active,
.footer a.is-active,
.header a.is-active{
  color:#000 !important;
  font-weight:500 !important;
}
.header .ui-toggle:hover,
.header-toggle:hover,
.footer .ui-toggle:hover,
.footer-filter-toggle:hover,
.footer a:hover,
.header a:hover{
  color:#000 !important;
}

/* Left panel superscript counters: black in light shop variant. */
.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 a .nav-count,
.panel-projects .media-list--links a .nav-count::before,
.panel-projects .media-list--links a .nav-count::after{
  color:#000 !important;
  opacity:1 !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 SHOP color coherence for shared panel fix ================ */
.panel .nav-count,
.panel sup,
.panel .count,
.panel .media-list--links .nav-count,
.panel .media-list--links .nav-count::before,
.panel .media-list--links .nav-count::after{
  color:#000 !important;
  opacity:1 !important;
}

.panel-about .project-list-name,
.panel-about .project-name,
.panel-about .project-list-code,
.panel-about .code,
.panel-about .panel-tab,
.panel-about .ui-toggle,
.panel-about .panel-project-toggles .ui-toggle,
.panel-projects .media-list--links .media-item,
.panel-projects .media-list--links .media-item .label{
  color:#000 !important;
}

.panel-about .project-list-code,
.panel-about .code{
  color:#6f6f6f !important;
}

.panel-about .panel-project-toggles .ui-toggle:not(.is-active),
.panel-about .panel-tab:not(.is-active){
  color:#7a7a7a !important;
}

.panel-about .panel-project-toggles .ui-toggle.is-active,
.panel-about .panel-tab.is-active{
  color:#000 !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;
  }
}


/* =========================================================
   v2026-06-15 SHOP v023 — controls, filter group 2, manufacturers
   Uses real asset folders again. No structural page layout changes.
   ========================================================= */

/* Button/icon hover: invert to LABOR logic without full dark blob */
.btn-projects,
.btn-about,
.btn-back,
.btn-next,
.btn-prev,
.btn-download{
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn-projects:hover,
.btn-projects:focus-visible,
.btn-about:hover,
.btn-about:focus-visible,
.btn-back:hover,
.btn-back:focus-visible,
.btn-next:hover,
.btn-next:focus-visible,
.btn-prev:hover,
.btn-prev:focus-visible,
.btn-download:hover,
.btn-download:focus-visible{
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.btn-projects svg,
.btn-about svg,
.btn-back svg,
.btn-next svg,
.btn-prev svg,
.btn-download svg{
  stroke: #000 !important;
  fill: none !important;
  color: #000 !important;
}

/* If buttons use image icons, avoid CSS-generated dark filled hover states */
.btn-projects img,
.btn-about img,
.btn-next img,
.btn-prev img,
.btn-download img,
.btn-back img{
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* -------------------------------------------------------------------------
   Right panel Hersteller: list-like, not giant standalone headline.
   Use ID / name rhythm equivalent to Objekte.
------------------------------------------------------------------------- */
.panel-about [data-beo-panel-tab="manufacturers"] ~ * .beo-panel-title-clean,
.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-title-clean,
.panel-about .beo-panel-manufacturer-title,
.panel-about .manufacturer-name{
  font-size: var(--beo-panel-title-fit, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-row-clean{
  grid-template-columns: 4.4ch minmax(0,1fr) !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean{
  color: #777 !important;
}

/* === v2026-06-16 v032 — SHOP global round buttons: LABOR logic inverted ===
   Use existing LABOR button SVG assets:
   - base SVGs are white outline on LABOR -> invert to black outline on SHOP
   - *-HOVER SVGs are white filled/black symbol on LABOR -> invert to black filled/white symbol on SHOP
   No geometry/spacing changes, only robust color/hover locking. */
.header .btn,
.footer .project-nav,
.footer .scroll-toggle,
.lightbox .btn,
.lightbox .project-nav,
.booklet-nav,
.project-nav,
.scroll-toggle{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.header .btn .btn-icon,
.header .btn img,
.footer .project-nav .btn-icon,
.footer .project-nav img,
.footer .scroll-toggle .scroll-arrow,
.footer .scroll-toggle img,
.lightbox .btn .btn-icon,
.lightbox .btn img,
.lightbox .project-nav .btn-icon,
.lightbox .project-nav img,
.booklet-nav .btn-icon,
.booklet-nav img,
.project-nav .btn-icon,
.project-nav img,
.scroll-toggle .scroll-arrow,
.scroll-toggle img{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
}

.header .btn:hover,
.footer .project-nav:hover,
.footer .scroll-toggle:hover,
.lightbox .btn:hover,
.lightbox .project-nav:hover,
.booklet-nav:hover,
.project-nav:hover,
.scroll-toggle:hover,
.header .btn.is-active,
.footer .project-nav.is-active,
.footer .scroll-toggle.is-active,
.lightbox .btn.is-active,
.lightbox .project-nav.is-active,
.booklet-nav.is-active,
.project-nav.is-active,
.scroll-toggle.is-active{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.header .btn:hover .btn-icon,
.header .btn:hover img,
.footer .project-nav:hover .btn-icon,
.footer .project-nav:hover img,
.footer .scroll-toggle:hover .scroll-arrow,
.footer .scroll-toggle:hover img,
.lightbox .btn:hover .btn-icon,
.lightbox .btn:hover img,
.lightbox .project-nav:hover .btn-icon,
.lightbox .project-nav:hover img,
.booklet-nav:hover .btn-icon,
.booklet-nav:hover img,
.project-nav:hover .btn-icon,
.project-nav:hover img,
.scroll-toggle:hover .scroll-arrow,
.scroll-toggle:hover img,
.project-nav.is-linked-hover .btn-icon,
.project-nav.is-linked-hover img,
.scroll-toggle.is-linked-hover .scroll-arrow,
.scroll-toggle.is-linked-hover img{
  opacity: 1 !important;
  visibility: visible !important;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
}

/* === v2026-06-16 v036 — BUTTON SVG RENDER FIX =============================
   The button SVG assets are already prepared in the images folder.
   Do not recolor them again in CSS. The previous v032 rule used filter: invert(1)
   and inherited blend modes, which made correct SVGs render as filled/white-on-white
   circles on SHOP. Render button SVGs as authored; JS may still swap to *-HOVER.svg.
============================================================================ */
.header,
.footer{
  mix-blend-mode: normal !important;
}

.header *,
.footer *{
  mix-blend-mode: normal !important;
}

.header .btn,
.footer .project-nav,
.footer .scroll-toggle,
.lightbox .btn,
.lightbox .project-nav,
.booklet-nav,
.project-nav,
.scroll-toggle{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.header .btn .btn-icon,
.header .btn img,
.footer .project-nav .btn-icon,
.footer .project-nav img,
.footer .scroll-toggle .scroll-arrow,
.footer .scroll-toggle img,
.lightbox .btn .btn-icon,
.lightbox .btn img,
.lightbox .project-nav .btn-icon,
.lightbox .project-nav img,
.booklet-nav .btn-icon,
.booklet-nav img,
.project-nav .btn-icon,
.project-nav img,
.scroll-toggle .scroll-arrow,
.scroll-toggle img{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.header .btn:hover .btn-icon,
.header .btn:hover img,
.footer .project-nav:hover .btn-icon,
.footer .project-nav:hover img,
.footer .scroll-toggle:hover .scroll-arrow,
.footer .scroll-toggle:hover img,
.lightbox .btn:hover .btn-icon,
.lightbox .btn:hover img,
.lightbox .project-nav:hover .btn-icon,
.lightbox .project-nav:hover img,
.booklet-nav:hover .btn-icon,
.booklet-nav:hover img,
.project-nav:hover .btn-icon,
.project-nav:hover img,
.scroll-toggle:hover .scroll-arrow,
.scroll-toggle:hover img,
.project-nav.is-linked-hover .btn-icon,
.project-nav.is-linked-hover img,
.scroll-toggle.is-linked-hover .scroll-arrow,
.scroll-toggle.is-linked-hover img{
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === v2026-06-16 v039 — SHOP RIGHT PANEL TYPOGRAPHY =======================
   Only the right off-canvas product/menu panel is adjusted here. The main
   project-title scale stays untouched. This brings SHOP closer to the calmer
   LABOR panel impression: smaller list titles, quieter codes, same layout.
============================================================================ */
.panel-about button.project-row .code,
.panel-about button.project-row .project-name,
.panel-about button.project-row .project-list-code,
.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: 28px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.panel-about button.project-row .code,
.panel-about button.project-row .project-list-code,
.panel-about .project-list .code,
.panel-about .publication-list .code,
.panel-about .archive-list .code{
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  color: var(--c-ui-soft) !important;
}

.panel-about button.project-row{
  grid-template-columns: 4ch 1fr;
  column-gap: 12px;
}

@media (max-width: 720px){
  .panel-about button.project-row .code,
  .panel-about button.project-row .project-name,
  .panel-about button.project-row .project-list-code,
  .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: 24px !important;
  }
  .panel-about button.project-row .code,
  .panel-about button.project-row .project-list-code,
  .panel-about .project-list .code,
  .panel-about .publication-list .code,
  .panel-about .archive-list .code{
    font-size: 18px !important;
  }
}

/* === v2026-06-16 v041 — SHOP TILE TITLE TONE ==============================
   Starting from v039 again. Only calm down tile captions: SHOP should not use
   pure black here, but a softer title tone closer to LABOR's subdued captions.
============================================================================ */
.tile-filename,
.tile-title,
.media-grid .tile-filename,
.media-grid .tile-title,
.panel-title,
.panel-version{
  color: #4f4f4f !important;
}

.tile:hover .tile-filename,
.tile:hover .tile-title,
.tile:focus-within .tile-filename,
.tile:focus-within .tile-title{
  color: #747474 !important;
}


/* === 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;
}


/* === v042 — SHOP detail / right-panel seam fix ==============================
   When the right menu panel is open, the main strip shifts left. The project
   banner must overdraw the content gutter slightly so no white seam appears
   between the banner edge and the panel.
============================================================================ */
body.has-project-banner .main-shell.shift-left .project-banner{
  width: calc(100vw + var(--content-pad) + 2px) !important;
  margin-right: calc(-1 * var(--content-pad) - 2px) !important;
}


/* === v043 scrollbar tone fix: neutral SHOP scrollbar, no white edge === */
html, body, .content, .panel, .side-panel, .detail-panel, .menu-panel, .overlay, .lightbox{
  scrollbar-width: thin;
  scrollbar-color: #b8b8b8 #eeeeee;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.content::-webkit-scrollbar,
.panel::-webkit-scrollbar,
.side-panel::-webkit-scrollbar,
.detail-panel::-webkit-scrollbar,
.menu-panel::-webkit-scrollbar,
.overlay::-webkit-scrollbar,
.lightbox::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track,
.detail-panel::-webkit-scrollbar-track,
.menu-panel::-webkit-scrollbar-track,
.overlay::-webkit-scrollbar-track,
.lightbox::-webkit-scrollbar-track{
  background: #eeeeee;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb,
.detail-panel::-webkit-scrollbar-thumb,
.menu-panel::-webkit-scrollbar-thumb,
.overlay::-webkit-scrollbar-thumb,
.lightbox::-webkit-scrollbar-thumb{
  background-color: #b8b8b8;
  border-radius: 999px;
  border: 2px solid #eeeeee;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.panel::-webkit-scrollbar-thumb:hover,
.side-panel::-webkit-scrollbar-thumb:hover,
.detail-panel::-webkit-scrollbar-thumb:hover,
.menu-panel::-webkit-scrollbar-thumb:hover,
.overlay::-webkit-scrollbar-thumb:hover,
.lightbox::-webkit-scrollbar-thumb:hover{
  background-color: #9f9f9f;
}
/* === end v043 scrollbar tone fix === */


/* v044 — product tile prices */
.tile-price{
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-tiletitle);
  line-height: 1.15;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tile-price-old{
  color: rgba(0,0,0,0.42);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tile-price-current{
  color: rgba(0,0,0,0.72);
}
.tile-price-sale{
  color: #3a9146;
}
.tile:hover .tile-price,
.tile:focus-within .tile-price{
  color: rgba(0,0,0,0.62);
}
.tile:hover .tile-price-sale,
.tile:focus-within .tile-price-sale{
  color: #3a9146;
}


/* v044 — product detail price */
.project-price{
  margin-top: 18px;
  display:flex;
  gap:10px;
  align-items:center;
  font-family: var(--font-mono, monospace);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height:1.2;
  color: rgba(0,0,0,0.82);
}
.project-price-old{
  color: rgba(0,0,0,0.45);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.project-price-sale{ color:#3a9146; }
.project-tax{
  margin-top: 6px;
  font-family: var(--font-mono, monospace);
  font-size: clamp(10px, 0.72vw, 12px);
  line-height:1.25;
  color: rgba(0,0,0,0.58);
  text-transform:none;
}
.project-price + .project-tax + .project-new,
.project-tax + .project-new{
  margin-top: 14px;
}
.tile-dot.is-reduced,
.tile-dot.is-prototype{
  color: var(--shop-status-reduced) !important;
  background: currentColor !important;
}
.tile-dot.is-archive,
.tile-dot.is-sold{
  color: var(--shop-status-sold) !important;
  background: currentColor !important;
}

/* Product detail: price/tax/status as one clear module below the title */
.project-price{
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline !important;
  gap: 10px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: clamp(13px, 0.95vw, 16px) !important;
  line-height: 1.18 !important;
  color: rgba(0,0,0,0.76) !important;
}
.project-price-old{
  color: rgba(0,0,0,0.46) !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(0,0,0,0.44) !important;
}
.project-price-current{
  color: rgba(0,0,0,0.76) !important;
}
.project-price-sale{
  color: var(--shop-status-reduced) !important;
}
.project-tax{
  margin-top: 7px !important;
  margin-bottom: 0 !important;
  display: block !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: clamp(9px, 0.62vw, 11px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  color: rgba(0,0,0,0.52) !important;
  text-transform: uppercase !important;
}

/* Tile price line remains calm and belongs to the title block */
.tile-price{
  margin-top: 3px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: var(--fs-tiletitle) !important;
  line-height: 1.18 !important;
  gap: 8px !important;
  color: rgba(0,0,0,0.66) !important;
}
.tile-price-old{
  color: rgba(0,0,0,0.45) !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
}
.tile-price-current{ color: rgba(0,0,0,0.72) !important; }
.tile-price-sale{ color: var(--shop-status-reduced) !important; }
/* === end v045 ========================================================= */


/* === v046 loading/image-init safety =========================================
   Tiles should never remain grey/unclickable because a cached image load event
   was missed. The JS now handles this, this CSS keeps the visual fallback sane.
============================================================================ */
.tile-thumb img.is-media-loading{
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}


/* === v047 — shop product archive refinements ================================
   - Overview tiles show the product name, while codes remain on detail pages.
   - Adds the new media filter "Prozess".
   - Product texts are rendered calm and non-bold.
   - First test for a reduced circular buy/add button. */

.project-text strong,
.project-col--text strong,
[data-project-text] strong{
  font-weight: inherit !important;
}

.project-buy-button{
  margin-top: 22px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #111;
  border-radius: 999px;
  background: transparent;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui, Inter, Arial, sans-serif);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .16s ease, color .16s ease, transform .08s ease;
}
.project-buy-button:hover,
.project-buy-button:focus-visible{
  background: #111;
  color: #fff;
  outline: 0;
}
.project-buy-button:active{
  transform: translateY(1px);
}
.project-buy-button[hidden]{ display:none !important; }

.tile-price,
.project-price{
  letter-spacing: 0 !important;
}
.project-banner.product-stage[hidden]{ display:none !important; }
.product-stage-media{
  width: min(840px, 77vw);
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.product-stage-img,
.project-banner.product-stage .project-banner-img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display:block;
  mix-blend-mode: multiply;
}
.product-stage-controls{
  position:absolute;
  left:50%;
  bottom:-12px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:4;
}
.project-buy-button.product-stage-buy{
  appearance:none;
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid var(--fg, #000);
  background:transparent;
  color:var(--fg, #000);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  font-weight:400;
  cursor:pointer;
  padding:0;
  font-family:var(--font-sans, inherit);
  transition:background 140ms ease, color 140ms ease, transform 100ms ease;
}
.project-buy-button.product-stage-buy:hover,
.project-buy-button.product-stage-buy:focus-visible{
  background:var(--fg, #000);
  color:var(--bg, #fff);
  outline:none;
}
.project-buy-button.product-stage-buy:active{ transform:translateY(var(--press, 1px)); }
.product-stage-shortcuts{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:var(--font-mono, monospace);
  font-size:11px;
  line-height:1;
  letter-spacing:0.14em;
  color:var(--fg-muted, #777);
}
.product-stage-shortcuts button{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.product-stage-shortcuts button:hover,
.product-stage-shortcuts button:focus-visible,
.product-stage-shortcuts button.is-active{
  color:var(--fg, #000);
  outline:none;
}
.project-col--title .project-buy-button:not(.product-stage-buy){ display:none !important; }
.project-new.is-reduced,
.project-new.is-prototype{ --status-color: var(--sale-badge, var(--prototype-badge)); }
.project-price + .project-tax{ margin-top:6px; }

@media (max-width: 760px){
  .project-banner.product-stage{
    min-height: 54vh;
    height: 54vh;
    padding-left: var(--content-pad, 18px);
    padding-right: var(--content-pad, 18px);
  }
  .product-stage-media{ width:min(92vw, 520px); }
  .project-buy-button.product-stage-buy{ width:42px; height:42px; font-size:26px; }
}
.product-stage-media{
  width: min(760px, 64vw) !important;
  height: calc(100% - 42px) !important;
  margin-top: 22px !important;
}
.product-stage-img,
.project-banner.product-stage .project-banner-img{
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: multiply;
}
.product-stage-controls{
  bottom: 20px !important;
  gap: 8px !important;
}
.project-buy-button.product-stage-buy{
  width: auto !important;
  min-width: 74px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 2px solid var(--fg, #000) !important;
  background: transparent !important;
  color: var(--fg, #000) !important;
  font-family: var(--font-ui, Inter, Arial, sans-serif) !important;
  font-size: var(--fs-label, 11px) !important;
  font-weight: var(--fw-label, 400) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.project-buy-button.product-stage-buy:hover,
.project-buy-button.product-stage-buy:focus-visible{
  background: var(--fg, #000) !important;
  color: var(--bg, #fff) !important;
  outline: none !important;
}
.product-stage-shortcuts{
  margin-top: 2px !important;
}
@media (max-width: 760px){
  .project-banner.product-stage{
    width: calc(100% + (2 * var(--content-pad, 18px))) !important;
    margin-left: calc(-1 * var(--content-pad, 18px)) !important;
    margin-right: calc(-1 * var(--content-pad, 18px)) !important;
    min-height: 56vh !important;
    height: 56vh !important;
  }
  .product-stage-media{
    width: min(88vw, 520px) !important;
  }
}
.product-stage-media{
  width: min(1040px, 78vw) !important;
  height: calc(100% - 94px) !important;
  margin-top: -20px !important;
  transform: translateY(-22px) scale(1.16) !important;
  transform-origin: center center !important;
}
.product-stage-img,
.project-banner.product-stage .project-banner-img{
  object-fit: contain !important;
  object-position: center center !important;
}
.product-stage-controls{
  bottom: 26px !important;
  gap: 8px !important;
}
.product-stage-action-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pill-gap, 10px) !important;
}
.product-stage-rotate{
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 999px !important;
}
.product-stage-rotate img{
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.product-stage-rotate:hover,
.product-stage-rotate:focus-visible{
  outline: none !important;
  transform: translateY(var(--press, 0px));
}
.project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 2px solid var(--fg, #000) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-stage-shortcuts{
  margin-top: 0 !important;
  gap: 14px !important;
  font-size: 11px !important;
}

@media (max-width: 760px){
  .project-banner.product-stage{
    min-height: 58vh !important;
    height: 58vh !important;
    padding-bottom: 70px !important;
  }
  .product-stage-media{
    width: min(96vw, 640px) !important;
    height: calc(100% - 96px) !important;
    margin-top: -12px !important;
    transform: translateY(-14px) scale(1.08) !important;
  }
  .project-buy-button.product-stage-buy{
    height: 30px !important;
    min-height: 30px !important;
  }
  .product-stage-rotate,
  .product-stage-rotate img{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}
.product-stage-media{
  background: transparent !important;
  width: min(1180px, 82vw) !important;
  height: calc(100% - 72px) !important;
  margin-top: -54px !important;
  transform: translateY(-34px) scale(1.28) !important;
  transform-origin: center center !important;
}
.product-stage-img,
.project-banner.product-stage .project-banner-img{
  background: transparent !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.product-stage-controls{
  bottom: 22px !important;
}
.product-stage-action-row{
  gap: var(--pill-gap, 10px) !important;
}
.product-stage-rotate{
  transform: none !important;
}
.project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 0 18px !important;
  font-size: calc(var(--fs-label, 12px) - 2px) !important;
  line-height: 1 !important;
}
.product-stage-shortcuts{
  margin-top: 2px !important;
}

/* Initial-load guard: keep hidden side panels completely outside the viewport until JS is ready. */
body.is-loading{
  overflow-x: hidden !important;
}
body.is-loading .panel-projects,
body.is-loading .panel-about{
  visibility: hidden !important;
  pointer-events: none !important;
}
body.is-loading .main-shell,
body.is-loading .content,
body.is-loading .main,
body.is-loading .main-inner{
  transform: none !important;
}

@media (max-width: 760px){
  .project-banner.product-stage{
    min-height: 58vh !important;
    height: 58vh !important;
    padding-bottom: 62px !important;
  }
  .product-stage-media{
    width: min(116vw, 760px) !important;
    height: calc(100% - 70px) !important;
    margin-top: -32px !important;
    transform: translateY(-24px) scale(1.16) !important;
  }
}
.product-stage-media{
  width: min(1120px, 80vw) !important;
  height: calc(100% - 82px) !important;
  margin-top: -48px !important;
  transform: translateY(-36px) scale(1.18) !important;
  transform-origin: center center !important;
}
.product-stage-img,
.project-banner.product-stage .project-banner-img{
  background: transparent !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.product-stage-action-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pill-gap, 10px) !important;
  height: 32px !important;
}
.product-stage-rotate,
.product-stage-rotate:hover,
.product-stage-rotate:focus-visible,
.product-stage-rotate:active{
  transform: none !important;
  translate: 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.product-stage-rotate img{
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}
.project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 0 18px !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-family: var(--font-ui, Inter, Arial, sans-serif) !important;
  font-size: calc(var(--fs-label, 12px) - 2px) !important;
  font-weight: var(--fw-label, 400) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.project-buy-button.product-stage-buy:hover,
.project-buy-button.product-stage-buy:focus-visible{
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  outline: none !important;
}
.project-stage-shortcuts,
.product-stage-shortcuts{
  margin-top: 7px !important;
}

@media (max-width: 760px){
  .product-stage-media{
    width: min(108vw, 720px) !important;
    height: calc(100% - 84px) !important;
    margin-top: -30px !important;
    transform: translateY(-26px) scale(1.10) !important;
  }
}
.product-stage-action-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pill-gap, 10px) !important;
  height: 32px !important;
  line-height: 32px !important;
}
.product-stage-action-row > *{
  align-self: center !important;
  position: relative !important;
  top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.product-stage-rotate,
.product-stage-rotate:hover,
.product-stage-rotate:focus-visible,
.product-stage-rotate:active{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 32px !important;
  transform: none !important;
  translate: none !important;
}
.product-stage-rotate img{
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  object-fit: contain !important;
}
.project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 0 18px !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  transform: none !important;
  translate: none !important;
}
.project-buy-button.product-stage-buy:hover,
.project-buy-button.product-stage-buy:focus-visible{
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* === v059 — product stage taller, object recalibrated =====================
   - Product stage receives a little more vertical room, closer to the calm
     LABOR booklet presence, without becoming fully monumental.
   - Object scale stays controlled; the extra height creates air rather than
     simply enlarging the product.
   - Controls move with the stage and stay optically connected to the object.
============================================================================ */
.project-banner.product-stage{
  min-height: clamp(620px, 70vh, 980px) !important;
  height: clamp(620px, 70vh, 980px) !important;
  padding-top: calc(var(--header-h, 64px) + 0px) !important;
  padding-bottom: 78px !important;
}

.project-banner.product-stage .product-stage-media,
.product-stage-media{
  width: min(1120px, 80vw) !important;
  height: calc(100% - 96px) !important;
  margin-top: -34px !important;
  transform: translateY(-4px) scale(1.14) !important;
  transform-origin: center center !important;
}

.product-stage-controls{
  bottom: 30px !important;
}

.product-stage-action-row{
  gap: var(--pill-gap, 10px) !important;
}

@media (max-width: 760px){
  .project-banner.product-stage{
    min-height: clamp(520px, 66vh, 720px) !important;
    height: clamp(520px, 66vh, 720px) !important;
    padding-bottom: 70px !important;
  }
  .project-banner.product-stage .product-stage-media,
  .product-stage-media{
    width: min(112vw, 760px) !important;
    height: calc(100% - 88px) !important;
    margin-top: -24px !important;
    transform: translateY(0) scale(1.08) !important;
  }
  .product-stage-controls{
    bottom: 24px !important;
  }
}

/* === v062 — product stage surface + height recalibration ==================
   - Remove subtle gradient; use a calm, clearly differentiated flat stage.
   - Stage is intentionally a little taller again, closer to the LABOR media
     presence, while keeping the product object itself almost unchanged.
   - No image/assets changes.
============================================================================ */
.project-banner.product-stage{
  background: #f1f1f1 !important;
  background-image: none !important;
  min-height: clamp(700px, 76vh, 1080px) !important;
  height: clamp(700px, 76vh, 1080px) !important;
  padding-top: calc(var(--header-h, 64px) + 6px) !important;
  padding-bottom: 92px !important;
}

.project-banner.product-stage .product-stage-media,
.product-stage-media{
  width: min(1120px, 80vw) !important;
  height: calc(100% - 112px) !important;
  margin-top: -18px !important;
  transform: translateY(0) scale(1.13) !important;
  transform-origin: center center !important;
}

.product-stage-img,
.project-banner.product-stage .project-banner-img{
  mix-blend-mode: multiply !important;
}

.product-stage-controls{
  bottom: 36px !important;
}

@media (max-width: 760px){
  .project-banner.product-stage{
    min-height: clamp(560px, 72vh, 780px) !important;
    height: clamp(560px, 72vh, 780px) !important;
    padding-bottom: 78px !important;
  }
  .project-banner.product-stage .product-stage-media,
  .product-stage-media{
    width: min(110vw, 760px) !important;
    height: calc(100% - 104px) !important;
    margin-top: -12px !important;
    transform: translateY(0) scale(1.08) !important;
  }
  .product-stage-controls{
    bottom: 28px !important;
  }
}

/* === v063 — hard product-stage override: visible height + flat light field ===
   Previous v062 values were still partly swallowed by the generic project-banner
   opener rules. Target the real SHOP product stage after all opener rules.
   - flat, slightly lighter grey than panel fields
   - visibly taller opener shell
   - keep current object scale/control proportions stable
============================================================================ */
body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  background: #f6f6f6 !important;
  background-image: none !important;
  min-height: clamp(760px, 82vh, 1120px) !important;
  height: clamp(760px, 82vh, 1120px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: calc(var(--header-h, 64px) + 8px) !important;
  padding-bottom: 96px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.has-project-banner .project-banner.product-stage .project-banner-img,
.project-view .project-banner.product-stage .project-banner-img,
.project-banner.product-stage .project-banner-img,
.project-banner.product-stage .product-stage-img{
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1120px, 80vw) !important;
  height: calc(100% - 124px) !important;
  margin-top: -10px !important;
  transform: translateY(0) scale(1.13) !important;
  transform-origin: center center !important;
  background: transparent !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  bottom: 38px !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    min-height: clamp(600px, 78vh, 840px) !important;
    height: clamp(600px, 78vh, 840px) !important;
    padding-bottom: 82px !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(110vw, 760px) !important;
    height: calc(100% - 112px) !important;
    margin-top: -8px !important;
    transform: translateY(0) scale(1.08) !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-controls,
  .project-view .project-banner.product-stage .product-stage-controls,
  .project-banner.product-stage .product-stage-controls{
    bottom: 30px !important;
  }
}

/* === v064 — product opener rhythm reset ===================================
   Stage was finally affecting the real container in v063, but too hard:
   the product field became oversized and the information grid started too
   tight below it. Keep the stage as a calm flat field, but bring the overall
   rhythm closer to the LABOR opener logic: media field, then a real breathing
   gap before the three-column information block.
============================================================================ */
body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  background: #f4f4f4 !important;
  background-image: none !important;
  min-height: clamp(680px, 74vh, 1020px) !important;
  height: clamp(680px, 74vh, 1020px) !important;
  padding-top: calc(var(--header-h, 64px) + 6px) !important;
  padding-bottom: 88px !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  height: calc(100% - 118px) !important;
  margin-top: -8px !important;
  transform: translateY(0) scale(1.10) !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  bottom: 34px !important;
}

.project-view .project-banner.product-stage + .project-header,
body.has-project-banner .project-banner.product-stage + .project-header{
  padding-top: clamp(34px, 4.2vh, 58px) !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    min-height: clamp(560px, 72vh, 780px) !important;
    height: clamp(560px, 72vh, 780px) !important;
    padding-bottom: 78px !important;
  }

  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    height: calc(100% - 108px) !important;
    margin-top: -6px !important;
    transform: translateY(0) scale(1.06) !important;
  }

  .project-view .project-banner.product-stage + .project-header,
  body.has-project-banner .project-banner.product-stage + .project-header{
    padding-top: 28px !important;
  }
}

/* === v065 — LABOR-like product opener top rhythm ===========================
   Keep v064 stage size and flat grey field, but align the product presentation
   closer to the LABOR project opener: less empty air above the object. The media
   object and its controls move up as one opener system; the information grid
   below keeps its existing rhythm.
============================================================================ */
body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  background: #f4f4f4 !important;
  background-image: none !important;
  min-height: clamp(680px, 74vh, 1020px) !important;
  height: clamp(680px, 74vh, 1020px) !important;
  padding-top: calc(var(--header-h, 64px) + 0px) !important;
  padding-bottom: 88px !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  height: calc(100% - 118px) !important;
  margin-top: 0 !important;
  transform: translateY(-118px) scale(1.10) !important;
  transform-origin: center center !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  bottom: 152px !important;
}

.project-view .project-banner.product-stage + .project-header,
body.has-project-banner .project-banner.product-stage + .project-header{
  padding-top: clamp(34px, 4.2vh, 58px) !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    min-height: clamp(560px, 72vh, 780px) !important;
    height: clamp(560px, 72vh, 780px) !important;
    padding-bottom: 78px !important;
  }

  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    height: calc(100% - 108px) !important;
    margin-top: 0 !important;
    transform: translateY(-76px) scale(1.06) !important;
  }

  body.has-project-banner .project-banner.product-stage .product-stage-controls,
  .project-view .project-banner.product-stage .product-stage-controls,
  .project-banner.product-stage .product-stage-controls{
    bottom: 112px !important;
  }
}

/* === v067 — final product opener rhythm cleanup ===========================
   Clean, single override after the earlier product-stage experiments.
   Goal: calm SHOP product stage, no over-pulled object, stable buy controls,
   and a coherent breathing gap between media field and information grid,
   matching the LABOR opener rhythm conceptually without adding product-specific
   one-off rules.
============================================================================ */
:root{
  --shop-product-stage-height: clamp(560px, 72vh, 760px);
  --shop-product-stage-gap: var(--project-banner-loose-gap, 28px);
  --shop-product-stage-bg: #f4f4f4;
}

body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  width: 100% !important;
  height: var(--shop-product-stage-height) !important;
  min-height: var(--shop-product-stage-height) !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: var(--shop-product-stage-gap) !important;
  padding-top: calc(var(--header-h, 64px) + 10px) !important;
  padding-right: var(--content-pad, 22px) !important;
  padding-bottom: 112px !important;
  padding-left: var(--content-pad, 22px) !important;
  box-sizing: border-box !important;
  background: var(--shop-product-stage-bg) !important;
  background-image: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1080px, 78vw) !important;
  height: calc(100% - 176px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: translateY(-24px) scale(1.09) !important;
  transform-origin: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.has-project-banner .project-banner.product-stage .project-banner-img,
.project-view .project-banner.product-stage .project-banner-img,
.project-banner.product-stage .project-banner-img,
.project-banner.product-stage .product-stage-img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
  display: block !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  position: absolute !important;
  left: 50% !important;
  bottom: 52px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 4 !important;
}

.project-banner.product-stage .product-stage-action-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pill-gap, 10px) !important;
}

.project-banner.product-stage .product-stage-rotate,
.project-banner.product-stage .product-stage-rotate:hover,
.project-banner.product-stage .product-stage-rotate:focus-visible,
.project-banner.product-stage .product-stage-rotate:active{
  position: relative !important;
  top: -7px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: none !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
}
.project-banner.product-stage .product-stage-rotate img{
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block !important;
  transform: none !important;
  rotate: 0deg !important;
}

.project-banner.product-stage .project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 1px 18px 0 18px !important;
  border: 2px solid var(--fg, #000) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fg, #000) !important;
  -webkit-text-fill-color: var(--fg, #000) !important;
  font-family: var(--font-ui, Inter, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.project-banner.product-stage .product-stage-shortcuts{
  margin-top: 0 !important;
  gap: 14px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.project-view .project-banner.product-stage + .project-header,
body.has-project-banner .project-banner.product-stage + .project-header{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 760px){
  :root{
    --shop-product-stage-height: clamp(520px, 72vh, 700px);
    --shop-product-stage-gap: 24px;
  }
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    padding-top: calc(var(--header-h, 64px) + 8px) !important;
    padding-bottom: 96px !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(110vw, 760px) !important;
    height: calc(100% - 154px) !important;
    transform: translateY(-16px) scale(1.04) !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-controls,
  .project-view .project-banner.product-stage .product-stage-controls,
  .project-banner.product-stage .product-stage-controls{
    bottom: 44px !important;
  }
}
/* === end v067 ============================================================= */

/* === v068 — stage width + product scale microfix ===========================
   - Product stage bleeds to the full viewport width again.
   - Product image is increased slightly from v067, without changing the overall
     opener rhythm or the information block below.
============================================================================ */
body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: var(--content-pad, 22px) !important;
  padding-right: var(--content-pad, 22px) !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1160px, 82vw) !important;
  height: calc(100% - 160px) !important;
  transform: translateY(-22px) scale(1.13) !important;
  transform-origin: center center !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(114vw, 780px) !important;
    height: calc(100% - 144px) !important;
    transform: translateY(-14px) scale(1.08) !important;
  }
}
/* === end v068 ============================================================= */

/* === v069 — final product opener consolidation (2026-06-17) ===============
   Consolidates the last product-stage iterations:
   - full-bleed stage band again, independent from the padded .frame
   - calm flat grey field, no gradient/card background
   - product slightly larger than v067/v068 without returning to the oversized state
   - controls visually tied to the product, arrows unrotated and slightly raised
   - same media-to-text rhythm as LABOR: the stage itself carries the gap; the
     project header starts cleanly without extra SHOP-only top padding
============================================================================ */
:root{
  --shop-product-stage-bg-final: #f3f3f3;
  --shop-product-stage-height-final: clamp(590px, 72vh, 820px);
  --shop-product-stage-gap-final: var(--project-banner-loose-gap, 28px);
}

body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: var(--shop-product-stage-gap-final) !important;
  height: var(--shop-product-stage-height-final) !important;
  min-height: var(--shop-product-stage-height-final) !important;
  max-height: none !important;
  padding: calc(var(--header-h, 64px) + 22px) var(--content-pad, 22px) 126px var(--content-pad, 22px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--shop-product-stage-bg-final) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1240px, 88vw) !important;
  height: calc(100% - 128px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: translateY(-10px) scale(1.16) !important;
  transform-origin: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.has-project-banner .project-banner.product-stage .project-banner-img,
.project-view .project-banner.product-stage .project-banner-img,
.project-banner.product-stage .project-banner-img,
.project-banner.product-stage .product-stage-img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  position: absolute !important;
  left: 50% !important;
  bottom: 66px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 4 !important;
}

.project-banner.product-stage .product-stage-action-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pill-gap, 10px) !important;
}

.project-banner.product-stage .product-stage-rotate,
.project-banner.product-stage .product-stage-rotate:hover,
.project-banner.product-stage .product-stage-rotate:focus-visible,
.project-banner.product-stage .product-stage-rotate:active{
  position: relative !important;
  top: -7px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: none !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
  cursor: pointer !important;
}
.project-banner.product-stage .product-stage-rotate img{
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block !important;
  transform: none !important;
  rotate: 0deg !important;
}

.project-banner.product-stage .project-buy-button.product-stage-buy{
  height: 32px !important;
  min-height: 32px !important;
  min-width: 84px !important;
  padding: 1px 18px 0 18px !important;
  border: 2px solid var(--fg, #000) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fg, #000) !important;
  -webkit-text-fill-color: var(--fg, #000) !important;
  font-family: var(--font-ui, Inter, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.project-banner.product-stage .product-stage-shortcuts{
  margin-top: 0 !important;
  gap: 14px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.project-view .project-banner.product-stage + .project-header,
body.has-project-banner .project-banner.product-stage + .project-header{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 760px){
  :root{
    --shop-product-stage-height-final: clamp(520px, 72vh, 700px);
    --shop-product-stage-gap-final: 22px;
  }
  body.has-project-banner .project-banner.product-stage,
  .project-view .project-banner.product-stage,
  .project-banner.product-stage{
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: calc(var(--header-h, 64px) + 14px) var(--content-pad, 22px) 108px var(--content-pad, 22px) !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(116vw, 820px) !important;
    height: calc(100% - 120px) !important;
    transform: translateY(-6px) scale(1.18) !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-controls,
  .project-view .project-banner.product-stage .product-stage-controls,
  .project-banner.product-stage .product-stage-controls{
    bottom: 54px !important;
  }
}

/* Product opener: keep v069 full-bleed/rhythm, just give product more presence. */
body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1420px, 94vw) !important;
  height: calc(100% - 112px) !important;
  transform: translateY(-10px) scale(1.44) !important;
  transform-origin: center center !important;
}

/* Move full buy/rotate control group down toward the stage/text edge. */
body.has-project-banner .project-banner.product-stage .product-stage-controls,
.project-view .project-banner.product-stage .product-stage-controls,
.project-banner.product-stage .product-stage-controls{
  bottom: 40px !important;
}

/* Keep rotate arrows slightly raised relative to Kaufen, unrotated. */
.project-banner.product-stage .product-stage-rotate,
.project-banner.product-stage .product-stage-rotate:hover,
.project-banner.product-stage .product-stage-rotate:focus-visible,
.project-banner.product-stage .product-stage-rotate:active{
  top: -7px !important;
  transform: none !important;
  rotate: 0deg !important;
}
.project-banner.product-stage .product-stage-rotate img{
  transform: none !important;
  rotate: 0deg !important;
}

/* Kaufen: explicit hover lock. */
.project-banner.product-stage .project-buy-button.product-stage-buy:hover,
.project-banner.product-stage .project-buy-button.product-stage-buy:focus-visible{
  background: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #000000 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Remove smile/meh/about button in all lightbox states/views. */
.lightbox .lightbox-about,
.lightbox .btn-about,
.lightbox-header .btn-about,
.is-lightbox-open .btn-about.lightbox-about{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(124vw, 900px) !important;
    height: calc(100% - 118px) !important;
    transform: translateY(-6px) scale(1.16) !important;
  }
  body.has-project-banner .project-banner.product-stage .product-stage-controls,
  .project-view .project-banner.product-stage .product-stage-controls,
  .project-banner.product-stage .product-stage-controls{
    bottom: 36px !important;
  }
}
/* === end v072 ============================================================= */

/* === v073 — product origin metadata + product image presence ================
   - Herkunft carries the compact production/origin story for products.
   - Product object gets a final subtle size increase from v072.
============================================================================ */
body.has-project-banner .project-banner.product-stage .product-stage-media,
.project-view .project-banner.product-stage .product-stage-media,
.project-banner.product-stage .product-stage-media{
  width: min(1500px, 96vw) !important;
  height: calc(100% - 112px) !important;
  transform: translateY(-10px) scale(1.48) !important;
  transform-origin: center center !important;
}

@media (max-width: 760px){
  body.has-project-banner .project-banner.product-stage .product-stage-media,
  .project-view .project-banner.product-stage .product-stage-media,
  .project-banner.product-stage .product-stage-media{
    width: min(138vw, 980px) !important;
    height: calc(100% - 108px) !important;
    transform: translateY(-6px) scale(1.30) !important;
  }
}
/* === end v073 ============================================================= */










/* =========================================================
   beo UI SYSTEM — SHOP
   One component system for filter pills, status badges and panel rows.
   Geometry matches LABOR; colors are SHOP 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(236,236,236);
  --beo-filter-bg-2: rgb(244,244,244);
  --beo-filter-fg: rgb(105,105,105);
  --beo-filter-active-bg: rgb(0,0,0);
  --beo-filter-active-fg: rgb(255,255,255);

  --beo-status-new: rgb(255,90,31);
  --beo-status-new-bg: rgb(244,223,210);
  --beo-status-reduced: rgb(58,145,70);
  --beo-status-reduced-bg: rgb(217,239,217);
  --beo-status-sold: rgb(119,119,119);
  --beo-status-sold-bg: var(--beo-filter-bg-1);

  --beo-panel-code-size: 12px;
  --beo-panel-title-size: 22px;
  --beo-panel-row-gap: 12px;
  --beo-panel-code-col: 4.5ch;
}

/* Product buy button. */
.project-banner.product-stage .project-buy-button.product-stage-buy:hover,
.project-banner.product-stage .project-buy-button.product-stage-buy:focus-visible{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Right panel: same rhythm as LABOR, light theme. */
.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(0,0,0) !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;
  letter-spacing:0.02em !important;
  text-transform:uppercase !important;
  color:rgb(170,170,170) !important;
  white-space:nowrap !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(0,0,0) !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(80,80,80) !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(140,140,140) !important;
}
.panel-about .beo-panel-row-clean.is-current .beo-panel-title-clean{
  color:rgb(0,0,0) !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(150,150,150) !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(110,110,110) !important;
}
@media (max-width:800px){
  .panel-about .panel-body,
  .panel-projects .panel-body{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* SHOP fixed UI should invert on media like LABOR. */
body:not(.panel-open) > .header,
body:not(.panel-open) > .footer{
  mix-blend-mode:difference !important;
  color:#fff !important;
  filter:none !important;
}
body:not(.panel-open) > .header *,
body:not(.panel-open) > .footer *{
  color:inherit !important;
  border-color:currentColor !important;
  mix-blend-mode:inherit !important;
}
body:not(.panel-open) > .header img,
body:not(.panel-open) > .footer img,
body:not(.panel-open) > .header svg,
body:not(.panel-open) > .footer svg{
  filter:invert(1) !important;
}

/* === v094 — SHOP UI difference mode like LABOR ==============================
   Target only persistent UI overlays (header/footer). SHOP keeps its light theme;
   UI elements are rendered white and blended with difference, so they appear black
   on white areas and invert over images/dark areas, matching LABOR behavior.
============================================================================ */
body.is-shop .header,
body.is-shop .footer{
  mix-blend-mode: difference !important;
  filter: none !important;
  isolation: auto !important;
}
body.is-shop .header *,
body.is-shop .footer *{
  mix-blend-mode: inherit !important;
  filter: none !important;
}
body.is-shop .header,
body.is-shop .header a,
body.is-shop .header button,
body.is-shop .header .ui-toggle,
body.is-shop .header-toggle,
body.is-shop .footer,
body.is-shop .footer a,
body.is-shop .footer button,
body.is-shop .footer .ui-toggle,
body.is-shop .footer-filter-toggle,
body.is-shop .footer .footer-label,
body.is-shop .footer .footer-title,
body.is-shop .footer .tile-title,
body.is-shop .footer .tile-filename,
body.is-shop .footer .project-nav-label,
body.is-shop .scroll-toggle{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.is-shop .lightbox .lb-project-toggle{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}
body.is-shop .header .btn .btn-icon,
body.is-shop .header .btn img,
body.is-shop .header .logo img,
body.is-shop .header .logo svg,
body.is-shop .footer .project-nav .btn-icon,
body.is-shop .footer .project-nav img,
body.is-shop .footer .scroll-toggle .scroll-arrow,
body.is-shop .footer .scroll-toggle img{
  filter: invert(1) !important;
  mix-blend-mode: inherit !important;
  opacity: 1 !important;
  visibility: visible !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(238,238,238);
  --beo-filter-pill-fg: rgb(110,110,110);
  --beo-filter-pill-active-bg: rgb(0,0,0);
  --beo-filter-pill-active-fg: rgb(255,255,255);
  --beo-filter-pill-hover-bg: rgb(224,224,224);
  --beo-filter-pill-hover-fg: rgb(65,65,65);
}

.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-reduced{ --status-color:var(--beo-status-reduced, rgb(58,145,70)); }
.filter-pill--status.is-status-verkauft{ --status-color:var(--beo-status-sold, rgb(119,119,119)); }
.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);
}


/* =========================================================
   v110 — SHOP freeze polish: status dots, sale price, facts, buy button
   SHOP-only refinement. LABOR remains unchanged from v109.
   ========================================================= */
:root{
  --shop-status-new: var(--beo-status-new, rgb(255,106,18));
  --shop-status-reduced: var(--beo-status-reduced, rgb(58,145,70));
  --shop-status-sold: var(--beo-status-sold, rgb(140,140,140));
  --shop-tile-dot-size: var(--beo-status-badge-dot, 5px);
}

.tile-dots{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  vertical-align:middle;
}
.tile-dot{
  display:inline-block;
  flex:0 0 var(--shop-tile-dot-size);
  width:var(--shop-tile-dot-size);
  height:var(--shop-tile-dot-size);
  min-width:var(--shop-tile-dot-size);
  min-height:var(--shop-tile-dot-size);
  border-radius:50%;
  border:0;
  background:currentColor;
  color:var(--shop-status-new);
  font-size:0;
  line-height:0;
  overflow:hidden;
  transform:translateY(-0.01em);
}
.tile-dot.is-new{ color:var(--shop-status-new); }
.tile-dot.is-reduced,
.tile-dot.is-prototype{ color:var(--shop-status-reduced); }
.tile-dot.is-sold,
.tile-dot.is-archive{ color:var(--shop-status-sold); }

.tile-price-sale,
.tile:hover .tile-price-sale,
.tile:focus-within .tile-price-sale,
.project-price-sale{
  color:var(--shop-status-reduced);
}

.project-fact-value,
.project-fact-value p,
.project-fact-value span{
  white-space:pre-line;
  overflow-wrap:break-word;
  word-break:normal;
}

.project-banner.product-stage .project-buy-button.product-stage-buy,
.project-buy-button.product-stage-buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  box-sizing:border-box;
}


/* =========================================================
   v112/v115 — SHOP coherent media hover
   Light-mode pendant to LABOR: visible, calm image lift + softer captions.
   Kept SHOP-local by package scope; no body class dependency.
   ========================================================= */
.media-grid .tile-thumb img,
.media-grid .tile-thumb video,
.project-media-grid .tile-thumb img,
.project-media-grid .tile-thumb video,
.project-media img,
.project-media video{
  transition: filter 180ms ease, opacity 180ms ease;
}

.media-grid .tile:hover .tile-thumb img,
.media-grid .tile:focus-within .tile-thumb img,
.media-grid .tile:hover .tile-thumb video,
.media-grid .tile:focus-within .tile-thumb video,
.project-media-grid .tile:hover .tile-thumb img,
.project-media-grid .tile:focus-within .tile-thumb img,
.project-media-grid .tile:hover .tile-thumb video,
.project-media-grid .tile:focus-within .tile-thumb video,
.project-media:hover img,
.project-media:focus-within img,
.project-media:hover video,
.project-media:focus-within video{
  filter: brightness(1.075) contrast(1.012);
}

.media-grid .tile:hover .tile-title,
.media-grid .tile:hover .tile-filename,
.media-grid .tile:hover .tile-price,
.media-grid .tile:hover .tile-price-old,
.media-grid .tile:hover .tile-price-current,
.media-grid .tile:focus-within .tile-title,
.media-grid .tile:focus-within .tile-filename,
.media-grid .tile:focus-within .tile-price,
.media-grid .tile:focus-within .tile-price-old,
.media-grid .tile:focus-within .tile-price-current,
.project-media-grid .tile:hover .tile-title,
.project-media-grid .tile:hover .tile-filename,
.project-media-grid .tile:hover .tile-price,
.project-media-grid .tile:hover .tile-price-old,
.project-media-grid .tile:hover .tile-price-current,
.project-media-grid .tile:focus-within .tile-title,
.project-media-grid .tile:focus-within .tile-filename,
.project-media-grid .tile:focus-within .tile-price,
.project-media-grid .tile:focus-within .tile-price-old,
.project-media-grid .tile:focus-within .tile-price-current{
  color:#a8a8a8 !important;
}

.media-grid .tile:hover .tile-price-sale,
.media-grid .tile:focus-within .tile-price-sale,
.project-media-grid .tile:hover .tile-price-sale,
.project-media-grid .tile:focus-within .tile-price-sale{
  color:color-mix(in srgb, var(--shop-status-reduced) 80%, #a8a8a8) !important;
}

/* === 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. Product pages use the SHOP product
   stage gap; other project/detail pages fall back to the shared banner gap.
============================================================================ */
:root{
  --detail-info-gallery-gap: var(--shop-product-stage-gap-final, 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(--shop-product-stage-gap-final, var(--project-banner-loose-gap, 22px));
  }
}
/* === end v113 ============================================================= */


/* === v115 — Payment Link ready state ======================================
   Kaufen remains the visual CTA. Without a Stripe Payment Link it is disabled
   instead of opening a mail fallback.
============================================================================ */
.project-buy-button.product-stage-buy.is-payment-missing{
  cursor:not-allowed;
  opacity:.42;
}
.project-buy-button.product-stage-buy.is-payment-missing:hover,
.project-buy-button.product-stage-buy.is-payment-missing:focus-visible{
  background:transparent;
  color:#000;
  border-color:#000;
}
/* === end v115 ============================================================= */


/* =========================================================
   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);
  --shop-product-stage-gap-final: 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);
    --shop-product-stage-gap-final: 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);
    --shop-product-stage-gap-final: var(--detail-textblock-rhythm-gap);
    --detail-info-gallery-gap: var(--detail-textblock-rhythm-gap);
  }
}
/* === end v126 ============================================================= */

/* === v130 — SHOP header toggle state + lightbox footer parity ===============
   Keep the LABOR-like difference behavior, but preserve active/inactive state
   on light SHOP backgrounds: active renders black, inactive grey. Also ensure
   product-page lightbox has no right-side project arrow, matching LABOR. */
body.is-shop .header .header-toggle:not(.is-active),
body.is-shop .header .ui-toggle:not(.is-active),
body.is-shop .header .lang-toggle:not(.is-active){
  color: rgb(145,145,145) !important;
  -webkit-text-fill-color: rgb(145,145,145) !important;
}
body.is-shop .header .header-toggle.is-active,
body.is-shop .header .ui-toggle.is-active,
body.is-shop .header .lang-toggle.is-active,
body.is-shop .header .header-toggle[aria-pressed="true"],
body.is-shop .header .ui-toggle[aria-pressed="true"],
body.is-shop .header .lang-toggle[aria-pressed="true"]{
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
.lightbox .lb-footer-slot--5[hidden],
.lightbox .lb-project-toggle[hidden]{
  display: none !important;
}

/* === v132 — SHOP header toggle visibility in difference mode =================
   The persistent SHOP header uses mix-blend-mode:difference. To render active
   toggles visually black on the light SHOP background, the source color must be
   white; inactive toggles use a darker source grey so they appear as subtle grey.
   This restores visible Labor/Shop and De/En states without affecting lightbox
   footer text. */
body.is-shop .header .header-toggle:not(.is-active),
body.is-shop .header .ui-toggle:not(.is-active),
body.is-shop .header .lang-toggle:not(.is-active){
  color: rgb(110,110,110) !important;
  -webkit-text-fill-color: rgb(110,110,110) !important;
}
body.is-shop .header .header-toggle.is-active,
body.is-shop .header .ui-toggle.is-active,
body.is-shop .header .lang-toggle.is-active,
body.is-shop .header .header-toggle[aria-pressed="true"],
body.is-shop .header .ui-toggle[aria-pressed="true"],
body.is-shop .header .lang-toggle[aria-pressed="true"]{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* === end v132 =============================================================== */


/* =========================================================================
   PATCH 2026-07-03: Sonderseiten ohne Produktbühne
   -------------------------------------------------------------------------
   Späte Produktbühnen-Regeln dürfen das native hidden-Attribut nicht überstimmen.
============================================================================ */
.project-banner.product-stage[hidden],
.project-view .project-banner.product-stage[hidden],
body.has-project-banner .project-banner.product-stage[hidden]{
  display: none !important;
}

/* =========================================================================
   PATCH 2026-07-03 v137 — SHOP makers + softbox product stage
   -------------------------------------------------------------------------
   - Hersteller im rechten Panel mit Logokreisen statt Codes.
   - Herstellerportraits auf Über mit klarer Abschnittsstruktur.
   - Produktbühne als subtile Softbox statt flachem grauem Block.
============================================================================ */
.manufacturer-portraits .project-text-subhead:not(:first-child){
  margin-top: 26px !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-row-clean{
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean.beo-panel-logo-clean{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean.beo-panel-logo-clean img{
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

:root{
  --shop-product-stage-bg-final: #fbfbfb;
}

body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  background-color: #fbfbfb !important;
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 72%, rgba(0,0,0,.115) 0%, rgba(0,0,0,.070) 28%, rgba(0,0,0,.030) 52%, rgba(0,0,0,0) 76%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}


/* =========================================================================
   PATCH 2026-07-03 v138 — SHOP detail cleanup
   -------------------------------------------------------------------------
   - Preis-/Statusmodul nur auf echten Produktseiten, nicht auf Sonderseiten.
   - Portrait-/Herstellerkreise mit kräftigerer Kontur.
   - Herstellerpanel nutzt Monogrammkreise statt unlesbarer Mini-Logos.
   - Produkt-Softbox sitzt optisch etwas tiefer unter dem Objekt.
============================================================================ */
.page-wrap .project-price,
.page-wrap .project-tax,
.page-wrap .project-new{
  display:none !important;
}

.labor-profile-circle,
.labor-profile-circle--brand,
.labor-profile-circle--logo,
.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean.beo-panel-logo-clean{
  border: 1.75px solid rgba(0,0,0,.22) !important;
  box-sizing: border-box !important;
}

.labor-profile-circle--portrait{
  border-color: rgba(0,0,0,.28) !important;
}

.labor-profile-circle--brand,
.labor-profile-circle--logo{
  background:#fff !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean.beo-panel-logo-clean{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  font-family: var(--font-sans, Inter, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.panel-about [data-beo-panel-list="manufacturers"] .beo-panel-code-clean.beo-panel-logo-clean img{
  display:none !important;
}

body.has-project-banner .project-banner.product-stage,
.project-view .project-banner.product-stage,
.project-banner.product-stage{
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 72%, rgba(0,0,0,.115) 0%, rgba(0,0,0,.070) 28%, rgba(0,0,0,.030) 52%, rgba(0,0,0,0) 76%) !important;
}


/* === v149 — beo™ Shop object request card ================================= */
.project-buy-button.product-stage-buy{
  min-width: 154px !important;
  width: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.object-request-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--content-pad, 22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.object-request-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.object-request-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.object-request-dialog{
  position: relative;
  width: min(520px, calc(100vw - 44px));
  aspect-ratio: 1.52 / 1;
  min-height: 0;
  background: #d9f0de;
  border: 0;
  border-radius: 50%;
  padding: 64px 72px 50px;
  box-sizing: border-box;
  transform: translateY(8px) scale(.985);
  transition: transform 180ms ease;
  font-family: var(--font-sans, inherit);
  color: #000;
  text-align: center;
  box-shadow: 0 30px 86px rgba(0,0,0,.11);
}
.object-request-overlay.is-open .object-request-dialog{
  transform: translateY(0) scale(1);
}
.object-request-close{
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #000;
  background: #d9f0de;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans, inherit);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.object-request-close::before,
.object-request-close::after{
  content: '';
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  left: 50%;
  top: 50%;
  transform-origin: center;
}
.object-request-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.object-request-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.object-request-close:hover,
.object-request-close:focus-visible{
  background: #000;
  color: #d9f0de;
  transform: translateX(-50%) scale(1.02);
}
.object-request-kicker{
  margin: 0 0 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f7f71;
}
.object-request-title{
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.04em;
  font-weight: 700;
}
.object-request-object{
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
.object-request-copy{
  margin: 0 auto 30px;
  max-width: 38em;
  font-size: 14px;
  line-height: 1.45;
}
.object-request-actions{
  display: flex;
  align-items: center;
  justify-content: center;
}
.object-request-mail{
  appearance: none;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #000;
  padding: 0 24px;
  font-family: var(--font-sans, inherit);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: #000;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.object-request-mail:hover,
.object-request-mail:focus-visible{
  background: #000;
  color: #d9f0de;
  transform: translateY(-1px);
}

@media (max-width: 760px){
  .project-buy-button.product-stage-buy{
    min-width: 136px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .object-request-dialog{
    width: min(390px, calc(100vw - 32px));
    aspect-ratio: 1.26 / 1;
    border-radius: 50%;
    padding: 58px 34px 34px;
  }
  .object-request-title{
    font-size: 34px;
  }
  .object-request-copy{
    max-width: 26em;
    font-size: 13px;
  }
}


/* === v151 — request circle + empty filter state ========================== */
.object-request-dialog{
  width: min(430px, calc(100vw - 44px)) !important;
  height: min(430px, calc(100vw - 44px)) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 54px 58px 46px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #d3efd8 !important;
}
.object-request-close{
  background: #d3efd8 !important;
}
.object-request-close:hover,
.object-request-close:focus-visible{
  color: #d3efd8 !important;
}
.object-request-kicker{
  margin-bottom: 12px !important;
}
.object-request-title{
  max-width: 8.5em !important;
  margin-bottom: 12px !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
}
.object-request-object{
  margin-bottom: 18px !important;
}
.object-request-copy{
  max-width: 25em !important;
  margin-bottom: 28px !important;
}
.object-request-mail:hover,
.object-request-mail:focus-visible{
  color: #d3efd8 !important;
}

.overview-empty-state{
  grid-column: 1 / -1;
  min-height: 34vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 8vw, 120px) var(--content-pad, 22px);
  box-sizing: border-box;
}
.overview-empty-state[hidden]{
  display: none !important;
}
.overview-empty-kicker{
  margin: 0 0 14px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.42);
}
.overview-empty-title{
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 700;
}
.overview-empty-copy{
  margin: 0;
  max-width: 38em;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.35;
}
@media (max-width: 760px){
  .object-request-dialog{
    width: min(330px, calc(100vw - 32px)) !important;
    height: min(330px, calc(100vw - 32px)) !important;
    padding: 44px 34px 34px !important;
  }
  .object-request-title{
    font-size: 30px !important;
  }
  .object-request-copy{
    max-width: 22em !important;
    font-size: 12px !important;
  }
}

/* === v152 — quieter request circle + empty state + close hover =========== */
.object-request-dialog{
  width: min(390px, calc(100vw - 44px)) !important;
  height: min(390px, calc(100vw - 44px)) !important;
  padding: 46px 50px 40px !important;
  background: #d4f0d9 !important;
}
.object-request-close{
  background: #d4f0d9 !important;
}
.object-request-close:hover,
.object-request-close:focus-visible{
  background: #000 !important;
  color: #d4f0d9 !important;
}
.object-request-title{
  font-size: clamp(28px, 3.1vw, 40px) !important;
  margin-bottom: 10px !important;
}
.object-request-object{
  margin-bottom: 16px !important;
}
.object-request-copy{
  max-width: 24em !important;
  margin-bottom: 24px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.object-request-mail:hover,
.object-request-mail:focus-visible{
  color: #d4f0d9 !important;
}
.overview-empty-state{
  min-height: 28vh !important;
  padding: clamp(44px, 6vw, 86px) var(--content-pad, 22px) !important;
}
.overview-empty-kicker{
  margin-bottom: 12px !important;
}
.overview-empty-title{
  font-size: clamp(28px, 4vw, 56px) !important;
  margin-bottom: 12px !important;
}
.overview-empty-copy{
  max-width: 34em !important;
  font-size: clamp(14px, 1.25vw, 18px) !important;
  line-height: 1.38 !important;
}
@media (max-width: 760px){
  .object-request-dialog{
    width: min(300px, calc(100vw - 32px)) !important;
    height: min(300px, calc(100vw - 32px)) !important;
    padding: 38px 28px 30px !important;
  }
  .object-request-title{
    font-size: 26px !important;
  }
  .object-request-copy{
    max-width: 20em !important;
    font-size: 12px !important;
  }
  .overview-empty-title{
    font-size: clamp(30px, 11vw, 46px) !important;
  }
  .overview-empty-copy{
    font-size: 15px !important;
  }
}


/* === v153 — quieter empty state + official request mail/modal ============ */
.overview-empty-state{
  min-height: 24vh !important;
  padding: clamp(34px, 5vw, 68px) var(--content-pad, 22px) !important;
}
.overview-empty-kicker{
  margin-bottom: 10px !important;
  font-size: 11px !important;
}
.overview-empty-title{
  font-size: clamp(24px, 3.15vw, 46px) !important;
  line-height: .95 !important;
  margin-bottom: 10px !important;
  letter-spacing: -.055em !important;
}
.overview-empty-copy{
  max-width: 48em !important;
  font-size: clamp(13px, 1.02vw, 15px) !important;
  line-height: 1.34 !important;
  text-wrap: balance;
}
.object-request-dialog{
  width: min(360px, calc(100vw - 44px)) !important;
  height: min(360px, calc(100vw - 44px)) !important;
  padding: 50px 44px 38px !important;
}
.object-request-title{
  font-size: clamp(25px, 2.75vw, 34px) !important;
  line-height: .98 !important;
  margin-bottom: 8px !important;
}
.object-request-object{
  margin-bottom: 14px !important;
  font-size: 13px !important;
}
.object-request-copy{
  max-width: 25.5em !important;
  margin-bottom: 22px !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
  text-wrap: balance;
}
@media (max-width: 760px){
  .overview-empty-state{
    min-height: 28vh !important;
    padding-top: 44px !important;
  }
  .overview-empty-title{
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  .overview-empty-copy{
    max-width: 24em !important;
    font-size: 14px !important;
  }
  .object-request-dialog{
    width: min(300px, calc(100vw - 32px)) !important;
    height: min(300px, calc(100vw - 32px)) !important;
    padding: 42px 28px 30px !important;
  }
  .object-request-title{
    font-size: 24px !important;
  }
  .object-request-copy{
    max-width: 20em !important;
    font-size: 12px !important;
  }
}

/* === v159 — compact product metadata ===================================== */
.project-view .project-col--facts .project-facts{
  gap: 28px;
}
.project-view .project-col--facts .project-fact-label{
  margin-bottom: 8px;
}
.project-view .project-col--facts .project-fact-value{
  line-height: 1.32;
}

/* === v160 — product metadata rhythm aligned to LABOR =====================
   Keep metadata groups compact and avoid stacked paragraph-like gaps inside
   multi-line values. Section-to-section rhythm follows LABOR's calm fact list.
============================================================================ */
.project-view .project-col--facts .project-facts{
  display: grid !important;
  gap: 0 !important;
}
.project-view .project-col--facts .project-fact{
  margin: 0 0 24px !important;
}
.project-view .project-col--facts .project-fact:last-child{
  margin-bottom: 0 !important;
}
.project-view .project-col--facts .project-fact-label{
  margin: 0 0 7px !important;
}
.project-view .project-col--facts .project-fact-value{
  margin: 0 !important;
  line-height: 1.28 !important;
}
.project-view .project-col--facts .project-fact-value br{
  content: "";
}
/* === end v160 ============================================================ */


/* === 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; } }


/* === 2026-07-21 SHOP checkout + news cleanup ============================= */
.news-wrap .project-price,
.news-wrap .project-tax,
.news-wrap .project-new,
[data-news-wrap] .project-price,
[data-news-wrap] .project-tax,
[data-news-wrap] .project-new{
  display:none !important;
}
.object-request-mail:disabled,
.object-request-mail.is-disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
  transform:none !important;
  background:transparent !important;
  color:#000 !important;
}
.object-request-copy strong{
  display:inline-block;
  margin-bottom:8px;
  font-weight:700;
}


/* Sold entries: keep the control visible, but clearly inactive. */
.project-buy-button.product-stage-buy.is-sold,
.project-buy-button.product-stage-buy.is-sold:hover,
.project-buy-button.product-stage-buy.is-sold:focus-visible,
.project-buy-button.product-stage-buy:disabled{
  cursor:not-allowed;
  pointer-events:none;
  opacity:.42;
  color:inherit;
  background:transparent;
  transform:none;
}