/* Design-Tokens optimumfinanz.com, helles System
   Abgeglichen mit der Live-Seite am 07.09.2026 (Framer):
   Weiß als Grund, graue Flächen mit großen Radien, Gold als einziger Akzent,
   General Sans als Displayschrift, zentrierte Überschriften.

   Abweichung mit Absicht: Die Live-Seite setzt Fließtext in rgb(29,61,20),
   ein dunkles Grün. Das steht in keinem Markendokument. Verbindlich laut
   CLAUDE.md sind Gold #bc8f35 und Schwarzblau #11151a, deshalb hier #11151a. */

/* Inter, selbst gehostet, Latin-Subset.
   General Sans liegt noch nicht vor, siehe --font-display. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* General Sans, die Displayschrift der Live-Seite.
   Die Dateien liegen noch nicht vor, deshalb sind die Regeln auskommentiert.
   Aktiv würden sie bei jedem Seitenaufruf zwei 404er erzeugen.
   Sobald general-sans-500.woff2 und general-sans-600.woff2 in assets/fonts
   liegen, diesen Block einkommentieren. Sonst ist nichts zu tun, die
   Schriftfamilie steht in --font-display bereits an erster Stelle. */
/*
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* Farben, verbindlich */
  --gold: #bc8f35;
  --gold-hover: #a97d2a;
  --gold-tint: #f6efe1;
  --ink: #11151a;

  /* Tieferes Gold für Text und dünne Grafiklinien auf Weiß.
     #bc8f35 auf Weiß erreicht nur 2,8:1 und reißt damit sowohl die 4,5:1 für
     Text als auch die 3:1 für grafische Elemente. #8a6623 liegt bei 4,6:1. */
  --gold-deep: #8a6623;
  --gold-soft: #d3b271;

  /* Auf dunklem Grund (Gründer-Band, Aufwand-Spalte) */
  --text-on-dark: #e8e6e1;
  --muted-on-dark: #a4abb4;

  /* Abgeleitete Töne */
  --ink-muted: #5b6470; /* 5,7:1 auf Weiß */
  /* 4,9:1 auf Weiß. Der frühere Ton #838c98 lag bei 3,3:1 und riss damit die
     4,5:1 für Fließtext, auch für Fußnoten und Quellenangaben. */
  --ink-faint: #6a727e;
  --paper: #ffffff;
  --surface: #f7f7f5;
  --surface-alt: #f5f5f5;
  --surface-soft: #f7f7f7;
  --line: #e6e5e1;
  --line-strong: #d6d5d0;

  /* Diagrammfarben */
  --chart-line: #bc8f35;
  --chart-forecast: #c9b98f;
  --chart-grid: #ebeae6;
  --chart-axis: #6a727e;

  /* Typografie */
  --font-display: "General Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --size-hero: clamp(2.4rem, 5.4vw, 3.6rem);
  --size-h2: clamp(1.65rem, 3.6vw, 2.25rem);
  --size-h3: 1.125rem;
  --size-body: 1rem;
  --size-small: 0.9375rem;
  --size-kicker: 0.75rem;
  /* Muss "≈ 115.500 €" einzeilig in eine Karte von rund 200px Innenbreite
     bringen, deshalb bewusst klein gehalten. */
  --size-stat: clamp(1.5rem, 2.6vw, 1.75rem);

  /* Layout */
  --container: 1200px;
  --measure: 44rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 6.5rem);

  /* Formen, von der Live-Seite übernommen */
  --radius-panel: 25px;
  --radius-card: 20px;
  --radius-small: 16px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}