/* ==========================================================================
   MSLEV Design Tokens — Mollys sustainable life e.V.  ·  Version 1.1
   Quelle: Live-Website (Computed Styles, verifiziert Juli 2026 nach Server-Fix)
   + Vereinslogo (offizielle UN-SDG-Palette, verlustfrei aus Original-PNG)
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. FARBEN — Marke (aus dem Blätter-Logo = offizielle UN-SDG-Palette)
     --------------------------------------------------------------------- */
  --mslev-green:        #56C02B; /* SDG 15 — nur grafisch (2.3:1) */
  --mslev-green-dark:   #3F7E44; /* SDG 13 — textfähig (4.9:1) */
  --mslev-blue:         #00689D; /* SDG 14 (6.1:1) */
  --mslev-navy:         #19486A; /* SDG 17 (9.7:1) */
  --mslev-magenta:      #DD1367; /* SDG 10 (4.8:1) — zugleich Button-Farbe der Website! */
  --mslev-red:          #C5192D; /* SDG 4 (5.9:1) */
  --mslev-orange:       #FD9D24; /* SDG 11 — nur grafisch (2.1:1) */
  --mslev-orange-deep:  #FD6925; /* SDG 9 — nur grafisch (2.9:1) */
  --mslev-ochre:        #BF8B2E; /* SDG 12 — nur grafisch (3.0:1) */

  --sdg-10: var(--mslev-magenta);
  --sdg-11: var(--mslev-orange);
  --sdg-12: var(--mslev-ochre);
  --sdg-13: var(--mslev-green-dark);

  /* ---------------------------------------------------------------------
     2. FARBEN — UI (per Computed Styles von der Live-Website gemessen)
     Das Theme (Colibri) nutzt: Magenta-Buttons, Hellblau-Links,
     dunkles Petrol für Headlines, Blaugrau für Fließtext.
     --------------------------------------------------------------------- */
  --color-primary:        #DD1367; /* Buttons (= SDG 10!), Pillenform, versal (4.8:1) */
  --color-primary-hover:  #B30E53;
  --color-accent:         #03A9F4; /* Hellblau der Website — nur große UI/Hover/Grafik (2.6:1) */
  --color-accent-text:    #0277BD; /* abgedunkelte, textfähige Variante für Links (4.8:1) */
  --color-secondary:      #F79007; /* Orange-Akzent des Themes — nur grafisch (2.4:1) */
  --color-teal:           #00BF87; /* Grün-Akzent des Themes — nur grafisch (2.4:1) */

  --color-heading:        #17252A; /* Headline-Farbe der Website (15.7:1) */
  --color-text:           #46707F; /* Fließtext-Blaugrau der Website (5.4:1) */
  --color-text-muted:     #6B8894;
  --color-text-inverse:   #FFFFFF;
  --color-link:           var(--color-accent-text);
  --color-link-hover:     var(--color-accent);

  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F5FAFD; /* helles Eisblau der Website */
  --color-border:         #DFE9EE;

  --color-success:        var(--mslev-green-dark);
  --color-warning:        #B97400;
  --color-error:          var(--mslev-red);

  /* ---------------------------------------------------------------------
     3. TYPOGRAFIE (verifiziert: Montserrat für Text & Headlines,
        Open Sans für Buttons; H2 markant in Light 300)
     --------------------------------------------------------------------- */
  --font-sans: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-button: "Open Sans", var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;      /* 16px, Zeilenhöhe 1.6 — wie Live-Site */
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.625rem;  /* 42px — H2 der Live-Site */
  --text-4xl:  3.375rem;  /* 54px — H1 der Live-Site */

  --font-light:   300;    /* H2-Gewicht der Live-Site */
  --font-regular: 400;
  --font-semi:    600;    /* H1-Gewicht der Live-Site */
  --font-bold:    700;

  --leading-tight:  1.15;
  --leading-normal: 1.6;

  --tracking-caps: 0.05em;

  /* ---------------------------------------------------------------------
     4. ABSTÄNDE (8-px-Basis)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;

  /* ---------------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1140px;
  --container-pad: var(--space-4);
  --grid-gap: var(--space-6);
  /* Backoffice nutzt die volle Breite neben der Sidebar; der linke Seitenabstand
     ist um ein Drittel gegenüber dem Standard-Gutter reduziert. */
  --bo-inhalt-pad-links: calc(var(--container-pad) * 2 / 3);

  /* ---------------------------------------------------------------------
     6. FORM & TIEFE (Buttons der Live-Site: Pillenform!)
     --------------------------------------------------------------------- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-pill: 999px;   /* Buttons */
  --radius-full: 999px;   /* runde Porträts */

  --shadow-sm: 0 1px 3px rgba(23, 37, 42, 0.10);
  --shadow-md: 0 4px 14px rgba(23, 37, 42, 0.12);

  --transition: 160ms ease;
  --focus-ring: 2px solid var(--color-accent-text);
  --focus-offset: 2px;
}

/* ==========================================================================
   BASIS-KOMPONENTEN
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  padding: var(--space-3) var(--space-8);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Outline-Variante (sekundäre Aktionen) */
.btn--outline { background: transparent; color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-text-inverse); }

/* Navy-Variante (z. B. auf farbigen Flächen) */
.btn--navy { background: var(--mslev-navy); border-color: var(--mslev-navy); }
.btn--navy:hover { background: #123852; border-color: #123852; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}