/* ============================================================
   HNG Pro Select – Design Tokens
   Quelle: Figma "HNG Pro Select Website V2"
   Collection "HNG Pro Select" → 1:1 übernommen.
   Abschnitt "Abgeleitete Tokens": Werte, die in Figma nur als
   Inline-Styles vorkommen (keine Figma-Variablen vorhanden).
   ============================================================ */

:root {
  /* ---- Figma-Variablen (1:1) ---- */
  --hng-blau:     #00334C;
  --konzeptimmo:  #3B6E6A;
  --careimmo:     #D2B48C;
  --greenimmo:    #6B8E6B;
  --basisimmo:    #B8B0A1;
  --weiss:        #FFFFFF;
  --dunkelgrau:   #2D2D2C;
  --orange:       #FF5C00;

  /* ---- Abgeleitete Farb-Tokens (aus Inline-Styles der Datei) ---- */
  --beige:        #F5F0E8; /* Flächen/Headline hell */
  --beige-60:     rgb(245 240 232 / 0.6); /* Accordion-Body */
  --sand:         #C8BBA8; /* kursive Headline-Zweitzeilen, Input-Border */
  --text-dunkel:  #2E2825; /* Fließtext / Nav */
  --pill-aktiv:   #FFFBF4; /* aktiver Menüpunkt */
  --sidebar-bg:   #9B8E7E; /* Social Sidebar */
  --grau-border:  #9CA3AF; /* Login-Button-Rahmen */
  --schwarz:      #000000;
  --footer-blau:  #061926; /* Footer-Hintergrund, dunkler als --hng-blau (User-Vorgabe 19.07., aus Screenshot gemessen) */

  /* ---- Abgeleitete Typografie-Tokens ---- */
  --font-headline: "Lora", Georgia, serif;
  --font-text:     "Montserrat", Arial, sans-serif;

  --fs-display:   56px;  /* Hero H1 */
  --fs-h2:        44px;  /* Sektions-Headlines */
  --fs-h3:        26px;  /* Karten-Headlines */
  --fs-h4:        18px;  /* Timeline-Labels, Listentitel */
  --fs-accordion: 24px;  /* Accordion-Header (Montserrat Bold) */
  --fs-zahl:      40px;  /* Zahlen & Fakten */
  --fs-text:      14px;  /* Fließtext */
  --fs-klein:     12px;  /* Unterzeilen Stats */
  --fs-nav:       10px;  /* Navigation, Labels, Formular-Microcopy */

  --lh-text:      1.55;
  --lh-headline:  1.18;

  /* ---- Abgeleitete Layout-Tokens ---- */
  --radius-s:     6px;   /* Accordion-Header oben */
  --radius-m:     8px;   /* Buttons, Cards, Sidebar */
  --radius-l:     10px;  /* Nav-Pill, Inputs Newsletter */
  --radius-pill:  7px;   /* aktiver Nav-Punkt */

  --content-max:  1040px; /* Inhaltsbreite (Frames: 1040/1041 bei 1440) */
  --page-pad:     200px;  /* Außenabstand Desktop laut Figma */
  --header-h:     120px;

  /* ---- Motion ---- */
  --ease:         cubic-bezier(0.33, 1, 0.68, 1);
  --dur-schnell:  180ms;
  --dur-normal:   250ms;
  --dur-slide:    420ms;
}