/* =========================================================
   Dasein. – Website 2026
   Farben & Schrift aus dem bestehenden CI: Anthrazit, Bronze, Syne
   ========================================================= */

@font-face{font-family:"Syne";src:url("../fonts/syne-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Syne";src:url("../fonts/syne-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Syne";src:url("../fonts/syne-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#1a1a1a;          /* Grundfläche, wie bisher */
  --graphite:#232220;     /* leicht warme zweite Fläche */
  --line:#3a3833;         /* Trennlinien */
  --bronze:#a38848;       /* CI-Akzent */
  --bronze-deep:#7d6834;
  --sand:#d9cba6;         /* helles Bronze für Hover/Details */
  --text:#f3f1ec;
  --muted:#9c968a;

  --display:"Syne",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:clamp(.84rem,.8rem + .2vw,.95rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 1.9vw,3.3rem);
  --step-4:clamp(2.6rem,1.8rem + 3.8vw,5.4rem);
  --step-5:clamp(3.4rem,2rem + 7vw,9.5rem);

  --gutter:clamp(1rem,.5rem + 2.5vw,3rem);
  --max:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
::selection{background:var(--bronze);color:var(--ink)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dot{color:var(--bronze)}
.sq{display:inline-block;width:.42em;height:.42em;background:var(--bronze);vertical-align:.08em}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s var(--ease),transform .4s var(--ease)}
.nav.is-scrolled{background:rgba(26,26,26,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:5rem}
.logo{font-family:var(--display);font-weight:800;font-size:1.6rem;text-decoration:none;letter-spacing:-.02em}
.nav__links{display:flex;gap:2.2rem;align-items:center;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:.98rem;position:relative}
.nav__links a:not(.btn){padding:.3rem 0}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .35s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__toggle{display:none;background:none;border:0;color:var(--text);font:500 1rem var(--body);cursor:pointer;padding:.5rem 0;align-items:center;gap:.6rem}
.nav__toggle i{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:transform .3s}
.nav__toggle i::after{content:"";position:absolute;left:0;top:7px;width:14px;height:2px;background:currentColor;transition:transform .3s,width .3s}
.nav-open .nav__toggle i{transform:translateY(3px) rotate(45deg)}
.nav-open .nav__toggle i::after{top:0;width:22px;transform:rotate(-90deg)}

.btn{display:inline-flex;align-items:center;gap:.6rem;font:600 .98rem var(--body);text-decoration:none;border-radius:999px;padding:.85rem 1.5rem;border:1px solid var(--bronze);color:var(--text);background:transparent;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--bronze);color:var(--ink)}
.btn--solid{background:var(--bronze);color:var(--ink)}
.btn--solid:hover{background:var(--text);border-color:var(--text)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--text)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn--sm{padding:.55rem 1.1rem;font-size:.92rem}

@media (max-width:900px){
  .nav__toggle{display:inline-flex}
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;padding:6rem var(--gutter) 3rem;background:var(--ink);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .nav__links a{font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3rem)}
  .nav__links .btn{font-family:var(--body);font-size:1rem;margin-top:1.5rem}
  .nav-open .nav__links{opacity:1;visibility:visible}
  .nav-open{overflow:hidden}
  .nav__toggle,.logo{position:relative;z-index:2}
}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__in{position:relative;z-index:9;width:100%;padding-bottom:clamp(3rem,8vh,6rem);padding-top:7rem}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--gutter)}
.hero__copy{grid-column:2}
.hero__title{font-size:var(--step-5);font-weight:800;line-height:.92;letter-spacing:-.035em}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.is-loaded .hero__title .line>span{transform:none}
.is-loaded .hero__title .line:nth-child(2)>span{transition-delay:.12s}
.is-loaded .hero__title .line:nth-child(3)>span{transition-delay:.24s}
.hero__lede{max-width:34ch;font-size:var(--step-1);line-height:1.45;color:#d8d4cb;margin:2rem 0 2.2rem;opacity:0;transform:translateY(12px);transition:opacity .9s .5s,transform .9s .5s var(--ease)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;opacity:0;transition:opacity .9s .7s}
.is-loaded .hero__lede{opacity:1;transform:none}
.is-loaded .hero__actions{opacity:1}
.hero__meta{position:absolute;z-index:9;left:calc(var(--gutter) * .55);bottom:clamp(3rem,8vh,6rem);margin:0;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:var(--step--1);letter-spacing:.06em;color:#d8d2c4;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (max-width:900px){
  .hero{align-items:flex-end}
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{grid-column:1}
  .hero__meta{display:none}
  .hero__title{font-size:clamp(2.9rem,13.5vw,5rem)}
}

/* ---------- Laufband ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:1.4rem 0;background:var(--ink)}
.marquee__track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--display);font-weight:700;font-size:var(--step-3);white-space:nowrap;display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;color:transparent;-webkit-text-stroke:1px #6f6a60}
.marquee__item:nth-child(odd){color:var(--text);-webkit-text-stroke:0}
.marquee__item .sq{width:.28em;height:.28em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.section{padding:clamp(5rem,12vh,9rem) 0}
.section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.2rem var(--gutter);margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.section__title{font-size:clamp(2rem,1rem + 5vw,5.4rem);font-weight:800;letter-spacing:-.03em}
.section__intro{max-width:44ch;color:#cfcac0;margin:0}

/* ---------- Arbeiten ---------- */
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2.5rem,5vw,4.5rem) var(--gutter)}
.work__item{grid-column:span 6;text-decoration:none;display:block}
.work__item--wide{grid-column:span 7}
.work__item--narrow{grid-column:span 5}
.work__item--offset{margin-top:clamp(0rem,8vw,7rem)}
.work__media{position:relative;overflow:hidden;background:var(--graphite);aspect-ratio:4/3;clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
.work__item--tall .work__media{aspect-ratio:4/5}
.work__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease),filter .6s}
.work__item:hover .work__media img{transform:scale(1.09)}
.reveal-ready .work__media{clip-path:inset(12% 6% 12% 6%)}
.reveal-ready .work__media img{transform:scale(1.18)}
.reveal-ready .work__item.is-in .work__media{clip-path:inset(0 0 0 0)}
.reveal-ready .work__item.is-in .work__media img{transform:scale(1.04)}
.reveal-ready .work__item.is-in:hover .work__media img{transform:scale(1.09)}
.work__info{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.1rem}
.work__title{font-size:var(--step-2);font-weight:700;transition:color .3s}
.work__item:hover .work__title{color:var(--sand)}
.work__cat{color:var(--muted);font-size:var(--step--1);text-align:right;white-space:nowrap}
.work__badge{position:absolute;left:1rem;top:1rem;z-index:2;background:var(--bronze);color:var(--ink);font-weight:600;font-size:.82rem;padding:.3rem .7rem;border-radius:999px}
@media (max-width:900px){
  .work{grid-template-columns:1fr}
  .work__item,.work__item--wide,.work__item--narrow{grid-column:1/-1}
  .work__item--offset{margin-top:0}
  .work__info{flex-direction:column;gap:.2rem}
  .work__cat{text-align:left;white-space:normal}
}

/* ---------- Leistungen ---------- */
.services{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.service{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--gutter);padding:clamp(1.6rem,3.5vw,2.6rem) 0;position:relative}
.service::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--bronze);transition:width .8s var(--ease)}
.service:hover::before{width:100%}
.service__name{font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;transition:color .3s}
.service:hover .service__name{color:var(--sand)}
.service__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gutter);align-items:start}
.service__body p{margin:0;color:#d4cfc5}
.service__tags{margin:0;padding:0;list-style:none;color:var(--muted);font-size:var(--step--1);line-height:1.9}
@media (max-width:900px){.service,.service__body{grid-template-columns:1fr;gap:1rem}}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);counter-reset:step;margin:0;padding:0;list-style:none}
.step{border-top:1px solid var(--bronze);padding-top:1.4rem;counter-increment:step}
.step::before{content:counter(step);font-family:var(--display);font-weight:800;font-size:var(--step-3);color:var(--bronze);display:block;line-height:1;margin-bottom:1.2rem}
.step h3{font-size:var(--step-1);margin-bottom:.7rem}
.step p{color:#cfcac0;font-size:var(--step--1);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--gutter);align-items:start}
.about__photo{position:relative;max-width:420px}
.about__photo img{border-radius:50%;filter:grayscale(1) contrast(1.05)}
.about__photo::after{content:"";position:absolute;right:6%;bottom:8%;width:18%;aspect-ratio:1;background:var(--bronze)}
.about__text{font-size:var(--step-1);line-height:1.55;color:#e4e0d8;max-width:40ch}
.about__text p:first-child{font-family:var(--display);font-weight:700;font-size:var(--step-2);line-height:1.2;color:var(--text);max-width:24ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line)}
.fact__num{font-family:var(--display);font-weight:800;font-size:var(--step-4);line-height:1;letter-spacing:-.03em}
.fact__label{color:var(--muted);font-size:var(--step--1);margin-top:.4rem}
.clients{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem);margin-top:clamp(3rem,6vw,5rem)}
.clients img{height:clamp(28px,3.4vw,44px);width:auto;opacity:.55;filter:grayscale(1) brightness(1.6);transition:opacity .3s,filter .3s}
.clients img:hover{opacity:1;filter:none}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__photo{max-width:260px}}

/* ---------- Stimmen ---------- */
.quotes{position:relative}
.quote{margin:0;display:none}
.quote.is-active{display:block;animation:quoteIn .7s var(--ease)}
@keyframes quoteIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quotes{margin-left:auto;max-width:860px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,.95rem + 1vw,1.85rem);line-height:1.4;text-indent:-.45em}
.quote figcaption{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.quote figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.quote cite{font-style:normal;font-weight:600;display:block}
.quote small{color:var(--muted);font-size:var(--step--1)}
.quotes__nav{display:flex;align-items:center;gap:.8rem;margin-top:2.5rem}
.quotes__nav button{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;font-size:1.1rem;transition:border-color .3s,background .3s}
.quotes__nav button:hover{border-color:var(--bronze);background:var(--bronze);color:var(--ink)}
.quotes__count{color:var(--muted);font-size:var(--step--1);margin-left:.6rem}

/* ---------- Kontakt (Bronze-Fläche) ---------- */
.contact{background:var(--bronze);color:var(--ink);padding:clamp(5rem,12vh,9rem) 0}
.contact a{color:var(--ink)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:calc(var(--gutter)*2)}
.contact__title{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em;line-height:.98}
.contact__lede{font-size:var(--step-1);max-width:30ch;margin:1.6rem 0 2.4rem}
.contact__data{display:grid;gap:1.1rem;font-size:var(--step-0)}
.contact__data dt{font-size:var(--step--1);opacity:.7}
.contact__data dd{margin:0;font-weight:600}
.form{display:grid;gap:1.4rem}
.field label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:.4rem}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(26,26,26,.45);padding:.6rem 0;font:inherit;font-size:var(--step-1);color:var(--ink);border-radius:0;transition:border-color .3s}
.field textarea{resize:vertical;min-height:8rem}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form .btn{justify-self:start}
.contact :focus-visible{outline-color:var(--ink)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{padding:clamp(4rem,10vh,7rem) 0 2rem;overflow:hidden}
.footer__word{font-family:var(--display);font-weight:800;font-size:min(14vw,12.8rem);line-height:.8;letter-spacing:-.05em;margin:0 0 2.5rem -.04em;white-space:nowrap;user-select:none}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;align-items:center;border-top:1px solid var(--line);padding-top:1.6rem;color:var(--muted);font-size:var(--step--1)}
.footer__row ul{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;list-style:none;margin:0;padding:0}
.footer__row a{text-decoration:none;transition:color .3s}
.footer__row a:hover{color:var(--sand)}

/* ---------- Projektseiten ---------- */
.phero{padding:clamp(8rem,22vh,13rem) 0 clamp(3rem,8vh,5rem);border-bottom:1px solid var(--line)}
.phero__back{display:inline-flex;gap:.5rem;align-items:center;text-decoration:none;color:var(--muted);font-size:var(--step--1);margin-bottom:2rem;transition:color .3s}
.phero__back:hover{color:var(--sand)}
.phero__title{font-size:var(--step-5);font-weight:800;letter-spacing:-.04em;line-height:.92;max-width:12ch}
.phero__slogan{font-size:var(--step-2);font-family:var(--display);font-weight:500;color:var(--sand);margin-top:1.4rem;max-width:30ch;line-height:1.2}
.phero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.phero__title .line>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.is-loaded .phero__title .line>span{transform:none}

.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:calc(var(--gutter)*1.5);padding:clamp(4rem,10vh,7rem) 0;border-bottom:1px solid var(--line)}
.project:last-of-type{border-bottom:0}
.project__info{position:sticky;top:6.5rem;align-self:start}
.project__name{font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;margin-bottom:1.2rem}
.project__desc{color:#ddd8cf;margin-bottom:1.8rem}
.project__meta{display:grid;gap:1rem;margin:0}
.project__meta dt{color:var(--muted);font-size:var(--step--1)}
.project__meta dd{margin:0}
.project__link{display:inline-block;margin-top:1.6rem}
.project__media{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:1fr 1fr}
.project__media>*{grid-column:1/-1}
.project__media .half{grid-column:span 1}
.project__media a{display:block;background:var(--graphite);overflow:hidden;cursor:zoom-in}
.project__media img{width:100%;transition:transform .8s var(--ease)}
.project__media a:hover img{transform:scale(1.02)}
.project__media .tall{max-height:none}
.video-card{position:relative;display:block;cursor:pointer}
.video-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);transition:background .3s}
.video-card:hover::after{background:rgba(0,0,0,.15)}
.video-card span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bronze);color:var(--ink);font-weight:600;padding:.8rem 1.4rem;border-radius:999px;white-space:nowrap}
.scroll-shot{max-height:80vh;overflow:auto;background:var(--graphite);border:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--bronze) var(--graphite)}
.scroll-shot a{cursor:zoom-in}
.scroll-hint{font-size:var(--step--1);color:var(--muted);margin-top:.6rem}
@media (max-width:900px){
  .phero__title{font-size:clamp(2rem,9.2vw,4rem)}
  .project{grid-template-columns:1fr}
  .project__info{position:static}
  .project__media{grid-template-columns:1fr}
  .project__media .half{grid-column:1/-1}
}

.next{display:block;text-decoration:none;padding:clamp(5rem,14vh,9rem) 0;border-top:1px solid var(--line);background:var(--graphite);transition:background .5s}
.next:hover{background:var(--bronze);color:var(--ink)}
.next small{display:block;color:var(--muted);font-size:var(--step--1);margin-bottom:1rem;transition:color .5s}
.next:hover small{color:var(--ink)}
.next strong{font-family:var(--display);font-weight:800;font-size:var(--step-5);letter-spacing:-.04em;line-height:.95;display:block}

/* ---------- Rechtliches ---------- */
.legal{max-width:72ch}
.legal h1{font-size:var(--step-4);margin:3rem 0 2rem;font-weight:800}
.legal h2{font-size:var(--step-2);margin:3rem 0 1rem}
.legal h3{font-size:var(--step-1);margin:2.2rem 0 .8rem}
.legal h4{font-family:var(--body);font-weight:600;font-size:var(--step-0);margin:1.6rem 0 .5rem}
.legal p,.legal li{color:#d6d1c7}
.legal a{color:var(--sand);word-break:break-word}
.legal address{font-style:normal}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,14,14,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lb.is-open{opacity:1;visibility:visible}
.lb__stage{max-width:92vw;max-height:88vh;overflow:auto}
.lb__stage img{max-width:92vw;max-height:88vh;width:auto;margin:auto}
.lb__stage.is-long img{max-height:none;max-width:min(92vw,1100px)}
.lb button{position:absolute;background:none;border:1px solid var(--line);color:var(--text);width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.2rem}
.lb button:hover{background:var(--bronze);border-color:var(--bronze);color:var(--ink)}
.lb__close{top:1.2rem;right:1.2rem}
.lb__prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb__next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:var(--muted);font-size:var(--step--1)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--bronze);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;display:flex;align-items:center;justify-content:center;mix-blend-mode:normal}
.cursor span{font:600 .8rem var(--body);color:var(--ink);opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.is-view{width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%}
.cursor.is-view span{opacity:1}
.cursor.is-link{width:30px;height:30px;margin:-15px 0 0 -15px;background:transparent;border:1px solid var(--bronze);border-radius:50%}
.cursor.is-hidden{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__title .line>span,.phero__title .line>span{transform:none}
  .hero__lede,.hero__actions{opacity:1;transform:none}
  .reveal-ready [data-reveal],.reveal-ready .work__media{opacity:1;transform:none;clip-path:none}
  .reveal-ready .work__media img{transform:none}
  .marquee__track{animation:none}
}