/* =====================================================================
   Arbeitsakademie – Design-Tokens
   Stand: 22.10.2026 · Welt A2 · Schrift Inter · Buttons als Pille
   Quelle der Wahrheit für eigenen Code. In WordPress spiegeln die
   gleichen Werte die Presets aus theme.json (--wp--preset--…).
   ===================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-400-italic.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-700.woff") format("woff"); }

:root {
  /* ---------- Farben: Marke ---------- */
  --aa-hausgruen: #0F4C2B;        /* Marken- und Handlungsfarbe: Buttons, Kopf-Boxen, Links, Pfeile */
  --aa-dunkelgruen: #0B2A19;      /* Footer, dunkle Boxen, aktive Reiter, Hover von Hausgrün */
  --aa-salbei: #B5D6AD;           /* Zweitakzent: Badges, Coaching, eine Querverweis-Box pro Seite */
  --aa-gruen-hell: #EEF6F0;       /* Akkordeons, Förder-Check, Zweit-Buttons, Hover */
  --aa-gruen-linie: #CFE5D6;      /* Rahmen auf hellen Grünflächen */

  /* ---------- Farben: Neutral ---------- */
  --aa-weiss: #FFFFFF;            /* Seitengrund */
  --aa-grau: #F4F6F4;             /* Abschnitte im Wechsel mit Weiß */
  --aa-linie: #E2E5E1;            /* Trennlinien, Kartenrahmen */
  --aa-feldrand: #8C978F;         /* Rahmen von Formularfeldern (3 : 1 auf Weiß) */
  --aa-text: #101D14;             /* „Waldnacht“: Überschriften und Text */
  --aa-text-gedaempft: #4D5950;   /* Fließtext, Beschriftungen (7,3 : 1 auf Weiß) */
  --aa-auf-gruen-text: #E1EDE4;   /* Zweittext auf Hausgrün (8,4 : 1) */
  --aa-footer-text: #C9DECF;      /* Text auf Dunkelgrün (10,9 : 1) */

  /* ---------- Farben: Funktion (nie als Gestaltungsfarbe) ---------- */
  --aa-fehler: #B42318;  --aa-fehler-hell: #FDECEA;
  --aa-hinweis: #8A5300; --aa-hinweis-hell: #FFF4E4;
  --aa-erfolg: #0F4C2B;  --aa-erfolg-hell: #EEF6F0;
  --aa-deaktiviert: #E8ECE9; --aa-deaktiviert-text: #6B756E;

  /* ---------- Schrift ---------- */
  --aa-schrift: Inter, "Helvetica Neue", Arial, sans-serif;
  --aa-gr-display: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);   /* 34 → 56 px */
  --aa-gr-h1:      clamp(2rem, 1.55rem + 1.9vw, 3rem);        /* 32 → 48 px */
  --aa-gr-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);    /* 28 → 40 px */
  --aa-gr-h3:      clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22 → 28 px */
  --aa-gr-h4:      clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);/* 18 → 20 px */
  --aa-gr-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);/* 17 → 20 px */
  --aa-gr-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 px */
  --aa-gr-small:   0.9375rem;                                 /* 15 px */
  --aa-gr-klein:   0.8125rem;                                 /* 13 px, Labels */
  --aa-zeile-text: 1.6;
  --aa-zeile-titel: 1.12;
  --aa-laufweite-titel: -0.02em;
  --aa-laufweite-label: 0.08em;
  --aa-textbreite: 68ch;

  /* ---------- Abstände (4er-Raster) ---------- */
  --aa-a-2xs: 0.25rem; --aa-a-xs: 0.5rem; --aa-a-s: 0.75rem; --aa-a-m: 1rem;
  --aa-a-l: 1.5rem; --aa-a-xl: 2rem; --aa-a-2xl: 3rem; --aa-a-3xl: 4rem;
  --aa-a-sektion: clamp(3rem, 2rem + 4vw, 6rem);
  --aa-a-rand: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---------- Radien ---------- */
  --aa-r-pille: 999px; --aa-r-box: 24px; --aa-r-karte: 16px; --aa-r-feld: 12px; --aa-r-bild: 16px;

  /* ---------- Schatten ---------- */
  --aa-schatten-karte: 0 1px 3px rgba(11, 42, 25, 0.08);
  --aa-schatten-schwebend: 0 4px 20px rgba(11, 42, 25, 0.08);

  /* ---------- Raster ---------- */
  --aa-breite-inhalt: 760px;
  --aa-breite-seite: 1280px;
  --aa-spaltenabstand: 24px;
  --aa-kopfzeile: 72px;
  --aa-touch: 44px;
  /* Umbrüche: 600 px (Smartphone → Tablet), 900 px (Tablet → Laptop), 1200 px (Laptop → Desktop) */
}