:root{
  --green:#21453f; --green-d:#173530; --sage:#94a88a; --sage-l:#eaf0e6; --tan:#d1b085; --tan-l:#f7f0e4; --blue:#5b7fa5; --blue-l:#e6edf5;
  --ink:#14231f; --muted:#4d5d57; --paper:#fbfaf6; --white:#fff;
  --accent:var(--green); --accent-ink:#fff; --accent-l:var(--sage-l); --accent-d:var(--green);
  --serif:'Newsreader',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --r:32px; --gutter:clamp(1.25rem,5vw,4.5rem);
}
.c-tan{--accent:#d1b085;--accent-ink:#14231f;--accent-l:#f7f0e4;--accent-d:#8a6a3c}
.c-green{--accent:#21453f;--accent-ink:#fff;--accent-l:#e3ece8;--accent-d:#21453f}
.c-blue{--accent:#5b7fa5;--accent-ink:#fff;--accent-l:#e6edf5;--accent-d:#3b5f86}
.c-sage{--accent:#94a88a;--accent-ink:#14231f;--accent-l:#eef2ea;--accent-d:#55704c}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--sans);background:var(--white);color:var(--ink);font-size:17px;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.alt{background:var(--paper)}
.center{text-align:center}

/* ---------- Logo-Kleeblatt (4 Blätter einzeln animierbar) ---------- */
.lm{position:relative;display:inline-block;line-height:0;--s:46px;width:var(--s);aspect-ratio:var(--ar,1.05)}
.lm img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.lm img:nth-child(1){clip-path:inset(0 50% 50% 0);transform-origin:100% 100%}
.lm img:nth-child(2){clip-path:inset(0 0 50% 50%);transform-origin:0 100%}
.lm img:nth-child(3){clip-path:inset(50% 0 0 50%);transform-origin:0 0}
.lm img:nth-child(4){clip-path:inset(50% 50% 0 0);transform-origin:100% 0}
.lm.in img{animation:petal .9s var(--ease) both}
.lm.in img:nth-child(1){animation-delay:calc(var(--pd,0s) + 0s)}
.lm.in img:nth-child(2){animation-delay:calc(var(--pd,0s) + .18s)}
.lm.in img:nth-child(3){animation-delay:calc(var(--pd,0s) + .36s)}
.lm.in img:nth-child(4){animation-delay:calc(var(--pd,0s) + .54s)}
@keyframes petal{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.lm.ms{--s:44px;display:block;margin-bottom:14px}
.center .lm.ms,.lm.ms.mid{margin-inline:auto}
.lm.big{--s:clamp(150px,22vw,230px)}
.lm.ghost img{filter:brightness(0) invert(1)}

/* ---------- Intro ---------- */
#intro{position:fixed;inset:0;z-index:300;background:#fff;display:none;place-items:center;transition:opacity .8s ease .0s,visibility .8s}
.intro-on #intro{display:grid}
#intro.out{opacity:0;visibility:hidden}
.intro-box{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vw,30px)}
.intro-box .word{width:clamp(220px,34vw,360px);opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.intro-box.word-in .word{opacity:1;transform:none}
body.intro-lock{overflow:hidden}

/* ---------- Header ---------- */
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:78px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:2rem;padding:0 var(--gutter);color:#fff;transition:background .35s,box-shadow .35s,height .35s,color .35s}
.site-header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 6px 28px rgba(20,35,31,.1);color:var(--ink);height:68px}
.brand-link{align-self:stretch;display:grid;place-items:center;width:158px;padding:.5rem 1rem 0;background:rgba(255,255,255,.94);border-radius:0 0 22px 22px;box-shadow:0 16px 36px rgba(10,30,24,.18);height:104px;transition:height .35s,width .35s}
.brand-link img{width:118px}
.site-header.solid .brand-link{height:68px;width:112px;box-shadow:none;background:transparent;padding:.15rem 0 0;border-radius:0}
.site-header.solid .brand-link img{width:80px}
.site-nav{justify-self:center;display:flex;gap:clamp(1rem,2.3vw,2.5rem);font-size:.9rem;font-weight:600}
.site-nav a{position:relative;padding:.65rem 0;text-decoration:none;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:.3rem;height:2px;background:var(--tan);transition:left .3s,right .3s}
.site-nav a:hover::after,.site-nav a.active::after{left:0;right:0}
.nav-cta{justify-self:end;padding:.75rem 1.4rem;border-radius:999px;background:var(--tan);color:var(--ink);font-weight:800;font-size:.9rem;text-decoration:none;box-shadow:0 10px 30px rgba(10,30,24,.2);transition:transform .3s var(--ease),background .3s}
.nav-cta:hover{transform:translateY(-3px);background:#e0c49f}
.burger{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;position:relative;color:inherit;justify-self:end}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;transition:.3s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--green);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;clip-path:circle(0 at 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility .7s}
.mobile-menu.open{clip-path:circle(150% at 100% 0);visibility:visible}
.mobile-menu a{color:#fff;text-decoration:none;font-weight:800;font-size:2rem}
.mobile-menu a.cta{margin-top:10px;background:var(--tan);color:var(--ink);padding:12px 28px;border-radius:999px;font-size:1.2rem}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;color:#fff;background:var(--green-d)}
.hero.short{height:78svh;min-height:560px}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero-slide.on img{animation:kb 14s ease-out forwards}
@keyframes kb{to{transform:scale(1.14) translate(-1%,-1%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,53,48,.82) 0%,rgba(23,53,48,.6) 36%,rgba(23,53,48,.2) 74%,rgba(23,53,48,.08) 100%),linear-gradient(0deg,rgba(23,53,48,.4),transparent 50%)}
.hero-copy{position:absolute;z-index:2;left:var(--gutter);top:50%;width:min(50rem,60vw);transform:translateY(-42%)}
.eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem;font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#f1dfc3}
.eyebrow::before{content:"";width:2.1rem;height:2px;background:var(--tan)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,8vw,8rem);line-height:.9;letter-spacing:-.05em;max-width:10ch;text-wrap:balance}
.hero.short h1{font-size:clamp(3rem,6.6vw,6.2rem);max-width:12ch}
.hero h1 .hw{display:inline-block;white-space:nowrap}
.hero h1 .hc{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.14em) scale(1.22);transform-origin:50% 62%}
.ready .hero h1 .hc{animation:focus .7s var(--ease) both;animation-delay:var(--cd)}
@keyframes focus{to{opacity:1;filter:none;transform:none}}
.hero-intro{max-width:38ch;margin-top:1.8rem;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.7;color:#f5f3ec}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.hr{opacity:0;transform:translateY(16px)}
.ready .hr{animation:rise .8s var(--ease) both;animation-delay:var(--rd,1.2s)}
@keyframes rise{to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:1rem 1.7rem;border-radius:999px;font-weight:800;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px)}
.btn.tan{background:var(--tan);color:var(--ink);box-shadow:0 10px 32px rgba(10,30,24,.25)}
.btn.tan:hover{background:#e0c49f}
.btn.line{border-color:rgba(255,255,255,.55);color:#fff}
.btn.line:hover{background:rgba(255,255,255,.14)}
.btn.green{background:var(--green);color:#fff}
.btn.green:hover{background:var(--green-d);box-shadow:0 12px 26px rgba(33,69,63,.3)}
.btn.outline{border-color:var(--green);color:var(--green)}
.btn.outline:hover{background:var(--green);color:#fff}
.btn.acc{background:var(--accent);color:var(--accent-ink)}
.btn.acc:hover{box-shadow:0 12px 26px rgba(20,35,31,.25)}
.btn.white{background:#fff;color:var(--ink)}
.btn.white:hover{background:var(--ink);color:#fff}
.btn.ghost{border-color:currentColor}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.sm{padding:.65rem 1.2rem;font-size:.85rem}
.scroll-note{position:absolute;z-index:2;right:clamp(1.25rem,3vw,3.25rem);bottom:2.2rem;display:flex;flex-direction:column;align-items:center;gap:.85rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.scroll-note .lbl{writing-mode:vertical-rl}
.scroll-track{position:relative;width:1px;height:4.5rem;background:rgba(255,255,255,.38);overflow:hidden}
.scroll-track::after{content:"";position:absolute;top:0;left:0;width:1px;height:1.45rem;background:var(--tan);animation:cue 1.9s cubic-bezier(.45,0,.25,1) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-1.5rem)}30%{opacity:1}100%{opacity:0;transform:translateY(4.5rem)}}
.hero-dots{position:absolute;z-index:2;left:var(--gutter);bottom:2.2rem;display:flex;gap:10px}
.hero-dots button{width:34px;height:3px;border:0;background:rgba(255,255,255,.35);cursor:pointer;position:relative;overflow:hidden;border-radius:2px}
.hero-dots button.on::after{content:"";position:absolute;inset:0;background:var(--tan);transform-origin:left;animation:dot 6s linear forwards}
@keyframes dot{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* base responsive */
@media (max-width:1180px){
  .site-nav,.nav-cta{display:none}
  .site-header{grid-template-columns:1fr auto}
  .burger{display:block}
}
@media (max-width:860px){
  .hero-copy{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:6.5rem;transform:none}
  .hero h1{font-size:clamp(3rem,15vw,5rem)}
  .hero-shade{background:linear-gradient(0deg,rgba(23,53,48,.95) 0%,rgba(23,53,48,.7) 44%,rgba(23,53,48,.15) 82%)}
  .scroll-note{display:none}
  .brand-link{width:128px;height:84px}.brand-link img{width:98px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hr,.hero h1 .hc,.ws .w>span,.lm img{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  .hero-slide.on img,.band-track,.scroll-track::after{animation:none}
}

/* reveal */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.ws .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .14em;margin-bottom:-.14em}
.ws .w>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease) calc(var(--i)*.06s)}
.ws.in .w>span{transform:none}

/* intro sizing */
.intro-box{width:clamp(260px,40vw,440px);align-items:center}
.intro-box .word{width:100%}
.intro-box .lm.big{--s:44%}