/* ==========================================================================
   Evdokia Kulikova — kulikova-art.de · Phase 3B „Digitale Ausstellung“
   Fundament D1 „Fell & Farbe“ (Creme) + Ausstellungs-Dramaturgie.
   Typografie: Manrope 300/400/500 · Fraunces nur als Archiv-Akzent (kursiv).
   Handgeschrieben, ohne Framework.
   ========================================================================== */

/* ---------- Design-Tokens ---------- */
:root {
  --color-bg: #f4efe8;
  --color-bg-cool: #f7f5f1;
  --color-surface: #faf7f1;
  --color-surface-warm: #e9e0d2;
  --color-surface-dark: #14120f;
  --color-text: #372e22;
  --color-text-muted: #6d6051;
  --color-text-inverse: #efeae2;
  --color-accent: #01718f;
  --color-accent-secondary: #8a5f34;
  --color-border: #ddd2c0;
  --color-focus: #01718f;
  --color-contact: #372e22;

  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;
  --track-label: 0.26em;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --text-h3: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  --text-h2: clamp(1.7rem, 1.3rem + 2vw, 2.7rem);
  --text-h1: clamp(2.2rem, 1.5rem + 3.8vw, 4.1rem);
  --text-hero: clamp(2.05rem, 1.3rem + 3.9vw, 4.35rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2.5rem;  --space-6: 4rem;   --space-7: 6.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-max: 1240px;
  --prose-max: 62ch;

  /* Formales Breitensystem (Korrektur-Pass): Text bleibt schmal, Werke nutzen den Schirm */
  --width-reading: 62ch;     /* lange Kritiken, Recht, Biografie-Absätze */
  --width-text: 74ch;        /* Einleitungen, Seitenbeschreibungen */
  --width-content: 1240px;   /* normale Bild-Text-Kompositionen */
  --width-wide: min(1600px, 94vw);   /* großes Werk + Text, Szenen */
  --width-gallery: min(1840px, 95vw); /* Galerien: fast volle Breite, sichere Ränder */
  --width-bleed: 100vw;      /* Vollbild-Szenen, Bänder */

  --rail-h: clamp(240px, 42vh, 460px); /* einheitliche Ausstellungs-Rail-Höhe */

  --duration-fast: 150ms;
  --duration-normal: 350ms;
  --duration-slow: 900ms;
  --duration-crossfade: 21s;
  --easing-standard: cubic-bezier(.4, 0, .2, 1);
  --easing-reveal: cubic-bezier(.22, .8, .36, 1);
  --easing-image: cubic-bezier(.3, .1, .2, 1);

  --bar-h: 58px;
  --header-h: 72px;
  --header-h-compact: 54px;
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img, picture, video { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; text-wrap: balance; letter-spacing: 0; overflow-wrap: break-word; }
.page-hero h1 { hyphens: auto; } /* lange Titel wie „Datenschutzerklärung" sauber trennen statt überlaufen */
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
strong { font-weight: 500; }
p { max-inline-size: var(--prose-max); }

.kicker {
  font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--color-text-muted);
}
.serif-i, .archive-quote { font-family: var(--font-accent); font-style: italic; font-weight: 340; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--space-3);
  background: var(--color-text); color: var(--color-bg); padding: 0.6em 1em;
  z-index: 100; border-radius: 0 0 6px 6px; transition: inset-block-start var(--duration-fast);
}
.skip-link:focus { inset-block-start: 0; }

/* Cross-Document View Transition (progressive enhancement, kein SPA) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Anker-Ziele unter dem Sticky-Header ausrichten (CTA „Das Material entdecken" etc.) */
html { scroll-behavior: smooth; }
/* Die Szenen-Pinnung erfolgt per JS (preventDefault auf Wheel/Tasten + Re-Pin im scroll-Listener).
   BEWUSST KEIN overflow:hidden: das würde die Scrollbar entfernen, einen Breitensprung auslösen und
   Tastatur-/Trackpad-Nutzer aussperren (sie kämen ohne Mausrad nicht mehr aus der Szene heraus). */
html.scene-locked { }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], [id].scene-track { scroll-margin-block-start: calc(var(--header-h-compact) + 10px); }

/* ---------- Layout-Bausteine ---------- */
.wrap { max-inline-size: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
/* Breiten-Utilities — konsistent über alle Seiten */
.w-reading { max-inline-size: var(--width-reading); margin-inline: auto; padding-inline: var(--gutter); }
.w-text { max-inline-size: var(--width-text); margin-inline: auto; padding-inline: var(--gutter); }
.w-content { max-inline-size: var(--width-content); margin-inline: auto; padding-inline: var(--gutter); }
.w-wide { max-inline-size: var(--width-wide); margin-inline: auto; padding-inline: var(--gutter); }
.w-gallery { max-inline-size: var(--width-gallery); margin-inline: auto; padding-inline: var(--gutter); }
.w-bleed { inline-size: 100%; }
/* Textblöcke innerhalb breiter Container schmal halten */
.w-wide > .prose, .w-gallery > .section-head, .w-wide > .section-head { max-inline-size: var(--width-text); }
.section { padding-block: clamp(3rem, 8vw, 6.5rem); }
.section-head { margin-block-end: var(--space-5); }
.section-head .kicker { display: block; margin-block-end: var(--space-2); }
.bg-cool { background: var(--color-bg-cool); }
.bg-sand { background: var(--color-surface-warm); }
.bg-paper { background: var(--color-surface); }

.work-frame img { object-fit: contain; inline-size: 100%; }
figcaption { font-size: var(--text-sm); color: var(--color-text-muted); padding-block-start: var(--space-2); }

.text-link { font-weight: 500; border-block-end: 2px solid var(--color-accent); text-decoration: none; padding-block-end: 0.15em; }
.text-link:hover { color: var(--color-accent); }
a.external::after { content: ' ↗'; font-size: 0.75em; opacity: 0.7; }

/* ---------- Header (transparent → kompakt) ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background var(--duration-normal), border-color var(--duration-normal);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-color: var(--color-border);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-block-size: var(--header-h);
  transition: min-block-size var(--duration-normal) var(--easing-standard);
}
.site-header.is-scrolled .bar { min-block-size: var(--header-h-compact); }
.wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--color-text-muted); font-weight: 300; letter-spacing: 0.14em; text-transform: none; }

.main-nav { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.main-nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); list-style: none; }
.main-nav li { position: relative; }
/* Textlinks: aktive Linie als ::after — KEIN border-bottom mehr
   (der frühere border-Mechanismus beschnitt den Kontakt-Pill; Diagnose §6) */
.main-nav a {
  display: inline-block; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; padding-block: 0.5em; position: relative;
}
.main-nav a:not(.nav-contact-cta)::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0.1em;
  block-size: 1.5px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--easing-standard);
}
.main-nav a:not(.nav-contact-cta):hover::after,
.main-nav a:not(.nav-contact-cta):focus-visible::after { transform: scaleX(1); }
.main-nav a[aria-current="page"]:not(.nav-contact-cta) { font-weight: 500; }
.main-nav a[aria-current="page"]:not(.nav-contact-cta)::after { transform: scaleX(1); }

/* Kontakt-Pill: symmetrische, eigenständige Box — nie mehr angeschnitten */
.nav-contact-cta {
  border: 1px solid var(--color-text); border-radius: 2em;
  padding: 0.55em 1.2em; line-height: 1; align-self: center;
}
.nav-contact-cta:hover, .nav-contact-cta:focus-visible { background: var(--color-text); color: var(--color-bg); }
.nav-contact-cta[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }

/* Icon-Link: große Trefferfläche, aber KLARER Hover — kein diffuser Halbton-Kreis */
.icon-link { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; color: var(--color-text-muted); transition: color var(--duration-fast); }
.icon-link svg { inline-size: 20px; block-size: 20px; fill: currentColor; transition: transform var(--duration-fast); }
.icon-link:hover svg, .icon-link:focus-visible svg { transform: scale(1.08); }
.icon-link:hover { color: var(--color-accent); }
.icon-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; color: var(--color-accent); }
.icon-link:active svg { transform: scale(0.96); }

.menu-toggle {
  display: none; background: none; border: 1px solid var(--color-text);
  border-radius: 2em; padding: 0.55em 1.1em; font: 400 0.8rem var(--font-text);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  color: var(--color-text); cursor: pointer; gap: 0.5em; align-items: center;
}
.menu-toggle svg { inline-size: 15px; block-size: 15px; }

/* Mobile Menü */
.mobile-menu { border: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; background: var(--color-bg); color: var(--color-text); padding: 0; }
.mobile-menu::backdrop { background: rgba(20, 18, 15, 0.4); }
.mobile-menu .inner { display: flex; flex-direction: column; min-block-size: 100dvh; padding: var(--space-3) var(--gutter) var(--space-5); }
.mobile-menu .top { display: flex; justify-content: space-between; align-items: center; min-block-size: var(--header-h-compact); }
.mobile-menu nav { margin-block-start: var(--space-5); }
.mobile-menu nav ul { list-style: none; display: grid; gap: var(--space-2); }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: clamp(1.6rem, 5.5vw, 2.2rem); font-weight: 300;
  text-decoration: none; display: block; padding-block: 0.35em;
  border-block-end: 1px solid var(--color-border);
}
.mobile-menu nav a[aria-current="page"] { color: var(--color-accent); font-weight: 400; }
.mobile-menu .menu-contact { margin-block-start: auto; padding-block-start: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-base); }
.mobile-menu .menu-social { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }

/* ---------- Hero (Full-Bleed + zurückhaltender Parallax) ---------- */
.hero { position: relative; min-block-size: min(90vh, 820px); overflow: clip; isolation: isolate;
  display: grid; align-items: end; }
/* Bühne: randlos, füllt den Viewport; --hero-p (Scroll) bewegt das Bild langsamer als die Seite */
.hero-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--color-surface-warm);
}
.hero-stage picture, .hero-stage img {
  position: absolute; inset: -8% 0; block-size: 116%; inline-size: 100%;
  object-fit: cover; object-position: center 38%;
  transform: translate3d(0, calc(var(--hero-p, 0) * 0.14px), 0) scale(var(--hero-scale, 1.02));
  will-change: transform;
}
.hero-stage picture { opacity: 0; animation: hero-xfade var(--duration-crossfade) infinite; }
.hero-stage picture:only-child { animation: none; opacity: 1; }
.hero-stage picture:nth-child(1) { animation-delay: -1s; }
.hero-stage picture:nth-child(2) { animation-delay: 6s; }
.hero-stage picture:nth-child(3) { animation-delay: 13s; }
@keyframes hero-xfade {
  0% { opacity: 0; } 4.5% { opacity: 1; } 33.3% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; }
}
/* Werke-Hero: 5-Bild-Crossfade — gleiche Sprache/Rhythmus (~7 s je Werk, ~1 s Überblendung),
   nur längerer Zyklus. Der Startseiten-Hero (3 Bilder) bleibt unberührt. */
.hero-5 { --duration-crossfade: 35s; }
.hero-5 .hero-stage picture { animation-name: hero-xfade-5; }
.hero-5 .hero-stage picture:nth-child(4) { animation-delay: 20s; }
.hero-5 .hero-stage picture:nth-child(5) { animation-delay: 27s; }
@keyframes hero-xfade-5 {
  0% { opacity: 0; } 2.7% { opacity: 1; } 20% { opacity: 1; } 22.7% { opacity: 0; } 100% { opacity: 0; }
}
/* Startseiten-Hero: 4-Bild-Crossfade (gleiche Sprache, ~7 s je Werk) */
.hero-4 { --duration-crossfade: 28s; }
.hero-4 .hero-stage picture { animation-name: hero-xfade-4; }
.hero-4 .hero-stage picture:nth-child(4) { animation-delay: 20s; }
@keyframes hero-xfade-4 {
  0% { opacity: 0; } 3.6% { opacity: 1; } 25% { opacity: 1; } 28.6% { opacity: 0; } 100% { opacity: 0; }
}
/* Hahn-Motiv: Bildausschnitt auf den Kopf zentriert (Porträt in Querformat-Bühne) */
.hero-stage img.hero-crop-hahn { object-position: center 30%; }

/* Workshop-Impressionen: 2-spaltiges Raster, mobil einspaltig */
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-block-start: var(--space-5); }
@media (max-width: 640px) { .ws-grid { grid-template-columns: 1fr; } }
/* sanfter Verlauf unten links, damit das Textpanel über jedem Werk lesbar bleibt */
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, color-mix(in srgb, var(--color-bg) 78%, transparent) 0%, color-mix(in srgb, var(--color-bg) 30%, transparent) 34%, transparent 60%),
              linear-gradient(to top, color-mix(in srgb, var(--color-surface-dark) 22%, transparent), transparent 40%); }
.hero-copy {
  position: relative; z-index: 2; max-inline-size: min(35.5rem, 92vw);
  margin: 0 auto clamp(2.5rem, 6vh, 5rem) 0;
  margin-inline-start: clamp(1.25rem, 6vw, 5.5rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--color-bg) 74%, transparent);
  backdrop-filter: blur(10px) saturate(1.05); border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: 8px;
}
@supports not (backdrop-filter: blur(2px)) { .hero-copy { background: color-mix(in srgb, var(--color-bg) 92%, transparent); } }
.hero-copy .kicker { margin-block-end: var(--space-3); }
.hero-copy h1 { font-size: var(--text-hero); font-weight: 300; line-height: 1.03; letter-spacing: -0.01em; margin-block-end: var(--space-3); overflow-wrap: break-word; }
.hero-copy .lede { font-size: var(--text-lg); color: var(--color-text-muted); margin-block-end: 0; font-weight: 300; max-inline-size: 40ch; }
.hero-scroll-hint { font-size: var(--text-sm); font-weight: 500; text-decoration: none; border-block-end: 2px solid var(--color-accent); padding-block-end: 0.2em; }

/* ---------- Sticky-Materialszene ---------- */
.material-scene { background: linear-gradient(to bottom, var(--color-bg), var(--color-surface-warm)); }
.scene-track { position: relative; }
.scene-stage { display: grid; align-items: center; padding-block: var(--space-4); }
.js:not(.reduced-motion) .scene-stage {
  position: sticky; inset-block-start: var(--header-h-compact);
  min-block-size: calc(100vh - var(--header-h-compact));
}
.scene-stage .inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; inline-size: 100%; max-inline-size: var(--width-wide); margin-inline: auto; padding-inline: var(--gutter); }
.js:not(.reduced-motion) .scene-visual { position: relative; inline-size: 100%; aspect-ratio: 885 / 900; max-block-size: 84vh; }
.js:not(.reduced-motion) .scene-visual [data-stage] { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--easing-image); }
.js:not(.reduced-motion) .scene-visual [data-stage].is-active { opacity: 1; }
.js:not(.reduced-motion) .scene-visual [data-stage] picture, .js:not(.reduced-motion) .scene-visual [data-stage] img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.scene-visual [data-stage] { margin-block-end: var(--space-3); }
.js:not(.reduced-motion) .scene-visual [data-stage] { margin-block-end: 0; }
.scene-copy .stage-text { padding-block: var(--space-2); }
.scene-copy .stage-text p { font-weight: 300; }
.js:not(.reduced-motion) .scene-copy .stage-text { opacity: 0.7; transition: opacity 400ms; }
.js:not(.reduced-motion) .scene-copy .stage-text.is-active { opacity: 1; }
.js:not(.reduced-motion) .scene-copy .stage-text.is-active p { font-weight: 400; }
.scene-copy .stage-text p { font-size: var(--text-lg); font-weight: 300; max-inline-size: 34ch; }
.scene-copy .stage-text .stage-cta { margin-block-start: var(--space-5); } /* Link „Alle …-Werke" abgesetzt, eigene Zeile */
.scene-copy .stage-text .num { font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--color-accent-secondary); display: block; margin-block-end: 2px; }
.scene-steps { display: none; } /* Schritt-Marker sind kein Scroll-Spacer mehr — die JS-Zustandsmaschine steuert die Schritte */
.js:not(.reduced-motion) .scene-track { min-block-size: 100vh; } /* Szene füllt genau einen Viewport → deterministisches Andocken */

@media (max-width: 899px) {
  .js:not(.reduced-motion) .scene-stage { position: static; min-block-size: 0; }
  .js:not(.reduced-motion) .scene-track { min-block-size: 0; } /* mobil: kein erzwungener Viewport, normaler Fluss */
  .scene-stage .inner { grid-template-columns: 1fr; }
  .js:not(.reduced-motion) .scene-visual { aspect-ratio: auto; max-block-size: none; position: static; }
  .js:not(.reduced-motion) .scene-visual [data-stage] { position: static; opacity: 1; margin-block-end: var(--space-4); }
  .js:not(.reduced-motion) .scene-visual [data-stage] picture, .js:not(.reduced-motion) .scene-visual [data-stage] img { position: static; block-size: auto; }
  .js:not(.reduced-motion) .scene-copy .stage-text { opacity: 1; }
}

.no-js .scene-copy .stage-text, .reduced-motion .scene-copy .stage-text { opacity: 1; }

/* ---------- Künstlerin (Editorial-Overlap) ---------- */
.artist-intro { position: relative; }
.artist-intro .grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
.artist-intro blockquote { font-family: var(--font-accent); font-style: italic; font-weight: 340; font-size: var(--text-h3); line-height: 1.4; max-inline-size: 26ch; text-wrap: balance; }
.artist-intro blockquote footer { font-family: var(--font-text); font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: var(--space-3); letter-spacing: 0.06em; }
.artist-portrait-frame { position: relative; }
.artist-portrait-frame img { border-radius: 300px 300px 6px 6px; }
@media (min-width: 900px) {
  .artist-portrait-frame { margin-block-start: calc(-1 * clamp(1rem, 5vw, 4rem)); }
}

/* ---------- Werkwelten-Collage ---------- */
.collage { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: repeat(12, 1fr); }
.collage > * { min-inline-size: 0; }
.collage .c-a { grid-column: 1 / span 7; }
.collage .c-b { grid-column: 8 / span 5; margin-block-start: clamp(2rem, 6vw, 5rem); }
.collage .c-c { grid-column: 1 / span 4; }
.collage .c-d { grid-column: 5 / span 4; margin-block-start: clamp(1.5rem, 4vw, 3rem); }
.collage .c-e { grid-column: 9 / span 4; }
.discipline-card { text-decoration: none; display: block; }
.discipline-card .work-frame { background: var(--color-surface); overflow: hidden; }
.discipline-card img { transition: transform var(--duration-slow) var(--easing-image); }
.discipline-card:hover img, .discipline-card:focus-visible img { transform: scale(1.025); }
.discipline-card .label { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-2); gap: var(--space-2); }
.discipline-card .label h3 { font-size: var(--text-lg); font-weight: 400; }
.discipline-card .label .count { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Editoriale Gallery-Wall (Masonry, natürliche Seitenverhältnisse) ----------
   CSS-Multicolumn: alle Werke gleich breit (Spaltenbreite), Höhe folgt dem Verhältnis
   → vollständiges Werk, KEIN Crop, keine quadratischen Kacheln, kontrollierte
   Staffelung (keine durchgehenden geraden Reihen). Wenige Spalten = editorial. */
.gallery-wall {
  max-inline-size: var(--width-gallery); margin-inline: auto; padding-inline: var(--gutter);
  column-count: 2; column-gap: clamp(0.9rem, 1.6vw, 1.8rem);
}
@media (min-width: 640px)  { .gallery-wall { column-count: 3; } }
@media (min-width: 1024px) { .gallery-wall { column-count: 4; } }
.gallery-wall .g-item {
  break-inside: avoid; margin: 0 0 clamp(0.9rem, 1.6vw, 1.8rem); display: block;
}
/* zurückhaltender, deterministischer Vertikalversatz für Rhythmus (nur ab Tablet) */
@media (min-width: 640px) { .gallery-wall .g-item.off { margin-block-start: clamp(1rem, 3vw, 2.6rem); } }
.gallery-wall .work-link {
  all: unset; cursor: zoom-in; display: block; inline-size: 100%; position: relative;
  background: color-mix(in srgb, var(--color-surface-warm) 45%, transparent);
}
.gallery-wall .work-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.gallery-wall picture { display: block; }
/* NATÜRLICHES Seitenverhältnis: volle Breite, Höhe automatisch — nie beschneiden */
.gallery-wall img { inline-size: 100%; block-size: auto; display: block; transition: opacity var(--duration-normal) var(--easing-image); }
.gallery-wall .work-link:hover img { opacity: 0.9; }
.gallery-wall figcaption { font-size: var(--text-xs); color: var(--color-text-muted); padding-block-start: 0.45rem; }

/* Serien-Trenner (klare Hierarchie, Linie oben) */
.series-sep { max-inline-size: var(--width-gallery); margin-inline: auto; padding-inline: var(--gutter);
  margin-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.series-sep .rule { border-block-start: 1px solid var(--color-border); padding-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.series-sep .idx { font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-muted); }
.series-sep h3 { font-size: var(--text-h3); font-weight: 300; margin-block: 0.4rem 0.3rem; }
.series-sep .sub { font-size: var(--text-lg); font-weight: 300; color: var(--color-text); max-inline-size: 46ch; }
.series-sep .desc { font-size: var(--text-sm); color: var(--color-text-muted); max-inline-size: 60ch; margin-block-start: 0.5rem; }
.series-sep .desc a { color: var(--color-accent); }

/* ---------- Asymmetrische Werk-Galerie (Featured-Momente) ---------- */
.art-flow { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(12, 1fr); align-items: start;
  max-inline-size: var(--width-gallery); margin-inline: auto; padding-inline: var(--gutter); }
.art-flow .series-head { max-inline-size: var(--width-gallery); }
.art-flow .series-head > * { max-inline-size: var(--width-text); }
.art-flow > * { min-inline-size: 0; }
.art-flow figure { margin: 0; }
.art-flow .f-hero { grid-column: 2 / span 10; }
.art-flow .f-big-l { grid-column: 1 / span 7; }
.art-flow .f-big-r { grid-column: 6 / span 7; }
.art-flow .f-med-l { grid-column: 1 / span 5; }
.art-flow .f-med-r { grid-column: 8 / span 5; }
.art-flow .f-med-c { grid-column: 5 / span 5; }
.art-flow .f-sm-l { grid-column: 2 / span 4; }
.art-flow .f-sm-m { grid-column: 5 / span 4; }
.art-flow .f-sm-r { grid-column: 9 / span 4; }
.art-flow .f-drop { margin-block-start: clamp(1.5rem, 5vw, 4rem); }
.work-link { all: unset; display: block; inline-size: 100%; cursor: zoom-in; }
.work-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.work-link img { inline-size: 100%; }
.series-head { grid-column: 1 / -1; padding-block-start: clamp(1.5rem, 5vw, 4rem); }
.series-head .kicker { display: block; margin-block-end: var(--space-2); }
@media (max-width: 899px) {
  .art-flow { grid-template-columns: repeat(2, 1fr); }
  .art-flow > * { margin-block-start: 0 !important; }
  .art-flow .f-hero, .art-flow .f-big-l, .art-flow .f-big-r, .art-flow .f-med-c, .art-flow .series-head { grid-column: 1 / -1 !important; }
  .art-flow .f-med-l, .art-flow .f-med-r, .art-flow .f-sm-l, .art-flow .f-sm-m, .art-flow .f-sm-r { grid-column: span 1 !important; }
}
@media (max-width: 479px) {
  .art-flow { grid-template-columns: 1fr; }
  .art-flow > * { grid-column: 1 / -1 !important; }
}

/* ---------- Sticky-Szene: Skulptur-Fotoansichten ---------- */
.sculpt-scene { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.sculpt-scene .kicker { color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent); }
.sculpt-scene .scene-visual { aspect-ratio: 1134 / 1512; max-block-size: 80vh; }
.sculpt-scene .scene-visual img { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.sculpt-scene .scene-note { font-size: var(--text-sm); color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent); } /* Intro-Notiz, KEINE Schritt-Stufe (sonst wäre die Text/Bild-Zählung verschoben) */
.sculpt-scene .stage-text .num { color: #8fd0e0 !important; }

/* ---------- Dunkelszene + Night-Rail ---------- */
.night { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.night .kicker { color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent); }
.night .work-frame { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.night figcaption { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.night-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 460px); gap: clamp(1.5rem, 4vw, 3rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block: var(--space-3); padding-inline: var(--gutter); scrollbar-width: thin; }
.night-rail > figure { scroll-snap-align: center; margin: 0; }
.rail-hint { font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); padding-inline: var(--gutter); }

/* ---------- Kinetisches Ausstellungs-Band ---------- */
.exhibit-rail { position: relative; }
.exhibit-rail .track {
  display: flex; gap: clamp(1rem, 2vw, 2rem);
  block-size: var(--rail-h);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: none; padding-block: 0; padding-inline: max(var(--gutter), 60px);
  scrollbar-width: none; cursor: grab; align-items: stretch;
}
.exhibit-rail .track::-webkit-scrollbar { display: none; }
.exhibit-rail .track.dragging { cursor: grabbing; scroll-snap-type: none; }
.exhibit-rail .track > figure { scroll-snap-align: center; margin: 0; block-size: 100%; flex: 0 0 auto; }
/* einheitliche HÖHE, Breite folgt dem Seitenverhältnis (kein Crop, keine Deformation) */
.exhibit-rail .track > figure .work-link,
.exhibit-rail .track > figure picture { block-size: 100%; display: block; }
.exhibit-rail .track > figure img { block-size: 100%; inline-size: auto; max-inline-size: none; object-fit: contain; }
/* Pfeile: vertikal auf Bildhöhe zentriert, nicht auf Sektionshöhe */
.rail-arrow {
  position: absolute; inset-block-start: calc(var(--rail-h) / 2); transform: translateY(-50%);
  z-index: 5; inline-size: 48px; block-size: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface-dark) 78%, transparent); color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer;
}
.rail-arrow.prev { inset-inline-start: clamp(0.5rem, 1.5vw, 1.25rem); }
.rail-arrow.next { inset-inline-end: clamp(0.5rem, 1.5vw, 1.25rem); }
.rail-arrow:hover { background: var(--color-surface-dark); }
.rail-arrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail-controls { display: flex; align-items: center; gap: var(--space-3); padding-inline: var(--gutter); margin-block-start: var(--space-4); }
.rail-controls button {
  background: none; border: 1px solid currentColor; border-radius: 50%;
  inline-size: 42px; block-size: 42px; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.rail-controls button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.rail-controls .progress { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-text-muted); min-inline-size: 4.5em; }

/* ---------- Bio-Szene / „Stationen" ----------
   BASIS = mobil / schmaler Container: normaler Dokumentfluss. Alle Archivbilder liegen
   gestapelt im Textfluss (kein sticky, kein absolute, kein Overlap), jedes mit eigener
   Bildunterschrift. Das Desktop-Scrollytelling (sticky Bühne + überblendete Bilder) ist
   bewusst in eine CONTAINER-QUERY gekapselt: auf schmalen Containern existieren die
   höher spezifischen .js:not(.reduced-motion)-Regeln gar nicht, daher kann dort garantiert
   nichts den Biografietext überlagern. */
.bio-scene { container: bioscene / inline-size; }
.bio-scene .inner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bio-visual { position: static; }
.bio-visual figure { position: static; display: grid; gap: var(--space-4); margin: 0; aspect-ratio: auto; }
.bio-visual [data-bio] { position: static; opacity: 1; margin: 0; }
.bio-visual [data-bio] img, .bio-visual [data-bio] picture { display: block; position: static; inline-size: 100%; block-size: auto; object-fit: contain; }
.bio-visual [data-bio]::after { content: attr(data-caption); display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: var(--space-2); line-height: 1.4; }
.bio-visual > .caption { display: none; } /* JS-gesteuerte Einzel-Caption nur im Desktop-Scrollytelling */

@container bioscene (min-width: 52rem) {
  .bio-scene .inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .js:not(.reduced-motion) .bio-visual { position: sticky; inset-block-start: calc(var(--header-h-compact) + var(--space-4)); }
  .js:not(.reduced-motion) .bio-visual figure { position: relative; aspect-ratio: 3 / 4; display: block; gap: 0; }
  .js:not(.reduced-motion) .bio-visual [data-bio] { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--easing-image); }
  .js:not(.reduced-motion) .bio-visual [data-bio].is-active { opacity: 1; }
  .js:not(.reduced-motion) .bio-visual [data-bio] picture, .js:not(.reduced-motion) .bio-visual [data-bio] img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .js:not(.reduced-motion) .bio-visual [data-bio]::after { display: none; }
  .js:not(.reduced-motion) .bio-visual > .caption { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: var(--space-2); }
}


/* Timeline */
.timeline { display: grid; gap: 0; max-inline-size: 720px; }
.timeline > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
.timeline dt { font-weight: 500; font-size: var(--text-base); letter-spacing: 0.06em; }
.timeline dd { color: var(--color-text-muted); }
.timeline dd a { color: var(--color-text); }
@media (max-width: 479px) { .timeline > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ---------- Künstlerische Position + Faktenbox ---------- */
.position .grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
.position p { max-inline-size: 62ch; }
.position p + p { margin-block-start: var(--space-3); }
.factbox { border: 1px solid var(--color-border); border-radius: 8px; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--color-surface); }
.factbox h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); margin-block-end: var(--space-3); font-weight: 500; }
.factbox dl { display: grid; gap: 0; }
.factbox dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); padding-block: var(--space-2); border-block-start: 1px solid var(--color-border); }
.factbox dl > div:first-child { border-block-start: 0; }
.factbox dt { font-weight: 500; color: var(--color-text); }
.factbox dd { color: var(--color-text-muted); }
@media (max-width: 899px) { .position .grid { grid-template-columns: 1fr; } .factbox dl > div { grid-template-columns: 7rem 1fr; } }
@media (max-width: 479px) { .factbox dl > div { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Presse & externe Referenzen ---------- */
.linklist { display: grid; gap: 0; max-inline-size: 760px; }
.linklist .item { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
.linklist .item :where(a, span).title { font-size: var(--text-lg); font-weight: 500; color: var(--color-text); text-decoration: none; }
.linklist .item a.title:hover { text-decoration: underline; text-underline-offset: 3px; }
.linklist .meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.linklist .note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); max-inline-size: 760px; }
.chips a { display: inline-flex; align-items: center; gap: .45em; padding: .55em 1em; border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-sm); color: var(--color-text); text-decoration: none; }
.chips a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.chips a::after { content: "↗"; font-size: .85em; color: var(--color-text-muted); }

/* Buttons (primär/ghost) — für Kauf-/Verkaufs-Pfade */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .72em 1.35em; border-radius: 4px; font-weight: 500; text-decoration: none; font-size: var(--text-base); line-height: 1.15; }
.btn.primary { background: var(--color-accent); color: #fff; }
.btn.primary:hover { filter: brightness(0.93); }
.btn.ghost { border: 1px solid var(--color-border); color: var(--color-text); }
.btn.ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn.ext::after { content: "↗"; font-size: .85em; opacity: .7; }

/* Verkaufs-Feature (Ausstellungs-/Verkaufspartner) — kompakt, klar vom Profil-Block getrennt */
.sales-feature { margin-block-start: var(--space-5); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); max-inline-size: 760px; }
.sales-feature .kicker { color: var(--color-accent-secondary); }
.sales-feature h3 { font-size: var(--text-h3); margin-block: var(--space-1) var(--space-2); font-weight: 400; }
.sales-feature p { color: var(--color-text-muted); max-inline-size: 60ch; }
.sales-feature .btn-row { margin-block-start: var(--space-4); }

/* ---------- Kritiken: Hierarchie ---------- */
.refs { background: var(--color-surface); }
.refs .quote-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.refs blockquote { border-inline-start: 2px solid var(--color-accent-secondary); padding-inline-start: var(--space-4); }
.refs blockquote p { font-family: var(--font-accent); font-style: italic; font-weight: 340; font-size: var(--text-lg); line-height: 1.5; }
.refs blockquote footer { margin-block-start: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.refs blockquote cite { font-style: normal; font-weight: 500; color: var(--color-text); }

.critique-lead { border-inline-start: 2px solid var(--color-accent-secondary); padding-inline-start: var(--space-4); margin-block-end: var(--space-5); max-inline-size: 74ch; }
.critique-lead .quote { font-family: var(--font-accent); font-style: italic; font-weight: 340; font-size: var(--text-lg); line-height: 1.55; }
.critique-lead .quote p + p { margin-block-start: var(--space-3); }
.critique-lead .who { margin-block-start: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.critique-lead .who cite { font-style: normal; font-weight: 500; color: var(--color-text); }
.critique-more { max-inline-size: 74ch; }
.critique-more details { border-block-end: 1px solid var(--color-border); }
.critique-more summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding-block: var(--space-3); font-weight: 500;
}
.critique-more summary::-webkit-details-marker { display: none; }
.critique-more summary::after { content: '+'; font-size: 1.2em; font-weight: 300; color: var(--color-text-muted); flex: none; }
.critique-more details[open] summary::after { content: '−'; }
.critique-more summary .role { font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); text-align: end; }
.critique-more .body { padding-block: 0 var(--space-4); }
.critique-more .body .quote { font-family: var(--font-accent); font-style: italic; font-weight: 340; font-size: var(--text-lg); line-height: 1.55; }
.critique-more .body .quote p + p { margin-block-start: var(--space-3); }
.werknote { margin-block-start: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.08em; }

/* ---------- Angebots-Splits ---------- */
.offer .grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.prose { overflow-wrap: break-word; } /* lange Tokens (URLs, „localStorage/…") brechen statt zu überlaufen */
.offer .prose p + p, .offer .prose ul { margin-block-start: var(--space-3); }
.offer ul { list-style: none; }
.offer li { padding-inline-start: 1.4em; position: relative; margin-block-start: 0.4em; }
.offer li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--color-accent-secondary); }
.offer.alt { background: var(--color-surface-warm); }
@media (min-width: 900px) { .offer.mirror .grid > :first-child { order: 2; } }

/* ---------- Kontakt ---------- */
.contact-section { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.contact-section h2 { max-inline-size: 18ch; }
.contact-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
.contact-list { list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-lg); }
.contact-list a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.6em; padding-block: 0.2em; border-block-end: 1.5px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent); }
.contact-list a:hover { border-color: var(--color-text-inverse); }
.contact-list svg { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; flex: none; }
.contact-note { color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent); font-size: var(--text-sm); }
.contact-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.contact-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-4); }
.contact-card h3 { font-size: var(--text-lg); font-weight: 400; margin-block-end: var(--space-2); }
.contact-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-card .big-link { display: inline-block; margin-block-start: var(--space-3); font-size: var(--text-lg); font-weight: 500; }

/* ---------- Seiten-Hero ---------- */
.page-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); }
.page-hero .lede { font-size: var(--text-lg); color: var(--color-text-muted); max-inline-size: 58ch; margin-block-start: var(--space-3); font-weight: 300; }
.page-hero h1 { max-inline-size: 18ch; }

/* Spalten-Galerie (kompakte Fälle) */
.gallery-cols { columns: 3 300px; column-gap: clamp(1.25rem, 3vw, 2rem); }
.gallery-cols figure { break-inside: avoid; margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.gallery-cols img { inline-size: 100%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface-dark); color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent); border-block-start: 1px solid color-mix(in srgb, var(--color-text-inverse) 12%, transparent); }
.site-footer .inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; padding-block: var(--space-5); font-size: var(--text-sm); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--color-text-inverse); }
/* Social-Icons im dunklen Footer: hell sichtbar, mit Facebook konsistent */
.site-footer .icon-link { color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent); }
.site-footer .icon-link:hover, .site-footer .icon-link:focus-visible { color: var(--color-text-inverse); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ---------- Mobile Kontaktleiste ---------- */
.contact-bar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60;
  display: none; background: var(--color-contact);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
.contact-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-block-size: var(--bar-h); color: var(--color-bg); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em;
}
.contact-bar a + a { border-inline-start: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent); }
.contact-bar a:active { background: color-mix(in srgb, var(--color-contact) 80%, white); }
.contact-bar svg { inline-size: 19px; block-size: 19px; fill: currentColor; }
body.has-contact-bar { padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: color-mix(in srgb, var(--color-surface-dark) 97%, transparent); inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; overflow: hidden; }
.lightbox:not([open]) { display: none; }
.lightbox .frame { display: grid; place-items: center; block-size: 100dvh; padding: clamp(0.75rem, 3vw, 2rem); }
/* Anzeige nutzt den Viewport, deckelt aber auf native Größe (kein Hochskalieren);
   --nat-w/--nat-h werden per JS gesetzt */
.lightbox img { max-inline-size: 94vw; max-block-size: 90dvh; inline-size: auto; block-size: auto; object-fit: contain; image-rendering: auto; }
.lightbox figcaption { color: var(--color-text-inverse); text-align: center; padding-block-start: var(--space-3); font-size: var(--text-sm); }
.lightbox .lb-counter { position: fixed; inset-block-start: max(14px, env(safe-area-inset-top)); inset-inline-start: 18px; color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent); font-size: var(--text-xs); letter-spacing: 0.16em; }
.lightbox .close { position: fixed; inset-block-start: max(8px, env(safe-area-inset-top)); inset-inline-end: 14px; background: none; border: 0; color: var(--color-text-inverse); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.4em; z-index: 3; }
.lightbox .lb-nav { position: fixed; inset-block-start: 50%; transform: translateY(-50%); inline-size: 52px; block-size: 52px; border-radius: 50%; background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent); color: var(--color-text-inverse); font-size: 1.3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 3; }
.lightbox .lb-nav.prev { inset-inline-start: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox .lb-nav.next { inset-inline-end: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox .lb-nav:hover { background: color-mix(in srgb, var(--color-text-inverse) 22%, transparent); }
.lightbox .lb-nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lightbox .lb-nav[hidden] { display: none; }
body.lightbox-open .contact-bar { display: none !important; }
body.lightbox-open { overflow: hidden; }

/* ---------- Reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--easing-reveal), transform var(--duration-slow) var(--easing-reveal); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage picture { animation: none !important; opacity: 0; }
  .hero-stage picture:first-child { opacity: 1; }
  .hero-stage picture, .hero-stage img { transform: none !important; }
  .discipline-card img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .contact-bar { display: flex; }
  .artist-intro .grid, .offer .grid, .contact-grid { grid-template-columns: 1fr; }
  /* Mobiler Hero: full-bleed bleibt, Parallax sehr dezent, Panel unten, Text lesbar */
  .hero { min-block-size: 82vh; }
  .hero-stage picture, .hero-stage img { inset: -4% 0; block-size: 108%; object-position: center 40%;
    transform: translate3d(0, calc(var(--hero-p, 0) * 0.06px), 0) scale(1.01); }
  .hero-copy { margin-inline: var(--gutter); margin-block-end: clamp(1.5rem, 4vh, 3rem); max-inline-size: none; }
  /* Mobil: großzügiger, symmetrischer Innenabstand — Text nie am Kartenrand kleben */
  .hero-copy { padding-inline: clamp(2rem, 7vw, 2.6rem); padding-block: var(--space-4) clamp(1.6rem, 5vw, 2.2rem); }
  .collage { grid-template-columns: 1fr; gap: var(--space-5); }
  .collage > * { grid-column: auto !important; margin-block-start: 0 !important; }
  .artist-portrait-frame { max-inline-size: 420px; margin-block-start: 0 !important; }
  .offer.mirror .grid > :first-child { order: 0; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .collage .c-a { grid-column: 1 / span 6; }
  .collage .c-b { grid-column: 7 / span 6; }
  .collage .c-c, .collage .c-d { grid-column: span 6; }
  .collage .c-e { grid-column: 4 / span 6; }
}
@media (max-width: 479px) {
  .wordmark span { display: none; }
}
@media (max-width: 379px) {
  :root { --gutter: 1rem; }
  .wordmark { font-size: 0.8rem; letter-spacing: 0.1em; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .contact-bar, .hero-scroll-hint, .menu-toggle, .rail-controls { display: none !important; }
  body { background: #fff; color: #000; }
}