/* masticfrog Design System v1.1
   style.masticfrog.de

   Werte kommen aus tokens.json. Drei Regeln ueberstimmen alles andere:
   1. Amber ist die einzige Akzentfarbe, Statusfarben sind Zustaende.
   2. Keine Radien, keine Schatten. Tiefe nur ueber Flaeche und 1-px-Linien.
   3. Das Logo steht immer auf Ink (#2b2114), in Vielfachen von 24 px.

   Gliederung
   00 Reset
   01 Token: Resin, Modi, Typografie, Raster, Interaktion
   02 Grundelemente
   03 Hilfsklassen: Layout und Typografie
   04 Icons
   05 Kopfzeile, Navigation, Fusszeile
   06 Abschnitte
   07 Buttons
   08 Formulare und Steuerelemente
   09 Status, Dialog, Seitenzahlen
   10 Daten: Tabelle und Diagramme
   11 Bewegung und Umbrueche
*/

/* ---------------------------------------------------------------- 00 Reset */

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

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

body {
  margin: 0;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* Navigation ist immer <nav> + <ul>/<li> + <a href>. Die Liste traegt die
   Struktur, nicht die Optik, darum fallen Punkte und Einzug weg.

   :where() haelt die Spezifitaet bei 0-0-1, damit eine Klasse an derselben
   Liste gewinnt. Ohne das schlug `ul[class]` (0-1-1) die Klasse `.wrap`
   (0-1-0): die Kapitelleiste trug `.wrap`, bekam davon aber nur die Breite,
   waehrend `margin: 0 auto` und der Randabstand still verworfen wurden. Die
   Leiste stand deshalb linksbuendig statt unter der Wortmarke. */
ul:where([class]), ol:where([class]),
nav :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* --------------------------------------------------------------- 01 Token */

:root {
  /* Resin. Stammt aus dem Logo und aendert sich nie, in beiden Modi. */
  --resin-100: #fffaf0;
  --resin-200: #f6e7b4;
  --resin-400: #e0c377;
  --resin-600: #b8933f;
  --resin-800: #6b4f1a;
  --ink: #2b2114;

  /* Schrift, selbst gehostet. Faellt die Pixelschrift aus, uebernimmt
     Space Mono, nie eine System-Serif. */
  --font-pixel: 'Pixelify Sans', 'Space Mono', monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;

  /* Typografische Skala aus tokens.json */
  --type-display-pixel: 44px;
  --type-display-xl: 48px;
  --type-heading-lg: 32px;
  --type-heading-sm: 20px;
  --type-body-lg: 16px;
  --type-body-sm: 13px;
  --type-label: 10px;

  /* Kleinteilige Groessen der Guide-Oberflaeche selbst. Sie stehen hier,
     damit im Komponentencode keine freien px-Werte auftauchen. */
  --type-meta: 11px;
  --type-note: 12px;
  --type-field: 14px;
  --type-hero-mark: 60px;
  --type-hero-lead: 18px;

  --track-label: 0.16em;
  --track-mark: 0.02em;
  --track-button: 0.06em;
  --track-wordmark: 0.04em;
  --leading-body: 1.6;
  --leading-tight: 1.55;

  /* Abstaende */
  --space-1: 8px;
  --space-2: 20px;
  --space-3: 40px;
  --space-4: 76px;

  /* Geometrie. Radius 0 und kein Schatten sind Gesetz, nicht Vorgabe. */
  --container: 1120px;
  --gutter: 40px;
  --gap: 20px;
  --hairline: 1px;

  /* Interaktion */
  --hit: 44px;
  --hit-mobile: 56px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --dur-hover: 120ms;
  --dur-active: 60ms;
  --ease: ease-out;

  /* Light. Standard, solange niemand etwas anderes waehlt. */
  --surface-page: #eae2d2;
  --surface-panel: #f9f6ef;
  --surface-ink: #2b2114;
  --border-hairline: #cabda3;
  --border-strong: #8a7159;
  --text-heading: #1a1309;
  --text-body: #40382a;
  --text-muted: #6b6152;
  --accent: #8a5c00;
  --button-primary-bg: #1a1309;
  --button-primary-fg: #f6e7b4;
  --status-success: #2f6b1f;
  --status-success-bg: #dcefd0;
  --status-warning: #8a5300;
  --status-warning-bg: #fbe6b4;
  --status-danger: #a81f0e;
  --status-danger-bg: #fbdcd6;
  --status-info: #1c4a72;
  --status-info-bg: #d4e6f5;
  --link: #8a5c00;
  --link-hover: #1a1309;
  --on-accent: #fffaf0;
  --on-danger: #fffaf0;
  --series-1: #8a5c00;
  --series-2: #14595b;
  --series-3: #6b2f52;
  --series-4: #3d3a34;

  /* Fusszeile laeuft in beiden Modi auf Ink, darum feste Werte.
     --footer-small stand im Entwurf auf #6b6250. Das sind nur 2.62 : 1
     gegen Ink und damit ein Blocker nach Kapitel 09. Hier steht der
     Wert, den die Fusszeile ohnehin fuehrt: 4.77 : 1. Die Abstufung
     traegt jetzt Groesse und Tracking, nicht die Helligkeit. */
  --footer-bg: #2b2114;
  --footer-link: #e0c377;
  --footer-link-hover: #fffaf0;
  --footer-text: #9a8c6c;
  --footer-small: #9a8c6c;
  --footer-rule: #453721;

  /* Haken und Minus der Checkbox als Maske. Die Farbe kommt aus --on-accent,
     die Form aus derselben Lucide-Bibliothek wie alle anderen Icons. */
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --mask-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Dark. Einmal fuer die Systemwahl, einmal fuer die manuelle Wahl.
   Kein filter: invert, kein opacity-Trick, jeder Wert steht ausgeschrieben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-page: #100e0b;
    --surface-panel: #1e1b16;
    --surface-ink: #2b2114;
    --border-hairline: #463f33;
    --border-strong: #786e5a;
    --text-heading: #fdf8ee;
    --text-body: #d8cdb4;
    --text-muted: #a3947a;
    --accent: #f0cf7e;
    --button-primary-bg: #f0cf7e;
    --button-primary-fg: #1a1309;
    --status-success: #96e06a;
    --status-success-bg: #1a2612;
    --status-warning: #ffc44d;
    --status-warning-bg: #2b2110;
    --status-danger: #ff8e79;
    --status-danger-bg: #2e1613;
    --status-info: #7cc4ff;
    --status-info-bg: #121e2b;
    --link: #f0cf7e;
    --link-hover: #fdf8ee;
    --on-accent: #1a1309;
    --on-danger: #2b1109;
    --series-1: #f0cf7e;
    --series-2: #6fd0cf;
    --series-3: #e996bf;
    --series-4: #b3aa98;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --surface-page: #100e0b;
  --surface-panel: #1e1b16;
  --surface-ink: #2b2114;
  --border-hairline: #463f33;
  --border-strong: #786e5a;
  --text-heading: #fdf8ee;
  --text-body: #d8cdb4;
  --text-muted: #a3947a;
  --accent: #f0cf7e;
  --button-primary-bg: #f0cf7e;
  --button-primary-fg: #1a1309;
  --status-success: #96e06a;
  --status-success-bg: #1a2612;
  --status-warning: #ffc44d;
  --status-warning-bg: #2b2110;
  --status-danger: #ff8e79;
  --status-danger-bg: #2e1613;
  --status-info: #7cc4ff;
  --status-info-bg: #121e2b;
  --link: #f0cf7e;
  --link-hover: #fdf8ee;
  --on-accent: #1a1309;
  --on-danger: #2b1109;
  --series-1: #f0cf7e;
  --series-2: #6fd0cf;
  --series-3: #e996bf;
  --series-4: #b3aa98;
  color-scheme: dark;
}

/* -------------------------------------------------------- 02 Grundelemente */

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: var(--hairline) solid currentColor;
}

strong {
  font-weight: 600;
  color: var(--text-heading);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Fokus. Sichtbar in beiden Modi, nie ohne Ersatz abgeschaltet. */
:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* Sprunglink: erstes fokussierbares Element im DOM. */
.skip-link {
  position: absolute;
  left: var(--space-1);
  top: var(--space-1);
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0 var(--space-2);
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-bottom: 0;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------- 03 Layout und Schrift */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.grid {
  display: grid;
  gap: var(--gap);
}

.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split-sidebar { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.split-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.panel {
  min-width: 0;
  background: var(--surface-panel);
  border: var(--hairline) solid var(--border-hairline);
}

.pad {
  padding: var(--gap);
}

.pad-lg {
  padding: 24px;
}

/* Typografie. Skala aus tokens.json. */
.t-pixel {
  font-family: var(--font-pixel);
  font-size: var(--type-display-pixel);
  font-weight: 400;
  letter-spacing: var(--track-mark);
  line-height: 1;
  text-transform: none;
}

.t-display {
  font-family: var(--font-mono);
  font-size: var(--type-display-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.t-h-lg {
  font-family: var(--font-mono);
  font-size: var(--type-heading-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.t-h-sm {
  font-family: var(--font-mono);
  font-size: var(--type-heading-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-heading);
}

.t-body {
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.t-body-sm {
  font-size: var(--type-body-sm);
  line-height: var(--leading-tight);
}

/* label/mono: Versalien, durchgehend 0.16em Tracking. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.t-note {
  font-size: var(--type-note);
  line-height: 1.5;
  color: var(--text-muted);
}

.prose {
  max-width: 70ch;
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}

.muted { color: var(--text-muted); }
.heading-colour { color: var(--text-heading); }

/* Werte, die sich pro Modus unterscheiden, stehen doppelt im Markup und
   werden per CSS umgeschaltet. So stimmt der abgedruckte Hexwert auch
   ohne JavaScript immer mit der Flaeche daneben ueberein. */
.m-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .m-dark { display: inline; }
  :root:not([data-theme='light']) .m-light { display: none; }
}

:root[data-theme='dark'] .m-dark { display: inline; }
:root[data-theme='dark'] .m-light { display: none; }

/* Zahlen laufen immer tabellarisch, damit Ziffern buendig stehen. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Flaechen-Hilfsklassen. Sie halten Hexwerte aus dem Markup heraus:
   im HTML steht ein Tokenname, nie eine Farbe. */
.bg-page { background: var(--surface-page); }
.bg-panel { background: var(--surface-panel); }
.bg-ink { background: var(--ink); }
.bg-hairline { background: var(--border-hairline); }
.bg-strong { background: var(--border-strong); }
.bg-text-body { background: var(--text-body); }
.bg-accent { background: var(--accent); }
.bg-resin-100 { background: var(--resin-100); }
.bg-resin-200 { background: var(--resin-200); }
.bg-resin-400 { background: var(--resin-400); }
.bg-resin-600 { background: var(--resin-600); }
.bg-resin-800 { background: var(--resin-800); }
.fill-1 { background: var(--series-1); }
.fill-2 { background: var(--series-2); }
.fill-3 { background: var(--series-3); }
.fill-4 { background: var(--series-4); }

.h-space-1 { height: var(--space-1); }
.h-space-2 { height: var(--space-2); }
.h-space-3 { height: var(--space-3); }
.h-space-4 { height: var(--space-4); }

/* Statuszustaende. Jeder Zustand traegt sein Paar: Farbe und Flaeche
   gehoeren zusammen und werden nie gemischt. */
.s-success { --st: var(--status-success); --st-bg: var(--status-success-bg); }
.s-warning { --st: var(--status-warning); --st-bg: var(--status-warning-bg); }
.s-danger { --st: var(--status-danger); --st-bg: var(--status-danger-bg); }
.s-info { --st: var(--status-info); --st-bg: var(--status-info-bg); }

/* ---------------------------------------------------------------- 04 Icons */

.icon-sprite {
  display: none;
}

/* Outline, 1.5 px Strich, currentColor. Groessen nur 14, 16, 20. */
.ic {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-14 { width: 14px; height: 14px; }
.ic-20 { width: 20px; height: 20px; }

/* Haken der Checkbox: kraeftiger, sonst verschwindet er auf 20 px. */
.ic-check-bold { stroke-width: 3; }

/* --------------------------------------------- 05 Kopf, Navigation, Fuss */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-panel);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  color: var(--text-heading);
}

/* Logotraeger: immer Ink, Marke in Vielfachen von 24 px. */
.logo-tile {
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
}

.logo-tile--40 { width: 40px; height: 40px; }
.logo-tile--72 { width: 72px; height: 72px; }
.logo-tile--96 { width: 96px; height: 96px; }
.logo-tile--120 { width: 120px; height: 120px; }

/* Nie weichgezeichnet, nie gedreht, nie verzerrt. */
.logo {
  image-rendering: pixelated;
}

.brand__name {
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: var(--track-wordmark);
  color: var(--text-heading);
}

.brand__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Modusumschalter */
.mode-switch {
  display: flex;
  border: var(--hairline) solid var(--border-hairline);
}

.mode-switch__btn {
  display: flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease);
}

/* Zustandsklassen stehen neben den ARIA-Attributen.
   Firefox rechnet den Stil nicht neu, wenn ein aria-Attribut erst per
   Skript gesetzt wird; das Attribut bleibt trotzdem stehen, denn es
   traegt die Bedeutung. Die Klasse traegt nur das Aussehen. */
.mode-switch__btn[aria-pressed='true'],
.mode-switch__btn.is-active {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

/* Kapitelnavigation */
.site-nav {
  border-top: var(--hairline) solid var(--border-hairline);
}

.site-nav__list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Nur die Kapitelleiste im Seitenkopf. Dieselbe Liste dient in Kapitel 07
   als Beispielnavigation, die soll davon nichts abbekommen. */
.site-nav > .site-nav__list {
  /* Eine Zeile, nie zwei. Die Leiste ist eine Reiterleiste; bricht sie um,
     steht die zweite Zeile ohne eigene Trennlinie unter der ersten und sieht
     aus wie ein zweites Menue. Wird der Platz knapp, faellt zuerst die
     Kapitelnummer weg (siehe unten), danach schiebt sich die Leiste seitlich. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /* Die 14 px Innenabstand des ersten Links zuruecknehmen, damit Text und
     Aktivlinie genau unter der Wortmarke sitzen statt 14 px daneben. */
  padding-inline: calc(var(--gutter) - 14px);
}

.site-nav__link,
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--hit);
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

/* Die aktive Seite traegt eine 2-px-Amber-Linie, nie eine Flaeche. */
.site-nav__link[aria-current='page'],
.nav-link[aria-current='page'],
.site-nav__link.is-current,
.nav-link.is-current {
  color: var(--text-heading);
  border-bottom-color: var(--accent);
}

.site-nav__range {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

/* Menuetaste, nur unter 600 px sichtbar. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--hit);
  min-height: var(--hit);
  padding: 0 14px;
  background: transparent;
  border: var(--hairline) solid var(--border-strong);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-heading);
}

/* Fusszeile: laeuft in beiden Modi auf Ink. */
.site-footer {
  background: var(--footer-bg);
  padding-block: var(--space-3);
  color: var(--footer-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer-title {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--footer-small);
}

.footer-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--type-body-sm);
  color: var(--footer-link);
  text-decoration: none;
  border-bottom: 0;
  transition: color var(--dur-hover) var(--ease);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--footer-rule);
}

.footer-legal__list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer-legal__link {
  display: flex;
  align-items: center;
  min-height: var(--hit);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--footer-text);
  text-decoration: none;
  border-bottom: 0;
  transition: color var(--dur-hover) var(--ease);
}

.footer-small {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--footer-small);
}

/* ----------------------------------------------------------- 06 Abschnitte */

main {
  display: block;
}

.sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-3) 88px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  scroll-margin-top: 140px;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.section__icon {
  align-self: center;
  color: var(--accent);
}

.section__no {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-label);
  color: var(--accent);
}

.section__title {
  font-family: var(--font-mono);
  font-size: var(--type-heading-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.section__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

/* Hero. Laeuft immer auf Ink, unabhaengig vom Modus. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 64px var(--space-3);
  background: var(--ink);
  border: var(--hairline) solid var(--border-hairline);
  text-align: center;
}

.hero__kicker,
.hero__note {
  font-family: var(--font-mono);
  font-size: var(--type-note);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.hero__kicker { color: var(--footer-text); }
.hero__note { color: var(--footer-small); }

/* Die Wortmarke skaliert mit, bleibt aber nie unter 20 px und wird nie
   groesser als der Hero-Wert. Umbrechen darf sie nicht. */
.hero__mark {
  font-family: var(--font-pixel);
  font-size: max(var(--type-heading-sm), min(var(--type-hero-mark), 10vw));
  font-weight: 400;
  letter-spacing: var(--track-mark);
  line-height: 1;
  color: var(--resin-400);
}

.hero__lead {
  max-width: 34ch;
  font-size: var(--type-hero-lead);
  line-height: var(--leading-body);
  color: var(--footer-text);
  text-wrap: pretty;
}

/* Farbkacheln */
.swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: var(--hairline) solid var(--border-hairline);
}

.swatch {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.swatch__chip {
  height: 104px;
}

.swatch__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface-panel);
  border-top: var(--hairline) solid var(--border-hairline);
}

.surface-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.surface-card__chip {
  flex: none;
  width: 52px;
  height: 52px;
  border: var(--hairline) solid var(--border-hairline);
}

/* Typografische Skala */
.scale-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px var(--space-2);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.scale-row:last-child {
  border-bottom: 0;
}

.scale-row__token {
  flex: none;
  width: 172px;
}

.scale-row__spec {
  flex: none;
  width: 92px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  color: var(--text-muted);
}

.scale-row__sample {
  min-width: 0;
  line-height: 1.15;
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-Uebersicht */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  background: var(--surface-panel);
  border: var(--hairline) solid var(--border-hairline);
}

.icon-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px var(--space-1);
  border-right: var(--hairline) solid var(--border-hairline);
  border-bottom: var(--hairline) solid var(--border-hairline);
  color: var(--text-heading);
}

.icon-cell__name {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--track-mark);
  color: var(--text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Regelkarten */
.rule-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.rule-card__icon {
  color: var(--accent);
}

.rule-card__title {
  font-family: var(--font-mono);
  font-size: var(--type-note);
  font-weight: 700;
  color: var(--text-heading);
}

.mark-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mark-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--type-note);
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}

.mark-list__item .ic {
  margin-top: 3px;
}

.mark-yes { color: var(--status-success); }
.mark-no { color: var(--status-danger); }

/* -------------------------------------------------------------- 07 Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--hit);
  padding: 13px 22px;
  border: var(--hairline) solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  letter-spacing: var(--track-button);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}

.btn:active {
  transform: translateY(1px);
  transition-duration: var(--dur-active);
}

.btn--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-color: var(--button-primary-bg);
}

.btn--secondary {
  border-color: var(--border-strong);
  color: var(--text-heading);
}

/* destructive ist die Button-Variante, danger der Zustand. */
.btn--destructive {
  background: var(--status-danger);
  color: var(--on-danger);
  border-color: var(--status-danger);
}

.btn--destructive-outline {
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.btn--compact {
  min-height: var(--hit);
  padding: 0 18px;
  font-size: var(--type-note);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: default;
}

/* Ein Textlink ist ein Seitenwechsel, kein Button. Er folgt Kapitel 07. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--hit);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 0;
  transition: color var(--dur-hover) var(--ease);
}

/* Ladezustand: Beschriftung bleibt stehen, nur das Icon dreht sich. */
.btn[data-loading='true'] .ic {
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------- 08 Formulare */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-body);
}

.field__input {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--hit);
  padding: 0 14px;
  background: var(--surface-page);
  border: var(--hairline) solid var(--border-strong);
  font-family: var(--font-sans);
  font-size: var(--type-field);
  color: var(--text-heading);
}

.field__input:focus-visible {
  border-color: var(--accent);
  outline: var(--focus-width) solid var(--accent);
  outline-offset: 2px;
}

.field__input[aria-invalid='true'] {
  border-color: var(--status-danger);
}

.field__input[disabled] {
  opacity: 0.4;
}

.field__hint {
  font-size: var(--type-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

.field__hint--error {
  color: var(--status-danger);
}

/* Auswahl. Kaestchen und Schalter bleiben rechtwinklig. */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hit);
  font-size: var(--type-field);
  color: var(--text-heading);
  cursor: pointer;
}

.choice:has(input[disabled]) {
  opacity: 0.4;
  cursor: default;
}

.choice input[type='checkbox'],
.choice input[type='radio'] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: transparent;
  border: var(--hairline) solid var(--border-strong);
  border-radius: 0;
  cursor: inherit;
  transition: background-color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

/* Die Klasse steht neben :indeterminate, weil Firefox den Stil nicht neu
   berechnet, wenn die Eigenschaft erst per Skript gesetzt wird. Die
   Eigenschaft selbst bleibt gesetzt, sonst meldet der Screenreader
   nicht "gemischt". */
.choice input[type='checkbox']:checked,
.choice input[type='checkbox']:indeterminate,
.choice input[type='checkbox'].is-indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  /* Haken bzw. Minus als Maske, damit die Farbe aus dem Token kommt. */
  background-image: none;
}

.choice input[type='checkbox']:checked::after,
.choice input[type='checkbox']:indeterminate::after,
.choice input[type='checkbox'].is-indeterminate::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--on-accent);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

.choice input[type='checkbox']:checked::after {
  -webkit-mask-image: var(--mask-check);
  mask-image: var(--mask-check);
}

.choice input[type='checkbox']:indeterminate::after,
.choice input[type='checkbox'].is-indeterminate::after {
  -webkit-mask-image: var(--mask-minus);
  mask-image: var(--mask-minus);
}

/* Der Radiobutton ist der einzige Kreis im System. */
.choice input[type='radio'] {
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.choice input[type='radio']:checked {
  border-color: var(--accent);
}

.choice input[type='radio']:checked::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Schalter. Knauf und Spur nie gleichfarbig. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--hit);
  font-size: var(--type-field);
  color: var(--text-heading);
}

.switch {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 48px;
  height: 26px;
  padding: 3px;
  background: transparent;
  border: var(--hairline) solid var(--border-strong);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.switch__knob {
  width: 18px;
  height: 18px;
  background: var(--text-heading);
  transition: background-color var(--dur-hover) var(--ease),
    transform var(--dur-hover) var(--ease);
}

.switch[aria-checked='true'],
.switch.is-on {
  background: var(--accent);
  border-color: var(--accent);
}

.switch[aria-checked='true'] .switch__knob,
.switch.is-on .switch__knob {
  background: var(--on-accent);
  transform: translateX(22px);
}

/* Segmente */
.segmented {
  display: flex;
  align-self: flex-start;
  border: var(--hairline) solid var(--border-strong);
}

.segmented__btn {
  display: flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease);
}

.segmented__btn[aria-pressed='true'],
.segmented__btn.is-active {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

/* Regler. Spur 4 px, Griff 14 x 22, Trefferflaeche 44. */
.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--hit);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--slider-fill, 64%),
    var(--border-hairline) var(--slider-fill, 64%) 100%
  );
}

.slider::-moz-range-track {
  height: 4px;
  background: var(--border-hairline);
}

.slider::-moz-range-progress {
  height: 4px;
  background: var(--accent);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -9px;
  background: var(--button-primary-bg);
  border: var(--hairline) solid var(--accent);
  border-radius: 0;
}

.slider::-moz-range-thumb {
  width: 14px;
  height: 22px;
  background: var(--button-primary-bg);
  border: var(--hairline) solid var(--accent);
  border-radius: 0;
}

/* Verlauf */
.progress {
  height: 8px;
  background: var(--border-hairline);
}

.progress__fill {
  height: 100%;
  background: var(--accent);
}

/* Ladeplatzhalter: flach, kein Schimmern, kein Puls. */
.skeleton {
  height: 12px;
  background: var(--border-hairline);
}

/* ------------------------------------------- 09 Status, Dialog, Seitenzahlen */

.status-card {
  display: flex;
  flex-direction: column;
}

.status-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--st-bg);
  border-bottom: var(--hairline) solid var(--st);
  color: var(--st);
}

.status-card__label {
  font-family: var(--font-mono);
  font-size: var(--type-note);
  font-weight: 700;
}

.status-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 14px 16px;
}

.status-card__tokens {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  border-top: var(--hairline) solid var(--border-hairline);
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--st-bg);
  border-left: 3px solid var(--st);
  color: var(--st);
  font-size: var(--type-body-sm);
  line-height: 1.5;
}

.message .ic {
  margin-top: 2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--st-bg);
  border: var(--hairline) solid var(--st);
  color: var(--st);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Dialog: rechteckig, kein Schatten, Flaeche dunkler als das Panel. */
.dialog {
  background: var(--surface-page);
  border: var(--hairline) solid var(--border-strong);
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.dialog__title {
  font-family: var(--font-mono);
  font-size: var(--type-note);
  font-weight: 700;
  color: var(--text-heading);
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--dur-hover) var(--ease);
}

.dialog__body {
  padding: 16px;
  font-size: var(--type-body-sm);
  line-height: var(--leading-tight);
  text-wrap: pretty;
}

.dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

/* Kurzhinweis: Ink-Flaeche, kein Pfeil, kein Schatten. */
.tooltip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.pagination__list {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit);
  border: var(--hairline) solid var(--border-hairline);
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-note);
  text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease);
}

.pagination__link[aria-current='page'] {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

/* Navigationsbeispiele */
.nav-demo {
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--border-hairline);
}

.nav-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--space-2);
  background: var(--surface-panel);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.breadcrumb {
  padding: 11px var(--space-2);
  background: var(--surface-page);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__link,
.breadcrumb__current {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0;
}

.breadcrumb__link { color: var(--text-muted); }
.breadcrumb__current { color: var(--text-heading); }

/* Mobilmenue, im Guide als Beispiel, auf der Seite selbst in echt. */
.sheet__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--hit-mobile);
  padding: 0 18px;
  border-bottom: var(--hairline) solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  letter-spacing: var(--track-button);
  color: var(--text-body);
  text-decoration: none;
}

.sheet__item[aria-current='page'] {
  background: var(--surface-page);
  color: var(--text-heading);
}

.nav-states {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.nav-state__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit);
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}

.nav-state--hover .nav-state__link { color: var(--text-heading); }
.nav-state--active .nav-state__link {
  color: var(--text-heading);
  border-bottom-color: var(--accent);
}
.nav-state--focus .nav-state__link {
  color: var(--text-heading);
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}
.nav-state--disabled .nav-state__link { opacity: 0.4; }

.nav-state__name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

/* Raster und Trefferflaechen */
.grid-demo__col {
  height: var(--hit);
  background: var(--border-hairline);
}

.geometry-demo {
  display: flex;
  gap: 10px;
}

.geometry-demo__box {
  flex: 1;
  height: 56px;
  border: var(--hairline) solid var(--border-strong);
}

.geometry-demo__box--wrong {
  border-radius: 10px;
  opacity: 0.4;
}

.spacing-card__bar {
  background: var(--accent);
}

.hit-demo {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.hit-demo__ok {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  border: 2px solid var(--accent);
  color: var(--accent);
}

.hit-demo__bad {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--hairline) dashed var(--status-danger);
  color: var(--status-danger);
}

.focus-demo {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* Zustandstabelle */
.state-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 12px var(--space-2);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.state-row:last-child { border-bottom: 0; }

.state-row__name {
  flex: none;
  width: 132px;
  font-family: var(--font-mono);
  font-size: var(--type-note);
  color: var(--text-heading);
}

.state-row__timing {
  flex: none;
  width: 120px;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  color: var(--accent);
}

/* ------------------------------------------------------------- 10 Daten */

.data-table th,
.data-table td {
  padding: 13px 18px;
  border-bottom: var(--hairline) solid var(--border-hairline);
  text-align: left;
  vertical-align: middle;
}

.data-table thead th {
  padding-block: 11px;
  border-bottom: var(--hairline) solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Zahlen rechts, Text links. Nie zentriert. */
.data-table .col-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body-sm);
  color: var(--text-heading);
}

.data-table tbody td {
  font-size: var(--type-body-sm);
  color: var(--text-body);
}

.data-table tbody td:first-child {
  color: var(--text-heading);
}

/* Sortierkopf ist ein echter Button, damit die Tastatur ihn erreicht. */
.sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  min-height: var(--hit);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-heading);
}

.sort-button .ic { color: var(--accent); }

.th-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--hit);
}

.th-num .th-inner { justify-content: flex-end; width: 100%; }

/* Summenzeile: 1 px border/strong darueber, Weight 600. */
.data-table tfoot td {
  border-top: var(--hairline) solid var(--border-strong);
  border-bottom: 0;
  font-weight: 600;
  color: var(--text-heading);
}

.data-table tfoot .col-num {
  font-weight: 700;
}

/* Fehlender Wert */
.empty-value { color: var(--text-muted); }

/* Diagramme */
.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-row__label {
  flex: none;
  width: 34px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bar-row__track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Keine Verlaeufe, keine Schatten, keine Radien. */
.bar {
  height: 18px;
}

.bar--thin { height: 9px; }

.bar-row__value {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-meta);
  color: var(--text-body);
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  color: var(--text-body);
}

.legend__chip {
  flex: none;
  width: 11px;
  height: 11px;
}

.series-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.series-row__chip {
  flex: none;
  width: 44px;
  height: 18px;
}

/* ------------------------------------------------------ 10a Logoseite */

.mark-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 44px;
  background: var(--ink);
}

.fact-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.fact-row__label {
  flex: none;
  width: 132px;
}

.fact-row__value {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--type-note);
  color: var(--text-heading);
}

.size-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.size-card__stage {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-2) 16px;
  background: var(--ink);
}

.size-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-top: var(--hairline) solid var(--border-hairline);
}

.combo-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.combo-card__stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-3) 24px;
}

.combo-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-top: var(--hairline) solid var(--border-hairline);
}

.combo-card__key {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  color: var(--accent);
}

/* Freiraum: ringsum vier Sprite-Pixel, ein Sechstel der Markenbreite. */
.clearspace {
  align-self: flex-start;
  padding: 24px;
  border: var(--hairline) dashed var(--border-strong);
}

.ground {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.ground__stage {
  width: 100%;
  height: 56px;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--border-hairline);
}

.snippet {
  padding: 14px;
  background: var(--surface-page);
  border: var(--hairline) solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--type-note);
  line-height: 1.7;
  color: var(--text-heading);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Das Raster: 24 x 24 Felder ueber der Marke, damit man sie nachbauen kann. */
.pixel-grid {
  position: relative;
  align-self: flex-start;
  width: 240px;
  height: 240px;
  background: var(--ink);
  outline: var(--hairline) solid var(--border-strong);
}

.pixel-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 10px);
}

:root {
  --grid-line: color-mix(in srgb, var(--resin-800) 55%, transparent);
}

/* ------------------------------------------- 11 Bewegung und Umbrueche */

/* Hover nur auf Zeigergeraeten, sonst klebt der Zustand auf Touch fest. */
@media (hover: hover) {
  a:hover { color: var(--link-hover); }
  .mode-switch__btn:hover { color: var(--text-heading); }
  .site-nav__link:hover,
  .nav-link:hover { color: var(--text-heading); }
  .btn--primary:hover { background: var(--text-heading); border-color: var(--text-heading); }
  .btn--secondary:hover { border-color: var(--text-heading); }
  .btn--destructive:hover { opacity: 0.9; }
  .link-action:hover { color: var(--link-hover); }
  .icon-button:hover { color: var(--text-heading); }
  .footer-link:hover,
  .footer-legal__link:hover { color: var(--footer-link-hover); }
  .pagination__link:hover:not([aria-current='page']) { color: var(--text-heading); }
  .segmented__btn:hover:not([aria-pressed='true']):not(.is-active) { color: var(--text-heading); }
  .sheet__item:hover { color: var(--text-heading); }
  .sort-button:hover { color: var(--accent); }
}

/* 12 Spalten bis 900 px, 6 Spalten bis 600 px, darunter eine. */
@media (max-width: 900px) {
  :root {
    --gutter: var(--space-2);
    --space-4: var(--space-3);
  }

  .g3, .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-sidebar,
  .split-wide { grid-template-columns: minmax(0, 1fr); }
  .scale-row__token { width: 128px; }
  .scale-row__spec { display: none; }
}

/* Wird die Kapitelleiste eng, fallen zuerst die Nummern weg und nicht die
   Namen: der Name traegt die Orientierung, die Nummer ist Beiwerk und steht
   ohnehin im title und in jeder Abschnittsueberschrift. Das reicht, damit
   alle fuenf Kapitel bis hinunter zur Menuetaste in einer Zeile bleiben.
   Unter 600 px ist die Leiste ein aufklappbares Menue mit Platz, dort
   kommen die Nummern zurueck. */
@media (min-width: 601px) and (max-width: 860px) {
  .site-nav__range { display: none; }
}

@media (max-width: 600px) {
  .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .g10 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  /* Kopfzeile umbricht, sonst rutschen Modusschalter und Menuetaste
     ueber den rechten Rand hinaus. */
  .site-header__top {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .header-tools {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .section__head { flex-wrap: wrap; }
  .section__meta { margin-left: 0; width: 100%; }
  .scale-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .scale-row__token { width: auto; }
  .hero { padding: var(--space-3) var(--space-2); }

  /* Unter 600 px ersetzt eine 44-px-Taste die Kapitelnavigation. */
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
  }

  .site-nav[data-open='true'] {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  /* Im aufgeklappten Menue tragen die Links den Randabstand selbst, die Liste
     laeuft randlos durch. Gleiche Schachtelung wie oben, sonst gewinnt die
     Regel fuer die Reiterleiste. */
  .site-nav > .site-nav__list {
    padding-inline: 0;
    overflow-x: visible;
  }

  .site-nav__link {
    min-height: var(--hit-mobile);
    justify-content: space-between;
    padding-inline: var(--gutter);
    border-bottom: var(--hairline) solid var(--border-hairline);
  }

  .site-nav__link[aria-current='page'],
  .site-nav__link.is-current {
    background: var(--surface-page);
    border-bottom-color: var(--accent);
  }

  .data-table-scroll {
    overflow-x: auto;
  }

  .data-table {
    min-width: 640px;
  }
}

/* Bewegung ist Beiwerk. Wer sie abbestellt, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active { transform: none; }
}

@media print {
  .site-header,
  .site-footer { display: none; }
}