/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Inter + Martian Mono via Google Fonts in index.html */

:root {
  /* — Neutrals (cool, leicht techy) — */
  --white:      #FFFFFF;
  --surface:    #FAFAFA;
  --black:      #0C0C0E;
  --grey-50:    #FAFAFA;
  --grey-100:   #F4F4F5;
  --grey-200:   #E4E4E7;
  --grey-300:   #D4D4D8;
  --grey-400:   #A1A1AA;
  --grey-500:   #71717A;
  --grey-600:   #52525B;
  --grey-700:   #3F3F46;
  --grey-800:   #27272A;
  --accent:     #6366F1;

  /* — Typography — */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, monospace;

  /* Negatives Letterspacing (Display / UI) */
  --tracking-body:    -0.011em;
  --tracking-ui:      -0.018em;
  --tracking-tight:   -0.028em;
  --tracking-display: -0.042em;

  /* — Type (modulare Skala ~φ^n, Basis Lesetext —text-md) — */
  --text-sm:  14px;   /* Meta / Kicker */
  --text-base: 16px;  /* UI-Standard */
  --text-md:  18px;   /* Fließtext / Markdown-Body */
  --text-lg:  22px;   /* ≈ md × √φ  Intro / About */
  --text-xl:  29px;   /* ≈ md × φ   große Akzente */

  /* — Spacing (8pt grid) — */
  --space-1:   8px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-48:  192px;

  --space-xs:  var(--space-2);
  --space-sm:  var(--space-4);
  --space-md:  var(--space-6);
  --space-lg:  var(--space-12);
  --space-xl:  var(--space-20);
  --space-2xl: var(--space-32);
  --space-3xl: var(--space-48);

  /* — Layout — */
  --nav-h: 56px;
  --max-w:   1280px;
  --border:  1px solid var(--border-subtle);
  --border-subtle: rgba(9, 9, 11, 0.06);

  /* — Radius — */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* — Motion — */
  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 160ms;
  --duration-base: 240ms;
  /** Links, Text-Hover: etwas langsamer als --duration-fast = spürbarer Fade */
  --duration-hover: 280ms;
  --duration-slow: 400ms;
  /** Scroll-Reveal: etwas länger = ruhiger, weniger „UI-Snappy“ */
  --duration-reveal: 640ms;
  --duration-filter-panel: 420ms;
  --duration-more-label: 220ms;

  /** Hero: eigene Dauer + Ease — erste Sekunde wirkt „gesetzt“, nicht hektisch */
  --duration-hero: 900ms;
  --ease-hero: cubic-bezier(0.2, 0.82, 0.22, 1);
  /** Einheitliches Stagger (Hero + optionale Grids) */
  --stagger-step: 48ms;
  /** Reveal: subtile Distanz (kleiner = edler) */
  --reveal-distance: 11px;

  /** Projekt-Popup: eine gemeinsame Dauer für Backdrop + Panel (Öffnen/Schließen) */
  --duration-modal: 480ms;
  /** Starker Ease-out — läuft schnell ein, setzt weich auf (kein hartes „Plop“) */
  --ease-modal: cubic-bezier(0.22, 1, 0.36, 1);

  /** Ruhige, „premium“ Bewegung (nicht bouncy) */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /** Hell/Dunkel & Logo-Crossfade: eine gemeinsame Dauer/Ease */
  --duration-theme: 420ms;
  --ease-theme: cubic-bezier(0.22, 1, 0.36, 1);

  /* — Theme (Hell): erhöhte Flächen, Nav, Schatten, Modals — */
  --surface-raised: #ffffff;
  --nav-bg: rgba(250, 250, 250, 0.82);
  --shadow-card-hover: 0 4px 6px rgba(12, 12, 14, 0.03), 0 18px 40px rgba(12, 12, 14, 0.07);
  --modal-scrim: rgba(10, 10, 10, 0.46);
  --lightbox-backdrop: rgba(8, 8, 10, 0.82);
  --lightbox-backdrop-open: rgba(8, 8, 10, 0.88);
  --lightbox-backdrop-hover: rgba(8, 8, 10, 0.9);
  /** Für color-mix mit Accent (immer dunkles Pigment) */
  --shade-dark: #0c0c0e;
}

/* — Dunkelmodus: gleiche Token-Namen, angepasste Werte — */
html[data-theme='dark'] {
  color-scheme: dark;

  --surface: #0c0c0e;
  --white: #ffffff;
  --surface-raised: #161618;
  --black: #f4f4f5;
  --grey-50: #18181b;
  --grey-100: #27272a;
  --grey-200: #3f3f46;
  --grey-300: #52525b;
  --grey-400: #a1a1aa;
  --grey-500: #a1a1aa;
  --grey-600: #d4d4d8;
  --grey-700: #e4e4e7;
  --grey-800: #fafafa;
  --accent: #818cf8;
  --border-subtle: rgba(255, 255, 255, 0.09);

  --nav-bg: rgba(12, 12, 14, 0.78);
  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 20px 44px rgba(0, 0, 0, 0.45);
  --modal-scrim: rgba(0, 0, 0, 0.72);
  --lightbox-backdrop: rgba(2, 2, 4, 0.88);
  --lightbox-backdrop-open: rgba(0, 0, 0, 0.9);
  --lightbox-backdrop-hover: rgba(0, 0, 0, 0.92);
  --shade-dark: #060608;
}

/* =============================================
   DOCUMENT
   ============================================= */
html {
  color-scheme: light;
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html,
  body {
    transition:
      background-color var(--duration-theme) var(--ease-theme),
      color var(--duration-theme) var(--ease-theme);
  }

  #nav {
    transition:
      background-color var(--duration-theme) var(--ease-theme),
      border-color var(--duration-theme) var(--ease-theme),
      box-shadow var(--duration-theme) var(--ease-theme);
  }
}

/* Selection */
::selection {
  background: var(--grey-800);
  color: var(--white);
}

html[data-theme='dark'] ::selection {
  background: var(--grey-600);
  color: var(--surface);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--grey-400); }
* { scrollbar-width: thin; scrollbar-color: var(--grey-300) transparent; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--grey-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Tabular numerals for data contexts */
.tabular {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* =============================================
   NAV — klassische Vollbreite, Inhalt an --max-w
   ============================================= */
.nav-skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}

.nav-skip:focus {
  left: var(--space-5);
  top: var(--space-5);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  color: var(--black);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  outline: none;
  box-shadow: var(--shadow-card-hover);
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border-subtle) 60%, transparent);
  transform: translateZ(0);
}

@media (prefers-reduced-motion: no-preference) {
  #nav {
    animation: navEnter 700ms var(--ease-hero) both;
  }
}

@keyframes navEnter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: 0 var(--space-12);
  box-sizing: border-box;
}

.nav-left {
  flex-shrink: 0;
}

.nav-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  row-gap: var(--space-2);
  min-width: 0;
}

.nav-brand {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
  color: var(--black);
  border-radius: var(--radius-sm);
  transition:
    opacity var(--duration-hover) var(--ease-smooth),
    color var(--duration-hover) var(--ease-smooth),
    transform var(--duration-hover) var(--ease-smooth);
}

.nav-brand:hover {
  opacity: 0.68;
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .nav-brand:hover {
      opacity: 0.78;
      transform: translateY(-1px);
    }

    .nav-brand:active {
      transform: translateY(0);
      transition-duration: 100ms;
    }
  }
}

.nav-brand:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

.nav-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  color: var(--grey-500);
  padding-bottom: 3px;
  transition: color var(--duration-hover) var(--ease-smooth);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--grey-500) 40%, transparent)
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 380ms var(--ease-smooth), opacity 260ms var(--ease-smooth);
}

.nav-link:hover {
  color: var(--black);
}

.nav-link:hover::after {
  opacity: 0.75;
}

.nav-link.is-active {
  color: var(--black);
}

.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link:hover::after {
    transform: scaleX(1);
  }

  .nav-link:focus-visible::after {
    transform: scaleX(1);
    opacity: 0.85;
  }
}

@media (max-width: 640px) {
  .nav-inner {
    padding: 0 var(--space-5);
  }

  .nav-right {
    gap: var(--space-4);
  }
}

/* — Theme Switcher (Hell / Dunkel / System) — gleitender Indikator via ::before — */
.theme-switcher {
  --theme-switch-btn-w: 32px;
  --theme-switch-gap: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--theme-switch-gap);
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--grey-200) 55%, transparent);
  border: 1px solid var(--border-subtle);
}

html[data-theme='dark'] .theme-switcher {
  background: color-mix(in srgb, var(--grey-100) 40%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .theme-switcher::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 3px;
    width: var(--theme-switch-btn-w);
    height: 28px;
    border-radius: 999px;
    background: var(--surface-raised);
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--shade-dark) 8%, transparent),
      0 4px 12px color-mix(in srgb, var(--shade-dark) 10%, transparent);
    pointer-events: none;
    transition:
      transform var(--duration-theme) var(--ease-theme),
      background var(--duration-theme) var(--ease-theme),
      box-shadow var(--duration-theme) var(--ease-theme);
  }

  html[data-theme='dark'] .theme-switcher::before {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.5),
      0 6px 16px rgba(0, 0, 0, 0.35);
  }

  html[data-theme-preference='system'] .theme-switcher::before {
    transform: translateX(0);
  }

  html[data-theme-preference='light'] .theme-switcher::before {
    transform: translateX(calc(var(--theme-switch-btn-w) + var(--theme-switch-gap)));
  }

  html[data-theme-preference='dark'] .theme-switcher::before {
    transform: translateX(calc(2 * (var(--theme-switch-btn-w) + var(--theme-switch-gap))));
  }
}

.theme-switcher__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--theme-switch-btn-w);
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--grey-500);
  cursor: pointer;
  transition:
    color var(--duration-hover) var(--ease-smooth),
    transform 140ms var(--ease-smooth);
}

.theme-switcher__btn:hover {
  color: var(--black);
}

.theme-switcher__btn[aria-pressed='true'] {
  color: var(--black);
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .theme-switcher__btn:active {
      transform: scale(0.94);
    }
  }
}

.theme-switcher__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switcher__btn[aria-pressed='true'] {
    background: var(--surface-raised);
    box-shadow: 0 1px 3px rgba(12, 12, 14, 0.08);
  }

  html[data-theme='dark'] .theme-switcher__btn[aria-pressed='true'] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
}

.theme-switcher__icon {
  display: block;
  pointer-events: none;
}

/* =============================================
   PAGES
   ============================================= */
#main {
  padding-top: var(--nav-h);
}

/* Anker-Ziele: nicht unter der fixierten Bar verschwinden */
#projects,
#about,
#contact {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

.page {
  display: none;
}
.page.active {
  display: block;
}

/* =============================================
   HERO
   ============================================= */
.hero {
  padding: var(--space-20) var(--space-12) var(--space-16);
  position: relative;
}

.hero-inner {
  max-width: min(38rem, 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > .hero-kicker {
    animation: heroEnter var(--duration-hero) var(--ease-hero) both;
    animation-delay: calc(var(--stagger-step) * 0);
  }
  .hero-inner > .hero-title-row {
    animation: heroEnter var(--duration-hero) var(--ease-hero) both;
    animation-delay: var(--stagger-step);
  }

  .hero-inner > .hero-lead {
    animation: heroEnter var(--duration-hero) var(--ease-hero) both;
    animation-delay: calc(var(--stagger-step) * 2);
  }
  .hero-inner > .hero-meta {
    animation: heroEnter var(--duration-hero) var(--ease-hero) both;
    animation-delay: calc(var(--stagger-step) * 3);
  }
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: var(--space-6);
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.hero-title-row .hero-title {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--black);
}

/* Ein Slot im Flex-Row: beide Logos übereinander, nur eines sichtbar (Hell/Dunkel).
   Sichtbarkeit nur über .hero-title-logo-wrap … — sonst überschreibt .hero-title-logo { display:block } die Dark-Variante. */
.hero-title-logo-wrap {
  flex-shrink: 0;
  align-self: center;
  display: grid;
  grid-template-areas: 'hero-logo';
  place-items: center;
  height: 1.12em;
  line-height: 0;
  width: max-content;
  max-width: 100%;
}

.hero-title-logo-wrap .hero-title-logo {
  grid-area: hero-logo;
  max-height: 1.12em;
  width: auto;
  pointer-events: none;
}

.hero-title-logo {
  flex-shrink: 0;
  height: 1.12em;
  width: auto;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  transform-origin: 50% 52%;
  transform: translateZ(0) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:
    transform 620ms var(--ease-hero),
    filter 620ms var(--ease-hero),
    opacity var(--duration-theme) var(--ease-theme);
}

/* Beide Logos im Slot: Crossfade statt hartem display:none */
.hero-title-logo-wrap .hero-title-logo--light {
  opacity: 1;
}

.hero-title-logo-wrap .hero-title-logo--dark {
  opacity: 0;
}

html[data-theme='dark'] .hero-title-logo-wrap .hero-title-logo--light {
  opacity: 0;
}

html[data-theme='dark'] .hero-title-logo-wrap .hero-title-logo--dark {
  opacity: 1;
}

/*
 * Leichtes „Atmen“ bei Hover über die Titelzeile (Logo + Text) —
 * nur echte Hover-Geräte, kein Cheap-Bounce.
 */
@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-title-row:hover .hero-title-logo {
      transform: translateZ(0) scale(1.045);
      filter: brightness(1.06);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-logo {
    transition: none;
  }
}

.hero-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.65;
  color: var(--grey-600);
  max-width: 32rem;
  margin-bottom: var(--space-8);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-500);
  letter-spacing: var(--tracking-ui);
}

.dot { color: var(--grey-300); opacity: 0.7; }

/* =============================================
   SECTION HEADINGS
   ============================================= */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, var(--text-xl));
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--grey-500);
  margin: 0 0 var(--space-8) 0;
  line-height: 1.2;
}

/* Dezente Akzentlinie unter Sektions-Überschriften — wächst beim Scroll-Reveal */
.section-head .section-heading.reveal,
#about > .section-heading.reveal,
#contact > .section-heading.reveal {
  position: relative;
}

.section-head .section-heading.reveal::after,
#about > .section-heading.reveal::after,
#contact > .section-heading.reveal::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: var(--space-3);
  border-radius: 1px;
  background: linear-gradient(90deg, var(--grey-300), color-mix(in srgb, var(--grey-200) 40%, transparent));
  transition: width 720ms var(--ease-smooth);
}

.section-head .section-heading.reveal.visible::after,
#about > .section-heading.reveal.visible::after,
#contact > .section-heading.reveal.visible::after {
  width: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .section-head .section-heading.reveal::after,
  #about > .section-heading.reveal::after,
  #contact > .section-heading.reveal::after {
    width: 2.75rem;
    transition: none;
  }
}

/*
 * Grid statt Flex: vermeidet width:100%-Quereffekte; align-items:start —
 * horizontale Scrollbar der Toolbar liegt unten und verschiebt die optische Mitte nicht nach unten.
 */
.section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-8);
}

.section-head .section-heading {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  line-height: 1.15;
  /* Gleiche optische Zeile wie Filter-Buttons (text-sm ~20px Cap-Höhe) */
  padding-top: 0.35rem;
}

/* Toolbar rechts; eine Zeile — bei Bedarf horizontal scrollen */
.project-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: end;
}

.project-filters-main {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.project-filters-main::-webkit-scrollbar {
  height: 4px;
}

.project-filters-main::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 999px;
}

/*
 * Zusatz-Tags: Grid 0fr → 1fr = echte Breite 0 im Layout (kein „Geisterabstand“).
 * Track schiebt sich von rechts nach links auf (Richtung Mehr → linke Nachbarn).
 */
.project-filters-extra {
  display: grid;
  grid-template-columns: 0fr;
  min-width: 0;
  max-width: 100%;
  transition: grid-template-columns var(--duration-filter-panel) var(--ease-smooth);
}

.project-filters-extra.is-open {
  grid-template-columns: 1fr;
}

.project-filters-extra-sizer {
  overflow: hidden;
  min-width: 0;
}

.project-filters-extra-track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: max-content;
  margin-left: auto;
  transform: translateX(18px);
  opacity: 0;
  transition:
    transform var(--duration-filter-panel) var(--ease-smooth),
    opacity calc(var(--duration-filter-panel) * 0.85) var(--ease-smooth);
}

.project-filters-extra.is-open .project-filters-extra-track {
  transform: translateX(0);
  opacity: 1;
}

.project-filters-extra:not(.is-open) .project-filters-extra-track {
  pointer-events: none;
}

.project-filter-more {
  position: relative;
  display: inline-grid;
  grid-template-areas: 'stack';
  place-items: center;
  place-content: center;
  padding: 6px 8px;
  min-width: 0;
  color: var(--grey-500);
  pointer-events: auto;
  cursor: pointer;
}

.project-filter-more-label {
  grid-area: stack;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gleiche Kurve hin & zurück (linear), nur Opacity */
  transition: opacity var(--duration-more-label) linear;
  line-height: 0;
}

.project-filter-more-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.project-filter-more[aria-expanded='false'] .project-filter-more-label--weniger,
.project-filter-more[aria-expanded='true'] .project-filter-more-label--mehr {
  opacity: 0;
  pointer-events: none;
}

.project-filter-more[aria-expanded='false'] .project-filter-more-label--mehr,
.project-filter-more[aria-expanded='true'] .project-filter-more-label--weniger {
  opacity: 1;
}

/*
 * Geschlossenes Extra-Panel hat Breite 0, zählt aber als Flex-Kind → doppelter gap
 * (Tag–Panel–Divider statt Tag–Divider). Ein negativer Rand gleicht das aus.
 */
.project-filters-extra:not(.is-open) + .project-meta-divider {
  margin-left: calc(-1 * var(--space-2));
}

/* Divider optisch an Pill-Höhe anbinden (Modal bleibt 14px) */
.project-filters-main > .project-meta-divider {
  height: 16px;
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .project-filter-more-label {
    transition: none;
  }
}

.project-filter-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  color: var(--grey-600);
  background: var(--grey-100);
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color var(--duration-hover) var(--ease-smooth),
    background var(--duration-hover) var(--ease-smooth),
    border-color var(--duration-hover) var(--ease-smooth),
    opacity var(--duration-hover) var(--ease-smooth);
}

.project-filter-btn:hover {
  color: var(--black);
  background: var(--grey-200);
}

.project-filter-btn.is-active {
  color: var(--black);
  background: var(--surface-raised);
  border-color: var(--border-subtle);
}

@media (prefers-reduced-motion: no-preference) {
  .project-filter-btn:active {
    opacity: 0.88;
    transition-duration: 100ms;
  }
}

.projects-empty {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--grey-500);
  margin: var(--space-8) 0;
  text-align: center;
}

@media (max-width: 640px) {
  .section-head {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .section-head .section-heading {
    padding-top: 0;
  }

  .project-filters {
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .project-filters-main,
  .project-filters-extra-track {
    justify-content: flex-end;
  }
}

/* =============================================
   PROJECTS
   ============================================= */
.projects-section {
  padding: var(--space-20) var(--space-12) var(--space-24);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

@media (max-width: 1100px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.projects-grid--loading {
  min-height: 240px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    110deg,
    var(--grey-100) 0%,
    color-mix(in srgb, var(--grey-100) 88%, var(--surface-raised)) 45%,
    var(--grey-100) 90%
  );
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .projects-grid--loading {
    animation: loadingShimmer 1.35s var(--ease-smooth) infinite;
  }
}

@keyframes loadingShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.project-card {
  background: var(--surface-raised);
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  position: relative;
  min-width: 0; /* Grid: Tag-Zeile darf schrumpfen → korrekte Breite für Overflow-Messung */
  transition:
    border-color var(--duration-hover) var(--ease-smooth),
    box-shadow calc(var(--duration-hover) * 1.05) var(--ease-smooth),
    transform 420ms var(--ease-hero),
    background-color var(--duration-theme) var(--ease-theme);
}

.project-card:hover {
  border-color: var(--grey-300);
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .project-card:hover {
    transform: translate3d(0, -4px, 0);
  }

  .project-card:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: 120ms;
  }
}

.project-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--grey-100);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}

.project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 680ms var(--ease-hero);
}

@media (prefers-reduced-motion: no-preference) {
  .project-card:hover .project-card-img img {
    transform: scale(1.035);
  }
}

.project-card-img .img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-100);
}

.project-card-img .img-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--grey-400);
  letter-spacing: var(--tracking-ui);
}

.project-card-body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Jahr: kein Vollbreiten-Stretch in der Flex-Spalte, keine breite Graufläche */
.project-card-body .project-year {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

.project-year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-400);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  display: inline-block;
  vertical-align: middle;
}

/* Im Projekt-Modal etwas mehr Kontrast zur Meta-Zeile */
.project-hero-meta .project-year {
  color: var(--grey-500);
  flex-shrink: 0;
}

.project-card-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
  letter-spacing: var(--tracking-display);
}

.project-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--grey-500);
  line-height: 1.55;
  margin-top: var(--space-1);
}

.project-card-tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  min-width: 0;
  overflow: hidden;
}

.project-card-tags .tag {
  flex-shrink: 0;
  white-space: nowrap;
}

.tag {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  color: var(--grey-600);
  background: var(--grey-100);
  border: none;
  padding: 4px 12px;
  border-radius: 999px;
  transition:
    background-color var(--duration-theme) var(--ease-theme),
    color var(--duration-theme) var(--ease-theme);
}

/* „+N“-Chip wie normale Tags; Layout/Anzeige steuert app.js */
.project-card-tags .tag--overflow {
  flex-shrink: 0;
}

/* =============================================
   PROJECT DETAIL
   ============================================= */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  color: var(--grey-500);
  padding: var(--space-5) var(--space-12);
  cursor: pointer;
  transition:
    color var(--duration-hover) var(--ease-smooth),
    opacity var(--duration-hover) var(--ease-smooth);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
}
.project-back:hover {
  color: var(--black);
}
.project-back-arrow { font-size: var(--text-base); line-height: 1; opacity: 0.7; }

.project-hero {
  padding: var(--space-12) var(--space-12) var(--space-8);
}

.project-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.project-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.project-meta-divider {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  align-self: center;
  background: var(--grey-300);
  border-radius: 1px;
}

.project-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.1vw, 76px);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--black);
  margin-bottom: var(--space-10);
}

.project-hero-intro {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--grey-600);
  line-height: 1.75;
  max-width: 600px;
}

.project-hero-img {
  margin-top: var(--space-20);
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--grey-100);
  overflow: hidden;
  border-radius: var(--radius);
}
.project-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Detail body */
.project-body {
  padding: var(--space-8) var(--space-12) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Modal: „Alle Projekte“ + Schließen in einer Zeile — gemeinsame vertikale Mitte */
.project-detail .project-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Oben = seitlich: gleicher Innenabstand zur Panel-Kante */
  padding: var(--space-12) var(--space-12) var(--space-3);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-raised);
  flex-shrink: 0;
}

.project-detail .project-back {
  padding: 0;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* Nur Modal: Trennlinie = gleiche horizontale Innenkante wie Hero/Body */
.project-detail .project-hero {
  position: relative;
  border-bottom: none;
  padding-top: var(--space-6);
}

.project-detail .project-hero::after {
  content: '';
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: 0;
  height: 1px;
  background: var(--border-subtle);
  border-radius: 1px;
}

.project-detail .project-body {
  padding-top: var(--space-6);
}

.project-section-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-12);
  padding-top: var(--space-10);
}

.project-section-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--grey-500);
  padding-top: 2px;
}

.project-section-content {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.7;
  color: var(--grey-700);
}

.project-section-content h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: var(--space-3);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}

.project-section-content p + p {
  margin-top: var(--space-4);
}

/* Image gallery in detail */
.project-gallery {
  padding: 0 var(--space-12);
  display: grid;
  gap: var(--space-3);
  background: transparent;
}

.project-gallery.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.project-gallery.cols-1 {
  grid-template-columns: 1fr;
}

.gallery-item {
  background: var(--grey-100);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms var(--ease-hero);
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .gallery-item:hover img {
      transform: scale(1.03);
    }
  }
}

.gallery-item.ratio-landscape { aspect-ratio: 16/10; }
.gallery-item.ratio-square    { aspect-ratio: 1/1; }
.gallery-item.ratio-portrait  { aspect-ratio: 3/4; }
.gallery-item.ratio-wide      { aspect-ratio: 21/9; }

/* =============================================
   ABOUT
   ============================================= */
.about-section {
  padding: var(--space-24) var(--space-12);
  margin-top: var(--space-4);
}

.about-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

/* Leere linke Spalte: optischer Einzug wie zuvor (ohne Platzhalter-Text) */
.about-left {
  min-width: 0;
}

.about-text {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.7;
  color: var(--grey-700);
  max-width: 560px;
}

.about-text + .about-text {
  margin-top: var(--space-6);
}

.about-specs {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.spec-row:last-child { border-bottom: none; }

.spec-label {
  color: var(--grey-400);
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-ui);
}

.spec-value {
  color: var(--grey-700);
  font-weight: 400;
  font-feature-settings: "tnum" 1;
}

/* =============================================
   CONTACT
   ============================================= */
.contact-section {
  padding: var(--space-24) var(--space-12);
}

.contact-inner {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-links {
  display: flex;
  gap: var(--space-8);
}

.contact-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  color: var(--grey-500);
  transition:
    color var(--duration-hover) var(--ease-smooth),
    opacity var(--duration-hover) var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.contact-link::after {
  content: '↗';
  font-size: var(--text-base);
  opacity: 0.5;
  display: inline-block;
  transition:
    opacity var(--duration-hover) var(--ease-smooth),
    transform 420ms var(--ease-hero);
}

.contact-link:hover {
  color: var(--black);
}

.contact-link:hover::after {
  opacity: 0.82;
}

@media (prefers-reduced-motion: no-preference) {
  .contact-link:hover::after {
    transform: translate(3px, -3px);
  }
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  padding: var(--space-8) var(--space-12) var(--space-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--grey-400);
  letter-spacing: var(--tracking-ui);
}

.footer-tagline {
  flex-shrink: 0;
  text-align: right;
}

/* =============================================
   PROJECT MODAL (Lightbox-Style)
   ============================================= */
/*
 * ::before = Blur, ::after = Abdunkelung. Beim Öffnen: Blur per transition:0 sofort sichtbar.
 * Beim Schließen: beide Opacitys gleichzeitig runter — Dauer = --duration-modal (wie Panel).
 */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 1;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--duration-modal);
}

.project-modal.open {
  pointer-events: all;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}

.project-modal-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-modal) var(--ease-modal);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-modal.open .project-modal-backdrop::before {
  opacity: 1;
  transition: opacity 0ms linear;
}

.project-modal-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--modal-scrim);
  opacity: 0;
  transition: opacity var(--duration-modal) var(--ease-modal);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-modal.open .project-modal-backdrop::after {
  opacity: 1;
}

.project-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(920px, 100%);
  max-height: min(90vh, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  opacity: 0;
  isolation: isolate;
  transform: translate3d(0, 16px, 0);
  backface-visibility: hidden;
  transition:
    opacity var(--duration-modal) var(--ease-modal),
    transform var(--duration-modal) var(--ease-modal),
    background-color var(--duration-theme) var(--ease-theme),
    border-color var(--duration-theme) var(--ease-theme);
}

.project-modal.open .project-modal-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 640px) {
  .project-modal-panel {
    transform: translate3d(0, 22px, 0);
  }
}

.project-modal-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.project-modal-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--grey-100);
  border: none;
  border-radius: var(--radius);
  color: var(--grey-500);
  font-size: var(--text-base);
  line-height: 1;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--duration-hover) var(--ease-smooth),
    color var(--duration-hover) var(--ease-smooth),
    opacity var(--duration-hover) var(--ease-smooth);
}

.project-modal-close:hover {
  background: var(--grey-200);
  color: var(--black);
}

@media (prefers-reduced-motion: reduce) {
  .project-modal-panel {
    transition: none !important;
    transform: none !important;
  }

  .project-modal.open .project-modal-panel {
    transform: none !important;
  }

  .project-modal-backdrop::before,
  .project-modal-backdrop::after {
    transition: none !important;
  }
}

/* =============================================
   LIGHTBOX
   ============================================= */
.lightbox {
  --lightbox-ease: var(--ease-smooth);
  --lightbox-dur: var(--duration-slow);

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--lightbox-dur) var(--lightbox-ease),
    visibility 0s linear var(--lightbox-dur);
  visibility: hidden;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition:
    opacity var(--lightbox-dur) var(--lightbox-ease),
    visibility 0s linear 0s;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lightbox-backdrop);
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
  transition:
    background var(--lightbox-dur) var(--lightbox-ease),
    backdrop-filter var(--lightbox-dur) var(--lightbox-ease);
}

.lightbox.open .lightbox-backdrop {
  background: var(--lightbox-backdrop-open);
}

.lightbox-backdrop:hover {
  background: var(--lightbox-backdrop-hover);
}

.lightbox-img {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1200px);
  max-height: min(88vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.42);
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition:
    opacity var(--lightbox-dur) var(--lightbox-ease),
    transform var(--lightbox-dur) var(--lightbox-ease),
    box-shadow var(--duration-hover) var(--ease-smooth);
  transition-delay: 0ms, 0ms, 0ms;
}

.lightbox.open .lightbox-img {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox.open .lightbox-img {
    transition-delay: 35ms, 35ms, 0ms;
  }
}

.lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  transition:
    background var(--duration-hover) var(--ease-smooth),
    color var(--duration-hover) var(--ease-smooth),
    border-color var(--duration-hover) var(--ease-smooth),
    transform var(--duration-hover) var(--ease-smooth),
    box-shadow var(--duration-hover) var(--ease-smooth);
}

.lightbox-close-icon {
  display: block;
  pointer-events: none;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.lightbox-close:active {
  transform: scale(0.97);
}

.lightbox-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-backdrop,
  .lightbox-img {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .lightbox-img {
    transform: none !important;
  }

  .lightbox.open .lightbox-img {
    opacity: 1;
  }

  .lightbox-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lightbox-close:hover,
  .lightbox-close:active {
    transform: none;
  }
}

/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--duration-reveal) var(--ease-hero),
    transform var(--duration-reveal) var(--ease-hero);
  transition-delay: 0ms;
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.visible {
    transition-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1);
  }
}

/* Stagger: gleichmäßige Stufen (ca. --stagger-step), wirkt ruhiger als uneinheitliche Sprünge */
@media (prefers-reduced-motion: no-preference) {
  .projects-grid .project-card.reveal:nth-child(1) { transition-delay: 0ms; }
  .projects-grid .project-card.reveal:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
  .projects-grid .project-card.reveal:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
  .projects-grid .project-card.reveal:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
  .projects-grid .project-card.reveal:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
  .projects-grid .project-card.reveal:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
  .projects-grid .project-card.reveal:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); }
  .projects-grid .project-card.reveal:nth-child(8) { transition-delay: calc(var(--stagger-step) * 7); }
  .projects-grid .project-card.reveal:nth-child(9) { transition-delay: calc(var(--stagger-step) * 8); }

  .section-head .section-heading.reveal,
  #project-filters.reveal {
    transition-delay: 0ms;
  }

  #about > .section-heading.reveal {
    transition-delay: 0ms;
  }
  .about-right > .about-text.reveal:nth-of-type(1) { transition-delay: calc(var(--stagger-step) * 1); }
  .about-right > .about-text.reveal:nth-of-type(2) { transition-delay: calc(var(--stagger-step) * 2); }
  .about-right > .about-text.reveal:nth-of-type(3) { transition-delay: calc(var(--stagger-step) * 3); }
  .about-specs .spec-row.reveal:nth-child(1) { transition-delay: calc(var(--stagger-step) * 4); }
  .about-specs .spec-row.reveal:nth-child(2) { transition-delay: calc(var(--stagger-step) * 5); }
  .about-specs .spec-row.reveal:nth-child(3) { transition-delay: calc(var(--stagger-step) * 6); }

  #contact > .section-heading.reveal {
    transition-delay: 0ms;
  }
  .contact-links .contact-link.reveal:nth-child(1) { transition-delay: calc(var(--stagger-step) * 1); }
  .contact-links .contact-link.reveal:nth-child(2) { transition-delay: calc(var(--stagger-step) * 2); }
  .contact-links .contact-link.reveal:nth-child(3) { transition-delay: calc(var(--stagger-step) * 3); }

  footer.footer.reveal {
    transition-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-inner > * {
    animation: none !important;
  }

  .project-filters-extra {
    transition: none;
  }

  .project-filters-extra.is-open {
    grid-template-columns: 1fr;
  }

  .project-filters-extra:not(.is-open) {
    grid-template-columns: 0fr;
  }

  .project-filters-extra-track {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }

  .projects-grid--loading {
    animation: none !important;
    background: var(--grey-100);
  }

  .project-card:hover {
    transform: none !important;
  }

  .project-card:hover .project-card-img img {
    transform: none !important;
  }

  .gallery-item:hover img {
    transform: none !important;
  }

  .nav-brand,
  .nav-link,
  .nav-link::after,
  .theme-switcher__btn,
  .contact-link,
  .contact-link::after,
  .project-back,
  .project-filter-btn,
  .project-card,
  .project-modal-close,
  .lightbox-close,
  .md-content a {
    transition: none !important;
  }
}

/* =============================================
   PAGE TRANSITIONS
   ============================================= */
.page {
  animation: none;
}

.page.entering {
  animation: pageEnter var(--duration-slow) var(--ease-out) forwards;
}

@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  :root {
    --space-lg:  var(--space-8);
    --space-xl:  var(--space-12);
    --space-2xl: var(--space-20);
    --space-3xl: var(--space-24);
  }

  .about-grid,
  .project-section-row {
    grid-template-columns: 1fr;
  }

  .about-left {
    display: none;
  }

  .spec-row { grid-template-columns: 110px 1fr; }
}

@media (max-width: 640px) {
  :root {
    --space-lg: var(--space-5);
    --space-xl: var(--space-10);
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-modal {
    padding: var(--space-3);
    align-items: flex-end;
  }

  .project-modal-panel {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .project-gallery.cols-2 { grid-template-columns: 1fr; }

  .contact-links { flex-direction: column; gap: var(--space-4); }

  .footer {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .footer-tagline {
    align-self: flex-end;
  }
}

/* =============================================
   MARKDOWN RENDERED CONTENT (project detail)
   ============================================= */
.md-content {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.72;
  color: var(--grey-700);
}

.md-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    color var(--duration-hover) var(--ease-smooth),
    text-decoration-color var(--duration-hover) var(--ease-smooth),
    opacity var(--duration-hover) var(--ease-smooth);
}

.md-content a.md-link {
  font-weight: 500;
}

.md-content a:hover {
  color: var(--grey-800);
  text-decoration-color: color-mix(in srgb, var(--grey-700) 55%, transparent);
}

.md-content a.md-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Markdown-Tabellen (GFM-ähnlich: | … | + Trennzeile) */
.md-content .md-table-wrap {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.md-content .md-table {
  width: 100%;
  min-width: min(100%, 320px);
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.md-content .md-table th,
.md-content .md-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 90%, transparent);
  vertical-align: top;
}

.md-content .md-table th {
  font-weight: 600;
  color: var(--grey-800);
  background: color-mix(in srgb, var(--grey-50) 92%, var(--surface-raised));
}

.md-content .md-table tbody tr:last-child td {
  border-bottom: none;
}

/* Markdown [media] — eingebettete Medien / iframes */
.md-content .md-media {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--grey-100);
}

.md-content .md-media--ratio {
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 820px);
}

.md-content .md-media-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.md-content .md-media--figma {
  aspect-ratio: 16 / 10;
  min-height: 320px;
  max-height: min(80vh, 900px);
}

.md-content .md-media--spotify {
  aspect-ratio: auto;
  max-height: none;
}

.md-content .md-media--spotify .md-media-frame {
  height: 152px;
  width: 100%;
}

.md-content .md-media--soundcloud .md-media-frame {
  height: 166px;
  width: 100%;
}

.md-content .md-media--link {
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
}

.md-content .md-media-link-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--grey-500);
  line-height: 1.5;
}

/* Markdown [split] — zwei zugehörige Inhalte (Desktop nebeneinander, schmal gestapelt) */
.md-content .md-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin: var(--space-6) 0;
}

.md-content .md-split__pane {
  min-width: 0;
}

@media (max-width: 640px) {
  .md-content .md-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Markdown [stack] — kompakte Key–Value-Zeilen */
.md-content .md-stack {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--grey-50);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.md-content .md-stack__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 85%, transparent);
}

.md-content .md-stack__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.md-content .md-stack__row:first-child {
  padding-top: 0;
}

.md-content .md-stack__label {
  margin: 0;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--grey-600);
  letter-spacing: var(--tracking-ui);
}

.md-content .md-stack__value {
  margin: 0;
  color: var(--grey-800);
}

.md-content .md-stack__value a.md-link {
  font-weight: inherit;
}

@media (max-width: 520px) {
  .md-content .md-stack__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-3) 0;
  }

  .md-content .md-stack__row:first-child {
    padding-top: 0;
  }
}

/* Markdown [buttons] — Block, nicht wie Fließ-Links gestylt */
.md-content .md-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.md-content .md-buttons--single {
  justify-content: flex-start;
}

.md-content a.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition:
    color var(--duration-hover) var(--ease-smooth),
    background var(--duration-hover) var(--ease-smooth),
    border-color var(--duration-hover) var(--ease-smooth),
    box-shadow var(--duration-hover) var(--ease-smooth);
}

.md-content a.md-btn .md-btn__label {
  flex-shrink: 0;
}

.md-content a.md-btn .md-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.md-content a.md-btn .md-btn__icon svg {
  display: block;
}

.md-content a.md-btn--icon-up,
.md-content a.md-btn--icon-down {
  flex-direction: column;
  gap: 0.375rem;
}

.md-content a.md-btn--primary {
  background: var(--accent);
  color: var(--white);
  border-color: color-mix(in srgb, var(--accent) 88%, var(--shade-dark));
}

.md-content a.md-btn--primary:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--accent) 82%, var(--shade-dark));
  border-color: color-mix(in srgb, var(--accent) 70%, var(--shade-dark));
}

.md-content a.md-btn--secondary {
  background: var(--surface-raised);
  color: var(--grey-800);
  border-color: var(--border-subtle);
}

.md-content a.md-btn--secondary:hover {
  color: var(--black);
  border-color: var(--grey-300);
  background: var(--grey-50);
}

.md-content a.md-btn--ghost {
  background: transparent;
  color: var(--grey-700);
  border-color: transparent;
}

.md-content a.md-btn--ghost:hover {
  color: var(--black);
  background: var(--grey-100);
}

.md-content a.md-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 3px;
}

.md-content a.md-btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.md-content h1,
.md-content h2,
.md-content h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--black);
  margin: var(--space-12) 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.md-content h1 { font-size: clamp(28px, 3.3vw, 46px); margin-top: 0; }
.md-content h2 { font-size: clamp(21px, 2.1vw, 28px); }
.md-content h3 { font-size: clamp(18px, 1.55vw, 22px); }

.md-content p { margin-bottom: var(--space-4); }

.md-content .md-figure {
  margin: var(--space-6) 0;
}

.md-content .md-figure img {
  width: 100%;
  display: block;
  border: none;
  border-radius: var(--radius);
  margin: 0;
  cursor: zoom-in;
}

.md-content .md-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  align-items: stretch;
}

.md-content .md-gallery img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0;
  cursor: zoom-in;
}

@media (max-width: 520px) {
  .md-content .md-gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .md-content .md-gallery img {
    flex: 0 0 78%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
  }
}

.md-content img {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  margin: var(--space-6) 0;
  cursor: zoom-in;
}

.md-content p img,
.md-content li img {
  width: 100%;
  display: block;
}

.md-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--grey-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--grey-700);
}

.md-content pre {
  background: var(--grey-100);
  border: none;
  padding: var(--space-6);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.md-content pre code {
  background: none;
  padding: 0;
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.7;
}

/* Listen: outside + em-Einzug — stabile Textkante (Modal, NODE-Preview, Split-Spalten) */
.md-content ul,
.md-content ol {
  list-style-position: outside;
  margin: 0 0 var(--space-4);
  padding-left: 0;
  padding-inline-start: 1.35em;
  box-sizing: border-box;
}

.md-content li {
  margin-bottom: var(--space-1);
}

.md-content li::marker {
  color: var(--grey-500);
}

/* Unterlisten: kein eigenes padding-inline überschreiben — jede ul/ol hat dieselbe Basisregel,
   der Einzug summiert sich im Verschachteln von selbst. */
.md-content :is(ul, ol) :is(ul, ol) {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.md-content blockquote {
  border-left: 3px solid var(--grey-200);
  padding-left: var(--space-6);
  color: var(--grey-500);
  font-style: normal;
  margin: var(--space-6) 0;
}

.md-content hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-20) 0;
}