:root {
  --font-sans: "Museo Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Comfortaa", "Museo Sans", Arial, sans-serif;
}

@font-face { font-family: "Museo Sans"; font-weight: 100; font-style: normal; font-display: swap; src: url("/assets/fonts/MuseoSans-100.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/MuseoSans-300.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/MuseoSans-500.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/MuseoSans-700.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url("/assets/fonts/MuseoSans-900.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/Comfortaa-Light.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Comfortaa-Regular.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Comfortaa-Medium.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Comfortaa-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/Comfortaa-Bold.woff2") format("woff2"); }

:root {
  --q-black: #000000;
  --q-white: #ffffff;
  --q-dark: #4b4b4b;
  --q-medium: #bbbbbb;
  --q-bright: #e7e7e7;
  --q-highlight-1: #c6d31c;
  --q-highlight-2: #10314e;
  --q-highlight-3: #15a5b5;
  --q-highlight-4: #f1f2f2;
  --q-highlight-5: #8a1cb1;
  --fg-1: var(--q-dark);
  --fg-2: #767676;
  --fg-on-dark: var(--q-white);
  --surface: var(--q-white);
  --surface-soft: var(--q-highlight-4);
  --surface-muted: var(--q-bright);
  /* Das Zartgruen: die Flaeche, die "eingeschaltet, ausgewaehlt, hervorgehoben"
     bedeutet - Formularabschnitte, gewaehlte Auswahleintraege, aktive
     Sortierung, Zahlungsablesung, Dateiablage beim Ziehen, die
     Einzelheitenkaesten der Benachrichtigungen. Stand bis 2026-09-10
     sechsmal als roher Hexwert im Stylesheet, in zwei Schreibweisen
     (#F4F7EE und #f4f7ee). Text darauf traegt --q-dark: gemessen 8,05 : 1;
     --fg-2 faellt hier durch (4,19 : 1), es besteht nur auf reinem Weiss. */
  --surface-active: #f4f7ee;
  --divider-active: #e3ebd2;
  --divider: var(--q-bright);
  --focus-ring: var(--q-highlight-3);
  --success: #6fa31c;
  --warning: #e2a93b;
  --danger: #c04848;
  --info: var(--q-highlight-3);
  --font-sans: "Museo Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Comfortaa", "Museo Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --w-light: 300;
  --w-regular: 500;
  --w-bold: 700;
  --lh-normal: 1.5;
  --tracking-wide: 0.05em;
  --tracking-xwide: 0.1em;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 18px 52px rgba(0, 0, 0, 0.18);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  /* Oeffentliche Infoseiten (BAL-221), Werte wie im Referenzdesign
     docs/design/application/project/tokens.css. --shadow-card ist die
     Markenkarte, --shadow-elev der Schatten der schwebenden Containerkarte
     auf quantiz.at, --quantiz-ambience der wandernde Verlauf der
     Abschlussflaeche (Dauer --dur-amb). */
  --link: var(--q-highlight-2);
  --link-hover: var(--q-highlight-3);
  --shadow-card: 0 0 12px 0 rgba(0, 0, 0, 0.20);
  --shadow-elev: 0 0 6px 6px rgba(0, 0, 0, 0.20);
  --shadow-focus: 0 0 0 3px rgba(21, 165, 181, 0.35);
  --dur-amb: 30s;
  --quantiz-ambience: linear-gradient(270deg, #10314e, #15a5b5, #c6d31c, #f1f2f2);
}