@font-face { font-family: "Newsreader"; src: url(fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --kohle: #121110;
  --papier: #E9E5DC;
  --grau: #A8A398;
  --linie: #3A3733;
  --gutter: clamp(16px, 3vw, 48px);
  --serif: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--kohle); }
body { margin: 0; background: var(--kohle); color: var(--papier); font: 400 1.125rem/1.5 var(--serif); }
h1, h2, p, figure { margin: 0; }
img { display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--papier); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--papier); color: var(--kohle); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 8px; }
.cap { font: 400 .8125rem/1.5 var(--mono); color: var(--grau); }

.top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; padding: 20px var(--gutter); font: 400 .8125rem/1 var(--mono); color: #fff; text-shadow: 0 1px 8px #0006; }
.top nav { display: flex; gap: 24px; }

.hero { position: relative; height: 100svh; min-height: 560px; }
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--kohle) 72%, transparent)); }
.hero__text { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 48px; }
.hero h1 { font: 300 clamp(2.25rem, 5.6vw, 6rem)/1.02 var(--serif); letter-spacing: -.02em; }
.hero .cap { color: var(--papier); }

.serie { padding: clamp(72px, 10vw, 144px) 0 0; }
.serie header { display: grid; grid-template-columns: 4rem 1fr auto; align-items: baseline; padding: 0 var(--gutter) 24px; }
.serie h2 { font: 300 italic clamp(2rem, 4vw, 4rem)/1 var(--serif); }
.rail { display: flex; gap: var(--gutter); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.shot { flex: none; padding: 0; border: 0; background: #1d1b19; cursor: zoom-in; scroll-snap-align: start; }
.shot img { height: min(78vh, 62vw); width: auto; transition: opacity .9s ease; }
.js .shot img:not(.is-in) { opacity: 0; }
.shot.wide { max-width: 88vw; }

.anfrage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(96px, 14vw, 208px) var(--gutter); }
.anfrage h2 { grid-column: 1 / span 6; font: 300 clamp(2.5rem, 5.6vw, 6rem)/1.02 var(--serif); letter-spacing: -.02em; }
form { grid-column: 8 / -1; display: grid; gap: 24px; }
label { display: grid; gap: 8px; font: 400 .8125rem/1.4 var(--mono); color: var(--grau); }
input, select, textarea { width: 100%; font: 400 1.125rem/1.4 var(--serif); color: var(--papier); background: transparent; border: 0; border-bottom: 1px solid var(--grau); border-radius: 0; padding: 8px 0; }
select option { background: var(--kohle); }
.foot-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
button[type=submit] { position: relative; font: 400 .875rem/1 var(--mono); padding: 16px 32px; background: var(--papier); color: var(--kohle); border: 0; cursor: pointer; transition: background .4s; }
button[type=submit]:hover { background: #fff; }
button[data-loading] { color: transparent !important; pointer-events: none; }
button[data-loading]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--kohle); border-top-color: transparent; animation: drehen .8s linear infinite; }
@keyframes drehen { to { rotate: 360deg; } }

.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px var(--gutter); border-top: 1px solid var(--linie); }

dialog { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--kohle); color: var(--papier); }
dialog[open] { display: grid; place-items: center; }
dialog img { max-width: 94vw; max-height: 90dvh; object-fit: contain; }
.close { position: fixed; top: 16px; right: var(--gutter); background: none; border: 0; color: var(--papier); font: 400 .8125rem/1 var(--mono); cursor: pointer; padding: 8px; }

@media (max-width: 760px) {
  .shot img { height: 62vh; max-width: 86vw; object-fit: cover; }
  .serie header { grid-template-columns: 2.5rem 1fr; }
  .serie header .cap:last-child { grid-column: 2; }
  .anfrage h2, form { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .shot img { transition: none; } .js .shot img:not(.is-in) { opacity: 1; } button[data-loading]::after { animation: none; } }