/* Hanken Grotesk (SIL OFL) – lokal eingebunden, keine Verbindung zu Google */
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colors */
/* ============================================================
   metz group — Color tokens
   Source: Brandbook 2026, pp. 04 (Primärfarben) & 06 (Komplementärfarbe)
   ============================================================ */
:root {
  /* ---- Brand primitives (exact brandbook values) ---- */
  --mg-blue: #25368a;        /* Dunkelblau · Pantone 2736 C · rgb(37,54,139) */
  --mg-orange: #eb5f1c;      /* Komplementärfarbe · Pantone 1655 C · rgb(235,95,28) */
  --mg-white: #ffffff;       /* Pantone / paper white */
  --mg-black: #000000;
  --mg-cool-gray: #5a5a5a;   /* Pantone Cool Gray 10 C · rgb(90,90,90) */

  /* ---- Blue scale (derived tints / shades of --mg-blue) ---- */
  --mg-blue-950: #0d143a;
  --mg-blue-900: #141d4d;
  --mg-blue-800: #1b2868;
  --mg-blue-700: #1d2a6e;
  --mg-blue-600: #25368a;    /* = brand blue */
  --mg-blue-500: #3346a4;
  --mg-blue-400: #5a6bc0;
  --mg-blue-300: #93a0d6;
  --mg-blue-200: #c2c9ea;
  --mg-blue-100: #dfe3f4;
  --mg-blue-50:  #eef0f9;

  /* ---- Orange scale (derived from --mg-orange) ---- */
  --mg-orange-700: #a83c0d;
  --mg-orange-600: #cf4f12;  /* hover / pressed */
  --mg-orange-500: #eb5f1c;  /* = accent */
  --mg-orange-400: #f27f45;
  --mg-orange-300: #f7a67e;
  --mg-orange-200: #fbcbb3;
  --mg-orange-100: #fde3d4;
  --mg-orange-50:  #fef3ec;

  /* ---- Cool neutral scale (anchored on Cool Gray 10 C) ---- */
  --mg-gray-900: #1c1d1f;
  --mg-gray-800: #2f3033;
  --mg-gray-700: #44454a;
  --mg-gray-600: #5a5a5a;    /* = cool gray */
  --mg-gray-500: #74767c;
  --mg-gray-400: #9a9ca3;
  --mg-gray-300: #c4c6cc;
  --mg-gray-200: #e0e2e7;
  --mg-gray-150: #e9ebf0;
  --mg-gray-100: #f1f2f5;
  --mg-gray-50:  #f7f8fa;

  /* ---- Semantic aliases ---- */
  --color-brand: var(--mg-blue);
  --color-brand-strong: var(--mg-blue-800);
  --color-brand-soft: var(--mg-blue-50);
  --color-accent: var(--mg-orange);
  --color-accent-strong: var(--mg-orange-600);
  --color-accent-soft: var(--mg-orange-50);

  --text-primary: #12142b;       /* near-black with a blue cast */
  --text-secondary: var(--mg-gray-600);
  --text-muted: var(--mg-gray-500);
  --text-on-brand: var(--mg-white);
  --text-on-accent: var(--mg-white);
  --text-brand: var(--mg-blue);
  --text-link: var(--mg-blue);
  --text-link-hover: var(--mg-blue-800);

  --surface-page: var(--mg-white);
  --surface-subtle: var(--mg-gray-50);
  --surface-muted: var(--mg-gray-100);
  --surface-card: var(--mg-white);
  --surface-inverse: var(--mg-blue);
  --surface-inverse-strong: var(--mg-blue-900);

  --border-subtle: var(--mg-gray-200);
  --border-default: var(--mg-gray-300);
  --border-strong: var(--mg-gray-600);
  --border-brand: var(--mg-blue);

  /* ---- Status (kept within the restrained brand palette) ---- */
  --color-success: #2e7d55;
  --color-warning: var(--mg-orange-500);
  --color-danger:  #c0392b;
  --color-info:    var(--mg-blue-500);
}

/* typography */
/* ============================================================
   metz group — Typography tokens
   Source: Brandbook 2026, pp. 07-09
   House sans = Aptos (→ Hanken Grotesk sub). Body 10-12pt.
   Leitmotiv script = Segoe Script (→ Caveat sub).
   ============================================================ */
:root {
  /* ---- Families ---- */
  /* Real fonts listed first; substitutes ship for the web. */
  --font-sans: "Aptos", "Hanken Grotesk", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-body: "Aptos", "Hanken Grotesk", Tahoma, "Carlito", "Calibri", Arial, sans-serif;
  --font-alt-tahoma: Tahoma, "Hanken Grotesk", Arial, sans-serif;
  --font-alt-calibri: "Calibri", "Carlito", "Hanken Grotesk", Arial, sans-serif;
  --font-script: "Segoe Script", "Caveat", "Segoe Print", cursive;  /* leitmotiv only */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-heavy: 800; /* @kind font */

  /* ---- Type scale (px) ----
     Headings use the house sans, heavy, tight. Body sits at the
     brandbook's 10-12pt working range (~14-16px on screen). */
  --fs-display: 64px;   /* cover / hero */
  --fs-h1: 44px;        /* section titles e.g. "PRIMÄRFARBEN" */
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;      /* ~12pt */
  --fs-body-sm: 14px;   /* ~10.5pt */
  --fs-caption: 12px;
  --fs-overline: 12px;

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug: 1.35; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind other */
  --ls-heading: -0.01em; /* @kind other */
  --ls-body: 0; /* @kind other */
  --ls-overline: 0.18em; /* @kind other */

  /* ---- Composite semantic aliases ---- */
  --text-heading-family: var(--font-sans);
  --text-heading-weight: var(--fw-heavy);
  --text-body-family: var(--font-body);
}

/* spacing */
/* ============================================================
   metz group — Spacing & layout tokens
   4px base grid. Print margins from Brandbook p.12 kept as tokens.
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-14: 80px;
  --space-16: 96px;
  --space-20: 128px;

  /* Component paddings */
  --pad-control-x: 20px;
  --pad-control-y: 11px;
  --pad-card: 24px;
  --pad-section: 64px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: 24px;

  /* Print reference (Briefbogen, p.12) */
  --print-margin-top: 15mm;
  --print-margin-right: 20mm;
  --print-margin-side: 25mm;
  --print-margin-footer: 25mm;
}

/* effects */
/* ============================================================
   metz group — Effects: radii, borders, shadows, motion
   The brand is solid, calm and print-rooted: restrained radii,
   flat surfaces, minimal shadow. Nothing flashy.
   ============================================================ */
:root {
  /* ---- Radius ----
     Echoes the gently rounded corners of the logo's parallelogram bars. */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-thick: 2px;

  /* ---- Shadows (cool-gray based, low and quiet) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(18, 20, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 20, 43, 0.08), 0 1px 2px rgba(18, 20, 43, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 20, 43, 0.08);
  --shadow-lg: 0 12px 28px rgba(18, 20, 43, 0.12);
  --shadow-focus: 0 0 0 3px rgba(37, 54, 139, 0.28);
  --shadow-focus-accent: 0 0 0 3px rgba(235, 95, 28, 0.30);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.3, 0.7, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: var(--shadow-focus);
}