/* ============================================================
   MyPage360 – Design-Tokens
   Farbsystem: dunkler Hero + helle Inhalte.
   Alle Kontraste gegen WCAG 2.2 AA geprüft (4.5:1 Text / 3:1 groß+UI).
   Geprüfte Werte stehen als Kommentar an jeder Farbe.
   ============================================================ */

:root{
  /* ---- MARKE: Grün in zwei Helligkeiten ----
     Mint hell = nur auf DUNKLEM Grund verwenden.
     Grün dunkel = nur auf HELLEM Grund verwenden (Links, Buttons, Icons). */
  --brand-mint:      #2fd4a6;   /* auf dark-bg: 9.85:1  ✓ groß/UI */
  --brand-mint-soft: rgba(47,212,166,.16);
  --brand-green:     #0d7a57;   /* auf weiß:   5.33:1  ✓ normaler Text/Link */
  --brand-green-dk:  #0b6e4f;   /* auf weiß:   6.25:1  ✓ extra Sicherheit  */

  /* ---- AKZENT: Bernstein (sparsam, Ziel/Highlight) ---- */
  --accent-amber:    #e8a13c;   /* auf dark-bg: 8.53:1 ✓ groß/UI */
  --accent-amber-dk: #8a5a12;   /* auf weiß: AA-tauglich für kleinen Text */

  /* ---- DUNKLE SEKTIONEN (Hero, CTA-Band, Footer) ---- */
  --dark-bg:    #0d1411;        /* tiefes Tannengrün */
  --dark-bg-2:  #111c18;        /* Karten im Dunkeln */
  --dark-ink:   #eef4f1;        /* Text auf dunkel: 16.75:1 ✓ */
  --dark-muted: #7e948c;        /* gedämpft auf dunkel: 5.78:1 ✓ */
  --dark-line:  #1d2b27;

  /* ---- HELLE INHALTE (Standard) ---- */
  --bg:         #ffffff;
  --bg-greige:  #f4f6f3;        /* alternative Inhaltsfläche */
  --ink:        #16211d;        /* Haupttext: 16.5:1 ✓ */
  --ink-muted:  #4a5953;        /* gedämpft, weiterhin AA */
  --line:       #e4e9e6;

  /* ---- CTA ---- */
  --cta-bg:     var(--brand-mint);
  --cta-ink:    #04130e;        /* auf Mint: 10:1 ✓ */

  /* ---- FORM / RADIEN / ABSTÄNDE ---- */
  --radius-sm: 8px;
  --radius:    11px;
  --radius-lg: 16px;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2rem; --space-6: 3rem;  --space-8: 4rem;

  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --maxw: 1100px;
}

/* Fokus-Ring (WCAG 2.2 §2.4.11: Kontrast ≥3:1 gegen angrenzende Farbe)
   Hell: --brand-green-dk auf Weiß = 6.25:1 ✓
   Dunkel: --brand-mint auf --dark-bg = 9.85:1 ✓ (Überschreibung unten) */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline: 3px solid var(--brand-green-dk);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Fokus auf dunklen Flächen: Mint ist dort kontrastreich */
.section--dark :where(a,button,input,textarea,select,[tabindex]):focus-visible,
.ws-hero :where(a,button,input,textarea,select,[tabindex]):focus-visible,
.page-hero :where(a,button,input,textarea,select,[tabindex]):focus-visible,
.site-header :where(a,button,input,textarea,select,[tabindex]):focus-visible,
.site-footer :where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline-color: var(--brand-mint);
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Sektions-Helfer: hell = Standard, dunkel = invertiert */
.section{padding: var(--space-8) var(--space-2); background: var(--bg); color: var(--ink);}
.section--greige{background: var(--bg-greige);}
.section--dark{background: var(--dark-bg); color: var(--dark-ink);}
.section--dark a:not(.btn){color: var(--brand-mint);}
.section--dark .muted{color: var(--dark-muted);}
.section .inner{max-width: var(--maxw); margin-inline:auto;}
.muted{color: var(--ink-muted);}

/* Buttons */
.btn{display:inline-block;font-weight:700;text-decoration:none;
     padding:13px 24px;border-radius:var(--radius);cursor:pointer;
     border:1px solid transparent;transition:filter .15s, background .15s;}
.btn--primary{background:var(--cta-bg);color:var(--cta-ink);}
.btn--primary:hover{filter:brightness(1.08);}
/* Sekundär-Button auf HELL: dunkles Grün als Rahmen+Text (geprüft) */
.btn--ghost{background:transparent;color:var(--brand-green);border-color:var(--brand-green);}
.btn--ghost:hover{background:var(--brand-mint-soft);}
/* Links im hellen Inhalt: dunkles Grün (5.33:1) */
.section a:not(.btn){color:var(--brand-green);}