/* EVVA CI modern - erzeugt von scripts/build_tokens.py. Nicht von Hand aendern. */
/* Quelle der Farbwerte: EVVA CD Manual 22R1. Abgeleitete Werte siehe references/tokens.md. */
/* Schrift einbinden (Quicksand, SIL OFL 1.1):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap">
   Ohne diese Zeile faellt die Seite still auf Open Sans bzw. Verdana zurueck. */

:root {
  color-scheme: light dark;
  --evva-font-family: Quicksand, "Open Sans", Verdana, sans-serif;

  --evva-bg-canvas: #EEEDF0;
  --evva-bg-shell: #21222D;
  --evva-bg-sidebar: #FFFFFF;
  --evva-bg-topbar: #21222D;
  --evva-fg-on-topbar: #FFFFFF;
  --evva-fg-on-topbar-muted: #B2B2B2;
  --evva-bg-topbar-sunken: #141414;
  --evva-bg-nav-active: #FFE500;
  --evva-bg-surface: #FFFFFF;
  --evva-bg-sunken: #F6F6F6;
  --evva-bg-raised: #FFFFFF;
  --evva-bg-hover: #F6F6F6;
  --evva-bg-selected: #FFF497;
  --evva-fg-default: #4A4A4A;
  --evva-fg-strong: #000000;
  --evva-fg-muted: #6B6B6B;
  --evva-fg-disabled: #717171;
  --evva-fg-on-yellow: #4A4A4A;
  --evva-fg-on-dark: #FFFFFF;
  --evva-fg-link: #033F63;
  --evva-line-subtle: #EDEDED;
  --evva-line-card: #D9DADA;
  --evva-line-strong: #878786;
  --evva-accent: #FFE500;
  --evva-accent-hover: #E4CE01;
  --evva-accent-active: #F2E472;
  --evva-accent-disabled: #FFF497;
  --evva-accent-tint: #FFF497;
  --evva-status-success: #32852E;
  --evva-status-warning: #EB7100;
  --evva-status-error: #DB3A00;
  --evva-status-success-fg: #2D7729;
  --evva-status-warning-fg: #A44F00;
  --evva-status-error-fg: #C53400;
  --evva-status-success-bg: #B1D1B0;
  --evva-status-warning-bg: #F7C99E;
  --evva-status-error-bg: #F1B49E;
  --evva-fg-on-status-bg: #000000;
  --evva-chart-bar: #21222D;
  --evva-chart-bar-accent: #FFE500;
  --evva-chart-line: #21222D;
  --evva-chart-line-2: #878786;
  --evva-chart-area: #D9DADA;
  --evva-chart-hatch: #D9DADA;
  --evva-chart-grid: #EDEDED;
  --evva-chart-axis: #6B6B6B;
  --evva-chart-tip: #FFE500;
  --evva-chart-tip-fg: #000000;
  --evva-chart-dot: #4A4A4A;

  --evva-space-0: 0px;
  --evva-space-1: 4px;
  --evva-space-2: 8px;
  --evva-space-3: 12px;
  --evva-space-4: 16px;
  --evva-space-5: 20px;
  --evva-space-6: 24px;
  --evva-space-8: 32px;
  --evva-space-10: 40px;
  --evva-space-12: 48px;
  --evva-space-16: 64px;
  --evva-radius-none: 0px;
  --evva-radius-sm: 8px;
  --evva-radius-md: 12px;
  --evva-radius-card: 20px;
  --evva-radius-panel: 24px;
  --evva-radius-shell: 28px;
  --evva-radius-pill: 999px;
  --evva-size-control: 40px;
  --evva-size-control-lg: 48px;
  --evva-size-icon-button: 40px;
  --evva-size-sidebar: 248px;
  --evva-size-sidebar-collapsed: 72px;
  --evva-size-icon: 20px;
  --evva-size-row: 48px;
  --evva-size-row-compact: 40px;
  --evva-border-hairline: 1px;
  --evva-border-strong: 1px;
  --evva-border-focus: 2px;

  --evva-font-kpi: 600 50px/1.1 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-tracking-kpi: -0.03em;
  --evva-font-kpi-sm: 600 30px/1.1 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-tracking-kpi-sm: -0.02em;
  --evva-font-h1: 500 40px/1.1 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-tracking-h1: -0.01em;
  --evva-font-h2: 500 30px/1.3 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-tracking-h2: -0.01em;
  --evva-font-h3: 500 23px/1.3 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-font-subheadline: 500 20px/1.3 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-font-body-lg: 400 20px/1.5 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-font-body: 400 16px/1.5 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-font-body-sm: 400 14px/1.5 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-font-label: 500 12px/1.33 Quicksand, "Open Sans", Verdana, sans-serif;
  --evva-tracking-label: 0.04em;
  --evva-font-caption: 400 13px/1.4 Quicksand, "Open Sans", Verdana, sans-serif;

  --evva-shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px -6px rgba(0,0,0,0.10);
  --evva-shadow-raised: 0 2px 4px rgba(0,0,0,0.08), 0 12px 28px -10px rgba(0,0,0,0.16);
  --evva-duration-fast: 120ms;
  --evva-duration-base: 180ms;
  --evva-duration-slow: 240ms;
  --evva-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --evva-ease-in: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --evva-bg-canvas: #141414;
    --evva-bg-shell: #000000;
    --evva-bg-sidebar: #1F1F1F;
    --evva-bg-topbar: #21222D;
    --evva-fg-on-topbar: #FFFFFF;
    --evva-fg-on-topbar-muted: #B2B2B2;
    --evva-bg-topbar-sunken: #141414;
    --evva-bg-nav-active: #FFE500;
    --evva-bg-surface: #1F1F1F;
    --evva-bg-sunken: #2B2B2B;
    --evva-bg-raised: #3A3A3A;
    --evva-bg-hover: #2B2B2B;
    --evva-bg-selected: #2B2B2B;
    --evva-fg-default: #FFFFFF;
    --evva-fg-strong: #FFFFFF;
    --evva-fg-muted: #B2B2B2;
    --evva-fg-disabled: #878786;
    --evva-fg-on-yellow: #4A4A4A;
    --evva-fg-on-dark: #FFFFFF;
    --evva-fg-link: #4FA3DC;
    --evva-line-subtle: #3A3A3A;
    --evva-line-card: #3A3A3A;
    --evva-line-strong: #838383;
    --evva-accent: #FFE500;
    --evva-accent-hover: #E4CE01;
    --evva-accent-active: #F2E472;
    --evva-accent-disabled: #FFF497;
    --evva-accent-tint: #FFE500;
    --evva-status-success: #32852E;
    --evva-status-warning: #EB7100;
    --evva-status-error: #DB3A00;
    --evva-status-success-fg: #6FA96C;
    --evva-status-warning-fg: #ED7F19;
    --evva-status-error-fg: #E5754C;
    --evva-status-success-bg: #253F23;
    --evva-status-warning-bg: #603915;
    --evva-status-error-bg: #5B2715;
    --evva-fg-on-status-bg: #FFFFFF;
    --evva-chart-bar: #FFFFFF;
    --evva-chart-bar-accent: #FFE500;
    --evva-chart-line: #FFFFFF;
    --evva-chart-line-2: #878786;
    --evva-chart-area: #3A3A3A;
    --evva-chart-hatch: #3A3A3A;
    --evva-chart-grid: #3A3A3A;
    --evva-chart-axis: #B2B2B2;
    --evva-chart-tip: #FFE500;
    --evva-chart-tip-fg: #000000;
    --evva-chart-dot: #FFFFFF;
    --evva-shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 4px 12px -6px rgba(0,0,0,0.55);
    --evva-shadow-raised: 0 2px 4px rgba(0,0,0,0.50), 0 12px 28px -10px rgba(0,0,0,0.65);
  }
}

:root[data-theme="dark"] {
  --evva-bg-canvas: #141414;
  --evva-bg-shell: #000000;
  --evva-bg-sidebar: #1F1F1F;
  --evva-bg-topbar: #21222D;
  --evva-fg-on-topbar: #FFFFFF;
  --evva-fg-on-topbar-muted: #B2B2B2;
  --evva-bg-topbar-sunken: #141414;
  --evva-bg-nav-active: #FFE500;
  --evva-bg-surface: #1F1F1F;
  --evva-bg-sunken: #2B2B2B;
  --evva-bg-raised: #3A3A3A;
  --evva-bg-hover: #2B2B2B;
  --evva-bg-selected: #2B2B2B;
  --evva-fg-default: #FFFFFF;
  --evva-fg-strong: #FFFFFF;
  --evva-fg-muted: #B2B2B2;
  --evva-fg-disabled: #878786;
  --evva-fg-on-yellow: #4A4A4A;
  --evva-fg-on-dark: #FFFFFF;
  --evva-fg-link: #4FA3DC;
  --evva-line-subtle: #3A3A3A;
  --evva-line-card: #3A3A3A;
  --evva-line-strong: #838383;
  --evva-accent: #FFE500;
  --evva-accent-hover: #E4CE01;
  --evva-accent-active: #F2E472;
  --evva-accent-disabled: #FFF497;
  --evva-accent-tint: #FFE500;
  --evva-status-success: #32852E;
  --evva-status-warning: #EB7100;
  --evva-status-error: #DB3A00;
  --evva-status-success-fg: #6FA96C;
  --evva-status-warning-fg: #ED7F19;
  --evva-status-error-fg: #E5754C;
  --evva-status-success-bg: #253F23;
  --evva-status-warning-bg: #603915;
  --evva-status-error-bg: #5B2715;
  --evva-fg-on-status-bg: #FFFFFF;
  --evva-chart-bar: #FFFFFF;
  --evva-chart-bar-accent: #FFE500;
  --evva-chart-line: #FFFFFF;
  --evva-chart-line-2: #878786;
  --evva-chart-area: #3A3A3A;
  --evva-chart-hatch: #3A3A3A;
  --evva-chart-grid: #3A3A3A;
  --evva-chart-axis: #B2B2B2;
  --evva-chart-tip: #FFE500;
  --evva-chart-tip-fg: #000000;
  --evva-chart-dot: #FFFFFF;
  --evva-shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 4px 12px -6px rgba(0,0,0,0.55);
  --evva-shadow-raised: 0 2px 4px rgba(0,0,0,0.50), 0 12px 28px -10px rgba(0,0,0,0.65);
}

/* ---------------------------------------------------------------- Grundlagen */
/* border-box ueberall: Breiten schliessen Innenabstand und Kante ein. Ohne diesen
   Reset wird jede Karte mit width:100% um ihr Padding breiter als die Rasterzelle
   und legt sich ueber die Nachbarkarte - das ist in einem Projekt passiert. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--evva-bg-canvas);
  color: var(--evva-fg-default);
  font: var(--evva-font-body);
  -webkit-font-smoothing: antialiased;
}

:where(a) { color: var(--evva-fg-link); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--evva-border-focus) solid var(--evva-fg-default);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Karte
   Rahmenlos. Trennung ueber Flaeche (Weiss auf Grau 10 = 1.17:1) plus Schatten.
   Das ist eine Gruppierung, kein Bedienelement - WCAG 1.4.11 greift hier nicht. */
.evva-card {
  background: var(--evva-bg-surface);
  border-radius: var(--evva-radius-card);
  box-shadow: var(--evva-shadow-card);
  padding: var(--evva-space-5);
}
.evva-panel { border-radius: var(--evva-radius-panel); }

/* ---------------------------------------------------------------- Kennzahl
   Die Zahl ist das Bild: Hero-Groesse aus der CI-Skala, Schwarz statt Grau,
   tabular-nums, negatives Tracking. Das Label steht darueber und ist klein. */
.evva-kpi-label {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
  margin: 0 0 var(--evva-space-2);
}
.evva-kpi-value {
  font: var(--evva-font-kpi);
  letter-spacing: var(--evva-tracking-kpi);
  font-variant-numeric: tabular-nums;
  color: var(--evva-fg-strong);
  margin: 0;
}

/* ---------------------------------------------------------------- Pille
   Status als gefuellte Pille mit dunklem Text, nie als eingefaerbter Text. */
.evva-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--evva-space-1);
  min-height: 24px;
  padding: 2px var(--evva-space-2);
  border-radius: var(--evva-radius-pill);
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  color: var(--evva-fg-on-status-bg);
  white-space: nowrap;
}
.evva-pill--success { background: var(--evva-status-success-bg); }
.evva-pill--warning { background: var(--evva-status-warning-bg); }
.evva-pill--error   { background: var(--evva-status-error-bg); }
.evva-pill--accent  { background: var(--evva-accent-tint); color: var(--evva-fg-on-yellow); }

/* ---------------------------------------------------------------- Button
   Pillenform, Hoehe 48, Radius 24 - so schreibt es das CD Manual (S. 109),
   abgeleitet von der Logo-Ellipse. Gelb traegt niemals Text: der Text steht
   IM Gelb, nicht in Gelb. */
.evva-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--evva-space-2);
  height: var(--evva-size-control-lg);
  padding: 0 var(--evva-space-4);
  border: none;
  border-radius: var(--evva-radius-pill);
  font: var(--evva-font-body);
  cursor: pointer;
  transition: background-color var(--evva-duration-fast) var(--evva-ease-out);
}
.evva-btn--primary {
  background: var(--evva-accent);
  color: var(--evva-fg-on-yellow);
  font-weight: 500;
}
.evva-btn--primary:hover { background: var(--evva-accent-hover); }
.evva-btn--primary:active { background: var(--evva-accent-active); }
.evva-btn--primary:disabled { background: var(--evva-accent-disabled); cursor: default; }
.evva-btn--secondary {
  background: var(--evva-bg-surface);
  color: var(--evva-fg-default);
  box-shadow: inset 0 0 0 1px var(--evva-line-strong);
}
.evva-btn--secondary:hover { background: var(--evva-bg-hover); }

/* Runder Ghost-Icon-Button, 40 px Trefferflaeche bei 20 px Icon. */
.evva-icon-btn {
  width: var(--evva-size-icon-button);
  height: var(--evva-size-icon-button);
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: var(--evva-radius-pill);
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-default);
  cursor: pointer;
}
.evva-icon-btn:hover { background: var(--evva-bg-hover); }

/* ---------------------------------------------------------------- Eingabe
   Bedienelement - hier greift 1.4.11: Grenze auf line-strong (Grau 60, 3.60:1).
   Grau 40 reisst mit 2.12:1 und ist dafuer gesperrt. */
.evva-input {
  height: var(--evva-size-control);
  padding: 0 var(--evva-space-3);
  border: 1px solid var(--evva-line-strong);
  border-radius: var(--evva-radius-md);
  background: var(--evva-bg-surface);
  color: var(--evva-fg-default);
  font: var(--evva-font-body);
}

/* ---------------------------------------------------------------- Tabelle
   Keine vertikalen Linien, kein Aussenrahmen, Zeilentrenner dekorativ. */
.evva-table { width: 100%; border-collapse: collapse; }
.evva-table th {
  font: var(--evva-font-label);
  letter-spacing: var(--evva-tracking-label);
  text-transform: uppercase;
  color: var(--evva-fg-muted);
  text-align: left;
  padding: 0 var(--evva-space-3);
  height: var(--evva-size-row-compact);
}
.evva-table td {
  height: var(--evva-size-row);
  padding: 0 var(--evva-space-3);
  border-top: 1px solid var(--evva-line-subtle);
  font-variant-numeric: tabular-nums;
}
.evva-table tr[aria-current="true"] td { background: var(--evva-bg-selected); }

/* ---------------------------------------------------------------- Kennzahlkarte
   Der Aufbau aus der Referenz: Titelzeile mit rundem Ghost-Button rechts, darunter
   die grosse Zahl, darunter die Deltapille mit Bezugswert daneben. */
.evva-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--evva-space-3);
  margin-bottom: var(--evva-space-3);
}
.evva-card-title {
  font: var(--evva-font-subheadline);
  color: var(--evva-fg-strong);
  margin: 0;
}
.evva-delta {
  display: flex;
  align-items: center;
  gap: var(--evva-space-2);
  margin-top: var(--evva-space-3);
  flex-wrap: wrap;
}
.evva-delta-from {
  font: var(--evva-font-caption);
  color: var(--evva-fg-muted);
}

/* Runder Ghost-Button mit Diagonalpfeil - in der Referenz sitzt er oben rechts
   auf jeder Karte. 40 px Trefferflaeche, 20 px Icon. */
.evva-arrow-btn {
  inline-size: var(--evva-size-icon-button);
  block-size: var(--evva-size-icon-button);
  flex: none;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: var(--evva-radius-pill);
  background: var(--evva-bg-sunken);
  color: var(--evva-fg-default);
  cursor: pointer;
  transition: background-color var(--evva-duration-fast) var(--evva-ease-out);
}
.evva-arrow-btn:hover { background: var(--evva-bg-hover); }

/* ---------------------------------------------------------------- Anwendungsrahmen
   Aufbau aus der Referenz: dunkle Kopfleiste ueber die volle Breite, weisse
   Seitenleiste, leicht graue Arbeitsflaeche, weisse Karten darauf. */
.evva-app {
  display: grid;
  grid-template-columns: var(--evva-size-sidebar) 1fr;
  grid-template-rows: 64px 1fr;
  min-block-size: 100vh;
  /* Gerahmt ist die Vorgabe (Referenz Sphere UI): die Kopfleiste ist Teil des
     dunklen Grunds und bleibt eckig; darunter traegt EINE gerundete Flaeche in
     Seitenleistenfarbe die Seitenleiste und die grau eingesetzte Arbeitsflaeche,
     deren linke obere Ecke gerundet in die Seitenleiste laeuft. Der Grund bleibt
     links, rechts und unten als Rand sichtbar. Wer das Fenster randlos fuellen
     will, setzt .evva-app--flush - und braucht dafuer einen Grund (Gate G8). */
  background: var(--evva-bg-shell);
  padding: 0 var(--evva-space-3) var(--evva-space-3);
  row-gap: var(--evva-space-3);
}
/* Die gemeinsame Traegerflaeche: ein Pseudo-Element in der zweiten Zeile, unter
   Seitenleiste und Arbeitsflaeche. Deshalb sind beide fest platziert. */
.evva-app::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  background: var(--evva-bg-sidebar);
  border-radius: var(--evva-radius-shell);
}
.evva-app > .evva-topbar { grid-row: 1; background: transparent; }
.evva-app > .evva-sidebar {
  grid-row: 2;
  grid-column: 1;
  background: transparent;
  overflow-y: auto;
  /* Rechts mehr Luft: die Nase des Umschalters ragt eine halbe Breite in die
     Seitenleiste hinein und darf die Flaeche des aktiven Eintrags nie beruehren. */
  padding-inline-end: var(--evva-space-8);
}
.evva-app > .evva-main {
  grid-row: 2;
  grid-column: 2;
  border-radius: var(--evva-radius-shell);
  background: var(--evva-bg-canvas);
  overflow: auto;
}
/* Huelle um die App (z. B. <body>): traegt den Grund weiter, falls die Seite
   hoeher wird als die App. Optional. */
.evva-shell { min-block-size: 100vh; background: var(--evva-bg-shell); }

/* Umschalter der Seitenleiste (Referenz): waechst als runde Nase aus der
   Seitenleiste in die gerundete Ecke der Arbeitsflaeche hinein - dieselbe Flaeche
   wie die Seitenleiste, kein Schatten, keine Kante, sonst wirkt er aufgesetzt.
   Als Rasterkind in der Zelle der Arbeitsflaeche platziert, damit er beim Scrollen
   stehen bleibt; um die halbe Breite nach links gerueckt, damit er die Grenze
   ueberlappt; auf Hoehe des ersten Navigationseintrags. Markup:
   <button class="evva-icon-btn evva-sidebar-toggle"> als Kind von .evva-app,
   nach .evva-main. */
.evva-app > .evva-sidebar-toggle {
  grid-row: 2;
  grid-column: 2;
  justify-self: start;
  align-self: start;
  z-index: 1;
  margin: var(--evva-space-12) 0 0 calc(-1 * var(--evva-size-icon-button) / 2);
  background: var(--evva-bg-sidebar);
  color: var(--evva-fg-default);
}
.evva-app > .evva-sidebar-toggle:hover { background: var(--evva-bg-hover); }

/* Randlos - nur auf ausdruecklichen Wunsch: Kopfleiste als Balken, Seitenleiste
   und Arbeitsflaeche fuellen das Fenster, keine Traegerflaeche, keine Nase. */
.evva-app--flush { background: var(--evva-bg-canvas); padding: 0; row-gap: 0; min-block-size: 100%; }
.evva-app--flush::before { display: none; }
.evva-app--flush > .evva-topbar { background: var(--evva-bg-topbar); }
.evva-app--flush > .evva-sidebar { background: var(--evva-bg-sidebar); padding-inline-end: var(--evva-space-4); }
.evva-app--flush > .evva-main { background: var(--evva-bg-canvas); border-radius: 0; }
.evva-app--flush > .evva-sidebar-toggle { display: none; }

/* Eingeklappte Seitenleiste: nur Symbole, Breite aus dem Tokenset.
   Die Beschriftung wird ausgeblendet, nicht verkleinert - halbe Woerter sind
   schlechter lesbar als gar keine. */
.evva-app--narrow { grid-template-columns: var(--evva-size-sidebar-collapsed) 1fr; }
.evva-app--narrow .evva-sidebar { padding-inline: var(--evva-space-2); }
.evva-app--narrow .evva-nav-item { justify-content: center; padding-inline: 0; }
.evva-app--narrow .evva-nav-item > :not(.ico) { display: none; }
/* Eingeklappt: links 4, rechts 32 - so bleiben auch hier 12 px zwischen der
   gelben Flaeche des aktiven Eintrags und der Nase. */
.evva-app--narrow > .evva-sidebar { padding-inline: var(--evva-space-1) var(--evva-space-8); }

/* Unter 1024 px: eine Spalte, Seitenleiste als waagrechte Leiste ueber der
   Arbeitsflaeche, kein Rand, keine Traegerflaeche, keine Nase - auf einem Handy
   waere der Rahmen verschenkte Breite. Kommt aus der CSS-Datei, damit kein
   Projekt eigene Mobilregeln fuer den Rahmen schreiben muss. */
@media (max-width: 1024px) {
  .evva-app, .evva-app--narrow {
    grid-template-columns: 1fr;
    grid-template-rows: 64px auto 1fr;
    padding: 0;
    row-gap: 0;
    background: var(--evva-bg-canvas);
  }
  .evva-app::before { display: none; }
  .evva-app > .evva-topbar { background: var(--evva-bg-topbar); }
  .evva-app > .evva-sidebar {
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    overflow-x: auto;
    background: var(--evva-bg-sidebar);
    padding-inline-end: var(--evva-space-4);
  }
  .evva-app > .evva-main { grid-row: 3; grid-column: 1; border-radius: 0; }
  .evva-app > .evva-sidebar-toggle { display: none; }
  .evva-app--narrow .evva-nav-item { justify-content: flex-start; padding-inline: var(--evva-space-3); }
  .evva-app--narrow .evva-nav-item > :not(.ico) { display: inline; }
}

.evva-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--evva-space-4);
  padding: 0 var(--evva-space-5);
  background: var(--evva-bg-topbar);
  color: var(--evva-fg-on-topbar);
  overflow: hidden;
}
.evva-topbar > * { flex: none; }
.evva-topbar a, .evva-topbar button { color: inherit; }
.evva-sidebar {
  background: var(--evva-bg-sidebar);
  transition: padding var(--evva-duration-base) var(--evva-ease-out);
  padding: var(--evva-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--evva-space-1);
}
.evva-main { padding: var(--evva-space-5); min-width: 0; }
.evva-nav-item {
  display: flex;
  align-items: center;
  gap: var(--evva-space-3);
  min-block-size: var(--evva-size-control);
  padding: 0 var(--evva-space-3);
  border-radius: var(--evva-radius-md);
  color: var(--evva-fg-default);
  text-decoration: none;
  cursor: pointer;
}
.evva-nav-item:hover { background: var(--evva-bg-hover); }
.evva-nav-item[aria-current="page"] {
  background: var(--evva-accent-tint);
  color: var(--evva-fg-on-yellow);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Diagramm
   Rezept nach Sphere UI: nur waagrechte Hilfslinien, keine Achsenlinien, kein
   Rahmen. Die DATEN sind dunkel und tragen ihren Kontrast selbst; der Akzent
   markiert genau ein Element - einen Balken, den Tooltip, den Endpunkt. Deshalb
   braucht die Linie keine Fassung und bleibt duenn. */
.evva-chart { inline-size: 100%; block-size: auto; display: block; }
.evva-chart-grid { stroke: var(--evva-chart-grid); stroke-width: 1; }
.evva-chart-tick {
  fill: var(--evva-chart-axis);
  font: var(--evva-font-caption);
  font-family: var(--evva-font-family);
  font-variant-numeric: tabular-nums;
  text-anchor: end;
}
.evva-chart-tick--x { text-anchor: middle; }
.evva-chart-line {
  fill: none;
  stroke: var(--evva-chart-line);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.evva-chart-line--2 {
  fill: none;
  stroke: var(--evva-chart-line-2);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
}
.evva-chart-bar { fill: var(--evva-chart-bar); }
.evva-chart-bar--accent { fill: var(--evva-chart-bar-accent); }
/* Die Flaechenschraffur braucht ein <pattern> im Dokument, dessen id die Seite
   selbst vergibt - eine Stylesheet-Regel kann sie nicht liefern. Das Muster steht
   in references/charts.md; hier wird nur seine Linienfarbe gesetzt. */
.evva-chart-hatch { stroke: var(--evva-chart-hatch); stroke-width: 1; }
.evva-chart-tip { fill: var(--evva-chart-tip); }
.evva-chart-tipval {
  fill: var(--evva-chart-tip-fg);
  font: var(--evva-font-label);
  font-family: var(--evva-font-family);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}
.evva-chart-dot { fill: var(--evva-chart-line); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}