@font-face{font-family:"Albert Sans";font-weight:100 900;font-display:swap;src:url("../fonts/albert-sans.woff2") format("woff2")}

:root{
  --paper:#FFFFFF;
  --ink:#2A2622;
  --taupe:#A99989;
  --taupe-deep:#76695D;
  --stone:#EFEBE6;
  --line:#D6CCC1;
  --font:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --max:1520px;
  --ease:cubic-bezier(.2,.7,.1,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:1rem;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:50}
.skip:focus{left:1rem}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background-color .3s}
.site-header.scrolled{background:rgba(255,255,255,.97)}
.site-header.hide{transform:translateY(-100%)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:5.5rem}
.logo{color:var(--taupe);display:block;width:clamp(104px,11vw,140px)}
.logo svg{display:block;width:100%;height:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2.25rem}
.nav a{text-decoration:none;font-size:1rem;padding:.25rem 0;background:linear-gradient(var(--taupe),var(--taupe)) left bottom/0 2px no-repeat;transition:background-size .4s var(--ease)}
.nav a:hover{background-size:100% 2px}
/* Text-Roll: Wort gleitet nach oben, Duplikat in Taupe folgt */
.roll{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3;vertical-align:top}
.roll > span{display:block;transition:transform .55s var(--ease)}
.roll > span::after{content:attr(data-text);display:block;color:var(--taupe-deep)}
.nav li a .roll{height:auto;overflow:visible}
.nav li a .roll > span::after{display:none}
.nav li a{transition:background-size .4s var(--ease),color .4s ease}
.nav li a:hover,.nav li a:focus-visible{color:var(--taupe-deep);background-size:100% 2px}
.menu-meta{display:none}
.menu-toggle{display:none;position:relative;z-index:2;background:none;border:0;font:inherit;font-size:1rem;color:var(--ink);padding:.5rem 0;cursor:pointer;align-items:center;gap:.85rem}
.menu-toggle .icon{display:inline-flex;flex-direction:column;gap:6px;width:26px}
.menu-toggle .icon i{display:block;height:2px;background:currentColor;transition:transform .55s var(--ease),width .55s var(--ease)}
.menu-toggle .icon i:last-child{width:62%;margin-left:auto}
.nav.open .menu-toggle .roll > span{transform:translateY(-50%)}
.nav.open .menu-toggle .roll > span::after{color:var(--ink)}
.nav.open .menu-toggle .icon i:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .menu-toggle .icon i:last-child{width:100%;transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:7rem;padding-bottom:clamp(2rem,5vw,4rem)}
.hero h1{margin:0;font-weight:inherit}
.kicker{display:block;font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--taupe-deep);margin-bottom:clamp(1rem,2.5vw,2rem)}
.big{display:block;font-size:clamp(3.4rem,12.5vw,13.5rem);line-height:.9;letter-spacing:-.055em}
.big .row{display:block;clip-path:inset(0 -100vw);padding-bottom:.18em;margin-bottom:-.18em}
.big .row > span{display:inline-block;will-change:transform}
.w-thin{font-weight:170}
.w-bold{font-weight:720;letter-spacing:-.06em}
.row-bar{display:flex!important;flex-wrap:wrap}
.big .row-bar > span:first-child{white-space:nowrap}
.row-bar .bar{flex:0 0 100%;height:clamp(6px,.055em,12px);background:var(--taupe);margin-top:.12em;transform-origin:left}
.hero-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:clamp(2rem,4vw,3.5rem);align-items:end}
.hero-foot p{grid-column:1 / span 5;margin:0;max-width:32em}
.hero-foot .actions{grid-column:8 / span 5;justify-self:end;display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}

.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem .8rem 1.4rem;font-size:.9375rem;font-weight:500;letter-spacing:.01em;transition:color .45s var(--ease)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--taupe);transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--ease)}
.button:hover,.button:focus-visible{color:var(--ink)}
.button:hover::before,.button:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.btn-bar{display:block;width:1.1rem;height:2px;background:var(--taupe);transition:width .6s var(--ease),background-color .45s var(--ease)}
.button:hover .btn-bar,.button:focus-visible .btn-bar{width:2rem;background:var(--ink)}
.band .button::before{background:var(--paper)}
.textlink{font-size:1rem;text-decoration:none;padding-bottom:.2rem;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--taupe),var(--taupe));background-repeat:no-repeat;background-position:left bottom,left bottom;background-size:0 2px,100% 2px;transition:color .35s ease,background-size .5s var(--ease)}
.textlink:hover,.textlink:focus-visible{color:var(--taupe-deep);background-size:100% 2px,100% 2px}
.band .textlink:hover,.band .textlink:focus-visible,.band .direct:hover{color:var(--paper)}

/* ---------- Showreel (weitet sich beim Scrollen) ---------- */
.reel{height:220vh;position:relative}
.reel-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel-media{position:absolute;inset:0;background:var(--stone);clip-path:inset(14% 12% 14% 12%)}
.reel-media{--e:0}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(42,38,34,.55),rgba(42,38,34,0));pointer-events:none}
.reel-captions{list-style:none;margin:0;padding:0;position:absolute;left:calc(12% * (1 - var(--e)) + var(--gutter));right:calc(12% * (1 - var(--e)) + var(--gutter));bottom:calc(14% * (1 - var(--e)) + clamp(1.5rem,4vw,3.5rem));color:var(--paper)}
.reel-captions li{position:absolute;left:0;right:0;bottom:0}
.rc-client{display:flex;align-items:center;gap:.75rem;font-size:clamp(.875rem,1.1vw,1rem);font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.rc-client::before{content:"";width:1.75rem;height:3px;background:var(--taupe);transform-origin:left}
.rc-mask{display:block;clip-path:inset(0 -100vw);padding-bottom:.14em;margin-bottom:-.14em}
.rc-word{display:inline-block;font-size:clamp(2.75rem,8.5vw,8.5rem);line-height:.95;letter-spacing:-.055em;font-weight:700}
.reel-end{position:absolute;inset:0;background:var(--stone);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 calc(12% * (1 - var(--e)) + var(--gutter));visibility:hidden}
.reel-claim{margin:0;font-size:clamp(3rem,9vw,9rem);line-height:.9;letter-spacing:-.055em;font-weight:200}
.reel-claim .row{display:block;clip-path:inset(0 -100vw);padding-bottom:.16em;margin-bottom:-.16em}
.reel-claim .row > span{display:inline-block}
.reel-claim b{font-weight:700;letter-spacing:-.06em}
.reel-logo{color:var(--taupe);width:clamp(130px,14vw,220px);margin-top:clamp(2rem,5vw,4rem)}
.reel-logo svg{display:block;width:100%;height:auto}
.reel-logo .lg{transform-box:fill-box}
/* Showreel-Texte: gleiten aus der Maske, Balken läuft ein */
.motion .reel-captions li{visibility:hidden}
.motion .reel-captions li.on{visibility:visible}
.motion .rc-word{transform:translateY(108%)}
.motion .rc-client{opacity:0;transform:translateY(.6rem)}
.motion .rc-client::before{transform:scaleX(0)}
.motion .reel-captions li.on .rc-word{transform:none;transition:transform .8s var(--ease) .05s}
.motion .reel-captions li.on .rc-client{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--ease)}
.motion .reel-captions li.on .rc-client::before{transform:none;transition:transform .9s var(--ease) .15s}
.motion .reel-captions li.off .rc-word{transform:translateY(-108%);transition:transform .55s cubic-bezier(.5,0,.75,0)}
.motion .reel-captions li.off .rc-client{opacity:0;transition:opacity .35s ease}
.motion .reel-end{clip-path:inset(100% 0 0 0)}
.motion .reel-end.on{visibility:visible;clip-path:inset(0);transition:clip-path .9s var(--ease)}
.motion .reel-end.out{visibility:visible;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.5,0,.2,1)}
.motion .reel-claim .row > span{transform:translateY(108%)}
.motion .reel-end.on .reel-claim .row > span{transform:none;transition:transform 1.1s var(--ease) calc(.35s + var(--i) * .14s)}
.motion .reel-logo .lg{opacity:0;transform:translateY(35%);transform-origin:center bottom}
.motion .reel-logo .lg.bar-part{opacity:1;transform:scaleX(0);transform-origin:left center}
.motion .reel-end.on .reel-logo .lg{opacity:1;transform:none;transition:opacity .8s ease calc(1.1s + var(--i) * .06s),transform 1s var(--ease) calc(1.1s + var(--i) * .06s)}
.motion .reel-end.on .reel-logo .lg.bar-part{transition:transform 1.2s var(--ease) calc(1.1s + var(--i) * .06s)}

/* ---------- Laufband ---------- */
.marquee{padding:clamp(4rem,9vw,8rem) 0;overflow:hidden}
.marquee .track{display:flex;white-space:nowrap;font-size:clamp(3rem,9vw,9.5rem);line-height:1.02;letter-spacing:-.045em;will-change:transform}
.marquee .set{display:flex;flex-shrink:0}
.marquee .set span{padding-right:.3em;display:inline-flex;align-items:center}
.marquee .set span::after{content:"";display:inline-block;width:.55em;height:.09em;background:var(--taupe);margin-left:.3em}
.marquee .fill{font-weight:650}
.marquee .out{font-weight:650;color:transparent;-webkit-text-stroke:1.5px var(--taupe-deep)}
.marquee .thin{font-weight:160}

/* ---------- Abschnittstitel ---------- */
.section{padding-top:clamp(5rem,11vw,10rem)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
h2{margin:0;font-size:clamp(2.75rem,7vw,7rem);line-height:.95;letter-spacing:-.045em;font-weight:200}
h2 b{font-weight:700;letter-spacing:-.05em}

/* ---------- Projekte ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;list-style:none;margin:0;padding:0}
.filter button{background:none;border:0;padding:.35rem 0;font:inherit;font-size:1rem;color:var(--taupe-deep);cursor:pointer;position:relative}
.filter button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--taupe);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.filter button[aria-pressed="true"]{color:var(--ink)}
.filter button[aria-pressed="true"]::after{transform:scaleX(1)}

.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(3.5rem,6vw,5.5rem) var(--gutter)}
.project{text-decoration:none;display:block}
.project[hidden]{display:none}
.media{position:relative;overflow:hidden;background:var(--stone);aspect-ratio:4/3}
.media .inner{position:absolute;left:0;right:0;top:-10%;height:120%;background:var(--stone);transition:scale .8s var(--ease)}
.motion .media.near .inner{will-change:transform}
.media .inner img{display:block;width:100%;height:100%;object-fit:cover}
.media .ph-label{position:absolute;left:1rem;bottom:.85rem;font-size:.875rem;color:var(--taupe-deep);z-index:1}
.project:hover .inner{scale:1.04}
.project h3{font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.02em;margin:1.2rem 0 .1rem;display:flex;align-items:center;gap:.75rem}
.project h3::after{content:"";height:3px;background:var(--taupe);width:0;transition:width .5s var(--ease)}
.project:hover h3::after{width:2.5rem}
.project p{margin:0;color:var(--taupe-deep);font-size:1rem}
.project .tagline{color:var(--ink);font-size:1.125rem;margin-bottom:.35rem}
/* Zwei Reihen im Wechsel 7/5 und 5/7, Bilder je Reihe gleich hoch */
.p-a{grid-column:1 / span 7}
.p-b{grid-column:8 / span 5}
.p-c{grid-column:1 / span 5}
.p-d{grid-column:6 / span 7}
.projects:not(.filtered) .media{aspect-ratio:auto;height:clamp(20rem,36vw,36rem)}
.projects.filtered .project{grid-column:auto / span 6;margin-top:0}
.projects.filtered .project .media{aspect-ratio:4/3}
.more{margin-top:clamp(3rem,5vw,4.5rem)}

/* ---------- Leistungen ---------- */
.stone-band{background:var(--stone);margin-top:clamp(5rem,11vw,10rem);padding:clamp(5rem,10vw,9rem) 0 clamp(5rem,10vw,9rem)}
.services{border-top:1px solid var(--line)}
.service{border-bottom:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,3.5vw,3rem)}
.service h3{margin:0;font-size:clamp(3.2rem,11vw,11rem);line-height:.95;letter-spacing:-.055em;font-weight:200;color:var(--taupe)}
.service .detail{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:clamp(1rem,2vw,1.75rem)}
.service p{grid-column:1 / span 5;margin:0;max-width:30em}
.service ul{grid-column:7 / span 3;list-style:none;margin:0;padding:0;color:var(--taupe-deep);font-size:1rem;line-height:1.9}
.service .textlink{grid-column:11 / span 2;justify-self:end;align-self:start}
.region{margin-top:clamp(2rem,4vw,3rem);color:var(--taupe-deep);font-size:1rem;max-width:40em}

/* ---------- Haltung (Band) ---------- */
.band{background:var(--taupe);color:var(--ink)}
.band .textlink{background-image:linear-gradient(var(--paper),var(--paper)),linear-gradient(var(--ink),var(--ink))}
.approach{padding-top:clamp(6rem,13vw,12rem);padding-bottom:clamp(6rem,13vw,12rem)}
.statement{margin:0;font-size:clamp(1.9rem,4.4vw,4.25rem);line-height:1.1;letter-spacing:-.035em;font-weight:330;max-width:24ch}
.statement .w{transition:opacity .25s linear}
/* Bänder: Headline, Linie, darunter Text links und Aktion rechts – oben bündig */
.band-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem var(--gutter);align-items:start;margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(1.5rem,2.5vw,2rem);border-top:1px solid rgba(42,38,34,.28)}
.band-foot > p{grid-column:1 / span 6;margin:0;max-width:34em}
.band-foot > .actions,.band-foot > div{grid-column:8 / span 5}
.approach .foot div{padding-top:.3rem}

/* ---------- Kunden ---------- */
.clients{list-style:none;margin:0;padding:0;position:relative;will-change:transform}
.motion .clients{padding:2.5rem 0 18svh}
.clients li{position:relative}
.clients li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left}
.c-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;text-decoration:none;font-size:clamp(1.4rem,2.6vw,2.6rem);letter-spacing:-.03em;font-weight:250;line-height:1.2;transition:color .45s ease}
.c-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.c-name{display:inline-flex;align-items:center}
.c-name::before{content:"";display:inline-block;height:.07em;width:0;margin-right:0;background:var(--taupe);transition:width .55s var(--ease),margin .55s var(--ease)}
.clients small{font-size:.9375rem;letter-spacing:0;font-weight:400;color:var(--taupe-deep);text-align:right;transition:color .45s ease}
.clients:hover .c-row{color:var(--taupe)}
.clients .c-row:hover,.clients .c-row:focus-visible{color:var(--ink)}
.clients .c-row:hover .c-name::before,.clients .c-row:focus-visible .c-name::before{width:.9em;margin-right:.3em}
.clients .c-row:hover small{color:var(--ink)}
.motion .clients li::after{transform:scaleX(0)}
.motion .clients .c-name{transform:translateY(105%)}
.motion .clients small{opacity:0}
.motion .clients.in li::after{transform:none;transition:transform 1.2s var(--ease) calc(.15s + var(--i) * .1s)}
.motion .clients.in .c-name{transform:none;transition:transform 1s var(--ease) calc(.2s + var(--i) * .1s)}
.motion .clients.in small{opacity:1;transition:opacity .8s ease calc(.5s + var(--i) * .1s),color .45s ease}

/* ---------- Kunden (angeheftet, Liste rollt beim Scrollen) ---------- */
.trust{position:relative;margin-top:clamp(5rem,11vw,10rem)}
.trust-pin{padding-top:2rem;padding-bottom:2rem}
.motion .trust-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding-top:clamp(6.5rem,13vh,8.5rem);padding-bottom:clamp(2rem,6vh,4rem)}
.trust-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.trust-head{grid-column:1 / span 4}
.trust-head h2{font-size:clamp(2.75rem,5.4vw,5.5rem)}
.trust-head p{margin:1.5rem 0 0;max-width:22em;color:var(--taupe-deep);font-size:1rem}
.h-bar{display:block;width:min(100%,14rem);height:clamp(4px,.4vw,6px);margin-top:2rem;background:var(--taupe);transform-origin:left center}
.band .h-bar{background:var(--ink)}
.trust-progress{display:block;margin-top:2rem;width:min(100%,14rem);height:clamp(4px,.4vw,6px);background:var(--line)}
.trust-progress span{display:block;height:100%;background:var(--taupe);transform:scaleX(0);transform-origin:left}
.trust-lists{grid-column:5 / span 8;display:flex;flex-direction:column;min-height:0}
.more-clients{position:relative}
.motion .more-clients{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 2.5rem,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 2.5rem,#000 80%,transparent)}

/* ---------- Kontakt ---------- */
.contact{margin-top:clamp(5rem,11vw,10rem);padding:clamp(6rem,12vw,11rem) 0}
.contact h2{font-size:clamp(3.5rem,13vw,13.5rem);line-height:.88;letter-spacing:-.06em}
.contact h2 .row{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.contact h2 .row > span{display:inline-block}
.contact-grid .actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.contact .direct{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;letter-spacing:-.02em;text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) left bottom/0 2px no-repeat;transition:background-size .4s var(--ease),color .35s ease}
.contact .direct:hover{background-size:100% 2px}


/* ---------- Footer ---------- */
.site-footer{padding-top:clamp(4rem,8vw,7rem);padding-bottom:2rem;overflow:hidden}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--taupe-deep);font-size:.95rem;border-top:1px solid var(--line);padding-top:1.5rem}
.footer-row ul{list-style:none;margin:0;padding:0;display:flex;gap:1.75rem}
.footer-row a{text-decoration:none}
.footer-row a:hover{color:var(--ink)}
.footer-logo{color:#E3DCD4;width:min(100%,clamp(280px,34vw,540px));margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.footer-logo .lg{transform-box:fill-box}
.motion .footer-logo .lg{opacity:0;transform:translateY(35%);transform-origin:center bottom}
.motion .footer-logo .lg.bar-part{transform:scaleX(0);transform-origin:left center;opacity:1}
.motion .footer-logo.in .lg{opacity:1;transform:none;transition:opacity .9s ease calc(var(--i) * .07s),transform 1.1s var(--ease) calc(var(--i) * .07s)}
.motion .footer-logo.in .lg.bar-part{transition:transform 1.3s var(--ease) calc(var(--i) * .07s)}
.footer-logo svg{display:block;width:100%;height:auto}

/* ---------- Bewegung (nur mit JavaScript und ohne reduzierte Bewegung) ---------- */
.motion .hero .row > span{transform:translateY(108%)}
.motion .hero .row-bar .bar{transform:scaleX(0)}
.motion.loaded .hero .row > span{transform:none;transition:transform 1.25s var(--ease) calc(var(--i) * .12s)}
.motion.loaded .hero .row-bar .bar{transform:scaleX(1);transition:transform 1.4s var(--ease) .55s}
.motion .kicker,.motion .hero-foot{opacity:0;transform:translateY(1rem)}
.motion.loaded .kicker,.motion.loaded .hero-foot{opacity:1;transform:none;transition:opacity 1s ease .7s,transform 1s var(--ease) .7s}
.motion .h-bar{transform:scaleX(0)}
.motion .h-bar.in{transform:none;transition:transform 1.2s var(--ease) .25s}
.motion .media{clip-path:inset(0 0 100% 0)}   /* Bilder wischen sich von oben nach unten auf (Tobi) */
.motion .media.in{clip-path:inset(0);transition:clip-path 1.3s var(--ease)}
/* Kundenlogo in Weiß über dem Kachelbild (Tobi, 02.10.2026) */
.media .brand{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.media .brand::before{content:"";position:absolute;inset:0;background:rgba(42,38,34,var(--veil,.38));transition:background .8s var(--ease)}
.project:hover .media .brand::before{background:rgba(42,38,34,calc(var(--veil,.38) - .12))}
.media .brand .logo{position:relative;width:var(--lw,40%);max-height:62%;display:flex;justify-content:center;overflow:hidden}
.media .brand img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
.motion .media .brand img{transform:translateY(110%);transition:transform 1.1s var(--ease) .7s}
.motion .media.in .brand img{transform:none}
@media (max-width:767px){.media .brand .logo{width:var(--lw-m,calc(var(--lw,40%) * 1.35))}}
.motion .contact h2 .row > span{transform:translateY(108%)}
.motion .contact h2.in .row > span{transform:none;transition:transform 1.1s var(--ease) calc(var(--i) * .12s)}
.motion .statement .w{opacity:.2}
.motion .statement .w.lit{opacity:1}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .menu-toggle{display:block}
    .menu-toggle{display:inline-flex}
  .logo{position:relative;z-index:2;transition:color .5s}
  .site-header.open-menu{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
  .site-header.open-menu .logo{color:var(--ink)}
  .nav ul{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:0;padding:7rem var(--gutter) 3rem;background:var(--taupe);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
  .nav.open ul{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease)}
  .nav li{overflow:hidden}
  .nav li a{display:block;font-size:clamp(2.75rem,13vw,4.25rem);font-weight:200;letter-spacing:-.045em;line-height:1.08;padding:.1rem 0 .2rem;background:none;transform:translateY(110%);transition:transform .6s var(--ease)}
  .nav.open li a{transform:none;transition:transform .9s var(--ease) calc(.3s + var(--i) * .08s)}
  .nav li a .roll{height:auto;overflow:visible}
  .nav li a .roll > span::after{display:none}
  .nav li a:hover .roll > span{transform:none}
  .nav li:not(.menu-meta) a .roll{display:inline-flex;align-items:center}
  .nav li:not(.menu-meta) a .roll::before{content:"";flex:none;height:.07em;width:0;margin-right:0;background:var(--ink);transition:width .5s var(--ease),margin .5s var(--ease)}
  .nav li:not(.menu-meta) a:hover .roll::before,.nav li:not(.menu-meta) a:active .roll::before,.nav li:not(.menu-meta) a:focus-visible .roll::before{width:.8em;margin-right:.25em}
  .nav li a:hover,.nav li a:focus-visible{background:none;color:var(--ink)}
  .nav li.menu-meta{display:flex;flex-direction:column;gap:.35rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(42,38,34,.25)}
  .nav li.menu-meta a{font-size:1.1rem;font-weight:500;letter-spacing:0;line-height:1.4;padding:0}
  .hero{min-height:auto;justify-content:flex-start;padding-top:7.5rem}
  .big{font-size:clamp(2.6rem,11.5vw,4rem)}
  .big .row > span{white-space:nowrap}
  .row-bar .bar{height:.09em;margin-top:.05em}
  .hero-foot p,.hero-foot .actions{grid-column:1 / -1;justify-self:start}
  .reel{height:170vh}
  .p-a,.p-b,.p-c,.p-d,.projects.filtered .project{grid-column:1 / -1;margin-top:0}
  .projects:not(.filtered) .media{height:auto;aspect-ratio:4/3}
  .service p,.service ul,.service .textlink{grid-column:1 / -1;justify-self:start}
  .band-foot > p,.band-foot > div,.band-foot > .actions{grid-column:1 / -1}
  .c-row{flex-direction:column;gap:0;padding:.5rem 0;font-size:clamp(1.45rem,6.6vw,1.9rem)}
  .clients small{text-align:left;font-size:.8125rem}
  .trust-grid{display:flex;flex-direction:column;gap:1.25rem}
  .trust-head h2{font-size:clamp(2.25rem,10vw,2.75rem)}
  .trust-head p{display:none}
  .trust-progress{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reel{height:auto}
  .reel-sticky{position:relative;height:80vh}
  .reel-media{clip-path:none}
  .reel-captions,.reel-end{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ================= Unterseiten ================= */
.nav a[aria-current="page"]{background-size:100% 2px}
/* Seitenkopf: wie der Hero, aber kompakter */
.page-hero{padding-top:clamp(8.5rem,16vw,13rem);padding-bottom:clamp(3rem,6vw,5rem)}
.page-hero h1{margin:0;font-weight:inherit}
.page-hero .big{font-size:clamp(3rem,9.5vw,9.5rem)}
.page-hero .lead{max-width:36em;margin:clamp(2rem,4vw,3rem) 0 0;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem .6rem;list-style:none;margin:0 0 clamp(1rem,2.5vw,2rem);padding:0;font-size:.9375rem;color:var(--taupe-deep)}
.crumbs li+li::before{content:"";display:inline-block;width:.9rem;height:2px;background:var(--taupe);vertical-align:middle;margin-right:.6rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.motion .page-hero .row > span{transform:translateY(108%)}
.motion.loaded .page-hero .row > span{transform:none;transition:transform 1.2s var(--ease) calc(var(--i) * .12s)}
.motion .page-hero .row-bar .bar{transform:scaleX(0)}
.motion.loaded .page-hero .row-bar .bar{transform:none;transition:transform 1.4s var(--ease) .5s}
.motion .page-hero .crumbs,.motion .page-hero .lead,.motion .page-hero .hero-meta{opacity:0;transform:translateY(1rem)}
.motion.loaded .page-hero .crumbs,.motion.loaded .page-hero .lead,.motion.loaded .page-hero .hero-meta{opacity:1;transform:none;transition:opacity .9s ease .55s,transform 1s var(--ease) .55s}

/* Eckdaten eines Projekts */
.hero-meta{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem var(--gutter);margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.hero-meta div{grid-column:span 3}
.hero-meta dt{font-size:.875rem;color:var(--taupe-deep);margin-bottom:.35rem}
.hero-meta dd{margin:0;font-size:1rem}

/* Fließtext-Blöcke im Raster */
.text-block{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem var(--gutter);padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.text-block h2{grid-column:1 / span 4;font-size:clamp(2rem,3.6vw,3.25rem)}
.text-block .body{grid-column:6 / span 6;max-width:38em}
.text-block .body p{margin:0 0 1.1em}
.text-block .body ul{margin:0;padding:0;list-style:none}
.text-block .body li{display:flex;gap:.9rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--line)}
.text-block .body li::before{content:"";flex:0 0 1.1rem;height:3px;background:var(--taupe);transform:translateY(-.3em)}

/* Bildstrecke eines Projekts: 7/5 und 5/7 im Wechsel, einzelne Bilder volle Breite */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.75rem) var(--gutter);padding-bottom:clamp(4rem,8vw,7rem)}
.gallery figure{margin:0}
.gallery .media{width:100%}
.gallery .g-full{grid-column:1 / -1}
.gallery .g-7{grid-column:span 7}
.gallery .g-5{grid-column:span 5}
.gallery .g-6{grid-column:span 6}
.gallery .media{aspect-ratio:auto;height:clamp(18rem,36vw,40rem)}
.gallery .g-full .media{height:clamp(20rem,52vw,52rem)}
.gallery figcaption{font-size:.875rem;color:var(--taupe-deep);margin-top:.6rem}
.media video{display:block;width:100%;height:100%;object-fit:cover}

/* Nächstes Projekt */
.pager{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.pager a{text-decoration:none;display:block}
.pager .prev{grid-column:1 / span 5}
.pager .next{grid-column:8 / span 5;text-align:right}
.pager small{display:block;color:var(--taupe-deep);font-size:.9375rem;margin-bottom:.4rem}
.pager span{font-size:clamp(1.6rem,3vw,2.75rem);font-weight:200;letter-spacing:-.04em;line-height:1.05;transition:font-weight .4s ease}
.pager a:hover span{font-weight:700}

/* Projektübersicht */
.overview .projects .p-l{grid-column:span 7}
.overview .projects .p-s{grid-column:span 5}
.overview .project .ph-empty{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;color:var(--taupe-deep);font-size:.875rem}

/* Rechtstexte */
.prose{max-width:46em;padding-bottom:clamp(5rem,9vw,8rem)}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:3rem 0 1rem}
.prose h3{font-size:1.125rem;font-weight:700;margin:2rem 0 .5rem}
.prose p,.prose ul{margin:0 0 1em}
.prose ul{padding-left:1.2em}
.prose a{text-decoration-color:var(--taupe);text-underline-offset:.2em}
.prose .todo{background:#FFF3C4;padding:.1em .35em}
.prose .stand{color:var(--taupe-deep);font-size:.9375rem}

/* Über pitch */
.about-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end;padding-bottom:clamp(4rem,8vw,7rem)}
.about-intro .media{grid-column:1 / span 5;aspect-ratio:4/5}
.about-intro .about-text{grid-column:7 / span 6;max-width:34em}
.about-intro .about-text p{margin:0 0 1.1em;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.55}
.about-intro .sign{font-weight:500;margin-top:1.5rem}
.facts{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.facts div{grid-column:span 4}
.facts b{display:block;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;letter-spacing:-.05em;line-height:1}
.facts span{display:block;color:var(--taupe-deep);margin-top:.5rem}

/* Kontaktformular */
.contact-layout{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,5vw,4rem) var(--gutter);padding-bottom:clamp(5rem,9vw,8rem)}
.contact-layout .contact-form{grid-column:1 / span 7}
.contact-layout aside{grid-column:9 / span 4}
.contact-layout aside h2{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.03em;margin:0 0 1rem}
.contact-layout aside p{margin:0 0 1.5rem}
.contact-layout aside .direct{display:block;font-size:clamp(1.2rem,1.7vw,1.5rem);text-decoration:none;margin-bottom:.4rem}
.contact-form .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.contact-form label,.contact-form legend{font-size:.9375rem;color:var(--taupe-deep)}
.contact-form input,.contact-form textarea,.contact-form select{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:.6rem 0;border-radius:0;outline:none;transition:border-color .3s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.contact-form textarea{min-height:9rem;resize:vertical}
.contact-form fieldset{border:0;margin:0 0 1.5rem;padding:0}
.contact-form .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.contact-form .chips label{position:relative;cursor:pointer}
.contact-form .chips input{position:absolute;opacity:0;pointer-events:none}
.contact-form .chips span{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);color:var(--ink);font-size:.9375rem;transition:background-color .3s,border-color .3s,color .3s}
.contact-form .chips input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.contact-form .chips input:focus-visible + span{outline:2px solid var(--taupe);outline-offset:2px}
.contact-form .hp{position:absolute;left:-9999px}
.contact-form .note{font-size:.875rem;color:var(--taupe-deep);margin:0 0 1.5rem;max-width:36em}
.contact-form button{border:0;cursor:pointer;font:inherit}
.form-status{margin-top:1.25rem;font-size:1rem;min-height:1.5em}
.form-status.ok{color:var(--ink)}
.form-status.err{color:#9B2C2C}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-size:clamp(1.1rem,1.5vw,1.3rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 1.1rem;height:3px;background:var(--taupe);align-self:center;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(90deg)}
.faq details p{margin:0 0 1.2rem;max-width:40em}

@media (max-width:820px){
  .hero-meta div{grid-column:span 6}
  .text-block h2,.text-block .body{grid-column:1 / -1}
  .gallery .g-7,.gallery .g-5,.gallery .g-6{grid-column:1 / -1}
  .gallery .media{height:auto;aspect-ratio:4/3}
  .gallery .g-full .media{height:auto;aspect-ratio:4/3}
  .pager .prev,.pager .next{grid-column:1 / -1;text-align:left}
  .overview .projects .p-l,.overview .projects .p-s{grid-column:1 / -1}
  .about-intro .media,.about-intro .about-text{grid-column:1 / -1}
  .facts div{grid-column:1 / -1}
  .contact-layout .contact-form,.contact-layout aside{grid-column:1 / -1}
  .contact-form .row2{grid-template-columns:1fr}
}

/* Projektseiten: Titelbild, bündige Bildreihen, Filme */
.cover{padding-bottom:clamp(1rem,2vw,1.75rem)}
.cover .media{aspect-ratio:auto;height:clamp(20rem,56vw,56rem)}
.gallery{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.75rem);padding-bottom:clamp(4rem,8vw,7rem)}
.gallery .g-row{display:flex;gap:clamp(1rem,2vw,1.75rem);align-items:flex-start}
.gallery figure{margin:0;min-width:0}
.gallery .media{height:auto;width:100%;background:var(--stone)}
.gallery .media img{display:block;width:100%;height:100%;object-fit:cover}
.films{padding-bottom:clamp(4rem,8vw,7rem)}
.films-head{margin-bottom:clamp(2rem,4vw,3rem)}
.films-head h2{font-size:clamp(2rem,3.6vw,3.25rem)}
.film{margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.film video{display:block;width:100%;height:auto;background:var(--ink)}
.film.hoch video{width:auto;max-width:100%;max-height:86svh;margin:0}
.overview .projects .p-full{grid-column:1 / -1}
.overview .project img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .gallery .g-row{flex-direction:column}
  .gallery .g-row figure{flex:none!important;width:100%}
  .cover .media{height:auto;aspect-ratio:4/3}
}
.partner .p-ort{color:var(--taupe-deep)}
.partner .textlink{padding-bottom:.1rem}

/* Taupe-Band „Starke Marken …“: großes Anführungszeichen in Sand als Hintergrundmotiv */
.section-band{position:relative;overflow:hidden}
.section-band .approach{position:relative}
.section-band .approach > *{position:relative;z-index:1}
.section-band .approach::before{content:"\201C" / "";position:absolute;z-index:0;right:calc(var(--gutter) - .06em);top:calc(clamp(6rem,13vw,12rem) - .12em);
  font-size:clamp(18rem,42vw,44rem);font-weight:700;line-height:.8;letter-spacing:0;color:#E3DCD4;opacity:.42;pointer-events:none;transform-origin:right top}
.motion .section-band .approach::before{opacity:0;transform:translateY(8%)}
.motion .section-band.in .approach::before{opacity:.42;transform:none;transition:opacity 1.4s ease .2s,transform 1.6s var(--ease) .2s}
@media (max-width:820px){
  .section-band .approach::before{font-size:clamp(12rem,62vw,20rem);top:calc(clamp(6rem,13vw,12rem) - .2em)}
}
.film figcaption{max-width:42em;margin-top:1.1rem}
.film figcaption h3{margin:0 0 .4rem;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.02em}
.film figcaption p{margin:0;color:var(--taupe-deep)}
.film.hoch{display:flex;flex-direction:column;align-items:center}
.film.hoch figcaption{align-self:stretch}
.film-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter,1.5rem);align-items:start}
.film-reihe .film{margin:0}
.film-reihe .film.hoch video{width:100%;max-height:none}
@media (max-width:767px){
  .film-reihe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .film-reihe::-webkit-scrollbar{display:none}
  .film-reihe .film{flex:0 0 78%;scroll-snap-align:start}
}
/* Seitenköpfe der Unterseiten: lange Überschriften dürfen umbrechen, nichts läuft aus dem Bild */
.page-hero .big .row > span,.page-hero .big .row-bar > span:first-child{white-space:normal;overflow-wrap:break-word;hyphens:manual}
@media (max-width:820px){ .page-hero .big{font-size:clamp(2.3rem,10.5vw,4rem)} }
/* Titelbild der Projektseite: Seitenverhältnis des Bildes, damit Motiv und Text nicht beschnitten werden */
.cover .media{height:auto;aspect-ratio:var(--r,1.6)}
.cover .media .inner{top:-6%;height:112%}
@media (max-width:820px){ .cover .media{aspect-ratio:var(--r,1.6)} }

/* MacBook-Mockup: klappt beim Scrollen auf, danach scrollt die Website im Bildschirm */
.macbook-stage{position:relative;height:var(--stage,420vh);margin:clamp(2rem,5vw,4rem) 0}
.mb-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3vh,2rem);overflow:hidden}
.mb-label{margin:0;font-size:.9375rem;color:var(--taupe-deep);display:flex;align-items:center;gap:.75rem}
.mb-label span{color:var(--ink);font-weight:500}
.mb-label span::after{content:"";display:inline-block;width:1.4rem;height:3px;background:var(--taupe);margin-left:.75rem;vertical-align:middle}
.mb{--w:min(78vw,calc(66svh * 1.6),1100px);width:var(--w);perspective:calc(var(--w) * 2.2);perspective-origin:50% 30%}
.mb-lid{position:relative;width:88%;margin:0 auto;aspect-ratio:16/10.4;background:#1d1d1f;border-radius:calc(var(--w) * .022) calc(var(--w) * .022) 0 0;
  padding:calc(var(--w) * .016) calc(var(--w) * .016) calc(var(--w) * .03);transform-origin:50% 100%;transform:rotateX(var(--lid,0deg));
  box-shadow:0 0 0 1px #3a3a3c inset,0 calc(var(--w) * .02) calc(var(--w) * .05) rgba(42,38,34,.18);backface-visibility:hidden}
.mb-screen{position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fff;border-radius:3px}
.mb-screen::-webkit-scrollbar{display:none}
.motion .macbook-stage:not(.mb-ready) .mb-screen{overflow-y:hidden;touch-action:pan-y}
@media (max-width:767px){.mb{--w:calc(100vw - 2 * var(--gutter))}}   /* mobil: Unterteil bündig mit der Schriftkante */
.mb-hint{position:absolute;left:50%;bottom:9%;z-index:2;display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem .45rem .9rem;background:#E3DCD4;color:var(--ink);box-shadow:0 2px 14px rgba(42,38,34,.28);font-size:clamp(.68rem,.9vw,.8rem);letter-spacing:.04em;border-radius:2px;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .5s ease,transform .6s var(--ease)}
.mb-hint.on{opacity:1;transform:translate(-50%,0)}
.mb-hint i{position:relative;display:block;width:3px;height:1.15em;background:rgba(42,38,34,.15);overflow:hidden}
.mb-hint i::after{content:"";position:absolute;left:0;top:0;width:100%;height:45%;background:var(--ink);animation:mbHint 1.6s var(--ease) infinite}
@keyframes mbHint{0%{transform:translateY(-100%)}100%{transform:translateY(230%)}}
@media (prefers-reduced-motion:reduce){.mb-hint i::after{animation:none;top:28%}}
.mb-page{position:relative;width:100%}
.mb-page img{display:block;width:100%;height:auto}
.mb-cam{position:absolute;top:calc(var(--w) * .006);left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a3a3c}
.mb-base{position:relative;width:100%;height:calc(var(--w) * .022);background:linear-gradient(#e3e4e6,#b9bbbe 70%,#9d9fa2);border-radius:0 0 calc(var(--w) * .03) calc(var(--w) * .03);box-shadow:0 calc(var(--w) * .02) calc(var(--w) * .03) rgba(42,38,34,.22)}
.mb-base span{position:absolute;left:50%;top:0;width:14%;height:45%;margin-left:-7%;background:#c9cbce;border-radius:0 0 6px 6px}
@media (prefers-reduced-motion:reduce){
  .macbook-stage{height:auto}
  .mb-sticky{position:relative;height:auto;padding:3rem 0}
  .mb-lid{transform:none}
  .mb-screen{overflow-y:auto}
}
.mb-page{display:none}
.mb-page.on{display:block}
.mb-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.75rem;max-width:min(90vw,1100px)}
.mb-tabs button{background:none;border:0;padding:.35rem 0;font:inherit;font-size:1rem;color:var(--taupe-deep);cursor:pointer;position:relative}
.mb-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--taupe);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mb-tabs button:hover{color:var(--ink)}
.mb-tabs button[aria-selected="true"]{color:var(--ink)}
.mb-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
@media (max-width:420px){.mb-tabs{flex-wrap:nowrap;gap:.25rem clamp(.9rem,4.5vw,1.75rem)}}
.macbook-stage + .cover{margin-top:clamp(2rem,5vw,4rem)}
.macbook-stage,.macbook-stage *{overflow-anchor:none}
html:has(.macbook-stage){overflow-anchor:none}
.macbook-stage{margin-top:0}
.mb-sticky{pointer-events:none}
.mb-sticky > *{pointer-events:auto}
.macbook-stage.on-home{margin-top:clamp(3rem,6vw,5rem)}
.mb-label .textlink{color:var(--ink);font-weight:400}
/* Startseite: Beschriftung unter dem MacBook wie bei den Projektkacheln */
.mb-caption{width:100%;align-self:stretch}
.mb-caption h3 a{text-decoration:none;color:inherit}
.mb-caption h3 a:hover{color:var(--taupe-deep)}
.mb-caption p .textlink{color:inherit}

/* Nach oben */
.to-top{position:fixed;right:max(var(--gutter),env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:30;width:3rem;height:3rem;border:0;padding:0;cursor:pointer;
  background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  opacity:0;transform:translateY(1rem);pointer-events:none;transition:opacity .4s ease,transform .5s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--taupe);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.to-top:hover::before,.to-top:focus-visible::before{transform:scaleY(1)}
.to-top:hover,.to-top:focus-visible{color:var(--ink)}
.to-top svg{width:1.1rem;height:1.1rem;transition:transform .4s var(--ease)}
.to-top:hover svg{transform:translateY(-2px)}
.to-top i{position:absolute;left:50%;bottom:.55rem;width:1rem;height:2px;margin-left:-.5rem;background:var(--taupe);transition:background-color .4s}
.to-top:hover i,.to-top:focus-visible i{background:var(--ink)}
.band .to-top{display:none}
main h1:focus,main:focus{outline:none}
/* Unterseiten: Abstand Überschrift -> Balken wie bei den Abschnittsüberschriften (2rem) */
.page-hero .row-bar .bar,.hero .row-bar .bar{margin-top:1.75rem}   /* Abstand wie bei den Abschnittsüberschriften (Tobi) */

.facts div{grid-column:span 3}
@media (max-width:820px){ .facts div{grid-column:span 6} }
/* Bereich Hochzeitskarten in /projekte/ */
.overview#hochzeitskarten{margin-top:clamp(5rem,9vw,8rem)}
.section-lead{max-width:38em;margin:0 0 clamp(2rem,4vw,3rem);font-size:1.125rem;color:var(--taupe-deep)}

.service li .textlink{color:inherit;padding-bottom:.05rem}   /* Leistungen auf der Startseite verlinken die Neuss-Seiten (SEO-Audit 08.10.2026) */

/* 404: Wurfspiel „Fehlwurf“ – Punkt auf den Balken werfen (Tobi 08.10.2026) */
.toss{margin-top:clamp(1.5rem,4vw,3rem);margin-bottom:clamp(3rem,8vw,6rem)}
.toss-field{position:relative;height:clamp(340px,58vh,600px);-webkit-user-select:none;user-select:none}
.toss-field canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.toss-field canvas.drag{cursor:grabbing}
.toss-hint,.toss-count{position:absolute;top:0;margin:0;font-size:.875rem;letter-spacing:.02em;color:var(--taupe-deep);pointer-events:none}
.toss-hint{left:0;display:flex;align-items:center;gap:.6rem;transition:opacity .5s ease}
.toss-hint.off{opacity:0}
.toss-hint i{position:relative;display:block;width:3px;height:1.15em;background:rgba(42,38,34,.15);overflow:hidden}
.toss-hint i::after{content:"";position:absolute;left:0;top:0;width:100%;height:45%;background:var(--ink);animation:mbHint 1.6s var(--ease) infinite}
.toss-count{right:0;font-variant-numeric:tabular-nums}
.toss-win{position:absolute;left:0;top:18%;max-width:36rem;visibility:hidden}
.toss-win.on{visibility:visible}
.toss-win-h{margin:0 0 1.75rem;font-size:clamp(2.2rem,6vw,5rem);font-weight:200;line-height:.95;letter-spacing:-.045em}
.toss-win-h b{font-weight:700}
.toss-win-h .m{display:block;clip-path:inset(0 -100vw);padding-bottom:.12em;margin-bottom:-.12em}
.toss-win-h .m > *{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.toss-win-h .m + .m > *{transition-delay:.12s}
.toss-win.on .toss-win-h .m > *{transform:none}
.toss-win-a{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;margin:0;opacity:0;transition:opacity .6s ease .45s}
.toss-win.on .toss-win-a{opacity:1}
.toss-again{background:none;border:0;padding:0 0 .2rem;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer}
@media (prefers-reduced-motion:reduce){.toss-hint i::after{animation:none;top:28%}.toss-win-h .m > *{transform:none;transition:none}}