/* =========================================================================
   G6PD-Mangel.de – Design-Tokens (Healthcare: ruhiges Cyan + Gesund-Grün)
   Barrierefrei (WCAG AA), ethisch, ruhig. Version 1.0.0
   ========================================================================= */

:root {
  /* Marken-Palette – Salbeigrün #9AB359 DOMINANT (erdig/natürlich) */
  --c-cyan:        #556E22;  /* Primär interaktiv (dunkles Salbei, AA-tauglich) */
  --c-cyan-bright: #9AB359;  /* DOMINANT: Salbeigrün (Flächen/Akzente) */
  --c-green:       #6F8A2E;  /* mittleres Salbei */
  --c-teal:        #7FA0DA;  /* Periwinkle (dunkler, für Text/Linien) */
  --c-teal-bright: #ADC6F0;  /* Periwinkle hell – Sekundärakzent */
  --c-ice:         #F3F6E9;  /* sehr helle Salbei-Fläche */
  --c-deep:        #3C471D;  /* tiefes Olivgrün (Text/Headlines/Footer) */
  --c-brick:       #803D33;  /* erdiger Sekundärton */
  --c-red:         #CC1B00;  /* Warnung/Gefahr */

  /* Spatial UI (VisionOS) – Glas & Tiefe */
  --glass-bg:        rgba(255,255,255,.66);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-bg-tint:   rgba(236,253,245,.6);
  --glass-blur:      20px;
  --glass-sat:       165%;
  --glass-border:    rgba(255,255,255,.7);
  --glass-border-in: rgba(255,255,255,.5);
  --depth-1: 0 1px 2px rgba(60,71,29,.07), 0 2px 6px rgba(60,71,29,.08);
  --depth-2: 0 8px 32px rgba(60,71,29,.14);
  --depth-3: 0 20px 48px rgba(60,71,29,.20);
  --focus-scale: 1.02;

  /* Neutrale Töne */
  --n-0:  #ffffff;
  --n-50: #f6fafb;
  --n-100:#eef3f5;
  --n-200:#dbe4e8;
  --n-300:#c2ced4;
  --n-500:#5f7078;
  --n-700:#37474f;
  --n-900:#16232a;

  /* Semantische Risiko-Farben (Palette: Rot/Ziegel/Salbei/Periwinkle, AA-kontrastreich) */
  --risk-meiden-fg:   #a01500;   /* meiden – Rot */
  --risk-meiden-bg:   #fdecea;
  --risk-meiden-bd:   #CC1B00;
  --risk-vorsicht-fg: #803D33;   /* mit Vorsicht – Ziegel */
  --risk-vorsicht-bg: #f6ece9;
  --risk-vorsicht-bd: #b06a5f;
  --risk-gering-fg:   #3C471D;   /* gering – tiefes Oliv auf Salbei */
  --risk-gering-bg:   #eef3dd;
  --risk-gering-bd:   #9AB359;
  --risk-neutral-fg:  #3a4666;   /* keine Bewertung – Periwinkle-Slate */
  --risk-neutral-bg:  #eef2fb;
  --risk-neutral-bd:  #ADC6F0;

  /* Typografie */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.15rem;
  --fs-3xl: 2.9rem;
  --lh-tight: 1.2;
  --lh-normal: 1.65;

  /* Abstände / Radius / Schatten */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem;  --sp-8:3rem;   --sp-10:4rem;  --sp-12:6rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: var(--depth-1);
  --shadow: var(--depth-2);
  --shadow-lg: var(--depth-3);

  --ring: 0 0 0 3px rgba(154,179,89,.5);

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset / Basis ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--n-900);
  background:
    radial-gradient(58% 48% at 10% 6%, rgba(154,179,89,.30), transparent 60%),
    radial-gradient(52% 42% at 94% 2%, rgba(173,198,240,.32), transparent 62%),
    radial-gradient(50% 50% at 82% 94%, rgba(154,179,89,.24), transparent 60%),
    radial-gradient(46% 46% at 4% 98%, rgba(128,61,51,.10), transparent 60%),
    #F3F6E9;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Weniger Transparenz gewünscht -> solide Flächen */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #ffffff; --glass-bg-strong: #ffffff; --glass-bg-tint: var(--c-ice); --glass-blur: 0px; }
}
h1,h2,h3,h4 { font-family: var(--font-serif); line-height: var(--lh-tight); color: var(--c-deep); font-weight: 600; }
a { color: var(--c-cyan); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-deep); }

/* Fokus immer sichtbar (Barrierefreiheit) */
:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: 4px; }

/* Screenreader-only */
.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Skip-Link */
.skip-link {
  position:absolute; left:var(--sp-3); top:-3rem; z-index:100;
  background:var(--c-deep); color:#fff; padding:.6rem 1rem; border-radius:var(--radius-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top:var(--sp-3); color:#fff; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-5); }