/* ==========================================================================
   MF Security – Design-Tokens
   Leitmotiv „Präsenz & Klarheit“: Nachtflächen, Eventlicht, ein Signal-Rot.
   Akzentfarbe: Signal-Rot (Vorgabe des Auftraggebers). Das Logo selbst ist
   schwarz/grau ohne Akzent.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
}

/* Metrik-angepasster Fallback gegen Layout-Sprünge beim Font-Swap */
@font-face {
  font-family: "Barlow Condensed Fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 82%;
  ascent-override: 118%;
  descent-override: 30%;
}
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial");
  size-adjust: 94%;
  ascent-override: 100%;
  descent-override: 20%;
}

:root {
  /* --- Farbe -------------------------------------------------------------- */
  --night: #0D0F12;
  --anthracite: #171A1F;
  --graphite: #2A2F37;
  --graphite-soft: #22262D;
  --fog: #9AA1AB;           /* Sekundärtext auf Dunkel (7.4:1 auf --night) */
  --mist: #C9CDD3;          /* Fließtext auf Dunkel */
  --white: #F7F6F3;         /* Off-White für Headlines auf Dunkel */
  --paper: #F4F3F0;
  --paper-deep: #EAE8E3;
  --rule: #D6D3CC;          /* Linien auf hellem Grund */
  --ink: #121418;           /* Text auf hell */
  --ink-soft: #4B515B;      /* Sekundärtext auf hell (7.3:1 auf --paper) */
  --signal: #D2352B;        /* Akzent-Fläche: CTAs, Badges, Tags (Text darauf: --on-signal, 4.7:1) */
  --signal-strong: #B32A21; /* Hover auf roten Flächen, Lanyard-Streifen */
  --signal-glow: #EC5246;   /* Rot als Text, Icon, Fokus auf Dunkel (5.4:1 auf --night) */
  --signal-ink: #B3261E;    /* Rot als Text, Icon auf Hell (5.9:1 auf --paper) */
  --on-signal: #FFF8F5;     /* Text auf roten Flächen */
  --danger: #E5484D;
  --danger-ink: #B4232A;
  --ok: #3DB46D;

  /* --- Typografie ---------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.9rem, 1.4rem + 6.4vw, 6rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.8vw, 3.75rem);
  --fs-h3: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  --fs-h4: clamp(1.2rem, 1.08rem + .5vw, 1.45rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .75rem;

  --lh-tight: .94;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --track-label: .16em;

  /* --- Raum ---------------------------------------------------------------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.4rem + 4vw, 6rem);
  --section: clamp(4.5rem, 2.8rem + 6.5vw, 9rem);
  --gutter: clamp(1rem, .4rem + 3vw, 3rem);
  --container: 1320px;
  --measure: 65ch;
  --header-h: 72px;

  /* --- Form ---------------------------------------------------------------- */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --line: 1px solid var(--graphite);
  --line-light: 1px solid var(--rule);
  --shadow-s: 0 1px 2px rgb(13 15 18 / .06), 0 2px 8px rgb(13 15 18 / .06);
  --shadow-m: 0 8px 24px -6px rgb(13 15 18 / .28), 0 2px 6px rgb(13 15 18 / .12);
  --shadow-badge: 0 24px 48px -18px rgb(0 0 0 / .65), 0 4px 12px rgb(0 0 0 / .25);

  /* --- Bewegung ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-reveal: 420ms;
  --dur-slow: 600ms;

  /* --- Ebenen -------------------------------------------------------------- */
  --z-base: 1;
  --z-header: 50;
  --z-actionbar: 40;
  --z-menu: 80;
  --z-lightbox: 90;
  --z-skip: 100;

  /* --- Einheitlicher Bild-Grade (Eigen- und Stockmaterial) ----------------- */
  --grade: saturate(.9) contrast(1.05);
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}