/* ============================================================
   DIE FORSTEREI – gemeinsames Fundament
   Wird von index.html und allen Unterseiten geladen, damit
   Tokens, Kopf, Fuß und Buttons nur an einer Stelle leben.

   Leitidee: ZWEI WELTEN – "Garten" (hell, offen, kultiviert)
   und "Wald" (dunkel, tief, ursprünglich). Die Hintergrundwelt
   der Seite wechselt beim Scrollen die Atmosphäre.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  /* Kernfarben */
  --forest:#212f18;          /* Tannengrün – Brand primary */
  --forest-deep:#16200f;     /* tiefer Waldboden */
  --moss:#3f5233;            /* Moos, Linien auf dunkel */
  --bark:#4a3a2a;            /* Waldboden-Braun */
  /* Akzent */
  --ochre:#d9a03f;           /* Sonnenstrahl-Ocker (auf dunkel) */
  --ochre-ink:#8a5a13;       /* Ocker für kleine Schrift auf hell */
  /* Neutral */
  --paper:#f6f3ec;           /* Nebel-Beige, hell */
  --mist:#e7e1d4;            /* Nebel-Beige, gedämpft */
  --ink:#1a2113;             /* Fließtext auf hell */
  --ink-soft:#55604b;
  --line-dark:rgba(26,33,19,.16);
  --line-light:rgba(246,243,236,.18);

  /* Typo – fluid */
  --serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-xxl:clamp(2.9rem, 9.2vw, 8.4rem);
  --t-xl:clamp(2.3rem, 5.6vw, 4.9rem);
  --t-l:clamp(1.75rem, 3.4vw, 3rem);
  --t-m:clamp(1.28rem, 2vw, 1.7rem);
  --t-body:clamp(1.06rem, 1.05vw, 1.19rem);
  --t-small:clamp(.94rem, .8vw, 1rem);
  --t-label:clamp(.72rem, .74vw, .8rem);

  /* Raster & Rhythmus */
  --gut:clamp(1.25rem, 4vw, 3.25rem);
  --pad-y:clamp(4.5rem, 11vh, 10rem);
  --max:1440px;

  /* Motion */
  --ease:cubic-bezier(.22,.68,.16,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--ink);
  background:transparent; /* die wechselnde Welt-Ebene liegt dahinter */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}

/* Die wechselnde Hintergrundwelt: eine fixe Ebene hinter allem.
   Sektionen mit data-world="wald" schalten sie um. */
.world{
  position:fixed; inset:0; z-index:-2;
  background:var(--paper);
  transition:background-color 900ms var(--ease);
  pointer-events:none;
}
html[data-world="wald"] .world{background:var(--forest-deep)}

h1,h2,h3,h4,blockquote{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}

.label{
  font-family:var(--sans);
  font-size:var(--t-label);
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ochre-ink);
}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--pad-y); position:relative}
/* Ankersprünge nicht unter den fixen Kopf laufen lassen */
section[id],[id]{scroll-margin-top:clamp(4.5rem,9vh,6.5rem)}

/* Dunkle Sektionen (Waldwelt) */
.dark{color:var(--mist); background:var(--forest)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .label{color:var(--ochre)}
.dark a{color:#fff}

/* Fokus – immer sichtbar, überall */
:focus-visible{
  outline:3px solid var(--ochre);
  outline-offset:3px;
  border-radius:2px;
}
.dark :focus-visible{outline-color:var(--ochre)}

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--forest); color:#fff; padding:.85rem 1.2rem;
  font-weight:600; text-decoration:none;
}
.skip:focus{top:1rem}

/* Offene Angaben, die der Betrieb noch liefern muss. Bewusst
   auffällig – so etwas darf nicht unbemerkt live gehen. */
.todo{
  background:#fff3d6; color:#7a4f06;
  border:1px dashed #c8912f;
  padding:.1em .45em; font-size:.94em; font-weight:600;
  font-style:normal;
}
.dark .todo{background:rgba(217,160,63,.16); color:#f3cd85; border-color:rgba(217,160,63,.6)}

/* --- 2. Reveals (IntersectionObserver) -------------------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:calc(var(--d,0) * 80ms);
  will-change:opacity, transform;
}
[data-reveal="left"]{transform:translate3d(-24px,0,0)}
[data-reveal="scale"]{transform:translate3d(0,26px,0) scale(.985)}
.is-in[data-reveal]{opacity:1; transform:none; will-change:auto}

/* --- 3. Kopf & Navigation --------------------------------- */
.head{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(.85rem,1.7vw,1.5rem) var(--gut);
  transition:background-color 400ms var(--ease), padding 400ms var(--ease), box-shadow 400ms var(--ease);
}
.head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--paper);
  opacity:0; transition:opacity 400ms var(--ease);
}
.head.is-stuck::before{opacity:.97}
.head.is-stuck{box-shadow:0 1px 0 var(--line-dark); padding-block:.7rem}
html[data-world="wald"] .head::before{background:var(--forest-deep)}
html[data-world="wald"] .head{color:var(--mist)}
html[data-world="wald"] .head.is-stuck{box-shadow:0 1px 0 var(--line-light)}

.brand{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--serif); font-size:clamp(1.1rem,1.5vw,1.35rem);
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
}
.brand em{
  font-family:var(--sans); font-style:normal;
  font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ochre-ink); font-weight:600;
}
html[data-world="wald"] .brand em{color:var(--ochre)}

.nav{display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.7rem)}
.nav a{
  font-size:var(--t-small); text-decoration:none; font-weight:500;
  position:relative; padding:.35rem 0;
}
/* Hover-Handschrift: Linie wächst von links, Wort hebt sich minimal */
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav-call{
  font-family:var(--sans); font-weight:600;
  border:1px solid currentColor; padding:.6rem 1.1rem !important;
  white-space:nowrap;
}
.nav-call::after{display:none}
.nav-call:hover{background:var(--forest); color:var(--paper); border-color:var(--forest)}
html[data-world="wald"] .nav-call:hover{background:var(--ochre); color:var(--forest-deep); border-color:var(--ochre)}
.nav-desk{display:none}

/* Burger + Overlay-Navigation (mobil) */
.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:52px; height:48px; padding:0 6px;
  background:none; border:0; cursor:pointer; color:inherit;
  align-items:flex-end;
}
/* Umschaltpunkt bewusst NACH beiden Definitionen: sonst gewinnt bei
   gleicher Spezifität die später notierte Regel und der Burger steht
   am Desktop neben der vollen Navigation. */
@media (min-width:1120px){
  .nav-desk{display:flex}
  .burger{display:none}
}
.burger span{
  display:block; height:2px; width:30px; background:currentColor;
  transition:transform 320ms var(--ease), opacity 200ms var(--ease), width 320ms var(--ease);
}
.burger span:nth-child(2){width:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg); width:30px}

.overlay{
  position:fixed; inset:0; z-index:80;
  background:var(--forest-deep); color:var(--mist);
  display:flex; flex-direction:column;
  padding:5.5rem var(--gut) 2rem;
  opacity:0; visibility:hidden;
  transform:translate3d(0,-1.5%,0);
  transition:opacity 380ms var(--ease), transform 460ms var(--ease-out), visibility 380ms;
  overflow-y:auto;
}
/* Bei offenem Overlay gehört der Kopf zur dunklen Welt */
html[data-nav="open"] .head{color:var(--mist)}
html[data-nav="open"] .head::before{opacity:0}
html[data-nav="open"] .head.is-stuck{box-shadow:none}
html[data-nav="open"] .brand em{color:var(--ochre)}
html[data-nav="open"] .sticky-cta{transform:translate3d(0,110%,0)}
.overlay[hidden]{display:none}
.overlay.is-open{opacity:1; visibility:visible; transform:none}
/* Zentriert, solange Platz ist – und scrollbar statt oben abgeschnitten,
   wenn das Menü auf einem kurzen Display nicht mehr hineinpasst.
   (justify-content:center würde den Überlauf unerreichbar machen.) */
.overlay > nav{margin-block:auto}
.overlay ol{list-style:none; margin:0; padding:0}
.overlay li{
  border-top:1px solid var(--line-light);
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay:calc(var(--d) * 55ms + 90ms);
}
.overlay.is-open li{opacity:1; transform:none}
.overlay li:last-child{border-bottom:1px solid var(--line-light)}
.overlay a{
  display:flex; align-items:baseline; gap:.9rem;
  font-family:var(--serif); font-size:clamp(1.35rem,5.6vw,2.1rem);
  text-decoration:none; padding:.58em 0; min-height:44px;
}
.overlay a i{
  font-family:var(--sans); font-style:normal; font-size:.7rem;
  letter-spacing:.14em; color:var(--ochre); font-weight:600;
}
.overlay-foot{
  margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:var(--t-small); color:rgba(231,225,212,.72);
}

/* --- 4. Buttons ------------------------------------------- */
.btn{
  --bg:var(--forest); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:56px; padding:0 1.5rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:600; font-size:1rem;
  text-decoration:none; border:1px solid var(--bg); cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}
.btn span{position:relative; z-index:2}
.btn::before{ /* Füllung wächst von unten – eigene Hover-Handschrift */
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--ochre);
  transform:translate3d(0,101%,0);
  transition:transform 380ms var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--forest-deep); transform:translate3d(0,-2px,0)}
.btn-ghost{--bg:transparent; --fg:var(--ink); border-color:var(--ink)}
.dark .btn-ghost{--fg:#fff; border-color:rgba(255,255,255,.55)}
.btn-light{--bg:var(--paper); --fg:var(--forest-deep)}

/* --- 5. Social-Links -------------------------------------- */
.social{display:flex; flex-wrap:wrap; gap:.6rem}
.social a{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px; padding:0 1rem;
  border:1px solid var(--line-light);
  text-decoration:none; font-size:var(--t-small); font-weight:500;
  transition:border-color 240ms var(--ease), background-color 240ms var(--ease), color 240ms var(--ease);
}
.social a svg{flex:none; fill:currentColor}
.social a:hover{border-color:var(--ochre); color:var(--ochre); background:rgba(217,160,63,.08)}
.social-light a{border-color:var(--line-dark)}
.social-light a:hover{border-color:var(--ochre-ink); color:var(--ochre-ink); background:rgba(138,90,19,.06)}
/* Kanal vorhanden, Profil-URL noch nicht geliefert – siehe .todo */
.social-pending{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px; padding:0 1rem;
  border:1px dashed var(--line-light);
  font-size:var(--t-small); font-weight:500; opacity:.85;
}
.social-pending svg{flex:none; fill:currentColor}
/* Fuß-Variante: schlichte Liste statt Kästchen */
.foot .social a{border:0; padding:0; min-height:0; gap:.55rem}
.foot .social{gap:.35rem 1.2rem}

/* Artikel-Liste (Ratgeber-Übersicht und Onepager-Teaser) */
.arts{display:grid; gap:0}
.art{border-top:1px solid var(--line-dark)}
.art:last-child{border-bottom:1px solid var(--line-dark)}
.dark .art{border-color:var(--line-light)}
.dark .art:last-child{border-bottom-color:var(--line-light)}
.art > a{
  display:grid; gap:.5rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
  text-decoration:none;
  transition:transform 380ms var(--ease);
}
@media (min-width:840px){
  .art > a{grid-template-columns:3.4rem minmax(0,1fr) minmax(0,1.05fr); align-items:start}
}
.art-idx{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; padding-top:.55em; color:var(--ochre-ink);
}
.dark .art-idx{color:var(--ochre)}
.art h3{font-size:var(--t-l)}
.art-abs{color:var(--ink-soft); max-width:48ch}
.dark .art-abs{color:rgba(231,225,212,.8)}
.art-go{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:.9rem; font-size:var(--t-small); font-weight:600;
  color:var(--ochre-ink);
}
.dark .art-go{color:var(--ochre)}
.art-go svg{flex:none; stroke:currentColor; transition:transform 320ms var(--ease)}
/* Hover: Ocker-Linie wächst über die Zeile, Inhalt rückt nach rechts */
.art::before{
  content:""; display:block; height:2px; background:var(--ochre);
  transform:scaleX(0); transform-origin:left;
  transition:transform 460ms var(--ease);
  margin-bottom:-2px; position:relative; z-index:2;
}
@media (hover:hover){
  .art:hover::before{transform:scaleX(1)}
  .art:hover > a{transform:translate3d(clamp(4px,.8vw,14px),0,0)}
  .art:hover .art-go svg{transform:translateX(4px)}
}

/* --- 6. Sticky Mobile-CTA --------------------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--forest-deep);
  border-top:1px solid rgba(255,255,255,.16);
  transform:translate3d(0,110%,0);
  transition:transform 420ms var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta.is-on{transform:none}
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:60px; color:#fff; text-decoration:none;
  font-weight:600; font-size:1rem;
}
.sticky-cta a+a{border-left:1px solid rgba(255,255,255,.16); color:var(--ochre)}
.sticky-cta a:active{background:rgba(255,255,255,.08)}
@media (min-width:1120px){.sticky-cta{display:none}}
@media (max-width:1119px){body{padding-bottom:60px}}

/* --- 7. Footer ------------------------------------------- */
.foot{background:#0f170a; color:rgba(231,225,212,.78); padding-block:clamp(3rem,6vw,5rem) 2rem}
.foot-grid{display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot h2,.foot h3{font-family:var(--sans); font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); font-weight:600; margin-bottom:1.1rem}
.foot p,.foot li{font-size:var(--t-small); line-height:1.7}
.foot ul{list-style:none; margin:0; padding:0}
.foot a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color 240ms var(--ease), color 240ms var(--ease)}
.foot a:hover{color:#fff; border-bottom-color:var(--ochre)}
.foot-mark{font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.1rem); color:#fff; margin-bottom:1rem; display:block}
.foot-bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; justify-content:space-between;
  font-size:.86rem; color:rgba(231,225,212,.6);
}
.foot-links{display:flex; flex-wrap:wrap; gap:.7rem 1.6rem}

/* --- 8. Parallax-Helfer ---------------------------------- */
.par{will-change:transform}

/* --- 9. Reduced Motion – zwingend ------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  [data-reveal]{opacity:1 !important; transform:none !important}
  .merge-arrows path{stroke-dashoffset:0 !important}
  .merge-node{opacity:1 !important; transform:none !important}
  .step::after{transform:scaleX(1) !important}
  .par{transform:none !important}
}