/* ==========================================================================
   Lasting Value Imagery
   Konzept: „Der lange Moment“ – eine durchgehende Kamerafahrt,
   die Seite als Sucher. Warmes Schwarz, Knochenweiß, ein Akzent: Abendlicht.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License – siehe schriften/LIZENZ-*.txt) ---------- */
@font-face {
  font-family: "Cormorant"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("schriften/cormorant-variabel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("schriften/cormorant-variabel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("schriften/cormorant-variabel-kursiv-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("schriften/cormorant-variabel-kursiv-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schriften/inter-tight-variabel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schriften/inter-tight-variabel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/dm-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/dm-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Ersatzschriften mit angeglichener Breite: Bis die eigenen Schriften geladen sind, brechen die Texte genauso um wie
   danach. Sonst verrutscht die Seite, wenn eine Schrift eintrifft (gemessen auf dem Handy: Die beiden Knöpfe der
   Eröffnung standen in der schmaleren Ersatzschrift nebeneinander und sprangen dann untereinander).
   DM Mono ist je Zeichen 0,6 em breit, Consolas (Windows) 0,55 em; Menlo, Courier und die Festbreitenschrift von
   Android liegen bei 0,6 em und brauchen keinen Ausgleich. Arial läuft knapp 4 % breiter als Inter Tight. */
@font-face { font-family: "DM Mono Ersatz"; src: local("Consolas"); size-adjust: 109.13%; }
@font-face { font-family: "Inter Tight Ersatz"; src: local("Arial"); size-adjust: 96.4%; }

:root {
  --ink: #0a0908;
  --ink-2: #14110e;
  --bone: #ece6da;
  --bone-60: rgba(236, 230, 218, .66);
  --bone-30: rgba(236, 230, 218, .3);
  --line: rgba(236, 230, 218, .16);
  --amber: #e3a55c;
  --amber-lit: #f2bb72;       /* dieselbe Farbe im Sonnenlicht – nur im Titel der Eröffnung */
  --amber-line: rgba(227, 165, 92, .5);   /* dieselbe Farbe als feine Linie: Rand um ein Bild unter dem Mauszeiger */
  --rec: #e2493b;
  --error: #f3a79c;

  --serif: "Cormorant", "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", "Inter Tight Ersatz", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "DM Mono Ersatz", Menlo, ui-monospace, "SF Mono", Consolas, monospace;

  --label: 400 12px/1.4 var(--mono);
  --tracking: .13em;

  --pad: max(clamp(20px, 4.4vw, 76px), env(safe-area-inset-left), env(safe-area-inset-right));
  --ease: cubic-bezier(.19, 1, .22, 1);
}
/* Formen: Bedienelemente sind Pillen (Schaltflächen, Filter, Auswahlfelder), Bilder und Eingabefelder haben scharfe Ecken.
   Ebenen (z-index): 0 Film · 1 Inhalt · 40 Sucher · 45 Aufnahme-Schalter · 55 Menü · 60 Navigation ·
   300 Großansicht · 400 Mauszeiger · 500 Vorspann · 600 Sprunglink. Neue Ebenen hier einordnen, nicht frei vergeben. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--bone-30) var(--ink);
  /* fokussierte Elemente rutschen nicht unter Navigation oder Aufnahme-Schalter */
  scroll-padding: 96px 0 72px;
}
html.is-loading { overflow: hidden; }

body {
  margin: 0;
  color: var(--bone);
  font: 300 clamp(16px, 1.06vw, 18px)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--ink); }

a { color: inherit; }
a, button, label, input, textarea { touch-action: manipulation; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }          /* Fließtext: kein einzelnes Wort allein in der letzten Zeile */
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
main:focus, section:focus { outline: none; }    /* Sprungziele, keine Bedienelemente: der Fokus landet dort ohne Rahmen */
section[id], main[id] { scroll-margin-top: 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 600;
  padding: 14px 18px;
  background: var(--bone); color: var(--ink);
  font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- Film (WebGL) ---------- */
#film {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
}
/* Der Film erscheint, sobald seine Zeichenprogramme übersetzt sind (main.js setzt is-filmed); hinter dem Vorspann
   fällt das nicht auf, ohne Vorspann blendet sich die Szene sanft ein */
#film { opacity: 0; transition: opacity 1.2s var(--ease); }
.is-filmed #film { opacity: 1; }
.no-webgl #film { display: none; }
.no-webgl body {
  background:
    radial-gradient(60% 50% at 76% 48%, rgba(227, 165, 92, .5), rgba(227, 165, 92, 0) 70%),
    linear-gradient(to top, #0a0908 12%, #3a2622 46%, #1c2136 100%) fixed;
}

#smooth-wrapper { position: relative; z-index: 1; }

/* ---------- Typografie ---------- */
.label {
  font: var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--bone-60);
}
.display {
  font: 500 clamp(3rem, 7.6vw, 8.2rem)/1 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;     /* auch dort, wo die Zeile kein Überschriften-Element ist: gleich lange Zeilen statt eines Restworts */
}
.display--s { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
.display--l { font-size: clamp(3rem, 6.3vw, 7.4rem); }

.link {
  position: relative;
  display: inline-block;
  font: var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 0;
  transition: color .4s;
}
.link::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 1px; background: currentColor;
  transform-origin: left;
  transition: transform .7s var(--ease);
}
@media (hover: hover) {
  .link:hover { color: var(--amber); }
  .link:hover::before { transform: scaleX(.35); }
}

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 2em;
  border: 1px solid var(--bone-30);
  border-radius: 999px;
  font: var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
  transition: color .6s var(--ease), border-color .6s var(--ease), scale .2s var(--ease);
}
/* Druckpunkt: Schaltflächen geben beim Drücken kurz nach – mit der Maus wie mit dem Finger.
   Die magnetischen Knöpfe (.magnetic) bekommen ihn in main.js: Sobald GSAP sie verschiebt, verwaltet es auch scale. */
.btn:active, .filter:active, .chip:active span { scale: .97; }
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  background: var(--bone);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform .7s var(--ease);
  z-index: -1;
}
@media (hover: hover) {
  .btn:hover { color: var(--ink); border-color: var(--bone); }
  .btn:hover::before { transform: none; }
}
.btn--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--solid::before { background: var(--amber); }
@media (hover: hover) {
  .btn--solid:hover { border-color: var(--amber); }
}
.btn--small { min-height: 44px; padding: 0 1.5em; }

/* ---------- Vorspann ---------- */
.loader { position: fixed; inset: 0; z-index: 500; display: none; animation: loader-failsafe 0s 8s forwards; }
.js .loader { display: block; }
@keyframes loader-failsafe { to { visibility: hidden; } }
.loader__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); }
.loader__half--top { top: 0; transform-origin: top; }
.loader__half--bottom { bottom: 0; transform-origin: bottom; }
.loader__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.loader__label { font: var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--bone); }
.loader__label--dim { color: var(--bone-60); }
.loader .logo { width: clamp(112px, min(15vw, 26vh), 176px); height: auto; margin-bottom: 4px; }
.js .loader .logo { visibility: hidden; }   /* der Vorspann baut das Zeichen auf */

/* ---------- Logo (eingebettet, erbt die Textfarbe) ---------- */
.logo { display: block; flex: none; overflow: visible; }
.logo__ink { fill: currentColor; }
.logo__trail { stroke: currentColor; }      /* Sternbahnen im Vorspann: Linien, die sich ziehen */
.logo__sun { fill: var(--amber); }
.loader__count {
  font: 500 clamp(3.6rem, min(10vw, 17vh), 8.5rem)/.9 var(--serif);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  overflow: hidden;
}
.loader__count span { display: block; }

/* ---------- Sucher / HUD ---------- */
.hud {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  font: 400 11px/1 var(--mono);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--bone-60);
}
.hud::before, .hud::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; }
.hud::before { top: 0; height: 130px; background: linear-gradient(to bottom, rgba(10, 9, 8, .5), rgba(10, 9, 8, 0)); }
.hud::after { bottom: 0; height: 100px; background: linear-gradient(to top, rgba(10, 9, 8, .78), rgba(10, 9, 8, 0)); }
.hud__corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--bone-30); }
.hud__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hud__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.hud__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.hud__lens { position: absolute; right: var(--pad); bottom: calc(26px + env(safe-area-inset-bottom)); white-space: nowrap; }
.hud__progress { position: absolute; right: 18px; top: 50%; width: 1px; height: 140px; margin-top: -70px; background: var(--line); }
.hud__progress span { display: block; width: 100%; height: 100%; background: var(--bone); transform: scaleY(0); transform-origin: top; }

/* Aufnahme-Schalter: hält die durchlaufende Bewegung an */
.rec {
  position: fixed; z-index: 45;
  left: calc(var(--pad) - 12px); bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px;
  font: 400 11px/1 var(--mono);
  letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums;
  color: var(--bone-60);
  transition: color .3s;
}
@media (hover: hover) {
  .rec:hover { color: var(--bone); }
}
.rec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: rec 1.8s steps(1) infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 55% { opacity: .15; } }
.is-paused .rec__dot { animation: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--bone-60); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(20px + env(safe-area-inset-top)) var(--pad) 20px;
  transition: transform .8s var(--ease);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; font: 600 1.42rem/1 var(--serif); letter-spacing: 0; white-space: nowrap; }
.nav__logo .logo { width: 44px; height: 44px; }
.nav__logo .logo__sun { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
@media (hover: hover) {
  .nav__logo:hover .logo__sun { transform: scale(1.4); }
}
.nav__links { display: flex; gap: clamp(18px, 2.6vw, 44px); }
.nav__links a {
  position: relative;
  font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; text-decoration: none;
  padding: 14px 0;
  color: var(--bone-60);
  transition: color .4s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--bone);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .nav__links a:hover { color: var(--bone); }
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
/* Wo man gerade ist: der Punkt aus dem Zeichen */
.nav__links a::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%;
  background: var(--amber); transform: scale(0); transition: transform .6s var(--ease);
}
.nav__links a[aria-current] { color: var(--bone); }
.nav__links a[aria-current]::before { transform: none; }
.nav__toggle { display: none; min-height: 44px; font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; padding: 0 0 0 16px; transition: color .3s; }
@media (hover: hover) {
  .nav__toggle:hover { color: var(--amber); }
}
/* rechtes Ende der Navigation: Sprachwahl, Schaltfläche, Menü */
.nav__end { display: flex; flex: none; align-items: center; gap: clamp(8px, 1.6vw, 24px); }
/* Sprachwahl: Beide Sprachen stehen da – die gewählte hell, die andere gedämpft und als Link.
   Beide Kürzel sind gleich breit, der Schrägstrich sitzt auf der Grenze dazwischen: So steht er in beiden Fassungen
   genau mittig, gleich, welches der beiden Kürzel der Link ist. */
.nav__lang { display: flex; align-items: center; margin: 0 -10px; font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; }
.nav__lang > * {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 16px 0 calc(16px + var(--tracking));     /* links um die Sperrung mehr: Sie steht hinter dem letzten Buchstaben */
  text-decoration: none; white-space: nowrap;
}
.nav__lang > * + *::before { content: "/"; position: absolute; left: 0; transform: translateX(-50%); letter-spacing: 0; color: var(--bone-30); }
.nav__lang span { color: var(--bone); }
.nav__lang a { color: var(--bone-60); transition: color .4s; }
@media (hover: hover) {
  .nav__lang a:hover { color: var(--bone); }
}
/* Wo es eng wird, steht nur die andere Sprache da, als ein Feld: neben Zeichen, Menüpunkten und Schaltfläche
   ist erst auf breiten Bildschirmen Platz für beide. */
@media (max-width: 1240px) {
  .nav__lang { margin: 0; }
  .nav__lang > * { padding: 0 6px 0 calc(6px + var(--tracking)); }
  .nav__lang span, .nav__lang > * + *::before { display: none; }
}
/* Ist das Menü offen, steht rechts „Schließen“ – die Sprachwahl macht Platz, sie steht auch im Menü. */
@media (max-width: 1100px) {
  .nav.is-menu-open .nav__lang { display: none; }
}
/* sehr schmale Handys: Die Sprachwahl steht nur im Menü, damit der Name neben dem Zeichen bleiben kann;
   bei offenem Menü weicht auch der Name, damit „Schließen“ ganz im Bild steht. */
@media (max-width: 359px) {
  .nav__lang { display: none; }
  .nav.is-menu-open .nav__name { display: none; }
  .doc .nav__lang { display: flex; }      /* Textseiten haben kein Menü: Dort bleibt die Sprachwahl oben stehen */
}

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: safe center; gap: 6px;
  padding: calc(92px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--ink);       /* deckend – dahinter scheint kein Text durch */
  opacity: 0; visibility: hidden;
  overflow-y: auto;             /* sehr flache Bildschirme: lieber scrollen als abschneiden */
  overscroll-behavior: contain;
  transition: opacity .32s var(--ease), visibility 0s .32s;     /* Schließen geht schneller als Öffnen */
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
/* Schriftgröße richtet sich nach Breite und Höhe – sechs Zeilen passen auch im Querformat */
.menu a { position: relative; flex: none; align-self: flex-start; font: 500 clamp(1.9rem, min(13vw, 9.4vh), 5rem)/1.08 var(--serif); text-decoration: none; letter-spacing: -.015em; transition: color .4s; }
.menu a em { color: var(--amber); }
@media (hover: hover) {
  .menu a:hover { color: var(--amber); }
}
/* Sprachwahl im Menü: klein, wie eine Beschriftung – sie gehört nicht zu den Abschnitten der Seite */
.menu .menu__lang {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: clamp(14px, 3.4vh, 34px);
  font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--bone-60);
}
.menu .menu__lang::before { content: ""; width: 22px; height: 1px; margin-right: 14px; background: var(--bone-30); }
.menu a[aria-current]::after {
  content: ""; position: absolute; left: calc(100% + .22em); bottom: .2em; width: .16em; height: .16em; border-radius: 50%;
  background: var(--amber);
}

/* ---------- Cursor ---------- */
/* Der Mauszeiger ist ein kleiner Punkt; über Links wird er zum Ring, über den Bildern zur Scheibe mit „Ansehen“. */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .4s; }
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__label { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; }
.cursor__dot {
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid transparent;
  transform: scale(.085);
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
}
.cursor__label {
  display: grid; place-items: center;
  font: 400 10px/1 var(--mono); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .25s;
}
.cursor.is-link .cursor__dot { transform: scale(.48); background: transparent; border-color: var(--bone); }
.cursor.is-label .cursor__dot { transform: scale(1); }
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .12s; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .chip { cursor: none; }

/* ---------- Eröffnung ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 140px var(--pad) clamp(96px, 13vh, 150px);
}
/* Abdunklung hinter dem Text: von links ein leichter Schatten für den Titel (rechts bleibt die Sonne frei),
   unten links kräftiger für den Fließtext */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10, 9, 8, .34) 0%, rgba(10, 9, 8, .24) 42%, rgba(10, 9, 8, 0) 74%),
    radial-gradient(110% 85% at 0% 100%, rgba(10, 9, 8, .62), rgba(10, 9, 8, 0) 62%);
  pointer-events: none;
}
.hero__inner { position: relative; width: 100%; }
.hero__eyebrow { color: var(--bone); margin-bottom: clamp(18px, 3vh, 34px); max-width: 60ch; }
.hero__title {
  font: 500 clamp(3.5rem, 15.2vw, 15.5rem)/.86 var(--serif);
  letter-spacing: -.02em;
  margin-left: -.04em;
}
/* Die zweite Zeile trägt die Akzentfarbe – hier eine Spur heller als sonst, wie von der Sonne angestrahlt:
   Der Titel steht als einziger über einem hellen, warmen Bild; das gewohnte Abendlicht ginge darin unter. */
.hero__title em { font-style: normal; color: var(--amber-lit); text-shadow: 0 0 .28em rgba(10, 9, 8, .3); }
/* Masken für das Einfahren von Zeilen und Buchstaben (Titel der Eröffnung, Überschriften, Kapiteltitel).
   Die Überschriften stehen enger, als die Schrift hoch ist (Zeilenhöhe unter 1). Eine Maske genau auf Zeilenhöhe
   schnitte deshalb Unterlängen (g, p, y, j) und die Punkte von Ä, Ö, Ü ab. Der Ausschnitt reicht darum oben und
   unten etwas über die Zeile hinaus, seitlich ein wenig für kursive Überhänge – am Zeilenabstand ändert sich nichts. */
.line, .zeile-mask, .zeichen-mask { overflow: visible !important; clip-path: inset(-.18em -.12em); }
.line { display: block; }
.line > span { display: block; }
.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap;
  margin-top: clamp(26px, 5vh, 54px);
}
.hero__lede { max-width: 56ch; font-size: clamp(1rem, 1.22vw, 1.25rem); line-height: 1.55; }
.hero__lede > span { display: block; }      /* drei Sätze, jeder beginnt in einer neuen Zeile */
.hero__actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* ---------- Abschnitte ---------- */
.section { position: relative; padding: clamp(120px, 20vh, 240px) var(--pad); }
.section__label { margin-bottom: clamp(28px, 5vh, 56px); display: flex; align-items: center; gap: 14px; }
.section__label::before { content: ""; width: 28px; height: 1px; background: var(--amber); }

/* Philosophie */
.manifest { padding-top: clamp(40px, 8vh, 100px); }
.manifest__stage { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
.manifest__statement {
  max-width: min(17.5em, 57vw);
  font: 500 clamp(2.15rem, 5.5vw, 6.1rem)/1.08 var(--serif);
  letter-spacing: -.016em;
  text-wrap: pretty;
}
/* vier Sätze, vier Zeilen – jeder Satz beginnt neu */
.manifest__line { display: block; }

.cuts { margin-top: clamp(40px, 8vh, 100px); max-width: 1180px; }
.cuts__head { margin-bottom: 26px; }
.cuts__row { display: grid; grid-template-columns: 140px 1fr 160px; align-items: center; gap: 22px; margin-bottom: 16px; }
.cuts__bar { position: relative; display: flex; gap: 3px; height: 34px; }
.cuts__bar i { flex: 1 1 0; height: 100%; background: rgba(236, 230, 218, .1); transition: background-color .35s; }
.cuts__bar i.is-on { background: rgba(236, 230, 218, .5); transition-duration: 0s; }
.cuts__row--lvi .cuts__bar { height: 46px; }
.cuts__row--lvi .cuts__bar i { background: rgba(227, 165, 92, .2); transition-duration: 1.6s; }
.cuts__row--lvi .cuts__bar i.is-on { background: var(--amber); transition-duration: 1.6s; }
.cuts__row--lvi .label { color: var(--bone); }
/* Abspielmarke: Der Träger liegt links neben dem Balken und fährt hinein – so ragt er nie rechts über die Seite hinaus
   (auf dem Handy würde das die ganze Seite verbreitern). */
.cuts__bar b { position: absolute; top: -7px; bottom: -7px; right: 100%; width: 100%; pointer-events: none; }
.cuts__bar b::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--bone); }
.cuts__n { text-align: right; font-variant-numeric: tabular-nums; }
.cuts__note { margin: 26px 0 0 162px; max-width: 42ch; color: var(--bone-60); }

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(90px, 16vh, 180px);
}
.principle { border-top: 1px solid var(--line); padding-top: 26px; }
.principle h3 { font: 600 clamp(1.8rem, 2.6vw, 2.75rem)/1.05 var(--serif); margin: 0 0 16px; letter-spacing: -.01em; }
.principle p { color: var(--bone-60); max-width: 36ch; }

/* Leistungen */
.services-intro { padding-bottom: clamp(60px, 10vh, 120px); }
.services-intro__text { max-width: 46ch; margin-top: clamp(28px, 5vh, 52px); font-size: clamp(1rem, 1.22vw, 1.25rem); color: var(--bone-60); }

.chapter {
  position: relative;
  min-height: 135vh;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad) 18vh;
  overflow-x: clip;       /* nichts ragt seitlich aus dem Kapitel */
}
.chapter__inner { position: relative; max-width: min(46vw, 680px); isolation: isolate; }
/* weicher Schatten hinter dem Text – wandert mit, lässt das Bild frei */
.chapter__inner::before {
  content: "";
  position: absolute; z-index: -1;
  top: -34vh; bottom: -34vh; left: calc(var(--pad) * -1 - 6vw); right: -42%;
  background: radial-gradient(50% 50% at 38% 52%, rgba(10, 9, 8, .68), rgba(10, 9, 8, .32) 55%, rgba(10, 9, 8, 0) 100%);
  pointer-events: none;
}
.chapter__title {
  font: 500 clamp(3.5rem, 10.2vw, 11rem)/.9 var(--serif);
  letter-spacing: -.02em;
  margin-left: -.04em;
  white-space: nowrap;
}
.chapter__tag { font: italic 500 clamp(1.5rem, 2.35vw, 2.4rem)/1.15 var(--serif); margin-top: 18px; color: var(--amber); }
.chapter__text { margin-top: 20px; max-width: 44ch; font-size: clamp(1rem, 1.16vw, 1.18rem); }
/* Trennstriche stehen links vor jedem Eintrag, im Zwischenraum. Am Zeilenanfang fallen sie aus der Liste heraus und
   werden abgeschnitten – so hängt nach einem Umbruch kein Strich am Zeilenende. */
.chapter__list { display: flex; flex-wrap: wrap; gap: 8px 2.4em; margin: 26px 0 22px; color: var(--bone); overflow: hidden; }
.chapter__list li { position: relative; }
.chapter__list li::before { content: "/"; position: absolute; left: -1.5em; color: var(--bone-30); }
.chapter__stills { display: flex; gap: 10px; margin: 0 0 14px; }
.still {
  flex: 0 1 156px;
  aspect-ratio: 2.39 / 1;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .4s;
}
.still img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.still:focus-visible { box-shadow: 0 0 0 1px var(--bone); }
/* Unter dem Mauszeiger: ein hauchdünner Rand in Abendlicht – er sagt, dass sich das Bild öffnen lässt */
@media (hover: hover) {
  .still:hover { box-shadow: 0 0 0 1px var(--amber-line); }
  .still:hover img { transform: scale(1.07); }
}
.chapter__links { display: flex; flex-wrap: wrap; gap: 0 34px; }

/* Arbeiten – Grundzustand: Reihe zum Wischen (Touch, „Bewegung reduzieren“, ohne Skript) */
.work { position: relative; padding: clamp(110px, 16vh, 180px) 0 20px; }
.work__track {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 0 var(--pad) 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.work__intro { padding: 0 var(--pad); margin-bottom: clamp(30px, 6vh, 54px); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 5vh, 44px); }
.filter {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 1.3em;
  border: 1px solid var(--bone-30); border-radius: 999px;
  font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase;
  color: var(--bone);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), scale .2s var(--ease);
}
.filter span { margin-left: .7em; color: var(--bone-60); font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
@media (hover: hover) {
  .filter:hover { border-color: var(--bone); }
}
.filter[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.filter[aria-pressed="true"] span { color: rgba(10, 9, 8, .62); }

.frame { flex: none; width: min(84vw, 620px); scroll-snap-align: center; }
.frame__open { position: relative; display: block; width: 100%; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--ink-2); }
.frame__open img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 4s cubic-bezier(.16, .6, .2, 1);
}
/* derselbe hauchdünne Rand wie bei den Ausschnitten in den Kapiteln – hier innen an der Bildkante,
   damit ihn die Reihe zum Wischen oben nicht abschneidet */
.frame__open::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--amber-line);
  opacity: 0; transition: opacity .5s;
}
.frame__open:focus-visible img { transform: scale(1.07); }
@media (hover: hover) {
  .frame__open:hover img { transform: scale(1.07); }
  .frame__open:hover::after { opacity: 1; }
}
.frame figcaption { display: flex; align-items: baseline; gap: 18px; padding-top: 14px; min-width: 0; }
.frame__title { font: 600 clamp(1.45rem, 2.05vw, 2.15rem)/1.1 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.frame__meta { margin-left: auto; text-align: right; white-space: nowrap; }
.work__outro { flex: none; width: min(80vw, 520px); align-self: center; display: grid; gap: 30px; justify-items: start; scroll-snap-align: center; }

/* Arbeiten – horizontale Fahrt, große und kleine Formate im Wechsel */
.work.is-pinned { height: 100vh; padding: 0; overflow: hidden; overflow: clip; display: flex; align-items: center; }
.is-pinned .work__rail {
  --gap: clamp(26px, 3.4vw, 64px);
  display: flex; align-items: center; gap: var(--gap);
  width: max-content;
  padding: 0 var(--pad);
  will-change: transform;
}
.is-pinned .work__track {
  --fw: min(54vw, 96vh);
  display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: center;
  column-gap: var(--gap); row-gap: 22px;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.is-pinned .work__outro, .is-pinned .frame--l { grid-row: span 2; }
.is-pinned .work__intro { flex: none; width: min(38vw, 560px); padding: 0; margin: 0; }
.is-pinned .frame--l { width: var(--fw); }
.is-pinned .frame--s { width: calc(var(--fw) * .46); }
.is-pinned .frame--s figcaption { padding-top: 10px; }
.is-pinned .frame--s .frame__title { font-size: clamp(1.15rem, 1.4vw, 1.45rem); }
.is-pinned .frame--s .frame__meta { display: none; }
.is-pinned .work__outro { width: min(42vw, 600px); padding-left: 3vw; }

/* Arbeiten – Kontaktbogen: viele Bilder in drei Reihen kleiner Formate (große Kategorien, „Alle“) */
.is-dense .work__track {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
  grid-auto-columns: min(58vw, 300px);
  gap: 16px 14px;
  align-items: start;
}
.is-dense .frame { width: auto; scroll-snap-align: start; }
.is-dense .frame figcaption { padding-top: 8px; }
.is-dense .frame__title { font-size: 1.15rem; }
.is-dense .frame__meta { display: none; }
.is-dense .work__outro { grid-row: span 3; width: auto; }
.is-pinned.is-dense .work__track { grid-auto-columns: auto; column-gap: clamp(16px, 1.8vw, 30px); row-gap: 14px; align-items: center; }
.is-pinned.is-dense .frame--s { width: min(23vw, 40vh); }
.is-pinned.is-dense .frame--s .frame__title { font-size: clamp(1.05rem, 1.2vw, 1.25rem); }
.is-pinned.is-dense .work__outro { width: min(42vw, 600px); }

/* Ablauf */
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.6vw, 48px); margin-top: clamp(64px, 12vh, 140px); }
/* Die Reihenfolge zeigt die Linie, die sich von Schritt zu Schritt zieht – Ziffern braucht es dafür nicht. */
.step { position: relative; padding-top: clamp(26px, 4.6vh, 46px); }
.step::before, .step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; }
.step::before { background: var(--line); }
.step::after { background: var(--amber); transform: scaleX(var(--draw, 1)); transform-origin: left; }
.step h3 { font: 600 clamp(1.8rem, 2.5vw, 2.65rem)/1.05 var(--serif); margin: 0 0 16px; letter-spacing: -.01em; }
.step p { color: var(--bone-60); max-width: 30ch; }
/* Nur Schnitt: ein Angebot neben dem Ablauf – die Linie trennt es von den vier Schritten.
   Die Spalten entsprechen denen des Abschnitts „Über mich“ darunter: Die Texte stehen auf derselben Achse. */
.process__footage {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 130px); align-items: start;
  margin-top: clamp(80px, 14vh, 160px); padding-top: clamp(30px, 5vh, 52px);
  border-top: 1px solid var(--line);
}
.process__footage-text { max-width: 54ch; }
.process__footage-text p { font-size: clamp(1rem, 1.22vw, 1.25rem); }
.process__footage-text .link { margin-top: clamp(12px, 2.4vh, 22px); }

/* Zusammenarbeit: Überschrift links, Text rechts, wie „Ihr Material, mein Schnitt.“ */
.partner { padding-top: clamp(40px, 8vh, 100px); }
.partner__inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 130px); align-items: start; }
.partner__text { max-width: 54ch; }
.partner__text p { font-size: clamp(1rem, 1.22vw, 1.25rem); }
.partner__agency { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: clamp(16px, 3vh, 28px); }
.partner__logo { display: block; height: 64px; width: auto; }       /* das Logo der Agentur, klein; die Datei hat die dreifache Höhe */

/* Über mich */
.about {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  grid-template-areas: "portrait head" "portrait body";
  column-gap: clamp(40px, 7vw, 130px);
}
.about__head { grid-area: head; align-self: end; }
.about__title { font-size: clamp(2.7rem, 5.6vw, 6rem); }
.about__portrait { grid-area: portrait; align-self: center; width: min(100%, calc(min(78vh, 760px) * 2 / 3)); }
.about__frame { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ink-2); }
.about__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* unscharfe Kopie für die Schärfenfahrt: liegt über dem Bild und blendet aus (nur Deckkraft und Größe bewegen sich) */
.about__frame .about__soft { position: absolute; inset: 0; filter: blur(14px); pointer-events: none; }
/* ein leichter Randabfall: das Porträt sitzt im Dunkel der Seite statt als heller Kasten davor */
.about__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(115% 85% at 58% 30%, rgba(10, 9, 8, 0) 46%, rgba(10, 9, 8, .52) 100%);
}
/* Autofokus-Feld auf dem Gesicht: vier Winkel, die einrasten, sobald das Bild scharf ist */
.about__af {
  --c: var(--bone); --l: 11px;
  position: absolute; z-index: 2; left: 44.5%; top: 10.5%; width: 32%; height: 27.5%; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat;
}
.about__af.is-locked { --c: var(--amber); }
.about__caption { padding-top: 14px; color: var(--bone); }
.about__body { grid-area: body; align-self: start; max-width: 54ch; margin-top: clamp(22px, 4vh, 40px); }
.about__body p + p { margin-top: 1.05em; }
.about__lead { font-size: clamp(1.14rem, 1.5vw, 1.5rem); line-height: 1.45; }
.about__body .about__sign { font: italic 500 clamp(1.6rem, 2.45vw, 2.5rem)/1.2 var(--serif); color: var(--amber); margin-top: 1em; text-wrap: balance; }
.about__body .link { margin-top: clamp(14px, 3vh, 26px); }

/* Kontakt */
.contact {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 130px);
  align-items: end;
  padding-bottom: clamp(110px, 16vh, 180px);
}
.contact__text { max-width: 42ch; margin-top: clamp(26px, 5vh, 48px); font-size: clamp(1rem, 1.22vw, 1.25rem); }
.contact__direct { margin-top: clamp(30px, 6vh, 60px); display: grid; gap: 4px; }
.contact__direct li { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
.contact__place { color: var(--bone); padding: 14px 0 13px; }
.contact__direct a {
  color: var(--bone); text-decoration: none; justify-self: start;
  padding: 14px 0 13px; border-bottom: 1px solid var(--bone-30);
  transition: border-color .4s, color .4s; overflow-wrap: anywhere;
}
@media (hover: hover) {
  .contact__direct a:hover { color: var(--amber); border-color: var(--amber); }
}

.form {
  display: grid; gap: 26px;
  padding: clamp(24px, 3vw, 44px);
  background: rgba(10, 9, 8, .62);
  border: 1px solid var(--line);
}
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { padding: 0; margin-bottom: 14px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.chip span {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 1.4em;
  border: 1px solid var(--bone-30); border-radius: 999px;
  font: var(--label); letter-spacing: var(--tracking); text-transform: uppercase;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), scale .2s var(--ease);
}
@media (hover: hover) {
  .chip:hover span { border-color: var(--bone); }
}
.chip input:checked + span { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 6px; align-content: start; }
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  background: transparent; border: 0; border-bottom: 1px solid var(--bone-30); border-radius: 0;
  color: var(--bone);
  font: 300 1.05rem/1.4 var(--sans);
  padding: 8px 0 10px;
  resize: vertical;
  transition: border-color .4s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(236, 230, 218, .58); }
@media (hover: hover) {
  .field input:hover, .field textarea:hover { border-color: var(--bone-60); }
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 2px 0 var(--amber); }
.field .label { transition: color .4s; }
.field:focus-within .label { color: var(--amber); }
.field.is-invalid input { border-color: var(--error); }
.field__error { font-size: .86rem; line-height: 1.35; color: var(--error); }
.field__error:empty { display: none; }
.form__foot { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; }
.form__hint { flex: 1 1 220px; font-size: .86rem; line-height: 1.4; color: var(--bone-60); }
.form__note { font-size: .95rem; color: var(--amber); }
.form__note:empty { display: none; }

/* Abspann */
.footer { position: relative; padding: clamp(40px, 8vh, 90px) var(--pad) calc(78px + env(safe-area-inset-bottom)); overflow: hidden; }
/* das Zeichen in voller Fassung, mit Spiegelung */
.footer__seal { margin-bottom: clamp(26px, 5vh, 56px); }
.footer__seal .logo { width: clamp(104px, 11vw, 168px); height: auto; }
.footer__mark {
  font: 500 11.2vw/.9 var(--serif);
  letter-spacing: -.02em;
  white-space: nowrap;
  margin-left: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--bone-30);
}
.footer__mark em { -webkit-text-stroke-color: var(--amber); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 40px; margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--line); }
.footer__row a { display: inline-block; padding: 14px 0; text-decoration: none; transition: color .4s; }
@media (hover: hover) {
  .footer__row a:hover { color: var(--bone); }
}
.footer__legal { display: inline-flex; gap: 28px; }
.footer__row a[aria-current] { color: var(--bone); }

/* ---------- Textseiten (Impressum, Datenschutz) ----------
   Ruhige Leseseiten ohne Film und ohne Skript: dieselben Farben und Schriften, der Sucher bleibt als Rahmen. */
.doc { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.doc .nav { position: absolute; }                          /* steht am Seitenanfang und scrollt mit dem Text */
.doc .hud::before, .doc .hud::after { display: none; }     /* kein Verlauf über dem Text */
.doc__main { flex: 1; padding: clamp(132px, 21vh, 210px) var(--pad) clamp(64px, 11vh, 130px); }
.doc__main p, .doc__main ul, .doc__main address { max-width: 60ch; }      /* gut 70 Zeichen je Zeile */
.doc__lead { margin-top: clamp(22px, 4vh, 40px); font-size: clamp(1.14rem, 1.5vw, 1.5rem); line-height: 1.45; }
.doc__main section { margin-top: clamp(44px, 8vh, 84px); padding-top: 26px; border-top: 1px solid var(--line); }
.doc__main h2 { font: 600 clamp(1.6rem, 2.1vw, 2.1rem)/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 16px; hyphens: auto; overflow-wrap: break-word; }
.doc__text > * + * { margin-top: 1.05em; }
/* Breite Bildschirme: Überschrift links, Text rechts, wie bei „Ihr Material, mein Schnitt.“ auf der Startseite */
@media (min-width: 1000px) {
  .doc__main section { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 60ch); column-gap: clamp(40px, 6vw, 110px); align-items: baseline; }
  .doc__main h2 { margin-bottom: 0; }
}
.doc__main address { font-style: normal; }
.doc__main li { position: relative; padding-left: 1.3em; }
.doc__main li::before {      /* Aufzählung: der Punkt aus dem Zeichen */
  content: ""; position: absolute; left: .1em; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
}
.doc__main a:not(.link) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--bone-60);
  overflow-wrap: anywhere;
  transition: color .4s, text-decoration-color .4s;
}
@media (hover: hover) {
  .doc__main a:not(.link):hover { color: var(--amber); text-decoration-color: currentColor; }
}
/* Offene Angabe: steht sichtbar in eckigen Klammern, bis sie ausgefüllt ist (siehe VEROEFFENTLICHUNG_CHECKLISTE.md) */
.offen { background: none; color: var(--amber); outline: 1px dashed var(--amber-line); outline-offset: 3px; }
.footer--doc { padding-top: 0; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.footer--doc .footer__row { margin-top: 0; }

/* Großansicht */
.lightbox {
  --lb-h: 66vh;      /* größte Höhe des Bildes */
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 76px var(--pad) calc(36px + env(safe-area-inset-bottom));
  background: var(--ink);
  opacity: 0; visibility: hidden;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity .32s var(--ease), visibility 0s .32s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.lightbox__close { position: absolute; top: 16px; right: calc(var(--pad) - 12px); min-height: 44px; padding: 0 12px; color: var(--bone); }
@media (hover: hover) {
  .lightbox__close:hover, .lightbox__nav button:hover { color: var(--amber); }
}
.lightbox__stage { width: min(100%, 1400px); }
.lightbox__media { display: grid; place-items: center; }
/* Die Fläche des Bildes steht fest, bevor die Datei da ist: Breite aus Höhe × Seitenverhältnis (--ar setzt main.js).
   So füllt auch die zuerst gezeigte kleinere Fassung den Platz, und beim Schärfen springt nichts. */
.lightbox__img {
  display: block;
  width: min(100%, calc(var(--lb-h) * var(--ar, 1.78))); height: auto;
  max-height: var(--lb-h);
  aspect-ratio: var(--ar, 1.78);
  background: var(--ink-2);
}
.lightbox__video { position: relative; width: min(100%, 118vh); aspect-ratio: 16 / 9; background: var(--ink-2); }
.lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__info { display: grid; grid-template-columns: 1fr auto auto; gap: 16px 44px; align-items: end; padding-top: 22px; }
.lightbox__title { font: 500 clamp(1.9rem, 3.4vw, 3.4rem)/1 var(--serif); letter-spacing: -.015em; margin-top: 8px; }
.lightbox__nav { display: flex; align-items: center; gap: 6px; }
.lightbox__nav button { min-height: 44px; padding: 0 12px; color: var(--bone); transition: color .3s; }
.lightbox__count { min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__cta { margin-left: auto; }
  .principles { grid-template-columns: 1fr; gap: 44px; }
  .process__grid { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .contact { grid-template-columns: 1fr; align-items: start; }
  .display--l { font-size: clamp(3rem, 9vw, 7.4rem); }
  .chapter__inner { max-width: min(78vw, 680px); }
  /* Der Schatten hinter dem Text endet am Bildschirmrand. Ragte er darüber hinaus, würde die Seite auf Tablets und
     quer gehaltenen Handys breiter als der Bildschirm – sie ließe sich dann seitlich verschieben. */
  .chapter__inner::before {
    left: calc(var(--pad) * -1); right: calc(100% + var(--pad) - 100vw);
    background: radial-gradient(72% 52% at 36% 52%, rgba(10, 9, 8, .76), rgba(10, 9, 8, .38) 58%, rgba(10, 9, 8, 0) 100%);
  }
  .lightbox__info { grid-template-columns: 1fr auto; }
  .lightbox__info .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 820px) {
  .hud__progress { display: none; }
  .manifest__statement { max-width: none; }
}

/* Hochformat (Handy, Tablet): Der Text liegt über der ganzen Bildbreite, auch über Himmel und Schnee – ein durchgehender
   dunkler Grund statt eines weichen Flecks. Darüber bleibt das Bild frei: erst das Motiv, dann der Text. */
@media (max-width: 820px) and (orientation: portrait) {
  .chapter__inner::before {
    top: -10vh; bottom: -16vh;
    background: linear-gradient(to bottom, rgba(10, 9, 8, 0) 0, rgba(10, 9, 8, .8) 10vh, rgba(10, 9, 8, .86) 72%, rgba(10, 9, 8, 0) 100%);
  }
}

@media (max-width: 700px) {
  .process__footage, .partner__inner { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .partner__logo { height: 52px; }
  .about { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "portrait" "body"; row-gap: clamp(26px, 5vh, 44px); }
  .about__portrait { width: min(100%, 440px); }
  .about__body { margin-top: 0; }
}

@media (max-width: 640px) {
  .nav { padding-bottom: 14px; gap: 12px; }
  .nav__cta { display: none; }
  .nav__end { gap: 8px; }                /* Sprachwahl und Menü: zwei Felder zum Antippen, mit Luft dazwischen */
  .nav__toggle { padding-left: 10px; }
  .nav__logo { font-size: 1.16rem; gap: 11px; }
  .nav__logo .logo { width: 40px; height: 40px; }
  .hud__lens { display: none; }
  .hero { padding-top: clamp(92px, 17vh, 140px); padding-bottom: 84px; }   /* auf kurzen Handys rückt der Text höher */
  .hero__foot { flex-direction: column; align-items: flex-start; }
  /* der Text reicht auf dem Handy bis in den hellen Himmel – das Bild wird von unten her abgedunkelt */
  .hero__scrim { background: linear-gradient(to top, rgba(10, 9, 8, .88) 0%, rgba(10, 9, 8, .72) 40%, rgba(10, 9, 8, .46) 66%, rgba(10, 9, 8, .14) 82%, rgba(10, 9, 8, 0) 92%); }
  .hero__eyebrow { text-shadow: 0 0 14px rgba(10, 9, 8, .6); }
  .chapter { min-height: 125vh; padding-bottom: 14vh; }
  .chapter__inner { max-width: none; }
  .chapter__inner::before { bottom: -14vh; }
  .still { aspect-ratio: 1.9 / 1; }      /* etwas höher: auch auf 320 px bleibt jedes Bild groß genug zum Antippen */
  .cuts__row { grid-template-columns: 1fr auto; gap: 8px 12px; margin-bottom: 26px; }
  .cuts__bar { grid-column: 1 / -1; grid-row: 2; }
  .cuts__note { margin-left: 0; }
  .frame figcaption { flex-wrap: wrap; gap: 4px 14px; }
  .frame__meta { margin-left: 0; flex-basis: 100%; text-align: left; }
  .process__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .contact__direct li { grid-template-columns: 1fr; }
  .footer__row { flex-direction: column; align-items: flex-start; }
  .lightbox { padding-top: 68px; }
  .lightbox__info { grid-template-columns: 1fr; gap: 12px; }
  .lightbox__nav { margin-left: -12px; }
}

/* sehr kurze Handys (hochkant, unter 600 px Höhe): ohne die Zeile über dem Titel bleibt der Knopf frei von der Aufnahme-Anzeige */
@media (max-width: 640px) and (max-height: 600px) {
  .hero__eyebrow { display: none; }
}

/* quer gehaltene Handys: der Titel steht in einer Zeile und richtet sich nach der Höhe – die Eröffnung passt auf einen Blick */
@media (min-width: 641px) and (max-height: 520px) {
  .hero { padding-top: 92px; padding-bottom: 72px; }
  /* der einzeilige Titel reicht hier bis vor den hellen Himmel – der Schatten von links geht deshalb weiter nach rechts */
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, .42) 56%, rgba(10, 9, 8, 0) 88%),
      radial-gradient(110% 85% at 0% 100%, rgba(10, 9, 8, .62), rgba(10, 9, 8, 0) 62%);
  }
  .hero__title { font-size: clamp(3rem, min(9.4vw, 24vh), 15.5rem); }
  .hero__title .line { display: inline-block; vertical-align: top; }
  .hero__title .line + .line { margin-left: .2em; }
  .hero__eyebrow { margin-bottom: 12px; }
  .hero__foot { margin-top: 16px; flex-wrap: nowrap; }      /* der Link bleibt rechts neben dem Text, frei von der Aufnahme-Anzeige */
  .hero__lede { flex: 1 1 0; min-width: 0; }
  .hero__actions { flex: none; }
  .hero__actions .btn { display: none; }                    /* „Projekt anfragen“ steht hier schon oben in der Navigation */
  .section { padding-top: 92px; padding-bottom: 92px; }
  .manifest { padding-top: 40px; }
  /* Großansicht: Bild links, Angaben rechts – nichts muss gescrollt werden */
  .lightbox { padding-top: 56px; padding-bottom: 16px; }
  .lightbox__stage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .lightbox { --lb-h: 74vh; }
  .lightbox__info { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .lightbox__info .btn { grid-column: auto; padding: 8px 1.3em; border-radius: 26px; }
  .lightbox__nav { margin-left: -12px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* Touch: kein Hover, der nach dem Antippen hängen bleibt – stattdessen eine kurze Rückmeldung beim Antippen */
@media (hover: none) {
  .link:active, .nav__toggle:active, .nav__lang a:active, .menu a:active, .contact__direct a:active, .footer__row a:active,
  .lightbox__close:active, .lightbox__nav button:active { color: var(--amber); }
  .filter:active, .chip:active span { border-color: var(--bone); }
  .still:active, .frame__open:active { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rec__dot { animation: none; }
}