/* Cadensio — Ideen in Bewegung */

@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 600; font-display:swap; src:url(../fonts/cormorant-garamond.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 600; font-display:swap; src:url(../fonts/cormorant-garamond-italic.woff2) format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300 500; font-display:swap; src:url(../fonts/jost.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --paper:#f5f1e8; --paper-2:#efe8db; --paper-3:#e7dece;
  --ink:#1d1c19; --ink-soft:#3b3934; --muted:#7a7368;
  --line:rgba(29,28,25,.12); --line-strong:rgba(29,28,25,.24);
  --bronze:#8a6546; --gold:#b8975a; --gold-soft:#d8c190;
  --night:#161512; --night-2:#1f1d19; --night-ink:#efe8da; --night-muted:#a39a8a; --night-line:rgba(216,193,144,.2);
  --serif:'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans:'Jost', Futura, 'Century Gothic', Arial, sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --header:70px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::after { content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background:var(--gold-soft); color:var(--ink); }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:1px solid var(--bronze); outline-offset:6px; }
em { font-style:italic; }
.shell { max-width:1460px; margin:auto; padding:0 clamp(20px,5.3vw,88px); }
.dot { color:var(--gold); }
.skip { position:absolute; left:16px; top:-60px; z-index:500; padding:12px 18px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; transition:top .3s; }
.skip:focus { top:16px; }

/* ——— Seitenübergänge ——— */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vt-out .45s var(--ease) both; }
::view-transition-new(root) { animation:vt-in .9s var(--ease) both; }
.masthead { view-transition-name:masthead; }
.vt-fallback body { animation:page-in .8s var(--ease); }
.curtain { position:fixed; inset:0; z-index:350; background:var(--paper); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s var(--ease), visibility 0s .45s; }
.is-leaving .curtain { opacity:1; visibility:visible; transition:opacity .45s var(--ease); }

/* ——— Ouvertüre: Goldpunkt → Logo-„O“ → Torus ——— */
.loader { display:none; }
.intro .loader { position:fixed; inset:0; z-index:360; display:grid; place-items:center; visibility:visible; transition:visibility 0s 1.5s; }
.loader::before { content:""; position:absolute; inset:0; background:var(--paper); transition:opacity 1s var(--ease) .25s; }
.overture { position:relative; display:grid; justify-items:center; gap:34px; }
.ov-ring { --tx:0px; --ty:0px; --s:3; width:92px; height:92px; overflow:visible; transform-origin:50% 50%; transition:transform 1.35s cubic-bezier(.7,0,.2,1), opacity .8s ease .55s; }
.ov-halo { transform-box:fill-box; transform-origin:center; opacity:0; animation:ov-halo 2.2s var(--ease) .1s forwards; }
.ov-seed { fill:url(#gold-o); transform-box:fill-box; transform-origin:center; transform:scale(0); animation:ov-seed 1.15s var(--ease) .1s forwards; }
.ov-dot { fill:url(#gold-o); transform-box:fill-box; transform-origin:center; opacity:0; animation:ov-dot .8s var(--ease) .65s forwards; }
.ov-left { --from:66px; } .ov-right { --from:-66px; }
.ov-arc { fill:none; stroke:url(#gold-o); stroke-width:13.5; stroke-dasharray:1; stroke-dashoffset:1; animation:ov-draw 1s cubic-bezier(.65,0,.25,1) 1.05s forwards; }
.ov-caption { font-size:.7rem; letter-spacing:.7em; text-transform:uppercase; color:var(--bronze); opacity:0; animation:ov-caption 1.4s var(--ease) .9s forwards; transition:opacity .22s; }
.intro.is-loaded .loader { visibility:hidden; }
.intro.is-loaded .loader::before { opacity:0; }
.intro.is-loaded .ov-ring { transform:translate(var(--tx), var(--ty)) perspective(800px) rotateX(62deg) scale(var(--s)); opacity:0; }
.intro.is-loaded .ov-caption { opacity:0; }
.intro:not(.is-loaded) .fade, .intro:not(.is-loaded) .line > span, .intro:not(.is-loaded) .lightwrite, .intro:not(.is-loaded) .pen { animation-play-state:paused; }
@keyframes ov-halo { 0% { opacity:0; transform:scale(.2); } 35% { opacity:1; transform:scale(1); } 100% { opacity:.35; transform:scale(1.25); } }
@keyframes ov-seed { 0% { transform:scale(0); } 40% { transform:scale(1.5); } 65% { transform:scale(1); } 100% { transform:scale(0); } }
@keyframes ov-dot { from { opacity:0; transform:translateX(var(--from)) scale(.45); } to { opacity:1; transform:none; } }
@keyframes ov-draw { to { stroke-dashoffset:0; } }
@keyframes ov-caption { from { opacity:0; letter-spacing:.7em; } to { opacity:1; letter-spacing:.42em; } }

/* ——— Animierte Hintergründe (ganz hinten, im Admin einstellbar) ——— */
.ambient-layer { display:none; position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
.ambient .ambient-layer { display:block; }

/* ——— WebGL-Ebene für die Kadenz (liegt hinter den Inhalten) ——— */
.gl-layer { display:none; position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.gl .gl-layer { display:block; }
.gl .stage canvas { visibility:hidden; }
.gl .stage::before { display:none; }

/* ——— Fortschrittslinie ——— */
.progress { position:fixed; left:0; right:0; top:0; z-index:150; height:2px; pointer-events:none; }
.progress span { display:block; height:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--bronze), var(--gold-soft) 70%, var(--gold)); }

/* ——— Eigener Mauszeiger ——— */
.has-cursor, .has-cursor * { cursor:none !important; }
.cursor-dot, .cursor-ring { position:fixed; left:0; top:0; z-index:400; pointer-events:none; border-radius:50%; opacity:0; will-change:transform; }
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity:1; }
.cursor-dot { width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--bronze); transition:opacity .3s, background .4s; }
.cursor-ring { width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(184,151,90,.65); display:grid; place-items:center;
  transition:width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), background .5s, border-color .5s, opacity .3s, scale .3s var(--ease); }
.cursor-ring span { font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper); font-weight:400; opacity:0; transition:opacity .3s; white-space:nowrap; }
.cursor-ring.is-link { width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(216,193,144,.16); border-color:var(--gold); }
.cursor-ring.has-label { width:92px; height:92px; margin:-46px 0 0 -46px; background:var(--bronze); border-color:var(--bronze); }
.cursor-ring.has-label span { opacity:1; }
.cursor-ring.is-down { scale:.82; }
.cursor-dot.is-hidden { opacity:0 !important; }
.on-dark.cursor-dot { background:var(--gold-soft); }

/* ——— Header ——— */
.masthead { position:sticky; top:0; z-index:100; border-bottom:1px solid transparent; transition:border-color .5s; }
.masthead::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(245,241,232,.84); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
.masthead.is-scrolled { border-bottom-color:var(--line); }
.topbar { height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { position:relative; display:block; width:clamp(128px,12.5vw,172px); flex:none; line-height:0; }
.brand img { display:block; width:100%; height:auto; }
.o-mark { position:absolute; left:83.49%; top:9.1%; width:14.57%; height:84.2%; overflow:visible; }
.o-dot { transform-box:fill-box; transform-origin:center; transition:transform .8s var(--ease); }
.brand:hover .o-dot { transform:scale(1.28); }
nav { display:flex; gap:clamp(16px,2.6vw,40px); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400; }
nav a { position:relative; text-decoration:none; padding:6px 0; color:var(--ink-soft); transition:color .3s; }
nav a small { font:italic 400 .88rem var(--serif); letter-spacing:0; text-transform:none; color:var(--gold); margin-right:6px; }
nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
nav a:hover { color:var(--bronze); }
nav a:hover::after { transform:scaleX(1); transform-origin:left; }

/* ——— Hero ——— */
.hero { position:relative; min-height:calc(100svh - var(--header)); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:1fr auto; align-items:center; column-gap:clamp(20px,4vw,60px); padding-top:clamp(40px,6vh,80px); }
.eyebrow { display:flex; align-items:center; gap:14px; color:var(--bronze); font-size:.74rem; letter-spacing:.3em; font-weight:400; text-transform:uppercase; }
.eyebrow::before { content:""; width:44px; height:1px; background:linear-gradient(90deg, transparent, currentColor); }
h1 { margin:34px 0 34px; font-family:var(--serif); font-size:clamp(2.9rem,6.2vw,6.4rem); font-weight:300; letter-spacing:-.025em; line-height:.9; }
.line { display:block; overflow:hidden; padding:0 .12em .1em 0; margin-bottom:-.06em; }
.line > span { display:inline-block; transform:translateY(108%); animation:rise 1.6s var(--ease) forwards; }
.line.lit { overflow:visible; }
.line.lit > span { transform:none; animation:none; }
.lit-wrap { position:relative; display:inline-block; }
.shimmer.lightwrite { display:inline-block; clip-path:inset(-30% 100% -40% -12%); animation:shimmer 9s ease-in-out infinite, write 1.9s cubic-bezier(.6,0,.3,1) .45s forwards; }
.pen { position:absolute; top:-6%; bottom:-2%; left:0; width:.05em; border-radius:1em; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, #fff3d6 25%, #fffdf7 50%, #fff3d6 75%, transparent);
  box-shadow:0 0 .2em .05em rgba(248,226,176,.95), 0 0 .7em .22em rgba(216,183,120,.5), 0 0 1.6em .4em rgba(216,183,120,.22);
  animation:pen-move 1.9s cubic-bezier(.6,0,.3,1) .45s forwards, pen-fade 1.9s linear .45s forwards; }
@keyframes write { 0% { clip-path:inset(-30% 100% -40% -12%); } 92% { clip-path:inset(-30% 0% -40% -12%); } 100% { clip-path:inset(-30% -12% -40% -12%); } }
@keyframes pen-move { 0% { left:0; } 92% { left:100%; } 100% { left:100%; } }
@keyframes pen-fade { 0% { opacity:0; } 6% { opacity:1; } 86% { opacity:1; } 100% { opacity:0; } }
.shimmer { font-style:italic; font-weight:400; padding-right:.06em; background:linear-gradient(100deg, var(--bronze) 18%, #c7a466 36%, #ead8ad 48%, #c7a466 60%, var(--bronze) 82%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 9s ease-in-out infinite; }
.hero-intro { max-width:520px; margin:0; font-size:clamp(1.02rem,1.2vw,1.16rem); line-height:1.7; color:var(--ink-soft); }
.hero-intro strong { font-weight:400; color:var(--ink); }
.fade { opacity:0; animation:fade 1.6s var(--ease) forwards; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.55s; } .d3 { animation-delay:.8s; } .d4 { animation-delay:1.1s; }

.stage { position:relative; justify-self:end; width:min(100%,660px); aspect-ratio:1; margin:0; }
.stage::before { content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, rgba(216,193,144,.42) 0%, rgba(216,193,144,.12) 42%, transparent 68%); filter:blur(8px); }
.stage canvas { position:relative; display:block; width:100%; height:100%; }
.stage figcaption { position:absolute; right:0; bottom:2%; font:italic 400 .98rem var(--serif); color:var(--muted); letter-spacing:.01em; }
.stage figcaption b { font:400 .68rem var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); margin-right:10px; }

.hero-foot { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:28px 0 34px; border-top:1px solid var(--line); margin-top:clamp(28px,4vh,48px); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.hero-foot > :last-child { justify-self:end; }
.flow { display:flex; align-items:center; gap:16px; }
.flow i { width:34px; height:1px; background:linear-gradient(90deg, var(--line-strong), var(--gold)); }
.scroll-cue { display:inline-flex; align-items:center; gap:16px; text-decoration:none; transition:color .3s; }
.scroll-cue:hover { color:var(--bronze); }
.cue-line { position:relative; width:1px; height:34px; background:var(--line-strong); overflow:hidden; }
.cue-line::after { content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--bronze); animation:cue 2.4s var(--ease) infinite; }

/* ——— Schmuckelemente ——— */
.ornament { display:flex; justify-content:center; color:var(--gold); }
.ornament svg { width:min(300px,72%); height:auto; overflow:visible; }
.o-line { stroke:url(#fade-line); stroke-width:1; }
.o-ring { fill:none; stroke:currentColor; stroke-width:1.2; }
.o-gem { fill:none; stroke:currentColor; stroke-width:.9; }
.o-core { fill:var(--bronze); }
.initial::first-letter { float:left; margin:.07em .07em 0 -.02em; font:400 4.7em/.78 var(--serif); color:var(--bronze); }

/* ——— Section heads ——— */
.section-head { display:grid; grid-template-columns:1fr minmax(0,380px); align-items:end; gap:24px 60px; padding:clamp(100px,12vw,170px) 0 clamp(44px,5vw,70px); }
.section-no { display:flex; align-items:center; gap:14px; color:var(--bronze); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; margin-bottom:22px; font-weight:400; }
.section-no em { font:italic 400 1.3rem var(--serif); letter-spacing:0; color:var(--gold); }
h2 { margin:0; font-family:var(--serif); font-size:clamp(2.2rem,4vw,4.2rem); font-weight:300; letter-spacing:-.02em; line-height:.95; }
h2 em { color:var(--bronze); font-weight:400; }
.section-note { margin:0 0 8px; color:var(--muted); line-height:1.75; font-size:1.02rem; }

/* ——— Projekte ——— */
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); perspective:1400px; }
.project { --mx:50%; --my:50%; position:relative; min-height:clamp(440px,38vw,540px); padding:clamp(24px,2.4vw,36px); display:flex; flex-direction:column; justify-content:space-between; gap:24px; overflow:hidden; isolation:isolate; text-decoration:none; color:inherit;
  background:linear-gradient(165deg, #faf7f1 0%, var(--paper-2) 100%); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(29,28,25,.02);
  transition:translate .9s var(--ease), rotate .8s var(--ease), border-color .6s, box-shadow .9s var(--ease); }
.project::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(520px circle at var(--mx) var(--my), rgba(216,193,144,.34), transparent 58%), linear-gradient(115deg, transparent calc(var(--sx,50%) - 24%), rgba(255,250,236,.5) var(--sx,50%), transparent calc(var(--sx,50%) + 24%)); transition:opacity .6s; }
.project::after { content:""; position:absolute; inset:10px; z-index:-1; border:1px solid rgba(184,151,90,0); transition:border-color .8s; pointer-events:none; }
.project:hover { translate:0 -6px; border-color:rgba(184,151,90,.55); box-shadow:0 30px 60px -30px rgba(90,64,38,.28); }
.project:hover::before { opacity:1; }
.project:hover::after { border-color:rgba(184,151,90,.28); }
.project-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.project-no { font:italic 300 2.6rem/1 var(--serif); color:var(--gold); }
.project-cat { font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--bronze); font-weight:400; }
.emblem { align-self:center; width:min(64%,230px); aspect-ratio:1; color:var(--gold); translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -14px); transition:transform 1.2s var(--ease), translate .8s var(--ease); }
.emblem svg { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:.7; }
.emblem .strong { stroke:var(--bronze); stroke-width:1.1; }
.emblem .node { fill:var(--paper); stroke:var(--bronze); stroke-width:.9; }
.emblem .node.on { fill:var(--bronze); }
.emblem .spin { transform-origin:100px 100px; animation:turn 60s linear infinite; }
.emblem .spin.rev { animation-duration:90s; animation-direction:reverse; }
.emblem .faint { opacity:.45; }
.project:hover .emblem { transform:scale(1.05); }
.draw { stroke-dasharray:720; stroke-dashoffset:0; }
.js .reveal .draw { stroke-dashoffset:720; transition:stroke-dashoffset 2.8s var(--ease) calc(var(--delay,0s) + .35s); }
.js .reveal.is-in .draw { stroke-dashoffset:0; }
.project:hover .draw { animation:draw 2.4s var(--ease); }
.project h3 { margin:0 0 12px; font:300 clamp(1.5rem,1.8vw,1.9rem)/1.08 var(--serif); letter-spacing:-.01em; }
.project p { margin:0; max-width:32ch; color:var(--muted); font-size:.95rem; line-height:1.65; }
.project-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.status { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); font-weight:400; }
.status i { position:relative; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.status i::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--gold); animation:ping 2.6s var(--ease) infinite; }
.project-arrow { flex:none; width:52px; height:52px; border:1px solid rgba(184,151,90,.5); border-radius:50%; display:grid; place-items:center; color:var(--bronze); transition:background .5s, color .5s, transform .8s var(--ease); }
.project-arrow svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; }
a.project:hover .project-arrow { background:var(--bronze); color:var(--paper); transform:rotate(45deg); }

/* ——— Kadenz (dunkel, mehrlagig) ——— */
.kadenz { position:relative; margin-top:clamp(110px,12vw,170px); background:var(--night); color:var(--night-ink); overflow:hidden; isolation:isolate; }
.kadenz-orb { position:absolute; z-index:-1; width:900px; height:900px; right:-260px; top:-380px; border-radius:50%; background:radial-gradient(circle, rgba(184,151,90,.17), transparent 62%); pointer-events:none; }
.kadenz-orb.low { width:700px; height:700px; right:auto; left:-300px; top:auto; bottom:-420px; background:radial-gradient(circle, rgba(184,151,90,.09), transparent 64%); }
.kadenz-word { position:absolute; z-index:-1; left:-.04em; bottom:-.2em; font:italic 300 clamp(9rem,25vw,25rem)/1 var(--serif); color:transparent; -webkit-text-stroke:1px rgba(216,193,144,.09); white-space:nowrap; pointer-events:none; user-select:none; }
.kadenz .section-head { padding-top:clamp(100px,11vw,160px); }
.kadenz .section-no { color:var(--gold-soft); }
.kadenz h2 em { color:var(--gold-soft); }
.kadenz .section-note { color:var(--night-muted); }
.steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,70px); padding:0 0 clamp(120px,13vw,190px); border-top:1px solid var(--night-line); overflow:hidden; }
.steps::after { content:""; position:absolute; top:0; left:-20%; width:18%; height:1px; background:linear-gradient(90deg, transparent, var(--gold-soft), transparent); animation:travel 7s var(--ease) infinite; }
.step { position:relative; padding-top:52px; }
.step::before { content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--night); border:1px solid var(--gold); }
.step-no { display:block; font:italic 300 clamp(3rem,4vw,4.4rem)/.8 var(--serif); background:linear-gradient(160deg, #ead8ad, var(--gold) 55%, #7d5c3e); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.1em; }
.step-label { display:block; margin:30px 0 12px; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:400; }
.step h3 { margin:0 0 16px; font:300 clamp(1.45rem,1.7vw,1.75rem)/1.12 var(--serif); }
.step p { margin:0; max-width:34ch; color:var(--night-muted); line-height:1.75; font-size:.98rem; }

/* ——— Über ——— */
.about { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:clamp(40px,7vw,120px); padding:clamp(110px,12vw,180px) 0 clamp(60px,7vw,100px); }
.about-side { align-self:start; position:sticky; top:calc(var(--header) + 48px); }
.ring { width:clamp(90px,9vw,130px); margin-top:clamp(40px,5vw,64px); }
.ring svg { display:block; width:100%; height:auto; overflow:visible; animation:turn 40s linear infinite; }
.lead { margin:0 0 34px; font:300 clamp(1.3rem,1.8vw,1.8rem)/1.35 var(--serif); letter-spacing:-.005em; color:var(--ink); }
.lead em { color:var(--bronze); }
.body-copy { margin:0 0 20px; max-width:60ch; color:var(--ink-soft); font-size:1.06rem; line-height:1.8; }
.body-copy em { font-family:var(--serif); font-size:1.18em; color:var(--bronze); }
.values { list-style:none; margin:clamp(50px,6vw,80px) 0 0; padding:0; border-bottom:1px solid var(--line); }
.values li { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr); align-items:baseline; gap:18px; padding:30px 0; border-top:1px solid var(--line); }
.values .v-no { font:italic 400 1.15rem var(--serif); color:var(--gold); }
.values strong { font:300 clamp(1.5rem,1.9vw,1.9rem)/1.08 var(--serif); letter-spacing:-.01em; transition:transform .8s var(--ease), color .5s; }
.values li:hover strong { transform:translateX(10px); color:var(--bronze); }
.values p { margin:0; color:var(--muted); line-height:1.65; font-size:.96rem; }

/* ——— Ausblick & Kontakt ——— */
.closing { text-align:center; padding:clamp(60px,7vw,100px) 0 clamp(100px,12vw,170px); }
.closing .eyebrow { justify-content:center; margin-top:clamp(50px,6vw,80px); }
.closing .eyebrow::after { content:""; width:44px; height:1px; background:linear-gradient(90deg, currentColor, transparent); }
.closing h2 { margin:30px auto 26px; font-size:clamp(2.2rem,4.6vw,4.8rem); max-width:12ch; }
.closing p { margin:0 auto; max-width:48ch; color:var(--muted); line-height:1.75; font-size:1.04rem; }
.mail { position:relative; display:inline-flex; align-items:center; gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,60px); padding-bottom:12px; font:300 clamp(1.4rem,2.5vw,2.25rem)/1 var(--serif); color:var(--ink); text-decoration:none; }
.mail::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, var(--bronze), var(--gold-soft)); transform-origin:left; transition:transform .9s var(--ease); }
.mail:hover::after { transform:scaleX(0); transform-origin:right; }
.mail em { color:var(--bronze); }
.mail .project-arrow { width:clamp(44px,4vw,58px); height:clamp(44px,4vw,58px); }
.mail:hover .project-arrow { background:var(--bronze); color:var(--paper); transform:rotate(45deg); }

/* ——— Footer ——— */
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:30px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
footer .motto { font:italic 400 1.1rem var(--serif); letter-spacing:0; text-transform:none; color:var(--bronze); }
.foot-links { justify-self:end; display:flex; flex-wrap:wrap; gap:10px 24px; }
footer a { text-decoration:none; transition:color .3s; }
footer a:hover { color:var(--bronze); }

/* ——— Unterseiten ——— */
.page { padding-block:clamp(80px,10vw,140px) clamp(90px,10vw,150px); }
.page h1 { font-size:clamp(2.4rem,4.5vw,4.2rem); margin:28px 0 clamp(40px,5vw,70px); }
.legal { max-width:760px; }
.legal h2 { margin:clamp(40px,4.4vw,56px) 0 14px; font-size:clamp(1.45rem,1.9vw,1.75rem); line-height:1.15; }
.legal h3 { margin:28px 0 8px; font:400 1.25rem var(--serif); }
.legal p, .legal li { color:var(--ink-soft); line-height:1.8; font-size:1.02rem; }
.legal ul { padding-left:1.2em; }
.legal a { color:var(--bronze); text-underline-offset:4px; text-decoration-thickness:1px; }
.fill { background:rgba(216,193,144,.35); padding:0 .3em; font-style:normal; }
.draft-note { margin:0 0 40px; padding:18px 22px; border:1px solid var(--gold); background:rgba(216,193,144,.14); font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.notfound { min-height:calc(100svh - var(--header) - 110px); display:grid; place-items:center; text-align:center; padding-block:80px; }
.notfound .big { display:block; font:italic 300 clamp(5rem,12vw,9rem)/.8 var(--serif); background:linear-gradient(160deg, #ead8ad, var(--gold) 50%, #7d5c3e); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.08em; }
.notfound h1 { font-size:clamp(1.9rem,3.4vw,2.7rem); margin:30px 0 16px; }
.notfound p { margin:0 auto 44px; max-width:44ch; color:var(--muted); line-height:1.75; }
.button { display:inline-flex; align-items:center; gap:14px; padding:16px 28px; border:1px solid var(--gold); border-radius:100px; text-decoration:none; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--bronze); transition:background .5s, color .5s; }
.button:hover { background:var(--bronze); border-color:var(--bronze); color:var(--paper); }

/* ——— Easter Egg ——— */
.toast { position:fixed; left:50%; bottom:clamp(20px,4vh,40px); z-index:380; translate:-50% 24px; opacity:0; visibility:hidden; display:flex; align-items:center; gap:14px; padding:16px 26px; background:rgba(22,21,18,.92); color:var(--night-ink); border:1px solid rgba(216,193,144,.35); border-radius:100px; font:italic 400 1.15rem var(--serif); box-shadow:0 24px 50px -24px rgba(0,0,0,.5); transition:opacity .7s var(--ease), translate .9s var(--ease), visibility 0s .9s; white-space:nowrap; }
.toast::before { content:""; width:8px; height:8px; border:1px solid var(--gold-soft); transform:rotate(45deg); }
.toast.is-on { opacity:1; visibility:visible; translate:-50% 0; transition:opacity .7s var(--ease), translate .9s var(--ease); }

/* ——— Einblenden beim Scrollen ——— */
.js .reveal { opacity:0; transform:translateY(34px); transition:opacity 1.4s var(--ease), transform 1.4s var(--ease); transition-delay:var(--delay,0s); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .project.reveal { transition:opacity 1.4s var(--ease) var(--delay,0s), transform 1.4s var(--ease) var(--delay,0s), translate .9s var(--ease), rotate .8s var(--ease), border-color .6s, box-shadow .9s var(--ease); }
[data-parallax] { will-change:translate; }

@keyframes rise { to { transform:none; } }
@keyframes fade { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes shimmer { 0%,100% { background-position:100% 0; } 50% { background-position:0 0; } }
@keyframes cue { 0% { top:-40%; } 100% { top:100%; } }
@keyframes turn { to { transform:rotate(360deg); } }
@keyframes draw { from { stroke-dashoffset:720; } to { stroke-dashoffset:0; } }
@keyframes ping { 0% { transform:scale(.4); opacity:1; } 80%,100% { transform:scale(1.6); opacity:0; } }
@keyframes travel { 0% { left:-20%; } 100% { left:100%; } }
@keyframes vt-out { to { opacity:0; transform:translateY(-14px); filter:blur(3px); } }
@keyframes vt-in { from { opacity:0; transform:translateY(18px); } }
@keyframes page-in { from { opacity:0; } }

@media (max-width:980px) {
  .hero { grid-template-columns:1fr; grid-template-rows:auto; min-height:auto; padding-top:56px; }
  .stage { justify-self:center; width:min(100%,560px); aspect-ratio:5 / 4; margin-top:8px; }
  .hero-foot { grid-template-columns:1fr auto; }
  .hero-foot .flow { display:none; }
  .section-head { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr 1fr; }
  .project:last-child:nth-child(odd) { grid-column:1 / -1; min-height:420px; }
  .steps { grid-template-columns:1fr; border-top:0; gap:0; }
  .steps::after { display:none; }
  .step { padding:44px 0 50px; border-top:1px solid var(--night-line); }
  .about { grid-template-columns:1fr; }
  .about-side { position:static; }
  .values li { grid-template-columns:50px minmax(0,1fr); }
  .values p { grid-column:2; }
  footer { grid-template-columns:1fr auto; }
  footer .motto { display:none; }
}
@media (max-width:640px) {
  :root { --header:60px; }
  .brand { width:clamp(112px,32vw,140px); }
  nav { gap:16px; font-size:.7rem; letter-spacing:.12em; }
  nav a small, nav a.nav-kadenz { display:none; }
  .hero { padding-top:44px; }
  h1 { font-size:clamp(2.6rem,12vw,4rem); margin:22px 0 22px; }
  .hero-foot { font-size:.64rem; letter-spacing:.18em; }
  .project-grid { grid-template-columns:1fr; }
  .project, .project:last-child:nth-child(odd) { min-height:420px; }
  .stage figcaption { position:static; margin-top:6px; text-align:right; }
  .mail { font-size:clamp(1.25rem,5.6vw,1.6rem); }
  footer { grid-template-columns:1fr; justify-items:start; gap:14px; }
  .foot-links { justify-self:start; }
  .toast { font-size:1rem; padding:14px 20px; }
}
@media (max-width:360px) { nav a:nth-child(3) { display:none; } }
/* Handy im Querformat: kompakteres Layout, die Animation läuft ruhiger (siehe cadence.js) */
@media (orientation:landscape) and (max-height:540px) {
  :root { --header:54px; }
  .hero { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); padding-top:28px; }
  .stage { justify-self:end; width:min(100%,78vh); margin:0; }
  .stage figcaption { display:none; }
  h1 { font-size:clamp(2.3rem,10.5vh,3.8rem); margin:14px 0 14px; }
  .hero-intro { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-delay:0s !important; }
  .js .reveal { transform:none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* ——— Wartungsseite: „Die Werkstatt ist kurz geschlossen“ ——— */
.maintenance { min-height:100svh; overflow-x:hidden; }
.m-sparks { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.m-top { position:fixed; inset:0 0 auto 0; z-index:6; display:flex; align-items:center; justify-content:space-between; height:var(--header); padding:0 clamp(20px,5.3vw,88px); }
.m-pill { display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border:1px solid rgba(184,151,90,.6); border-radius:100px; background:rgba(245,241,232,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); font-weight:400; }
.m-pill i, .maintenance-badge i { position:relative; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.m-pill i::after, .maintenance-badge i::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--gold); animation:ping 2.6s var(--ease) infinite; }
.m-main { position:relative; z-index:2; min-height:100svh; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; gap:clamp(20px,4vw,60px); padding:calc(var(--header) + 24px) clamp(20px,5.3vw,88px) 96px; pointer-events:none; }
.m-copy { position:relative; z-index:5; max-width:560px; pointer-events:auto; }
.m-copy h1 { margin:28px 0 26px; }
.m-copy h1 em { padding-right:.06em; }
.m-message { margin:0; max-width:46ch; font-size:clamp(1.02rem,1.2vw,1.16rem); line-height:1.7; color:var(--ink-soft); }
.m-countdown { margin-top:30px; }
.m-countdown-label { display:block; margin-bottom:10px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); font-weight:400; }
.m-units { display:flex; flex-wrap:wrap; gap:6px 22px; }
.m-unit { display:grid; }
.m-unit b { font:300 clamp(2rem,3vw,2.8rem)/1 var(--serif); font-variant-numeric:tabular-nums; color:var(--ink); }
.m-unit small { margin-top:4px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.m-soon { font:italic 400 1.4rem var(--serif); color:var(--bronze); }
.m-energy { display:flex; align-items:center; gap:16px; margin-top:34px; }
.m-energy svg { flex:none; width:56px; height:56px; transform:rotate(-90deg); }
.m-energy text { transform:rotate(90deg); transform-origin:30px 30px; font:400 17px var(--serif); fill:var(--bronze); }
.m-energy-track { fill:none; stroke:var(--line-strong); stroke-width:1; }
.m-energy-fill { fill:none; stroke:url(#gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .9s var(--ease); }
.m-energy p { margin:0; max-width:38ch; font-size:.9rem; line-height:1.55; color:var(--muted); }
.m-energy strong { font-weight:400; color:var(--ink-soft); }
.m-copy .mail { margin-top:clamp(28px,4vh,44px); font-size:clamp(1.25rem,2vw,1.8rem); }
.m-stage.stage { justify-self:center; width:min(100%, 64vmin, 720px); aspect-ratio:1; margin:0; }
.m-tools { position:fixed; inset:0; z-index:3; pointer-events:none; }
.m-tool { position:absolute; left:0; top:0; width:74px; height:74px; margin:-37px 0 0 -37px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fdfbf6, var(--paper-2)); border:1px solid rgba(184,151,90,.45); box-shadow:0 20px 40px -24px rgba(90,64,38,.55); will-change:transform; }
.m-tool .emblem { width:72%; }
.m-tool.m-hit .emblem { animation:m-spin 1.2s var(--ease); }
.m-tool.m-hit { box-shadow:0 0 0 6px rgba(216,193,144,.25), 0 20px 40px -24px rgba(90,64,38,.55); }
@keyframes m-spin { 0% { transform:rotate(0) scale(1.28); } 100% { transform:rotate(360deg) scale(1); } }
.m-foot { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding:22px clamp(20px,5.3vw,88px) 28px; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.m-foot a { text-decoration:none; transition:color .3s; }
.m-foot a:hover { color:var(--bronze); }
.maintenance-badge { position:fixed; left:16px; bottom:16px; z-index:390; display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border-radius:100px; background:rgba(22,21,18,.9); color:var(--night-ink); border:1px solid rgba(216,193,144,.4); font-size:.74rem; letter-spacing:.06em; text-decoration:none; box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
.maintenance-badge:hover { border-color:var(--gold-soft); }
@media (max-width:900px) {
  .m-main { grid-template-columns:1fr; align-content:start; padding-top:calc(var(--header) + 8px); padding-bottom:110px; }
  .m-stage.stage { order:-1; width:min(100%, 86vw, 560px); aspect-ratio:5 / 4; margin-bottom:-6vw; }
  .m-tool { width:54px; height:54px; margin:-27px 0 0 -27px; }
  .m-foot { position:relative; }
}