/* ============================================================
   GÄRTNEREI HOHN — DESIGN-TOKENS
   ------------------------------------------------------------
   Alle Farben aus der Imagebroschüre 2026 AUSGEMESSEN,
   nicht geschätzt. Kontraste nach WCAG 2.2 gerechnet.

   Messprotokoll:
     #40564E  Broschüren-Grün   → 7,90:1 auf Weiß   ✅ AAA
     #646567  Logo-Grau         → 5,83:1 auf Weiß   ✅ AA
     #97C00E  Logo-"Giftgrün"   → 2,13:1 auf Weiß   ❌ DURCHGEFALLEN
     #63816E  Alt-Website-Grün  → 4,29:1 auf Weiß   ⚠️ nur Großtext

   → Das Giftgrün ist für Text UNBRAUCHBAR. Es kommt nur noch
     als reine Fläche/Signet vor, nie als Textfarbe.
   → Kanonisches Marken-Grün ist #40564E.
   ============================================================ */

:root {
  /* ---------- Marke ---------- */
  --hohn-gruen:        #40564E;   /* Kernfarbe. AAA auf Weiß. */
  --hohn-gruen-tief:   #2B3A34;   /* Tiefe, Footer, Overlays */
  --hohn-gruen-nacht:  #1C2621;   /* dunkelster Grund */
  --hohn-gruen-hell:   #6E8478;   /* Flächen, Rahmen — NICHT für Text auf Weiß */
  --hohn-gruen-hauch:  #EDF0EE;   /* zarte Flächen */

  --hohn-signet:       #97C00E;   /* Logo-Grün. NUR Fläche/Signet. NIE Text. */

  --hohn-sand:         #F4F2EE;   /* warmes Off-White */
  --hohn-sand-tief:    #E7E4DD;   /* Linien auf Sand */
  --hohn-erde:         #B05037;   /* Terrakotta. Gemessen 5,19:1 auf Weiß, 4,64:1 auf Sand. AA. */
  --hohn-erde-tief:    #8F3F2B;
  --hohn-erde-hell:    #E0917A;   /* nur auf DUNKLEM Grund. 5,84:1 auf Nachtgrün. */

  /* ---------- Text ---------- */
  --hohn-tinte:        #1C221F;   /* Fließtext            16,0:1 auf Weiß */
  --hohn-grau:         #5A5C5E;   /* Sekundärtext          6,8:1 auf Weiß */
  --hohn-grau-hell:    #8B8D8F;   /* nur Großtext / Deko */
  --hohn-linie:        #E2E0DB;

  --hohn-erde-licht:   #F2C0B0;   /* Terrakotta für MITTELGRÜNEN Grund. Gemessen 4,87:1 auf
                                     #40564E — erde-hell schafft dort nur 3,20:1 und fällt durch.
                                     Auf dem NACHT-Grün bleibt erde-hell richtig (6,30:1). */

  --hohn-weiss:        #FFFFFF;

  /* ============================================================
     BRÜCKE ZUM BAUKASTEN
     Das A11y-Widget erwartet --akv-*-Variablen. Statt das Widget
     zu ändern (und damit vom Baukasten abzuweichen), mappen wir
     die Hohn-Tokens darauf. Widget bleibt unverändert kopierbar.
     ============================================================ */
  --akv-red:        var(--hohn-gruen);
  --akv-red-dark:   var(--hohn-gruen-tief);
  --akv-red-light:  var(--hohn-gruen-hell);
  --akv-black:      var(--hohn-tinte);
  --akv-graphite:   var(--hohn-gruen-nacht);
  --akv-gray:       var(--hohn-grau);
  --akv-gray-light: var(--hohn-grau-hell);
  --akv-line:       var(--hohn-linie);
  --akv-bg:         var(--hohn-weiss);
  --akv-bg-soft:    var(--hohn-sand);

  /* Das Service-Tool-CSS (Consent, Embeds) erwartet die generischen
     Namen. Ohne diese Zeilen greifen dort die Fallback-Farben des
     Baukastens (Petrol) — der Consent-Dialog sähe aus wie ein
     Fremdkörper. Also auch hier: mappen statt ändern. */
  --brand:          var(--hohn-gruen);
  --brand-dark:     var(--hohn-gruen-tief);
  --surface:        var(--hohn-weiss);
  --text:           var(--hohn-tinte);
  --text-muted:     var(--hohn-grau);
  --border:         var(--hohn-linie);

  /* ---------- Typografie ---------- */
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Die Broschüre lebt von weit gesperrten, dünnen Headlines.
     Das ist der Signature-Move der Marke. Wir übernehmen ihn. */
  --sperr-weit:  .18em;
  --sperr-mittel:.10em;
  --sperr-eng:   .04em;

  --fs-mikro:  clamp(.68rem, .64rem + .2vw, .75rem);
  --fs-klein:  clamp(.82rem, .78rem + .2vw, .9rem);
  --fs-basis:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-blei:   clamp(1.08rem, 1rem + .4vw, 1.25rem);
  --fs-h3:     clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h2:     clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --fs-h1:     clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --fs-zahl:   clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);

  /* ---------- Raster & Raum ---------- */
  --max:       1320px;
  --max-text:  68ch;
  --rand:      clamp(1.25rem, 4vw, 3.5rem);
  --luft-s:    clamp(2.5rem, 4vw, 4rem);
  --luft:      clamp(4rem, 7vw, 7.5rem);
  --luft-l:    clamp(5.5rem, 9vw, 10rem);

  /* ---------- Form ---------- */
  --radius:    2px;      /* fast eckig — die Broschüre ist es auch */
  --radius-lg: 4px;
  --shadow:    0 2px 8px rgba(28,34,31,.06), 0 8px 24px rgba(28,34,31,.05);
  --shadow-lg: 0 12px 48px rgba(28,34,31,.14);

  --tempo:     .35s cubic-bezier(.22,.72,.28,1);
  --tempo-lang:.9s  cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   BEWEGUNG NUR AUF WUNSCH (WCAG 2.3.3)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}