/* ========================================================================
   zweimeter • tokens-utilities.css • v0.7
   ======================================================================== */

/* ---------- 1) Fluid-Screen-Basis ---------- */
:root{
  /* Referenz-Breite minimal & maximal */
  --vw-min: 360;
  --vw-max: 1440;
}

/* ---------- 2) Farb-Tokens (deine Vorgaben) ---------- */
:root{
  --clr-primary-600: #0C71C3;
  --clr-primary-700: #061F5C;

  --clr-secondary-600: #2EA3F2;
  --clr-accent-600:    #E89C1A;

  --clr-text:          #2B2B2B;
  --clr-text-invert:   #FFFFFF;

  --clr-body:          #FFFFFF;
  --clr-body-ink:      var(--clr-text);
}

/* ---------- 3) Typo: Font-Stacks ---------- */
:root{
  --ff-sans: "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
  --ff-deco: "Rock Salt", Ubuntu, Montserrat, Arial, sans-serif;
}

/* ---------- 4) Typo-Scale (fluid clamp) ----------
   Werte sind praxisnah abgestuft; passe min/max gern an.
--------------------------------------------------- */
:root{
  /* Body/Copy-Basis */
  --fs-300: clamp(14px,  0.92rem + 0.00vw, 14px);
  --fs-400: clamp(16px,  0.95rem + 0.30vw, 18px);
  --fs-500: clamp(18px,  1.05rem + 0.55vw, 22px);

  /* Subheads / Section-Titel */
  --fs-600: clamp(22px,  1.20rem + 0.90vw, 28px);
  --fs-700: clamp(26px,  1.40rem + 1.40vw, 34px);

  /* H1/Hero */
  --fs-800: clamp(32px,  1.60rem + 2.00vw, 42px);
  --fs-900: clamp(38px,  1.80rem + 2.80vw, 52px);
  /* optional: Extra-Groß für echte Hero-Headlines */
  --fs-950: clamp(42px,  2.20rem + 3.60vw, 64px);
}
/* ==== Text-Preset Tokens (robuste Defaults) ==== */
:root{
  /* Farben – mit Fallbacks */
  --clr-body: #2B2B2B;
  --clr-muted: #5f6b7a;

  /* Grundgrößen aus deiner Skala referenzieren */
  --fs-body: var(--fs-400);
  --fs-lead: var(--fs-500);
  --fs-meta: var(--fs-300);
  --fs-cta:  var(--fs-400);

  /* Zeilenhöhen & Letterspacing */
  --lh-body:  var(--lh-normal, 1.6);
  --lh-lead:  1.55;
  --lh-meta:  1.35;
  --lh-cta:   1.1;

  --ls-body:  0;
  --ls-lead:  0;
  --ls-meta:  .06em;  /* feines Tracking für Meta */
  --ls-cta:   .02em;

  /* Button-Design-Tokens */
  --btn-radius: var(--radius-md, .5rem);
  --btn-py: .75rem;
  --btn-px: 1.25rem;
  --btn-gap: .5rem;
  --btn-shadow: var(--shadow-1, none);

  /* Fallback-Farben (werden von deinen Brand-Tokens überschrieben) */
  --clr-primary-600: #1d4ed8;  /* blau */
  --clr-primary-700: #1e40af;
  --clr-primary-50:  #eff6ff;
  --clr-accent-600:  #f59e0b;  /* orange */
  --clr-accent-700:  #b45309;
}


/* ---------- 5) Line-Height & Letter-Spacing ---------- */
:root{
  /* Line-Heights */
  --lh-tight:   1.12;
  --lh-normal:  1.6;
  --lh-loose:   1.7; /* belassen, falls benötigt */

  /* Letter-Spacing (em) */
  --ls-tight:   0;
  --ls-normal:  0;
}

/* ---------- 6) Body-Basis & Lesbarkeit ---------- */
html{ scroll-behavior:smooth; }

body{
  background: var(--clr-body);
  color: var(--clr-body-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 6a) Canvas-Scope für Divi-Frontend ---------- */
:where(#et-boc, #page-container){
  font: 400 var(--fs-400)/var(--lh-normal) "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
  color: var(--clr-body, #2B2B2B);
}


/* ---------- 7) Globale Headings (HTML & Gutenberg) ---------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--ff-sans);
  color: var(--clr-primary-700);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em 0;
}
h1{ font-size: var(--fs-900); line-height: var(--lh-tight); }
h2{ font-size: var(--fs-800); line-height: var(--lh-tight); }
h3{ font-size: var(--fs-700); }
h4{ font-size: var(--fs-600); }
h5{ font-size: var(--fs-500); }
h6{ font-size: var(--fs-400); }

/* Optional: Hero-Kontext stärker skalieren */
.wrapper.hero h1{ font-size: var(--fs-950); }

/* ---------- 8) Divi 5: Typo-Fix (ohne px) ----------
   Wir neutralisieren statische px aus Presets/Customizer
   und geben strikt die Tokens vor.
--------------------------------------------------- */

/* Textmodule auf Body-Scale */
:root .et_pb_text,
:root .et_pb_text_inner{
  font-size: var(--fs-400) !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
}

/* Headings in Divi-Modulen */
:root [class*="et_pb_heading_"] .et_pb_heading_container h1,
:root .et_pb_title_container h1,
:root .et_pb_fullwidth_header h1,
:root .et_pb_slide_title{
  font-size: var(--fs-900) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
}
:root [class*="et_pb_heading_"] .et_pb_heading_container h2{ font-size: var(--fs-800) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h3{ font-size: var(--fs-700) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h4{ font-size: var(--fs-600) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h5{ font-size: var(--fs-500) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h6{ font-size: var(--fs-400) !important; }

/* Canvas-Scope: nur im Inhalts-Canvas, nicht in der Divi-UI */
:where(#et-boc, #page-container, .et-l, .et_builder_inner_content)
  .wrapper.hero
  :where([class*="et_pb_heading_"] .et_pb_heading_container h1){
  font-size: var(--fs-950) !important;
}

:where(#et-boc, #page-container, .et-l, .et_builder_inner_content)
  :where([class*="et_pb_heading_"] .et_pb_heading_container h1,
         [class*="et_pb_heading_"] .et_pb_heading_container h2,
         [class*="et_pb_heading_"] .et_pb_heading_container h3,
         [class*="et_pb_heading_"] .et_pb_heading_container h4,
         [class*="et_pb_heading_"] .et_pb_heading_container h5,
         [class*="et_pb_heading_"] .et_pb_heading_container h6){
  font-weight: inherit;
}


/* Kill inline px (falls einzelne Module per UI hart verdrahtet wurden) */
:root [class*="et_pb_heading_"] .et_pb_heading_container [style*="font-size"],
:root .et_pb_text_inner[style*="font-size"]{
  font-size: inherit !important;
}

/* === Font-Families (änderbar pro Projekt) === */
:root{
  /* Standard-Defaults – dürfen pro Site geändert/überschrieben werden */
  --ff-head-a: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* z.B. H1/H3/H5 */
  --ff-head-b: "Rock Salt", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;      /* z.B. H2/H4/H6 */
  --ff-body:   "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Optional: Gewicht-Defaults (lassen sich pro Projekt ändern) */
  --fw-head-strong: 800;
  --fw-head-regular: 400;
}

/* Globale Zuweisung (nur über Variablen!) */
body{ font-family: var(--ff-body); }