/* GENERIERT aus wordpress/design-tokens.json — nicht von Hand ändern.
   Neu bauen: python3 wordpress/bin/baue-tokens.py */

:root {
  --hbl-s00: 8px;
  --hbl-s0: 16px;
  --hbl-s1: 24px;
  --hbl-s2: 32px;
  --hbl-s3: 48px;
  --hbl-s4: 64px;
  --hbl-s5: 96px;
  --hbl-s6: 128px;
  --hbl-s7: 192px;
  --hbl-spalte: 48px;
  --hbl-raum-sektion: var(--hbl-s6);
  --hbl-raum-kopf: var(--hbl-s4);
  --hbl-raum-vor-h2: var(--hbl-s4);
  --hbl-raum-vor-h3: var(--hbl-s3);
  --hbl-raum-medium: var(--hbl-s4);
  --hbl-raum-aktion: var(--hbl-s3);
  --hbl-raum-nach-titel: var(--hbl-s1);
  --hbl-raum-fluss: var(--hbl-s2);
  --hbl-raum-pfad: var(--hbl-s2);
  --hbl-raum-dach: 12px;
  --hbl-raum-nah: var(--hbl-s0);
  --hbl-raum-eng: var(--hbl-s00);
  --hbl-raum-raster-zeile: var(--hbl-s3);
  --hbl-raum-raster-spalte: var(--hbl-spalte);
  --hbl-raum-bild-text: var(--hbl-s1);
  --hbl-raum-polster: var(--hbl-s3);
  --hbl-inhalt: 1224px;
  --hbl-buehne: 1440px;
  --hbl-kopfzeile: 1200px;
  --hbl-lesebreite: 781px;
  --hbl-bildbreite: 1228px;
  --hbl-faktenbreite: 1024px;
  --hbl-team: 1224px;
  --hbl-karte: 400px;
  --hbl-kopf: 113px;
  --hbl-kopf-start: 184px;
  --hbl-kopf-klebt: 77px;
  --hbl-pfadleiste: 44px;
  --hbl-mega-panel: 325px;
  --hbl-hero-motiv-saeule: 369px;
  --hbl-hero-motiv-lp: 369px;
  --hbl-haarlinie: #354C66;
  --hbl-haarlinie-kraeftig: #2A333D;
  --hbl-linie-feld: #728294;
  --hbl-linie-leise: color-mix(in srgb, #354C66 22%, transparent);
  --hbl-zeichen-mitte: 0.825em;
  --hbl-text-weich: #354C66;
  --hbl-text-neben: #354C66;
  --hbl-radius: 12px;
  --hbl-radius-bild: 12px;
  --hbl-uebergang: 0.18s ease;
  --hbl-bild-zoom: 0.5s cubic-bezier(.2,.7,.3,1);
}

/* Eckenglaettung (Figma cornerSmoothing 1) — nur wo der Browser
   `corner-shape` kennt; sonst bliebe der doppelte Radius rund. */
@supports (corner-shape: superellipse(2)) {
  :root {
    --hbl-radius: 24px;
    --hbl-radius-bild: 24px;
    --hbl-ecke: superellipse(2.13);
  }
}

@media (max-width: 1024px) {
  :root {
    --hbl-s4: 56px;
    --hbl-s5: 80px;
    --hbl-s6: 96px;
    --hbl-s7: 144px;
    --hbl-spalte: 32px;
    --hbl-raum-fluss: var(--hbl-s1);
    --hbl-raum-raster-zeile: var(--hbl-s4);
    --hbl-raum-polster: var(--hbl-s3);
  }
}

@media (max-width: 599px) {
  :root {
    --hbl-s3: 40px;
    --hbl-s4: 48px;
    --hbl-s5: 64px;
    --hbl-s6: 72px;
    --hbl-s7: 112px;
    --hbl-spalte: 24px;
    --hbl-raum-fluss: var(--hbl-s1);
    --hbl-raum-raster-zeile: var(--hbl-s5);
    --hbl-raum-polster: var(--hbl-s2);
  }
}