/* sier.ing Corporate Design — globales CSS
   Quelle: design-tokens.json. Theme wird über data-theme auf <html> oder einem Container gesetzt:
   <html data-theme="pastel">  Optionen: pastel (Default) | pastelDark | highcontrast | buehneDunkel
   Alle drei Schriften (Berlin Type, Inter, Space Mono) liegen lokal unter ../fonts/ —
   keine Google-Fonts-Verbindung mehr nötig. @font-face unten anpassen falls Pfad abweicht. */

@font-face {
  font-family: 'Berlin Type';
  src: url('../fonts/BerlinType-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Berlin Type';
  src: url('../fonts/BerlinType-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBoldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic;
}
/* Londrina Solid — rund und roh, wie mit dickem Filzstift auf einen
   Case geschrieben. Steht unter der SIL Open Font License (im Font
   selbst vermerkt), liegt deshalb wie alle anderen lokal: keine
   Verbindung zu Google Fonts und damit keine Einwilligung nötig. */
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic;
}

/* ---- Theme-unabhängige Tokens: Form, Abstand, Motion, Type ---- */
:root {
  --cd-radius-karte: 16px;
  --cd-radius-chip: 100px;
  --cd-radius-icon: 10px;

  --cd-shadow-objekt: 0 14px 24px -8px rgba(0,0,0,0.32);
  --cd-shadow-objekt-klein: 0 10px 18px -6px rgba(0,0,0,0.28);
  --cd-border-width: 1px;

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

  --cd-icon-sm: 16px;
  --cd-icon-md: 20px;
  --cd-icon-lg: 24px;
  --cd-icon-xl: 32px;
  --cd-icon-kachel: 30px;

  --cd-motion-fast: 150ms ease-out;
  --cd-motion-normal: 250ms ease-out;
  --cd-hover-rotate: -7deg;
  --cd-hover-rotate-icon: -6deg;

  /* Zwei Schriften für zwei Aufgaben, und das ist Absicht.
     `display` ist die Markenschrift: Logo, Titel der Startseite, große
     Überschriften. Sie ist ein Schaustück und bei 13 px in einem
     Pillenknopf schlechter lesbar als das, was sie ersetzen würde.
     `heading` bleibt deshalb die Schrift der Arbeitsfläche — dort
     stehen Überschriften klein, eng und zu Dutzenden. */
  --cd-font-display: 'Londrina Solid', 'Berlin Type', 'Arial Black', sans-serif;
  --cd-font-heading: 'Berlin Type', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cd-font-body: 'Inter', sans-serif;
  --cd-font-mono: 'Space Mono', monospace;
}

/* ---- Der Farbkatalog ---- */
/* Hier stehen alle Farben, die es gibt. Acht Vordergrundfarben, je
   zwei Werte: `pastell` als Fläche und `kontrast` als Signal — Schrift,
   Rahmen, Icon, Akzent. Dazu ein heller und ein dunkler Grund und die
   zwei Schriftfarben dazu. Sonst nichts.

   Warum zwei und nicht drei Stufen: Mit drei Abstufungen je Familie
   standen im Bild regelmäßig zwei davon nebeneinander — die Wortmarke
   in der einen, der Akzent in der zweiten, das Instrument in der
   dritten. Das las sich nicht als eine Farbe, sondern als drei, die
   knapp danebenliegen.

   Die beiden Werte sind so gesetzt, dass jede Kombination trägt, die
   im Betrieb vorkommt: `kontrast` auf hellem Grund und als Fläche
   unter heller Schrift, `pastell` auf dunklem Grund und als Fläche
   unter dunkler Schrift. Alle acht liegen in allen vier Rollen über
   4,5:1 — nachgerechnet in `shared/test/farbkatalog.test.ts`. */
:root {
  --cd-katalog-rot-pastell: #ffbfb8;
  --cd-katalog-rot-kontrast: #c1272d;
  --cd-katalog-orange-pastell: #fac3a5;
  --cd-katalog-orange-kontrast: #ab4b15;
  --cd-katalog-gelb-pastell: #e8ce99;
  --cd-katalog-gelb-kontrast: #7d6000;
  --cd-katalog-gruen-pastell: #b3dfb3;
  --cd-katalog-gruen-kontrast: #286d2b;
  --cd-katalog-tuerkis-pastell: #95e1e0;
  --cd-katalog-tuerkis-kontrast: #00747f;
  --cd-katalog-blau-pastell: #a4d8fe;
  --cd-katalog-blau-kontrast: #1565c0;
  --cd-katalog-violett-pastell: #d8c6fc;
  --cd-katalog-violett-kontrast: #6a1b9a;
  --cd-katalog-neutral-pastell: #d8d0c3;
  --cd-katalog-neutral-kontrast: #5b544a;

  --cd-katalog-grund-hell: #f8f3eb;
  --cd-katalog-grund-dunkel: #19150f;
  --cd-katalog-schrift-hell: #f2eee7;
  --cd-katalog-schrift-dunkel: #221c12;
}

/* ---- Themes ---- */
/* Ein Theme wählt keine Farben aus, es verteilt nur Rollen: Was ist
   Fläche, was ist Signal, was ist Grund. Deshalb steht hier kein
   einziger Hex-Wert mehr.

   `--cd-surface`, `--cd-border` und `--cd-text-muted` sind Mischungen
   aus Grund und Schrift und damit auch keine eigenen Farben. */

:root, [data-theme="pastel"] {
  --cd-bg: var(--cd-katalog-grund-hell);
  --cd-surface: color-mix(in srgb, var(--cd-katalog-grund-hell) 60%, #fff);
  --cd-text-primary: var(--cd-katalog-schrift-dunkel);

  --cd-rot: var(--cd-katalog-rot-pastell);
  --cd-rot-signal: var(--cd-katalog-rot-kontrast);
  --cd-orange: var(--cd-katalog-orange-pastell);
  --cd-orange-signal: var(--cd-katalog-orange-kontrast);
  --cd-gelb: var(--cd-katalog-gelb-pastell);
  --cd-gelb-signal: var(--cd-katalog-gelb-kontrast);
  --cd-gruen: var(--cd-katalog-gruen-pastell);
  --cd-gruen-signal: var(--cd-katalog-gruen-kontrast);
  --cd-tuerkis: var(--cd-katalog-tuerkis-pastell);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-kontrast);
  --cd-blau: var(--cd-katalog-blau-pastell);
  --cd-blau-signal: var(--cd-katalog-blau-kontrast);
  --cd-violett: var(--cd-katalog-violett-pastell);
  --cd-violett-signal: var(--cd-katalog-violett-kontrast);
  --cd-neutral: var(--cd-katalog-neutral-pastell);
  --cd-neutral-signal: var(--cd-katalog-neutral-kontrast);
}

/* Auf dunklem Grund tauschen die beiden Werte die Rollen: Die
   kontrastreiche Farbe wird zur Fläche, die pastellige zum Signal.
   Dieselben acht Farben, andersherum gelesen. */
[data-theme="pastelDark"] {
  --cd-bg: var(--cd-katalog-grund-dunkel);
  --cd-surface: color-mix(in srgb, var(--cd-katalog-grund-dunkel) 82%, #fff);
  --cd-text-primary: var(--cd-katalog-schrift-hell);

  --cd-rot: var(--cd-katalog-rot-kontrast);
  --cd-rot-signal: var(--cd-katalog-rot-pastell);
  --cd-orange: var(--cd-katalog-orange-kontrast);
  --cd-orange-signal: var(--cd-katalog-orange-pastell);
  --cd-gelb: var(--cd-katalog-gelb-kontrast);
  --cd-gelb-signal: var(--cd-katalog-gelb-pastell);
  --cd-gruen: var(--cd-katalog-gruen-kontrast);
  --cd-gruen-signal: var(--cd-katalog-gruen-pastell);
  --cd-tuerkis: var(--cd-katalog-tuerkis-kontrast);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-pastell);
  --cd-blau: var(--cd-katalog-blau-kontrast);
  --cd-blau-signal: var(--cd-katalog-blau-pastell);
  --cd-violett: var(--cd-katalog-violett-kontrast);
  --cd-violett-signal: var(--cd-katalog-violett-pastell);
  --cd-neutral: var(--cd-katalog-neutral-kontrast);
  --cd-neutral-signal: var(--cd-katalog-neutral-pastell);
}

/* Die Bühne, hell. Dieselbe Rollenverteilung wie „pastel", nur wird
   der Grund zu reinem Weiß und die Schrift zu reinem Schwarz: Aus
   mehreren Metern Abstand und unter Bühnenlicht zählt jeder Schritt
   Kontrast, den man haben kann. */
[data-theme="highcontrast"] {
  --cd-bg: #fff;
  --cd-surface: color-mix(in srgb, #fff 96%, #000);
  --cd-text-primary: #000;

  --cd-rot: var(--cd-katalog-rot-pastell);
  --cd-rot-signal: var(--cd-katalog-rot-kontrast);
  --cd-orange: var(--cd-katalog-orange-pastell);
  --cd-orange-signal: var(--cd-katalog-orange-kontrast);
  --cd-gelb: var(--cd-katalog-gelb-pastell);
  --cd-gelb-signal: var(--cd-katalog-gelb-kontrast);
  --cd-gruen: var(--cd-katalog-gruen-pastell);
  --cd-gruen-signal: var(--cd-katalog-gruen-kontrast);
  --cd-tuerkis: var(--cd-katalog-tuerkis-pastell);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-kontrast);
  --cd-blau: var(--cd-katalog-blau-pastell);
  --cd-blau-signal: var(--cd-katalog-blau-kontrast);
  --cd-violett: var(--cd-katalog-violett-pastell);
  --cd-violett-signal: var(--cd-katalog-violett-kontrast);
  --cd-neutral: var(--cd-katalog-neutral-pastell);
  --cd-neutral-signal: var(--cd-katalog-neutral-kontrast);
}

/* Die Bühne, dunkel. Rollen wie „pastelDark", Grund aber echtes
   Schwarz: bei wenig Umgebungslicht blendet jede aufgehellte Fläche. */
[data-theme="buehneDunkel"] {
  --cd-bg: #000;
  --cd-surface: color-mix(in srgb, #000 94%, #fff);
  --cd-text-primary: #fff;

  --cd-rot: var(--cd-katalog-rot-kontrast);
  --cd-rot-signal: var(--cd-katalog-rot-pastell);
  --cd-orange: var(--cd-katalog-orange-kontrast);
  --cd-orange-signal: var(--cd-katalog-orange-pastell);
  --cd-gelb: var(--cd-katalog-gelb-kontrast);
  --cd-gelb-signal: var(--cd-katalog-gelb-pastell);
  --cd-gruen: var(--cd-katalog-gruen-kontrast);
  --cd-gruen-signal: var(--cd-katalog-gruen-pastell);
  --cd-tuerkis: var(--cd-katalog-tuerkis-kontrast);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-pastell);
  --cd-blau: var(--cd-katalog-blau-kontrast);
  --cd-blau-signal: var(--cd-katalog-blau-pastell);
  --cd-violett: var(--cd-katalog-violett-kontrast);
  --cd-violett-signal: var(--cd-katalog-violett-pastell);
  --cd-neutral: var(--cd-katalog-neutral-kontrast);
  --cd-neutral-signal: var(--cd-katalog-neutral-pastell);
}

/* Rahmen und gedämpfte Schrift stehen für alle Themes an einer Stelle:
   Sie sind kein eigener Farbwert, sondern immer dieselbe Mischung aus
   dem Grund und der Schrift, die gerade gilt. */
:root, [data-theme] {
  --cd-border: color-mix(in srgb, var(--cd-text-primary) 16%, var(--cd-bg));
  --cd-text-muted: color-mix(in srgb, var(--cd-text-primary) 70%, var(--cd-bg));
}

/* ---- Basis-Reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cd-bg);
  color: var(--cd-text-primary);
  font-family: var(--cd-font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background var(--cd-motion-normal), color var(--cd-motion-normal);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-heading); font-weight: 700; margin: 0 0 0.4em; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Links tragen den Akzent der Umgebung, nicht eine feste Farbe. Wo
   keiner gesetzt ist, bleibt die Schriftfarbe — ein Link ist dann am
   Unterstrich zu erkennen und nicht an einem Blau, das sonst nirgends
   im Bild vorkommt. */
a { color: var(--app-akzent, var(--cd-text-primary)); text-decoration: none; }
a:hover { color: var(--app-akzent, var(--cd-text-primary)); text-decoration: underline; }
code, pre, .cd-mono { font-family: var(--cd-font-mono); }

/* ---- Formen / Komponenten ---- */

/* Inhaltskarte: Rahmen, ruhig, Teil der Seite */
.cd-card {
  background: var(--cd-surface);
  border: var(--cd-border-width) solid var(--cd-border);
  border-radius: var(--cd-radius-karte);
  padding: var(--cd-space-5);
}

/* Post-it: Schatten, klickbar/draggable, Hover-Rotation */
.cd-postit {
  border-radius: var(--cd-radius-karte);
  box-shadow: var(--cd-shadow-objekt);
  cursor: pointer;
  transition: transform var(--cd-motion-fast);
}
.cd-postit:hover { transform: rotate(var(--cd-hover-rotate)); }

/* Icon-Kachel: kleines Objekt, Schatten optional, Hover-Rotation */
.cd-icon-tile {
  aspect-ratio: 1;
  border-radius: var(--cd-radius-icon);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--cd-motion-fast);
}
.cd-icon-tile:hover { transform: rotate(var(--cd-hover-rotate-icon)); }
.cd-icon-tile.cd-elevated { box-shadow: var(--cd-shadow-objekt-klein); }

/* Pill-Button / Chip: vollrund, "Nichts" (Eigenkontrast der Volltonfarbe trägt) */
.cd-pill-button {
  display: inline-flex; align-items: center; gap: var(--cd-space-2);
  border-radius: var(--cd-radius-chip);
  padding: 9px 18px;
  font-family: var(--cd-font-heading);
  font-size: 13px; font-weight: 600;
  border: var(--cd-border-width) solid var(--cd-border);
  background: var(--cd-surface);
  color: var(--cd-text-muted);
  cursor: pointer;
  transition: background var(--cd-motion-fast), color var(--cd-motion-fast), opacity var(--cd-motion-fast);
}
.cd-pill-button:hover { opacity: 0.85; }
.cd-pill-button.cd-active {
  background: var(--cd-text-primary);
  color: var(--cd-bg);
  border-color: var(--cd-text-primary);
}

/* Zustände */
.cd-disabled, [disabled] { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.cd-focusable:focus-visible {
  outline: 2px solid var(--app-akzent, var(--cd-text-primary));
  outline-offset: 2px;
}
.cd-error { border-color: var(--cd-rot) !important; color: var(--cd-rot-signal); }