/* ==========================================================================
   HEIMATHELD – Design Tokens
   Fassung 2.0 · Stand 12.08.2026 · Quelle: CI-Handbuch.html

   ========================================================================== */

:root {

  /* --- Primärfarben ------------------------------------------------------ */

  --hh-petrol:         #17506B;   /* Basisdunkel, Text, Flächen, Scheibe der Bildmarke */
  --hh-gold:           #FECC1F;   /* CMYK 0/21/93/0 · Akzent, max. 3 % der Fläche      */
  --hh-leinen:         #F7F3EE;   /* warme Grundfläche statt reinem Weiß               */
  --hh-weiss:          #FFFFFF;

  /* --- Bausteine der Heldenschar ------------------------------------------
     Nur Flächenfarben. Keine davon ist eine Schriftfarbe. */

  --hh-teal:           #3C8484;
  --hh-mint:           #79B296;
  --hh-lind:           #BDCC8B;

  /* --- Neutrale Treppe ---------------------------------------------------- */

  --hh-grau-800:       #2C3A41;
  --hh-grau-700:       #4A5A62;   /* Fließtext auf Weiß · 7,2:1 */
  --hh-grau-600:       #67767D;   /* Sekundärtext · 4,7:1       */
  --hh-grau-500:       #8A979D;   /* nur ab 24 px oder Icons · 3,0:1 */
  --hh-grau-300:       #C3C9C6;   /* Rahmen        */
  --hh-grau-200:       #DDE1DD;   /* Trennlinien   */
  --hh-grau-100:       #EDEFEC;   /* Flächen       */

  /* --- Funktionsfarben ---------------------------------------------------- */

  --hh-erfolg:         #2E6B4F;
  --hh-achtung:        #A25A16;
  --hh-fehler:         #A33323;
  --hh-hinweis:        #17506B;

  /* --- Semantische Zuordnung ---------------------------------------------- */

  --hh-bg:             var(--hh-weiss);
  --hh-bg-alt:         var(--hh-leinen);
  --hh-bg-invers:      var(--hh-petrol);
  --hh-text:           var(--hh-grau-700);
  --hh-text-stark:     var(--hh-petrol);
  --hh-text-leise:     var(--hh-grau-600);
  --hh-text-invers:    var(--hh-weiss);
  --hh-linie:          var(--hh-grau-200);
  --hh-akzent:         var(--hh-gold);
  --hh-akzent-text:    var(--hh-petrol);      /* Text auf Goldfläche · 5,7:1 */
  --hh-fokus:          var(--hh-gold);

  /* --- Schrift ------------------------------------------------------------
     Jost   – Überschriften, Kicker, Navigation, Buttons  (SIL OFL)
     Inter  – Fließtext, Formulare, Tabellen              (SIL OFL)
     Noyh Slim Light – ausschließlich als Kontur in der Wortmarke */

  --hh-font-display:   "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --hh-font-text:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hh-font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --hh-fs-display:     clamp(2.75rem, 1rem + 6.0vw, 5.5rem);
  --hh-fs-h1:          clamp(2.25rem, 1.2rem + 4.0vw, 4rem);
  --hh-fs-h2:          clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  --hh-fs-h3:          1.5rem;
  --hh-fs-h4:          1.25rem;
  --hh-fs-lead:        1.25rem;
  --hh-fs-body:        1.0625rem;   /* 17 px */
  --hh-fs-small:       0.9375rem;
  --hh-fs-kicker:      0.8125rem;

  --hh-lh-display:     1.05;
  --hh-lh-headline:    1.15;
  --hh-lh-lead:        1.55;
  --hh-lh-body:        1.65;

  --hh-ls-display:    -0.02em;
  --hh-ls-headline:   -0.01em;
  --hh-ls-body:        0;
  --hh-ls-kicker:      0.18em;
  --hh-ls-button:      0.08em;

  --hh-fw-display:     300;
  --hh-fw-headline:    400;
  --hh-fw-kicker:      500;
  --hh-fw-body:        400;
  --hh-fw-bold:        600;

  /* --- Raster und Abstände ------------------------------------------------ */

  --hh-space-1:        0.25rem;
  --hh-space-2:        0.5rem;
  --hh-space-3:        0.75rem;
  --hh-space-4:        1rem;
  --hh-space-6:        1.5rem;
  --hh-space-8:        2rem;
  --hh-space-12:       3rem;
  --hh-space-16:       4rem;
  --hh-space-24:       6rem;
  --hh-space-32:       8rem;

  --hh-container:      1240px;
  --hh-container-eng:  760px;
  --hh-gutter:         1.5rem;
  --hh-sektion-y:      clamp(4rem, 8vw, 8rem);

  /* --- Formen ------------------------------------------------------------- */

  --hh-radius-0:       0;
  --hh-radius-1:       4px;
  --hh-radius-bild:    0;
  --hh-radius-button:  999px;
  --hh-radius-kreis:   50%;

  --hh-linie-staerke:  1px;
  --hh-akzentlinie:    3px;

  --hh-schatten-1:     0 1px 2px rgba(23, 80, 107, 0.07);
  --hh-schatten-2:     0 8px 24px rgba(23, 80, 107, 0.12);

  --hh-dauer:          200ms;
  --hh-dauer-lang:     400ms;
  --hh-easing:         cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Bild-Overlay -------------------------------------------------------
     Pflicht, sobald weiße Typografie auf einem Foto steht. */

  --hh-overlay: linear-gradient(180deg,
                  rgba(23, 80, 107, 0.00) 0%,
                  rgba(23, 80, 107, 0.35) 45%,
                  rgba(23, 80, 107, 0.80) 100%);
}

/* ==========================================================================
   Basiskomponenten
   ========================================================================== */

.hh-kicker {
  font-family: var(--hh-font-display);
  font-size: var(--hh-fs-kicker);
  font-weight: var(--hh-fw-kicker);
  letter-spacing: var(--hh-ls-kicker);
  text-transform: uppercase;
  color: var(--hh-text-leise);
}
.hh-kicker--gold { color: var(--hh-petrol); }
.hh-kicker--gold::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: var(--hh-akzentlinie);
  margin-top: var(--hh-space-3);
  background: var(--hh-gold);
}

.hh-h1 {
  font-family: var(--hh-font-display);
  font-size: var(--hh-fs-h1);
  font-weight: var(--hh-fw-display);
  line-height: var(--hh-lh-headline);
  letter-spacing: var(--hh-ls-headline);
  color: var(--hh-text-stark);
}

.hh-body {
  font-family: var(--hh-font-text);
  font-size: var(--hh-fs-body);
  line-height: var(--hh-lh-body);
  color: var(--hh-text);
  max-width: var(--hh-container-eng);
}

/* Primärbutton: Goldfläche, Schrift Petrol – 5,7:1.
   Gold als Schriftfarbe auf Weiß bleibt verboten (1,5:1). */
.hh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: var(--hh-radius-button);
  background: var(--hh-gold);
  color: var(--hh-akzent-text);
  font-family: var(--hh-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--hh-ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--hh-dauer) var(--hh-easing),
              background var(--hh-dauer) var(--hh-easing);
}
.hh-btn:hover { background: #F5BE00; transform: translateY(-1px); }

.hh-btn--invers {
  background: transparent;
  color: var(--hh-weiss);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.hh-btn--invers:hover { background: rgba(255, 255, 255, 0.12); }

/* Die Heldenschar als Flächenhintergrund. Das Muster liegt als SVG in
   Marke/Muster/ – auf Petrolflächen immer die -dunkel-Fassung verwenden. */
.hh-schar {
  background-image: url("../Marke/Muster/heimatheld-ast-band.svg");
  background-size: cover;
  background-position: center;
}
.hh-schar--dunkel {
  background-color: var(--hh-petrol);
  background-image: url("../Marke/Muster/heimatheld-ast-band-dunkel.svg");
}

/* Sichtbarer Fokus ist Pflicht – auch auf Petrol erkennbar. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--hh-fokus);
  outline-offset: 2px;
}