/* ============================================================
   ALT GREFRATH — Design-System „Volle Neune"
   Karamell + Flaschengrün · Mid-Century/Retro-Warm · Prata × Jost
   Von JEDER Seite eingebunden — Single Source of Truth für Tokens
   + wiederkehrende Komponenten. Seiten-eigene Animationen/Layouts
   bleiben im jeweiligen inline <style> der Seite.
   ============================================================ */

/* Fonts LOKAL aus assets/fonts/ (kein Google-Fonts-CDN) — dieselbe Begründung wie
   bei GSAP/Tailwind: ein blockierendes externes <link rel="stylesheet"> kann in
   Sandbox-/restriktiven Netzwerken hängen und die ganze Seite am Rendern hindern. */
@font-face{ font-family:"Jost"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/jost-latin-400.woff2") format("woff2"); }
@font-face{ font-family:"Prata"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/prata-latin-400.woff2") format("woff2"); }

:root{
  color-scheme: light;
  --color-bg:#F6EEE1; --color-bg-2:#FBF5EA; --color-fg:#2A2016; --color-muted:#7C6E58;
  --color-border:#E3D3B4; --color-primary:#2F4A38; --color-primary-dp:#1D2F23;
  --color-accent:#C98A46; --color-accent-lt:#E8B472; --color-danger:#A5251F;

  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.5rem;
  --shadow-sm:0 1px 3px rgb(42 32 22/.08); --shadow:0 10px 30px rgb(42 32 22/.12); --shadow-lg:0 24px 60px rgb(42 32 22/.18);

  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2rem,5.4vw,3.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.14em;

  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1); --focus:var(--color-primary);
  --font-head:"Prata", serif; --font-body:"Jost", sans-serif;
}
:root.dark{
  color-scheme: dark;
  --color-bg:#1B2420; --color-bg-2:#223229; --color-fg:#ECE4D4; --color-muted:#A79A82;
  --color-border:#33453A; --color-primary:#7CA98C; --color-primary-dp:#0F1913;
  --color-accent:#E8B472; --color-accent-lt:#F4CC98;
  --shadow:0 10px 30px rgb(0 0 0/.35); --shadow-lg:0 24px 60px rgb(0 0 0/.45);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--color-bg); color:var(--color-fg); font-family:var(--font-body);
  font-size:var(--text-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
h1,h2,h3,h4{font-family:var(--font-head); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; text-wrap:balance; font-weight:400;}
h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4)}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:72rem; margin-inline:auto; padding-inline:1.25rem}
.wrap-wide{max-width:84rem; margin-inline:auto; padding-inline:1.25rem}
.lead{font-size:var(--text-lead); font-weight:500; max-width:65ch}
.prose-measure{max-width:65ch}
.eyebrow{display:inline-block; font-size:var(--text-eyebrow); font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--color-accent); margin-bottom:.6rem}
section{padding-block: 4rem}
@media(min-width:768px){ section{padding-block: 7rem} }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:.25rem }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; border-radius:999px;
  font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease-out), background .3s, color .3s, border-color .3s; touch-action:manipulation; }
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--color-accent); color:#241a0d; }
.btn-primary:hover{ background:var(--color-accent-lt) }
.btn-ghost{ background:transparent; border-color:currentColor; color:inherit }
.btn-ghost:hover{ background:rgb(0 0 0/.05) }
:root.dark .btn-ghost:hover{ background:rgb(255 255 255/.08) }

/* ---------- Header ---------- */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:100; color:#fff; background:transparent;
  transition:background .35s ease, color .35s ease, box-shadow .35s ease; }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-bg) 92%, transparent); color:var(--color-fg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); }
.site-header .hdr-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem;
  max-width:84rem; margin-inline:auto; padding-inline:1.25rem; }
.site-header .brand{ font-family:var(--font-head); font-size:1.3rem; text-decoration:none; color:inherit; }
.site-header nav{ display:none; gap:1.9rem; align-items:center; }
@media(min-width:900px){ .site-header nav{ display:flex } }
.site-header nav a{ text-decoration:none; color:inherit; font-size:.95rem; font-weight:500; opacity:.92; }
.site-header nav a:hover{ opacity:1 }
.burger{ display:inline-flex; background:none; border:0; color:inherit; padding:.5rem; cursor:pointer; }
@media(min-width:900px){ .burger{ display:none } }

/* Mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:99; background:var(--color-primary-dp); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  transform:translateY(-100%); transition:transform .5s var(--ease-out); }
.mobile-menu.open{ transform:translateY(0) }
.mobile-menu a{ font-family:var(--font-head); font-size:1.6rem; text-decoration:none; color:#fff; }
.mobile-menu .close-x{ position:absolute; top:1.4rem; right:1.4rem; background:none; border:0; color:#fff; padding:.6rem; }

/* ---------- Cards ---------- */
.card{ background:var(--color-bg-2); border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.card-img{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.card-body{ padding:1.3rem 1.4rem 1.5rem }
.card-title{ font-family:var(--font-head); font-size:1.2rem; margin:0 0 .35rem }
.card-text{ color:var(--color-muted); font-size:.95rem; line-height:1.55 }

[data-tilt]{ transform-style:preserve-3d }

/* ---------- Reveal preparation (state comes ONLY via gsap.set/from — REF-C §ROBUSTHEIT) ---------- */
[data-split]{ overflow:hidden }
.word{ display:inline-block; white-space:nowrap }
.char{ display:inline-block; will-change:transform }

/* ---------- Ambient background scene (fixed, scroll-coupled) ---------- */
.bg-scene{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at var(--bgShift,22%) 28%, color-mix(in oklch, var(--color-accent) 38%, transparent), transparent 70%),
    radial-gradient(55% 50% at var(--bgShift2,82%) 74%, color-mix(in oklch, var(--color-primary) 30%, transparent), transparent 65%),
    var(--color-bg);
  transition:background-color .5s ease; }
.bg-loop{ animation:bgDrift 16s ease-in-out infinite; will-change:transform; }
@keyframes bgDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(1.6%,-2.2%,0) scale(1.03)} 100%{transform:translate3d(0,0,0) scale(1)} }

/* ---------- Footer ---------- */
.site-footer{ background:var(--color-primary-dp); color:#EDE6D8; padding-block:4rem 1.5rem; }
.site-footer a{ color:inherit; text-decoration:none }
.site-footer .foot-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:768px){ .site-footer .foot-grid{ grid-template-columns:1.2fr 1fr 1fr } }
.site-footer h4{ font-family:var(--font-head); font-size:1.05rem; margin-bottom:.9rem; color:#fff }
.site-footer nav a, .site-footer .foot-contact a{ display:block; opacity:.82; padding:.25rem 0; font-size:.95rem }
.site-footer nav a:hover{ opacity:1 }
.foot-bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgb(255 255 255/.12);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.foot-bottom .legal-links{ display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.85rem; opacity:.8 }
.foot-bottom .legal-links a:hover{ opacity:1; text-decoration:underline }
.foot-demo-note{ font-size:.78rem; opacity:.55; margin-top:1.1rem; max-width:60ch }
.ns-badge-wrap{ margin-bottom:15px }

/* ---------- Reduced-motion (dämpfen statt killen, REF-C §ENGINE) ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important }
  .marquee,[data-parallax],[data-depth]{ animation:none!important }
  .bg-loop{ animation-duration:90s!important }
}