/* TaleTamer augenschonende Farbpalette */

:root {
  --tt-bg-page: #f9f6f2;
  --tt-bg-navbar: #ede3d1;
  --tt-bg-card: #fffdfa;
  --tt-bg-form: #f9f6f2;
  --tt-text-main: #4b2e1e;
  --tt-text-muted: #7a4c1e;
  --tt-accent: #6b6e3a;
  --tt-accent-hover: #b97a3a;
  --tt-border: #e0dbd1;
  --tt-btn: #e3d7c5;
  --tt-btn-hover: #b97a3a;

  /* Dunklerer Akzent für Zustände auf farbiger Fläche.
     --tt-accent-hover (#b97a3a) erreicht mit weißer Schrift nur 3,55:1 und als
     Linkfarbe auf der Seite nur 3,30:1 – beides unter den 4,5:1 aus WCAG AA.
     Überfahren machte Links also schlechter lesbar statt besser. #565830 liegt
     bei 7,41:1 auf Weiß und 6,88:1 auf der Seite. */
  --tt-accent-strong: #565830;
  --tt-accent-contrast: #ffffff;

  /* Fokusfarbe. Bewusst blau und nicht der Hausakzent: Der Fokusring muss sich
     von jeder Bedienfläche abheben, auch von den akzentfarbenen Knöpfen selbst.
     --tt-focus-rgb liefert dieselbe Farbe für die rgba()-Schatten in
     accessibility.css. */
  --tt-focus: #0066cc;
  --tt-focus-rgb: 0, 102, 204;
  /* Flaeche hinter fokussierten Links. Muss mitschalten: Der fruehere
     Festwert #fff3cd (blasses Gelb) liess im Dunkelmodus hellen Text auf
     heller Flaeche stehen – 1,14:1. Wer mit der Tastatur navigiert, verlor
     den Linktext genau in dem Moment, in dem er ihn braucht. */
  --tt-focus-flaeche: #fff3cd;

  /* Flächen mit klarer Rolle. Die älteren Namen (--tt-bg-page, --tt-bg-card,
     --tt-bg-form) bleiben als Quelle bestehen, damit vorhandene Regeln und
     Templates weiterlaufen; die neuen Namen sind das, worauf Editor und
     spätere Bausteine zeigen. */
  --tt-surface: var(--tt-bg-card);
  --tt-surface-sunken: var(--tt-btn);
  --tt-surface-raised: var(--tt-bg-card);

  /* Kräftigerer Rahmen für Bedienelemente.
     --tt-border (#e0dbd1) erreicht auf der Feldfläche nur 1,28:1. WCAG 1.4.11
     verlangt für die Umrisse von Bedienelementen 3:1 – ein Eingabefeld muss als
     Eingabefeld erkennbar sein. Für Karten und Trennlinien bleibt der zarte
     Rahmen richtig, für Formularfelder nicht. */
  --tt-border-strong: #94876f;

  /* Abstände, Radien und Schatten als Skala statt als Einzelwerte.
     Vorher standen über die Templates verteilt border-radius: 8px, 10px und
     12px nebeneinander, dazu vier verschiedene box-shadow-Angaben. */
  --tt-abstand-xs: 0.25rem;
  --tt-abstand-sm: 0.5rem;
  --tt-abstand-md: 1rem;
  --tt-abstand-lg: 1.5rem;
  --tt-abstand-xl: 2.5rem;
  --tt-radius-sm: 6px;
  --tt-radius-md: 10px;
  --tt-radius-lg: 16px;
  --tt-radius-rund: 999px;
  /* Abstand zwischen Symbol und Beschriftung in Knoepfen. An einer Stelle,
     weil er in accessibility.css als gap gesetzt wird und dort alle Knoepfe
     zugleich betrifft. */
  --tt-knopf-luecke: 0.5rem;
  /* Schatten mit Braunanteil statt neutralem Schwarz – auf der warmen Palette
     wirkt reines Schwarz schmutzig. */
  --tt-schatten-sm: 0 1px 2px rgba(75, 46, 30, 0.06);
  --tt-schatten-md: 0 2px 8px rgba(75, 46, 30, 0.08);
  --tt-schatten-lg: 0 8px 24px rgba(75, 46, 30, 0.12);

  /* Romanstatus. Die acht Zustände standen bisher doppelt in
     romane_list.html.twig – einmal als Hex für die Filterpunkte, einmal als
     bg-*-Klasse für das Abzeichen. Die beiden waren schon auseinandergelaufen
     (ueberarbeiten: Punkt #0d6efd, Abzeichen bg-primary). Ein Satz Tokens,
     eine Wahrheit. */
  --tt-status-unfertig: #6c757d;      --tt-status-unfertig-fg: #ffffff;
  --tt-status-ueberarbeiten: #0d6efd; --tt-status-ueberarbeiten-fg: #ffffff;
  --tt-status-recherche: #ffc107;     --tt-status-recherche-fg: #212529;
  --tt-status-fertig: #198754;        --tt-status-fertig-fg: #ffffff;
  --tt-status-lektoriert: #0dcaf0;    --tt-status-lektoriert-fg: #212529;
  --tt-status-gestoppt: #dc3545;      --tt-status-gestoppt-fg: #ffffff;
  --tt-status-wartend: #ffc107;       --tt-status-wartend-fg: #212529;
  --tt-status-loeschen: #212529;      --tt-status-loeschen-fg: #ffffff;

  /* Brücke zu Bootstrap 5.3.
     Ab 5.3 speisen card, table, list-group, dropdown, form-check und Reboot
     ihre Farben aus diesen Variablen statt aus einkompilierten Werten. Ohne
     die Zuordnung fielen sie auf den Bootstrap-Standard zurück: Karten und
     Tabellenzellen bekamen graues #212529 statt des Braun der Palette, und
     Tabellen einen weißen Zellhintergrund auf der beigen Seite.
     Hier stehen die Zuordnungen an einer Stelle – dadurch reicht später ein
     Umdefinieren der --tt-* unter [data-bs-theme="dark"], damit Bootstrap
     vollständig mitschaltet. */
  --bs-body-bg: var(--tt-bg-page);
  --bs-body-color: var(--tt-text-main);
  --bs-emphasis-color: var(--tt-text-main);
  --bs-border-color: var(--tt-border);
  --bs-link-color: var(--tt-accent);
  --bs-link-hover-color: var(--tt-accent-hover);

  /* Die primary-Utilities auf die Hauspalette ziehen.
     .text-primary steht 83-mal, .bg-primary 30-mal in den Templates und war
     bisher Bootstrap-Blau – seit btn-primary den Akzent traegt, lief beides
     auseinander. Das Blau faellt ausserdem durch WCAG AA: #0d6efd erreicht auf
     der Seite nur 4,18:1 und auf der dunklen Karte 3,59:1.
     Der Akzent kommt auf 4,98:1 (Seite) bzw. 5,28:1 (Karte) und traegt als
     Fuellung weisse Schrift mit 5,36:1. */
  --bs-primary: #6b6e3a;
  --bs-primary-rgb: 107, 110, 58;
}

/* Flächen, die Bootstrap 5.3 auf der Komponente selbst deklariert.
   --bs-dropdown-bg & Co. stehen in bootstrap.min.css nicht auf :root, sondern
   auf .dropdown-menu/.list-group/.table – eine Zuordnung weiter oben im
   :root-Block würde davon überschrieben. Deshalb hier auf demselben Selektor;
   kein !important nötig, weil custom.css nach Bootstrap geladen wird.

   Werte so gewählt, dass das Erscheinungsbild von Bootstrap 5.0 erhalten
   bleibt: Menüs, Listen und Ankreuzfelder waren dort weiße Flächen auf der
   beigen Seite, Tabellenzellen durchsichtig. Ohne diesen Block würden alle
   vier auf --bs-body-bg zurückfallen und beige – Tabellen in weißen Karten
   wären dann sichtbar falsch. */
.dropdown-menu { --bs-dropdown-bg: var(--tt-bg-card); }
.list-group { --bs-list-group-bg: var(--tt-bg-card); }
.form-check-input { --bs-form-check-bg: var(--tt-bg-card); }
.table { --bs-table-bg: transparent; }

/* ——— Dunkelmodus ———
   Nur die Tokens werden umdefiniert; alle Regeln darunter zeigen darauf und
   schalten dadurch mit. Bootstrap 5.3 kennt data-bs-theme selbst, seine
   Komponenten folgen über die --bs-*-Brücke oben.

   Die Palette bleibt bewusst warm (Braunstich statt Neutralgrau) – ein
   Schreibwerkzeug soll auch nachts nach Papier aussehen, nicht nach Terminal.
   Alle Werte sind gegen ihre jeweilige Fläche durchgerechnet; die Textfarben
   liegen zwischen 6,7:1 und 14,0:1, deutlich über den 4,5:1 aus WCAG AA. */
[data-bs-theme="dark"] {
  --tt-bg-page: #1c1815;
  --tt-bg-navbar: #221d17;
  --tt-bg-card: #252019;
  --tt-bg-form: #2b241d;
  --tt-text-main: #ece4d8;
  --tt-text-muted: #b8a894;
  --tt-border: #3d3428;
  --tt-border-strong: #857659;
  --tt-btn: #3a3227;
  --tt-btn-hover: #4a4032;

  /* Akzent im Dunkeln aufgehellt – das Oliv des Hellmodus (#6b6e3a) käme auf
     dunklem Grund nur auf 1,9:1. */
  --tt-accent: #a8ad63;
  --tt-accent-strong: #c3c884;
  --tt-accent-contrast: #1c1815;
  --tt-accent-hover: #c3c884;

  --tt-focus: #6ea8fe;
  --tt-focus-rgb: 110, 168, 254;
  --tt-focus-flaeche: rgba(110, 168, 254, 0.25);

  /* Statusfarben aufgehellt, damit sie als Abzeichen dunkle Schrift tragen
     können (alle über 6,6:1). */
  --tt-status-unfertig: #9aa0a6;      --tt-status-unfertig-fg: #1c1815;
  --tt-status-ueberarbeiten: #7aa9ff; --tt-status-ueberarbeiten-fg: #1c1815;
  --tt-status-recherche: #ffd257;     --tt-status-recherche-fg: #1c1815;
  --tt-status-fertig: #75d6a2;        --tt-status-fertig-fg: #1c1815;
  --tt-status-lektoriert: #6fdcf2;    --tt-status-lektoriert-fg: #1c1815;
  --tt-status-gestoppt: #f5868f;      --tt-status-gestoppt-fg: #1c1815;
  --tt-status-wartend: #ffd257;       --tt-status-wartend-fg: #1c1815;
  --tt-status-loeschen: #c9c3ba;      --tt-status-loeschen-fg: #1c1815;

  /* Bootstrap-Brücke: dieselben Zuordnungen wie im Hellmodus, plus die
     Utilities bg-light/text-dark. Die stehen 118- bzw. 68-mal in den
     Templates und würden sonst hell bleiben bzw. unlesbar werden. */
  --bs-body-bg: var(--tt-bg-page);
  --bs-body-color: var(--tt-text-main);
  --bs-emphasis-color: var(--tt-text-main);
  --bs-border-color: var(--tt-border);
  --bs-link-color: var(--tt-accent);
  --bs-link-hover-color: var(--tt-accent-strong);
  --bs-light-rgb: 58, 50, 39;
  --bs-dark-rgb: 236, 228, 216;
  --bs-secondary-color: var(--tt-text-muted);

  /* Schatten im Dunkeln kraeftiger – ein Schatten mit 6 % Deckung ist auf
     #1c1815 schlicht nicht zu sehen, Karten wirkten dadurch flach. */
  --tt-schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tt-schatten-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --tt-schatten-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* bg-primary bleibt die dunklere Stufe: Die Fuellung traegt in den Templates
     durchweg text-white, und der aufgehellte Akzent koeme damit nur auf
     1,9:1. Fuer .text-primary gilt das Gegenteil – siehe unten. */
  --bs-primary: #6b6e3a;
  --bs-primary-rgb: 107, 110, 58;
}

/* Textfarbe getrennt von der Fuellfarbe: Auf dunklem Grund braucht Text den
   aufgehellten Akzent (7,41:1), waehrend die Fuellung dunkel bleiben muss,
   damit die weisse Schrift darauf lesbar ist. !important, weil Bootstrap seine
   Farb-Utilities selbst so setzt. */
[data-bs-theme="dark"] .text-primary { color: var(--tt-accent) !important; }

/* Signalfarben im Dunkelmodus aufhellen.
   Die abgedunkelten Werte der Umriss-Knöpfe aus dem Hellmodus (#146c43 usw.)
   wären auf dunklem Grund unlesbar; gefüllte Knöpfe tragen jetzt dunkle
   Schrift auf heller Signalfarbe. */
[data-bs-theme="dark"] .btn-success { --bs-btn-bg: #75d6a2; --bs-btn-border-color: #75d6a2; --bs-btn-color: #1c1815; --bs-btn-hover-bg: #8fe0b4; --bs-btn-hover-border-color: #8fe0b4; --bs-btn-hover-color: #1c1815; }
[data-bs-theme="dark"] .btn-danger  { --bs-btn-bg: #f5868f; --bs-btn-border-color: #f5868f; --bs-btn-color: #1c1815; --bs-btn-hover-bg: #f8a0a7; --bs-btn-hover-border-color: #f8a0a7; --bs-btn-hover-color: #1c1815; }
[data-bs-theme="dark"] .btn-warning { --bs-btn-bg: #ffd257; --bs-btn-border-color: #ffd257; --bs-btn-color: #1c1815; --bs-btn-hover-bg: #ffdd7d; --bs-btn-hover-border-color: #ffdd7d; --bs-btn-hover-color: #1c1815; }
[data-bs-theme="dark"] .btn-info    { --bs-btn-bg: #6fdcf2; --bs-btn-border-color: #6fdcf2; --bs-btn-color: #1c1815; --bs-btn-hover-bg: #92e5f5; --bs-btn-hover-border-color: #92e5f5; --bs-btn-hover-color: #1c1815; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #75d6a2; --bs-btn-border-color: #75d6a2; --bs-btn-hover-bg: #75d6a2; --bs-btn-hover-color: #1c1815; --bs-btn-hover-border-color: #75d6a2; --bs-btn-disabled-color: #75d6a2; --bs-btn-disabled-border-color: #75d6a2; }
[data-bs-theme="dark"] .btn-outline-danger  { --bs-btn-color: #f5868f; --bs-btn-border-color: #f5868f; --bs-btn-hover-bg: #f5868f; --bs-btn-hover-color: #1c1815; --bs-btn-hover-border-color: #f5868f; --bs-btn-disabled-color: #f5868f; --bs-btn-disabled-border-color: #f5868f; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffd257; --bs-btn-border-color: #ffd257; --bs-btn-hover-bg: #ffd257; --bs-btn-hover-color: #1c1815; --bs-btn-hover-border-color: #ffd257; --bs-btn-disabled-color: #ffd257; --bs-btn-disabled-border-color: #ffd257; }
[data-bs-theme="dark"] .btn-outline-info    { --bs-btn-color: #6fdcf2; --bs-btn-border-color: #6fdcf2; --bs-btn-hover-bg: #6fdcf2; --bs-btn-hover-color: #1c1815; --bs-btn-hover-border-color: #6fdcf2; --bs-btn-disabled-color: #6fdcf2; --bs-btn-disabled-border-color: #6fdcf2; }
/* outline-dark ist im Dunkeln das Gegenstück zu outline-light im Hellen:
   Schrift #212529 auf dunklem Grund ergibt 1,14:1. Es dreht sich hier um. */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--tt-text-main);
  --bs-btn-border-color: var(--tt-text-muted);
  --bs-btn-hover-bg: var(--tt-text-main);
  --bs-btn-hover-color: var(--tt-bg-page);
  --bs-btn-hover-border-color: var(--tt-text-main);
  --bs-btn-disabled-color: var(--tt-text-muted);
  --bs-btn-disabled-border-color: var(--tt-border);
}

/* Hinweismeldungen: Bootstraps helle Pastelltöne sind im Dunkeln blendend. */
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: #17301f; --bs-alert-border-color: #2c5b3c; --bs-alert-color: #a7e5c3; }
[data-bs-theme="dark"] .alert-danger  { --bs-alert-bg: #351a1d; --bs-alert-border-color: #6b3238; --bs-alert-color: #f8b0b6; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: #352c12; --bs-alert-border-color: #6b5822; --bs-alert-color: #ffe08f; }
[data-bs-theme="dark"] .alert-info    { --bs-alert-bg: #142e35; --bs-alert-border-color: #295b68; --bs-alert-color: #9ce7f7; }


/* Blog-Inhalte Styling */
.blog-content {
  line-height: 1.6;
  color: var(--tt-text-main);
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  color: var(--tt-text-main);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.blog-content h1 { font-size: 2rem; }
.blog-content h2 { font-size: 1.75rem; }
.blog-content h3 { font-size: 1.5rem; }
.blog-content h4 { font-size: 1.25rem; }
.blog-content h5 { font-size: 1.1rem; }
.blog-content h6 { font-size: 1rem; }

.blog-content p {
  margin-bottom: 1rem;
  text-align: justify;
}

.blog-content ul,
.blog-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.blog-content li {
  margin-bottom: 0.5rem;
}

.blog-content blockquote {
  border-left: 4px solid var(--tt-accent);
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--tt-text-muted);
}

.blog-content strong,
.blog-content b {
  font-weight: 600;
  color: var(--tt-text-main);
}

.blog-content em,
.blog-content i {
  font-style: italic;
}

.blog-content a {
  color: var(--tt-accent);
  text-decoration: underline;
}

.blog-content a:hover {
  color: var(--tt-accent-hover);
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

.blog-content code {
  background-color: var(--tt-bg-form);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.blog-content pre {
  background-color: var(--tt-bg-form);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}

.blog-content pre code {
  background: none;
  padding: 0;
}

/* Farbgebung der Bootstrap-Komponenten.
   Umgesetzt über die CSS-Variablen von Bootstrap 5.3 statt über
   !important-Überschreibungen. Bootstrap liest diese Variablen selbst aus –
   dadurch stimmen auch die abgeleiteten Zustände (hover, focus, active,
   disabled), die eine pauschale Hintergrundregel platt macht. custom.css wird
   nach bootstrap.min.css geladen, gleiche Spezifität genügt also.
   Nebeneffekt, der hier beabsichtigt ist: ein Umdefinieren der --tt-* unter
   [data-bs-theme="dark"] schaltet damit sämtliche Komponenten mit um. */

body.bg-page {
  background: var(--tt-bg-page);
  color: var(--tt-text-main);
}
.bg-navbar {
  background: var(--tt-bg-navbar);
}

/* Hilfsklassen – hier bleibt !important richtig, Bootstrap setzt es bei seinen
   eigenen Farb-Utilities genauso. */
.border-accent { border-left: 5px solid var(--tt-accent) !important; }
.text-accent { color: var(--tt-accent) !important; }
.bg-accent { background-color: var(--tt-accent) !important; color: var(--tt-accent-contrast) !important; }
.bg-accent-grad { background: linear-gradient(135deg, var(--tt-accent) 0%, #ff6b6b 100%) !important; color: var(--tt-accent-contrast) !important; }
.text-body { color: var(--tt-text-main) !important; }

.card {
  --bs-card-bg: var(--tt-bg-card);
  --bs-card-border-color: var(--tt-border);
  --bs-card-cap-bg: var(--tt-btn);
  --bs-card-color: var(--tt-text-main);
}
.modal {
  --bs-modal-bg: var(--tt-bg-card);
  --bs-modal-border-color: var(--tt-border);
  --bs-modal-color: var(--tt-text-main);
}
.form-control, .form-select {
  background-color: var(--tt-bg-form);
  color: var(--tt-text-main);
  /* Bedienelement-Umriss: --tt-border-strong statt --tt-border, siehe WCAG
     1.4.11. Mit dem zarten Rahmen war ein Feld auf der Seite kaum als Feld zu
     erkennen (1,28:1). */
  border-color: var(--tt-border-strong);
}
.form-control::placeholder {
  color: var(--tt-text-muted);
  opacity: 0.8;
}
.chip-container .badge {
  background: var(--tt-btn) !important;
  color: var(--tt-text-main) !important;
  border: 1px solid var(--tt-border) !important;
}
.chip-container .badge.bg-primary {
  background: var(--tt-accent) !important;
  color: var(--tt-accent-contrast) !important;
  border-color: var(--tt-accent) !important;
}
.list-group {
  --bs-list-group-color: var(--tt-text-main);
  --bs-list-group-border-color: var(--tt-border);
  --bs-list-group-action-color: var(--tt-text-main);
  --bs-list-group-action-hover-bg: var(--tt-bg-form);
  --bs-list-group-action-hover-color: var(--tt-text-main);
}
.navbar {
  --bs-navbar-color: var(--tt-text-main);
  --bs-navbar-brand-color: var(--tt-text-main);
  --bs-navbar-active-color: var(--tt-text-main);
  --bs-navbar-hover-color: var(--tt-accent-strong);
  --bs-navbar-brand-hover-color: var(--tt-accent-strong);
}

/* Knöpfe.
   Vorher stand hier eine Regel `.btn, .btn-primary, .btn-outline-secondary`
   mit !important auf background/color. `.btn` trifft jeden Knopf und schlug
   damit Bootstraps eigene Varianten: btn-primary, btn-success, btn-danger und
   btn-warning waren alle dieselbe beige Fläche (gemessen: rgb(227,215,197)),
   und erst beim Überfahren sprang die richtige Farbe hervor – die kam aus den
   Hover-Regeln in accessibility.css. Ein Löschknopf, der erst unter der Maus
   rot wird, ist als Warnsignal wertlos.
   Jetzt behalten success/danger/warning/info ihre Signalfarben; primary und
   secondary werden auf die Hauspalette gezogen, damit die Anwendung nicht
   Bootstrap-blau wird. */
.btn-primary {
  --bs-btn-bg: var(--tt-accent);
  --bs-btn-border-color: var(--tt-accent);
  --bs-btn-color: var(--tt-accent-contrast);
  --bs-btn-hover-bg: var(--tt-accent-strong);
  --bs-btn-hover-border-color: var(--tt-accent-strong);
  --bs-btn-hover-color: var(--tt-accent-contrast);
  --bs-btn-active-bg: var(--tt-accent-strong);
  --bs-btn-active-border-color: var(--tt-accent-strong);
  --bs-btn-active-color: var(--tt-accent-contrast);
  --bs-btn-disabled-bg: var(--tt-accent);
  --bs-btn-disabled-border-color: var(--tt-accent);
  --bs-btn-disabled-color: var(--tt-accent-contrast);
}
.btn-outline-primary {
  --bs-btn-color: var(--tt-accent);
  --bs-btn-border-color: var(--tt-accent);
  --bs-btn-hover-bg: var(--tt-accent);
  --bs-btn-hover-border-color: var(--tt-accent);
  --bs-btn-hover-color: var(--tt-accent-contrast);
  --bs-btn-active-bg: var(--tt-accent-strong);
  --bs-btn-active-border-color: var(--tt-accent-strong);
  --bs-btn-active-color: var(--tt-accent-contrast);
  --bs-btn-disabled-color: var(--tt-accent);
  --bs-btn-disabled-border-color: var(--tt-accent);
}
.btn-secondary {
  --bs-btn-bg: var(--tt-btn);
  --bs-btn-border-color: var(--tt-border);
  --bs-btn-color: var(--tt-text-main);
  --bs-btn-hover-bg: var(--tt-bg-navbar);
  --bs-btn-hover-border-color: var(--tt-text-muted);
  --bs-btn-hover-color: var(--tt-text-main);
  --bs-btn-active-bg: var(--tt-bg-navbar);
  --bs-btn-active-border-color: var(--tt-text-muted);
  --bs-btn-active-color: var(--tt-text-main);
  --bs-btn-disabled-bg: var(--tt-btn);
  --bs-btn-disabled-border-color: var(--tt-border);
  --bs-btn-disabled-color: var(--tt-text-muted);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tt-text-main);
  --bs-btn-border-color: var(--tt-text-muted);
  --bs-btn-hover-bg: var(--tt-btn);
  --bs-btn-hover-border-color: var(--tt-text-muted);
  --bs-btn-hover-color: var(--tt-text-main);
  --bs-btn-active-bg: var(--tt-bg-navbar);
  --bs-btn-active-border-color: var(--tt-text-muted);
  --bs-btn-active-color: var(--tt-text-main);
  --bs-btn-disabled-color: var(--tt-text-muted);
  --bs-btn-disabled-border-color: var(--tt-border);
}

/* Umriss-Knöpfe mit Signalfarbe.
   Bei diesen Varianten ist die Signalfarbe zugleich die Schriftfarbe, und sie
   steht auf dem hellen Seitengrund statt auf einer farbigen Fläche. Bootstraps
   Standardwerte sind dafür zu hell: gemessen auf #f9f6f2 kamen
   outline-danger auf 4,20, outline-success auf 4,21, outline-info auf 1,82 und
   outline-warning auf 1,51 – Letzteres ist Gelb auf Beige und praktisch nicht
   lesbar. outline-danger sitzt an jedem Löschknopf.
   Deshalb hier abgedunkelte Schrift- und Rahmenfarben, geprüft gegen alle drei
   Untergründe der Palette (Seite, Karte, Beige) mit mindestens 4,5:1.
   Die Füllung beim Überfahren bleibt die kräftige Signalfarbe – dort steht
   weiße bzw. schwarze Schrift darauf, das erfüllt AA von sich aus. */
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; --bs-btn-disabled-color: #146c43; --bs-btn-disabled-border-color: #146c43; }
.btn-outline-danger  { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-disabled-color: #b02a37; --bs-btn-disabled-border-color: #b02a37; }
.btn-outline-warning { --bs-btn-color: #664d03; --bs-btn-border-color: #664d03; --bs-btn-disabled-color: #664d03; --bs-btn-disabled-border-color: #664d03; }
.btn-outline-info    { --bs-btn-color: #0a6273; --bs-btn-border-color: #0a6273; --bs-btn-disabled-color: #0a6273; --bs-btn-disabled-border-color: #0a6273; }
/* outline-light ist auf hellem Grund nicht lesbar zu bekommen (1,02:1).
   Es gibt genau eine Fundstelle; sie bekommt die neutrale Umriss-Optik. */
.btn-outline-light {
  --bs-btn-color: var(--tt-text-main);
  --bs-btn-border-color: var(--tt-text-muted);
  --bs-btn-hover-bg: var(--tt-btn);
  --bs-btn-hover-color: var(--tt-text-main);
  --bs-btn-hover-border-color: var(--tt-text-muted);
}
::-webkit-scrollbar {
  width: 10px;
  background: var(--tt-bg-navbar);
}
::-webkit-scrollbar-thumb {
  background: var(--tt-accent);
  border-radius: 5px;
}

/* Linkfarben nur für echte Textlinks.
   Vorher stand hier schlicht `a` und `a:visited`. Das traf auch jedes
   <a class="btn">, und `a:visited` hat mit (0,1,1) eine höhere Spezifität als
   `.btn` mit (0,1,0) – die Knopfschrift wurde also überschrieben, sobald das
   Ziel schon einmal besucht war. Solange alle Knöpfe beige waren, fiel das
   nicht auf (Braun auf Beige: 8,66:1). Seit primary die Akzentfarbe trägt,
   ergab das Braun auf Oliv und damit 1,36:1 – praktisch unlesbar, und in einer
   Liste sahen besuchte und unbesuchte Szenen völlig verschieden aus.
   Dieselbe Falle galt für dropdown-item, nav-link und page-link. */
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.list-group-item),
.btn-link {
  color: var(--tt-accent);
  text-decoration: underline;
  transition: color 0.2s;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.list-group-item):hover,
.btn-link:hover {
  color: var(--tt-accent-strong);
  text-decoration: underline;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.list-group-item):visited {
  color: var(--tt-text-muted);
}

.bg-orange {
  background-color: #ffb347 !important;
  color: #3a3a2c !important;
}
.bg-purple {
  background-color: #8e6dc1 !important;
  color: #fffdfa !important;
}

/* Kapitel-Card-Design */
/* .kapitel-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 2rem;
  background: #fff;
  border: none;
}
.kapitel-card .list-group:last-child {
  border-radius: 0 0 8px 8px;
}
.kapitel-header {
  border-radius: 8px 8px 0 0;
} */

/* Padding unten für Kapitel-Card */
li.list-group-item.p-0.mb-3.border-0 {
  padding-bottom: 1.25rem;
}

/* Abstand und Abschluss für Szenen-Liste in Kapitel-Card */
ul.list-group[data-kapitel-id] {
  padding-bottom: 1rem;
  border-radius: 0 0 8px 8px;
}

/* Quill Editor Style für Admin Blog */
.quill-editor {
  min-height: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fffdfa;
  padding: 1rem;
  font-size: 1.1rem;
  width: 100%;
  box-sizing: border-box;
} 

/* --- TaleTamer Anpassungen: Buttons & Links --- */

.btn, .btn:visited, .btn:active, .btn:focus {
  text-decoration: none !important;
}
.btn-link, .btn-link:visited, .btn-link:active, .btn-link:focus {
  text-decoration: none !important;
}
.btn-link:hover {
  text-decoration: underline !important;
}

/* Abstand zwischen Buttons, falls nicht durch Bootstrap gap-* vorhanden */
.btn + .btn, .btn + .btn, .btn + a.btn, a.btn + .btn, a.btn + a.btn {
  margin-left: 0.5rem;
}

/* In vertikalen Flex-Stacks (flex-column) kein margin-left — dort gilt gap-* */
.d-flex.flex-column > .btn,
.d-flex.flex-column > a.btn {
  margin-left: 0 !important;
}

/* Volle-Breite-Buttons (w-100) sind immer gestapelt — kein horizontaler Versatz */
.btn.w-100 {
  margin-left: 0 !important;
}

/* Abstand für Button-Gruppen ohne Bootstrap gap */
.d-flex.flex-wrap > .btn, .d-flex.flex-wrap > a.btn {
  margin-bottom: 0.5rem;
} 

.text-btn-outline-secondary {
  color: var(--tt-btn-hover); /* Braunton wie Button-Hover */
  font-weight: 500;
} 

/* Der Kartenkopf selbst kommt aus --bs-card-cap-bg (siehe .card oben).
   78 Kartenköpfe tragen zusätzlich bg-light; diese Utility setzt in Bootstrap
   selbst !important und schlüge die Variable sonst. Nur für diesen Fall bleibt
   die Überschreibung stehen. */
.card-header.bg-light {
  background-color: var(--tt-btn) !important;
  color: var(--tt-text-main);
  border-bottom: 1px solid var(--tt-border);
}

/* Recherche Tool Styles */
.recherche-sidebar {
  background: var(--tt-bg-navbar);
  border-radius: 10px;
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 1rem;
  margin-bottom: 2rem;
}

.eintrag-card {
  transition: all 0.2s ease;
  border: 1px solid var(--tt-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  background: var(--tt-bg-card);
}

.eintrag-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.eintrag-header {
  background: linear-gradient(135deg, var(--tt-bg-navbar), var(--tt-btn));
  padding: 1.25rem;
  border-bottom: 1px solid var(--tt-border);
}

.eintrag-content {
  padding: 1.25rem;
}

.eintrag-meta {
  font-size: 0.9rem;
  color: var(--tt-text-muted);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tt-border);
}

.lesezeichen-btn {
  border: none;
  background: none;
  color: #ffc107;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.lesezeichen-btn:hover {
  color: #e0a800;
}

.lesezeichen-btn.active {
  color: #ffc107;
}

.search-box, .stats-card {
  background: var(--tt-bg-card);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid var(--tt-border);
}

.tags-badge {
  background-color: var(--tt-btn);
  color: var(--tt-text-main);
  font-size: 0.8rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
  display: inline-block;
}

.kategorie-item {
  transition: all 0.2s ease;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.kategorie-item:hover {
  background-color: var(--tt-btn);
  transform: translateX(5px);
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--tt-text-muted);
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Timeline Styles */
.timeline {
  margin-left: 0;
  padding-left: 0;
  position: relative;
}
.timeline-item {
  z-index: 1;
}
.timeline-icon {
  font-size: 1.2rem;
  color: #fff;
  z-index: 2;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #ccc;
}
.timeline-line {
  position: absolute;
  left: 20px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ccc;
  z-index: 0;
}
.timeline-link {
  color: var(--tt-btn, #bfa46d);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.timeline-link:hover, .timeline-link:focus {
  color: #8c6b2f;
  text-decoration: underline;
}
/* Mobile Navigation Styles */
@media (max-width: 991.98px) {
  /* Hamburger Menu Button für nicht eingeloggte Nutzer */
  #guestMenuDropdown {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out;
  }
  
  #guestMenuDropdown:hover {
    background-color: var(--tt-bg-card) !important;
  }
  
  /* Dropdown Menu Mobile Optimierung */
  .dropdown-menu {
    min-width: 200px;
    border: 1px solid var(--tt-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
  }
  
  .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--tt-text-main);
    transition: background-color 0.15s ease-in-out;
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: var(--tt-bg-page);
    color: var(--tt-text-main);
  }
  
  .dropdown-item i {
    width: 1.2rem;
    text-align: center;
  }
  
  /* Navbar Brand Mobile Optimierung */
  .navbar-brand img {
    max-height: 60px !important;
    max-width: 200px !important;
  }
  
  /* Navbar Höhe Mobile */
  .navbar {
    min-height: 60px !important;
  }
}

/* Ausschreibungen Page Styling */
.ausschreibungen-detail-btn {
  border: 1px solid var(--tt-accent);
  color: var(--tt-accent);
  background-color: transparent;
  transition: all 0.3s ease;
}

.ausschreibungen-detail-btn:hover {
  background-color: var(--tt-accent);
  color: white;
  border-color: var(--tt-accent);
}

.ausschreibungen-cta-btn {
  background-color: var(--tt-bg-card);
  color: var(--tt-text-main);
  border: none;
  transition: all 0.3s ease;
}

.ausschreibungen-cta-btn:hover {
  background-color: var(--tt-bg-form);
  color: var(--tt-text-main);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ausschreibungen-submit-btn {
  background-color: var(--tt-accent);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.ausschreibungen-submit-btn:hover {
  background-color: var(--tt-accent-hover);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .timeline-item { flex-direction: column; align-items: flex-start; }
  .timeline-icon { margin-bottom: 0.5rem; }
} 
/* ——— Romanstatus: Punkt und Abzeichen aus denselben Tokens ———
   Ersetzt die doppelte Pflege in romane_list.html.twig. Neue Zustände brauchen
   nur noch ein Tokenpaar oben und eine Zeile hier. */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tt-text-muted);
}
.status-badge {
  background: var(--tt-text-muted);
  color: #fff;
}
.status-dot--unfertig      { background: var(--tt-status-unfertig); }
.status-dot--ueberarbeiten { background: var(--tt-status-ueberarbeiten); }
.status-dot--recherche     { background: var(--tt-status-recherche); }
.status-dot--fertig        { background: var(--tt-status-fertig); }
.status-dot--lektoriert    { background: var(--tt-status-lektoriert); }
.status-dot--gestoppt      { background: var(--tt-status-gestoppt); }
.status-dot--wartend       { background: var(--tt-status-wartend); }
.status-dot--loeschen      { background: var(--tt-status-loeschen); }

.status-badge--unfertig      { background: var(--tt-status-unfertig);      color: var(--tt-status-unfertig-fg); }
.status-badge--ueberarbeiten { background: var(--tt-status-ueberarbeiten); color: var(--tt-status-ueberarbeiten-fg); }
.status-badge--recherche     { background: var(--tt-status-recherche);     color: var(--tt-status-recherche-fg); }
.status-badge--fertig        { background: var(--tt-status-fertig);        color: var(--tt-status-fertig-fg); }
.status-badge--lektoriert    { background: var(--tt-status-lektoriert);    color: var(--tt-status-lektoriert-fg); }
.status-badge--gestoppt      { background: var(--tt-status-gestoppt);      color: var(--tt-status-gestoppt-fg); }
.status-badge--wartend       { background: var(--tt-status-wartend);       color: var(--tt-status-wartend-fg); }
.status-badge--loeschen      { background: var(--tt-status-loeschen);      color: var(--tt-status-loeschen-fg); }

/* ——— Arbeitsbereich eines Romans: Seitenleiste ———
   Ersetzt den Umweg über die Romanseite, wenn man von den Personen zu den
   Orten will. Alle Farben aus den Tokens, damit die Leiste den Hell-/Dunkel-
   Wechsel ohne eigene Regeln mitmacht. */
.tt-seitenleiste-spalte { --tt-nav-breite: 240px; }
.tt-roman-nav {
  width: var(--tt-nav-breite);
  max-width: 100%;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border);
  border-radius: 10px;
  padding: 12px 0;
  position: sticky;
  top: 1rem;
}
.tt-roman-nav-kopf { padding: 0 14px 10px; border-bottom: 1px solid var(--tt-border); margin-bottom: 8px; }
.tt-roman-nav-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--tt-text-muted); text-decoration: none;
}
.tt-roman-nav-zurueck:hover { color: var(--tt-accent); text-decoration: underline; }
.tt-roman-nav-titel {
  font-weight: 600; color: var(--tt-text-main); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-roman-nav-liste { list-style: none; margin: 0; padding: 0; }
.tt-roman-nav-punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: var(--tt-text-main);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.92rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-roman-nav-punkt:hover {
  background: color-mix(in srgb, var(--tt-accent) 8%, transparent);
  color: var(--tt-accent);
  text-decoration: none;
}
.tt-roman-nav-punkt.aktiv {
  background: color-mix(in srgb, var(--tt-accent) 12%, transparent);
  border-left-color: var(--tt-accent);
  /* --tt-accent-strong statt --tt-accent: Auf der eingefärbten Fläche kommt
     der normale Akzent nur auf 4,52:1 – knapp über der AA-Grenze und damit
     ohne Reserve, falls die Palette später nachjustiert wird. Die dunklere
     Stufe liegt bei 6,24:1 (hell) bzw. 7,40:1 (dunkel). */
  color: var(--tt-accent-strong);
  font-weight: 600;
}
.tt-roman-nav-punkt i:first-child { width: 1.1rem; text-align: center; flex-shrink: 0; }
.tt-roman-nav-punkt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gesperrt heisst nicht ausgeblendet: Der Punkt bleibt anklickbar und fuehrt
   zur Abo-Seite – wer nicht sieht, was es gibt, bucht es auch nicht. */
.tt-roman-nav-punkt.gesperrt { color: var(--tt-text-muted); }
.tt-roman-nav-schloss { margin-left: auto; font-size: 0.7rem; opacity: 0.7; }
.tt-roman-nav-fuss { border-top: 1px solid var(--tt-border); margin-top: 8px; padding-top: 8px; }
.tt-roman-nav-fuss .tt-roman-nav-punkt { font-size: 0.85rem; padding: 7px 14px; color: var(--tt-text-muted); }
.tt-roman-nav-fuss .tt-roman-nav-punkt:hover { color: var(--tt-accent); }

/* Unter lg liegt die Leiste ueber dem Inhalt und laeuft in voller Breite –
   sticky waere dort nur im Weg. */
@media (max-width: 991.98px) {
  .tt-roman-nav { width: 100%; position: static; }
  .tt-roman-nav-liste { display: flex; flex-wrap: wrap; }
  .tt-roman-nav-liste li { flex: 1 1 auto; }
  .tt-roman-nav-punkt { border-left: none; border-bottom: 3px solid transparent; }
  .tt-roman-nav-punkt.aktiv { border-left: none; border-bottom-color: var(--tt-accent); }
  .tt-roman-nav-fuss { display: flex; flex-wrap: wrap; }
}

/* ——— Befehlspalette (Strg+K) ——— */
.tt-palette {
  position: fixed; inset: 0; z-index: 20500;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: none;
  padding: 12vh 16px 16px;
}
.tt-palette.offen { display: block; }
body.tt-palette-offen { overflow: hidden; }
.tt-palette-kasten {
  max-width: 640px; margin: 0 auto;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.tt-palette-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tt-border);
  color: var(--tt-text-muted);
}
.tt-palette-feld {
  flex: 1 1 auto; border: none; background: transparent;
  color: var(--tt-text-main); font-size: 1.05rem; outline: none; min-width: 0;
}
.tt-palette-feld::placeholder { color: var(--tt-text-muted); opacity: 0.8; }
.tt-palette-kbd {
  border: 1px solid var(--tt-border); border-radius: 4px;
  padding: 1px 6px; font-size: 0.75rem; color: var(--tt-text-muted);
}
.tt-palette-liste { list-style: none; margin: 0; padding: 4px 0; max-height: 50vh; overflow-y: auto; }
.tt-palette-treffer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; color: var(--tt-text-main);
}
.tt-palette-treffer.aktiv { background: color-mix(in srgb, var(--tt-accent) 14%, transparent); }
.tt-palette-treffer i { width: 1.1rem; text-align: center; color: var(--tt-text-muted); flex-shrink: 0; }
.tt-palette-titel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-palette-gruppe {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tt-text-muted); flex-shrink: 0;
}
.tt-palette-hinweis { padding: 8px 16px; font-size: 0.85rem; color: var(--tt-text-muted); }
.tt-palette-hinweis:empty { display: none; }

/* ——— Leerer Zustand ———
   Ersetzt die alert-info-Kaesten in den Listen. Ein Hinweis wie „Keine
   Charaktere vorhanden." sagt, was fehlt, aber nicht, was zu tun ist – und
   sieht aus wie eine Fehlermeldung, obwohl nichts falsch ist. */
.tt-leer {
  text-align: center;
  padding: var(--tt-abstand-xl) var(--tt-abstand-md);
  background: var(--tt-bg-card);
  border: 1px dashed var(--tt-border-strong);
  border-radius: var(--tt-radius-md);
  color: var(--tt-text-muted);
}
.tt-leer-symbol {
  font-size: 2.5rem;
  color: var(--tt-accent);
  opacity: 0.55;
  display: block;
  margin-bottom: var(--tt-abstand-sm);
}
.tt-leer-titel {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tt-text-main);
  margin-bottom: var(--tt-abstand-xs);
}
.tt-leer-text { margin-bottom: var(--tt-abstand-md); max-width: 46ch; margin-inline: auto; }
.tt-leer-text:last-child { margin-bottom: 0; }

/* ——— Statusfilter der Romanliste ———
   Lag als Inline-Style im Template und war auf Bootstrap-Blau festgenagelt;
   seit primary die Hauspalette traegt, passte das nicht mehr zusammen. */
.status-filter-btn {
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border-strong);
  color: var(--tt-text-main);
  border-radius: var(--tt-radius-rund);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  opacity: 0.75;
}
.status-filter-btn:hover {
  background: color-mix(in srgb, var(--tt-accent) 8%, var(--tt-bg-card));
  border-color: var(--tt-accent);
  opacity: 1;
}
.status-filter-btn.active {
  background: var(--tt-accent);
  border-color: var(--tt-accent);
  color: var(--tt-accent-contrast);
  opacity: 1;
  font-weight: 600;
}
/* Der Statuspunkt muss auf der gefuellten Flaeche sichtbar bleiben. */
.status-filter-btn.active .status-dot { box-shadow: 0 0 0 2px var(--tt-accent-contrast); }

/* ——— Karten etwas ruhiger ——— */
.card { box-shadow: var(--tt-schatten-sm); }
.card.shadow-sm { box-shadow: var(--tt-schatten-md) !important; }

/* ——— Typografie ———
   Keine eigene Schriftdatei: Die Wahl einer Hausschrift ist eine
   Markenentscheidung, und lokal eingebundene Dateien brauchen Lizenz und
   Speicherplatz. Bis dahin holt eine sauberere Skala den groessten Teil des
   Effekts: Bootstraps Standard springt von h1 (2.5rem) auf h2 (2rem) und
   wieder auf h3 (1.75rem) – im Fliesstext einer Anwendung ist das zu gross
   und zu kontrastarm gestuft. */
h1, .h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.1rem); font-weight: 650; letter-spacing: -0.015em; }
h2, .h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.65rem); font-weight: 620; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4, .h4 { font-size: 1.1rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; }

/* Fliesstext etwas luftiger – 1.5 ist fuer laengere Absaetze knapp. */
body { line-height: 1.6; }
/* Lesbreite in Textbereichen begrenzen. Ueber die volle Breite eines grossen
   Bildschirms verliert man beim Zeilensprung die Zeile. */
.blog-content p, .handbuch-content p { max-width: 72ch; }

.card-title { font-size: 1.05rem; font-weight: 600; }
.card-header { font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   Blog
   ───────────────────────────────────────────────────────────────────────────
   Eigener Namensraum tt-blog-* / tt-artikel-*, damit die Umstellung den Rest
   der Anwendung nicht anfasst. Alle Farben kommen aus den --tt-* Tokens: Das
   Farbschema bleibt unverändert, geändert haben sich Raster, Rhythmus und
   Typografie.

   Die Regeln stehen bewusst nicht im <style>-Block der Blog-Templates. Eine
   Datei wird einmal geladen und danach aus dem Cache bedient; ein Stilblock im
   Kopf jeder Blogseite wandert bei jedem Aufruf erneut durch die Leitung und
   verzögert die Anzeige. Bei Seiten, die vor allem von Suchmaschinen und
   Erstbesuchern aufgerufen werden, zählt das.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— Kopf der Übersicht ——— */
.tt-blog-kopf {
  border-bottom: 1px solid var(--tt-border);
  padding-bottom: var(--tt-abstand-lg);
  margin-bottom: var(--tt-abstand-xl);
}
.tt-blog-augenbraue {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tt-accent-strong);
  margin-bottom: var(--tt-abstand-sm);
}
.tt-blog-kopf h1 { margin-bottom: var(--tt-abstand-sm); }
.tt-blog-kopf .lead { color: var(--tt-text-muted); max-width: 62ch; }

/* ——— Schlagwort-Leiste ——— */
.tt-blog-themen {
  display: flex;
  gap: var(--tt-abstand-sm);
  flex-wrap: wrap;
  align-items: center;
}
.tt-blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--tt-radius-rund);
  border: 1px solid var(--tt-border);
  background: var(--tt-surface);
  color: var(--tt-text-main);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tt-blog-chip:hover,
.tt-blog-chip:focus-visible {
  background: var(--tt-accent);
  border-color: var(--tt-accent);
  color: var(--tt-accent-contrast);
  text-decoration: none;
}
.tt-blog-chip .tt-blog-chip-anzahl {
  font-size: 0.75rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.tt-blog-chip.aktiv {
  background: var(--tt-accent);
  border-color: var(--tt-accent);
  color: var(--tt-accent-contrast);
}

/* ——— Suchfeld ——— */
.tt-blog-suche .form-control {
  border-radius: var(--tt-radius-rund) 0 0 var(--tt-radius-rund);
  padding-left: 1rem;
}
.tt-blog-suche .btn {
  border-radius: 0 var(--tt-radius-rund) var(--tt-radius-rund) 0;
}

/* ——— Aufmacher: der neueste Beitrag groß ———
   Ein Blog ohne Hierarchie liest sich wie ein Archiv. Der oberste Beitrag
   bekommt Bild und Platz, alles Weitere die Karte. */
.tt-blog-aufmacher {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
  box-shadow: var(--tt-schatten-md);
  margin-bottom: var(--tt-abstand-xl);
}
@media (min-width: 768px) {
  .tt-blog-aufmacher { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}
.tt-blog-aufmacher-bild {
  position: relative;
  min-height: 220px;
  background: var(--tt-surface-sunken);
  overflow: hidden;
}
.tt-blog-aufmacher-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-blog-aufmacher-text {
  padding: var(--tt-abstand-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--tt-abstand-sm);
}
@media (min-width: 992px) { .tt-blog-aufmacher-text { padding: var(--tt-abstand-xl); } }
.tt-blog-aufmacher-text h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 0; }
.tt-blog-aufmacher-text h2 a { color: var(--tt-text-main); text-decoration: none; }
.tt-blog-aufmacher-text h2 a:hover { color: var(--tt-accent-strong); }

/* ——— Kartenraster ——— */
.tt-blog-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tt-abstand-lg);
}
.tt-blog-karte {
  display: flex;
  flex-direction: column;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
  box-shadow: var(--tt-schatten-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tt-blog-karte:hover,
.tt-blog-karte:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--tt-schatten-lg);
  border-color: var(--tt-accent);
}
/* Wer „Bewegung reduzieren“ eingestellt hat, bekommt den Hinweis über Schatten
   und Rahmen statt über das Anheben. */
@media (prefers-reduced-motion: reduce) {
  .tt-blog-karte { transition: none; }
  .tt-blog-karte:hover, .tt-blog-karte:focus-within { transform: none; }
}
.tt-blog-karte-bild {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tt-surface-sunken);
  overflow: hidden;
}
.tt-blog-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platzhalter, solange ein Beitrag kein Titelbild hat: eine ruhige Fläche mit
   Federsymbol statt eines gedehnten Logos. */
.tt-blog-ohne-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-accent);
  opacity: 0.35;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--tt-surface-sunken), var(--tt-surface));
}
.tt-blog-karte-koerper {
  padding: var(--tt-abstand-md);
  display: flex;
  flex-direction: column;
  gap: var(--tt-abstand-sm);
  flex: 1 1 auto;
}
.tt-blog-karte-koerper h2,
.tt-blog-karte-koerper h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}
.tt-blog-karte-koerper h2 a,
.tt-blog-karte-koerper h3 a { color: var(--tt-text-main); text-decoration: none; }
.tt-blog-karte-koerper h2 a:hover,
.tt-blog-karte-koerper h3 a:hover { color: var(--tt-accent-strong); }
.tt-blog-karte-teaser {
  color: var(--tt-text-muted);
  font-size: 0.92rem;
  margin: 0;
  flex: 1 1 auto;
}
.tt-blog-weiter {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tt-accent-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
}
.tt-blog-weiter:hover { color: var(--tt-accent-strong); text-decoration: underline; }
.tt-blog-weiter i { transition: transform .15s ease; }
.tt-blog-weiter:hover i { transform: translateX(3px); }

/* ——— Meta-Zeile: Datum, Lesezeit, Autor ——— */
.tt-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  font-size: 0.82rem;
  color: var(--tt-text-muted);
}
.tt-blog-meta > * { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ——— Artikelseite ——— */
.tt-artikel-kopf {
  border-bottom: 1px solid var(--tt-border);
  padding-bottom: var(--tt-abstand-lg);
  margin-bottom: var(--tt-abstand-lg);
}
.tt-artikel-kopf h1 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.2;
  margin: var(--tt-abstand-sm) 0;
}
.tt-artikel-titelbild {
  border-radius: var(--tt-radius-lg);
  overflow: hidden;
  margin-bottom: var(--tt-abstand-lg);
  box-shadow: var(--tt-schatten-md);
  background: var(--tt-surface-sunken);
}
.tt-artikel-titelbild img { width: 100%; height: auto; display: block; }

/* „Kurz gefasst“ – die Zusammenfassung über dem Text.
   Für Leser der Einstieg, für Sprachmodelle der Absatz, der beim Zitieren
   genommen wird. Deshalb steht er als erster zusammenhängender Text im
   Artikel und nicht als Randnotiz weiter unten. */
.tt-artikel-kurzfassung {
  background: var(--tt-surface-sunken);
  border-left: 4px solid var(--tt-accent);
  border-radius: 0 var(--tt-radius-md) var(--tt-radius-md) 0;
  padding: var(--tt-abstand-md) var(--tt-abstand-lg);
  margin-bottom: var(--tt-abstand-lg);
}
.tt-artikel-kurzfassung-titel {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tt-accent-strong);
  margin-bottom: 0.35rem;
}
.tt-artikel-kurzfassung p { margin: 0; font-size: 1rem; color: var(--tt-text-main); }

/* Inhaltsverzeichnis. Ab lg als mitlaufende Spalte neben dem Text. */
.tt-artikel-inhalt-nav {
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  padding: var(--tt-abstand-md);
  font-size: 0.88rem;
}
.tt-artikel-inhalt-titel {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-text-muted);
  margin-bottom: var(--tt-abstand-sm);
}
.tt-artikel-inhalt-nav ol { list-style: none; margin: 0; padding: 0; }
.tt-artikel-inhalt-nav li { margin-bottom: 0.4rem; }
.tt-artikel-inhalt-nav li.stufe-3 { padding-left: var(--tt-abstand-md); font-size: 0.84rem; }
.tt-artikel-inhalt-nav a {
  color: var(--tt-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  display: block;
}
.tt-artikel-inhalt-nav a:hover,
.tt-artikel-inhalt-nav a.aktiv {
  color: var(--tt-accent-strong);
  border-left-color: var(--tt-accent);
}
@media (min-width: 992px) {
  .tt-artikel-inhalt-nav { position: sticky; top: var(--tt-abstand-lg); max-height: calc(100vh - 4rem); overflow-y: auto; }
}

/* Fließtext des Artikels.
   Blocksatz ist hier bewusst zurückgenommen: ohne Silbentrennung reißt er im
   Deutschen Löcher in die Zeilen. Linksbündig mit automatischer Trennung
   liest sich ruhiger. */
.tt-artikel .blog-content {
  font-size: 1.06rem;
  line-height: 1.75;
}
.tt-artikel .blog-content p {
  text-align: left;
  hyphens: auto;
  max-width: 68ch;
  margin-bottom: 1.25rem;
}
.tt-artikel .blog-content h2 {
  margin-top: 2.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--tt-border);
}
.tt-artikel .blog-content h3 { margin-top: 1.8rem; }
/* Zielpunkt für die Sprungmarken aus dem Inhaltsverzeichnis: sonst
   verschwindet die Überschrift unter der Navigationsleiste. */
.tt-artikel .blog-content h2[id],
.tt-artikel .blog-content h3[id] { scroll-margin-top: 5rem; }
.tt-artikel .blog-content img { border-radius: var(--tt-radius-md); box-shadow: var(--tt-schatten-sm); }
.tt-artikel .blog-content blockquote {
  border-left: 4px solid var(--tt-accent);
  background: var(--tt-surface-sunken);
  border-radius: 0 var(--tt-radius-md) var(--tt-radius-md) 0;
  padding: var(--tt-abstand-md) var(--tt-abstand-lg);
  margin: 1.5rem 0;
  font-style: normal;
  color: var(--tt-text-main);
}
.tt-artikel .blog-content blockquote p:last-child { margin-bottom: 0; }

/* ——— Fußbereich des Artikels ——— */
.tt-artikel-fuss {
  border-top: 1px solid var(--tt-border);
  margin-top: var(--tt-abstand-xl);
  padding-top: var(--tt-abstand-lg);
}
.tt-artikel-autor {
  display: flex;
  gap: var(--tt-abstand-md);
  align-items: flex-start;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-abstand-md);
}
.tt-artikel-autor-zeichen {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tt-accent);
  color: var(--tt-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Blättern zwischen Beiträgen */
.tt-artikel-nachbarn { display: grid; grid-template-columns: 1fr; gap: var(--tt-abstand-md); }
@media (min-width: 768px) { .tt-artikel-nachbarn { grid-template-columns: 1fr 1fr; } }
.tt-artikel-nachbar {
  display: block;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  padding: var(--tt-abstand-md);
  background: var(--tt-surface);
  text-decoration: none;
  color: var(--tt-text-main);
  transition: border-color .15s, box-shadow .15s;
}
.tt-artikel-nachbar:hover { border-color: var(--tt-accent); box-shadow: var(--tt-schatten-md); color: var(--tt-text-main); }
.tt-artikel-nachbar-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-text-muted);
  display: block;
  margin-bottom: 0.25rem;
}
.tt-artikel-nachbar.rechts { text-align: right; }

/* Teilen-Knöpfe */
.tt-blog-teilen { display: flex; flex-wrap: wrap; gap: var(--tt-abstand-sm); align-items: center; }
.tt-blog-teilen .btn { border-radius: var(--tt-radius-rund); }

/* Abschluss-Aufforderung unter Artikel und Übersicht */
.tt-blog-cta {
  background: var(--tt-surface);
  border: 1px solid var(--tt-accent);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-abstand-lg);
  text-align: center;
  box-shadow: var(--tt-schatten-md);
}
.tt-blog-cta h2 { margin-bottom: var(--tt-abstand-sm); }
.tt-blog-cta p { color: var(--tt-text-muted); max-width: 52ch; margin: 0 auto var(--tt-abstand-md); }

/* Leerzustand */
.tt-blog-leer {
  text-align: center;
  padding: var(--tt-abstand-xl) var(--tt-abstand-md);
  color: var(--tt-text-muted);
  border: 1px dashed var(--tt-border);
  border-radius: var(--tt-radius-lg);
}

/* Der Kartentitel wechselt je nach Kontext zwischen h2 und h3 (siehe das
   Makro karte() in _blog_makros.html.twig). Die Klasse haelt die Darstellung
   davon unabhaengig. */
.tt-blog-karten-titel { font-size: 1.15rem; line-height: 1.35; margin: 0; }
.tt-blog-karten-titel a { color: var(--tt-text-main); text-decoration: none; }
.tt-blog-karten-titel a:hover { color: var(--tt-accent-strong); }


/* ——— Kommentare ———
   Dieselben Tokens wie der Rest des Blogs, keine neuen Farben. Die Kommentare
   sollen unter dem Beitrag stehen, ohne mit ihm um Aufmerksamkeit zu ringen –
   deshalb kleinerer Schriftgrad und Trennlinien statt Karten. */
.tt-kommentare {
  border-top: 1px solid var(--tt-border);
  margin-top: var(--tt-abstand-xl);
  padding-top: var(--tt-abstand-lg);
  max-width: 68ch;
}
.tt-kommentar {
  display: flex;
  gap: var(--tt-abstand-md);
  padding: var(--tt-abstand-md) 0;
  border-bottom: 1px solid var(--tt-border);
}
/* Antworten eingerückt und mit einer Linie am Rand: Die Zugehörigkeit muss
   ohne Farbe erkennbar sein, sonst geht sie im Dunkelmodus verloren. */
.tt-kommentar-antwort {
  margin-left: var(--tt-abstand-lg);
  padding-left: var(--tt-abstand-md);
  border-left: 2px solid var(--tt-border);
}
@media (min-width: 768px) {
  .tt-kommentar-antwort { margin-left: var(--tt-abstand-xl); }
}
.tt-kommentar-zeichen {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tt-surface-sunken);
  color: var(--tt-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
}
.tt-kommentar-antwort .tt-kommentar-zeichen { width: 32px; height: 32px; font-size: .85rem; }
.tt-kommentar-koerper { flex: 1 1 auto; min-width: 0; }
.tt-kommentar-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  align-items: baseline;
  margin-bottom: .35rem;
}
.tt-kommentar-kopf time { font-size: .8rem; color: var(--tt-text-muted); }
/* Ein Kommentar kann ein sehr langes Wort enthalten (eine zusammengeschriebene
   Adresse etwa). Ohne Umbruch schiebt es die ganze Seite in die Breite. */
.tt-kommentar-text {
  color: var(--tt-text-main);
  overflow-wrap: anywhere;
  white-space: normal;
}
.tt-kommentar-antworten {
  background: none;
  border: 0;
  padding: 0;
  margin-top: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tt-accent-strong);
  cursor: pointer;
}
.tt-kommentar-antworten:hover { text-decoration: underline; }

.tt-kommentar-formular {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-abstand-lg);
  margin-top: var(--tt-abstand-lg);
}

/* Verwaltung: der Kommentartext in der Freigabeliste. */
.tt-kommentar-vorschau {
  background: var(--tt-bg-form);
  border-left: 3px solid var(--tt-border);
  border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0;
  padding: .6rem .9rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ——————————————————————————————————————————————————————————————
   Handbuch
   ——————————————————————————————————————————————————————————————
   Zweispaltig wie eine Softwaredokumentation: links das Inhaltsverzeichnis,
   das beim Blättern stehen bleibt, rechts die Seite. Alle Farben kommen aus
   den --tt-Tokens, damit der Hell-/Dunkel-Wechsel ohne eigene Regeln greift.

   Die Leiste hängt im Sidebar-Block aus base.html.twig und ist breiter als
   die Roman-Leiste: Handbuchtitel sind länger als „Personen“ oder „Orte“. */

.tt-hb-nav {
  width: 290px;
  max-width: 100%;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg, 10px);
  padding: 12px 0;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tt-hb-nav-kopf { padding: 0 14px 10px; border-bottom: 1px solid var(--tt-border); margin-bottom: 8px; }
.tt-hb-nav-heim {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--tt-text-main); text-decoration: none;
  margin-bottom: 10px;
}
.tt-hb-nav-heim:hover { color: var(--tt-accent-strong); }

.tt-hb-suche { position: relative; }
.tt-hb-suche i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--tt-text-muted); font-size: 0.85rem; pointer-events: none;
}
.tt-hb-suche input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font-size: 0.88rem;
  color: var(--tt-text-main);
  background: var(--tt-bg-form);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm, 6px);
}
.tt-hb-suche input:focus {
  outline: 2px solid var(--tt-focus);
  outline-offset: 1px;
  border-color: var(--tt-focus);
}

.tt-hb-nav-liste { list-style: none; margin: 0; padding: 0; }
.tt-hb-nav-punkt {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 14px;
  color: var(--tt-text-main);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
  line-height: 1.35;
}
.tt-hb-nav-punkt:hover {
  background: color-mix(in srgb, var(--tt-accent) 8%, transparent);
  color: var(--tt-accent-strong);
  text-decoration: none;
}
.tt-hb-nav-punkt.aktiv {
  background: color-mix(in srgb, var(--tt-accent) 12%, transparent);
  border-left-color: var(--tt-accent);
  color: var(--tt-accent-strong);
  font-weight: 600;
}
.tt-hb-nav-punkt.bereich { font-weight: 600; margin-top: 6px; }
.tt-hb-nav-punkt i:first-child { width: 1.1rem; text-align: center; flex-shrink: 0; margin-top: 2px; }
.tt-hb-nav-text { display: flex; flex-direction: column; min-width: 0; }
.tt-hb-nav-untertitel { color: var(--tt-text-muted); font-size: 0.76rem; font-weight: 400; }
.tt-hb-nav-extern { margin-left: auto; font-size: 0.7rem; opacity: 0.6; }

/* Zwischenüberschrift: kein Verweis, nur Ordnung. Deshalb ohne Hoverfarbe und
   ohne Anfasser – ein anklickbar wirkender Text, der nichts tut, ärgert mehr
   als eine schlichte Überschrift. */
.tt-hb-nav-gruppentitel {
  display: block;
  padding: 12px 14px 4px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tt-text-muted);
}
.tt-hb-nav-unter .tt-hb-nav-punkt { padding-left: 26px; font-size: 0.87rem; }

.tt-hb-entwurf {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tt-surface-sunken);
  color: var(--tt-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

/* ——— Inhaltsspalte ——— */

.tt-hb-inhalt { max-width: 60rem; }
.tt-hb-kopf { margin-bottom: var(--tt-abstand-lg); }
.tt-hb-kopf h1 { margin-bottom: .4rem; }
.tt-hb-lead { color: var(--tt-text-muted); font-size: 1.05rem; margin-bottom: .6rem; }
.tt-hb-meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: var(--tt-text-muted); font-size: 0.85rem; margin-bottom: 0;
}
.tt-hb-meta i { margin-right: .25rem; }
.tt-hb-meta-bearbeiten { color: var(--tt-accent-strong); text-decoration: none; }
.tt-hb-meta-bearbeiten:hover { text-decoration: underline; }
.tt-hb-hero {
  width: 100%; height: auto; border-radius: var(--tt-radius-lg, 10px);
  margin-bottom: var(--tt-abstand-lg);
}
.tt-hb-vorschau { margin-bottom: var(--tt-abstand-lg); }

.tt-hb-bereich { margin-bottom: var(--tt-abstand-xl); }
.tt-hb-bereich-titel { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; margin-bottom: .3rem; }
.tt-hb-bereich-titel a { color: inherit; text-decoration: none; }
.tt-hb-bereich-titel a:hover { color: var(--tt-accent-strong); }
.tt-hb-bereich-text { color: var(--tt-text-muted); margin-bottom: var(--tt-abstand-md); }

.tt-hb-gruppenkarte,
.tt-hb-seitenkarte {
  display: block; height: 100%;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg, 10px);
  padding: var(--tt-abstand-md);
  color: var(--tt-text-main);
  text-decoration: none;
}
.tt-hb-seitenkarte:hover {
  border-color: var(--tt-accent);
  color: var(--tt-text-main);
  text-decoration: none;
}
.tt-hb-gruppenkarte h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.tt-hb-gruppenkarte ul { list-style: none; margin: 0; padding: 0; }
.tt-hb-gruppenkarte li { padding: 3px 0; font-size: 0.92rem; }
.tt-hb-gruppenkarte a { color: var(--tt-text-main); text-decoration: none; }
.tt-hb-gruppenkarte a:hover { color: var(--tt-accent-strong); text-decoration: underline; }
.tt-hb-mehr { color: var(--tt-text-muted); font-size: 0.82rem; margin: .4rem 0 0; }
.tt-hb-karte-titel { display: block; font-weight: 600; margin-bottom: .25rem; }
.tt-hb-karte-titel i { margin-right: .4rem; color: var(--tt-accent-strong); }
.tt-hb-karte-text { display: block; color: var(--tt-text-muted); font-size: 0.88rem; }

/* ——— Blöcke einer Seite ——— */

.tt-hb-block { margin-bottom: var(--tt-abstand-lg); }
.tt-hb-block-titel { font-size: 1.25rem; margin: var(--tt-abstand-lg) 0 .6rem; }
.tt-hb-block:first-child .tt-hb-block-titel { margin-top: 0; }
.tt-hb-text { line-height: 1.7; }
.tt-hb-text > *:last-child { margin-bottom: 0; }
.tt-hb-text h2 { font-size: 1.25rem; margin: 1.5rem 0 .6rem; }
.tt-hb-text h3 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; }
.tt-hb-text img { max-width: 100%; height: auto; border-radius: var(--tt-radius-md, 8px); }
.tt-hb-text ul, .tt-hb-text ol { padding-left: 1.4rem; }
.tt-hb-text li { margin-bottom: .3rem; }
.tt-hb-text blockquote {
  border-left: 4px solid var(--tt-accent);
  padding-left: 1rem; margin: 1rem 0;
  color: var(--tt-text-muted); font-style: italic;
}
.tt-hb-text code, .tt-hb-code code {
  background: var(--tt-bg-form);
  padding: .15rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}

.tt-hb-bild { margin: 0; }
.tt-hb-bild.schmal { max-width: 32rem; }
.tt-hb-bild img {
  width: 100%; height: auto;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md, 8px);
}
.tt-hb-bild figcaption,
.tt-hb-video figcaption {
  color: var(--tt-text-muted); font-size: .85rem; margin-top: .4rem;
}

.tt-hb-video { margin: 0; }
/* Fester Seitenrahmen statt fester Höhe: Sonst springt das Layout, sobald das
   Video geladen ist. */
.tt-hb-video-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tt-surface-sunken);
  border-radius: var(--tt-radius-md, 8px);
  overflow: hidden;
}
.tt-hb-video-rahmen iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.tt-hb-video-datei { width: 100%; border-radius: var(--tt-radius-md, 8px); background: #000; }

.tt-hb-hinweis { border-radius: var(--tt-radius-md, 8px); }
.tt-hb-hinweis-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.tt-hb-hinweis .tt-hb-text > *:last-child { margin-bottom: 0; }

.tt-hb-schritte .tt-hb-text ol { counter-reset: schritt; list-style: none; padding-left: 0; }
.tt-hb-schritte .tt-hb-text ol > li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: .8rem;
}
.tt-hb-schritte .tt-hb-text ol > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tt-accent);
  color: var(--tt-accent-contrast);
  font-size: .82rem; font-weight: 700;
}

.tt-hb-code {
  background: var(--tt-bg-form);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md, 8px);
  padding: 1rem;
  overflow-x: auto;
}
.tt-hb-code code { background: none; padding: 0; }

.tt-hb-karte {
  display: block; height: 100%;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md, 8px);
  padding: .9rem 1rem;
  color: var(--tt-text-main); text-decoration: none;
}
.tt-hb-karte.anklickbar:hover { border-color: var(--tt-accent); text-decoration: none; }
.tt-hb-karte > i { color: var(--tt-accent-strong); margin-bottom: .3rem; display: block; }
.tt-hb-trenner { margin: var(--tt-abstand-xl) 0; border-color: var(--tt-border); opacity: 1; }

/* ——— Unterseiten und Blättern ——— */

.tt-hb-unterseiten { margin-top: var(--tt-abstand-xl); }
.tt-hb-unterseiten h2 { font-size: 1.15rem; margin-bottom: var(--tt-abstand-md); }

.tt-hb-blaettern {
  display: flex; justify-content: space-between; gap: var(--tt-abstand-md);
  margin-top: var(--tt-abstand-xl);
  padding-top: var(--tt-abstand-md);
  border-top: 1px solid var(--tt-border);
}
.tt-hb-blaettern-punkt {
  display: flex; flex-direction: column; gap: .15rem;
  max-width: 48%;
  padding: .7rem 1rem;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md, 8px);
  color: var(--tt-text-main); text-decoration: none;
}
.tt-hb-blaettern-punkt:hover { border-color: var(--tt-accent); color: var(--tt-accent-strong); text-decoration: none; }
.tt-hb-blaettern-punkt.rechts { text-align: right; margin-left: auto; }
.tt-hb-blaettern-label { color: var(--tt-text-muted); font-size: .78rem; }
.tt-hb-blaettern-titel { font-weight: 600; font-size: .93rem; }

.tt-hb-fuss {
  margin-top: var(--tt-abstand-xl);
  color: var(--tt-text-muted);
  font-size: .9rem;
}

/* ——— Verwaltung: der Baum ——— */

.tt-hb-admin-zeile {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--tt-border);
}
.tt-hb-admin-zeile:hover { background: color-mix(in srgb, var(--tt-accent) 5%, transparent); }
.tt-hb-admin-zeile.ebene-1 { padding-left: 2rem; }
.tt-hb-admin-zeile.ebene-2 { padding-left: 3.6rem; }
.tt-hb-admin-zeile.ebene-3 { padding-left: 5.2rem; }
.tt-hb-admin-titel { color: var(--tt-text-main); text-decoration: none; font-weight: 500; }
.tt-hb-admin-titel:hover { color: var(--tt-accent-strong); text-decoration: underline; }
.tt-hb-admin-zeile.typ-bereich .tt-hb-admin-titel { font-weight: 700; font-size: 1.02rem; }
.tt-hb-admin-zeile.typ-gruppe .tt-hb-admin-titel { font-weight: 600; }
.tt-hb-admin-slug { color: var(--tt-text-muted); font-size: .8rem; font-family: monospace; }
.tt-hb-admin-werkzeuge { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.tt-hb-block-karte {
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md, 8px);
  margin-bottom: var(--tt-abstand-md);
  background: var(--tt-bg-card);
}
.tt-hb-block-kopf {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--tt-border);
  background: var(--tt-bg-form);
  border-radius: var(--tt-radius-md, 8px) var(--tt-radius-md, 8px) 0 0;
}
.tt-hb-block-koerper { padding: var(--tt-abstand-md); }

/* Unter lg steht die Leiste über dem Inhalt. Sticky wäre dort im Weg. */
@media (max-width: 991.98px) {
  .tt-hb-nav { width: 100%; position: static; max-height: 22rem; }
  .tt-hb-blaettern { flex-direction: column; }
  .tt-hb-blaettern-punkt { max-width: 100%; }
  .tt-hb-blaettern-punkt.rechts { margin-left: 0; }
}

/* Speicherleiste unter der Blockliste im Handbuch-Editor.

   Klebt am unteren Rand, solange die Blockliste sichtbar ist: Eine Seite mit
   zehn Blöcken ist mehrere Bildschirme hoch, und ein Knopf ganz unten wird
   genau dann nicht gefunden, wenn man ihn braucht. */
.tt-hb-speicherleiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--tt-abstand-md);
  flex-wrap: wrap;
  margin: var(--tt-abstand-md) calc(-1 * var(--tt-abstand-md)) calc(-1 * var(--tt-abstand-md));
  padding: var(--tt-abstand-md);
  background: var(--tt-bg-card);
  border-top: 1px solid var(--tt-border);
  border-radius: 0 0 var(--tt-radius-lg, 10px) var(--tt-radius-lg, 10px);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}