/* ==========================================================================
   Quantiz® Design System — Colors & Type
   --------------------------------------------------------------------------
   Quantiz® e.U. | Dominik Klauser
   "Neue IT-Technologien, digitale Trends und innovative Lösungen"
   Moderne Eleganz, minimalistisch, hohe Übersichtlichkeit, vornehme Zurückhaltung.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */

/* Museo Sans — primary brand sans, 100/300/500/700/900 */
@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");
}

/* Comfortaa — display / "highlight 4" rounded geometric */
@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");
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* Brand color profile — taken verbatim from production CSS variables.
     `highlight_1` is the signature lime; navy + petrol are the cool support;
     bright/medium/dark form the neutral grayscale. */
  --q-black:        #000000;
  --q-white:        #FFFFFF;
  --q-transparent:  rgba(0, 0, 0, 0);

  --q-dark:         #4B4B4B; /* primary text on white — 8,72:1 */

  /* --q-medium hiess im Kommentar "secondary text, borders" und war #BBBBBB.
     Als Textfarbe ergab das 1,92:1 auf Weiss und 1,71:1 auf #F1F2F2 -- Soll
     ist 4,5:1. Gemessen lagen 110 von 256 Textvorkommen des Lagebilds unter
     dem Sollwert, und diese eine Farbe trug den groessten Teil davon: Neben-
     texte, Spaltenkoepfe, Feldbeschriftungen (T-123, Befund A11Y-008).

     Die beiden Verwendungen sind jetzt getrennt. Der Name --q-medium bleibt
     bei der *Textfarbe*, weil sie 212-mal so verwendet wurde und 54-mal als
     Linie: So faellt jede vergessene Stelle auf die sichere Seite. Fuer
     Trennlinien greift 1.4.3 nicht, dort bleibt der helle Ton. */
  --q-medium:       #6B6B6B; /* secondary text — gemessen 5,33:1 auf Weiss, 4,75:1 auf #F1F2F2, 5,11:1 auf #FAFAFA */
  --q-linie:        #BBBBBB; /* Trennlinien und Flaechen — kein Text */
  --q-bright:       #E7E7E7; /* faint dividers, soft chrome */

  --q-highlight-1:  #C6D31C; /* Quantiz lime — primary brand */
  --q-highlight-2:  #10314E; /* deep navy — accent / link */
  --q-highlight-3:  #15A5B5; /* petrol/teal — Flaechen, Fokusringe, Rahmen */
  /* Textfarbe des Petroltons — **auf ausdrueckliche Entscheidung wieder der
     helle Ton** (T-144).

     T-124 hatte ihn wegen A11Y-008 auf #0E6E79 abgedunkelt: Als Textfarbe
     ergibt #15A5B5 nur 2,97:1 auf Weiss, gegen einen Sollwert von 4,5:1. Die
     Auftraggeberin hat das Ergebnis gesehen und den abgedunkelten Ton
     abgelehnt; die Kontrastabweichung ist bewusst in Kauf genommen und in
     qa/2026-08-21/befunde-barrierefreiheit.md unter A11Y-008 als angenommene
     Einschraenkung vermerkt.

     Die Variable bleibt bestehen und wird nicht durch #15A5B5 an 55 Stellen
     ersetzt: So ist die Entscheidung an *einer* Stelle sichtbar und laesst
     sich mit einem Wert zuruecknehmen, falls sie neu getroffen wird. */
  --q-highlight-3-text: #15A5B5; /* 2,97:1 auf Weiss — bewusst unter dem Sollwert */
  --q-highlight-4:  #F1F2F2; /* off-white / page wash */
  --q-highlight-5:  #8A1CB1; /* purple — used very sparingly */

  /* Semantic aliases */
  --fg-1:           var(--q-dark);
  --fg-2:           var(--q-medium);
  --fg-on-dark:     var(--q-white);
  --link:           var(--q-highlight-2);
  --link-hover:     var(--q-highlight-3);
  --brand:          var(--q-highlight-1);
  --brand-dark:     var(--q-highlight-2);
  --accent:         var(--q-highlight-3);
  --surface:        var(--q-white);
  --surface-soft:   var(--q-highlight-4);
  --surface-muted:  var(--q-bright);
  --divider:        var(--q-bright);
  --focus-ring:     var(--q-highlight-3);
  /* Zweite, kontrasttragende Lage des Fokusbildes (T-216).
     Vorgabe `transparent`: Wo die erste Lage den Kontrast selbst traegt --
     Petrol 2,97:1 auf Weiss --, gibt es nichts zu unterlegen, und jede Regel,
     die diese Lage mitfuehrt, sieht draussen genauso aus wie bisher.
     Gesetzt wird sie nur im Dialog, wo die Fokusfarbe auf ausdrueckliche
     Entscheidung die Limette ist (1,65:1 auf Weiss, siehe app.css). */
  --focus-kontur:   transparent;

  /* Status (extrapolated harmoniously — flag in README) */
  /* Die Statusfarben sind Flaechenfarben. Als *Text* auf hellem Grund lagen
     sie durchweg unter dem Sollwert: Gelb 2,11:1 auf Weiss und 1,87:1 auf der
     eigenen Pille, Gruen 2,70:1, Rot 3,93:1 (T-123, Befund A11Y-008).
     Deshalb je ein eigener Wert fuer Text, abgedunkelt bis 4,5:1 -- die
     Flaeche bleibt unveraendert, damit das Erscheinungsbild traegt. */
  --success:        #6FA31C;
  --warning:        #E2A93B;
  --danger:         #C04848;
  --success-text:   #4A6D13; /* gemessen 6,02:1 auf Weiss, 5,37:1 auf #EEF5DC */
  --warning-text:   #8A6410; /* gemessen 5,37:1 auf Weiss, 4,78:1 auf #FBF1D8 */
  --danger-text:    #A03434; /* gemessen 6,92:1 auf Weiss, 5,51:1 auf #F8E0E0 */
  --info:           var(--q-highlight-3);
  --status-crit-soft:   #F8E0E0;
  --status-crit-border: #F0C0C0;

  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --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;

  /* Weight tokens (Museo Sans actually ships 100/300/500/700/900) */
  --w-thin:    100;
  --w-light:   300;
  --w-regular: 500;
  /* --w-medium (T-309): Der Referenzentwurf führt es mit 500; app.css benutzt es
     in 21 Regeln (Einstellungsnavigation, Reiter, Detailreiter, Auswahllisten,
     Zuständigkeiten …), es fehlte aber hier. Eine Regel mit undefinierter
     Variable setzt kein Gewicht — gemessen erbten diese Elemente 300 (light). */
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* Type scale — minor third, body anchored at 16px */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;     /* body */
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-28:  1.75rem;
  --fs-32:  2rem;     /* h2 */
  --fs-40:  2.5rem;
  --fs-48:  3rem;     /* h1 */
  --fs-64:  4rem;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-xwide:  0.10em;
  --tracking-display: 0.10em; /* Comfortaa display tracking */

  /* ── Radius & spacing ──────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  40px;  /* default brand radius */
  --radius-pill: 999px;
  --radius-circle: 50%;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Höhe der Bedienelemente einer Werkzeugleiste (T-249): Suchfeld,
     Filter-/Sortierknöpfe, Ansichtsumschalter, Schnellfilter. Vorher ergab
     sich jede Höhe aus Innenabstand und Inhalt — gemessen 45, 42, 40 und
     36 px nebeneinander in derselben Zeile. 40 px ist die Höhe, die der
     Ansichtsumschalter schon hatte (30 px Knöpfe, 4 px Innenabstand, Rand). */
  --tb-hoehe: 40px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-card:    0 0 12px 0 rgba(0, 0, 0, 0.20);  /* signature brand card */
  --shadow-soft:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-elev:    0 0 6px 6px rgba(0, 0, 0, 0.20);  /* container shadow on quantiz.at */
  --shadow-text:    0 0 12px rgba(0, 0, 0, 0.20);
  /* Der Schein des Fokus — **weich und ausfadend seit T-221**, vorher ein
     harter Ring von 3 px (`0 0 0 3px rgba(21, 165, 181, 0.35)`). Der Dialog
     hatte diese Form in T-218 bekommen; der Auftraggeber wollte sie auch
     draussen, „nur eben in der Petrolfarbe". Damit unterscheiden sich drinnen
     und draussen nur noch in **einem** Wert, und das ist die Farbe.
     Die 1 px Spread setzen ihn unmittelbar an den Rahmen: Ohne sie entstuende
     der weisse Spalt, den T-178 beseitigt hat. */
  --shadow-focus:   0 0 6px 1px color-mix(in srgb, var(--q-highlight-3) 70%, transparent);
  /* Anhebung einer **anklickbaren Kachel** beim Ueberfahren. Zusammen mit
     `border-color: var(--q-highlight-3)` ist das die eine Hover-Sprache der
     Kachelgitter (T-149). Bis dahin standen dafuer vier verschiedene Werte
     einzeln im Stylesheet: 0 6px 18px/0.08 (.tile, .sp-card),
     0 4px 16px/0.10 (.kpi.kpi-link) und 0 4px 16px/0.08 (.gl-tile) -- auf dem
     Lagebild sogar zwei davon nebeneinander. Uebernommen wurde der Wert der
     beiden grossen Kachelgitter. Nicht zu verwechseln mit --shadow-soft: das
     ist eine ruhende Anhebung, keine Reaktion auf den Zeiger. */
  --shadow-karte-hover: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;
  --dur-amb:   30s; /* ambient gradient animation length */

  /* ── Signature gradient (rare, used as background or knockout fill) ── */
  --quantiz-ambience: linear-gradient(270deg, #10314e, #15a5b5, #c6d31c, #f1f2f2);
}

/* ── Element defaults ────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  letter-spacing: 0; /* light/airy; brand sets letter-spacing only on display + small caps */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .q-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--q-dark);
  margin: 0;
}

h2, .q-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  color: var(--q-highlight-3); /* signature petrol headline */
  margin: 0;
}

h3, .q-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--q-dark);
  margin: 0;
}

h4, .q-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--q-dark);
  margin: 0;
}

p, .q-p {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--q-dark);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

small, .q-small {
  font-size: var(--fs-14);
  color: var(--q-medium);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow / label — uppercase tracked label used above headlines */
.q-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--q-highlight-2);
}

/* The display headline treatment used on hero blocks */
.q-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--q-dark);
}

/* Link styling — bold-weight Museo Sans 700 used on quantiz.at */
.q-link, a.q-link {
  color: var(--link);
  font-weight: var(--w-bold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-std);
}
.q-link:hover, a.q-link:hover { color: var(--link-hover); }

/* Registered-mark superscript — used on Quantiz® */
.registered {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

code, pre, .q-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}