/* Design-Tokens nach goldbach-web (Pfade zu den Schriften relativ zu css/) */
@font-face {
  font-family: "LT Tetria";
  src: url("../assets/fonts/lt-tetria-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LT Tetria";
  src: url("../assets/fonts/lt-tetria-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LT Tetria";
  src: url("../assets/fonts/lt-tetria-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben (Palette aus goldbach-grafik) */
  --gb-red: #b61f34;          /* Passion Red, Primärfarbe */
  --gb-red-soft: #8d1926;     /* dunkler CTA, Footer-Akzente */
  --gb-red-dark: #590318;
  --gb-pink: #ef1957;         /* Hover primärer CTA */
  --gb-fuchsia: #971f51;      /* Hover dunkler CTA */
  --gb-coral: #fe3935;        /* Akzent, sparsam */
  --gb-rose: #f45e89;
  --gb-peach: #f57e7e;
  --gb-gold: #f9cb9c;
  --gb-white: #ffffff;
  --gb-black: #000000;
  --gb-gray-text: #575757;    /* gedämpfter Text */
  --gb-gray-line: #dadada;    /* funktionale Trennlinien */
  --gb-gray-bg: #f2f2f2;      /* helle Flächen */
  --gb-footer-bg: #111111;    /* Footer-Fläche */

  /* Schrift */
  --gb-font: "LT Tetria", Inter, Arial, Helvetica, sans-serif;
  --gb-weight-text: 300;
  --gb-weight-bold: 700;      /* nur Footer-Titel, Sprachumschalter */
  --gb-weight-strong: 900;

  /* Typografie: Desktop */
  --gb-fs-h1: 48px;
  --gb-fs-h2: 34px;
  --gb-fs-h3: 24px;
  --gb-fs-body: 17px;
  --gb-fs-ui: 16px;           /* Menü, Buttons */
  --gb-fs-small: 13px;

  /* Layout */
  --gb-site-width: 960px;     /* 900px Karte + 2 × Gutter */
  --gb-gutter: 30px;          /* seitlicher Innenabstand */
  --gb-section-y: 80px;       /* vertikaler Abstand pro Sektion */
  --gb-gap: 40px;             /* Abstand zwischen Spalten */
  --gb-radius: 8px;           /* Karten, Bilder, Menüs */
  --gb-radius-button: 4px;
  --gb-header-height: 85px;
}

@media (max-width: 1000px) {
  :root { --gb-fs-h1: 34px; --gb-fs-h2: 28px; --gb-fs-h3: 21px; }
}
@media (max-width: 640px) {
  :root { --gb-fs-h1: 28px; --gb-fs-h2: 24px; --gb-fs-h3: 20px; --gb-section-y: 60px; --gb-gutter: 20px; }
}