/* Die Form der Themen mit eigener Gestalt (15.09.2026, nachts, Sven: "wie wärs
   noch mit einem Zeitung-Theme? nur als ein zusätzliches Theme, wie bei den
   anderen - wo aber ggf. auch Listen-/Elementdarstellung anders dargestellt
   werden ... gäbe es noch andere, vergleichbare Themes?").

   **Die Farben kommen wie bei jedem Thema aus `scripts/themen_bauen.py`**
   (themen.css) - hier steht nur, was die Form ändert: Schrift, Ecken, Linien,
   Schatten, Hintergrundmuster. Deshalb keine Farbwerte, nur Tokens (Weiß und
   Schwarz mit Deckkraft für Linien und Raster ausgenommen); ein Wächter in
   `tests/test_erscheinungsbild.py` hält das. Keine Webschrift von außen: die
   Serife der Zeitung ist der Systemstack.

   Ein Thema gilt nur in dem Modus, den es hat - `data-thema` trägt das Thema
   des geltenden Modus, die Selektoren brauchen deshalb kein `data-theme`. */

/* --- Zeitung (nur hell): Serife, Linien statt Felder, keine Rundungen -------- */
[data-thema="zeitung"] {
  --fb-radius-sm: 0;
  --fb-radius: 0;
  --fb-radius-lg: 0;
  --fb-font-titel: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Times New Roman", serif;
  --fb-shadow-1: none;
  --fb-shadow-2: none;
  --fb-schatten-knopf: none;
  --fb-schatten-knopf-hover: none;
}

[data-thema="zeitung"] :is(.fb-panel, .fb-kennzahl, .fb-leer) {
  background: transparent;
  border-top: 3px double var(--fb-gray-800);
  border-bottom: 1px solid var(--fb-gray-300);
}

[data-thema="zeitung"] :is(.fb-panel__titel, .fb-nav__gruppe, .fb-sidebar__kontext) {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--fb-tracking-weit);
}

[data-thema="zeitung"] :is(.fb-topbar__title, .fb-akte__name, .fb-panel__titel) {
  font-weight: 700;
}

[data-thema="zeitung"] .fb-table {
  border: 0;
  border-top: 1px solid var(--fb-gray-800);
  border-bottom: 1px solid var(--fb-gray-800);
  background: transparent;
}

[data-thema="zeitung"] .fb-table th {
  border-bottom: 1px solid var(--fb-gray-800);
  font-family: var(--fb-font-titel);
}

/* Kapitälchen nur in der Kopfzeile: In der Preisliste ist die erste Spalte
   eine `th`-Zeile mit ganzen Sätzen - die standen sonst in Versalien
   (16.09.2026 im Bild gesehen). */
[data-thema="zeitung"] .fb-table thead th {
  font-variant-caps: all-small-caps;
}

[data-thema="zeitung"] .fb-kachelgitter > .fb-kachel {
  box-shadow: inset 1px 0 0 var(--fb-gray-800);
}

[data-thema="zeitung"] :is(.fb-form__input, .fb-form__select) {
  border-width: 0 0 1px;
  border-color: var(--fb-gray-600);
  background-color: transparent;
}

[data-thema="zeitung"] .fb-btn--secondary {
  border-color: var(--fb-gray-800);
  background: transparent;
}

[data-thema="zeitung"] .fb-akte__kopf {
  border-bottom: 3px double var(--fb-gray-800);
}

/* **Der Satz gehoert zur Ueberschrift** (Sven, 16.09.2026: "bei der Preisliste
   passt die Ueberschrift 'Grundgebuehren' nicht so ganz zu den Eintraegen
   darunter"): Was unter einem Zeitungstitel steht, ist gesetzter Text - also
   Serife in den Tabellen und den Kacheln, nicht nur im Titel. Zahlen bleiben in
   der Kennung (Tabellenziffern), Formularfelder in der Grotesk: Dort wird
   getippt, nicht gelesen. */
[data-thema="zeitung"] :is(.fb-table td, .fb-kachel, .fb-fakt__wert, .fb-listen-anzahl, .fb-merkliste) {
  font-family: var(--fb-font-titel);
}

[data-thema="zeitung"] :is(.fb-kachel__marke, .fb-fakt__marke) {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--fb-tracking-weit);
}

/* Die Zahl bleibt eine Zahl: Ziffern in der Kennung, damit Spalten fluchten. */
[data-thema="zeitung"] :is(.fb-table__zahl, .fb-kennzahl__wert) {
  font-family: var(--fb-font-kennung);
  font-variant-caps: normal;
}

/* --- Comic (nur hell): Konturen, Halbtonraster, handgelettert --------------
   Aus "Brutal" umgebaut (Sven, 16.09.2026: "eher zu Comic umdesignen? Typographie
   waere dann auch entsprechend wichtig"). Die Schrift ist ein Systemstack - keine
   Webschrift von aussen (Comic Sans MS auf Windows, Chalkboard SE auf macOS,
   Comic Neue, wenn jemand sie hat); was fehlt, faellt auf die runde
   Systemschrift zurueck. */
[data-thema="comic"] {
  --fb-radius-sm: 8px;
  --fb-radius: 12px;
  --fb-radius-lg: 18px;
  --fb-font:
    "Comic Sans MS", "Chalkboard SE", "Comic Neue", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --fb-font-titel: var(--fb-font);
  --fb-shadow-1: 3px 3px 0 var(--fb-gray-800);
  --fb-shadow-2: 5px 5px 0 var(--fb-gray-800);
  --fb-schatten-knopf: 2px 2px 0 var(--fb-gray-800);
  --fb-schatten-knopf-hover: 4px 4px 0 var(--fb-gray-800);
}

/* Das Halbtonraster des Druckbogens - leise, damit Text darauf lesbar bleibt. */
[data-thema="comic"] .fb-content {
  background-image: radial-gradient(
    color-mix(in oklab, var(--fb-gray-800) 12%, transparent) 1px,
    transparent 1.2px
  );
  background-size: 10px 10px;
}

[data-thema="comic"] :is(.fb-panel, .fb-kennzahl, .fb-leer, .fb-kachelgitter > .fb-kachel) {
  border: 2px solid var(--fb-gray-800);
  box-shadow: 3px 3px 0 var(--fb-gray-800);
  background: var(--fb-flaeche);
}

[data-thema="comic"] .fb-kachelgitter > .fb-kachel--klickbar:hover {
  transform: translate(-2px, -2px) rotate(-0.4deg);
  box-shadow: 5px 5px 0 var(--fb-accent);
}

[data-thema="comic"] :is(.fb-btn--primary, .fb-btn--secondary, .fb-form__input, .fb-form__select) {
  border: 2px solid var(--fb-gray-800);
}

[data-thema="comic"] .fb-btn--secondary {
  box-shadow: 2px 2px 0 var(--fb-gray-800);
}

/* Titel wie gelettert: gross, fett, leicht gesperrt - aber nicht in Versalien,
   die Schrift traegt den Ton schon. */
[data-thema="comic"] :is(.fb-panel__titel, .fb-topbar__title, .fb-akte__name) {
  font-weight: 700;
  letter-spacing: var(--fb-tracking-eng);
}

/* Auch die kleinen Beschriftungen tragen die Schrift - sonst steht ein
   Comicheft voller Formularschrift da (Sven: "Typographie waere dann auch
   entsprechend wichtig"). */
[data-thema="comic"] :is(.fb-form__label, .fb-nav__link, .fb-btn, .fb-badge, .fb-table th) {
  font-family: var(--fb-font);
}

[data-thema="comic"] .fb-table {
  border: 2px solid var(--fb-gray-800);
}

[data-thema="comic"] .fb-table th {
  background: var(--fb-auswahl-grund);
  color: var(--fb-auswahl-text);
  border-bottom: 2px solid var(--fb-gray-800);
}

[data-thema="comic"] .fb-nav__link--active {
  box-shadow: 2px 2px 0 var(--fb-auswahl-grund);
}

/* --- Karteikarte (nur hell): Linien wie auf der Karte, Titel in der Schreibmaschine */
[data-thema="karteikarte"] {
  --fb-radius-lg: var(--fb-radius-sm);
  --fb-font-titel: var(--fb-font-kennung);
}

/* **Gepunktet statt liniert** (Sven, 16.09.2026: "die Linien der Karte stoeren
   oefter in den anderen Text rein - vll ein gepunktetes Blatt stattdessen").
   Ein Punktraster liegt unter dem Text, statt ihn zu durchschneiden. */
[data-thema="karteikarte"] :is(.fb-panel, .fb-kennzahl) {
  background-color: var(--fb-flaeche);
  background-image: radial-gradient(
    color-mix(in oklab, var(--fb-accent) 22%, transparent) 1px,
    transparent 1.3px
  );
  background-size: 18px 18px;
  border-top: 3px solid color-mix(in oklab, var(--fb-marke) 55%, transparent);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.08),
    0 8px 18px -10px rgb(0 0 0 / 0.25);
}

[data-thema="karteikarte"] :is(.fb-panel__titel, .fb-topbar__title, .fb-akte__name) {
  font-weight: 500;
  letter-spacing: var(--fb-tracking-eng);
}

/* Die Schreibmaschine auch an den kleinen Beschriftungen und Kopfzeilen -
   sonst ist nur die Ueberschrift Karteikarte (Sven, 16.09.2026: "ggf. minimal
   Typographie noch nachziehen"). */
[data-thema="karteikarte"] :is(.fb-table th, .fb-form__label, .fb-nav__gruppe, .fb-sidebar__kontext, .fb-fakt__marke) {
  font-family: var(--fb-font-kennung);
  letter-spacing: var(--fb-tracking-eng);
}

[data-thema="karteikarte"] .fb-kachelgitter > .fb-kachel {
  background: var(--fb-flaeche);
  box-shadow:
    inset 0 3px 0 color-mix(in oklab, var(--fb-marke) 55%, transparent),
    0 1px 2px rgb(0 0 0 / 0.08);
}

/* --- Blaupause (nur dunkel): Raster, weiße Linien, Druckschrift -------------- */
[data-thema="blaupause"] {
  --fb-radius-sm: 0;
  --fb-radius: 0;
  --fb-radius-lg: 0;
  --fb-font-titel: var(--fb-font-kennung);
  --fb-shadow-1: none;
  --fb-shadow-2: none;
}

[data-thema="blaupause"] .fb-content {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.1) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
}

[data-thema="blaupause"] :is(.fb-panel, .fb-kennzahl, .fb-leer, .fb-kachelgitter > .fb-kachel) {
  background: color-mix(in oklab, var(--fb-flaeche) 82%, transparent);
  border: 1px solid rgb(255 255 255 / 0.45);
}

[data-thema="blaupause"] :is(.fb-panel__titel, .fb-topbar__title, .fb-akte__name, .fb-nav__gruppe) {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--fb-tracking-weit);
}

[data-thema="blaupause"] :is(.fb-form__input, .fb-form__select) {
  border: 1px dashed rgb(255 255 255 / 0.5);
  background-color: transparent;
}

[data-thema="blaupause"] .fb-table {
  border: 1px solid rgb(255 255 255 / 0.45);
  background: transparent;
}

/* --- Terminal (nur dunkel): alles in Monospace, grüne Linien, Eingabezeichen -- */
[data-thema="terminal"] {
  --fb-font: var(--fb-font-kennung);
  --fb-font-titel: var(--fb-font-kennung);
  --fb-radius-sm: 0;
  --fb-radius: 0;
  --fb-radius-lg: 0;
  --fb-shadow-1: none;
  --fb-shadow-2: none;
  --fb-schatten-knopf: none;
  --fb-schatten-knopf-hover: none;
}

[data-thema="terminal"] :is(.fb-panel, .fb-kennzahl, .fb-leer, .fb-kachelgitter > .fb-kachel) {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--fb-gray-800) 40%, transparent);
}

[data-thema="terminal"] .fb-panel__titel::before {
  content: "> ";
  color: var(--fb-accent);
}

[data-thema="terminal"] .fb-topbar__title::before {
  content: "~/ ";
  color: var(--fb-gray-600);
}

[data-thema="terminal"] :is(.fb-topbar__title, .fb-panel__titel) {
  text-shadow: 0 0 8px color-mix(in oklab, var(--fb-gray-800) 45%, transparent);
}

[data-thema="terminal"] :is(.fb-form__input, .fb-form__select, .fb-btn--secondary) {
  border-color: color-mix(in oklab, var(--fb-gray-800) 55%, transparent);
  background-color: transparent;
}

[data-thema="terminal"] .fb-table {
  border: 1px solid color-mix(in oklab, var(--fb-gray-800) 40%, transparent);
  background: transparent;
}