:root{
/* ── Brand core (Style Guide, Datenblatt Seite 2) ───────────────── */
--hm-hauptfarbe:#043054;      /* Hauptfarbe — primary navy */
--hm-graublau:#1F313F;        /* Sekundärfarbe — Graublau */
--hm-hellblau:#356084;        /* Sekundärfarbe — Hellblau */
--hm-hellgrau:#F8F8F8;        /* Background — Hellgrau */

/* ── Primary ramp (Hauptfarbe #043054) ─────────────────────────── */
--hm-primary-10:#E6EAEE;--hm-primary-20:#CDD6DD;--hm-primary-30:#B4C1CC;
--hm-primary-40:#9BACBB;--hm-primary-50:#8197A9;--hm-primary-60:#688398;
--hm-primary-70:#4F6E87;--hm-primary-80:#365976;--hm-primary-90:#1D4565;
--hm-primary-100:#043054;

/* ── Graublau ramp (Sekundär #1F313F) ──────────────────────────── */
--hm-graublau-10:#E9EAEC;--hm-graublau-20:#D2D6D9;--hm-graublau-30:#BCC1C5;
--hm-graublau-40:#A5ADB2;--hm-graublau-50:#8F989F;--hm-graublau-60:#79838C;
--hm-graublau-70:#626F79;--hm-graublau-80:#4C5A65;--hm-graublau-90:#354652;
--hm-graublau-100:#1F313F;

/* ── Hellblau ramp (Sekundär #356084) ──────────────────────────── */
--hm-hellblau-10:#EBEFF3;--hm-hellblau-20:#D7DFE6;--hm-hellblau-30:#C2CFDA;
--hm-hellblau-40:#AEBFCE;--hm-hellblau-50:#9AAFC1;--hm-hellblau-60:#86A0B5;
--hm-hellblau-70:#7290A9;--hm-hellblau-80:#5D809D;--hm-hellblau-90:#497090;
--hm-hellblau-100:#356084;

/* ── Neutrals ──────────────────────────────────────────────────── */
--hm-white:#FFFFFF;
--hm-grey-05:#F8F8F8;
--hm-grey-10:#EEEEEE;   /* news / teaser card fill */
--hm-grey-15:#EDEDED;
--hm-grey-60:#636363;   /* teaser copy */
--hm-ink:#1B1F23;       /* body copy */
--hm-ink-muted:#6A737D; /* captions, meta */
--hm-black:#000000;

/* ── Web-surface values measured on handel-mack.de ──────────────── */
--hm-band:#1B4263;      /* dark section band + footer */
--hm-hover-slate:#3D566B;  /* CTA hover on the navy hero */
--hm-hover-steel:#395772;  /* "Absenden" hover */
--hm-hover-link:#5C84A6;   /* link hover on navy surfaces */
--hm-signalblau:#066AAB;   /* "Absenden" in the menu panel */
--hm-tile:#1D486C;      /* icon tile on the navy hero */
--hm-accent:#ED7225;    /* orange — used only as a rare highlight */

/* ── Semantic aliases ──────────────────────────────────────────── */
--surface-page:var(--hm-white);
--surface-muted:var(--hm-grey-05);
--surface-card:var(--hm-white);
--surface-card-muted:var(--hm-grey-10);
--surface-inverse:var(--hm-hauptfarbe);
--surface-band:var(--hm-band);
--surface-accent:var(--hm-hellblau);
--surface-tile:var(--hm-tile);
--surface-topbar:var(--hm-hellblau);
--surface-footer:var(--hm-band);
--surface-footer-bottom:var(--hm-hauptfarbe);

--text-heading:var(--hm-hauptfarbe);
--text-body:var(--hm-ink);
--text-muted:var(--hm-ink-muted);
--text-kicker:var(--hm-hauptfarbe);
--text-on-inverse:var(--hm-white);
--text-on-inverse-muted:var(--hm-primary-20);
--text-link:var(--hm-hauptfarbe);
--text-link-hover:var(--hm-hellblau);
--text-link-hover-on-inverse:var(--hm-hover-link);

--border-subtle:var(--hm-grey-15);
--border-field:var(--hm-primary-20);
--border-tile:var(--hm-primary-30);
--border-on-inverse:rgba(255,255,255,.28);
--border-header-sticky:var(--hm-hellblau-30); /* hairline on the stuck header */

--button-fill:var(--hm-hauptfarbe);
--button-fill-hover:var(--hm-graublau);
--button-text:var(--hm-white);
--button-alt-fill:var(--hm-hellblau);
--button-alt-fill-hover:var(--hm-hover-slate);
--button-submit-fill:var(--hm-hellblau);
--fab-fill:var(--hm-hauptfarbe);
--fab-fill-hover:var(--hm-ink-muted);
--button-submit-fill-hover:var(--hm-hover-steel);
}