/* ==========================================================================
   Lothar Prokop Fotografie – öffentliches Frontend

   Gestaltungshaltung: Die Fotografie ist der Inhalt, die Oberfläche tritt
   zurück. Ruhige, warme Off-White-Flächen, Haarlinien statt Rahmen, keine
   Karten, keine Schatten, keine Rundungen, keine Farbakzente – Farbe kommt
   ausschließlich aus den Bildern.

   Klassennamen, Datenattribute und Zustände entsprechen unverändert den
   Templates und site.js. Hier wird ausschließlich gestaltet.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
/* Inter: neutrale Grotesk für Navigation, Fließtext und große Headlines. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Cormorant Garamond: editoriale Serif, nur für einzelne große Aussagen. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Reduzierte Palette: warmes Off-White, hellstes Grau, Schwarz, Anthrazit */
  --paper: #f7f6f3;
  --paper-2: #edece8;
  --ink: #101010;
  --ink-2: #3b3a38;
  --ink-3: #8b8985;
  --line: #e1dfda;
  --line-2: #cbc8c1; /* Haarlinie an bedienbaren Elementen: sichtbar, ohne zu dominieren */
  --dark: #100f0e;
  --on-dark: #f5f3ef;
  --focus: #101010;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  --t-micro: 0.6875rem;
  --t-small: 0.8125rem;
  --t-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-lead: clamp(1.0625rem, 0.97rem + 0.55vw, 1.375rem);
  --t-mid: clamp(1.25rem, 1.05rem + 0.85vw, 1.875rem);
  --t-statement: clamp(1.5rem, 1rem + 2.1vw, 2.75rem);
  --t-display: clamp(2.25rem, 0.75rem + 6.4vw, 6rem);
  --t-hero: clamp(2.5rem, 0.9rem + 7.4vw, 7rem);

  --track-wide: 0.16em;
  --track-mid: 0.08em;

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --gap: clamp(0.75rem, 1.5vw, 1.5rem);
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: clamp(2.25rem, 4vw, 3.5rem);
  --s-5: clamp(3.5rem, 7vw, 6rem);
  --s-6: clamp(5rem, 10vw, 9.5rem);
  --max: 1800px;
  --measure: 62ch;
  --header-h: 5.25rem;
  /* Um so viel wird der Kopfbereich nach dem ersten Scrollen flacher (5.25rem → 4rem). */
  --header-shrink: 1.25rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 400ms;
  --dur-slow: 800ms;
  --dur-fade: 1100ms;
  --dur-hero-fade: 1500ms;   /* Überblendung der Bildfolge */
  --dur-hero-settle: 2200ms; /* Einsinken des neuen Bildes, etwas länger als die Überblendung */
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose a, li a, address a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--dur) var(--ease);
}
p a:hover, .prose a:hover, li a:hover, address a:hover { text-decoration-color: var(--ink); }
/* Elemente mit eigener Auszeichnung (Haarlinie, Unterstrich-Animation) ohne Standardunterstreichung. */
.link-arrow, .link-back, .filter__link, .site-nav__list a, .brand,
.card__link, .contact__big, .project__cats a, .project-nav__item, .site-footer__links a { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--paper); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  padding: 0.65rem 1rem; background: var(--ink); color: var(--paper);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-mid);
}
.skip-link:focus { top: 0.5rem; }

/* Kleines Auszeichnungsmuster: versal, weit laufend, zurückgenommen. */
.site-nav__list a,
.link-arrow, .link-back, .filter__link,
.section-head__title, .section-title,
.hero__tagline, .card__meta, .project__cats, .project__meta dt,
.project-nav__label, .film__meta, .vita__subtitle,
.site-footer__links a, .button, .lightbox__counter {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- Kopfbereich ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--gutter);
  background: var(--paper);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  transition: min-height var(--dur) var(--ease);
}
.is-scrolled .site-header { box-shadow: 0 1px 0 var(--line); }
.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - var(--header-shrink)); }
.brand { display: block; line-height: 0; }
.brand__logo {
  width: clamp(7.5rem, 8vw + 4rem, 11rem);
  height: auto;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.is-scrolled .brand__logo { width: clamp(6.5rem, 6vw + 3.5rem, 9rem); }
.brand:hover .brand__logo { opacity: 0.6; }
.site-nav__list { display: flex; gap: clamp(1.1rem, 2.4vw, 2.5rem); }
.site-nav__list a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.site-nav__list a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0.25rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--ink); }
.site-nav__list a[aria-current="page"]::after, .site-nav__list a:hover::after { transform: scaleX(1); }
@media (max-width: 620px) {
  :root { --header-h: 6.9rem; --header-shrink: 0rem; }
  .site-header__inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.7rem; padding: 0.9rem 0; }
  .is-scrolled .site-header__inner { min-height: var(--header-h); }
  .site-nav__list { gap: 1.15rem; letter-spacing: 0.1em; }
  .site-nav__list a { padding: 0.35rem 0; }
}

/* ---------- Allgemeine Bausteine ---------- */
/* Der Kopfbereich steht im Seitenfluss. Wird er flacher, rückt der Inhalt nicht nach: der Hauptbereich nimmt
   den frei werdenden Platz im selben Takt auf, damit beim Anscrollen nichts springt (gleich wie auf der
   Architekturseite, architektur.css). */
.site-main { display: block; transition: padding-top var(--dur) var(--ease); }
.is-scrolled .site-main { padding-top: var(--header-shrink); }
.site-main:focus { outline: none; }
.page-head { padding: var(--s-5) var(--gutter) var(--s-5); max-width: var(--max); margin: 0 auto; }
.page-head__title {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.page-head__note { color: var(--ink-2); max-width: 46ch; margin: var(--s-3) 0 0; font-size: var(--t-lead); line-height: 1.45; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding-bottom: var(--s-4); }
.section-head__title, .section-title { color: var(--ink-3); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  color: var(--ink);
}
.link-arrow::after {
  content: '';
  width: 1.6em; height: 1px; background: currentColor; flex: none;
  transition: width var(--dur) var(--ease);
}
.link-arrow:hover::after { width: 2.6em; }
.link-arrow + .link-arrow { margin-left: var(--s-3); }
.link-back { display: inline-flex; align-items: center; gap: 0.75em; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.link-back::before {
  content: '';
  width: 1.6em; height: 1px; background: currentColor; flex: none;
  transition: width var(--dur) var(--ease);
}
.link-back:hover { color: var(--ink); }
.link-back:hover::before { width: 2.6em; }
.empty { padding: 0 var(--gutter) var(--s-6); color: var(--ink-3); max-width: var(--max); margin: 0 auto; }
.notice { padding: 1rem 1.15rem; border: 1px solid var(--line); font-size: var(--t-small); margin: 0 0 var(--s-3); background: var(--paper-2); }
.notice p { margin: 0; }
.notice--ok { border-color: #b6c0b1; background: #f0f2ed; }
.notice--error { border-color: #c9aaa3; background: #f6efec; }
.button {
  display: inline-block;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button:hover { background: var(--ink); color: var(--paper); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.02em; margin: var(--s-4) 0 var(--s-1); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 var(--s-2); color: var(--ink-2); }
.prose ul { padding-left: 1.1em; list-style: none; }
.prose li { position: relative; margin-bottom: 0.3rem; }
.prose li::before { content: ''; position: absolute; left: -1.1em; top: 0.72em; width: 0.5em; height: 1px; background: var(--ink-3); }

/* Platzhalter, wenn eine Bilddatei fehlt */
.img-missing, .card__empty, .film__poster-empty { background: var(--paper-2); width: 100%; aspect-ratio: 3 / 2; }

/* ---------- Einblenden beim Scrollen (nur mit JS, respektiert reduzierte Bewegung) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Startseite: Hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; }
.hero--media {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); }
.hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__link, .hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; }
/* Bildfolge – derselbe Regelblock wie auf der Architekturseite (architektur/assets/css/architektur.css,
   „Startseite: Kopfbild“). Beide Seiten teilen sich das Skript (site.js); Änderungen hier bitte dort
   nachziehen und umgekehrt.
   Überblenden statt Schieben, linear: beide Folien ändern ihre Deckkraft in gleichmäßigen Schritten.
   Ein- und ausgehende Folie liegen auf eigenen Compositor-Ebenen. */
.js .hero__slide { transition: opacity var(--dur-hero-fade) linear; }
.js .hero__slide.is-active, .js .hero__slide.is-leaving { will-change: opacity; }
@media (prefers-reduced-motion: no-preference) {
  /* Bewegung nur während der Überblendung: das neue Bild sinkt aus leichter Vergrößerung weich in seine
     Ruhelage und steht danach vollkommen still. Eine über Sekunden kriechende Vergrößerung (Bruchteile
     eines Pixels pro Frame) erzeugt beim Abtasten der Pixel sichtbare Stufen – deshalb keine Dauerbewegung. */
  .js .hero__media[data-hero] .hero__slide img { transform: scale(1.03); backface-visibility: hidden; }
  .js .hero__media[data-hero] .hero__slide.is-active img,
  .js .hero__media[data-hero] .hero__slide.is-leaving img { will-change: transform; }
  .js .hero__media[data-hero] .hero__slide.is-active img { transition: transform var(--dur-hero-settle) cubic-bezier(0.16, 0.6, 0.2, 1); }
  /* .is-running setzt das Skript nach dem ersten gezeichneten Bild – so sinkt auch das erste Bild weich ein. */
  .js .hero__media[data-hero].is-running .hero__slide.is-active img { transform: scale(1); }
  /* Ausgehende Folie bleibt stehen (bzw. beendet ein noch laufendes Einsinken während des Ausblendens). */
  .js .hero__media[data-hero] .hero__slide.is-leaving img { transform: scale(1); transition: transform var(--dur-hero-fade) ease-out; }
}
.hero--media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.42) 22%, rgba(8, 8, 8, 0.1) 48%, rgba(8, 8, 8, 0) 68%);
  pointer-events: none;
}
.hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.hero--media .hero__text { pointer-events: none; }
.hero--media .hero__text a, .hero--media .hero__text button { pointer-events: auto; }
.hero__title {
  font-size: var(--t-hero);
  font-weight: 250;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__tagline { margin: 0; color: inherit; opacity: 0.72; }
.hero__intro {
  margin: var(--s-1) 0 0;
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 44ch;
  opacity: 0.88;
}
/* Eine Zeile unten: Verweis und Bildnachweis links, Bedienung der Bildfolge rechts. */
.hero__foot {
  width: 100%;
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-4);
}
.hero__cta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.hero__cta .link-arrow { color: inherit; }
/* Alle Bildnachweise liegen übereinander, nur der aktuelle ist sichtbar. */
.hero__credits { display: grid; }
.hero__credits > * { grid-area: 1 / 1; }
.hero__credit { font-size: var(--t-micro); letter-spacing: var(--track-mid); opacity: 0; transition: opacity var(--dur) var(--ease); }
.hero__credit.is-active { opacity: 0.6; }
.hero__credit a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: currentColor; }

/* Bedienung der Bildfolge: dünne Striche, kein Kasten, keine Pfeilflächen. */
.hero__controls { display: none; }
.js .hero__controls { display: flex; align-items: center; gap: var(--s-2); color: var(--on-dark); }
.hero__toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  margin: 0 0 0 -0.6rem;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.hero__toggle:hover, .hero__toggle:focus-visible { opacity: 1; }
.hero__icon { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.hero__icon--play, .hero__toggle.is-paused .hero__icon--pause { display: none; }
.hero__toggle.is-paused .hero__icon--play { display: block; }
/* Umbruch, damit auch viele Bilder auf schmalen Geräten nicht aus dem Bild laufen. */
.hero__dots { display: flex; flex-wrap: wrap; gap: 0 0.5rem; list-style: none; margin: 0; padding: 0; max-width: 100%; }
.hero__dot {
  appearance: none;
  background: none;
  border: 0;
  display: block;
  width: 1.75rem;
  padding: 0.75rem 0;
  cursor: pointer;
  color: inherit;
}
.hero__dot::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity var(--dur) var(--ease);
}
.hero__dot.is-active::after, .hero__dot:hover::after { opacity: 1; }
/* Ohne Titelbild: dunkle Typografie auf Papierfläche. */
.hero:not(.hero--media) .hero__text { padding-top: var(--s-4); padding-bottom: var(--s-6); }

/* Scroll-Hinweis (Einstellung): mittig an der Unterkante, dünne Linie mit wanderndem Punkt.
   Erscheint verzögert, verschwindet sobald gescrollt wurde (html.is-scrolled aus site.js). */
.hero--hint .hero__text { padding-bottom: calc(var(--s-4) + 4.25rem); }
.hero__scroll {
  position: absolute; left: 50%; bottom: 0.9rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem;
  transform: translateX(-50%);
  color: var(--on-dark); text-decoration: none;
  opacity: 0;
  animation: hero-hint-in 900ms var(--ease) 1200ms forwards;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.hero__scroll-label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-mid); opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.hero__scroll:hover .hero__scroll-label, .hero__scroll:focus-visible .hero__scroll-label { opacity: 1; }
.hero__scroll-line { position: relative; display: block; width: 1px; height: 2.75rem; background: rgba(245, 243, 239, 0.3); overflow: hidden; }
.hero__scroll-line i { position: absolute; left: 0; top: 0; width: 1px; height: 1rem; background: currentColor; animation: hero-hint-run 2.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes hero-hint-in { to { opacity: 1; } }
@keyframes hero-hint-run { 0% { transform: translateY(-1rem); } 55%, 100% { transform: translateY(2.75rem); } }
html.is-scrolled .hero__scroll { opacity: 0; visibility: hidden; animation: none; }
.hero__anchor { scroll-margin-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { opacity: 1; animation: none; }
  .hero__scroll-line i { animation: none; transform: translateY(1.75rem); }
}
@media (max-width: 700px) {
  .hero--media { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
  .hero__intro { font-size: var(--t-body); max-width: 34ch; }
}
@media (max-width: 860px), (pointer: coarse) {
  .hero__dot { padding: 1.35rem 0; }
  .hero__toggle { padding: 0.95rem; margin-left: -0.95rem; }
}

/* ---------- Projektverweis (Titelbild, Titel, Kategorie) ---------- */
.card { position: relative; }
.card__link { display: block; }
.card__media { position: relative; overflow: hidden; background: var(--paper-2); }
.card--landscape .card__media { aspect-ratio: 3 / 2; }
.card--portrait .card__media { aspect-ratio: 4 / 5; }
.card__media picture, .card__media img { width: 100%; height: 100%; }
.card__media img { object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
@media (hover: hover) { .card__link:hover .card__media img { transform: scale(1.015); } }
.card__text {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.2rem var(--s-2);
  padding: 1rem 0 0;
}
.card__title { font-size: var(--t-small); font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.card__meta { margin: 0; color: var(--ink-3); }
.card__link:focus-visible { outline-offset: 6px; }

/* ---------- Startseite: ausgewählte Projekte ---------- */
/* Editorialer Rhythmus: volle Breite – kleiner rechts – zwei nebeneinander – volle Breite. */
.featured { padding: var(--s-6) var(--gutter); max-width: var(--max); margin: 0 auto; }
.featured__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); align-items: start; }
.featured__item { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .featured__item--a { grid-column: 1 / -1; }
  .featured__item--a:has(.card--portrait) { grid-column: 3 / span 8; }
  .featured__item--b { grid-column: 8 / span 5; }
  .featured__item--b:has(.card--portrait) { grid-column: 9 / span 4; }
  .featured__item--c { grid-column: 1 / span 6; }
  .featured__item--d { grid-column: 7 / span 6; margin-top: clamp(2.5rem, 7vw, 7rem); }
  .featured__item--e { grid-column: 1 / -1; }
  .featured__item--e:has(.card--portrait) { grid-column: 4 / span 7; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .featured__item--b { grid-column: 4 / span 9; }
  .featured__item--c { grid-column: 1 / span 9; }
  .featured__item--d { grid-column: 3 / span 10; }
}
/* Kompakte Übersicht (Einstellung): gleich große 3:2-Kacheln in drei Spalten – ein ruhiges Verzeichnis,
   das sich bewusst von den großen Fotografien der Bildauswahl darüber absetzt. */
.featured__grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-4); }
.featured__item--compact { grid-column: auto; }
.featured--compact .card__media { aspect-ratio: 3 / 2; }
.featured--compact .card__text { padding-top: 0.75rem; }
.featured--compact .card__title { font-size: var(--t-small); font-weight: 400; }
.featured--compact .card__meta { font-size: 0.78rem; }
.selection + .featured--compact { padding-top: var(--s-5); border-top: 1px solid var(--line); margin-top: var(--s-3); }
@media (max-width: 999px) { .featured__grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Auch auf dem Telefon zweispaltig, sonst wäre die Übersicht von der großen Variante nicht zu unterscheiden. */
@media (max-width: 479px) {
  .featured__grid--compact { row-gap: var(--s-3); }
  .featured--compact .card__text { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding-top: 0.5rem; }
  .featured--compact .card__meta { font-size: 0.7rem; }
}

/* ---------- Bildauswahl: Startseite und Seite /auswahl ---------- */
/* Direkt unter dem Kopfbereich: die ersten Bilder der Auswahl im editorialen Rhythmus der Galerien. */
.selection { padding: var(--s-6) var(--gutter) var(--s-3); max-width: var(--max); margin: 0 auto; }
.selection__grid .ed:last-child { margin-bottom: 0; }
.selection + .featured { padding-top: var(--s-5); }
.selection-page .page-head__back { margin: 0 0 var(--s-4); }

/* ---------- Startseite: Kurzvorstellung ---------- */
.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-4) var(--s-5);
  align-items: center;
  padding: 0 var(--gutter) var(--s-6);
  max-width: var(--max);
  margin: 0 auto;
}
.about-teaser__media { max-width: 34rem; }
.about-teaser__text .section-title { display: block; margin-bottom: var(--s-3); }
.about-teaser__text p {
  margin: 0 0 var(--s-2);
  max-width: 40ch;
  font-family: var(--font-serif);
  font-size: var(--t-statement);
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.about-teaser__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4) !important; }
.about-teaser__links .link-arrow + .link-arrow { margin-left: 0; }
@media (max-width: 860px) {
  .about-teaser { grid-template-columns: 1fr; }
  /* Mobil laufen Bilder nahezu über die volle Breite. */
  .about-teaser__media { max-width: 100%; }
  .about-teaser__text p { max-width: 30ch; }
}

/* ---------- Fotografie: Kategoriefilter ---------- */
.filter { margin-top: var(--s-4); }
.filter__list { display: flex; flex-wrap: wrap; gap: 0 clamp(1.1rem, 2.2vw, 2.25rem); }
.filter__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.filter__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0.7rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.filter__link:hover { color: var(--ink); }
.filter__link[aria-current="true"] { color: var(--ink); }
.filter__link[aria-current="true"]::after, .filter__link:hover::after { transform: scaleX(1); }
.filter.is-loading { opacity: 0.5; }

/* ---------- Projektübersicht & Galerien ---------- */
.portfolio__grid, .series { padding: 0 var(--gutter) var(--s-6); max-width: var(--max); margin: 0 auto; }
.portfolio__grid.is-swapping { opacity: 0.3; transition: opacity 200ms var(--ease); }

/* Reihen gleicher Höhe (Galerie-Raster) */
.row { display: flex; gap: var(--gap); margin-bottom: var(--s-4); align-items: flex-start; }
.row__item { flex: var(--flex) 1 0; min-width: 0; }
.row--last .row__item { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) * var(--flex) / var(--row-ratio)); }
@media (max-width: 700px) {
  .row { flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-3); }
  .row__item, .row--last .row__item { flex: none; width: 100%; }
}

/* Editoriale Blöcke – gemeinsam genutzt von Projektübersicht und Galerie */
.ed { margin-bottom: var(--s-5); }
.ed--wide { max-width: min(100%, 1560px); margin-left: auto; margin-right: auto; }
.ed--pair, .ed--pair-landscape { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.ed--single-portrait { max-width: 54%; }
.ed--single-portrait:nth-child(even) { margin-left: auto; }
.ed--single-portrait:nth-child(odd) { margin-left: 8%; }
.ed--inset { max-width: 70%; }
.ed--inset:nth-child(odd) { margin-left: auto; }
.ed--inset:nth-child(even) { margin-left: 6%; }
@media (max-width: 700px) {
  .ed { margin-bottom: var(--s-4); }
  .ed--pair, .ed--pair-landscape { grid-template-columns: 1fr; gap: var(--s-3); }
  .ed--single-portrait, .ed--single-portrait:nth-child(odd), .ed--single-portrait:nth-child(even),
  .ed--inset, .ed--inset:nth-child(odd), .ed--inset:nth-child(even) { max-width: 100%; margin-left: 0; margin-right: 0; }
}
/* In der Projektübersicht sind die Blöcke etwas ruhiger gesetzt. */
.portfolio__grid .ed { margin-bottom: var(--s-5); }
.portfolio__grid .ed--single-portrait { max-width: 46%; }
.portfolio__grid .ed--inset { max-width: 66%; }
@media (max-width: 700px) {
  .portfolio__grid .ed { margin-bottom: var(--s-5); }
  .portfolio__grid .ed--single-portrait, .portfolio__grid .ed--inset { max-width: 100%; }
}

/* ---------- Projektseite ---------- */
.preview-banner { background: var(--ink); color: var(--paper); padding: 0.7rem var(--gutter); font-size: var(--t-small); }
.preview-banner a { text-decoration: underline; text-underline-offset: 0.2em; }
.project__head { padding: var(--s-4) var(--gutter) var(--s-5); max-width: var(--max); margin: 0 auto; }
.project__back { margin: 0 0 var(--s-4); }
.project__title { font-size: var(--t-mid); font-weight: 400; letter-spacing: -0.015em; }
.project__cats { margin: 0.75rem 0 0; color: var(--ink-3); }
.project__cats a { transition: color var(--dur) var(--ease); }
.project__cats a:hover { color: var(--ink); }
.project__info {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-4);
  max-width: 1180px;
}
.project__desc p { margin: 0 0 var(--s-2); color: var(--ink-2); max-width: var(--measure); }
.project__meta { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.project__meta div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-2); }
.project__meta dt { color: var(--ink-3); padding-top: 0.15rem; }
.project__meta dd { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 800px) { .project__info { grid-template-columns: 1fr; } }

.figure { margin: 0; }
.figure__link { display: block; position: relative; background: var(--paper-2); overflow: hidden; }
.figure__link img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease); }
@media (hover: hover) { .figure__link:hover img { transform: scale(1.015); } }
.figure__link:focus-visible { outline-offset: 4px; }
.figure__caption { font-size: var(--t-micro); letter-spacing: var(--track-mid); color: var(--ink-3); padding: 0.7rem 0 0; }

.series--column .series__item { max-width: min(100%, 1560px); margin: 0 auto var(--s-5); }
.series--column .series__item--portrait { max-width: 54%; }
@media (max-width: 900px) {
  .series--column .series__item { margin-bottom: var(--s-4); }
  .series--column .series__item--portrait { max-width: 100%; }
}

.project-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--gap);
  padding: var(--s-5) var(--gutter) var(--s-6);
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.project-nav__item { display: flex; flex-direction: column; gap: 0.5rem; }
.project-nav__item--next { text-align: right; align-items: flex-end; }
.project-nav__label { color: var(--ink-3); }
.project-nav__title { font-size: var(--t-mid); font-weight: 300; letter-spacing: -0.015em; }
.project-nav__media { display: block; width: min(100%, 440px); aspect-ratio: 3 / 2; overflow: hidden; margin-top: var(--s-2); background: var(--paper-2); }
.project-nav__media picture, .project-nav__media img { width: 100%; height: 100%; }
.project-nav__media img { object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
@media (hover: hover) { .project-nav__item:hover .project-nav__media img { transform: scale(1.015); } }
.project-nav__all { grid-column: 1 / -1; justify-self: center; margin-top: var(--s-2); }
@media (max-width: 700px) { .project-nav__media { display: none; } }

/* ---------- Film ---------- */
.films__list { padding: 0 var(--gutter) var(--s-6); max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-6); }
.film__player { position: relative; aspect-ratio: 16 / 9; background: var(--dark); overflow: hidden; }
.film__poster, .film__poster picture, .film__poster img { width: 100%; height: 100%; }
.film__poster img { object-fit: cover; }
.film__poster-empty { height: 100%; background: #262523; aspect-ratio: auto; }
.film__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  color: #fff; background: rgba(8, 8, 8, 0.12);
  transition: background var(--dur) var(--ease);
}
.film__play:hover { background: rgba(8, 8, 8, 0.28); }
.film__play:focus-visible { outline-color: #fff; outline-offset: -8px; }
.film__play-icon { width: 3.75rem; height: 3.75rem; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 50%; position: relative; transition: border-color var(--dur) var(--ease); }
.film__play-icon::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-38%, -50%);
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #fff;
}
.film__play-label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 500; }
.film__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__text { padding-top: var(--s-3); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-1) var(--s-5); }
.film__title { font-size: var(--t-mid); font-weight: 400; letter-spacing: -0.015em; }
.film__meta { margin: 0.6rem 0 0; color: var(--ink-3); grid-column: 1; }
.film__desc { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-2); }
.film__desc p { margin: 0 0 var(--s-2); max-width: var(--measure); }
@media (max-width: 800px) { .film__text { grid-template-columns: 1fr; } .film__desc { grid-column: 1; grid-row: auto; margin-top: var(--s-2); } }

/* ---------- Vita ---------- */
.vita__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-4) var(--s-5);
  padding: 0 var(--gutter) var(--s-6);
  max-width: var(--max); margin: 0 auto;
  align-items: start;
}
.vita__text p { margin: 0 0 var(--s-2); max-width: var(--measure); color: var(--ink-2); }
/* Erster Absatz des bestehenden Vita-Textes als großes typografisches Statement. */
.vita__text > p:first-child {
  font-family: var(--font-serif);
  font-size: var(--t-statement);
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: var(--s-4);
}
.vita__subtitle { color: var(--ink-3); margin: var(--s-5) 0 var(--s-2); }
.vita__services { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--ink-2); font-size: var(--t-small); }
.vita__contact { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5) !important; }
.vita__contact .link-arrow + .link-arrow { margin-left: 0; }
@media (max-width: 860px) {
  .vita__body { grid-template-columns: 1fr; }
  .vita__portrait { max-width: 100%; }
}
.quotes { padding: var(--s-5) var(--gutter) var(--s-6); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); }
.quotes .section-title { display: block; color: var(--ink-3); }
.quotes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-5) var(--s-5); margin-top: var(--s-4); }
.quote { margin: 0; }
.quote p { margin: 0 0 var(--s-2); font-family: var(--font-serif); font-size: var(--t-lead); line-height: 1.34; color: var(--ink); }
.quote p::before { content: '„'; }
.quote p::after { content: '“'; }
.quote__author { font-size: var(--t-micro); letter-spacing: var(--track-mid); color: var(--ink-3); }

/* ---------- Kontakt ---------- */
.contact__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-6);
  padding: 0 var(--gutter) var(--s-6);
  max-width: var(--max); margin: 0 auto;
}
/* Zwei Spalten nur, wenn das Kontaktformular aktiv ist. */
@media (min-width: 861px) {
  .contact__body:has(.contact__form) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.contact__name { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 500; color: var(--ink-3); margin-bottom: var(--s-3); }
.contact__line { margin: 0 0 var(--s-2); }
.contact__big {
  display: inline-block;
  font-size: var(--t-mid); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 0.1em;
  transition: border-color var(--dur) var(--ease);
  word-break: break-word;
}
.contact__big:hover { border-color: var(--ink); }
/* E-Mail (erste Zeile) prominent, Telefon zurückhaltend. */
.contact__line:first-of-type .contact__big {
  font-size: clamp(1.6rem, 0.9rem + 3.1vw, 3.5rem);
  font-weight: 250;
  letter-spacing: -0.025em;
}
.contact__address { font-style: normal; color: var(--ink-2); margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.7; }
.contact__small { font-size: var(--t-micro); letter-spacing: var(--track-mid); color: var(--ink-3); margin: var(--s-1) 0 0; }
.contact__small a { text-decoration: underline; text-underline-offset: 0.2em; }
.contact__form-title { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 500; color: var(--ink-3); margin-bottom: var(--s-3); }

.form__field { margin-bottom: var(--s-3); }
.form__field label { display: block; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 500; color: var(--ink-3); margin-bottom: 0.5rem; }
.form__field input, .form__field textarea {
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  font: inherit;
  color: var(--ink);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.form__field textarea { resize: vertical; }
.form__field input:hover, .form__field textarea:hover { border-bottom-color: var(--ink-3); }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); border-bottom-width: 1px; box-shadow: 0 1px 0 var(--ink); }
.form__field [aria-invalid="true"] { border-bottom-color: #a4574c; }
.form__error { margin: 0.4rem 0 0; font-size: var(--t-micro); letter-spacing: var(--track-mid); color: #8d443a; }
.form__hint { font-size: var(--t-micro); letter-spacing: var(--track-mid); line-height: 1.7; color: var(--ink-3); margin: var(--s-3) 0; }
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Rechtliches & Fehler ---------- */
.legal__body { padding: 0 var(--gutter) var(--s-6); max-width: var(--max); margin: 0 auto; }
/* Dokumente zum Herunterladen: Zeilen mit Haarlinien, kein Kasten. */
.prose .doc-list { padding: 0; margin: var(--s-4) 0 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.prose .doc-list__item { margin: 0; border-bottom: 1px solid var(--line); }
.prose .doc-list__item::before { display: none; }
.prose .doc-list__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0; color: var(--ink); text-decoration: none;
}
.doc-list__title { position: relative; }
.doc-list__title::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.15em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.doc-list__link:hover .doc-list__title::after, .doc-list__link:focus-visible .doc-list__title::after { transform: scaleX(1); }
.doc-list__meta { flex: none; font-size: var(--t-micro); letter-spacing: var(--track-mid); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 480px) {
  .prose .doc-list__link { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}
.error-page { padding: 0 var(--gutter) var(--s-6); max-width: var(--max); margin: 0 auto; }
.error-page .page-head { padding-left: 0; padding-right: 0; }
.error-page .page-head__note { font-family: var(--font-sans); font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-2); }
.error-page__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.error-page__links .link-arrow + .link-arrow { margin-left: 0; }

/* ---------- Fußbereich ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s-5) var(--gutter) var(--s-4); color: var(--ink-2); }
.site-footer__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
}
.site-footer__name { margin: 0; color: var(--ink); font-size: var(--t-small); line-height: 1.7; }
.site-footer__name span { color: var(--ink-3); }
.site-footer p { margin: 0 0 0.4rem; font-size: var(--t-small); }
.site-footer__col > p a { text-decoration: none; }
.site-footer__links li { margin-bottom: 0.6rem; }
.site-footer__links a { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--ink); }
.site-footer__copy { max-width: var(--max); margin: var(--s-5) auto 0; font-size: var(--t-micro); letter-spacing: var(--track-mid); color: var(--ink-3); }
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }

/* ---------- Touch: größere Klickflächen, unveränderte Gestaltung ---------- */
@media (max-width: 860px), (pointer: coarse) {
  .site-nav__list a { padding: 0.8rem 0; }
  .site-nav__list a::after { bottom: 0.6rem; }
  .link-arrow, .link-back { padding: 0.7rem 0; }
  .site-footer__links a, .site-footer__col p a, .hero__credit a, .project__cats a { display: inline-block; padding: 0.5rem 0; }
  .site-footer__links li { margin-bottom: 0; }
  .contact__line .contact__big { padding-top: 0.35rem; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 13, 12, 0.98);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 280ms var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 3vw, 3.5rem); }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 280ms var(--ease); user-select: none; -webkit-user-drag: none; }
.lightbox__img.is-loaded { opacity: 1; }
.lightbox__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; color: var(--on-dark); opacity: 0.65; z-index: 2;
  transition: opacity var(--dur) var(--ease);
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { opacity: 1; }
.lightbox__btn:focus-visible { outline-color: var(--on-dark); }
.lightbox__btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-2);
  padding: 1rem clamp(1rem, 3vw, 2rem);
  font-size: var(--t-small); color: rgba(245, 243, 239, 0.65);
  pointer-events: none;
}
.lightbox__caption { margin: 0; max-width: 60ch; text-align: right; }
.lightbox__counter { font-variant-numeric: tabular-nums; color: rgba(245, 243, 239, 0.65); }
.lightbox__loading {
  position: absolute; left: 50%; top: 50%; width: 1.75rem; height: 1.75rem; margin: -0.875rem;
  border: 1px solid rgba(245, 243, 239, 0.2); border-top-color: rgba(245, 243, 239, 0.85);
  border-radius: 50%; animation: spin 900ms linear infinite; opacity: 0; transition: opacity 200ms;
}
.lightbox.is-loading .lightbox__loading { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
body.lightbox-open { overflow: hidden; }
@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 3.25rem; transform: none; }
  .lightbox__bar { padding-bottom: 0.6rem; flex-direction: column; align-items: center; text-align: center; }
  .lightbox__caption { text-align: center; }
}

/* ==========================================================================
   Spielereien (Easter Eggs) – einzeln im Adminbereich abschaltbar.
   Alle sind rein dekorativ, blockieren nichts (pointer-events: none auf den
   Überlagerungen) und respektieren „Bewegung reduzieren“ über die globale
   Regel oben (Animationen auf 0,01 ms).
   ========================================================================== */

/* ---------- Dunkelkammer: rotes Schutzlicht, Abzüge entwickeln sich aus weißem Papier ---------- */
html.is-darkroom {
  --paper: #140606;
  --paper-2: #1d0908;
  --ink: #ff8471;
  --ink-2: #dc6b59;
  --ink-3: #9e4d40;
  --line: #3b1612;
  --line-2: #52201a;
  --dark: #0a0202;
  --on-dark: #ff9684;
  --focus: #ff8471;
  color-scheme: dark;
  background: var(--paper);
}
html.is-darkroom body { background: var(--paper); color: var(--ink); }
html.is-darkroom ::selection { background: #ff8471; color: #140606; }
/* Jedes Foto ein Abzug unter Rotlicht: monochrom, rötlich, etwas abgedunkelt. */
html.is-darkroom img:not(.brand__logo) {
  filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(2.4) contrast(1.08) brightness(0.72);
}
/* Entwicklung: aus Papierweiß über ein flaues Grau zum fertigen Abzug; je Bild zeitlich leicht versetzt (--develop-delay aus site.js). */
html.is-darkroom.is-developing img:not(.brand__logo) {
  animation: egg-develop 3400ms cubic-bezier(0.3, 0, 0.25, 1) both;
  animation-delay: var(--develop-delay, 0ms);
}
@keyframes egg-develop {
  0%   { filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(0.4) contrast(0) brightness(3.4); }
  30%  { filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(1.1) contrast(0.3) brightness(1.9); }
  100% { filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(2.4) contrast(1.08) brightness(0.72); }
}
html.is-darkroom .brand__logo { filter: invert(0.3) sepia(1) saturate(3) hue-rotate(-40deg) brightness(1.5); }
html.is-darkroom .hero--media::after { opacity: 0.35; }
html.is-darkroom .lightbox { background: rgba(14, 3, 3, 0.98); }
/* Schutzlicht von oben und Filmkorn über allem; beide ohne Zeigerinteraktion. */
html.is-darkroom body::before {
  content: '';
  position: fixed; inset: 0; z-index: 210; pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255, 70, 40, 0.28), rgba(255, 70, 40, 0) 70%);
}
html.is-darkroom body::after {
  content: '';
  position: fixed; inset: -40%; z-index: 211; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.14;
  mix-blend-mode: screen;
  animation: egg-grain 700ms steps(5) infinite;
}
@keyframes egg-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
/* Gedrückthalten des Logos: das Logo färbt sich während der 1,5 s langsam rot – ein Hinweis, dass etwas passiert. */
.brand { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.brand.is-pressing .brand__logo { filter: invert(0.3) sepia(1) saturate(3) hue-rotate(-40deg) brightness(1.5); transition: filter 1500ms linear, width var(--dur) var(--ease), opacity var(--dur) var(--ease); }
html.is-darkroom .brand.is-pressing .brand__logo { filter: invert(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1); }

/* Kleiner Hinweis unten in der Mitte (z. B. „Dunkelkammer – Esc beendet“). */
.egg-toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 220;
  margin: 0; padding: 0.7rem 1rem; border: 0; border-radius: 0;
  transform: translate(-50%, 0.5rem);
  font: inherit; font-size: var(--t-micro); letter-spacing: var(--track-mid); text-transform: uppercase; line-height: 1.4;
  color: var(--paper); background: var(--ink);
  opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.egg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.egg-toast:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.egg-toast[hidden] { display: none; }

/* ---------- Verschluss am Logo: eine sechsblättrige Blende schließt und öffnet sich über der Seite ---------- */
.shutter { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; display: none; }
.shutter.is-playing { display: block; }
.shutter__iris { position: absolute; inset: 0; }
/* Sechs Lamellen: je eine große schwarze Fläche, deren Innenkante im Abstand d zur Bildmitte liegt. Die Vereinigung
   aller sechs lässt ein Sechseck mit Inkreisradius d frei; d läuft auf 0 und wieder auf, dazu dreht die ganze Blende. */
.shutter__iris i {
  position: absolute; left: 50%; top: 50%;
  width: 300vmax; height: 150vmax; margin-left: -150vmax;
  background: #0b0908;
  transform-origin: 50% 0;
  transform: rotate(var(--a)) translateY(78vmax);
  will-change: transform;
}
.shutter__iris i:nth-child(1) { --a: 0deg; }
.shutter__iris i:nth-child(2) { --a: 60deg; }
.shutter__iris i:nth-child(3) { --a: 120deg; }
.shutter__iris i:nth-child(4) { --a: 180deg; }
.shutter__iris i:nth-child(5) { --a: 240deg; }
.shutter__iris i:nth-child(6) { --a: 300deg; }
.shutter.is-playing .shutter__iris { animation: egg-shutter-twist 440ms cubic-bezier(0.55, 0, 0.45, 1) both; }
.shutter.is-playing .shutter__iris i { animation: egg-shutter-blade 440ms cubic-bezier(0.55, 0, 0.45, 1) both; }
@keyframes egg-shutter-blade {
  0%        { transform: rotate(var(--a)) translateY(78vmax); }
  44%, 56%  { transform: rotate(var(--a)) translateY(0); }
  100%      { transform: rotate(var(--a)) translateY(78vmax); }
}
@keyframes egg-shutter-twist { from { transform: rotate(0deg); } to { transform: rotate(60deg); } }

/* ---------- Autofokus auf der 404-Seite: unscharfes Foto, Fokusrahmen folgt dem Zeiger, rastet grün ein ---------- */
.af {
  position: relative; display: block;
  margin: var(--s-5) 0 0;
  overflow: hidden; background: var(--paper-2);
  cursor: crosshair; touch-action: manipulation;
}
.af--landscape { aspect-ratio: 3 / 2; max-width: min(100%, 1100px); }
.af--portrait { aspect-ratio: 4 / 5; max-width: min(100%, 560px); }
.af__media, .af__media picture, .af__media img { display: block; width: 100%; height: 100%; }
.af__media img { object-fit: cover; transition: filter 520ms var(--ease), transform 520ms var(--ease); will-change: filter, transform; }
/* Nur mit JavaScript unscharf – ohne Skript gäbe es nichts, was scharf stellt. */
.js .af:not(.is-focused) .af__media img { filter: blur(14px) saturate(0.8); transform: scale(1.05); }
.js .af.is-hunting .af__media img { transition-duration: 240ms; }
.af__frame {
  position: absolute; left: 0; top: 0;
  width: 4.75rem; height: 4.75rem;
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease), transform 140ms linear;
}
.js .af.is-tracking .af__frame { opacity: 1; }
.af__frame i {
  position: absolute; width: 0.95rem; height: 0.95rem;
  border: 0 solid rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
  transition: border-color 160ms var(--ease);
}
.af__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.af__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.af__frame i:nth-child(3) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.af__frame i:nth-child(4) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.af.is-focused .af__frame i { border-color: #3ddc84; }
.af.is-focused .af__frame { animation: egg-af-lock 320ms var(--ease); }
@keyframes egg-af-lock {
  0%   { scale: 1.18; }
  60%  { scale: 0.96; }
  100% { scale: 1; }
}
.af__caption {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem;
  display: flex; justify-content: space-between; gap: var(--s-2);
  font-size: var(--t-micro); letter-spacing: var(--track-mid); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.af__status::before { content: ''; display: inline-block; width: 0.45rem; height: 0.45rem; margin: 0 0.5rem 0.05rem 0; border-radius: 50%; background: currentColor; opacity: 0.7; }
.js .af.is-hunting .af__status::before { animation: egg-af-blink 420ms steps(2) infinite; }
.af.is-focused .af__status { color: #3ddc84; text-shadow: none; }
@keyframes egg-af-blink { to { opacity: 0; } }
.af__title { text-align: right; }
.af:focus-visible { outline-offset: 6px; }

/* ---------- Lichteinfall am Seitenende: warmer Schein wie bei undicht gewordenem Filmmagazin ---------- */
.light-leak {
  position: fixed; left: -10vw; right: -10vw; bottom: -18vh; height: 68vh;
  z-index: 180; pointer-events: none; opacity: 0;
  background:
    radial-gradient(55% 75% at 18% 100%, rgba(255, 140, 40, 0.9), rgba(255, 100, 30, 0.45) 42%, rgba(255, 100, 30, 0) 72%),
    radial-gradient(45% 65% at 84% 100%, rgba(255, 206, 96, 0.8), rgba(255, 150, 60, 0) 66%),
    linear-gradient(to top, rgba(255, 96, 40, 0.5), rgba(255, 96, 40, 0));
  filter: blur(14px);
  will-change: opacity, transform;
}
.light-leak.is-on { animation: egg-leak 2600ms cubic-bezier(0.2, 0.6, 0.3, 1) both; }
@keyframes egg-leak {
  0%   { opacity: 0; transform: translateY(14%) scaleX(1.05); }
  22%  { opacity: 1; }
  58%  { opacity: 0.8; transform: translateY(0) scaleX(1); }
  100% { opacity: 0; transform: translateY(-6%) scaleX(1.1); }
}