/* ---- tokens/fonts.css ---- */
/* adKick webfonts.
   SUBSTITUTION NOTICE: no font binaries were provided with the brief, so the
   system is specified on Geist + Geist Mono, served from Google Fonts.
   To self-host, drop the .woff2 files in assets/fonts/ and replace the @import
   below with the @font-face block at the bottom of this file. */
/* adKick: Google-Fonts-Import am 2026-09-07 ENTFERNT. Eine Kundenseite darf keine
   Schriften von einem fremden Server nachladen - das uebertraegt die IP des Kunden an
   Dritte, waehrend die Seite daneben Datenschutz verspricht. Bis die Geist-Dateien
   selbst ausgeliefert werden, greift die Ersatzkette in --font-sans. */

:root {
  --font-sans: "Geist", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;
  /* Numerals in tables, metrics and money always use the mono family so
     columns align without hand-tuned widths. */
  --font-numeric: "Geist Mono", ui-monospace, monospace;
}

/* Self-hosting template — uncomment after adding binaries to assets/fonts/.
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
*/

/* ---- tokens/colors.css ---- */
/* adKick — Farbfundament (Schema II).
   Gebaut FÜR Kick Magenta, nicht um eine blaue Marke herum.

   Drei getrennte Farbwelten, die sich nie mischen:
   1. MARKE   — Kick Magenta #F02BE2. Identität, aktiver Reiter, Fokus,
                primäre Aktion. Nie eine Aussage über eine Zahl.
   2. ZUSTAND — gut / Achtung / kritisch, Farbtöne 155 / 85 / 38. Sagen
                ausschließlich, wie eine Zahl steht. Immer mit Wort.
   3. DIAGRAMM— kategoriale Reihen. Nie Zustand, nie Aktion.

   Die Neutralen tragen einen violetten Unterton (Farbton 305–314): neben
   blaugrauem Grau kippt Magenta ins Billige, neben verwandtem Grau wird es
   erwachsen. Kritisch liegt bei 38 statt 24, damit 70 Grad Abstand zur Marke
   bleiben — bei 24 wurden Rot und Magenta in kleinen Elementen verwechselt. */

:root {
  /* ---- Neutrale, violetter Unterton --------------------------------- */
  --n-0:    oklch(1 0 0);
  --n-25:   oklch(0.990 0.003 305);
  --n-50:   oklch(0.978 0.005 305);
  --n-100:  oklch(0.960 0.007 305);
  --n-150:  oklch(0.936 0.009 305);
  --n-200:  oklch(0.906 0.011 305);
  --n-300:  oklch(0.836 0.015 306);
  --n-400:  oklch(0.706 0.019 307);
  --n-500:  oklch(0.590 0.021 308);
  --n-550:  oklch(0.488 0.022 308);
  --n-600:  oklch(0.486 0.023 309);
  --n-700:  oklch(0.390 0.025 310);
  --n-800:  oklch(0.296 0.026 311);
  --n-900:  oklch(0.220 0.027 312);
  --n-950:  oklch(0.170 0.028 313);
  --n-1000: oklch(0.130 0.029 314);

  /* ---- Marke: Kick Magenta ------------------------------------------ */
  --brand-50:  oklch(0.974 0.020 328);
  --brand-100: oklch(0.946 0.046 328);
  --brand-200: oklch(0.893 0.094 328);
  --brand-300: oklch(0.816 0.163 328);
  --brand-400: oklch(0.738 0.238 328);
  --brand-500: oklch(0.665 0.295 328);
  --brand-600: oklch(0.598 0.268 329);
  --brand-700: oklch(0.508 0.226 330);
  --brand-800: oklch(0.418 0.182 331);
  --brand-900: oklch(0.330 0.140 332);

  /* ---- Zweitfarbe: Cyan (Druck-Logik zu Magenta) --------------------- */
  --cyan-100: oklch(0.958 0.030 205);
  --cyan-200: oklch(0.914 0.058 205);
  --cyan-300: oklch(0.858 0.090 205);
  --cyan-400: oklch(0.796 0.118 205);
  --cyan-500: oklch(0.722 0.135 205);
  --cyan-600: oklch(0.618 0.120 207);
  --cyan-700: oklch(0.504 0.098 209);

  /* ---- Zustände: 155 / 85 / 38 --------------------------------------- */
  --good-50:  oklch(0.974 0.023 155);
  --good-100: oklch(0.940 0.050 155);
  --good-200: oklch(0.880 0.086 155);
  --good-400: oklch(0.744 0.132 155);
  --good-500: oklch(0.658 0.146 155);
  --good-600: oklch(0.520 0.116 155);
  --good-700: oklch(0.438 0.098 156);

  --warn-50:  oklch(0.980 0.028 85);
  --warn-100: oklch(0.955 0.062 85);
  --warn-200: oklch(0.912 0.108 85);
  --warn-400: oklch(0.836 0.150 83);
  --warn-500: oklch(0.782 0.155 82);
  --warn-600: oklch(0.520 0.108 76);
  --warn-700: oklch(0.452 0.096 72);

  --crit-50:  oklch(0.974 0.019 38);
  --crit-100: oklch(0.948 0.042 38);
  --crit-200: oklch(0.894 0.082 38);
  --crit-400: oklch(0.700 0.180 38);
  --crit-500: oklch(0.612 0.196 38);
  --crit-600: oklch(0.528 0.178 38);
  --crit-700: oklch(0.440 0.150 39);

  /* ---- Diagramm ------------------------------------------------------ */
  --chart-1: oklch(0.665 0.295 328); /* magenta */
  --chart-2: oklch(0.722 0.135 205); /* cyan    */
  --chart-3: oklch(0.600 0.180 292); /* violett */
  --chart-4: oklch(0.800 0.100 92);  /* sand    */
  --chart-5: oklch(0.560 0.060 250); /* stahl   */
  --chart-6: oklch(0.730 0.130 150); /* moos    */
  --chart-grid: var(--n-150);
  --chart-axis: var(--n-400);

  /* ==== semantische Aliase — immer gegen diese arbeiten ============== */
  /* Flächen. Im Hellen sinkt die Umgebung unter die Karte. */
  --surface-page:        oklch(0.958 0.008 305);
  --surface-card:        var(--n-0);
  --surface-raised:      var(--n-0);
  --surface-sunken:      var(--n-100);
  --surface-inset:       var(--n-100);
  --surface-tab:         oklch(0.912 0.011 305);
  --surface-stack-1:     oklch(0.932 0.010 305);
  --surface-stack-2:     oklch(0.900 0.012 305);
  --surface-hover:       oklch(0.665 0.295 328 / 0.05);
  --surface-active:      oklch(0.665 0.295 328 / 0.10);
  --surface-selected:    var(--brand-50);
  --surface-brand:       var(--brand-600);
  --surface-brand-hover: var(--brand-700);
  --surface-brand-quiet: var(--brand-50);
  --surface-good-quiet:  var(--good-50);
  --surface-warn-quiet:  var(--warn-50);
  --surface-crit-quiet:  var(--crit-50);
  --surface-overlay:     oklch(0.170 0.028 313 / 0.86);
  --surface-nav:         var(--n-950);
  --surface-nav-hover:   oklch(1 0 0 / 0.07);

  /* Schrift. Tertiär ist nach KONTRAST gewählt, nicht nach Lichtheit:
     --n-550 liegt auf Weiß bei 6,3:1 und auf der Reiterfläche bei 4,8:1. */
  --text-primary:    var(--n-900);
  --text-secondary:  var(--n-700);
  --text-tertiary:   var(--n-550);
  --text-disabled:   var(--n-400);
  --text-inverse:    var(--n-0);
  --text-on-brand:   var(--n-0);
  /* Marke als FLÄCHE ist --brand-600 (weiße Schrift). Marke als KLEINTEXT
     braucht 700: sie steht nie auf Weiß, sondern auf Seitenton und
     Marken-Lasur, und dort hält 600 die 4,5:1 nicht. */
  --text-brand:      var(--brand-700);
  --text-good:       var(--good-600);
  --text-warn:       var(--warn-600);
  --text-crit:       var(--crit-600);
  --text-link:       var(--brand-600);
  --text-link-hover: var(--brand-700);
  --text-nav:        oklch(0.800 0.014 306);
  --text-nav-strong: var(--n-0);
  /* Abschnittsbeschriftung in der Schiene: 62 % Weiß = 7,7:1 auf --surface-nav.
     Bei 42 % waren es 4,1:1. */
  --text-nav-quiet:  oklch(1 0 0 / 0.62);

  /* Bänder: farbige Fläche mit Wort. Im Hellen weiße Schrift auf 500/600. */
  --band-good: var(--good-600);
  --band-warn: var(--warn-600);
  --band-crit: var(--crit-600);
  /* Kein Zustand: pausiert, unverändert, nicht zugeordnet. Muss existieren,
     sonst fällt ein neutrales Band auf die Markenfarbe zurück — und Magenta
     darf nie eine Aussage über eine Zahl sein. Weiße Schrift: 6,4:1. */
  --band-neutral: var(--n-600);
  --band-brand: var(--brand-600);
  --band-fg: var(--n-0);

  /* Linien. --border-rule ist die 2px-Regel, die Abschnitte gliedert. */
  --border-subtle: var(--n-150);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --border-rule:   var(--n-900);
  --border-brand:  var(--brand-500);
  --border-good:   var(--good-200);
  --border-warn:   var(--warn-200);
  --border-crit:   var(--crit-200);
  --border-focus:  var(--brand-500);
  --ring-focus:    oklch(0.665 0.295 328 / 0.30);
  --border-nav:    oklch(1 0 0 / 0.10);

  --heat-good: oklch(0.658 0.146 155 / 0.14);
  --heat-warn: oklch(0.782 0.155 82 / 0.17);
  --heat-crit: oklch(0.612 0.196 38 / 0.13);
}

/* ---- tokens/colors-dark.css ---- */
/* adKick — dunkle Fassung. Entworfen, nicht invertiert.

   Was sie zu einem eigenen Entwurf macht:
   - Die Seite ist die dunkelste Schicht; Karten steigen in der Lichtheit
     HERAUS. Im Hellen sinkt die Umgebung unter die Karte — dadurch bleibt die
     Silhouette in beiden Fassungen dieselbe, obwohl die Reihenfolge kippt.
   - Trennung entsteht aus einer Haarlinie bei 7–17 % Weiß plus dem
     Flächensprung. Schatten sind fast abwesend.
   - Marken- und Zustandstöne werden in der Lichtheit angehoben und in der
     Sättigung zurückgenommen, damit sie auf dunklem Grund nicht vibrieren.
   - Bänder tragen hier DUNKLE Schrift auf der angehobenen Farbe, nicht weiße. */

[data-theme="dark"] {
  --surface-page:        oklch(0.142 0.030 313);
  --surface-card:        oklch(0.206 0.030 313);
  --surface-raised:      oklch(0.248 0.030 312);
  --surface-sunken:      oklch(0.170 0.030 313);
  --surface-inset:       oklch(0.182 0.030 313);
  --surface-tab:         oklch(0.168 0.030 313);
  --surface-stack-1:     oklch(0.178 0.030 313);
  --surface-stack-2:     oklch(0.160 0.030 313);
  --surface-hover:       oklch(1 0 0 / 0.055);
  --surface-active:      oklch(1 0 0 / 0.095);
  --surface-selected:    oklch(0.665 0.295 328 / 0.22);
  /* Hier bleibt die helle 500 stehen und trägt DUNKLE Schrift — dieselbe
     Logik wie bei den Zustandsbändern. Weiß auf 500 wären nur 3,6:1. */
  --surface-brand:       var(--brand-500);
  --surface-brand-hover: var(--brand-400);
  --surface-brand-quiet: oklch(0.665 0.295 328 / 0.18);
  --surface-good-quiet:  oklch(0.658 0.146 155 / 0.16);
  --surface-warn-quiet:  oklch(0.782 0.155 82 / 0.16);
  --surface-crit-quiet:  oklch(0.612 0.196 38 / 0.18);
  --surface-overlay:     oklch(0.115 0.028 314 / 0.90);
  --surface-nav:         oklch(0.206 0.030 313);
  --surface-nav-hover:   oklch(1 0 0 / 0.07);

  --text-primary:    oklch(0.972 0.006 305);
  --text-secondary:  oklch(0.782 0.016 307);
  --text-tertiary:   oklch(0.660 0.020 308);
  --text-disabled:   oklch(0.505 0.022 309);
  --text-inverse:    oklch(0.170 0.028 313);
  --text-on-brand:   var(--band-fg);
  --text-brand:      oklch(0.828 0.150 328);
  --text-good:       oklch(0.818 0.165 155);
  --text-warn:       oklch(0.862 0.150 88);
  --text-crit:       oklch(0.762 0.170 38);
  --text-link:       oklch(0.828 0.150 328);
  --text-link-hover: oklch(0.890 0.100 328);
  --text-nav:        oklch(0.782 0.016 307);
  --text-nav-strong: oklch(0.975 0.006 305);
  --text-nav-quiet:  oklch(1 0 0 / 0.62);

  /* angehobene Farbe, dunkle Schrift */
  --band-good: oklch(0.818 0.165 155);
  --band-warn: oklch(0.862 0.150 88);
  --band-crit: oklch(0.735 0.185 38);
  /* kein Zustand — helles Neutral, dunkle Schrift: 9,2:1 */
  --band-neutral: oklch(0.760 0.016 307);
  --band-brand: oklch(0.780 0.200 328);
  --band-fg: oklch(0.150 0.030 313);

  --border-subtle:  oklch(1 0 0 / 0.075);
  --border-default: oklch(1 0 0 / 0.17);
  --border-strong:  oklch(1 0 0 / 0.28);
  --border-rule:    oklch(1 0 0 / 0.40);
  --border-brand:   var(--brand-400);
  --border-good:    oklch(0.658 0.146 155 / 0.38);
  --border-warn:    oklch(0.782 0.155 82 / 0.38);
  --border-crit:    oklch(0.612 0.196 38 / 0.45);
  --border-focus:   oklch(0.780 0.200 328);
  --ring-focus:     oklch(0.738 0.238 328 / 0.38);
  --border-nav:     oklch(1 0 0 / 0.09);

  --chart-1: oklch(0.780 0.200 328);
  --chart-2: oklch(0.800 0.130 205);
  --chart-3: oklch(0.720 0.150 292);
  --chart-4: oklch(0.845 0.095 92);
  --chart-5: oklch(0.665 0.070 250);
  --chart-6: oklch(0.800 0.130 150);
  --chart-grid: oklch(1 0 0 / 0.08);
  --chart-axis: oklch(0.600 0.020 308);

  --heat-good: oklch(0.658 0.146 155 / 0.22);
  --heat-warn: oklch(0.782 0.155 82 / 0.22);
  --heat-crit: oklch(0.612 0.196 38 / 0.24);

  --shadow-xs: 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-sm: 0 1px 0 oklch(1 0 0 / 0.08);
  --shadow-md: 0 4px 12px oklch(0.115 0.028 314 / 0.50);
  --shadow-lg: 0 16px 40px oklch(0.115 0.028 314 / 0.60);
  --shadow-pop: 0 12px 32px oklch(0.115 0.028 314 / 0.62);
}

/* ---- tokens/typography.css ---- */
/* adKick — typography.
   One family (Geist) does everything; Geist Mono carries every number.
   Display sizes are only used on client-facing surfaces; the internal console
   never goes above --text-size-xl for a heading. */

:root {
  /* type scale — px, because dense tables need predictable row maths */
  --text-size-2xs: 10px;
  --text-size-xs:  11px;
  --text-size-sm:  12px;
  --text-size-md:  13px;
  --text-size-base:14px;
  --text-size-lg:  16px;
  --text-size-xl:  20px;
  --text-size-2xl: 26px;
  --text-size-3xl: 34px;
  --text-size-4xl: 44px;
  --text-size-5xl: 58px;

  --leading-tight:  1.15;
  --leading-snug:   1.28;
  --leading-normal: 1.45;
  --leading-relaxed:1.62;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* tracking: tighter as type grows, looser for small caps labels */
  --tracking-display: -0.028em;
  --tracking-heading: -0.016em;
  --tracking-body:    -0.004em;
  --tracking-label:   0.04em;
  --tracking-caps:    0.09em;

  /* named roles */
  --type-display:      var(--weight-medium) var(--text-size-4xl)/var(--leading-tight) var(--font-sans);
  --type-title:        var(--weight-semibold) var(--text-size-2xl)/var(--leading-snug) var(--font-sans);
  --type-section:      var(--weight-semibold) var(--text-size-lg)/var(--leading-snug) var(--font-sans);
  --type-body:         var(--weight-regular) var(--text-size-base)/var(--leading-normal) var(--font-sans);
  --type-body-sm:      var(--weight-regular) var(--text-size-md)/var(--leading-normal) var(--font-sans);
  --type-ui:           var(--weight-medium) var(--text-size-md)/1.2 var(--font-sans);
  --type-table-head:   var(--weight-medium) var(--text-size-xs)/1.2 var(--font-sans);
  --type-numeric:      var(--weight-regular) var(--text-size-md)/1.2 var(--font-numeric);
  --type-numeric-big:  var(--weight-medium) var(--text-size-3xl)/1.05 var(--font-numeric);
  --type-eyebrow:      var(--weight-semibold) var(--text-size-2xs)/1.2 var(--font-sans);

  /* bilingual safety valves — German labels run ~30% longer than English */
  --label-wrap: balance; /* @kind other */
  --hyphens: auto; /* @kind other */
}

/* ---- tokens/space.css ---- */
/* adKick — spacing + radii. 4px base grid, with 2px and 6px available
   because dense table chrome needs sub-grid steps. */

:root {
  --space-0:  0px;
  --space-05: 2px;
  --space-1:  4px;
  --space-15: 6px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Kanten statt Radien. adKick hat keine gerundeten Ecken — Behälter werden
     stattdessen an einer Ecke GEKERBT (Etikett-Logik). Der Kreis bleibt nur
     für Lochung, Zustandspunkt und Avatar. */
  --radius-xs:   0px;
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-xl:   0px;
  --radius-2xl:  0px;
  --radius-pill: 999px;

  /* Kerbe: die Signaturform. Große Behälter 9px, Zeilen und Chips 6px. */
  --notch:    9px;
  --notch-sm: 6px;
  /* Zustandskante links an Kachel und Zeile */
  --edge-width: 3px;
  /* Lochung links im Etikett */
  --punch: 6px;

  /* fixed chrome */
  --rail-width: 236px;
  --rail-width-collapsed: 60px;
  --topbar-height: 52px;
  --topbar-height-client: 64px;
  --content-max: 1440px;
  --prose-max: 68ch;

  --border-width: 1px;
  --border-width-strong: 1.5px;
  /* die 2px-Regel, die Abschnitte gliedert (statt Flächen) */
  --rule-width: 2px;
  --focus-ring-width: 3px;
}

/* ---- tokens/density.css ---- */
/* adKick — density. THE core mechanic of this system.
   The same components serve two readers, so every size that changes between
   them is a token, and only these tokens change. Colour, type family, radii,
   borders and icons are identical in both — that is what keeps the two
   surfaces recognisably one brand.

     <html data-density="console">  internal agency workspace (default)
     <html data-density="client">   client-facing, calm and explaining

   Dazu, ORTHOGONAL, die Berührschicht:

     <html data-density="console" data-touch="on">
     <html data-density="client"  data-touch="auto">   (nur bei grobem Zeiger)

   CONSOLE: 32px rows, 13px body, tight gaps, borders do the separating,
            everything above the fold, no decorative whitespace.
   CLIENT : 52px rows, 15px body, generous gaps, more surface and less border,
            room for an explaining sentence under every number. */

:root,
[data-density="console"] {
  --density-name: "console"; /* @kind other */

  --row-height: 32px;
  --row-height-head: 30px;
  --cell-pad-x: 10px;
  --cell-pad-y: 5px;

  --card-pad: 14px;
  --card-pad-tight: 10px;
  --card-gap: 10px;
  --card-radius: var(--radius-lg);

  --stack-gap: 8px;
  --group-gap: 16px;
  --section-gap: 24px;
  --page-pad-x: 20px;
  --page-pad-y: 16px;

  --control-height: 30px;
  --control-height-sm: 24px;
  --control-height-lg: 36px;
  --control-pad-x: 10px;
  --control-radius: var(--radius-sm);

  --text-size-body: var(--text-size-md);
  --text-size-body-strong: var(--text-size-md);
  --text-size-metric: var(--text-size-xl);
  --text-size-heading: var(--text-size-lg);
  --line-height-body: var(--leading-snug);

  --icon-size: 15px;
  --icon-size-sm: 13px;

  /* explaining copy is suppressed, not deleted, in the console */
  --explainer-display: none; /* @kind other */
  --card-shadow: var(--shadow-xs);
}

[data-density="client"] {
  --density-name: "client"; /* @kind other */

  --row-height: 52px;
  --row-height-head: 40px;
  --cell-pad-x: 16px;
  --cell-pad-y: 12px;

  --card-pad: 24px;
  --card-pad-tight: 18px;
  --card-gap: 16px;
  --card-radius: var(--radius-xl);

  --stack-gap: 14px;
  --group-gap: 24px;
  --section-gap: 48px;
  --page-pad-x: 40px;
  --page-pad-y: 32px;

  --control-height: 40px;
  --control-height-sm: 32px;
  --control-height-lg: 48px;
  --control-pad-x: 16px;
  --control-radius: var(--radius-md);

  --text-size-body: var(--text-size-lg);
  --text-size-body-strong: var(--text-size-lg);
  --text-size-metric: var(--text-size-3xl);
  --text-size-heading: var(--text-size-2xl);
  --line-height-body: var(--leading-relaxed);

  --icon-size: 18px;
  --icon-size-sm: 15px;

  --explainer-display: block; /* @kind other */
  --card-shadow: var(--shadow-sm);
}

/* ---- Berührschicht ----------------------------------------------------
   ENTSCHEIDUNG: keine dritte Dichtestufe, sondern eine Zusatzschicht.

   Dichte ist eine Aussage darüber, WER liest (Agentur oder Kunde). Berührung
   ist eine Aussage darüber, WOMIT gezeigt wird (Finger oder Zeiger). Das sind
   zwei unabhängige Fragen: eine Agenturmitarbeiterin auf dem Tablet braucht
   Konsolendichte UND Berührflächen; ein Kunde am Rechner braucht Kundendichte
   OHNE. Eine dritte Stufe "touch" würde zwingen, eine der beiden Aussagen
   aufzugeben, und die Zwei-Leser-Aussage des Systems verwässern. Als Schicht
   ergibt sie vier gültige Kombinationen aus zwei kleinen Blöcken.

   Die Schicht hebt nur, was angefasst wird: Steuerhöhen, Zeilenhöhe,
   Symbolgröße, Zellenpolster und den Mindestabstand zwischen Zielen. Farbe,
   Schriftfamilie, Kerbe, Bänder und Radien bleiben unberührt — eine berührte
   Oberfläche ist dieselbe Marke, nur mit größeren Zielen.

   REGEL: alles Antippbare ist mindestens 44px hoch. Deshalb sind
   --control-height-sm und --control-height hier gleich groß: eine kleine
   Schaltfläche ist in Berührung keine kleinere Trefferfläche, sondern nur
   optisch zurückhaltender (sie behält ihr Polster, nicht ihre Höhe).
   `size="sm"` bleibt dadurch benutzbar, ohne dass Bildschirme umgebaut werden. */

[data-touch="on"],
[data-density][data-touch="on"] {
  --touch-name: "on"; /* @kind other */

  --control-height-sm: 44px;
  --control-height: 44px;
  --control-height-lg: 52px;
  --control-pad-x: 16px;

  --row-height: 48px;
  --row-height-head: 40px;
  --cell-pad-x: 14px;
  --cell-pad-y: 10px;

  --icon-size: 20px;
  --icon-size-sm: 18px;

  /* Mindestabstand zwischen zwei Zielen. Unter 8px verschmelzen zwei
     44px-Flächen zu einer Fehlerquelle. */
  --stack-gap: 12px;
  --card-gap: 14px;
}

/* Opt-in-Automatik: nur dort, wo der Zeiger wirklich grob ist. Bewusst NICHT
   pauschal per Media Query, sonst kippt jede Entwurfsvorschau auf dem Tablet
   ungefragt um. */
@media (pointer: coarse) {
  [data-touch="auto"] {
    --touch-name: "auto"; /* @kind other */
    --control-height-sm: 44px;
    --control-height: 44px;
    --control-height-lg: 52px;
    --control-pad-x: 16px;
    --row-height: 48px;
    --row-height-head: 40px;
    --cell-pad-x: 14px;
    --cell-pad-y: 10px;
    --icon-size: 20px;
    --icon-size-sm: 18px;
    --stack-gap: 12px;
    --card-gap: 14px;
  }
}

/* ---- tokens/elevation.css ---- */
/* adKick — Höhe. Schatten sind violett getönt (nie neutral schwarz) und sehr
   kontrastarm: das hier ist eine Instrumententafel, kein Kartenstapel.
   Die Trennung macht die Haarlinie; Schatten erscheint nur, wenn etwas
   wirklich über der Seite schwebt (Menü, Dialog, Ziehen). In der dunklen
   Fassung verschwindet er fast völlig — dort trägt der Flächensprung. */

:root {
  /* Flach. Trennung macht die Haarlinie, nicht der Schatten — nur was
     wirklich über der Seite schwebt, wirft einen. */
  --shadow-xs:  none;
  --shadow-sm:  0 1px 0 oklch(0.220 0.027 312 / 0.10);
  --shadow-md:  0 4px 10px -2px oklch(0.220 0.027 312 / 0.12), 0 1px 0 oklch(0.220 0.027 312 / 0.06);
  --shadow-lg:  0 14px 34px -8px oklch(0.220 0.027 312 / 0.20), 0 2px 6px oklch(0.220 0.027 312 / 0.08);
  --shadow-pop: 0 10px 28px -6px oklch(0.220 0.027 312 / 0.22), 0 1px 3px oklch(0.220 0.027 312 / 0.10);

  /* inner shadow, used only on sunken inputs in dark mode and on scroll
     shadows at the top edge of a sticky table head */
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.6);
  --shadow-scroll: 0 6px 8px -6px oklch(0.220 0.027 312 / 0.20);

  /* the focus ring — one ring for the whole system */
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--ring-focus);

  /* blur is used in exactly two places: the sticky topbar and dialog scrim */
  --blur-chrome: saturate(1.6) blur(10px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
/* adKick — motion. Fast, flat, no bounce. Nothing overshoots: numbers that
   spring look untrustworthy. Data never animates in on load; only user-driven
   state changes animate. */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  /* hover, press, checkbox */
  --dur-instant: 80ms; /* @kind other */
  /* tab switch, chip toggle, tooltip */
  --dur-fast: 140ms; /* @kind other */
  /* panel open, row expand */
  --dur-base: 200ms; /* @kind other */
  /* dialog, drawer, page-level fade */
  --dur-slow: 320ms; /* @kind other */

  --transition-hover: background-color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out); /* @kind other */
  --transition-press: transform var(--dur-instant) var(--ease-out); /* @kind other */

  /* press = 1px downward nudge, never a scale-down */
  --press-translate: translateY(1px); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --press-translate: none; /* @kind other */
  }
}

/* ---- tokens/base.css ---- */
/* adKick — base layer. Element defaults + the few global utilities the
   components rely on. Components themselves are styled with inline style
   objects reading these custom properties, so this file stays small. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: var(--tracking-heading); font-weight: var(--weight-semibold); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
h1 { font-size: var(--text-size-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-size-2xl); line-height: var(--leading-snug); }
h3 { font-size: var(--text-size-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-size-lg); line-height: var(--leading-snug); }

a { color: var(--text-link); text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: var(--transition-hover); }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
a:active { color: var(--text-link-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: var(--border-width) solid var(--border-subtle); margin: var(--group-gap) 0; }
table { border-collapse: separate; border-spacing: 0; }

::selection { background: var(--brand-200); color: var(--n-900); }
[data-theme="dark"] ::selection { background: oklch(0.665 0.295 328 / 0.45); color: var(--text-primary); }

/* thin, self-effacing scrollbars — dense tables scroll constantly */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }

/* ---- utilities the components use ------------------------------------- */

/* every number, everywhere */
.ak-num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* small caps label — the one place tracking opens up */
.ak-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }

/* bilingual safety: German strings are ~30% longer than English. Any label
   that sits in a fixed-width slot gets this. It never truncates a number. */
.ak-label { min-width: 0; overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; }
.ak-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* explaining sentence: present in the markup for both readers, shown only in
   client density. Never put load-bearing information in here. */
.ak-explainer { display: var(--explainer-display); color: var(--text-secondary); font-size: var(--text-size-md); line-height: var(--leading-relaxed); text-wrap: pretty; }

.ak-hairline { border: 0; border-top: var(--border-width) solid var(--border-subtle); }
.ak-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the one background texture in the system: a 1px magenta grid at 7% used on
   empty states and on the client report cover. Never behind text. */
.ak-grid-bg {
  background-image: linear-gradient(to right, oklch(0.665 0.295 328 / 0.07) 1px, transparent 1px),
                    linear-gradient(to bottom, oklch(0.665 0.295 328 / 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ---- Kerbe: die Signaturform des Systems ------------------------------ */
/* Ein Behälter mit gekerbter Ecke kann keine Randlinie über `border` oder
   `box-shadow` tragen — die Kerbe würde sie wegschneiden. Deshalb zwei
   geklippte Schichten: außen die Linienfarbe, 1px darin die Flächenfarbe.
   Kinder brauchen keinen Eingriff, die Regel hebt sie über die Innenschicht. */
.ak-tick {
  position: relative;
  background: var(--tick-line, var(--border-default));
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
}
.ak-tick::before {
  content: "";
  position: absolute;
  inset: var(--border-width);
  z-index: 0;
  background: var(--tick-bg, var(--surface-card));
  clip-path: polygon(calc(var(--notch) - 1px) 0, 100% 0, 100% calc(100% - var(--notch) + 1px), calc(100% - var(--notch) + 1px) 100%, 0 100%, 0 calc(var(--notch) - 1px));
}
.ak-tick > * { position: relative; z-index: 1; }
/* Zeilen und Chips kerben kleiner */
.ak-tick-sm { --notch: var(--notch-sm); }

/* Zustandskante links im Etikett, innerhalb der Haarlinie */
.ak-edge { position: absolute; left: var(--border-width); top: calc(var(--notch) + 1px); bottom: var(--border-width); width: var(--edge-width); z-index: 1; }

/* Lochung links — das einzige runde Element neben Punkt und Avatar */
.ak-punch { width: var(--punch); height: var(--punch); flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface-page); box-shadow: 0 0 0 1px var(--border-default); }

/* Die 2px-Regel gliedert Abschnitte, statt sie in Flächen zu legen.
   Der Magenta-Anlauf links ist die einzige dekorative Verwendung der Marke. */
.ak-rule { position: relative; flex: 1; height: var(--rule-width); background: var(--border-rule); }
.ak-rule::after { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: var(--rule-width); background: var(--surface-brand); }

/* ---- styles.css ---- */
/* adKick Design System — global entry. Consumers link only this file. */