/* ==========================================================================
   Basis: Reset, Design-Tokens, Typografie
   ========================================================================== */

:root{
  /* Farbsystem -- Klinische Klarheit: gedaempftes Praxisblau + Salbeigruen */
  --primary: #1B3A4B;
  --primary-oklch: oklch(32% 0.05 230);
  --primary-soft: #2E4F63;
  --accent: #7FA98A;
  --accent-deep: #5E8A70;
  --bg: #FFFFFF;
  --bg-warm: #F1EAE0;
  --bg-muted: #F6F3EE;
  --ink: oklch(32% 0.05 230);
  --ink-soft: #4B5F6A;
  --line: #E1DAD0;
  --radius: 6px;
  --radius-feature: 26px; /* einzige bewusste Ausnahme */
  --shadow-1: 0 1px 2px rgba(27, 58, 75, 0.06), 0 1px 1px rgba(27, 58, 75, 0.04);
  --shadow-2: 0 12px 32px rgba(27, 58, 75, 0.12);
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 66ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 280ms;

  /* Sektions-Rhythmus: sichtbar variierende Abstaende, nie gleichfoermig */
  --space-s: 4rem;
  --space-m: 6rem;
  --space-l: 8.5rem;
  --space-xl: 10rem;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html{ overflow-x: hidden; }

img, svg, video{ max-width: 100%; height: auto; display: block; }
svg{ max-width: 100%; height: auto; }

.icon{
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
  vertical-align: middle;
  max-width: 32px;
  max-height: 32px;
}

a{ color: inherit; text-decoration: none; }

ul, ol{ margin: 0; padding: 0; list-style: none; }
p{ margin: 0 0 1.1em; text-wrap: pretty; }
figure{ margin: 0; }

/* Typo-Skala ~1.333 (perfect fourth), Headline mind. Faktor 3 zu Fliesstext */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: pretty;
  color: var(--primary);
}

h1{
  font-size: clamp(3.4rem, 2.5rem + 3.6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

h2{
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 3.15rem);
  letter-spacing: -0.005em;
}

h3{
  font-size: clamp(1.55rem, 1.35rem + 0.8vw, 2.05rem);
}

h4{
  font-size: clamp(1.2rem, 1.1rem + 0.3vw, 1.4rem);
  font-family: var(--font-body);
  font-weight: 700;
}

.lede{
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.measure{ max-width: var(--measure); }

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}

.accent-word{ color: var(--accent-deep); font-style: italic; }

:focus-visible{
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection{ background: var(--accent); color: #fff; }