/* ============================================================================
   U³ Beteiligungen — Design Tokens (Quelle der Wahrheit)
   Eingebunden als <link rel="stylesheet" href="tokens.css"> ODER in eine
   Komponente kopiert. Alle Werte sind GESETZT (siehe CLAUDE.md).
   Begleitdatei: tokens.json (gleiche Werte, maschinenlesbar).
   ========================================================================== */
:root {
  /* ---- Farben · Flächen ------------------------------------------------- */
  --u3-kalk:        #FAF8F3;  /* primäre Grundfläche (fast alles) */
  --u3-papier:      #F1ECE2;  /* ergänzend, sparsam: Zitate, FAQ-Zeilen */
  --u3-petrol:      #163E48;  /* Markenfarbe: Hero, Highlights, gefüllte Buttons */
  --u3-tinte:       #161718;  /* tiefes Neutral: Footer, Logo in Schwarz */

  /* ---- Farben · Akzent & Text ------------------------------------------ */
  --u3-petrol-ink:  #1C535F;  /* Petrol als Titel-/Akzentfarbe auf hellen Flächen */
  --u3-creme:       #F3F0E9;  /* heller Markenton (Logo/Text auf Petrol) */
  --u3-ink:         #1B1A18;  /* Haupttext auf Hell */
  --u3-ink-2:       #3E3A35;  /* Fließtext etwas weicher */
  --u3-ink-3:       #6B665E;  /* sekundär / Captions */

  /* Text AUF Petrol/dunkel */
  --u3-on-petrol-head:   #F3F0E9;  /* Überschriften */
  --u3-on-petrol-body:   #C9DEE1;  /* Fließtext (hell-teal, hoher Kontrast) */
  --u3-on-petrol-label:  #8FC3CB;  /* Labels/Eyebrows */

  /* Linien */
  --u3-line:        rgba(27, 26, 24, 0.13);    /* Hairline auf Hell */
  --u3-line-dark:   rgba(244, 241, 234, 0.18); /* Hairline auf Petrol/Tinte */

  /* ---- Typografie · Familien (alles Google Fonts) ----------------------- */
  --u3-font-serif: "Source Serif 4", Georgia, serif;       /* Titel/Headlines */
  --u3-font-sans:  "Hanken Grotesk", system-ui, sans-serif;/* Fließtext */
  --u3-font-mono:  "IBM Plex Mono", ui-monospace, monospace;/* Labels/Nav/Daten */

  /* ---- Typografie · Gewichte ------------------------------------------- */
  --u3-weight-body:    300;  /* Hanken: Fließtext bewusst leicht */
  --u3-weight-title:   600;  /* Source Serif: Headlines (500 für ruhiger) */
  --u3-weight-title-2: 500;
  --u3-weight-button:  600;  /* Hanken: Button-Label */
  --u3-weight-mono:    500;

  /* ---- Typografie · Skala (px) ------------------------------------------ */
  --u3-fs-display: 84px;  /* Hero */
  --u3-fs-h1:      64px;
  --u3-fs-h2:      40px;
  --u3-fs-h3:      27px;
  --u3-fs-lead:    19px;
  --u3-fs-body:    17px;
  --u3-fs-small:   14px;
  --u3-fs-caption: 12px;
  --u3-fs-label:   11px;  /* Mono-Labels */

  /* Zeilenhöhen & Laufweite */
  --u3-lh-tight:   1.05;
  --u3-lh-snug:    1.2;
  --u3-lh-body:    1.6;
  --u3-ls-display: -0.8px;
  --u3-ls-title:   -0.3px;
  --u3-ls-mono:    1.6px;   /* Navigation/Labels */

  /* ---- Spacing-Skala ---------------------------------------------------- */
  --u3-space-1: 4px;
  --u3-space-2: 8px;
  --u3-space-3: 12px;
  --u3-space-4: 16px;
  --u3-space-5: 24px;
  --u3-space-6: 32px;
  --u3-space-7: 48px;
  --u3-space-8: 64px;
  --u3-space-9: 80px;
  --u3-section-pad: 56px;   /* Standard-Innenabstand Sektion (Desktop) */
  --u3-section-pad-mobile: 24px;

  /* ---- Radien & Schatten ----------------------------------------------- */
  --u3-radius-button: 3px;   /* minimal gerundet */
  --u3-radius-app:    14px;  /* App-Icon */
  --u3-radius-card:   0px;   /* Karten/Flächen: scharfe Kante */
  --u3-shadow-card:  0 4px 24px rgba(0, 0, 0, 0.08);

  /* ---- Layout · Breakpoints & Container --------------------------------- */
  --u3-bp-mobile:  375px;
  --u3-bp-tablet:  768px;
  --u3-bp-desktop: 1280px;
  --u3-container:  1140px;   /* max. Inhaltsbreite (Stand Website: 1140) */
  --u3-grid:       72px;     /* Raster (Hero-Gitter) */
}

/* ---- Basis-Helfer (optional einsetzbar) --------------------------------- */
.u3-title  { font-family: var(--u3-font-serif); font-weight: var(--u3-weight-title); letter-spacing: var(--u3-ls-title); color: var(--u3-petrol-ink); }
.u3-body   { font-family: var(--u3-font-sans);  font-weight: var(--u3-weight-body);  font-size: var(--u3-fs-body); line-height: var(--u3-lh-body); color: var(--u3-ink-2); }
.u3-label  { font-family: var(--u3-font-mono);  font-size: var(--u3-fs-label); letter-spacing: var(--u3-ls-mono); text-transform: uppercase; color: var(--u3-petrol-ink); }