/* =========================================================
   tokens.css – Farben und Schriften (je Kunde austauschen)
   Templates Ulf Meyer · Stand 10/2026
   Farbschema:  <html data-scheme="taupe | petrol | salbei | dunkelrot | rot | orange | gruen | dunkelblau | magenta">
   Schriftpaar: <html data-fonts="montserrat | serif | rund">
   Für ein Kundenprojekt: nur das benötigte Schema und Schriftpaar
   behalten, die anderen @font-face-Regeln löschen.
   ========================================================= */

/* ---------- Schriftpaar 1: Montserrat / Open Sans (Standard) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-italic.woff2") format("woff2")}

/* ---------- Schriftpaar 2: Lora / Source Sans 3 (Serif) ---------- */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lora-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/lora-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2")}

/* ---------- Schriftpaar 3: Nunito / Nunito Sans (rund) ---------- */
@font-face{font-family:"Nunito";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/nunito-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/nunito-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/nunito-sans-latin-400-italic.woff2") format("woff2")}

:root{
  /* Farbschema Taupe (Original ulf-meyer.com) */
  --color-accent:#a28e7c;        /* Eyebrows, Icons, Linien, sekundäre Buttons, Flächen */
  --color-accent-dark:#8a7766;   /* Hover, dunkle Bänder (Kennzahlen flach, Logos, CTA-Band) */
  --color-accent-light:#f3efeb;  /* getönte Sektionen, Chips, Infoboxen, Platzhalter */
  --color-ink:#2a2a2a;           /* Überschriften, primärer Button, Menü */
  --color-text:#4a4644;          /* Fließtext */
  --color-muted:#8b8380;         /* Nebeninfos, Bildunterschriften, Topbar */
  --color-line:#e6e1dc;          /* Linien, Rahmen */
  --color-white:#ffffff;
  --color-black:#111111;         /* Footer */
  --color-footer-text:#b5aea9;
  --color-footer-link:#ddd5cf;

  /* Schriftpaar Montserrat / Open Sans */
  --font-head:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --fw-light:300;                /* Hero-/Seitenkopf-H1 */
  --head-case:uppercase;         /* Überschriften in Versalien */
  --head-tracking:.02em;
}

/* Branchen-Schemata: Primärfarbe für Buttons, Logo und Footer; Sekundärfarbe (hell, z. B. Sand oder Grau) für Flächen; dunkler Ton für Text und zweite Buttons */
/* Farbschema Petrol */
:root[data-scheme="petrol"]{
  --color-accent:#4f7c86;
  --color-accent-dark:#3e6670;
  --color-accent-light:#f5f0e8;
  --color-text:#434a4c;
  --color-muted:#7d8689;
  --color-line:#e6dfd3;
  --color-ink:#2a2a2a;
  --btn-bg:#4f7c86;
  --btn-bg-hover:#3e6670;
  --btn2-bg:#2a2a2a;
  --btn2-bg-hover:#000;
  --footer-bg:#2f4d54;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#2f4d54;
}
/* Farbschema Salbei */
:root[data-scheme="salbei"]{
  --color-accent:#7f8f74;
  --color-accent-dark:#68775e;
  --color-accent-light:#f6f1e7;
  --color-text:#464a43;
  --color-muted:#83887f;
  --color-line:#e6dfd2;
  --color-ink:#2a2a2a;
  --btn-bg:#68775e;
  --btn-bg-hover:#55624d;
  --btn2-bg:#2a2a2a;
  --btn2-bg-hover:#000;
  --footer-bg:#4a5543;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#4a5543;
}

/* Farbschema Dunkelrot */
:root[data-scheme="dunkelrot"]{
  --color-accent:#8e2f2f;
  --color-accent-dark:#742424;
  --color-accent-light:#f1f1f0;
  --color-text:#4a4242;
  --color-muted:#8a7f7f;
  --color-line:#e2e2e0;
  --color-ink:#2f3236;
  --btn-bg:#8e2f2f;
  --btn-bg-hover:#742424;
  --btn2-bg:#2f3236;
  --btn2-bg-hover:#000;
  --footer-bg:#742424;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#742424;
}
/* Farbschema Rot */
:root[data-scheme="rot"]{
  --color-accent:#c0392b;
  --color-accent-dark:#a02f23;
  --color-accent-light:#efefee;
  --color-text:#4a4342;
  --color-muted:#8b8180;
  --color-line:#e0e0de;
  --color-ink:#33363a;
  --btn-bg:#c0392b;
  --btn-bg-hover:#a02f23;
  --btn2-bg:#33363a;
  --btn2-bg-hover:#000;
  --footer-bg:#a02f23;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#a02f23;
}
/* Farbschema Orange */
:root[data-scheme="orange"]{
  --color-accent:#c25e1d;
  --color-accent-dark:#a34e17;
  --color-accent-light:#f1f1f0;
  --color-text:#4a4541;
  --color-muted:#8b827c;
  --color-line:#e2e2e0;
  --color-ink:#33363a;
  --btn-bg:#c25e1d;
  --btn-bg-hover:#a34e17;
  --btn2-bg:#33363a;
  --btn2-bg-hover:#000;
  --footer-bg:#a34e17;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#a34e17;
}
/* Farbschema Grasgrün */
:root[data-scheme="gruen"]{
  --color-accent:#4f8a2e;
  --color-accent-dark:#3f7124;
  --color-accent-light:#f5efe3;
  --color-text:#434a40;
  --color-muted:#7f887b;
  --color-line:#e7dfcf;
  --color-ink:#2a2a2a;
  --btn-bg:#4f8a2e;
  --btn-bg-hover:#3f7124;
  --btn2-bg:#2a2a2a;
  --btn2-bg-hover:#000;
  --footer-bg:#3f7124;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#3f7124;
}
/* Farbschema Dunkelblau */
:root[data-scheme="dunkelblau"]{
  --color-accent:#22406b;
  --color-accent-dark:#183256;
  --color-accent-light:#f8f3eb;
  --color-text:#41464e;
  --color-muted:#7c838d;
  --color-line:#ebe3d6;
  --color-ink:#232a33;
  --btn-bg:#22406b;
  --btn-bg-hover:#183256;
  --btn2-bg:#232a33;
  --btn2-bg-hover:#000;
  --footer-bg:#22406b;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#22406b;
}
/* Farbschema Magenta */
:root[data-scheme="magenta"]{
  --color-accent:#a8306b;
  --color-accent-dark:#8b2658;
  --color-accent-light:#f3f1ef;
  --color-text:#4a4247;
  --color-muted:#8a7f86;
  --color-line:#e4e0dc;
  --color-ink:#2f2b30;
  --btn-bg:#a8306b;
  --btn-bg-hover:#8b2658;
  --btn2-bg:#2f2b30;
  --btn2-bg-hover:#000;
  --footer-bg:#8b2658;
  --color-footer-text:rgba(255,255,255,.78);
  --color-footer-link:#fff;
  --footer-icon:rgba(255,255,255,.85);
  --footer-logo-bg:#fff;
  --footer-logo-fg:#8b2658;
}

/* Schriftpaar Serif */
:root[data-fonts="serif"]{
  --font-head:"Lora",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --fw-light:400;                /* Lora hat keinen 300er-Schnitt */
  --head-tracking:.04em;
}
/* Schriftpaar rund */
:root[data-fonts="rund"]{
  --font-head:"Nunito","Helvetica Neue",Arial,sans-serif;
  --font-body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --head-tracking:.03em;
}