/* =========================================================
   truedesign — Light-only, Satoshi (lokal), color-shift
   ========================================================= */

:root{
  /* Brand */
  --accent:#d9a404;          /* Gelbton (exakt) */
  --accent-2:#b88802;
  --olive:#235519;
  --olive-bright:#5d6651;

  /* Typography */
  --font:"Satoshi",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Dancing Script","Satoshi",Georgia,serif;
  --head:#235519;        /* Headline-Farbe (Dunkelgrün) */

  /* Layout */
  --radius:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Default (Hero) colors — werden per JS color-shift überschrieben */
  --bg:#f6f6f1;
  --fg:#235519;
  --muted:#5d6651;
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.08);
  --card:#ffffff;
  --card-2:#faf9f3;
  --input-bg:#ffffff;
  --placeholder:#8a8f87;
  --glow-a:rgba(217,164,4,.14);
  --glow-b:rgba(93,102,81,.10);
  --project-overlay:rgba(246,246,241,.9);
  --tag-bg:rgba(255,255,255,.7);

  /* Serif-Unterstreichung: zartes CI-Grün default, Gelb auf grünem BG */
  --underline:#7c8a6e;          /* zartes Olivgrün (CI-passend) */
  --underline-soft:rgba(124,138,110,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;overflow-y:scroll;scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}
body{
  background:transparent;
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s var(--ease),color .25s var(--ease);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#000}
h1,h2,h3{font-family:var(--font);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--head);transition:color .25s var(--ease)}
/* Highlight-Schreibschrift — verbunden, künstlerisch (Dancing Script) */
.serif,.serif-stagger{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  letter-spacing:0;
  color:var(--accent);
  line-height:1;
  position:relative;
  display:inline-block;
  isolation:isolate;
  transform:rotate(-4.2deg);
  transform-origin:left bottom;
}
/* Dicker Unterstrich-Balken hinter Serif-Wörtern (TMB-Stil).
   Wird per ScrollTrigger von links nach rechts animiert (scaleX 0→1).
   Farbe via --underline (zartes CI-Grün default, Gelb auf grünem BG). */
.serif::after,.serif-stagger::after{
  content:"";position:absolute;
  left:-0.04em;right:-0.04em;bottom:-0.04em;
  height:0.22em;
  background:var(--underline);
  border-radius:0.08em;
  opacity:.6;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--ease),background .6s var(--ease);
  z-index:-1;
  pointer-events:none;
}
.serif.underlined::after,.serif-stagger.underlined::after{transform:scaleX(1)}
h1 .serif,h1 .serif-stagger{font-size:1.35em;font-weight:400}
h2 .serif,h2 .serif-stagger{font-size:1.3em;font-weight:400}
h3 .serif,h3 .serif-stagger{font-size:1.25em;font-weight:400}

/* Akzent-// und gelbe Marker — schräg wie Hero „Geil“ */
.lead-slash,.offer-slash,
.project-name .y,
.compare-hint .slash,
.offer-tick,
.price-feats .tick,
.hero-hint .slash{
  display:inline-block;
  font-style:italic;
  font-weight:900;
  transform:rotate(-4.2deg);
  transform-origin:left center;
}

/* Atmospheric glow layer */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 600px at 80% -10%, var(--glow-a), transparent 60%),
    radial-gradient(700px 500px at 0% 30%, var(--glow-b), transparent 60%);
  transition:opacity 1s var(--ease);
}