/* ==========================================================================
   Theme (neutral)
   --------------------------------------------------------------------------
   Design tokens (custom properties), the same for every site. Font faces:
   Css/Global/fonts.css (separate, so old pages can load the tokens without
   the fonts: Css/Legacy/header-footer.css).
   The brand colors are neutral greys here: each site sets its own in
   Css/Brands/<theme>.css (site setting awsitepackage.theme, Layouts/Global.html).
   Design reference: PDF "LeibbrandWeb2026-20" (artboard 1360 px wide,
   content edge 85 px). Fluid values hit the layout at 1360 px.
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand colors, overridden per site (Css/Brands/*.css). Neutral fallback without brand theme.
     primary: accent (active / hover line, list markers, focus outline);
     primary / secondary / tertiary: colors of the RTE color picker ("Schriftfarbe") */
  --c-primary: #4a4a48;
  --c-secondary: #8c8c89;
  --c-tertiary: #c4c4c1;

  /* Neutral colors */
  --c-text: #1d1d1b;            /* text and dark button */
  --c-white: #fff;
  --c-line: #e3e3e1;            /* hairlines, dropdown border */
  --c-tint: #f5f5f4;            /* light hover background, light section background */
  --c-muted: #5f5f5c;           /* captions, secondary text (6.4:1 on white) */
  --c-badge: #9da4a8;           /* number circle (RTE style "Nummer im Kreis", PDF) */

  /* Typography */
  --ff-base: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-heading: "Roboto Serif", Georgia, "Times New Roman", serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Text scale: body 20px on desktop, the other sizes in proportion (values at 1360 px = RTE labels) */
  --fs-small: 0.9375rem;                                        /* 15px, UI: captions, eyebrow, small buttons */
  --fs-body: clamp(1.0625rem, 0.95rem + 0.36vw, 1.25rem);       /* 17 → 20px */
  --fs-text-small: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);      /* 15 → 16px, RTE "Text klein" */
  --fs-nav: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);           /* 16 → 17px */
  --fs-lead: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);            /* 19 → 24px, RTE "Text groß", intro text */
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Heading sizes, chosen in the RTE ("Schriftgröße", classes .fs-*). The heading level
     (h1–h6) only sets the meaning. Values at 1360 px = labels in Configuration/RTE/Default.yaml */
  --fs-m: clamp(1.375rem, 1.1rem + 0.75vw, 1.75rem);            /* 22 → 28px */
  --fs-l: clamp(1.625rem, 1.15rem + 1.45vw, 2.375rem);          /* 26 → 38px */
  --fs-xl: clamp(2rem, 1.2rem + 2.3vw, 3.25rem);                /* 32 → 50px, section title of the layout */
  --fs-xxl: clamp(2.5rem, 1.35rem + 3.6vw, 4.375rem);           /* 40 → 70px, like the header image */
  --fs-heading: var(--fs-xl);                                   /* default of every heading */
  --measure: 46rem;                                             /* readable line length (~70 characters at 20px) */
  --measure-wide: 60rem;                                        /* wide line length (~90 characters at 20px) */

  /* Layout */
  --container: 100rem;                                          /* 1600px */
  --gutter: clamp(1.25rem, 6.25vw, 5.3125rem);                  /* 85px at 1360 */

  /* Vertical rhythm */
  --space-section: clamp(3.5rem, 2rem + 5vw, 7rem);             /* between content elements (68px at 1360) */
  --space-tile: clamp(0.5rem, 1.1vw, 1rem);                     /* edge + gap of full-width image tiles (15px at 1360) */

  /* Header */
  --header-h-mobile: 4.5rem;    /* bar height below the desktop breakpoint */
  --tap: 2.75rem;               /* 44px minimum touch target */

  /* Misc */
  --shadow-soft: 0 6px 24px rgb(29 29 27 / 0.1);
  --transition: 0.25s ease;
}