/* IMPULS Design-System.
 *
 * EINE Stelle fuer die Marke: die Violett-Skala unten. Liegt der exakte
 * VDMA-CI-Hex vor, --v-500 (und passend die Nachbarstufen) tauschen. Seite und
 * Diagramme ziehen automatisch nach.
 *
 * Die Diagramm-Stufen sind mit dem dataviz-Validator geprueft (ordinale Skala:
 * monotone Helligkeit, Stufenabstaende, heller Endwert 2,32:1 auf Weiss).
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;              /* Variable Font */
  font-display: swap;
  src: url('/static/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  color-scheme: light;

  /* Markenskala (Violett) */
  --v-50:  #F7F1FC;
  --v-100: #EDE0F7;
  --v-200: #D3B6EC;
  --v-300: #C09BE4;   /* Diagramm: schwaechste Stufe (2,32:1 auf Weiss) */
  --v-400: #A276D8;   /* Diagramm */
  --v-500: #7B2CBF;   /* Primaerfarbe: 7,11:1 auf Weiss, Weiss darauf ebenso */
  --v-600: #6C27A9;
  --v-700: #5C2190;
  --v-800: #4E1C7A;   /* Diagramm: staerkste Stufe */
  --v-900: #33124F;
  --v-ink: #241033;   /* dunkler Violettstich fuer Footer/Hero */

  /* Flaechen und Schrift */
  --surface:   #FFFFFF;
  --plane:     #F8F7FA;
  --ink:       #17141B;
  --ink-2:     #4A4553;
  --muted:     #7C7689;
  --line:      #E6E3EC;
}

/* Bewusst KEIN scroll-behavior: smooth. Beim Sprung zu einem Anker sieht man
   sonst, wie die Seite von oben nach unten faehrt ("hoch und dann runter"). */

body {
  background: var(--plane);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines etwas enger, das gibt ein ruhigeres Schriftbild. */
h1, h2, h3 { letter-spacing: -0.02em; }

/* Sichtbarer Fokus fuer Tastaturnavigation (Barrierefreiheit). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--v-500);
  outline-offset: 2px;
}

/* Zahlen in Tabellen/Achsen untereinander ausrichten; grosse Kennzahlen
   bewusst proportional (tabular wirkt dort locker). */
.tnum { font-variant-numeric: tabular-nums; }

/* Diagramme: Beschriftung traegt Text-Token, nie die Datenfarbe. */
.chart-label { fill: var(--ink-2); font-size: 12px; }
.chart-value { fill: var(--ink);   font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-axis  { stroke: var(--line); stroke-width: 1; }

/* Sprungziele nicht unter die klebende Kopfzeile rutschen lassen. Greift nur
   noch ohne JavaScript. Mit htmx wird der Abschnitt an Ort und Stelle
   ausgetauscht, ganz ohne Sprung. */
main [id] { scroll-margin-top: 7.5rem; }

/* Waehrend htmx nachlaedt: der betroffene Abschnitt wird kurz blasser.
   Ruhiger Hinweis, dass etwas passiert, ohne Spinner-Gezappel. */
.htmx-request.hx-block,
.htmx-request .hx-block { opacity: 0.55; transition: opacity 120ms ease; }

/* --- Sanfter Seitenwechsel -------------------------------------------------
 * Native View Transitions: der Browser blendet die alte Seite aus und die neue
 * kurz ein. Kein JavaScript. Browser ohne Unterstuetzung (derzeit u. a. Firefox)
 * navigieren unveraendert hart, es geht nichts kaputt.
 */
@view-transition { navigation: auto; }

/* Reines, kurzes Ueberblenden, keine Vertikalbewegung. Beim Seitenwechsel
   springt der Scroll ohnehin nach oben; eine zusaetzliche Verschiebung liest
   sich dann als Ruckeln. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease;
}

@keyframes seite-rein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fallback ohne View-Transitions: nur die neue Seite kurz einblenden. */
@supports not (view-transition-name: none) {
  main { animation: seite-rein 140ms ease both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  main { animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}