/* =========================================================
   base.css — Reset + Tokens + Typography + Layout primitives
   ========================================================= */

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
input, select, textarea { border: 0; outline: none; background: transparent; }
textarea { resize: vertical; }

/* --- Tokens --- */
:root{
  /* Brand */
  --green: #16c172;
  --green2:#0aa56a;

  /* Ink */
  --ink:  #08130f;
  --ink2: #0b1b14;

  /* Surfaces */
  --bg: #f4faf7;
  --bg2:#eef7f3;
  --paper: rgba(255,255,255,.92);
  --glass: rgba(255,255,255,.78);

  /* Borders */
  --line: rgba(8,19,15,.10);
  --line2: rgba(8,19,15,.08);

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Shadows */
  --shadow1: 0 14px 40px rgba(8,19,15,.10);
  --shadow2: 0 18px 55px rgba(8,19,15,.10);
  --shadow3: 0 30px 95px rgba(8,19,15,.18);

  /* Motion */
  --ease:  cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.2,1,.2,1);

  /* Container */
  --container: 1160px;
}

/* --- Global page background --- */
html{
  scroll-behavior: smooth;

  /* Noise layer (gegen Banding) + sehr subtile grüne Glows */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E") repeat,
    radial-gradient(1100px 820px at 18% -12%, rgba(22,193,114,.10), transparent 62%),
    radial-gradient(900px 720px at 92% 10%, rgba(10,165,106,.08), transparent 60%),
    linear-gradient(180deg, #f6fcf9 0%, #eef7f3 100%);

  background-size: 220px 220px, auto, auto, auto;
  background-attachment: fixed, fixed, fixed, fixed;
  background-blend-mode: soft-light, normal, normal, normal;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(8,19,15,.88);
  line-height: 1.6;
  background: transparent;
  overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3{
  font-family: Manrope, Inter, sans-serif;
  color: var(--ink2);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0;
}

h1{ font-size: clamp(40px, 5.2vw, 68px); }
h2{ font-size: clamp(30px, 3.4vw, 44px); }
h3{ font-size: clamp(18px, 1.8vw, 22px); letter-spacing:-0.03em; }

p{ margin: 0; }
.lead{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  max-width: 72ch;
}

.kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(8,19,15,.55);
}

.fine{
  font-size: 13px;
  color: rgba(8,19,15,.62);
  line-height: 1.65;
}

/* --- Layout primitives --- */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

.section{
  padding: 92px 0;
  position: relative;
}

.section.compact{
  padding: 72px 0;
}

/* helpful for anchors with fixed nav */
[id]{
  scroll-margin-top: 110px;
}

/* --- Reveal (safe default: visible) --- */
.reveal{
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}
.reveal.is-hidden{
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease2);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal, .reveal.is-hidden, .reveal.is-visible{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}