/* Porto supplies fonts and primary colour; remaining tokens describe the design. */
/* =====================================================================
   Bendex – Design Tokens (einzige Quelle für Farbe, Typo, Raum, Form, Bewegung)
   Abgeleitet aus den Figma-Mockups (M1–M4) + Markenskala OKLCH 250,2.
   WordPress: Porto Theme Options (Primär #27486D) + Child-Theme-CSS-Variablen.
   ===================================================================== */
body {
  /* Farbe */
  --bx-primary: var(--porto-primary-color, #27486d);
  --bx-primary-strong: #1c354e;
  --bx-night: #0c1e36;
  --bx-night-2: #13294a;
  --bx-ink: #0f2034;
  --bx-text: #3e4a5c;
  --bx-text-soft: #6a7385;
  --bx-white: #fff;
  --bx-paper: #f1f0eb;
  --bx-paper-2: #e8e6df;
  --bx-paper-line: #dedbd2;
  --bx-mist: #eef2f6;
  --bx-mist-2: #e3e9f0;
  --bx-mist-line: #dce3eb;
  --bx-brand-50: #e8f3ff;
  --bx-brand-100: #d3e1f0;
  --bx-brand-200: #abbed3;
  --bx-brand-300: #839cb6;
  --bx-brand-400: #5d7b9a;
  --bx-new: #2baab1;
  --bx-ok: #1a8f63;
  --bx-warn: #b26a00;
  --bx-warn-bg: #fff4e0;
  --bx-error: #b3261e;
  --bx-galv: #bec5cd;
  --bx-ral7016: #383e44;

  /* Flächen-Kontext (wird pro Sektion umgeschaltet) */
  --bx-surface: var(--bx-white);
  --bx-line: var(--bx-mist-line);
  --bx-on-surface: var(--bx-text);
  --bx-on-surface-strong: var(--bx-ink);
  --bx-on-surface-soft: var(--bx-text-soft);
  --bx-raise: var(--bx-white);

  /* Typografie */
  --bx-font: var(--porto-body-ff, Gilroy), "Segoe UI", system-ui, sans-serif;
  --bx-fs-display: clamp(44px, 5.6vw, 80px);
  --bx-fs-h1: clamp(40px, 4.4vw, 64px);
  --bx-fs-h2: clamp(31px, 3.4vw, 48px);
  --bx-fs-h3: clamp(21px, 2vw, 28px);
  --bx-fs-h4: clamp(18px, 1.4vw, 20px);
  --bx-fs-lead: clamp(18px, 1.4vw, 20px);
  --bx-fs-body: 17px;
  --bx-fs-small: 14px;
  --bx-fs-eyebrow: 12px;

  /* Raum */
  --bx-s-1: 4px; --bx-s-2: 8px; --bx-s-3: 12px; --bx-s-4: 16px; --bx-s-5: 24px; --bx-s-6: 32px;
  --bx-s-7: 48px; --bx-s-8: 64px; --bx-s-9: 96px; --bx-s-10: 128px; --bx-s-11: 160px;
  --bx-section: clamp(64px, 9vw, 128px);
  --bx-container: 1280px;
  --bx-gutter: clamp(16px, 2.5vw, 32px);
  --bx-header-h: 76px;
  --bx-bar-h: 34px;

  /* Form */
  --bx-r-xs: 2px; --bx-r-s: 4px; --bx-r-m: 8px; --bx-r-l: 12px; --bx-r-pill: 999px;
  --bx-shadow-pop: 0 24px 48px -24px rgb(12 30 54 / .28), 0 2px 6px rgb(12 30 54 / .05);
  --bx-shadow-lift: 0 18px 36px -22px rgb(12 30 54 / .35);
  --bx-focus: 0 0 0 2px var(--bx-white), 0 0 0 4px var(--bx-primary);

  /* Bewegung */
  --bx-dur-1: 120ms; --bx-dur-2: 200ms; --bx-dur-3: 320ms; --bx-dur-4: 560ms; --bx-dur-5: 900ms;
  --bx-ease-out: cubic-bezier(.22, 1, .36, 1);
  --bx-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --bx-ease-draw: cubic-bezier(.45, 0, .2, 1);
  --bx-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --bx-stagger: 60ms;
  --bx-rise: 16px;

  /* Ebenen */
  --bx-z-header: 100; --bx-z-mega: 110; --bx-z-drawer: 120; --bx-z-dialog: 200;
}
@media (max-width: 1023px) { body { --bx-header-h: 64px; } }