@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{
  --hover-soft: #d6d6d6;
  /* THEME */
  --bg: #000;
  --fg: #fff;
  --fg-muted: var(--fg-muted);
  --fg-subtle: #808080;
  --line: #404040;
  --stage-top: rgba(0, 0, 0, 1.00);
  --stage-mid: rgba(0, 0, 0, 1.00);
  --stage-bot: rgba(28, 28, 30, 1.00);

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

  /* Accent (orange) */
    --lilac: rgb(224, 96, 61);
    /* Status colors */
    --new-badge: rgb(255, 122, 28);
    /* Global hover highlight (intensives Gelb) */
    --hover: #FFEA00;
  /* ARCHIV should sit back visually (same hue as text, but darker via opacity) */
  --archive-badge: rgb(160, 160, 160);
  /* calm, editorial accent (less techy than blue) */
  --prototype-badge: rgb(170, 160, 255);
  /* 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: 500;
  --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);

  /* 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) */
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 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;
}

.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: sticky;
  top: 0;
  z-index: 120;
  background: transparent;
  padding-top: var(--safe-top);
  margin-bottom: calc(-1 * (var(--header-h) + var(--safe-top)));
}


.header-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* max-width + padding kommen über .frame */
}

/* Left header group: + button */
.header-left{
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0;
}

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

.footer {
  height: calc(var(--footer-h) + var(--safe-bottom));
  position: sticky;
  bottom: 0;
  z-index: 120;
  background: transparent;
  padding-bottom: var(--safe-bottom);
  margin-top: calc(-1 * (var(--footer-h) + var(--safe-bottom)));
}

/* 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: 1fr auto 1fr;
  align-items: center;
  /* max-width + padding kommen über .frame */
}
.footer-inner > .scroll-toggle{ grid-column: 2; justify-self: center; }

/* Footer nav alignment: always lock prev to the left slot and next to the right slot
   (even if other buttons are hidden). */
.footer .project-prev{ grid-column: 1; justify-self: start; }
.footer .project-next{ grid-column: 3; justify-self: end; }

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

/* 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:   32px; 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%;
  /* Opener should only take up ~1/3 of the visible viewport so
     the first tiles are already visible on load. */
  min-height: 33vh;
  /* 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;
  margin-bottom: clamp(14px, 3vh, 36px);
  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;
  /* slightly higher (less downshift) */
  top: -28px;
  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;
}


.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); }
}
}


.opener-actions{
  /* Two-row layout: 2 buttons side-by-side, 3rd centered underneath */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(440px, 100%);
}

/* Single action (only one button/link) */
.opener-actions.is-single{
  display: flex;
  justify-content: center;
  width: 100%;
}

.opener-actions.is-single .opener-contact{
  width: auto;
}

.opener-actions .opener-contact{
  /* Equal widths within the 2-column grid */
  width: 100%;
}

.opener-actions .opener-contact:nth-child(3):last-child{
  grid-column: 1 / -1;
  /* match the width of one grid column (minus the gap) */
  width: calc((100% - 12px) / 2);
  justify-self: center;
}

/* On very narrow screens, stack again to avoid cramped buttons */
@media (max-width: 360px){
  .opener-actions{ grid-template-columns: 1fr; width: 100%; }
  .opener-actions .opener-contact:nth-child(3):last-child{ grid-column: auto; width: 100%; justify-self: stretch; }
}

.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: -8px; }
}
/* 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;
}

.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 */
  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;
  /* Badge selbst soll nicht "klickbar" wirken */
  pointer-events: none;
  cursor: default;

  /* Keep badge centered on the title's midline */
  position: relative;
  top: 0;
  transform: translateY(0);
}

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


/* 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); }
  .home-opener{ min-height: 33vh; padding-top: 0; padding-bottom: 0; margin-bottom: clamp(12px, 3vh, 28px); }
  .home-opener-inner{ font-size: 20px; top: -32px; }
}
@media (max-width: 420px)  {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
.home-opener{ min-height: 33vh; padding-top: 0; padding-bottom: 0; margin-bottom: clamp(10px, 3vh, 24px); }
  .home-opener-inner{ font-size: 16px; top: -30px; }
}

/* =========================
   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;
  text-transform: uppercase;
  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);
}

/* 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[hidden]{ display: none !important; }

.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: none;
}
.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{ text-decoration: none; color: var(--hover); }

.project-fact-label {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.project-fact-value {
  font-size: 14px;
  color: var(--fg-muted);
}

/* 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{
  text-transform: uppercase;
}

.legal-section-title{
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  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;
  /* Panels: requested slightly lifted black */
  background: #1a1a1a;
  color: #fff;
  overflow: auto;
  transition: transform 0.45s ease;
  z-index: 60;
}

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

/* About Panel rechts */
.panel-about {
  right: 0;
  width: 75vw;
  height: 100vh;
  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 */
.panel-projects {
  padding:
    0
    var(--panel-pad)
    var(--panel-pad)
    calc((75vw - var(--panel-visible-x)) + var(--panel-pad));
}
.panel-about {
  padding:
    0
    calc((75vw - var(--panel-visible-x)) + var(--panel-pad))
    var(--panel-pad)
    var(--panel-pad);
}

/* PANEL-INNER */
.panel-inner {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding-top: calc(var(--header-h) + var(--edge));
  padding-bottom: var(--edge);
}

/* LEFT PANEL CONTENT */
.panel-projects .panel-inner{
  /* Match the main content container width so the list block sits centered in the panel */
  width: 100%;
  max-width: none;
}

/* Left panel body: behave like a "container" (same horizontal padding as .frame) */
.panel-projects .panel-body-inner{
  /* behave like a centered "container" so all blocks share the same left axis
     (avoid centering each block individually, which can make FILTER look indented) */
  width: 100%;
  max-width: var(--panel-inner-side-ideal);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}

/* 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 {
  --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;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--fg-subtle);
}

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

/* Right panel project list */
.panel-about .project-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 .archive-list .project-item{ margin: 0; display: block; }

/* Button row (RIGHT PANEL): stacked (CODE on line 1, NAME on line 2) */
.panel-about button.project-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2px;
  width: 100%;
}

/* Type: match main project title (H1) */
.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;
}

/* Ensure the two lines actually break */
.panel-about button.project-row .code,
.panel-about button.project-row .project-name{
  display: block;
}

/* Wrapping per column (no ellipsis needed at H2 size) */
.panel-about button.project-row .code,
.panel-about button.project-row .project-name{
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* 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 {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 18px 0 12px;
  color: var(--fg-subtle);
}
.project-list .project-cat:first-child { margin-top: 0; }

/* Actual project rows */
.project-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,
.archive-list .code{
  font-variant-numeric: tabular-nums;
}

/* (old small-label styling removed – code should match title size) */
.project-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 .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,
.archive-list button.name {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}
.project-list .name:hover,
.archive-list .name:hover{
  text-decoration: none;
  color: var(--hover);
}

/* Active project in right panel */
.project-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;
  text-transform: uppercase;
  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; }

.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: 14px;
  line-height: 1.2;
  user-select: none;
}

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

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

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

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

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

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


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




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



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

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

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

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

  /* label system */
  --fs-label: 12px;
  --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: var(--font-sans) !important;
  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: 600;
  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;
}

/* subhead inside long text (e.g., LABORANTEN) */
.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-sans) !important;
  font-size: var(--fs-label) !important;
  font-weight: var(--fw-label) !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase;
  color: var(--c-label) !important;
  line-height: 1.25;
}

/* 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: var(--font-sans) !important;
  font-size: calc(var(--fs-badge) - 1px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 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;
  text-transform: uppercase;
  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;
}




/* =========================================================
   VARIANTE A – PANELS USE SAME VERTICAL STRUCTURE AS MAIN
   - header axis (green): panel-header (like .header)
   - content axis (orange): panel-body starts with --edge
   This avoids brittle margin/offset hacks.
========================================================= */

/* kill old panel-inner centering + top padding */
.panel .panel-inner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* Right panel header: center the title like the MAIN header (1fr / auto / 1fr) */
.panel-about .panel-inner{
  width: 100%;
  max-width: none;
}
.panel-about .panel-header-inner{
  /* match the about text column: centered container with consistent side padding */
  width: 100%;
  max-width: var(--panel-inner-ideal);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}
.panel-about .about-title{
  margin: 0;
  line-height: 1;
}

/* About panel body: use the same centered column width as the header */
.panel-about .panel-body-inner{
  width: 100%;
  max-width: var(--panel-inner-ideal);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}

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

/* Right panel has no header element in the DOM.
   Match the left panel's effective top offset (header axis + content axis). */
.panel-about .panel-body{
  padding-top: calc(var(--edge) + var(--header-h) + var(--safe-top));
}

/* keep lists/text from being centered automatically */
.panel .panel-body-inner{
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

/* Left panel: use a full-width container so the list block sits centered */
.panel-projects .panel-body-inner{
  width: 100%;
  max-width: var(--panel-inner-side-ideal);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}
.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);
}

/* ARCHIV: same tone as surrounding title/labels (no extra dimming) */
.tile-new.is-archive,
.project-new.is-archive{
  color: var(--fg-subtle) !important;
  border-color: var(--fg-subtle) !important;
  opacity: 1;
}

/* PROTOTYP (flieder) */
.tile-new.is-prototype,
.project-new.is-prototype{
  color: var(--prototype-badge) !important;
  border-color: var(--prototype-badge) !important;
}


/* === BADGE COLOR SYSTEM === */
.badge-new { background: #ff6a00; color: #000; }        /* Orange */
/* ARCHIV: subtle dark grey like tile titles */
.badge-archive { background: var(--fg-subtle); color: #000; }
.badge-prototype { background: #b57cff; 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;
}


/* === PANEL WIDTH + ALIGNMENT FIX === */
.panel-projects .panel-body-inner{
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.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;
}

/* Inner wrapper shrinks to the widest content line */
.panel-projects .panel-body-inner{
  width: max-content;
  max-width: 100%;
}

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

/* shrink-wrap the whole left-panel content to the widest element,
   then center that block within the panel */
.panel-projects .panel-body-inner{
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* children take the parent's computed width so all blocks share one axis */
.panel-projects .media-group,
.panel-projects .project-group{
  width: 100%;
}


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


/* === Buttons: Difference blending (like jankinsbergen.ch) ===
   Bulletproof: apply blend-mode to the button/link wrapper (not the <img>).
   This makes external SVGs/images blend reliably with the real backdrop. */
/* Ensure mix-blend-mode works reliably across sticky header/footer on Safari/iOS */
.site{ isolation: isolate; }

.main .btn,
.main button,
.main .project-nav,
.main .scroll-toggle,
.main .opener-contact,
.main .fact-link,
.main .home-opener-copy,
.header .btn,
.footer .project-nav,
.footer .scroll-toggle,
.header .logo,
.header .logo img,
.btn-icon,
.lightbox .project-nav,
.lightbox .scroll-toggle{
  mix-blend-mode: difference;
}

/* Keep icons crisp */
.btn-icon{ display:block; }


/* Right panel projects hover highlight */
.panel-about .media-item--project:hover .project-title-inline{ color: var(--hover); }
.panel-about .media-item--project:focus-visible .project-title-inline{ color: var(--hover); }


/* =========================
   PANEL HEADINGS + 2-COLUMN PROJECT LIST (RIGHT PANEL)
========================= */
.panel-section-label{
  /* Same as .project-fact-label but with a bit more breathing room inside panels */
  margin: 0 0 18px 0;
}
.panel-section-label--spaced{
  margin-top: 28px;
}

/* Right panel: CODE | NAME in two equal columns */
.panel-about .project-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
}

/* Ensure CODE is visible (older rules hid it) */
.panel-about .project-row .code{
  display: block !important;
}

/* Both columns: same typography + safe truncation */
.panel-about .project-row .project-col{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Left panel: headings for FILTER / LINKS */
.panel-projects .panel-section-label{
  margin: 0 0 12px 0;
}
.panel-projects .nav-group .panel-section-label{
  margin-top: 0;
}


/* Right panel project list: title only */
.project-row--titleonly{display:block;}


/* Labor workflow placeholders */
.labor-workflow{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 32px; }
.labor-workflow-item{ border: 1.5px solid #262626; border-radius: 18px; padding: 18px; min-height: 180px; display:flex; align-items:center; justify-content:center; }
.labor-workflow-ph{ font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
@media (max-width: 720px){ .labor-workflow{ grid-template-columns: 1fr; } }


/* --- FIX: Links list in left panel should be left-aligned under its heading --- */
.media-list--links{
  align-items: flex-start;
  text-align: left;
}
.media-list--links .media-item{
  width: 100%;
  text-align: left;
}


/* ===== GLOBAL BLEND FIX ===== */
html, body {
  isolation: isolate;
}

/* Ensure no parent blocks blending */
main, .page, .site, .wrapper, .stage {
  isolation: auto;
  transform: none !important;
  filter: none !important;
}

/* Header & Footer must sit above content but still blend */
.site-header, .site-footer {
  position: relative;
  z-index: 100;
  isolation: isolate;
  background: transparent !important;
}

/* Buttons & links that should blend */
.site-header a,
.site-header button,
.site-footer a,
.site-footer button {
  mix-blend-mode: difference;
  position: relative;
  z-index: 101;
}

/* Prevent images/icons inside buttons from cancelling blend */
.site-header img,
.site-footer img,
.site-header svg,
.site-footer svg {
  mix-blend-mode: inherit;
}

/* Remove accidental stacking contexts that break blend */
[class*="overlay"],
[class*="mask"],
[class*="stage"] {
  pointer-events: none;
}


/* ---- 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: -1px; /* lift code slightly for optical centering */
}

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

/* v35: main filter bubble bar (HdM-like) */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 0 0 40px 0;  justify-content:center;
}


.filter-pill{
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: normal;
  line-height: 1;
  cursor: pointer;
  transition: none;
}

/* Base hover/active inversion for default pills only.
   Category + status pills manage their own states and must not inherit the base inversion,
   otherwise currentColor becomes black and the status-fill turns black. */
.filter-pill:not(.filter-pill--cat):not(.filter-pill--status):hover{
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.filter-pill:not(.filter-pill--cat):not(.filter-pill--status).is-active{
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

/* v40: category pills visual only */
.filter-pill--cat{
  border: none;
  /* slightly lighter than panels so it reads on black */
  background: rgb(48, 48, 48);
  color: rgb(235, 235, 235);
}
.filter-pill--cat:hover{
  background: var(--fg);
  color: var(--bg);
}

/* Small visual separation before the category group (no lines) */
.filter-pill--cat.first-cat{
  margin-left: 18px;
}

/* Status filter pills: outline in status color; on hover/active filled with status color and black text */
.filter-pill--status{
  border-color: currentColor;
  background: transparent;
}
.filter-pill--status.is-status-neu{ color: var(--new-badge); }
.filter-pill--status.is-status-prototyp{ color: var(--prototype-badge); }
.filter-pill--status.is-status-archiv{ color: var(--archive-badge); }

.filter-pill--status:hover,
.filter-pill--status.is-active{
  background: currentColor;
  border-color: currentColor;
  color: rgb(0, 0, 0);
}

/* Small visual separation before the status group (no lines) */
.filter-pill--status.first-status{
  margin-left: 18px;
}

/* Small visual separation between media filters and category filters */
.filter-pill--cat.first-cat{
  margin-left: 18px;
}

.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(140,140,140);
}


/* 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 */



/* Subtle tile hover */
.tile:hover .tile-title { color: var(--hover-soft); }


/* Right panel label spacing tweak */
.meta-label { margin-bottom: 6px; }






/* ===== Right panel spacing refined ===== */
.panel-about .panel-section-label{
  margin: 0 0 18px 0 !important; /* Heading → list (reduced) */
}
.panel-about .panel-section-label.panel-section-label--spaced{
  margin-top: 32px !important; /* Projects block → Archive block */
}
.panel-about .project-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);
}

/* 2. Project title hover = brand yellow */
.lightbox .project-link:hover .project-name{
  color: var(--hover);
}

/* 3. Unify letter-spacing between tiles and lightbox caption */
.tile-title,
.lightbox-caption{
  letter-spacing: var(--ls-heading, 0);
}


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


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

/* ============================================================
   BADGE SYSTEM — SINGLE SOURCE OF TRUTH
   Badges must look 1:1 like the filterbar pills across ALL views.
   This block intentionally sits at the very end to avoid regressions.
   ============================================================ */

/* Normalize all badge variants used across tiles, project view and lists */
.tile-new,
.project-new,
.badge-new,
.badge-prototype,
.badge-archive{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
  color: inherit;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-label) !important;
  font-weight: var(--fw-label) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
}

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

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

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

/* Ensure any legacy hover rules can't re-uppercase or re-space */
.tile:hover .tile-new,
.tile:hover .tile-new.is-prototype,
.tile:hover .tile-new.is-archive{ text-transform: none !important; letter-spacing: normal !important; }