/* ==========================================================================
   Design-Tokens – ausgelesen aus dem Figma-Export (IB_Funder_Website.pdf)
   und der veroeffentlichten Figma-Site.
   Alle Werte hier zentral aendern, nirgends sonst hardcoden.
   ========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------ */
  --c-brand:          #00302E;  /* Dunkelgruen: Buttons, Logo, Akzente */
  --c-brand-hover:    #004B47;
  --c-dark:           #333333;  /* Dunkle Baender: CTA, Footer, Kompetenzen */
  --c-ink:            #333333;  /* Fliesstext */
  --c-ink-muted:      #6B6B6B;
  --c-surface:        #FFFFFF;
  --c-surface-muted:  #F5F5F5;
  /*
   * Zarter Grünton als Flächenfarbe: das Markengrün zu 8 % auf Weiß.
   * Bewusst so hell, dass dunkler Text darauf noch 11:1 Kontrast hat –
   * weit über dem geforderten Wert von 4,5:1.
   */
  --c-surface-gruen:  #EBF0F0;
  --c-line:           rgba(0, 0, 0, 0.14);
  --c-schema:         #A7BAB6;  /* Linien der Schemazeichnung */
  --c-line-invert:    rgba(255, 255, 255, 0.24);
  --c-on-dark:        #FFFFFF;
  --c-on-dark-muted:  rgba(255, 255, 255, 0.72);

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Syne", "Trebuchet MS", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
   * Typografische Skala. Die vw-Werte sind so gewählt, dass bei der
   * Entwurfsbreite von 1280 px genau der Zielwert herauskommt; darüber
   * greift das Maximum, darunter wird gleichmäßig kleiner.
   *
   *   Stufe   Größe   Wo sie steht
   *   -----   -----   ---------------------------------------------
   *   hero    96 px   Headline der Startseite, sonst nirgends
   *   h1      72 px   Seitentitel, einer pro Seite
   *   h2      56 px   Abschnittsmarken (Kompetenzen, Projekte, ...)
   *   h3      40 px   Störerband, Textkarte im Hero, Kontakt-Mail
   *   h4      32 px   Titel der Kompetenzkarten
   *   h5      24 px   Titel der Projektkarten, Anrede im Fußband
   *
   * Projekt- und Kompetenzkarten sind bewusst verschieden: Projekttitel
   * sind lang ("Von der Nachtspeicherheizung zur Pelletheizung") und
   * stehen zu dritt nebeneinander. Bei 32 px laufen sie über vier Zeilen.
   */
  --fs-hero:    clamp(2.75rem, 7.5vw, 6rem);      /* 96 px */
  --fs-h1:      clamp(2.25rem, 5.625vw, 4.5rem);  /* 72 px */
  --fs-h2:      clamp(2rem, 4.375vw, 3.5rem);     /* 56 px */
  --fs-h3:      clamp(1.75rem, 3.125vw, 2.5rem);  /* 40 px */
  --fs-h4:      clamp(1.375rem, 2.5vw, 2rem);     /* 32 px */
  --fs-h5:      clamp(1.25rem, 1.875vw, 1.5rem);  /* 24 px */
  --fs-base:    1rem;                            /* 16px */
  --fs-lead:    1.125rem;                        /* 18 px – Kicker über Titeln */
  --fs-small:   0.875rem;                        /* 14 px – Fußzeile, Bildunterschriften */
  --fs-micro:   0.6875rem;                       /* 11px */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  --fw-display: 600;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* --- Layout ------------------------------------------------------------ */
  --content:     1152px;   /* Inhaltsbreite: 1280er Frame minus 2 x 64 */
  --gutter:      64px;     /* Seitenabstand Desktop, am Figma-Frame gemessen */
  --radius-card: 13px;
  --radius-pill: 300px;
  --radius-sm:   5px;

  /* --- Abstaende --------------------------------------------------------- */
  --space-2xs:  0.5rem;
  --space-xs:   0.75rem;
  --space-s:    1rem;
  --space-m:    1.5rem;
  --space-l:    2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --section-y:  clamp(3rem, 7vw, 6rem);

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

/* Tablet-Breakpoint (Figma-Frame: 810px) */
@media (max-width: 1023px) {
  :root { --gutter: 40px; }
}

/* Mobile-Breakpoint (Figma-Frame: 390px) */
@media (max-width: 639px) {
  :root { --gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}