/* Ancora Marketing — generiert aus marke.json. Nicht von Hand ändern: node skripte/tokens.mjs */
:root {
  /* Farben */
  --marketing-navy: #002169;
  --marketing-lime: #93D500;
  --marketing-black: #101820;
  --marketing-off-white: #F6F6F4;
  --marketing-grey: #D9D8D6;
  --marketing-body-ink: #28324D;
  --marketing-navy-100: #E2E5F0;
  --marketing-navy-200: #B9C0DD;
  --marketing-navy-300: #8492C6;
  --marketing-navy-400: #5165AC;
  --marketing-navy-500: #2A4596;
  --marketing-navy-600: #133081;
  --marketing-navy-700: #002169;
  --marketing-navy-800: #001852;
  --marketing-navy-900: #00103A;
  --marketing-lime-100: #F0FAD5;
  --marketing-lime-200: #DDF4A3;
  --marketing-lime-300: #C2EA66;
  --marketing-lime-400: #A8E02E;
  --marketing-lime-500: #93D500;
  --marketing-lime-600: #7FBD00;
  --marketing-lime-700: #6FA300;
  --marketing-success: #2E9E5B;
  --marketing-warning: #E0A100;
  --marketing-danger: #D92D20;
  --marketing-info: #2E6FE0;
  /* Funktionsfarben */
  --marketing-funktion-fokus: var(--marketing-navy);
  --marketing-funktion-fokus-invers: var(--marketing-lime);
  --marketing-funktion-feldrand: var(--marketing-navy-400);
  --marketing-funktion-statustext-info: var(--marketing-navy-500);
  --marketing-funktion-statustext-fehler: #B42318;
  --marketing-funktion-statustext-warnung: #8A5F00;
  --marketing-funktion-statustext-erfolg: #1F7A45;
  /* Schrift */
  --marketing-font-sans: "Borna", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Rollen, Fläche standard */
  --marketing-flaeche: var(--marketing-off-white);
  --marketing-flaeche-erhoeht: #FFFFFF;
  --marketing-text: var(--marketing-body-ink);
  --marketing-text-stark: var(--marketing-navy);
  --marketing-text-leise: var(--marketing-navy-400);
  --marketing-rand: var(--marketing-grey);
  --marketing-rand-feld: var(--marketing-funktion-feldrand);
  --marketing-aktion: var(--marketing-navy);
  --marketing-aktion-text: #FFFFFF;
  --marketing-aktion-hover: var(--marketing-navy-800);
  --marketing-aktion-gedrueckt: var(--marketing-navy-900);
  --marketing-aktion-akzent: var(--marketing-lime);
  --marketing-aktion-akzent-text: var(--marketing-navy);
  --marketing-aktion-akzent-hover: var(--marketing-lime-400);
  --marketing-aktion-akzent-gedrueckt: var(--marketing-lime-300);
  --marketing-link: var(--marketing-navy);
  --marketing-link-hover: var(--marketing-navy);
  --marketing-fokus: var(--marketing-funktion-fokus);
  --marketing-status-info: var(--marketing-funktion-statustext-info);
  --marketing-status-fehler: var(--marketing-funktion-statustext-fehler);
  --marketing-status-warnung: var(--marketing-funktion-statustext-warnung);
  --marketing-status-erfolg: var(--marketing-funktion-statustext-erfolg);
  --marketing-abdunkeln: var(--marketing-navy-900);
  --marketing-abdunkeln-text: #FFFFFF;
  /* Typo-Skala */
  --marketing-schrift-display: clamp(44px, 18.65px + 6.76vw, 116px);
  --marketing-schrift-display-zeilenabstand: 1.04;
  --marketing-schrift-display-gewicht: 600;
  --marketing-schrift-h1: clamp(34px, 26.25px + 2.07vw, 56px);
  --marketing-schrift-h1-zeilenabstand: 1.04;
  --marketing-schrift-h1-gewicht: 600;
  --marketing-schrift-h2: clamp(28px, 23.77px + 1.13vw, 40px);
  --marketing-schrift-h2-zeilenabstand: 1.1;
  --marketing-schrift-h2-gewicht: 600;
  --marketing-schrift-h3: clamp(18px, 16.59px + 0.38vw, 22px);
  --marketing-schrift-h3-zeilenabstand: 1.25;
  --marketing-schrift-h3-gewicht: 600;
  --marketing-schrift-lead: clamp(16px, 14.94px + 0.28vw, 19px);
  --marketing-schrift-lead-zeilenabstand: 1.5;
  --marketing-schrift-lead-gewicht: 400;
  --marketing-schrift-text: 16px;
  --marketing-schrift-text-zeilenabstand: 1.5;
  --marketing-schrift-text-gewicht: 400;
  --marketing-schrift-klein: 14px;
  --marketing-schrift-klein-zeilenabstand: 1.5;
  --marketing-schrift-klein-gewicht: 400;
  --marketing-schrift-label: 12px;
  --marketing-schrift-label-zeilenabstand: 1.2;
  --marketing-schrift-label-gewicht: 600;
  /* Abstands-Skala */
  --marketing-abstand-1: 4px;
  --marketing-abstand-2: 8px;
  --marketing-abstand-3: 12px;
  --marketing-abstand-4: 16px;
  --marketing-abstand-5: 20px;
  --marketing-abstand-6: 28px;
  --marketing-abstand-7: 36px;
  --marketing-abstand-8: 48px;
  --marketing-abstand-9: 64px;
  --marketing-abstand-10: 80px;
  --marketing-abstand-11: 112px;
  /* Radien */
  --marketing-radius-klein: 4px;
  --marketing-radius-mittel: 6px;
  --marketing-radius-gross: 10px;
  --marketing-radius-pill: 999px;
  /* Frühere Namen, nur noch als Verweis */
  --navy-100: var(--marketing-navy-100);
  --navy-200: var(--marketing-navy-200);
  --navy-300: var(--marketing-navy-300);
  --navy-400: var(--marketing-navy-400);
  --navy-500: var(--marketing-navy-500);
  --navy-600: var(--marketing-navy-600);
  --navy-700: var(--marketing-navy-700);
  --navy-800: var(--marketing-navy-800);
  --navy-900: var(--marketing-navy-900);
  --lime-100: var(--marketing-lime-100);
  --lime-200: var(--marketing-lime-200);
  --lime-300: var(--marketing-lime-300);
  --lime-400: var(--marketing-lime-400);
  --lime-500: var(--marketing-lime-500);
  --lime-600: var(--marketing-lime-600);
  --lime-700: var(--marketing-lime-700);
  --font-sans: var(--marketing-font-sans);
}

/* Rollen, Fläche invers: <section data-flaeche="invers"> */
[data-flaeche="invers"] {
  --marketing-flaeche: var(--marketing-navy);
  --marketing-text: #FFFFFF;
  --marketing-text-stark: #FFFFFF;
  --marketing-text-leise: var(--marketing-navy-200);
  --marketing-rand: var(--marketing-navy-500);
  --marketing-aktion: var(--marketing-lime);
  --marketing-aktion-text: var(--marketing-navy);
  --marketing-aktion-hover: var(--marketing-lime-400);
  --marketing-aktion-gedrueckt: var(--marketing-lime-300);
  --marketing-link: #FFFFFF;
  --marketing-link-hover: #FFFFFF;
  --marketing-fokus: var(--marketing-funktion-fokus-invers);
  --marketing-abdunkeln: var(--marketing-navy-900);
  --marketing-abdunkeln-text: #FFFFFF;
  --marketing-status-fehler: #FFFFFF;
}

/* Rollen, Fläche standard innerhalb einer anderen Fläche: <div data-flaeche="standard"> */
[data-flaeche="standard"] {
  --marketing-flaeche: var(--marketing-off-white);
  --marketing-text: var(--marketing-body-ink);
  --marketing-text-stark: var(--marketing-navy);
  --marketing-text-leise: var(--marketing-navy-400);
  --marketing-rand: var(--marketing-grey);
  --marketing-aktion: var(--marketing-navy);
  --marketing-aktion-text: #FFFFFF;
  --marketing-aktion-hover: var(--marketing-navy-800);
  --marketing-aktion-gedrueckt: var(--marketing-navy-900);
  --marketing-link: var(--marketing-navy);
  --marketing-link-hover: var(--marketing-navy);
  --marketing-fokus: var(--marketing-funktion-fokus);
  --marketing-status-fehler: var(--marketing-funktion-statustext-fehler);
  --marketing-abdunkeln: var(--marketing-navy-900);
  --marketing-abdunkeln-text: #FFFFFF;
}

/* Kern-Anschluss: Komponenten verwenden nur --kern-… */
:root, [data-flaeche] {
  --kern-flaeche: var(--marketing-flaeche);
  --kern-flaeche-erhoeht: var(--marketing-flaeche-erhoeht);
  --kern-text: var(--marketing-text);
  --kern-text-stark: var(--marketing-text-stark);
  --kern-text-leise: var(--marketing-text-leise);
  --kern-rand: var(--marketing-rand);
  --kern-rand-feld: var(--marketing-rand-feld);
  --kern-aktion: var(--marketing-aktion);
  --kern-aktion-text: var(--marketing-aktion-text);
  --kern-aktion-hover: var(--marketing-aktion-hover);
  --kern-aktion-gedrueckt: var(--marketing-aktion-gedrueckt);
  --kern-link: var(--marketing-link);
  --kern-link-hover: var(--marketing-link-hover);
  --kern-fokus: var(--marketing-fokus);
  --kern-status-info: var(--marketing-status-info);
  --kern-status-fehler: var(--marketing-status-fehler);
  --kern-status-warnung: var(--marketing-status-warnung);
  --kern-status-erfolg: var(--marketing-status-erfolg);
  --kern-abdunkeln: var(--marketing-abdunkeln);
  --kern-abdunkeln-text: var(--marketing-abdunkeln-text);
  --kern-radius-aktion: var(--marketing-radius-mittel);
  --kern-radius-karte: var(--marketing-radius-gross);
  --kern-radius-tag: var(--marketing-radius-pill);
  --kern-font: var(--marketing-font-sans);
}