:root{
  --paper:#fffefb;
  --ink:#1c1810;
  --ink-soft:#5c5442;
  --braun:#97702d;
  --gold:#bea039;
  --sand:#decc87;
  --sand-pale:#f7f1e0;
  --moss:#1d3410;
  --rule:#e6dcc2;
  --wrap:1180px;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.2,.75,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hanken Grotesk","Segoe UI",-apple-system,system-ui,sans-serif;
  font-weight:300;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
svg{display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.stuck{border-bottom-color:var(--rule)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.brand{line-height:0}
.brand img{width:clamp(94px,10vw,118px)}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.2rem);font-size:.95rem}
.site-nav a{text-decoration:none;color:var(--ink-soft);position:relative;white-space:nowrap;padding-bottom:.2rem}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--braun);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.site-nav a:hover{color:var(--braun)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(2rem,6vw,5rem);padding-block:clamp(2rem,6vw,4.5rem) clamp(3rem,9vw,7rem)}
h1{margin:0;font-weight:200;letter-spacing:-.04em;line-height:.94;font-size:clamp(3rem,10vw,7.5rem)}
h1 span{display:block;overflow:hidden;padding-bottom:.06em}
h1 i{display:block;font-style:normal;transform:translateY(105%);animation:up 1s var(--ease) forwards}
h1 span:nth-child(2) i{animation-delay:.13s}
@keyframes up{to{transform:none}}
.hero-sub{margin:clamp(1.2rem,3vw,2rem) 0 0;max-width:28ch;font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);line-height:1.45;color:var(--ink-soft);opacity:0;animation:fade 1s var(--ease) .5s forwards}
@keyframes fade{to{opacity:1}}

.mark{position:relative;width:clamp(190px,27vw,330px);aspect-ratio:200/262}
.mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mark .o{fill:none;stroke:var(--braun);stroke-width:16;stroke-dasharray:102 102;stroke-dashoffset:102;animation:draw 1.6s var(--ease) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mark .punkt{fill:none;stroke:#535353;stroke-width:2.6;opacity:0;animation:punkt 1s var(--ease) 1.5s forwards}
@keyframes punkt{0%{opacity:0;transform:translateY(-22px)}60%{opacity:1;transform:translateY(4px)}100%{opacity:1;transform:none}}
.mark .ei{position:absolute;left:25%;top:31.5%;width:50%;opacity:0;animation:eiIn 1.1s var(--ease) .95s forwards,eiBob 8s ease-in-out 2s infinite}
@keyframes eiIn{from{opacity:0;transform:translateY(-28px) scale(.9)}to{opacity:1;transform:none}}
@keyframes eiBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(4deg)}}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}
.rv.d2{transition-delay:.18s}

h2{font-weight:200;font-size:clamp(1.9rem,1.2rem + 2.4vw,3.2rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 clamp(1.2rem,3vw,2rem);text-wrap:balance}
.lead{max-width:38ch;color:var(--ink-soft);margin:0}
section{scroll-margin-top:5rem}

/* zahlen */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,5vw,4rem);padding-block:clamp(2.5rem,7vw,5rem);border-top:1px solid var(--rule)}
.zahl{position:relative;display:grid;justify-items:start}
.zahl figure{position:relative;margin:0;width:clamp(120px,13vw,164px);aspect-ratio:4/5}
.zahl svg{position:absolute;inset:0;width:100%;height:100%}
.zahl ellipse{fill:none;stroke-width:2.5;stroke-dasharray:102 102;stroke-dashoffset:102;transition:stroke-dashoffset 1.5s var(--ease)}
.zahl.in ellipse{stroke-dashoffset:0}
.z1 ellipse{stroke:var(--braun)}
.z2 ellipse{stroke:var(--gold)}
.z3 ellipse{stroke:var(--sand)}
.zahl b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.14em;font-weight:200;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);letter-spacing:-.03em;color:var(--braun)}
.zahl small{display:block;font-size:.98rem;color:var(--ink-soft);margin-top:.9rem;max-width:20ch;line-height:1.5}

/* tag */
.tag{padding-block:clamp(2rem,6vw,4rem)}
.tag-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.8rem 3rem;margin-bottom:clamp(1.2rem,3vw,2rem)}
.tag-head h2{margin:0}
.szene{width:100%;height:auto;background:var(--sand-pale)}
.sonne{animation:sonne 26s linear infinite}
@keyframes sonne{
  0%{transform:translate(40px,352px);opacity:0}
  7%{opacity:1}
  25%{transform:translate(320px,132px)}
  50%{transform:translate(600px,84px)}
  75%{transform:translate(880px,132px)}
  93%{opacity:1}
  100%{transform:translate(1160px,352px);opacity:0}
}
.halm{transform-box:fill-box;transform-origin:bottom center;animation:wiegen 5.4s ease-in-out infinite}
.halm:nth-of-type(2n){animation-duration:6.8s;animation-delay:-1.7s}
.halm:nth-of-type(3n){animation-duration:8.2s;animation-delay:-3.4s}
@keyframes wiegen{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.henne-a{animation:gehtA 30s linear infinite,tagzeit 26s linear infinite}
.henne-b{animation:gehtB 41s linear infinite,tagzeit 26s linear infinite}
@keyframes tagzeit{0%,7%{opacity:0}18%{opacity:1}74%{opacity:1}91%,100%{opacity:0}}
@keyframes gehtA{0%{transform:translate(-90px,0)}100%{transform:translate(1290px,0)}}
@keyframes gehtB{0%{transform:translate(1290px,0) scaleX(-1)}100%{transform:translate(-90px,0) scaleX(-1)}}
.pick{transform-box:fill-box;transform-origin:20% 80%;animation:pick 3.4s ease-in-out infinite}
@keyframes pick{0%,62%,100%{transform:rotate(0)}72%{transform:rotate(26deg)}82%{transform:rotate(0)}90%{transform:rotate(22deg)}}
.klappe{transform-box:fill-box;transform-origin:bottom left;animation:klappe 26s ease-in-out infinite}
@keyframes klappe{0%,4%{transform:rotate(0)}13%,86%{transform:rotate(72deg)}95%,100%{transform:rotate(0)}}

/* drei punkte */
.punkte{padding-block:clamp(2.5rem,7vw,5rem)}
.punkt-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4rem)}
.punkt-item h3{margin:0 0 .4rem;font-weight:400;font-size:1.15rem;color:var(--braun)}
.punkt-item p{margin:0;color:var(--ink-soft);max-width:34ch}
.ikon{width:clamp(100px,12vw,158px);aspect-ratio:4/5;margin-bottom:clamp(1rem,2.5vw,1.6rem)}
.ikon .rand{fill:none;stroke:var(--sand);stroke-width:2.5;stroke-dasharray:102 102;stroke-dashoffset:102;transition:stroke-dashoffset 1.4s var(--ease)}
.punkt-item.in .rand{stroke-dashoffset:0}
.ikon .tuer{fill:var(--sand-pale);stroke:var(--braun);stroke-width:2.5;transform-box:fill-box;transform-origin:bottom left}
.punkt-item.in .tuer{animation:tuer 4.5s ease-in-out 1s infinite}
@keyframes tuer{0%,10%{transform:rotate(0)}30%,80%{transform:rotate(76deg)}96%,100%{transform:rotate(0)}}
.ikon .laeufer{fill:var(--braun);opacity:0}
.punkt-item.in .laeufer{animation:laeufer 4.5s ease-in-out 1s infinite}
@keyframes laeufer{0%,30%{opacity:0;transform:translate(0,0)}40%{opacity:1}72%{opacity:1;transform:translate(24px,8px)}88%,100%{opacity:0;transform:translate(32px,10px)}}
.ikon .spross{fill:var(--braun);transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0)}
.punkt-item.in .spross{animation:spross 1.1s var(--ease) forwards,wiegen 5s ease-in-out 1.2s infinite}
.punkt-item.in .spross:nth-of-type(2){animation-delay:.15s,1.35s}
.punkt-item.in .spross:nth-of-type(3){animation-delay:.3s,1.5s}
.punkt-item.in .spross:nth-of-type(4){animation-delay:.45s,1.65s}
.punkt-item.in .spross:nth-of-type(5){animation-delay:.6s,1.8s}
.punkt-item.in .spross:nth-of-type(6){animation-delay:.75s,1.95s}
.punkt-item.in .spross:nth-of-type(5){animation-delay:.6s,1.8s}
.punkt-item.in .spross:nth-of-type(6){animation-delay:.75s,1.95s}
@keyframes spross{to{transform:scaleY(1)}}
.ikon .zeiger{fill:none;stroke:var(--braun);stroke-width:3;stroke-dasharray:26 74;stroke-dashoffset:0}
.punkt-item.in .zeiger{animation:zeiger 6s linear infinite}
@keyframes zeiger{to{stroke-dashoffset:-100}}
.ikon .kern{fill:var(--sand)}

/* band */
.band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(4.5rem,14vw,9rem);margin-block:clamp(1rem,3vw,2rem)}
.band-bg{position:absolute;inset:-12% 0 auto;z-index:-2;width:100%;height:124%;object-fit:cover;will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,28,6,.84),rgba(15,28,6,.52) 70%,rgba(15,28,6,.32))}
.band p{margin:0;color:#fff;font-weight:200;font-size:clamp(1.5rem,1rem + 2.8vw,3.1rem);line-height:1.15;letter-spacing:-.03em;max-width:17ch;text-wrap:balance}

/* hof */
.hof{padding-block:clamp(2.5rem,7vw,5rem)}
.hof-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.rows{border-top:1px solid var(--rule);margin:0}
.row{display:grid;grid-template-columns:10rem 1fr;gap:.3rem 2rem;padding:1rem .5rem;border-bottom:1px solid var(--rule);transition:padding-left .4s var(--ease)}
.row:hover{padding-left:1.1rem}
.row dt{color:var(--braun)}
.row dd{margin:0;color:var(--ink-soft)}
.hof-note{margin:1.6rem 0 0;max-width:40ch;color:var(--ink-soft)}
.tasse{width:100%;height:auto}
.tasse .ei-slot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.tasse.in .ei-slot{animation:slot .55s var(--ease) forwards}
@keyframes slot{to{opacity:1;transform:none}}
.tasse .karton{fill:none;stroke:var(--sand);stroke-width:2.5}

/* schluss */
.schluss{background:var(--sand-pale);padding-block:clamp(3rem,8vw,5.5rem)}
.schluss-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:end}
.schluss p{margin:0 0 1rem;color:var(--ink-soft);max-width:40ch}
.schluss p:last-child{margin-bottom:0}
.finale{margin:0;width:clamp(180px,23vw,300px);overflow:hidden}
.finale img{width:100%;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s var(--ease)}
.finale.in img{clip-path:inset(0 0 0 0)}


/* ---------- marker ---------- */
.marker{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.marker span{width:9px;height:9px;border:1px solid currentColor;border-radius:50%;flex:none}

/* ---------- rundknopf ---------- */
.rundknopf{
  position:fixed;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);z-index:40;
  width:clamp(84px,9vw,108px);aspect-ratio:1;display:grid;place-items:center;
  text-decoration:none;color:var(--braun);font-size:.82rem;line-height:1.25;text-align:center;
  background:var(--paper);border-radius:50%;
  opacity:0;transform:scale(.8);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s
}
.rundknopf.da{opacity:1;transform:none}
.rundknopf span{position:relative;z-index:2}
.rundknopf-ring{position:absolute;inset:0;width:100%;height:100%;animation:dreh 26s linear infinite}
.rundknopf-ring circle{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:9 6}
@keyframes dreh{to{transform:rotate(360deg)}}
.rundknopf:hover{color:#fff}
.rundknopf::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--braun);transform:scale(0);transition:transform .45s var(--ease);z-index:1}
.rundknopf:hover::before{transform:scale(1)}

/* ---------- eyecatcher ---------- */
.eyecatcher{font-size:clamp(3rem,1.5rem + 7vw,8.5rem);line-height:.92;letter-spacing:-.045em;margin:0 0 clamp(2rem,5vw,3.5rem)}
.schluss-grid{align-items:end}

/* ---------- footer ---------- */
.foot-links{display:flex;flex-direction:column;gap:.3rem}
.foot-rechts{align-items:flex-end;text-align:right}
.foot-links a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.foot-links a:hover{border-color:var(--gold)}


/* ---------- kreis-icons und menue ---------- */
.menu-auf{
  display:none;position:relative;z-index:60;background:none;border:0;padding:0;cursor:pointer;
  width:42px;height:42px;color:var(--braun)
}
.menu-auf svg,.menu-zu svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.menu-auf .pkt{fill:currentColor;stroke:none;transition:transform .35s var(--ease)}
.menu-auf:hover .pkt:nth-of-type(2){transform:translateX(-2px)}
.menu-auf:hover .pkt:nth-of-type(4){transform:translateX(2px)}
.menu-zu{
  position:absolute;top:clamp(1rem,4vw,1.8rem);right:clamp(1rem,5vw,2.5rem);
  width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--braun)
}
.menu-zu svg path{stroke-linecap:round;stroke-width:1.4}
.menue{
  display:none;position:fixed;inset:0;z-index:110;background:var(--paper);
  padding:clamp(4rem,12vw,7rem) var(--gut) var(--gut);
  opacity:0;transition:opacity .45s var(--ease)
}
.menue.auf{display:block}
.menue.da{opacity:1}
.menue-nav{display:grid;gap:.2rem;align-content:center;min-height:60vh}
.menue-nav a{
  text-decoration:none;font-weight:200;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(2.2rem,11vw,3.4rem);color:var(--ink);overflow:hidden;display:block
}
.menue-nav a span{display:block;transform:translateY(105%);transition:transform .6s var(--ease)}
.menue.da .menue-nav a span{transform:none}
.menue.da .menue-nav a:nth-child(2) span{transition-delay:.06s}
.menue.da .menue-nav a:nth-child(3) span{transition-delay:.12s}
.menue.da .menue-nav a:nth-child(4) span{transition-delay:.18s}
.menue-nav a:active span{color:var(--braun)}
.menue-logo{width:110px;margin-top:clamp(2rem,6vw,3rem)}
body.menue-offen{overflow:hidden}

/* ---------- aktiver navi-punkt ---------- */
.site-nav a.aktiv{color:var(--braun)}
.site-nav a.aktiv::after{transform:scaleX(1);transform-origin:left}

/* ---------- hover-vorschau ---------- */
.vorschau{
  position:fixed;z-index:70;top:0;left:0;width:200px;pointer-events:none;
  opacity:0;transform:translate(-50%,26px) scale(.94);
  transition:opacity .28s var(--ease),transform .38s var(--ease)
}
.vorschau.da{opacity:1;transform:translate(-50%,18px) scale(1)}
.vorschau-karte{display:none}
.vorschau-karte.da{display:block}
.vorschau-karte svg{width:100%;height:auto;display:block;border:1px solid var(--rule)}

/* ---------- pille ---------- */
.pille{
  display:inline-block;margin-top:clamp(1.4rem,3vw,2.2rem);
  padding:.75rem 1.6rem;border:1px solid var(--gold);border-radius:999px;
  text-decoration:none;color:var(--braun);font-size:.98rem;
  position:relative;overflow:hidden;isolation:isolate;transition:color .3s
}
.pille::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--braun);transform:translateY(101%);transition:transform .42s var(--ease)}
.pille:hover{color:var(--paper)}
.pille:hover::before{transform:none}

/* footer */
.site-foot{padding-block:clamp(2rem,5vw,3.5rem);font-size:.9rem;color:var(--ink-soft);border-top:1px solid var(--rule)}
.foot-grid{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between}
.foot-grid img{width:104px}
.site-foot p{margin:0;max-width:44ch;line-height:1.6}
.site-foot b{font-weight:400;color:var(--ink)}

:focus-visible{outline:2px solid var(--braun);outline-offset:3px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .mark{order:-1;width:clamp(160px,34vw,240px)}
  .hof-grid{grid-template-columns:1fr}
  .punkt-liste{grid-template-columns:1fr 1fr}
  .schluss-grid{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:620px){
  .zahlen{grid-template-columns:1fr;gap:1.8rem}
  .zahl{grid-template-columns:auto 1fr;align-items:center;gap:1.2rem;justify-items:stretch}
  .zahl figure{width:104px}
  .zahl small{margin-top:0;max-width:24ch}
  .row{grid-template-columns:1fr;gap:.1rem}
  .site-nav{display:none}
  .menu-auf{display:block}
  .punkt-liste{grid-template-columns:1fr;gap:2.2rem}
  .ikon{width:96px;margin-bottom:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  h1 i,.mark .ei,.hero-sub,.ikon .laeufer,.tasse .ei-slot,.mark .punkt{opacity:1;transform:none}
  .mark .o,.zahl ellipse,.ikon .rand{stroke-dashoffset:0}
  .finale img{clip-path:none}
  .lader{display:none !important}
  .menue-nav a span{transform:none}
  .vorschau{display:none}
  .rundknopf{opacity:1;transform:none}
  .lader-texte span:last-child{opacity:1}
  .ikon .spross{transform:none}
}

/* Erweiterung: Oår Editorial */
:root{--braun:#806025;--gold:#806523;--paper:#faf8f1;--rule:#d8d1ba;--wrap:1320px}
body{font-weight:400} .marker{color:#765b22} .hero-sub{opacity:1;animation:none;max-width:33ch}
h1 i{animation:none;transform:none} .mark .ei{opacity:1;animation:eiBob 8s ease-in-out infinite} .mark .punkt{opacity:1;animation:none}.mark .o{stroke-dashoffset:0;animation:none}
.rv{opacity:1;transform:none} .zahl ellipse,.ikon .rand{stroke-dashoffset:0}.finale img{clip-path:none}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--moss);color:white;padding:.7rem 1rem}.skip:focus{top:1rem}
.hero{min-height:620px;grid-template-columns:1.2fr 1fr;position:relative;padding-block:4rem 5rem}.hero h1{font-size:clamp(4rem,9.5vw,8.2rem)}
.hero .mark{justify-self:center;width:clamp(200px,27vw,355px)}
.hero-kicker{font-size:.73rem;letter-spacing:.19em;text-transform:uppercase;color:var(--braun);margin:0 0 2rem;display:flex;align-items:center;gap:.7rem}.hero-kicker:before{content:'';width:8px;height:8px;background:var(--moss);border-radius:50%}
.hero-note{position:absolute;right:var(--gut);bottom:2rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hero-links{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem}.text-link{text-underline-offset:6px;font-size:.92rem}.hero-links .text-link{margin-top:2rem}
.origin-strip{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.1rem;border-block:1px solid var(--rule);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.story{padding-block:6rem;display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem}.story h2{font-size:clamp(2.1rem,4.1vw,3.7rem);max-width:22ch}.story p{max-width:57ch}.story-aside{display:flex;align-items:flex-start;gap:1rem}.mini-egg{width:38px;height:50px;border:1px solid var(--braun);border-radius:50% 50% 46% 46%;flex-shrink:0}.section-no{font-size:.75rem;color:var(--ink-soft);letter-spacing:.14em}
.zahlen{padding-top:3rem}.punkt-item{padding:1.6rem;border:1px solid var(--rule);border-radius:100px 100px 8px 8px;background:#f3eedf}.punkt-item .ikon{margin-inline:auto}.punkt-item h3{font-size:1.4rem}.punkt-item p{font-size:1rem}.punkte{padding-bottom:6rem}
.forest{background:var(--moss);color:var(--paper);padding-block:5rem}.forest .marker{color:#decc87}.forest h2{font-size:clamp(2.5rem,5vw,4.8rem);max-width:16ch}.forest-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.forest p{max-width:46ch;color:#e4e2cf}.forest .text-link{color:#f6df9b}.forest-art{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}.orbit{width:220px;height:290px;border:1px solid #beac72;border-radius:50%;transform:rotate(30deg);position:absolute}.orbit.two{transform:rotate(-30deg)}.forest-art img{width:120px;transform:rotate(-12deg)}.forest-caption{text-align:center;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-block:3rem 5rem}.step{border-top:1px solid var(--rule);padding-top:1.5rem}.step b{font-size:.8rem;color:var(--braun);font-weight:400}.step h3{font-size:1.35rem;font-weight:400;margin:.7rem 0}.step p{font-size:1rem;color:var(--ink-soft);max-width:33ch}
.photo-story{margin:0;position:relative;background:var(--moss)}.photo-story img{width:100%;height:440px;object-fit:cover;opacity:.65}.photo-story figcaption{position:absolute;bottom:2.2rem;left:var(--gut);color:white;font-size:clamp(1.8rem,4vw,3.7rem);line-height:1.1;max-width:20ch;letter-spacing:-.03em}
.packages{display:flex;gap:.65rem;margin:1.5rem 0;flex-wrap:wrap}.packages span{border:1px solid var(--braun);padding:.5rem 1rem;border-radius:50%;font-size:.9rem}
.faq-section{padding-block:6rem;display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem}.faq-section h2{font-size:clamp(2.3rem,4vw,3.5rem)}details{border-bottom:1px solid var(--rule)}details:first-child{border-top:1px solid var(--rule)}summary{cursor:pointer;padding:1.3rem 2rem 1.3rem 0;font-size:1.08rem;position:relative;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:.2rem;color:var(--braun);font-size:1.4rem;top:1rem}details[open] summary:after{content:'−'}details p{margin:0 0 1.5rem;max-width:55ch;color:var(--ink-soft)}
.read-card{background:#ede6d2;display:flex;justify-content:space-between;gap:2rem;padding:2.5rem;margin-bottom:5rem;align-items:center}.read-card h2{margin:0;font-size:2rem}.read-card p{margin:.5rem 0 0;max-width:50ch}.read-card .pille{margin:0;flex-shrink:0}
.schluss{background:#e8dec0}.schluss .eyecatcher{font-size:clamp(3.5rem,9vw,8rem)}.rundknopf{visibility:hidden;pointer-events:none}.rundknopf.da{visibility:visible;pointer-events:auto}.menue{overflow-y:auto}.menu-auf{min-width:44px;min-height:44px}.foot-links a{padding-block:.2rem}.article{padding-block:4rem 6rem;max-width:940px}.article h1{font-size:clamp(3rem,7vw,5.5rem);line-height:1.05;margin:2rem 0}.article h2{margin-top:3rem}.article p,.article li{max-width:68ch}.breadcrumbs{font-size:.9rem;color:var(--ink-soft)}.notice{background:#eee6d1;padding:1.3rem;border-left:3px solid var(--braun)}
@media(min-width:901px){.hero:after{content:'';position:absolute;right:44%;top:4rem;bottom:5rem;width:1px;background:var(--rule)} }
@media(max-width:900px){.site-nav{gap:1rem;font-size:.83rem}.hero{min-height:540px}.hero .mark{width:230px;order:0}.story{grid-template-columns:1fr;gap:1.5rem}.forest-layout{gap:1rem}.faq-section{gap:2rem;grid-template-columns:1fr}.rundknopf{width:75px}.hero h1{font-size:5rem}}
@media(max-width:620px){.hero{grid-template-columns:1fr;padding-block:2rem 3rem;gap:2rem;min-height:0}.hero h1{font-size:4.7rem}.hero .mark{width:170px;justify-self:end;position:absolute;top:9rem;right:1.3rem;opacity:.22;z-index:-1}.hero{isolation:isolate}.hero-sub{max-width:25ch}.hero-note{position:static;grid-column:1}.hero-kicker{font-size:.63rem;margin-bottom:1.5rem}.hero-links{gap:1rem}.hero-links .text-link{margin-top:0}.hero-links .pille{margin-top:1.5rem}.origin-strip{font-size:.62rem;gap:.6rem;letter-spacing:.05em}.story,.faq-section{padding-block:3.5rem}.story h2{font-size:2.3rem}.steps{grid-template-columns:1fr;gap:1rem;padding-bottom:3rem}.step p{max-width:none}.forest-layout{grid-template-columns:1fr}.forest{padding-block:3rem}.forest-art{min-height:300px}.forest h2{font-size:2.8rem}.photo-story img{height:320px}.read-card{flex-direction:column;align-items:flex-start;padding:1.5rem;margin-bottom:3rem}.punkt-item{border-radius:65px 65px 8px 8px;padding:2rem}.rundknopf{display:none}.menue-nav{min-height:0;gap:.8rem}.menue-nav a{font-size:2rem}.menue-logo{margin-top:2rem}}
@media(prefers-reduced-motion:reduce){.mark .ei{animation:none}.rundknopf:not(.da){visibility:hidden}}
@media print{.site-head,.rundknopf,.menue,.vorschau{display:none}body{background:white}.hero{min-height:0}details p{display:block}section{break-inside:avoid}}