:root {
  --bg: #e6e6e1;          /* Beton: kühles Hellgrau, kein Beige */
  --fg: #151515;
  --fg-dim: rgba(21, 21, 21, 0.5);
  --akzent: #e2572a;      /* Signalorange aus dem Rosenaustadion */
  --invers: #ffffff;      /* Schrift über Bildern (mix-blend-mode: difference) */
  --rand: 32px;
  --spalte: 25%;          /* Breite der Namensspalte links (Desktop) */
  --zoom: 1;              /* Rastergröße im Portfolio */
  --dauer: 0.4s;
  --kurve: cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); color: var(--fg); }
::selection { background: var(--akzent); color: var(--invers); }

/* Schrift, die über Bildern liegt: weiß + difference → dunkel auf Hell, invertiert auf Fotos */
.kopf, .ansicht-wahl, .zaehler, .album-titel, .fuss, .list, .intro-text { color: var(--invers); }
:root:has(body.album-seite:not(.stufe-mittel):not(.stufe-klein)) { scroll-snap-type: y mandatory; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: opacity 0.3s var(--kurve); }
a:hover { opacity: 0.5; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }

/* Seitenwechsel: weiches Überblenden */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dauer); }

/* Buchstabenweise Einblendung (Skript zerlegt Marke und Navigation) */
[data-buchstaben] span { display: inline-block; opacity: 0; transition: opacity 0.5s var(--kurve); white-space: pre; }
body.bereit [data-buchstaben] span { opacity: 1; }

/* Kopf: Marke links auf der Mittellinie, Navigation oben mittig, Instagram oben rechts */
.kopf { position: fixed; inset: 0; z-index: 30; pointer-events: none; mix-blend-mode: difference; }
.kopf > * { pointer-events: auto; position: absolute; }
.marke { left: var(--rand); top: 50%; transform: translateY(-50%); }
.nav { left: 50%; top: var(--rand); transform: translateX(-50%); white-space: nowrap; transition: top 0.6s var(--kurve); }
.nav a[aria-current="page"] { opacity: 0.5; }
.insta { right: var(--rand); top: var(--rand); display: inline-flex; }
.verlauf { position: fixed; inset: 0 0 auto 0; height: 160px; z-index: 10; pointer-events: none; background: linear-gradient(var(--bg), transparent); }

/* Intro: Cover bildschirmfüllend, bis der Besucher scrollt */
.intro { position: fixed; inset: 0; z-index: 25; background: var(--bg); transition: opacity 0.7s var(--kurve); }
.intro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--kurve); }
.intro img.aktiv { opacity: 1; }
.intro-text { position: absolute; left: 0; right: 0; bottom: var(--rand); margin: 0; text-align: center; padding: 0 var(--rand); mix-blend-mode: difference; }
body.intro-aktiv .nav { top: 50%; transform: translate(-50%, -50%); }
body.intro-aktiv { overflow: hidden; }
body.intro-weg .intro { opacity: 0; pointer-events: none; }

/* Ansichtswahl und Zähler */
.ansicht-wahl {
  position: fixed; left: var(--spalte); top: var(--rand); z-index: 20; mix-blend-mode: difference;
  display: flex; gap: 0.35em; align-items: center;
}
.ansicht-wahl a[aria-current="page"] { text-decoration: underline; }
.ansicht-wahl .zoom { margin-left: 1.2em; display: inline-flex; gap: 0.9em; font-size: 1.3rem; line-height: 1; }
.zaehler { position: fixed; right: var(--rand); top: 50%; transform: translateY(-50%); z-index: 15; mix-blend-mode: difference; font-variant-numeric: tabular-nums; }

/* Portfolio: Inhalt rechts der Namensspalte, erster Titel auf der Mittellinie */
.inhalt { padding: 50vh var(--rand) 30vh var(--spalte); }
.projekt { padding-bottom: calc(var(--rand) * 2); }
.projekt-titel h2 { font-size: 1rem; font-weight: 400; margin: 0; transform: translateY(-50%); }
.projekt-text { margin: 0 0 1.6em; max-width: 26em; white-space: pre-line; color: var(--fg); }
.reihe { display: flex; gap: 16px; width: calc(100% * var(--zoom)); max-width: 100%; transition: width 0.4s var(--kurve); }
.reihe:hover { opacity: 1; }
.reihe figure { flex: 1; min-width: 0; overflow: hidden; }
.reihe img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--kurve), transform 0.8s var(--kurve); }
.reihe img.sichtbar { opacity: 1; transform: none; }
.reihe:hover img { opacity: 0.6; }
.reihe img:hover { opacity: 1; }

/* List: Titel auf der Mittellinie, aktiver hell, Cover dahinter */
.listseite main { height: 100svh; overflow: hidden; }
.list-hintergrund { position: fixed; inset: 0; z-index: 0; }
.list-hintergrund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--kurve); }
.list-hintergrund img.aktiv { opacity: 1; }
.list { list-style: none; margin: 0; padding: 0 var(--rand) 0 var(--spalte); position: relative; z-index: 5; mix-blend-mode: difference; transition: transform 0.5s var(--kurve); }
.list li { height: 1.6em; opacity: 0.2; transition: opacity 0.3s; }
.list li.aktiv { opacity: 1; }
.list a:hover { opacity: 1; }

/* Album: jedes Foto bildschirmfüllend, nahtlos einrastend */
.slide { position: relative; height: 100svh; height: 100dvh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; padding: calc(var(--rand) * 2) var(--rand); }
.slide img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.6s var(--kurve); }
.slide img.sichtbar { opacity: 1; }
.album-titel { position: fixed; left: var(--rand); bottom: var(--rand); z-index: 15; margin: 0; font-size: 1rem; font-weight: 400; mix-blend-mode: difference; }
/* Album-Größen per Klick (nur Desktop): voll → mittlere Spalte → schmale Spalte → voll */
@media (min-width: 1024px) {
  .album-seite .slide:not(.info) img { cursor: zoom-out; }
  .album-seite.stufe-klein .slide:not(.info) img { cursor: zoom-in; }
  .album-seite.stufe-mittel .slide:not(.info), .album-seite.stufe-klein .slide:not(.info) { height: auto; display: block; padding: 0 0 10px; scroll-snap-align: none; }
  .album-seite.stufe-mittel .slide:not(.info) img, .album-seite.stufe-klein .slide:not(.info) img { height: auto; object-fit: initial; }
  .album-seite.stufe-mittel .slide:not(.info) { width: 46vw; margin-left: 38vw; }
  .album-seite.stufe-klein .slide:not(.info) { width: 22vw; margin-left: 62vw; }
  .album-seite.stufe-mittel .strecke, .album-seite.stufe-klein .strecke { padding-top: 50vh; }
  .album-seite.stufe-mittel .slide.info, .album-seite.stufe-klein .slide.info { scroll-snap-align: none; }
}
.slide.info { align-items: flex-end; justify-content: flex-start; padding-left: var(--spalte); }
.slide.info > div { max-width: 36em; }
.slide.info h2 { font-size: 1rem; font-weight: 400; margin: 0 0 0.5em; }
.slide.info .jahr { color: var(--fg-dim); margin: 0 0 1em; }
.slide.info .weiter { margin: 1.5em 0 0; }

/* Raw: verstreute Thumbnails, Reihen treiben beim Scrollen unterschiedlich schnell */
.raw-seite main { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.raw-seite main.greift { cursor: grabbing; }
.raw { position: absolute; inset: 0; }
.raw-reihe { position: absolute; left: 0; right: 0; display: flex; align-items: center; height: var(--raw-hoehe, 128px); will-change: transform; }
.raw { z-index: 2; }
.raw-bild { height: 100%; flex: none; cursor: pointer; background: var(--akzent); transition: opacity 0.4s var(--kurve); }
.raw-bild img { height: 100%; width: auto; mix-blend-mode: luminosity; opacity: 0.85; transition: opacity 0.4s var(--kurve); }
.raw-bild:hover img { mix-blend-mode: normal; opacity: 1; }
/* Überfahren: Bild groß in der Mitte, die übrigen Kacheln treten zurück */
.raw-vorschau { position: fixed; inset: calc(var(--rand) * 3) 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--kurve); }
.raw-vorschau img { max-width: 62vw; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.raw-seite.vorschau-an .raw-vorschau { opacity: 1; }
.raw-seite.vorschau-an .raw-bild:not(:hover) { opacity: 0.18; }
.raw-gross { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: var(--rand); animation: einblenden var(--dauer) var(--kurve); }
.raw-gross img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.raw-zu { position: absolute; right: var(--rand); top: var(--rand); font-size: 2rem; line-height: 1; }
.raw-zurueck, .raw-vor { position: absolute; top: 0; bottom: 0; width: 50%; }
.raw-zurueck { left: 0; cursor: w-resize; }
.raw-vor { right: 0; cursor: e-resize; }
.raw-zu { z-index: 2; }
.raw-zahl { position: absolute; left: var(--rand); bottom: var(--rand); font-variant-numeric: tabular-nums; }
@keyframes einblenden { from { opacity: 0; } }

/* Textseiten */
.text { max-width: 40em; padding: 50vh var(--rand) 20vh var(--spalte); }
.text h1 { font-size: 1rem; font-weight: 400; margin: 0 0 2em; transform: translateY(-50%); }
.text h2 { font-size: 1rem; font-weight: 400; margin: 2em 0 0.5em; }
.text p { margin: 0 0 1em; }
.text a { text-decoration: underline; }
.text code { font-family: ui-monospace, Menlo, monospace; }

/* Kontaktformular */
.formular { display: grid; gap: 1.4em; margin: 2.5em 0 1.5em; max-width: 30em; }
.formular label { display: grid; gap: 0.3em; color: var(--fg-dim); }
.formular input, .formular textarea { font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--fg-dim); border-radius: 0; padding: 0.4em 0; resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: none; border-bottom-color: var(--akzent); }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular button { justify-self: start; padding: 0.6em 1.4em; background: var(--fg); color: var(--bg); transition: background 0.3s var(--kurve); }
.formular button:hover { background: var(--akzent); }
.formular button:disabled { opacity: 0.5; cursor: wait; }
.formular-status { margin: 0; min-height: 1.45em; }
.text .klein { color: var(--fg-dim); max-width: 30em; }

/* Fuß: klein unten rechts */
.fuss { position: fixed; right: var(--rand); bottom: var(--rand); z-index: 10; display: flex; gap: 1.5em; opacity: 0.6; mix-blend-mode: difference; }
.fuss span:first-child { display: none; }
.text-seite .fuss { position: static; color: var(--fg-dim); opacity: 1; mix-blend-mode: normal; display: flex; justify-content: space-between; padding: var(--rand) var(--rand) var(--rand) var(--spalte); }
.text-seite .fuss span:first-child { display: inline; }

/* Handy und Tablet: Portfolio als Bildstrecke, Namensspalte entfällt */
@media (max-width: 1023px) {
  :root { --rand: 16px; --spalte: var(--rand); }
  .marke { top: var(--rand); transform: none; }
  .nav { left: auto; right: calc(var(--rand) + 2.2em); transform: none; }
  body.intro-aktiv .nav { top: var(--rand); transform: none; }
  .ansicht-wahl { display: none; }
  .verlauf { display: none; }
  .intro { display: none; }
  .inhalt { padding: 0; }
  :root:has(body.start) { scroll-snap-type: y mandatory; }
  .projekt { position: relative; height: 100svh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; padding: calc(var(--rand) * 3) 0; display: flex; flex-direction: column; justify-content: center; }
  .projekt-titel { position: absolute; left: var(--rand); bottom: var(--rand); z-index: 5; mix-blend-mode: difference; color: var(--invers); }
  .projekt-titel h2 { transform: none; }
  .projekt-text { display: none; }
  .reihe { width: 100%; height: 100%; display: block; }
  .reihe figure:not(:first-child) { display: none; }
  .reihe figure { height: 100%; }
  .reihe img { object-fit: contain; }
  .reihe:hover img { opacity: 1; }
  .zaehler { display: block; }
  .list { padding-left: var(--rand); }
  .slide { padding: calc(var(--rand) * 3) 0; }
  .slide.info { padding: calc(var(--rand) * 3) var(--rand); }
  .text { padding: calc(var(--rand) * 6) var(--rand) calc(var(--rand) * 4); }
  .text h1 { transform: none; }
  .raw-reihe { height: var(--raw-hoehe, 96px); }
  .fuss { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}