/* Corporate Identity — Farben und Schrift laut CI.pdf.
 *
 * Schrift: DIN Pro ist lizenzpflichtig und darf nicht mitgeliefert werden.
 * Ausgeliefert wird deshalb Barlow Semi Condensed (SIL Open Font License) —
 * eine linear-groteske Schrift mit demselben technischen Charakter. Liegt eine
 * DIN-Pro-Lizenz vor, genügt es, die Dateien nach static/fonts/ zu legen und
 * die @font-face-Blöcke unten zu ergänzen; die Variable --font-sans nennt
 * "DIN Pro" bereits an erster Stelle und greift dann automatisch.
 *
 * Kursiv kommt in dieser Anwendung bewusst nirgends vor (siehe ganz unten).
 */

/* ---------------------------------------------------------------- Schrift */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-400-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-400-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-500-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-500-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-600-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-600-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-700-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: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-semicondensed-700-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;
}

/* ----------------------------------------------------------------- Farben */
:root {
  /* Original Gelb — Pantone 123, RAL 1023 Verkehrsgelb */
  --ci-yellow: #fec804;
  --ci-yellow-hover: #e5b400;
  --ci-yellow-dark: #e0b000;
  --ci-yellow-light: #fff8db;

  /* Original Schwarz — Pantone 426 */
  --ci-black: #000000;

  /* Blaue Grau-Töne, hell nach dunkel */
  --ci-grey-50: #edf1f4; /* Pantone 649 */
  --ci-grey-100: #dae1e4; /* Pantone 5455 */
  --ci-grey-200: #c3ced3; /* interpoliert */
  --ci-grey-400: #8fa1a9; /* interpoliert */
  --ci-grey-500: #798b95; /* Pantone 5425 */
  --ci-grey-700: #4a5e67; /* Pantone 5405 */

  /* Abgeleitete Flächen. Nicht in der CI, aber zwischen 5405 und Schwarz
     interpoliert, damit Navigation und Kopfzeile in derselben Familie bleiben. */
  --ci-grey-800: #37474e;
  --ci-grey-900: #253238;

  --font-sans: "DIN Pro", "Barlow Semi Condensed", "DIN Next", "Segoe UI",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas",
    monospace;
}

html,
body {
  font-family: var(--font-sans);
}

/* Alpine wird "defer" geladen: ohne diese Regel blitzen x-show-Blöcke bis zur
   Initialisierung kurz auf. */
[x-cloak] {
  display: none !important;
}

.brand-yellow {
  background-color: var(--ci-yellow);
}

/* Schmale, zurückhaltende Leisten — sie sollen die Fläche nicht teilen. */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--ci-grey-50);
}
::-webkit-scrollbar-thumb {
  background: var(--ci-grey-200);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ci-grey-400);
}

/* Zahlen in Tabellen und Formularen sollen untereinander stehen — bei einer
   schmalen Grotesk fällt eine wandernde Dezimalstelle sonst sofort auf. */
input[type="number"],
td.numeric,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Fokus einheitlich in Markengelb statt im Tailwind-Blau. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ci-yellow);
  outline-offset: 2px;
}

/* --------------------------------------------------------- Keine Kursive
 * Grundsatz der CI: Es wird nicht kursiv gesetzt. Browser setzen <em>, <i>,
 * <address>, <cite>, <dfn>, <var> und Legenden aber von sich aus schräg —
 * deshalb hier zurückgedreht. Betonung übernimmt das Schriftgewicht.
 */
em,
i,
cite,
dfn,
var,
address,
blockquote,
figcaption,
q {
  font-style: normal;
}
em,
i {
  font-weight: 600;
}