:root{
  color-scheme:dark;
  --paper:#faf6ee;--paper2:#f1e8d8;--card:#fffdf9;
  --ink:#2a241c;--ink-soft:#6d6152;
  --night:#211c15;--night2:#2b2419;--night3:#352c1e;
  --cream:#f5efe2;--cream-soft:#c9bfab;
  --forest:#4b5a3a;--forest2:#657a4c;
  --copper:#b5793f;--copper2:#e0ac66;
  --line:rgba(42,36,28,.12);--line-dark:rgba(245,239,226,.14);
  --vh:100vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:"Outfit",system-ui,-apple-system,sans-serif;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif}
h1,h2{text-wrap:balance;letter-spacing:-.01em}

#bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--copper),var(--copper2));z-index:99}
.badge{position:fixed;bottom:14px;left:14px;z-index:98;font-family:"Outfit";font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border:1px solid rgba(224,172,102,.5);border-radius:999px;color:var(--copper2);background:rgba(33,28,21,.86)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:97;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;transition:background .4s,padding .4s;color:var(--cream)}
.nav.solid{background:rgba(33,28,21,.92);backdrop-filter:blur(8px);padding:11px 20px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:"Cormorant Garamond";font-weight:600;font-size:19px;letter-spacing:.02em}
.brand small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper2);margin-top:2px}
.navlinks{display:none;gap:22px;font-size:14px;font-weight:500;color:var(--cream-soft)}
.navlinks a:hover{color:var(--cream)}
.nav .cta{font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;background:var(--copper2);color:#231a0d}
.nav-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);background:transparent}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:16px;height:1.5px;background:var(--cream);position:relative;transition:transform .25s}
.nav-toggle span::before{position:absolute;top:-5px}
.nav-toggle span::after{position:absolute;top:5px}
@media (min-width:860px){.navlinks{display:flex}.nav-toggle{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--night);color:var(--cream);display:flex;flex-direction:column;padding:90px 26px 40px;gap:18px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:"Cormorant Garamond";font-size:28px;font-weight:600}
.drawer .close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;font-size:18px}

/* hero */
.hero{position:relative;min-height:var(--vh);display:grid;align-items:end;overflow:hidden;isolation:isolate;color:var(--cream);background:var(--night)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:-2;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,28,21,.6) 0,rgba(33,28,21,0) 150px),linear-gradient(180deg,rgba(33,28,21,.15) 0%,rgba(33,28,21,.5) 30%,rgba(33,28,21,.74) 55%,rgba(33,28,21,.97) 100%)}
.hero-in{padding:0 22px 46px;width:100%;max-width:900px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper2);font-weight:600;margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
h1{font-size:clamp(40px,11vw,80px);line-height:.98;font-weight:700}
h1 .l{display:block;opacity:0;transform:translateY(26px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
h1 .l:nth-child(2){animation-delay:.22s;color:var(--copper2);font-style:italic;font-weight:500}
.hero p.lead{margin-top:18px;color:var(--cream-soft);font-size:clamp(15px,3.6vw,19px);max-width:520px;opacity:0;animation:up .9s .5s forwards;font-weight:300}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero .row{opacity:0;animation:up .9s .7s forwards}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px;max-width:560px;opacity:0;animation:up .9s .9s forwards}
.trust div{border-left:1px solid rgba(224,172,102,.5);padding-left:11px}
.trust dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper2);font-weight:600}
.trust dd{font-size:12px;color:var(--cream-soft);margin-top:4px;line-height:1.35}
.btn{padding:15px 22px;border-radius:999px;font-weight:600;font-size:15px;display:inline-block;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--copper2);color:#231a0d}
.btn.g{border:1px solid rgba(245,239,226,.35);color:var(--cream)}
.btn.forest{background:var(--forest);color:var(--cream)}
@keyframes up{to{opacity:1;transform:none}}
@keyframes kb{0%{transform:scale(1.06)}100%{transform:scale(1.18)}}
.hero img{animation:kb 24s ease-in-out infinite alternate}

@media (min-width:860px){
  .hero{align-items:center}
  .hero-in{padding:130px 0 80px 7vw;max-width:900px}
  .hero::after{background:linear-gradient(180deg,rgba(33,28,21,.55) 0,rgba(33,28,21,0) 130px),linear-gradient(90deg,rgba(33,28,21,.94) 0%,rgba(33,28,21,.8) 40%,rgba(33,28,21,.3) 72%,rgba(33,28,21,.05) 100%),linear-gradient(180deg,rgba(33,28,21,0) 60%,var(--night) 100%)}
}

/* generic sections */
section{position:relative}
.wrap{padding:0 22px;max-width:920px;margin:0 auto}
.sec{padding:12vh 0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
h2{font-size:clamp(32px,7.6vw,56px);line-height:1.03;font-weight:600}
.lead{color:var(--ink-soft);font-size:clamp(16px,3.8vw,20px);margin-top:16px;max-width:600px;font-weight:300}
.eyebrow.dark{color:var(--forest)}

/* willkommen / features */
.welcome{background:var(--paper)}
.features{display:grid;gap:12px;margin-top:32px}
.feature{padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.feature .ico{width:44px;height:44px;border-radius:12px;background:var(--paper2);display:grid;place-items:center;flex:0 0 44px}
.feature .ico svg{width:22px;height:22px;stroke:var(--forest);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-family:"Cormorant Garamond";font-size:21px;font-weight:600}
.feature p{color:var(--ink-soft);font-size:14.5px;margin-top:5px}
@media (min-width:760px){.features{grid-template-columns:repeat(3,1fr)}}

/* sticky scene */
.scene{height:280vh;background:var(--night);color:var(--cream)}
.scene .pin{position:sticky;top:0;height:var(--vh);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.scene .visual{position:relative;overflow:hidden}
.scene .visual img,.scene .visual picture{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .visual img{object-fit:cover;opacity:0;transition:opacity .7s;will-change:opacity;transform:scale(1.08)}
.scene .visual img.on{opacity:1;animation:kbslow 12s ease-in-out infinite alternate}
@keyframes kbslow{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.16) translate(-1.5%,-1%)}}
.scene .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,28,21,0) 32%,var(--night) 100%)}
.scene .txt{padding:0 22px 44px;min-height:38vh;display:grid}
.scene .step{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s;pointer-events:none}
.scene .step.on{opacity:1;transform:none}
.scene .step small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper2);font-weight:600;margin-bottom:10px}
.scene .step h3{font-family:"Cormorant Garamond";font-size:clamp(26px,6.6vw,42px);line-height:1.08;font-weight:600}
.scene .step p{color:var(--cream-soft);margin-top:12px;max-width:540px;font-size:clamp(15px,3.6vw,18px);font-weight:300}
.dots{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:9px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(245,239,226,.3);transition:all .3s;display:block}
.dots i.on{background:var(--copper2);height:24px;border-radius:3px}

/* gallery */
.gallery{background:var(--paper)}
.grid3{display:grid;gap:12px;margin-top:30px}
.grid3 img{border-radius:18px;aspect-ratio:3/4;object-fit:cover}
@media (min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}

/* ueber mich */
.about{background:var(--night);color:var(--cream)}
.about-grid{display:grid;gap:28px;margin-top:30px;align-items:center}
.about-grid img{border-radius:26px;aspect-ratio:4/5;object-fit:cover;object-position:top;max-width:340px;justify-self:center}
.about p.lead{color:var(--cream-soft)}
.quals{list-style:none;display:grid;gap:11px;margin-top:22px;max-width:560px}
.quals li{position:relative;padding-left:26px;color:var(--cream);font-size:clamp(15px,3.6vw,17px);font-weight:300;line-height:1.45}
.quals li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:1.5px;background:var(--copper2)}
@media (min-width:820px){.about-grid{grid-template-columns:340px 1fr}}

/* kontakt / cta */
.inq{background:var(--forest);color:var(--cream);padding:12vh 0;margin-top:0;border-radius:34px 34px 0 0}
.inq .eyebrow{color:var(--copper2)}
.inq .lead{color:rgba(245,239,226,.8)}
.strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.strip a{padding:11px 16px;border-radius:999px;border:1px solid rgba(245,239,226,.28);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.strip a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.strip a:hover{border-color:var(--copper2);color:var(--copper2)}

/* footer */
footer{padding:46px 22px 80px;color:var(--ink-soft);font-size:13px;background:var(--paper)}
footer .cols{display:grid;gap:24px}
footer h5{color:var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
footer a{display:block;padding:3px 0}
footer .creds{list-style:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr}}

/* fab */
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:96;display:flex;align-items:center;gap:9px;padding:12px 16px 12px 12px;border-radius:999px;background:var(--copper2);color:#231a0d;font-weight:700;font-size:14px;box-shadow:0 14px 32px rgba(42,36,28,.35);transition:transform .25s;animation:fabin .8s 1.1s both}
.fab svg{width:22px;height:22px;stroke:#231a0d;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fab:hover{transform:translateY(-2px)}
@keyframes fabin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero .l,.hero p.lead,.hero .row,.hero .trust{opacity:1!important;transform:none!important}
  .scene{height:auto}
  .scene .pin{position:static;height:auto;grid-template-rows:none;display:block}
  .scene .visual{display:none}
  .scene .txt{display:block;min-height:0;padding:50px 22px}
  .scene .step{position:static;grid-area:auto;opacity:1;transform:none;padding:0 0 44px}
  .scene .step:last-child{padding-bottom:0}
  .scene .step::before{content:"";display:block;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:18px;margin-bottom:20px}
  .scene .step[data-step="0"]::before{background-image:url(images/madero-holzwalzen.jpg)}
  .scene .step[data-step="1"]::before{background-image:url(images/madero-oel-anwendung.jpg)}
  .scene .step[data-step="2"]::before{background-image:url(images/madero-oele.jpg)}
  .dots{display:none}
}

/* rechtliche Seiten */
.legal{background:var(--paper);padding:130px 0 90px;min-height:70vh}
.legal h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(38px,8vw,60px);line-height:1.05;font-weight:600;margin-bottom:26px;color:var(--ink)}
.legal h2{font-size:clamp(22px,4.6vw,28px);line-height:1.15;margin:36px 0 10px;color:var(--ink)}
.legal p,.legal li{color:var(--ink-soft);font-size:16px;font-weight:300;max-width:680px;margin-top:8px}
.legal ul{padding-left:20px;margin-top:8px}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--copper)}
.legal .stand{margin-top:34px;font-size:13px}
.back{display:inline-flex;margin-bottom:22px;font-size:14px;font-weight:500;color:var(--forest)}
.legal-nav{background:rgba(33,28,21,.96)}