/* Layout: warmes, helles Papier, das beim Scrollen fließend in die Nacht des
   Backyard Ultra übergeht. Weiche Grotesk in Groß/Klein, runde Bilder,
   Mandarine als einziger Akzent. Alles bewegt sich langsam und ausgerollt. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2-variations");font-weight:100 800;font-display:swap}
@font-face{font-family:"Homemade Apple";src:url("../fonts/homemade-apple.woff2") format("woff2");font-weight:400;font-display:swap}

/* Farben als animierbare Eigenschaften, damit Tag und Nacht ineinander fließen */
@property --bg{syntax:"<color>";inherits:true;initial-value:#F4F1EC}
@property --fg{syntax:"<color>";inherits:true;initial-value:#1C1A17}
@property --mute{syntax:"<color>";inherits:true;initial-value:#77706A}
@property --line{syntax:"<color>";inherits:true;initial-value:rgba(28,26,23,.12)}
@property --soft{syntax:"<color>";inherits:true;initial-value:#E9E4DC}

:root{
  --bg:#F4F1EC;        /* warmes Papier */
  --fg:#1C1A17;
  --mute:#77706A;
  --line:rgba(28,26,23,.12);
  --soft:#E9E4DC;
  --mandarin:#FF6B1F;
  --mandarin-soft:#FFB48A;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-hand:"Homemade Apple","Bradley Hand","Segoe Script",cursive;

  --gutter:clamp(16px,3.4vw,52px);
  --radius:clamp(14px,1.6vw,24px);
  --s-1:.875rem; --s0:1.0625rem; --s1:clamp(1.2rem,1.6vw,1.45rem);
  --s2:clamp(1.9rem,3.6vw,3.2rem); --s3:clamp(2.6rem,6.4vw,6.2rem); --s4:clamp(3.4rem,11.5vw,12.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.45,0,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:var(--s0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:--bg 1.2s var(--ease-soft),--fg 1.2s var(--ease-soft),--mute 1.2s var(--ease-soft),--line 1.2s var(--ease-soft),--soft 1.2s var(--ease-soft);
}
body.is-night{--bg:#141210;--fg:#F1EDE7;--mute:#9A928A;--line:rgba(241,237,231,.13);--soft:#221F1C}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--mandarin);outline-offset:4px;border-radius:4px}
::selection{background:var(--mandarin-soft);color:#1C1A17}

.wrap{padding-inline:var(--gutter)}
.label{font-size:var(--s-1);color:var(--mute);display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.01em}
.label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mandarin);flex:none}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.display{font-family:var(--f-display);font-stretch:104%;font-weight:560;letter-spacing:-.04em;line-height:.95;margin:0;text-wrap:balance}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) 16px;pointer-events:none}
.nav>*{pointer-events:auto}
.nav__name{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:1.05rem}
.nav__pill{display:flex;gap:.25rem;list-style:none;margin:0;padding:.3rem;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line)}
.nav__pill a{display:block;padding:.45rem .9rem;border-radius:999px;text-decoration:none;font-size:var(--s-1);transition:background .5s var(--ease),color .5s var(--ease)}
.nav__pill a:hover{background:var(--fg);color:var(--bg)}
.nav__time{font-size:var(--s-1);color:var(--mute)}
@media (max-width:1060px){.nav__pill{display:none}}

/* ---------- Hero: Foto im Querformat über die ganze Breite, Text darüber ---------- */
.hero{padding:0}
.hero__stage{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:560px;background:#2a2622;color:#F6F2EC}
.hero__bg{position:absolute;inset:-4% 0 0 0;will-change:transform}
.hero__photo{position:absolute;inset:0}
.hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform-origin:50% 40%}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.18) 0%,rgba(20,18,16,0) 22%,rgba(20,18,16,0) 45%,rgba(20,18,16,.7) 100%),linear-gradient(90deg,rgba(20,18,16,.32) 0%,rgba(20,18,16,0) 50%)}
.hero__text{position:absolute;left:0;right:0;bottom:clamp(70px,8vw,120px);display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px)}
.hero__text .label,.hero__foot .label{color:rgba(246,242,236,.85)}
.hero h1{font-size:clamp(3.6rem,11vw,12rem);color:#F6F2EC}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>span{display:inline-block}
.hero__lede{font-size:var(--s1);line-height:1.4;max-width:30ch;margin:0;color:#F6F2EC}
.hero__lede span{color:rgba(246,242,236,.72)}
.hero__foot{position:absolute;left:0;right:0;bottom:clamp(18px,2.2vw,32px);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.scroll-hint{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--s-1);color:rgba(246,242,236,.8)}
.scroll-hint i{width:1px;height:28px;background:rgba(246,242,236,.3);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#F6F2EC;animation:drip 2.4s var(--ease-soft) infinite}
@keyframes drip{to{top:100%}}
@media (max-width:760px){
  .hero__stage{min-height:520px}
  .hero__photo img{object-position:50% 30%}
  .scroll-hint{display:none}
  .hero__shade{background:linear-gradient(180deg,rgba(20,18,16,0) 30%,rgba(20,18,16,.7) 100%)}
}

/* Intro: weich hochgleiten und scharf werden */
.hero h1 .ln>span,.hero__lede,.hero__stage,.hero__foot{transition:transform 1.8s var(--ease),opacity 1.6s var(--ease),filter 1.6s var(--ease),clip-path 1.8s var(--ease)}
.hero h1 .ln:nth-child(2)>span{transition-delay:.1s}
.hero__lede{transition-delay:.35s}
.hero__foot{transition-delay:.5s}
.hero__photo img{transition:transform 2.4s var(--ease)}
.is-loading .hero h1 .ln>span{transform:translateY(70%);opacity:0;filter:blur(10px)}
.is-loading .hero__lede,.is-loading .hero__foot{opacity:0;transform:translateY(16px);filter:blur(6px)}
.is-loading .hero__stage{clip-path:inset(0 0 0 0)}
.is-loading .hero__photo img{transform:scale(1.12)}

/* ---------- Scroll-Reveal ---------- */
[data-reveal]{transition:transform 1.4s var(--ease),opacity 1.2s var(--ease),filter 1.2s var(--ease);transition-delay:var(--d,0s)}
.rv-wait[data-reveal]{opacity:0;transform:translateY(48px);filter:blur(8px)}

/* ---------- Über mich ---------- */
.about{padding-block:clamp(90px,15vw,220px)}
.about__text{font-family:var(--f-display);font-stretch:104%;font-weight:500;letter-spacing:-.035em;line-height:1.04;font-size:var(--s3);max-width:20ch;margin:0;text-wrap:balance}
.about__text .w{transition:opacity .5s linear}
.about__text em{font-style:normal;color:var(--mandarin)}
.about__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter);margin-top:clamp(48px,6vw,88px);align-items:end}
.about__body{margin:0;color:var(--mute);max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.chips li{border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:var(--s-1);transition:background .5s var(--ease),color .5s var(--ease)}
.chips li:hover{background:var(--fg);color:var(--bg)}
@media (max-width:760px){.about__row{grid-template-columns:1fr}}

/* ---------- Meine Geschichte ---------- */
.story{padding-bottom:clamp(90px,13vw,200px)}
.story__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gutter);margin-top:clamp(32px,4vw,60px);align-items:start}
.story__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.story h2{font-size:var(--s2);max-width:14ch}
.story__img{max-width:420px}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.tl__item{position:relative;display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.4rem;padding:0 0 clamp(36px,4.6vw,64px) 2.2rem}
.tl__item::before{content:"";position:absolute;left:0;top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--mute)}
.tl__item--now::before{background:var(--mandarin);border-color:var(--mandarin);box-shadow:0 0 0 6px color-mix(in srgb,var(--mandarin) 22%,transparent)}
.tl__year{font-size:var(--s-1);color:var(--mute);padding-top:.25rem}
.tl__body h3{font-family:var(--f-display);font-weight:560;letter-spacing:-.03em;font-size:var(--s1);line-height:1.2;margin:0 0 .5rem}
.tl__body p{margin:0;color:var(--mute);max-width:46ch}
.story__claim{font-family:var(--f-display);font-stretch:104%;font-weight:520;letter-spacing:-.04em;line-height:1;font-size:var(--s3);margin:clamp(40px,6vw,90px) 0 0;max-width:16ch;text-wrap:balance}
.story__claim em{font-style:normal;color:var(--mandarin)}
@media (max-width:760px){
  .story__grid{grid-template-columns:1fr}
  .story__side{position:relative;top:auto}
  .tl__item{grid-template-columns:1fr;gap:.3rem;padding-left:1.8rem}
}

/* ---------- Backyard ---------- */
.night{padding-block:clamp(110px,15vw,220px)}
.night__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gutter);align-items:end}
.night h2{font-size:clamp(4.2rem,13vw,13rem);margin-top:1.2rem}
.night h2 span{color:var(--mandarin)}
.night__copy{max-width:42ch;margin:0;color:var(--mute)}
.night__copy strong{color:var(--fg);font-weight:600}
@media (max-width:760px){.night__head{grid-template-columns:1fr}}

.laps{margin-top:clamp(56px,7vw,100px)}
.laps__bar{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:clamp(4px,.7vw,10px);height:clamp(100px,13vw,170px);align-items:end}
.lap{position:relative;height:100%;background:var(--line);border-radius:10px;border:0;padding:0;cursor:default;overflow:hidden;color:inherit;font:inherit}
.lap i{position:absolute;inset:auto 0 0 0;height:var(--h,60%);background:var(--mandarin);border-radius:10px;transform-origin:bottom;
  transition:transform 1.4s var(--ease),background .6s var(--ease);transition-delay:calc(var(--n,0) * 55ms)}
.laps.is-pending .lap i{transform:scaleY(.06)}
.lap:hover i,.lap:focus-visible i,.lap.is-active i{background:var(--fg);transition-delay:0s}
.laps__axis{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:clamp(4px,.7vw,10px);margin-top:.7rem;text-align:center;font-size:.75rem;color:var(--mute)}
.laps__readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:var(--s-1);color:var(--mute)}
.laps__readout b{color:var(--fg);font-weight:500}
@media (max-width:560px){.laps__axis span:nth-child(even){visibility:hidden}}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(64px,8vw,120px)}
.stat{border-top:1px solid var(--line);padding-top:1.1rem;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.stat__v{font-family:var(--f-display);font-weight:520;letter-spacing:-.04em;font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--s-1);color:var(--mute)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;row-gap:2rem}}

.night__imgs{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr);gap:var(--gutter);margin-top:clamp(80px,10vw,150px);align-items:start}
.night__imgs .ph:nth-child(2){margin-top:26%}
.night__imgs .ph:nth-child(3){margin-top:9%}
@media (max-width:760px){.night__imgs{grid-template-columns:1fr 1fr}.night__imgs .ph:nth-child(3){display:none}}

/* Bild-Baustein: runder Rahmen, Bild gleitet darin */
.ph{position:relative;margin:0;min-width:0;aspect-ratio:var(--ar,4/5);border-radius:var(--radius);overflow:hidden;background:var(--soft);
  transition:transform 1.6s var(--ease),opacity 1.2s var(--ease),clip-path 1.6s var(--ease)}
.ph img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;will-change:transform}
.ph.rv-wait{clip-path:inset(10% 6% 0 6% round var(--radius));opacity:0;transform:translateY(60px)}

/* ---------- Was ich mache ---------- */
.do{padding-block:clamp(90px,13vw,200px)}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.sec-head .count{font-size:var(--s-1);color:var(--mute)}
.do__list{list-style:none;margin:0;padding:0}
.do__item{border-bottom:1px solid var(--line)}
.do__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);align-items:center;gap:var(--gutter);padding-block:clamp(18px,2.4vw,34px);text-decoration:none}
.do__t{font-family:var(--f-display);font-stretch:104%;font-weight:520;letter-spacing:-.04em;font-size:clamp(2.2rem,5.6vw,5.6rem);line-height:1;transition:transform 1s var(--ease),color .8s var(--ease)}
.do__d{color:var(--mute);margin:0;transition:color .8s var(--ease)}
.do__item:hover .do__t{transform:translateX(.22em);color:var(--mandarin)}
.do__item:hover .do__d{color:var(--fg)}
.do__thumb{display:none}
@media (max-width:760px){
  .do__row{grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start}
  .do__thumb{display:block;width:76px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;grid-row:span 2}
}
.cursor-img{position:fixed;top:0;left:0;width:clamp(220px,19vw,320px);aspect-ratio:4/5;pointer-events:none;z-index:40;overflow:hidden;border-radius:var(--radius);
  opacity:0;transition:opacity .6s var(--ease)}
.cursor-img.is-on{opacity:1}
.cursor-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.cursor-img img.is-on{opacity:1;transform:scale(1)}
@media (hover:none),(max-width:760px){.cursor-img{display:none}}

/* ---------- Guides-Teaser (Startseite) ---------- */
.teaser{padding-bottom:clamp(90px,13vw,200px)}
.teaser__card{display:grid;grid-template-columns:clamp(120px,16vw,220px) minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center;
  padding:clamp(14px,1.6vw,22px);padding-right:clamp(20px,3vw,44px);border-radius:calc(var(--radius) * 1.4);background:var(--soft);text-decoration:none;
  transition:background .8s var(--ease),color .8s var(--ease),transform 1s var(--ease)}
.teaser__img{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden}
.teaser__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.teaser__text{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.teaser__text h2{font-size:var(--s2)}
.teaser__text p{margin:0;color:var(--mute);max-width:44ch;transition:color .8s var(--ease)}
.teaser__btn{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--s-1);font-weight:500;white-space:nowrap}
.teaser__btn i{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--mandarin);color:#1C1A17;font-style:normal;transition:transform .9s var(--ease)}
.teaser__card:hover{background:var(--fg);color:var(--bg);transform:translateY(-3px)}
.teaser__card:hover p{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.teaser__card:hover .teaser__img img{transform:scale(1.06)}
.teaser__card:hover .teaser__btn i{transform:translateX(4px)}
@media (max-width:760px){
  .teaser__card{grid-template-columns:96px minmax(0,1fr);padding-right:clamp(14px,1.6vw,22px)}
  .teaser__btn{grid-column:1 / -1}
}

/* ---------- Guides-Seite ---------- */
.guides-hero{padding-top:calc(env(safe-area-inset-top,0px) + 120px);padding-bottom:clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:clamp(20px,2.6vw,36px)}
.guides-hero h1{font-size:clamp(3rem,9.6vw,10.5rem)}
.guides-hero h1 span{color:var(--mandarin)}
.guides-hero p{font-size:var(--s1);line-height:1.4;max-width:40ch;margin:0;color:var(--mute)}

/* ---------- Mobility-Downloads ---------- */
.mob{padding-bottom:clamp(90px,13vw,200px)}
.mob__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--gutter);margin-top:clamp(32px,4vw,60px);align-items:start}
.mob__img{position:sticky;top:96px}
.mob__content{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);min-width:0}
.mob h2{font-size:var(--s2)}
.mob__intro{color:var(--mute);max-width:44ch;margin:1.2rem 0 0}
.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
.dl__item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t btn" "d btn";gap:.35rem 1.5rem;align-items:center;
  padding:clamp(20px,2.2vw,30px);border-radius:var(--radius);background:var(--soft);text-decoration:none;
  transition:transform 1s var(--ease),background .7s var(--ease),color .7s var(--ease)}
.dl__t{grid-area:t;font-family:var(--f-display);font-weight:560;letter-spacing:-.025em;font-size:var(--s1);line-height:1.15}
.dl__d{grid-area:d;color:var(--mute);transition:color .7s var(--ease)}
.dl__btn{grid-area:btn;display:inline-flex;align-items:center;gap:.6rem;font-size:var(--s-1);font-weight:500;white-space:nowrap}
.dl__btn i{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--mandarin);color:#1C1A17;font-style:normal;transition:transform .9s var(--ease)}
.dl__item:hover{background:var(--fg);color:var(--bg);transform:translateY(-3px)}
.dl__item:hover .dl__d{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.dl__item:hover .dl__btn i{transform:translateY(3px)}
@media (max-width:760px){
  .mob__grid{grid-template-columns:1fr}
  .mob__img{position:relative;top:auto}
  .dl__item{grid-template-columns:1fr;grid-template-areas:"t" "d" "btn"}
  .dl__btn{margin-top:.6rem}
}

/* ---------- Podcast ---------- */
.pod{padding-bottom:clamp(90px,13vw,200px)}
.pod__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gutter);align-items:end;background:var(--mandarin);color:#1C1A17;border-radius:calc(var(--radius) * 1.4);padding:clamp(24px,4.4vw,64px)}
.pod__card .label{color:#1C1A17}
.pod__card .label::before{background:#1C1A17}
.pod__title{font-size:clamp(3.2rem,9vw,9.6rem);margin-top:1rem}
.pod__right{display:flex;flex-direction:column;gap:1.6rem;max-width:36ch;justify-self:end}
.pod__right p{margin:0;font-size:var(--s1);line-height:1.4}
@media (max-width:760px){.pod__card{grid-template-columns:1fr}.pod__right{justify-self:start}}

.btn{display:inline-flex;align-items:center;gap:.6rem;width:max-content;padding:.9rem 1.35rem;border-radius:999px;text-decoration:none;font:inherit;font-size:var(--s-1);font-weight:500;
  border:1px solid currentColor;background:none;color:inherit;cursor:pointer;transition:background .6s var(--ease),color .6s var(--ease),transform .8s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:#1C1A17;color:#F4F1EC;border-color:#1C1A17}
.btn--solid:hover{background:#F4F1EC;color:#1C1A17}
.btn--line:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ---------- Galerie: vertikales Scrollen schiebt die Bilder seitlich ---------- */
.hs{position:relative}
.hs__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,40px);overflow:hidden}
.hs__track{display:flex;gap:clamp(12px,1.6vw,24px);padding-inline:var(--gutter);width:max-content;will-change:transform}
.hs__track .ph{flex:0 0 auto;width:clamp(240px,24vw,400px)}
.hs__track .ph:nth-child(3n+2){--ar:3/4;align-self:center}
.hs__track .ph:nth-child(3n){align-self:flex-end}
.hs__track{align-items:flex-start;height:clamp(380px,40vw,620px)}
.hs__progress{margin-inline:var(--gutter);height:1px;background:var(--line);position:relative;overflow:hidden}
.hs__progress i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:760px){
  .hs{height:auto!important}
  .hs__sticky{position:static;height:auto;padding-block:20px}
  .hs__track{width:auto;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important;align-items:stretch}
  .hs__track::-webkit-scrollbar{display:none}
  .hs__track .ph{width:68vw;scroll-snap-align:center;align-self:auto!important}
  .hs__progress{display:none}
}

/* ---------- Zusammenarbeit ---------- */
.work{padding-block:clamp(90px,13vw,200px)}
.work__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--gutter);margin-top:clamp(32px,4vw,60px)}
.work h2{font-size:var(--s3)}
.work__intro{color:var(--mute);max-width:40ch;margin:1.6rem 0 0}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.offer{background:var(--soft);border-radius:var(--radius);padding:clamp(20px,2.2vw,30px);min-width:0;display:flex;flex-direction:column;gap:.5rem;transition:transform 1s var(--ease),background .6s var(--ease)}
.offer:hover{transform:translateY(-4px)}
.offer h3{font-family:var(--f-display);font-weight:560;letter-spacing:-.025em;font-size:var(--s1);margin:.6rem 0 0;line-height:1.15}
.offer p{margin:0;color:var(--mute)}
@media (max-width:860px){.work__grid{grid-template-columns:1fr}}
@media (max-width:560px){.offers{grid-template-columns:1fr}}

/* ---------- Marken ---------- */
.brands{margin-top:clamp(64px,8vw,120px)}
.brands__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.brands__head .count{font-size:var(--s-1);color:var(--mute)}
.brands__rows{display:flex;flex-direction:column;gap:clamp(6px,1vw,14px);margin:clamp(28px,3.5vw,48px) calc(-1 * var(--gutter)) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee{display:flex;overflow:hidden;--dur:46s}
.marquee--rev{--dur:52s}
.marquee__track{display:flex;flex:none;gap:clamp(10px,1.2vw,16px);margin:0;padding:0 clamp(5px,.6vw,8px);list-style:none;animation:marquee var(--dur) linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.brands__rows:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.brand{display:grid;place-items:center;height:clamp(84px,9vw,128px);min-width:clamp(180px,17vw,260px);padding:0 clamp(24px,2.6vw,40px);border-radius:var(--radius);background:var(--soft);transition:background .7s var(--ease)}
.brand img{max-height:clamp(26px,2.6vw,38px);max-width:100%;width:auto;filter:grayscale(1);opacity:.72;transition:opacity .7s var(--ease),filter .7s var(--ease)}
.brand__name{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.25rem,1.9vw,1.8rem);color:var(--mute);white-space:nowrap;transition:color .7s var(--ease)}
.brand:hover img{opacity:1;filter:none}
/* Logos in CI-Farbe: die Datei dient als Maske, eingefärbt wird mit den Farben der Seite */
.brand__logo{display:block;width:clamp(110px,10vw,160px);height:clamp(26px,2.6vw,38px);background:var(--mute);
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .7s var(--ease)}
.brand:hover .brand__logo{background:var(--mandarin)}
.brand:hover .brand__name{color:var(--fg)}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee__track[aria-hidden]{display:none}
  .marquee{overflow-x:auto}
}

/* ---------- Kontakt ---------- */
.contact{padding-block:clamp(70px,10vw,150px) 0}
.contact__mail{display:block;font-family:var(--f-display);font-stretch:104%;font-weight:520;letter-spacing:-.045em;font-size:clamp(1rem,5.2vw,6.4rem);line-height:1.05;text-decoration:none;margin:1.4rem 0 2rem;overflow-wrap:anywhere;
  background:linear-gradient(var(--mandarin),var(--mandarin)) left bottom/0 3px no-repeat;transition:background-size 1s var(--ease),color .8s var(--ease)}
.contact__mail:hover{background-size:100% 3px;color:var(--mandarin)}
.contact__row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.sign{font-family:var(--f-hand);font-size:clamp(1.4rem,2.6vw,2.2rem);margin:clamp(56px,7vw,110px) 0 0;line-height:1.6;transform:rotate(-3deg);transform-origin:left;width:max-content;max-width:100%}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:28px calc(env(safe-area-inset-bottom,0px) + 28px);margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line);font-size:var(--s-1);color:var(--mute)}
.footer nav{display:flex;gap:1.4rem}
.footer a{text-decoration:none;transition:color .5s var(--ease)}
.footer a:hover{color:var(--fg)}

/* ---------- Rechtstexte ---------- */
.legal{padding-top:calc(env(safe-area-inset-top,0px) + 120px);padding-bottom:80px;max-width:68ch}
.legal h1{font-size:clamp(3rem,9vw,6.4rem);margin:0 0 2.6rem}
.legal h2{font-family:var(--f-display);font-weight:560;letter-spacing:-.02em;font-size:var(--s1);margin:2.4rem 0 .6rem}
.legal p,.legal li{color:#46413B}
.todo{background:var(--mandarin-soft);padding:0 .3em;border-radius:4px}

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
  .is-loading .hero h1 .ln>span,.is-loading .hero__lede,.is-loading .hero__foot,.is-loading .hero__stage,.rv-wait[data-reveal],.ph.rv-wait{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}
.nav__pill a[aria-current]{background:var(--fg);color:var(--bg)}

/* Navigation über dem Foto hell */
.nav.is-light .nav__name,.nav.is-light .nav__time{color:#F6F2EC}
.nav__name,.nav__time{transition:color .6s var(--ease)}

/* Startbild rechtsbündig: Text links auf hellem Grund, Foto rechts randlos (ab Tablet) */
@media (min-width:761px){
  .hero__stage{background:var(--bg);color:var(--fg)}
  .hero__bg{inset:0 0 0 auto;width:46%}
  .hero__photo img{object-position:50% 30%}
  .hero__shade{display:none}
  .hero__text{right:auto;width:54%;bottom:auto;top:50%;transform:translateY(-42%)}
  .hero h1{color:var(--fg);font-size:clamp(3.4rem,8.6vw,10rem)}
  .hero__text .label{color:var(--mute)}
  .nav.is-light .nav__name{color:var(--fg)}
}

/* ---------- Reichweite (unter Zusammenarbeit) ---------- */
.reach{margin-top:clamp(64px,8vw,120px)}
.reach__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--gutter);align-items:end;margin-top:clamp(28px,3.5vw,48px)}
.reach__total{display:flex;flex-direction:column;gap:.4rem}
.reach__big{font-family:var(--f-display);font-weight:540;letter-spacing:-.05em;line-height:.9;font-size:clamp(4.6rem,13vw,13rem);color:var(--mandarin)}
.reach__total span{color:var(--mute)}
.reach__channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.reach__proof{margin-top:clamp(40px,5vw,72px);background:var(--soft);border-radius:var(--radius);padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:1.4rem}
.reach__lead{margin:0;font-family:var(--f-display);font-weight:520;letter-spacing:-.03em;font-size:var(--s2);line-height:1.08;max-width:22ch;text-wrap:balance}
.reach__lead strong{font-weight:inherit;color:var(--mandarin)}
.reach__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.reach__facts li{display:flex;flex-direction:column;gap:.3rem;border-top:1px solid var(--line);padding-top:.9rem}
.reach__facts b{font-family:var(--f-display);font-weight:540;letter-spacing:-.03em;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1}
.reach__facts span{color:var(--mute);font-size:var(--s-1)}
.reach__src{margin:0;font-size:.78rem;color:var(--mute)}
@media (max-width:900px){.reach__grid{grid-template-columns:1fr}}
@media (max-width:560px){.reach__channels{grid-template-columns:1fr 1fr;row-gap:1.6rem}.reach__facts{grid-template-columns:1fr}}

.work__lead{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.18;max-width:24ch;text-wrap:pretty}
.reach .stat__v{font-size:clamp(2rem,3.4vw,3.6rem)}

.brand__combo{display:inline-flex;align-items:center;gap:.7rem}
.brand__mark{display:block;width:clamp(28px,2.6vw,40px);height:clamp(28px,2.6vw,40px);background:var(--mute);
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .7s var(--ease)}
.brand:hover .brand__mark{background:var(--mandarin)}

/* Logos ohne Hintergrund-Kacheln */
.brand{background:none}

.brands__rows{--lh:clamp(26px,2.4vw,38px)}
.brand__logo{max-width:100%}

/* Social-Icons */
.social{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--line);color:var(--fg);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),transform .8s var(--ease)}
.social svg{width:1.25rem;height:1.25rem;fill:currentColor}
.social:hover{background:var(--mandarin);border-color:var(--mandarin);color:#1C1A17;transform:translateY(-2px)}

.night__sub{margin:.6rem 0 0;font-size:var(--s1);color:var(--mute)}
.story-end{padding-block:clamp(90px,13vw,200px) 0}
.story-end .story__claim{margin:0}

/* Geschichte: Bild wechselt beim Scrollen */
.story__img img{opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease);top:0;height:100%}
.story__img img.is-on{opacity:1;transform:scale(1)}
.tl__img{display:none}
@media (max-width:760px){
  .story__img{display:none}
  .tl__img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);margin:.4rem 0 1rem}
}

.night h2.night__title{font-size:var(--s3);line-height:1;max-width:15ch}

/* Kontakt-Link fürs Handy (dort ist die Navigation ausgeblendet) */
.nav__mail{display:none;font-size:var(--s-1);text-decoration:none;padding:.45rem .9rem;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--fg)}
@media (max-width:1060px){.nav__mail{display:inline-block}.nav__time{display:none}}

/* Schwerpunkte am Handy ohne Vorschaubilder */
@media (max-width:760px){.do__row{grid-template-columns:1fr;gap:.4rem}.do__thumb{display:none}}

/* Handy: Name gleitet beim Scrollen über die Fotokante, unterhalb wird er dunkel */
.hero{position:relative;z-index:2}
.hero__ink{display:none}
@media (max-width:760px){
  .hero__ink{display:block;position:absolute;left:0;right:0;top:var(--stageH,100svh);height:80vh;overflow:hidden;pointer-events:none}
  .hero__ink-inner{position:absolute;left:0;right:0;top:calc(-1 * var(--stageH,100svh));height:var(--stageH,100svh)}
  .hero__ink .hero__text h1{color:var(--fg)}
  .hero__ink .hero__text .label{color:var(--mute)}
  .about{padding-top:calc(var(--heroTextH,170px) + 80px)}
}