/* ==========================================================================
   Fairly Claims: Tokens und Reset (Vertrag für alle Sektionen, Stand feat/ia-v2 04.09.2026)
   Marke: nur die 7 Guide-Farben, Ableitungen sind Grautöne mit Grünstich. Kein Verlauf außer Symbol-Kugel.
   Webflow-sicher: keine Keyframes, Breakpoints nur 991 / 767 / 479.
   ========================================================================== */
:root {
  /* Marke (Brand-Guide S. 12) */
  --fc-black: #191b19;
  --fc-gray-dark: #393d3f;
  --fc-green-950: #0b271e;
  --fc-green-800: #1a513f;
  --fc-green-600: #2a7955;
  --fc-green-300: #5fffa7;
  --fc-white: #ffffff;

  /* Flächen und Linien (Ableitungen, Canvas 04.09.) */
  --fc-soft: #f6f7f6;        /* ruhige Zwischenfläche */
  --fc-band: #f4f5f3;        /* Dach-Band, 3 bis 4 % unter Weiß */
  --fc-hero: #eef0ef;        /* Hero-Grund hinter Bild */
  --fc-line: #e3e6e4;        /* Haarlinie */
  --fc-line-strong: #c9cdca;
  --fc-muted: #6b706d;       /* Kicker, Bildunterschriften */
  --fc-tint: #dcf2e6;        /* Tag-Hintergrund, Fokus-Ring */
  --fc-green-50: #f1f7f3;    /* getoente Sektionsflaeche */
  --fc-green-100: #e3efe8;   /* Panel im Tint, Tabellenzeile */
  --fc-line-green: rgba(26, 81, 63, 0.16);
  --fc-line-green-strong: rgba(26, 81, 63, 0.28);
  --fc-ink: var(--fc-black);
  --fc-copy: var(--fc-gray-dark);
  --fc-on-dark-soft: rgba(255, 255, 255, 0.78);
  --fc-on-dark-line: rgba(255, 255, 255, 0.16);

  /* Komponierte Gruende (Herkunft: main/v3, dort styles.css 347 und v3.css 1273) */
  --fc-flow:
    radial-gradient(circle at 14% 6%, rgba(95, 255, 167, 0.16), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(26, 81, 63, 0.09), transparent 34%),
    linear-gradient(145deg, #f6f7f6, #ffffff 56%, #eef3ef);
  --fc-dark-panel:
    radial-gradient(circle at 16% 14%, rgba(31, 104, 77, 0.42), transparent 30%),
    linear-gradient(118deg, #0b271e 0%, #1a513f 52%, #0b271e 100%);
  --fc-ring:
    conic-gradient(from 210deg,
      rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.28) 60deg,
      rgba(95, 255, 167, 0.45) 92deg, rgba(255, 255, 255, 0.06) 130deg,
      rgba(255, 255, 255, 0.18) 200deg, rgba(95, 255, 167, 0.16) 260deg,
      rgba(255, 255, 255, 0) 320deg);

  /* Schrift: Teko + Work Sans, nach Freigabe der Ueber-uns-Typografie 09.09.2026. */
  --fc-font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-display: "Teko", "Work Sans", system-ui, sans-serif;
  --fc-font-mono: var(--fc-font);

  /* Layout */
  --fc-header-h: 76px;
  /* Container, Gosse und Sektionsabstaende stehen in css/skala.css (eine Quelle fuer alle Seiten). */

  /* Schriftskala: steht in css/skala.css (eine Quelle fuer alle Seiten). */

  /* Radien (Karten-Rezept 04.09.) */
  --fc-radius: 20px;         /* Karten */
  --fc-radius-band: 28px;    /* Dach-Band, grosse Panels */
  --fc-radius-media: 0;      /* Fotos kantig wie die Hero-Randkante (08.09.2026, docs/design-radien-2026-09-08.md). Alle Foto-Bausteine haengen hier. */
  --fc-radius-sm: 16px;      /* Bausteine, Platzhalter */
  --fc-radius-pill: 999px;   /* Buttons, Chips */

  /* Motion und Tiefe */
  --fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fc-shadow-card: 0 1px 2px rgba(20, 30, 25, 0.04), 0 12px 32px -8px rgba(20, 30, 25, 0.10);
  --fc-shadow-card-hover: 0 20px 40px -10px rgba(20, 30, 25, 0.14);
  --fc-card-border: rgba(20, 30, 25, 0.06);
}
@media (max-width: 991px) {
  :root { --fc-gutter: 28px; --fc-header-h: 64px; --fc-section: 104px; --fc-section-lg: 120px; --fc-section-sm: 68px; }
}
@media (max-width: 767px) {
  :root { --fc-gutter: 20px; --fc-header-h: 64px; --fc-section: 80px; --fc-section-lg: 92px; --fc-section-sm: 56px; }
}

/* --- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--fc-header-h) + 16px); }
body {
  margin: 0;
  background: var(--fc-white);
  color: var(--fc-ink);
  font-family: var(--fc-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { display: block; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, address { margin: 0; }
address { font-style: normal; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--fc-green-800); outline-offset: 4px; }
.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; }
.sr-only:focus { position: fixed; z-index: 999; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--fc-white); color: var(--fc-ink); }
html[data-menu-open="1"], html[data-menu-open="1"] body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}