@font-face {
  font-family: "Inter";
  src: url("/assets/tghilgen04/webfonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/tghilgen04/webfonts/BarlowCondensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/tghilgen04/webfonts/BarlowCondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/tghilgen04/webfonts/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/tghilgen04/webfonts/BarlowCondensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/tghilgen04/webfonts/BarlowCondensed-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bulma-family-primary: "Inter", "Helvetica Neue", Arial, sans-serif;
  --bulma-family-secondary: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;

  --bulma-weight-light: 400;
  --bulma-weight-normal: 500;
  --bulma-weight-medium: 600;
  --bulma-weight-semibold: 700;

  --bulma-body-line-height: 1.6;
  --bulma-navbar-height: 4.75rem;
}

html, body, button, input, textarea, select {
  font-family: var(--bulma-family-primary);
}

:root {
  /* Farbpalette TGH04 (tgh-farben.pdf) — abgeleitet aus dem Vereinslogo */

  /* Primärfarben */
  --col-blue: #3a3a3e;                        /* Anthrazit — statt Schwarz, Überschriften/Fließtext */
  --col-blue: oklch(28% 0.01 90deg);

  --col-dark-blue: #242426;                   /* Kohle — dunkle Flächen statt #000 */
  --col-dark-blue: oklch(22% 0.008 90deg);

  --col-light-blue: #edece8;                  /* Warmgrau 90 — Karten, Trennlinien */
  --col-light-blue: oklch(92% 0.004 90deg);

  --col-blue-gradient: linear-gradient(135deg, var(--col-dark-blue), var(--col-blue));

  /* Akzent: TGH Rot — Logo-Rot, Primärfarbe für CTAs/Akzentflächen */
  --col-gold: #c4281f;
  --col-gold: oklch(52% 0.19 25deg);

  --col-dark-gold: #9c2016;                   /* CTA-Hover, dunkleres Rot */
  --col-dark-gold: oklch(42% 0.18 25deg);

  --col-gold-gradient: linear-gradient(135deg, var(--col-dark-gold), var(--col-gold));

  /* Akzent: Petrol/Cyan — Komplementärfarbe zu TGH Rot (H175 vs. H25), kräftiger
     als die gedämpfte PDF-Version, für Icons/Badges/Panels als zweite Energiefarbe */
  --col-ice: #0e8f84;
  --col-ice: oklch(58% 0.13 175deg);

  --col-dark-ice: #0b6d64;
  --col-dark-ice: oklch(46% 0.12 175deg);

  --col-ice-gradient: linear-gradient(135deg, var(--col-dark-ice), var(--col-ice));

  /* Indigo — nur für Fließtext-Links/Info-Hinweise (dezent, wie in der PDF spezifiziert) */
  --col-link: #3f5fa8;
  --col-link: oklch(52% 0.09 265deg);

  /* Petrol (gedämpft, PDF-Originalwert) — Erfolg/Bestätigungen */
  --col-green: #1f7a6c;
  --col-green: oklch(52% 0.09 175deg);

  /* Danger: gedämpftes, dunkleres Rot (unterscheidbar von der CTA-Farbe) */
  --col-red: #9c2116;
  --col-red: oklch(45% 0.15 25deg);

  /* Neutraltöne — warm statt kühl-grau, siehe tgh-farben.pdf */
  --col-black-100: oklch(14% 0.006 90deg);
  --col-black-90: #242426;                    /* Kohle */
  --col-black-90: oklch(22% 0.008 90deg);
  --col-black-80: #3a3a3e;                    /* Anthrazit */
  --col-black-80: oklch(28% 0.01 90deg);
  --col-black-60: #777672;                    /* Warmgrau 40 */
  --col-black-60: oklch(50% 0.008 90deg);
  --col-black-40: #a8a7a2;                    /* Warmgrau 60 */
  --col-black-40: oklch(68% 0.008 90deg);
  --col-black-20: oklch(82% 0.006 90deg);
  --col-black-10: #edece8;                    /* Warmgrau 90 */
  --col-black-10: oklch(92% 0.004 90deg);
  --col-black-05: oklch(97% 0.004 90deg);
  --col-white: #ffffff;
  --col-off-white: #fafaf8;                   /* Seitenhintergrund statt reinem Weiß */
  --col-off-white: oklch(98% 0.004 90deg);

  --box-shadow-big: 0 0.5rem 2rem rgba(36, 36, 38, 0.1);
  --box-shadow-dark: 0 8px 28px -6px rgba(36, 36, 38, 0.4);

  --col-text: var(--col-black-80);
  --col-text-muted: var(--col-black-60);
  --col-surface: var(--col-black-05);
  --col-border: var(--col-black-20);

  --bulma-scheme-main: var(--col-off-white);
  --bulma-primary: var(--col-gold);
  --bulma-secondary: var(--col-blue);
  --bulma-link: var(--col-link);

  --bulma-info: var(--col-link);
  --bulma-success: var(--col-green);
  --bulma-danger: var(--col-red);

  --bulma-text: var(--col-black-80);
  --bulma-text-strong: var(--col-black-90);
  --bulma-body-background-color: var(--bulma-scheme-main);

  --bulma-border: var(--col-black-20);
  --bulma-border-light: var(--col-black-05);

  --bulma-primary-hover: var(--col-dark-gold);
  --bulma-primary-active: var(--col-dark-gold);

  --bulma-light: var(--col-black-10);
  --bulma-link-text: var(--col-link);

  --bulma-duration: .2s;
  --bulma-hr-background-color: var(--col-black-20);
  --bulma-hr-height: 1px;
  --bulma-shadow: var(--box-shadow-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bulma-scheme-main: var(--col-black-90);
    --bulma-scheme-main-bis: oklch(from var(--col-black-90) clamp(0, calc(l + .08), 1) c h);
    --bulma-text: var(--col-white);
    --bulma-text-strong: var(--col-white);
    --bulma-border: var(--col-black-60);
    --col-text: var(--col-white);
    --col-text-muted: var(--col-black-20);
    --col-border: var(--col-black-60);
  }
}

h1, h2, h3, h4, h5, h6, .title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 800;
}