/* Schriften selbst gehostet (Google Fonts, SIL Open Font License), nur lateinischer Zeichensatz */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-400-latin.woff2") format("woff2");
}

:root {
  --sc-canvas: #0e0f11;
  --sc-surface: #17181b;
  --sc-ink: #f2f2f0;
  --sc-ink-soft: #a6a7ab;
  --sc-accent: #ffb547;
  --sc-accent-ink: #0e0f11;
  --bg: #0e0f11;
  --surface: #17181b;
  --surface-2: #1b1c20;
  --surface-3: #1f2025;
  --line: #2a2b30;
  --line-2: #34353b;
  --text: #f2f2f0;
  --text-2: #b9babe;
  --muted: #a6a7ab;
  --faint: #8d8e93;
  --accent: #ffb547;
  --accent-ink: #0e0f11;
  --radius: 24px;
  --wrap: 1240px;
  --safe: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; background-color: var(--bg); }

body {
  margin: 0;
  letter-spacing: normal;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(32px, var(--safe)); }
.section { padding-top: 110px; padding-bottom: 40px; }
.kicker { font-family: var(--mono); font-size: 13px; color: var(--faint); margin-bottom: 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(14, 15, 17, .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo { display: block; color: var(--text); text-decoration: none; }
.cw { display: block; width: 54px; height: auto; overflow: visible; }
.cw-line { fill: none; stroke: currentColor; stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; }
.cw-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.film .cw-line { animation: cw-draw 1.5s .25s var(--ease) both; }
@keyframes cw-draw { from { stroke-dashoffset: 1; } }
.cw-dot { fill: var(--accent); transition: transform .35s var(--ease); }
.logo:hover .cw-dot { transform: translateY(-3px); }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.site-header nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
.site-header nav a:hover { color: var(--text); }
.site-header nav a.nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
}
.progress { height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-light { background: var(--text); color: var(--bg); }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* Hero: Grundform ohne Film */
.scene { position: relative; background: var(--bg); }
.film .scene { height: 230vh; }
.film, .film body { background-color: #1e2444; }
.edge-b { display: none; }
.film .stage:not(.ready) .sky { opacity: 0; }
.film .stage:not(.ready) .clouds { opacity: 0 !important; }
.film .stage:not(.ready) .poster { opacity: 0; }
.film .stage:not(.ready) .title, .film .stage:not(.ready) .beat-1, .film:not(.is-ready) .site-header nav { visibility: hidden; animation: unhide 0s 3s forwards; }
.film .stage.ready .title, .film .stage.ready .sun, .film .stage.ready .beat-1, .film.is-ready .site-header nav { animation: show .5s ease backwards; }
@keyframes unhide { to { visibility: visible; } }
@keyframes show { from { opacity: 0; } }
.film .edge-b { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 1px; z-index: 30; pointer-events: none; background-color: #0e0f11; }
.stage { --h: min(56vh, calc(44vw + 120px)); --edge: max(32px, var(--safe), calc((100vw - var(--wrap)) / 2 + 32px)); position: relative; display: flex; flex-direction: column; gap: 20px; padding: 0 var(--edge) 56px; overflow: clip; max-width: none; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: var(--h); overflow: hidden; }
.sky > div { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--h) * .84); }
.sky-a { background: linear-gradient(180deg, #161c38 0%, #1c2340 24%, #433564 33%, #a55c58 41%, #ee9a55 46%, #ffc777 50%, #0e0f11 57%); }
.sky-b { background: linear-gradient(180deg, #10152c 0%, #141a36 24%, #332752 34%, #96445a 42%, #e4713f 47%, #f08a4b 50%, #0e0f11 57%); }
.sky-c { background: linear-gradient(180deg, #0a0c15 0%, #0d101c 24%, #151a2e 36%, #231f3c 44%, #4a2f4a 49%, #54304a 50%, #0e0f11 57%); }
.film .sky-a, .film .sky-b { will-change: opacity; }
.film .sky { transition: opacity .7s; inset: 0; height: auto; overflow: visible; transform: translateY(var(--sky, -49vh)); will-change: transform; }
.film .sky > div { height: 200vh; }
.stars, .clouds, .birds, .terrain, .marks, .sun-near { display: none; }
.sun { position: absolute; left: 70%; top: calc(var(--h) * .13); width: clamp(52px, 5.4vw, 76px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff1d0 0 38%, #ffe0a3 62%, #ffc66f 100%); box-shadow: 0 0 120px 60px rgba(255, 186, 104, .42); }
.poster { position: absolute; left: 0; right: 0; top: 0; height: var(--h); z-index: 1; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.title, .beat, .pin { position: relative; z-index: 2; }
html:not(.film) .sky-a { background: linear-gradient(180deg, #161c38 0%, #1c2340 24%, #433564 33%, #a55c58 41%, #ee9a55 46%, #ffc777 50%); }
html:not(.film) .title { box-sizing: border-box; height: var(--h); margin: 0 0 8px; padding-top: calc(var(--h) * .15); }
html:not(.film) .pin { position: absolute; right: var(--edge); bottom: 56px; }
html:not(.film) .beat { opacity: 1 !important; transform: none !important; visibility: visible !important; }
html:not(.film) .poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(0deg, var(--bg), rgba(14, 15, 17, 0)); }
.title {
  font-size: clamp(42px, 5.8vw, 100px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.line { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 .1em .06em 0; margin-right: -.1em; white-space: nowrap; }
.line > span { display: block; }
.role { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.role span { white-space: nowrap; }
.role i { font-style: normal; }
.lead { margin-top: 14px; max-width: 680px; font-size: 19px; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pin { width: 120px; }
.pin img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.pin span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 13px; color: var(--text); }

/* Hero: Film */
.film .site-header { position: fixed; left: 0; right: 0; background: rgba(14, 15, 17, calc(.84 * var(--solid, 0))); backdrop-filter: blur(calc(12px * var(--solid, 0))); -webkit-backdrop-filter: blur(calc(12px * var(--solid, 0))); }
.film .site-header:not(.is-solid) nav a:not(.nav-cta) { color: var(--text); }
.film .progress { opacity: 0; transition: opacity .35s; }
.film .site-header.is-solid .progress { opacity: 1; }
.film .stage { background: var(--bg); position: sticky; top: 0; display: block; padding: 0; height: 100vh; height: 100lvh; --bars: calc(100lvh - 100svh); }
.film .stars { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.film .clouds { display: block; position: absolute; left: -4vw; top: 0; z-index: 1; width: 110vw; min-width: 900px; max-width: none; height: auto; opacity: .9; transform: translate3d(0, var(--cy, 0), 0); will-change: transform, opacity; }
.film .clouds { animation: drift 110s ease-in-out infinite alternate; }
@keyframes drift { to { translate: -5vw 0; } }
.film .birds { display: block; position: absolute; right: -180px; top: 15vh; z-index: 1; width: 104px; overflow: visible; animation: fly 240s linear 6s infinite; }
.birds path { fill: none; stroke: #241a33; stroke-width: 1.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 90%; animation: flap .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes flap { to { transform: scaleY(.45); } }
@keyframes fly { 25%, 100% { transform: translate3d(calc(-100vw - 300px), -7vh, 0); } }
.film .terrain { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transition: opacity .6s; }
.film .terrain.is-on { opacity: 1; }
.film .poster { z-index: 3; top: 0; bottom: 0; height: auto; transition: opacity .6s; }
.film .poster { overflow: hidden; }
.film .poster img { position: absolute; left: calc(50% + var(--px, 0px)); top: var(--pt, 0); width: var(--pw, 100%); max-width: none; height: auto; object-fit: fill; transform: translateX(-50%); }
.film .terrain.is-on ~ .marks { opacity: 1; }
.film .poster.is-off { opacity: 0; }
.film .title { position: absolute; z-index: 2; left: var(--edge); top: 16vh; margin: 0; }
@media (min-aspect-ratio: 1/1) {
  .film .title { left: auto; right: var(--edge); white-space: nowrap; }
}
.ii { display: inline-block; }
.film .sun, .film .sun-near {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  will-change: transform;
}
.film .sun { opacity: 0; transition: opacity .6s; transform: translate3d(70vw, 34vh, 0); z-index: 1; background: radial-gradient(circle, #fff1d0 0 38%, #ffe0a3 62%, #ffc66f 100%); box-shadow: 0 0 120px 60px rgba(255, 186, 104, .42), 0 0 40px 12px rgba(255, 214, 150, .55); }
.film .sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: var(--flat, 1); }
.film .sun.is-on { transition: none; }
.film .sun-near { z-index: 5; background: #ffe6b8; box-shadow: 0 0 120px 40px rgba(255, 214, 150, .5); opacity: 0; }
.film .marks { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .6s; overflow: hidden; }
.mark { position: absolute; left: 0; top: 0; padding-left: 7px; font-family: var(--mono); font-size: 13px; line-height: 1.25; color: #08060c; text-shadow: 0 0 8px rgba(255, 205, 150, .75); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.mark.flip { padding: 0 7px 0 0; text-align: right; }
.mark.flip::after { left: auto; right: 0; }
.mark.on-tower { padding: 0; }
.mark.on-tower::after { display: none; }
.mark.light { color: #f6f5f7; text-shadow: 0 0 5px rgba(14, 15, 17, .9), 0 0 2px rgba(14, 15, 17, .7); }
.mark b { font-weight: 400; display: block; }
.mark::after { content: ""; position: absolute; left: 0; top: 2px; width: 1px; height: calc(100% + var(--stem, 44px) - 2px); background: #08060c; }
.film .beat { position: absolute; z-index: 6; }
.film .beat-1 { left: var(--edge); bottom: calc(clamp(36px, 8.5vh, 88px) + var(--bars, 0px)); max-width: 780px; }
.film .beat-1 .lead { max-width: none; text-wrap: balance; }
.film .beat-2 { left: var(--edge); bottom: calc(clamp(48px, 12vh, 120px) + var(--bars, 0px)); max-width: 560px; opacity: 0; }
.film .beat-1, .film .beat-2, .film .title { will-change: transform; }
.film .beat-2 .lead { margin: 0; font-size: 21px; line-height: 1.5; color: var(--text); }
.film .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 4; pointer-events: none; opacity: var(--end, 0); background: linear-gradient(0deg, var(--bg), rgba(14, 15, 17, 0)); }
.film .pin { position: absolute; left: 0; top: 0; z-index: 6; width: 76px; margin: -38px 0 0 -38px; opacity: 0; will-change: transform, opacity; }
.film .pin img { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(255, 181, 71, .2); }
.film .pin span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: rgba(14, 15, 17, .86); }

/* Vita: stacking cards */
.vita { display: flex; flex-wrap: wrap; gap: 48px; }
.vita-head { flex: 1 1 280px; align-self: flex-start; position: sticky; top: 110px; }
.vita-head h2 { line-height: 1.02; }
.vita-head .muted { margin-top: 16px; max-width: 360px; }
.vita-main { flex: 2 1 520px; min-width: 0; }
.stack { list-style: none; margin: 0 0 12px; padding: 0; }
.stack-card {
  position: sticky;
  top: 110px;
  margin-bottom: 16px;
  padding: 22px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s;
}
.stack-card:nth-child(2) { top: 122px; background: var(--surface-2); }
.stack-card:nth-child(3) { top: 134px; background: var(--surface-3); }
.stack-card:nth-child(4) { top: 146px; background: #222328; }
.stack-card:nth-child(5) { top: 158px; }
.stack-card:hover { border-color: #4a4b52; }
.stack-label { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.stack-card h3 { margin: 8px 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; hyphens: manual; }
.stack-card p { color: var(--text-2); font-size: 17px; line-height: 1.55; }
.stack-card.is-now { position: relative; top: auto; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.stack-card.is-now .stack-label,
.stack-card.is-now p { color: var(--accent-ink); }

.sport {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sport .photo { flex: 0 1 240px; border-radius: 14px; overflow: hidden; }
.sport img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 24%; transition: transform .6s var(--ease); }
.sport .photo:hover img { transform: scale(1.05); }
.sport-text { flex: 1 1 260px; }
.sport-text .stack-label { display: block; margin-bottom: 6px; }
.sport p { color: var(--text-2); }

/* Höhenprofil */
.trail-box { position: relative; margin-top: 32px; max-width: 360px; }
.trail { display: block; width: 100%; height: 120px; overflow: visible; --t: 0; }
.trail path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trail-base { stroke: var(--line-2); }
.trail-line { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); }
.trail-pts { position: absolute; left: 0; top: 0; }
.trail-pts circle { fill: var(--bg); stroke: var(--line-2); stroke-width: 2; transition: fill .3s, stroke .3s; }
.trail-pts circle.on { fill: var(--accent); stroke: var(--accent); }
.trail-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* Projects */
#arbeit h2 { margin-bottom: 40px; }
.projects { display: grid; gap: 28px; margin-bottom: 20px; }
.proj {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  transition: border-color .3s;
}
.proj:hover { border-color: #4a4b52; }
.proj-text { flex: 1 1 420px; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.proj h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.proj-text .proj-kicker { margin-bottom: -8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.proj-link { text-decoration: none; }
.proj-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.devices a.photo { cursor: zoom-in; }
.laptop-screen { display: block; }
.proj-text p { color: var(--text-2); }
.proj .tech { margin-top: auto; font-family: var(--mono); font-size: 13px; color: var(--faint); }
.arrow { display: inline-block; font-size: .7em; vertical-align: .12em; color: var(--accent); transition: transform .35s var(--ease); }
.proj-link:hover .arrow { transform: translate(6px, -6px); }
.proj-shot { flex: 1.3 1 460px; min-width: 0; padding: 36px; display: flex; align-items: center; }
.nowrap { white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.devices { position: relative; width: 100%; padding: 0 11% 4% 5%; isolation: isolate; }
.laptop { position: relative; transition: transform .7s var(--ease); }
.laptop-screen {
  background: #08090a;
  border: 1px solid #34353b;
  border-radius: 12px 12px 3px 3px;
  padding: 2.4% 2.4% 3.2%;
}
.laptop-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: 2px;
}
.laptop-base {
  position: relative;
  height: 0;
  padding-bottom: 3.4%;
  margin: 0 -7%;
  background: linear-gradient(180deg, #3d3e45 0%, #26272c 55%, #18191c 100%);
  border-radius: 2px 2px 16px 16px / 2px 2px 100% 100%;
  box-shadow: 0 22px 34px -20px rgba(0, 0, 0, .9);
}
.laptop-base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 15%;
  height: 40%;
  transform: translateX(-50%);
  background: #1b1c20;
  border-radius: 0 0 8px 8px;
}
.phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  padding: 1.1%;
  background: #08090a;
  border-radius: 14% / 6.5%;
  box-shadow: 0 0 0 1px #3a3b41, -14px 18px 40px -14px rgba(0, 0, 0, .85);
  transition: transform .7s var(--ease);
}
.phone::before {
  content: "";
  position: absolute;
  top: 2.6%;
  left: 50%;
  z-index: 1;
  width: 28%;
  height: 2.3%;
  transform: translateX(-50%);
  background: #08090a;
  border-radius: 999px;
}
.phone img {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 11% / 5.2%;
}
.devices.duo { padding-right: 30%; }
.devices.duo .phone { right: 22%; width: 19%; z-index: 1; }
.devices.duo .phone.app {
  right: 0;
  bottom: 0;
  width: 25%;
  z-index: 2;
  transform: rotate(2deg);
  box-shadow: 0 0 0 1px #4a4b52, 0 0 0 5px rgba(255, 181, 71, .16), -18px 24px 50px -16px rgba(0, 0, 0, .9);
}
.dev-tag {
  position: absolute;
  top: -11px;
  left: -12px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s, translate .3s var(--ease);
  translate: 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.laptop:hover,
.laptop:focus-within { transform: translateY(-8px) scale(1.02); }
.phone:hover,
.phone:focus-visible { transform: translateY(-12px) rotate(-1.5deg); z-index: 3; }
.devices.duo .phone.app:hover,
.devices.duo .phone.app:focus-visible { transform: translateY(-12px) rotate(3deg); z-index: 3; }
.laptop:hover .dev-tag,
.laptop:focus-within .dev-tag,
.phone:hover .dev-tag,
.phone:focus-visible .dev-tag { opacity: 1; translate: 0; }
.laptop:hover::after,
.phone:hover::after { content: ""; position: absolute; inset: -6px; }
.laptop:hover::after { z-index: -1; transform: scale(.9804) translateY(8px); }
.phone:hover::after { transform: rotate(1.5deg) translateY(12px); }
.devices.duo .phone.app:hover::after { transform: rotate(-3deg) translateY(12px) rotate(2deg); }

/* Photo marquee */
.fotos-head { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; margin-bottom: 32px; }
.fotos-head > div { flex: 1 1 320px; }
.fotos-head > p { flex: 1.4 1 420px; }
.strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -3px; }
.marquee { display: flex; width: max-content; }
.strip-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.strip-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.strip-btn:hover { border-color: var(--accent); background: var(--surface); }
.marquee .photo { display: block; margin-right: 16px; border-radius: 18px; overflow: hidden; flex: none; }
.marquee img { height: 360px; width: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.marquee .photo:hover img { transform: scale(1.04); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(6, 7, 8, .9); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; border-radius: 12px; margin: 0 auto; }
.lightbox-caption { color: var(--text); font-size: 14px; text-align: center; margin-top: 10px; }
.lightbox-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(14, 15, 17, .82);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(40, 41, 46, .95); }

/* Contact */
.kontakt { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); padding-top: 100px; padding-bottom: clamp(130px, 15vw, 220px); }
.kontakt-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.05em; }
.big-mail {
  display: inline-block;
  margin-top: 8px;
  padding-bottom: 6px;
  text-decoration: none;
  color: var(--accent);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.big-mail:hover { background-size: 100% 2px; }
.kontakt-text .muted { margin-top: 24px; color: #f1f0f2; text-shadow: 0 1px 10px rgba(14, 15, 17, .85); text-wrap: pretty; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.form-row label { flex: 1 1 180px; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label span { font-size: 13px; color: #e8e7ea; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: rgba(14, 15, 17, .6);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 13px 14px;
  resize: vertical;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.form-grow { flex: 1; grid-template-rows: auto 1fr; }
.form-grow textarea { min-height: 128px; }
.form-foot { display: flex; align-items: center; gap: 16px; }
.btn-send { margin-left: auto; flex: none; padding: 10px 24px; font-size: 15px; color: var(--text); background: rgba(14, 15, 17, .75); border-color: rgba(255, 255, 255, .28); }
.btn-send:hover { border-color: var(--accent); }
.form-note { font-size: 13px; color: var(--faint); background: rgba(14, 15, 17, .72); padding: 6px 10px; border-radius: 8px; }
.form-note:empty { display: none; }
.form-note:not(.is-error) { color: var(--text-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn:disabled { opacity: .85; cursor: progress; transform: none; }
.form-note.is-error { color: #ff9a85; }

/* Abschluss: Abendhimmel hinter dem Kamm */
main { position: relative; }
.dawn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; --ridge: clamp(230px, 22.3vw, 338px); height: calc(var(--ridge) * 2.5); overflow: hidden; --k: 1; }
.dawn-sky { position: absolute; inset: 0; opacity: calc(var(--k) * 1.7); background: radial-gradient(46% 34% at var(--glow, 82%) 88%, rgba(255, 196, 120, .75), rgba(255, 170, 96, 0) 70%), linear-gradient(180deg, rgba(14, 15, 17, 0) 0, rgba(38, 30, 62, .72) 30%, #4a2b56 55%, #8a3f5b 75%, #d9713f 88%, #f2a65a 96%, #f7c47c 100%); }
.dawn-clouds { position: absolute; left: -6%; bottom: calc(var(--ridge) * .5); width: 116%; max-width: none; height: auto; opacity: calc(var(--k) * .34); }
.dawn-sun { position: absolute; left: 79%; bottom: calc(var(--ridge) * .56); width: clamp(52px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff1d0 0 38%, #ffe0a3 62%, #ffc66f 100%); transform: translate3d(0, calc(var(--k) * 92%), 0); box-shadow: 0 0 90px 34px rgba(255, 196, 120, .5); }
.dawn svg { position: absolute; left: -30%; bottom: -1px; width: 130%; max-width: none; height: var(--ridge); overflow: visible; }
.dawn svg { fill: #08090a; }
.dawn .kamm-fern { fill: #6e3346; }

/* Footer */
.site-footer { background: #08090a; font-size: 14px; color: var(--faint); padding-bottom: env(safe-area-inset-bottom); }
.legal ~ .site-footer, body:not(.home) .site-footer { background: none; border-top: 1px solid var(--line); }
.geo-note { font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.footer-inner nav { display: flex; gap: 20px; }
.footer-inner a { text-decoration: none; }
.footer-inner a:hover { color: var(--text); }

/* Legal pages */
.legal { padding: 64px 0 96px; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 32px; }
.legal h2 { font-size: 21px; letter-spacing: -0.01em; margin: 36px 0 8px; }
.legal p, .legal li { color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@keyframes grow { to { transform: scaleX(1); } }

/* Responsive */
@media (max-aspect-ratio: 1/1) {
  .film .beat-2 { right: var(--edge); bottom: calc(max(28px, env(safe-area-inset-bottom)) + var(--bars, 0px)); max-width: none; }
  .film .beat-2 .lead { font-size: 18px; }
  .film .title { font-size: 11.6vw; top: 19vh; }
  .role span { display: block; }
  .role i { display: none; }
  .film .beat-1 { right: var(--edge); bottom: calc(max(28px, env(safe-area-inset-bottom)) + var(--bars, 0px)); max-width: none; }
}
@media (max-width: 911px) {
  .vita-head { position: static; }
  html:not(.film) .pin { position: relative; right: auto; bottom: auto; margin-top: 12px; }
  .kontakt { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kontakt.wrap { padding-bottom: 165px; }
}
@media (max-width: 720px) {
  .dawn svg { left: -70%; width: 240%; max-width: none; }
  .dawn-sun { left: 26%; }
  .dawn { --glow: 30%; }
  .stack-card { padding: 20px 22px; }
  .stack-card h3 { font-size: 21px; }
  .proj-text { padding: 28px; }
  .proj h3 { font-size: 25px; }
  .marquee img { height: 230px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 max(16px, var(--safe)); }
  .stage { --edge: max(16px, var(--safe)); --h: 64vh; }
  .sun { top: calc(var(--h) * .23); }
  html:not(.film) .title { font-size: 40px; }
  .site-header nav { gap: 16px; }
  .site-header nav a[href="#fotos"] { display: none; }
  .site-header nav a:not(.nav-cta) { font-size: 14px; }
  .section { padding-top: 80px; }
  .stack-card:not(.is-now) { top: 84px !important; }
  .stack-card { margin-bottom: 12px; }
  .proj-shot { padding: 4px 20px 28px; }
  .trail-box { max-width: none; }
  .footer-inner { flex-direction: column; }
  .footer-inner > span { text-wrap: pretty; }
}

@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .film .title { top: 62px; font-size: 40px; }
  .film .beat-1 { bottom: calc(14px + var(--bars, 0px)); }
  .film .beat-1 .lead { margin-top: 6px; font-size: 16px; max-width: 480px; }
  .film .beat-1 .hero-actions { margin-top: 12px; }
  .film .beat-2 { bottom: calc(20px + var(--bars, 0px)); max-width: 46vw; }
  .film .beat-2 .lead { font-size: 15px; }
  .film .pin { width: 56px; margin: -28px 0 0 -28px; }
}

@media (max-height: 700px) and (max-aspect-ratio: 1/1), (max-width: 420px) {
  .film .beat-1 .lead { font-size: 17px; }
  .film .beat-1 .hero-actions { flex-wrap: nowrap; gap: 8px; margin-top: 18px; }
  .film .beat-1 .btn { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
}
@media (max-width: 369px) {
  .film .beat-1 .hero-actions { flex-wrap: wrap; }
  .film .beat-1 .btn { padding-left: 12px; padding-right: 12px; }
}