/* judet – mystisch/ethereal × Swiss. Farben: Lila, Pastellrot, Dunkelgrau; Akzent: warmes, leuchtendes Gold. */
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #0f0e13; --bg2: #17151c; --grey: #2b2932; --line: rgba(239, 233, 242, .12);
  --ink: #efe9f2; --mute: #9a94a6; --dim: #6b6676;
  --lila: #a58bd9; --lila-d: #5d4691; --rose: #eea29d; --rose-d: #c7737a;
  --gold: #f1c46d; --gold-hi: #ffe2a3; --gold-d: #b8893a;
  --glow: 0 0 18px rgba(241, 196, 109, .55);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(16px, 3.4vw, 52px); --gut: clamp(12px, 1.6vw, 24px); --hd: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em { font-style: italic; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold); color: var(--bg); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--gold); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }

/* ── Ebenen ───────────────────────────────────────────── */
.gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; }
main, .ft { position: relative; z-index: 1; }
.trail { position: fixed; inset: 0; z-index: 90; pointer-events: none; width: 100vw; height: 100vh; }
.warp { position: fixed; inset: 0; z-index: 95; pointer-events: none; width: 100vw; height: 100vh; opacity: 0; }
html.is-arriving .warp { opacity: 1; background: #fff4dc; }
html.is-warping .warp { opacity: 1; pointer-events: auto; }

/* ── Header: Logo links, Auge trennt in der Mitte, Menü rechts ── */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hd); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); background: linear-gradient(to bottom, rgba(15, 14, 19, .94), rgba(15, 14, 19, .78) 55%, rgba(15, 14, 19, 0)); pointer-events: none; }
.hd > * { pointer-events: auto; }
.logo { justify-self: start; font: italic 400 36px/1 var(--serif); letter-spacing: .01em; color: var(--ink); padding: 6px 2px; transition: color .3s, text-shadow .3s; }
.logo:hover { color: var(--gold-hi); text-shadow: var(--glow); }
.eye { position: relative; width: 92px; height: 49px; }
.eye::before, .eye::after { content: ""; position: absolute; top: 53%; width: min(25vw, 380px); height: 1px; pointer-events: none; }
.eye::before { right: calc(100% + 10px); background: linear-gradient(to left, rgba(241, 196, 109, .55), rgba(241, 196, 109, 0)); }
.eye::after { left: calc(100% + 10px); background: linear-gradient(to right, rgba(241, 196, 109, .55), rgba(241, 196, 109, 0)); }
.eye-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(241, 196, 109, .35)); }
.eye-rays path { stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; fill: none; opacity: .75; }
.eye-rays { transform-box: view-box; transform-origin: 60px 34px; animation: rays 6s ease-in-out infinite; }
@keyframes rays { 50% { opacity: .45; transform: scale(1.06); } }
.eye-line { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; }
.eye-fibers path { stroke: rgba(255, 240, 205, .55); stroke-width: .7; stroke-linecap: round; }
.eye-lid { transform-box: view-box; transform-origin: 60px 34px; transition: transform .13s var(--ease-io); }
.eye.blink .eye-lid { transform: scaleY(.05); }
.nav { justify-self: end; display: flex; gap: clamp(18px, 2.6vw, 40px); }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; font: 500 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current]::before { content: "✦"; font-size: 9px; color: var(--gold); text-shadow: var(--glow); }

/* ── Typo-Bausteine ───────────────────────────────────── */
.meta { margin: 0; font: 500 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.glyph { color: var(--gold); }
.sl { color: var(--gold); letter-spacing: 0; }
.label { margin: 0 0 22px; display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.label::after { content: ""; width: 56px; height: 1px; background: linear-gradient(to right, var(--gold), transparent); }
.label-n { font: italic 500 20px/1 var(--serif); letter-spacing: 0; color: var(--gold); text-transform: none; }
.sec-title em, .hero-type em, .outro-type em, .anat-title em, .c-title em { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--gold); background: linear-gradient(100deg, var(--gold-hi), var(--gold) 45%, var(--rose) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.arrow-link { display: inline-flex; gap: 10px; align-items: center; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.arrow-link span { transition: transform .4s var(--ease); }
.arrow-link:hover span { transform: translate(3px, 3px); }

/* Wörter, die beim Scrollen aufsteigen (data-split → .wd > span) */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wd > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.is-in .wd > span { transform: none; }
[data-reveal] { opacity: 0; transform: translateY(60px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── HERO (Swiss-Komposition) ─────────────────────────── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero .meta { position: absolute; z-index: 2; }
.meta-tl { left: var(--pad); top: calc(var(--hd) + 18px); }
.meta-tr { right: var(--pad); top: calc(var(--hd) + 18px); text-align: right; text-transform: none; letter-spacing: .02em; font-size: 12px; max-width: 250px; }
.meta-bl { left: var(--pad); bottom: 28px; }
.meta-br { right: var(--pad); bottom: 28px; display: flex; align-items: center; gap: 14px; }
.scroll-cue { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero-ghost { position: absolute; right: -4vw; bottom: -9vw; font: italic 300 39vw/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(239, 233, 242, .06); pointer-events: none; user-select: none; letter-spacing: -.03em; }
.hero-type { position: absolute; inset: 0; margin: 0; font: 500 clamp(64px, 10.6vw, 200px)/.86 var(--sans); letter-spacing: -.055em; pointer-events: none; }
.hw { position: absolute; display: block; overflow: hidden; padding: 0 .08em .1em 0; will-change: transform; }
.hw > span { display: block; transform: translateY(110%); transition: transform 1.3s var(--ease); }
.is-ready .hw > span { transform: none; }
.hw1 { left: 11vw; top: calc(var(--hd) + 9vh); }
.hw2 { left: 34vw; top: calc(var(--hd) + 9vh + .92em); }
.hw2 > span { transition-delay: .09s; }
.hw3 { left: 19vw; top: calc(var(--hd) + 9vh + 1.84em); font-size: 1.14em; }
.hw3 > span { transition-delay: .18s; }
.hero-card { position: absolute; z-index: 3; left: 50vw; top: calc(var(--hd) + 9vh + .8 * clamp(64px, 10.6vw, 200px)); width: clamp(250px, 19vw, 310px); padding: 18px 18px 20px; background: var(--rose); color: #1d1519; box-shadow: 0 30px 80px -20px rgba(238, 162, 157, .35); clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease) .45s; }
.is-ready .hero-card { clip-path: inset(0); }
.hero-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.hero-card .hero-card-k { font: italic 500 26px/1 var(--serif); margin-bottom: 26px; }
.hero-card sup { font: 400 11px/1 var(--sans); color: #6e3d40; margin-left: 2px; }
.hero-wake { position: absolute; z-index: 3; left: calc(50vw + clamp(250px, 19vw, 310px) + 22px); top: calc(var(--hd) + 9vh + .8 * clamp(64px, 10.6vw, 200px) + 84px); display: flex; align-items: center; gap: 12px; font: 500 11px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity 1s .9s; }
.is-ready .hero-wake { opacity: 1; }
.wake-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--gold); color: var(--gold); box-shadow: var(--glow), inset 0 0 12px rgba(241, 196, 109, .25); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 32px rgba(241, 196, 109, .75), inset 0 0 14px rgba(241, 196, 109, .35); } }

/* ── PROLOG (sticky, Wort für Wort) ───────────────────── */
.prolog { position: relative; height: 270vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--hd) var(--pad) 0; }
.prolog .sticky { padding-left: calc(var(--pad) + 8.33vw); padding-right: calc(var(--pad) + 8.33vw); }
.prolog-text { margin: 0; max-width: 18em; font: 400 clamp(30px, 4.7vw, 80px)/1.06 var(--serif); letter-spacing: -.01em; }
.prolog-text .pw { opacity: .13; transition: opacity .5s, color .5s, text-shadow .5s; }
.prolog-text .pw.on { opacity: 1; }
.prolog-text .pw.gold.on { color: var(--gold); text-shadow: 0 0 24px rgba(241, 196, 109, .4); font-style: italic; }

/* ── Abschnittsköpfe ─────────────────────────────────── */
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: 22vh var(--pad) 8vh; align-items: end; }
.sec-head .label { grid-column: 1 / -1; }
.sec-title { grid-column: 1 / span 8; margin: 0; font: 500 clamp(52px, 8.4vw, 150px)/.9 var(--sans); letter-spacing: -.055em; }
.sec-note { grid-column: 10 / span 3; margin: 0 0 .6em; font-size: 14px; color: var(--mute); max-width: 300px; }

/* ── PANTHEON ─────────────────────────────────────────── */
.gods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); padding: 0 var(--pad) 18vh; }
.god { margin: 0; }
.god-mid { margin-top: 14vh; }
.god-stage { position: relative; aspect-ratio: 3 / 5; width: 100%; touch-action: pan-y; }
.god-stage::before { content: ""; position: absolute; inset: 8% 14%; border: 1px solid var(--line); border-bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; pointer-events: none; transition: border-color .6s; }
.god-stage:hover::before { border-color: rgba(241, 196, 109, .35); }
.god figcaption, .c-statue figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--line); }
.god-n { grid-row: span 3; font: italic 400 44px/1 var(--serif); color: var(--gold); min-width: 1.2em; }
.god-gr { font: 500 10px/1 var(--sans); letter-spacing: .38em; color: var(--mute); }
.god-name { font: italic 400 34px/1.1 var(--serif); }
.god-txt { font-size: 13.5px; color: var(--mute); max-width: 32ch; margin-top: 6px; }

/* ── WERKE auf Nebeln ─────────────────────────────────── */
.works { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 16vh; padding: 6vh var(--pad) 24vh; }
.works-empty { grid-column: 3 / span 8; text-align: center; font: italic 400 30px/1.3 var(--serif); color: var(--mute); }
.work { margin: 0; grid-column: 1 / span 5; perspective: 1200px; }
.work:nth-child(3n+2) { grid-column: 7 / span 5; margin-top: 28vh; }
.work:nth-child(3n) { grid-column: 3 / span 7; }
.plate { position: relative; width: min(100%, calc(76vh * var(--ar, .8) + 30px)); margin-inline: auto; padding: 1px; background: linear-gradient(160deg, rgba(241, 196, 109, .55), rgba(165, 139, 217, .25) 50%, rgba(238, 162, 157, .4)); --c: 16px; clip-path: polygon(var(--c) 0, calc(50% - 46px) 0, calc(50% - 32px) 11px, calc(50% + 32px) 11px, calc(50% + 46px) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease); transform-style: preserve-3d; }
.plate-in { position: relative; background: rgba(17, 15, 22, .66); clip-path: inherit; padding: 0 14px; }
.plate-top, .plate-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.plate-top { height: 46px; padding-top: 6px; }
.plate-top .glyph { font-size: 15px; transition: transform 1.2s var(--ease); text-shadow: var(--glow); }
.work:hover .plate-top .glyph { transform: rotate(180deg) scale(1.2); }
.dots::before { content: "●○"; letter-spacing: .1em; font-size: 7px; color: var(--gold); }
.plate-bot { min-height: 68px; padding: 14px 0 16px; }
.plate-bot .t { font: 400 clamp(20px, 2vw, 30px)/1.05 var(--serif); letter-spacing: .14em; color: var(--ink); text-transform: uppercase; }
.plate-bot .m { text-align: right; line-height: 1.5; }
.work-img { display: block; width: 100%; position: relative; overflow: hidden; --c2: 10px; clip-path: polygon(var(--c2) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c2)); background: #1c1924; }
.work-img img { width: 100%; height: auto; aspect-ratio: var(--ar, .8); object-fit: cover; transform: scale(1.18); transition: transform 1.8s var(--ease), filter .8s; filter: saturate(.9); }
.work-img::after { content: ""; position: absolute; inset: 0; background: var(--bg2); transform-origin: top; transition: transform 1.3s var(--ease-io); }
.work.is-in .work-img img { transform: scale(1); }
.work.is-in .work-img::after { transform: scaleY(0); }
.work.is-in:hover .work-img img { transform: scale(1.035); filter: saturate(1.05); }
.work { opacity: 0; transform: translateY(80px); transition: opacity 1.2s var(--ease), transform 1.5s var(--ease); }
.work.is-in { opacity: 1; transform: none; }

/* ── Lightbox ─────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; justify-items: center; background: rgba(11, 10, 15, .9); clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); transition: clip-path .8s var(--ease-io); }
.lb[hidden] { display: none; }
.lb.is-open { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; }
.lb-fig img { max-width: min(84vw, 1500px); max-height: calc(100svh - 190px); object-fit: contain; box-shadow: 0 40px 120px -30px rgba(165, 139, 217, .45); }
.lb-fig figcaption { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; justify-content: center; text-align: center; }
.lb-n { font: italic 400 22px/1 var(--serif); color: var(--gold); }
.lb-t { font: 400 30px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.lb-m { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.lb-x { position: absolute; top: 22px; right: var(--pad); width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; font-size: 16px; transition: border-color .3s, color .3s; }
.lb-nav { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; transition: border-color .3s, color .3s; }
.lb-x:hover, .lb-nav:hover { border-color: var(--gold); color: var(--gold); }

/* ── ANATOMIE (Explosionszeichnung) ───────────────────── */
.anatomy { position: relative; height: 480vh; }
.anatomy .sticky { display: block; padding: 0; overflow: hidden; }
.anat-stage { position: absolute; top: var(--hd); bottom: 0; left: 34vw; right: 0; touch-action: pan-y; }
.anat-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.anat-lines line { stroke: var(--gold); stroke-width: 1; opacity: .8; }
.anat-lines circle { fill: var(--bg); stroke: var(--gold); stroke-width: 1.2; }
.anat-lines .lost { fill: none; stroke-dasharray: 3 4; opacity: .9; }
.anat-labels { position: absolute; inset: 0; pointer-events: none; }
.al { position: absolute; left: 0; top: 0; width: 210px; padding: 8px 0 0; border-top: 1px solid rgba(241, 196, 109, .6); opacity: 0; }
.al.r { text-align: right; }
.al b { display: block; font: italic 400 22px/1.05 var(--serif); color: var(--gold); }
.al span { display: block; font: 500 10px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.anat-copy { position: absolute; left: var(--pad); top: 50%; transform: translateY(-42%); width: min(30vw, 400px); z-index: 2; }
.anat-title { margin: 0 0 30px; font: 500 clamp(44px, 5.4vw, 92px)/.92 var(--sans); letter-spacing: -.05em; }
.anat-title em { display: block; font-size: .74em; }
.anat-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.anat-steps li { counter-increment: s; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--mute); opacity: .35; transition: opacity .6s, color .6s; }
.anat-steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 15px; font: italic 500 18px/1 var(--serif); color: var(--gold); }
.anat-steps li.on { opacity: 1; color: var(--ink); }
.anat-meta { position: absolute; right: var(--pad); bottom: 28px; }

/* ── OUTRO ────────────────────────────────────────────── */
.outro { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 18vh var(--pad); }
.outro .label { margin-left: 8.33vw; }
.outro-type { margin: 0 0 7vh 8.33vw; max-width: 12em; font: 500 clamp(48px, 7.6vw, 136px)/.92 var(--sans); letter-spacing: -.055em; }
.orb-link { align-self: flex-start; margin-left: 8.33vw; display: inline-flex; align-items: center; gap: 22px; font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.orb-link small { font-size: 10px; color: var(--mute); letter-spacing: .2em; }
.orb { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: 24px; box-shadow: var(--glow), inset 0 0 30px rgba(241, 196, 109, .2); transition: transform .8s var(--ease), background .5s, color .5s; }
.orb-link:hover .orb { transform: scale(1.08) rotate(45deg); background: var(--gold); color: var(--bg); }

/* ── FOOTER ───────────────────────────────────────────── */
.ft { padding: 40px var(--pad) 34px; border-top: 1px solid var(--line); background: linear-gradient(to bottom, rgba(15, 14, 19, 0), rgba(15, 14, 19, .85) 40%); }
.ft-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 20px; margin-bottom: 26px; }
.ft-logo { margin: 0; font: italic 400 30px/1 var(--serif); }
.ft-nav { display: flex; gap: 26px; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.ft-nav a:hover, .ft-credits a:hover { color: var(--gold); }
.ft-copy { margin: 0; justify-self: end; font-size: 12px; color: var(--mute); }
.ft-credits { font-size: 11.5px; line-height: 1.7; color: var(--dim); max-width: 1100px; }
.ft-credits p { margin: 0 0 6px; }
.ft-credits b { color: var(--mute); font-weight: 600; letter-spacing: .04em; }
.ft-credits a { color: var(--mute); border-bottom: 1px solid var(--line); }

/* ── Sternbild-Beschriftung ───────────────────────────── */
.const-label { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 6px; opacity: 0; max-width: 270px; will-change: transform, opacity; }
.cl-name { font: 500 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-shadow: var(--glow); }
.cl-de { font: italic 400 30px/1 var(--serif); }
.cl-myth { font-size: 12.5px; line-height: 1.5; color: var(--mute); }

/* ── Cursor + Spur (nur Maus) ─────────────────────────── */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: none; }
html.has-cursor .cur { display: block; }
.cur-dot, .cur-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-hi); box-shadow: 0 0 10px 2px rgba(241, 196, 109, .75); }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(241, 196, 109, .5); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .4s, border-color .4s, opacity .3s; }
.cur.is-link .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(241, 196, 109, .08); border-color: var(--gold); }
.cur.is-view .cur-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: rgba(15, 14, 19, .4); border-color: var(--gold); }
.cur.is-down .cur-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cur.is-hidden { opacity: 0; }
.cur-txt { font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cur.is-view .cur-txt { opacity: 1; }

/* ── KONTAKT ──────────────────────────────────────────── */
.c-hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hd) + 70px) var(--pad) 12vh; }
.c-hero .meta-tl { position: absolute; }
.c-title { position: relative; margin: 0 0 3vh; font: 500 clamp(64px, 9.4vw, 176px)/.9 var(--sans); letter-spacing: -.06em; }
.c-title .hw { position: relative; margin-left: 7.5vw; }
.c-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: start; }
.c-list { grid-column: 2 / span 5; margin: 1vh 0 0; }
.c-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.c-item:last-child { border-bottom: 1px solid var(--line); }
.c-item dt { font: 500 10.5px/2.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.c-item dd { margin: 0; font: 400 clamp(22px, 2.2vw, 34px)/1.25 var(--serif); }
.c-item dd a { background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s; }
.c-item dd a:hover { color: var(--gold-hi); background-size: 100% 1px; }
.c-item:nth-child(4) dd { font: 400 15px/1.6 var(--sans); color: var(--mute); }
.c-statue { grid-column: 8 / span 4; margin: -24vh 0 0; }
.c-statue .god-stage { aspect-ratio: 5 / 7; max-height: 68vh; margin: 0 auto; }
.impressum { padding: 12vh var(--pad) 14vh calc(var(--pad) + 8.33vw); }
.imp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 13.5px; color: var(--mute); max-width: 1100px; }
.imp-grid p { margin: 0; }
.imp-grid b { color: var(--ink); font-weight: 600; letter-spacing: .04em; }

/* ── Handy & Tablet ───────────────────────────────────── */
@media (max-width: 1000px) {
  .sec-title { grid-column: 1 / -1; }
  .sec-note { grid-column: 1 / span 8; margin-top: 22px; }
  .work, .work:nth-child(3n+2), .work:nth-child(3n) { grid-column: 2 / span 10; margin-top: 0; }
  .anat-copy { width: min(42vw, 400px); }
  .anat-stage { left: 40vw; }
  .c-list { grid-column: 1 / span 7; }
  .c-statue { grid-column: 8 / span 5; }
}
@media (max-width: 760px) {
  :root { --hd: 64px; }
  body { font-size: 14.5px; }
  .logo { font-size: 30px; }
  .eye { width: 62px; height: 33px; }
  .eye::before, .eye::after { display: none; }
  .nav { gap: 16px; }
  .nav a { font-size: 10.5px; letter-spacing: .16em; }
  .nav a[aria-current]::before { display: none; }
  .hero { min-height: 600px; }
  .hero-type { font-size: 19vw; }
  .hw1 { left: 6vw; top: calc(var(--hd) + 13vh); }
  .hw2 { left: 20vw; top: calc(var(--hd) + 13vh + .92em); }
  .hw3 { left: 5vw; top: calc(var(--hd) + 13vh + 1.84em); }
  .meta-tr { display: none; }
  .hero-card { left: var(--pad); right: var(--pad); top: auto; bottom: 84px; width: auto; padding: 16px; }
  .hero-card .hero-card-k { margin-bottom: 12px; }
  .hero-wake { display: none; }
  .hero-ghost { font-size: 62vw; bottom: 20vh; }
  .prolog .sticky { padding-left: var(--pad); padding-right: var(--pad); }
  .prolog-text { font-size: clamp(28px, 8.4vw, 44px); }
  .sec-head { padding-top: 16vh; }
  .sec-note { grid-column: 1 / -1; }
  .gods { grid-template-columns: 1fr; gap: 9vh; }
  .god-mid { margin-top: 0; }
  .god-stage { aspect-ratio: 4 / 5; max-height: 68svh; margin: 0 auto; }
  .works { row-gap: 12vh; }
  .work, .work:nth-child(3n+2), .work:nth-child(3n) { grid-column: 1 / -1; }
  .plate-top { height: 40px; }
  .anatomy { height: 420vh; }
  .anat-stage { left: 0; top: 34svh; }
  .anat-copy { top: calc(var(--hd) + 14px); transform: none; left: var(--pad); right: var(--pad); width: auto; }
  .anat-title { font-size: 38px; margin-bottom: 12px; }
  .anat-title em { display: inline; }
  .anat-steps li { display: none; padding: 10px 0 0 36px; font-size: 13.5px; }
  .anat-steps li.on { display: block; }
  .anat-copy .label { margin-bottom: 12px; }
  .al { width: 130px; }
  .al b { font-size: 17px; }
  .al span { font-size: 8.5px; letter-spacing: .1em; }
  .anat-meta { display: none; }
  .outro .label, .outro-type, .orb-link { margin-left: 0; }
  .orb { width: 84px; height: 84px; }
  .ft-row { grid-template-columns: 1fr; gap: 14px; }
  .ft-copy { justify-self: start; }
  .lb { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 70px 12px 24px; }
  .lb-fig { grid-column: 1 / -1; grid-row: 1; }
  .lb-fig img { max-width: 100%; max-height: calc(100svh - 230px); }
  .lb-prev { grid-row: 2; justify-self: start; }
  .lb-next { grid-row: 2; justify-self: end; }
  .lb-t { font-size: 22px; }
  .c-hero { padding-top: calc(var(--hd) + 56px); }
  .c-title { font-size: 21vw; }
  .c-title .hw { margin-left: 0; }
  .c-list, .c-statue { grid-column: 1 / -1; }
  .c-item { grid-template-columns: 1fr; gap: 4px; }
  .c-item dt { line-height: 1.4; }
  .c-statue { margin-top: 6vh; }
  .c-statue .god-stage { max-height: 70svh; }
  .impressum { padding-left: var(--pad); }
  .imp-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}