/* fuehrungs.academy – Brand Tokens
   Quelle: OneDrive 11_Fit für Führung/03_Marketing/CICD/design_handoff_fuehrungs_academy_brand/brand-tokens.css
   Abweichung: Hanken Grotesk wird lokal ausgeliefert statt per Google-Fonts-Import (DSGVO). */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap; src: url('fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 500; font-display: swap; src: url('fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap; src: url('fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 700; font-display: swap; src: url('fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 800; font-display: swap; src: url('fonts/hanken-grotesk-800.woff2') format('woff2'); }

:root {
  /* Farben */
  --fa-tinte: #16233A;          /* Primär: Text, Flächen, Logo */
  --fa-tinte-hell: #22314D;     /* Flächen-Variante auf Tinte */
  --fa-papier: #F6F4EF;         /* Seitenhintergrund */
  --fa-weiss: #FFFFFF;          /* Karten */
  --fa-nebel: #E4E1DA;          /* Linien, Trenner */
  --fa-stein: #6B7280;          /* Sekundärtext */
  --fa-text-2: #4A5262;         /* Fließtext gedämpft */
  --fa-bernstein: #E3893A;      /* Akzent: Punkt, Linien, Primär-Button */
  --fa-bernstein-dunkel: #B8621B; /* Akzent als Text auf hellem Grund */
  /* Ergänzt aus README (dort genannt, in der Token-Datei nicht enthalten) */
  --fa-bernstein-hover: #D27A2C;  /* Primär-Button Hover */
  --fa-text-auf-tinte: #A9B2C2;   /* Sekundärtext im Footer / auf Tinte */

  /* Typografie */
  --fa-font: 'Hanken Grotesk', system-ui, sans-serif;
  --fa-h1: 700 clamp(36px, 4.4vw, 52px)/1.06 var(--fa-font);
  --fa-h2: 700 clamp(28px, 3vw, 36px)/1.17 var(--fa-font);
  --fa-h3: 600 24px/1.25 var(--fa-font);
  --fa-body: 400 17px/1.6 var(--fa-font);
  --fa-small: 400 14px/1.5 var(--fa-font);
  --fa-eyebrow: 600 13px/1.2 var(--fa-font);
  --fa-ls-h1: -0.025em;
  --fa-ls-h2: -0.02em;
  --fa-ls-eyebrow: 0.08em;

  /* Form */
  --fa-radius-btn: 4px;
  --fa-radius-card: 6px;
  --fa-shadow-print: 0 10px 30px rgba(22, 35, 58, 0.18);

  /* Abstände (4er-Raster) */
  --fa-space-1: 4px;  --fa-space-2: 8px;  --fa-space-3: 12px; --fa-space-4: 16px;
  --fa-space-5: 24px; --fa-space-6: 32px; --fa-space-7: 48px; --fa-space-8: 72px; --fa-space-9: 96px;
}