/* RST ▸ D-Bot (09.10.2026, Chat neu 10.10.2026) – FRF-Farben, Discord-Anmutung im Chat.
 *
 * Nur Variablen, keine Farbwerte: Flächen, Text, Rahmen, Abstände und Schrift
 * aus design-tokens.css, der Akzent ist das FRF-Gold (`--gold*`, hell und dunkel
 * in style.css). Gold rahmt alles, was vom Bot kommt; Bestätigen ist der
 * monochrome Primary-Knopf des Katalogs. Panels scrollen nicht (FRF-Regel),
 * nur Chat und Liste tun es.
 */

.dbot-layout {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* ---------- Linke Seite ---------- */

.dbot-seite {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  position: sticky;
  top: var(--space-3);
}

.dbot-seite__titel {
  margin: 0 0 var(--space-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dbot-seite__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.dbot-seite__knopf:hover { background: var(--surface-2); }

.dbot-seite__knopf.is-aktiv {
  background: var(--gold-hauch);
  border-color: var(--gold-rand);
  color: var(--gold);
}

.dbot-seite__fuss {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--text-3);
}

.dbot-zahl {
  min-width: 22px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Rechter Bereich ---------- */

.dbot-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.dbot-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}

.dbot-kanal {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

/* Zeigt, dass der Chat von selbst nachlädt – sonst wirkt eine stille Seite tot. */
.dbot-takt {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-3);
  cursor: help;
}

.dbot-takt::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--success);
  vertical-align: middle;
}

/* Platz bleibt reserviert, auch ohne Meldung: Nichts darunter springt, wenn eine kommt. */
.dbot-meldung {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--fs-12);
  color: var(--text-2);
}

.dbot-kopf--chat { flex-wrap: nowrap; }

.dbot-kopf--chat .dbot-meldung {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}

.dbot-kopf--chat .dbot-takt { margin-left: 0; flex: 0 0 auto; }

.dbot-erklaerung {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-3);
}

.dbot-hinweis {
  margin: 0;
  padding: var(--space-4);
  color: var(--text-3);
  font-size: var(--fs-13);
}

/* ---------- Knöpfe und Felder ---------- */

.dbot-knopf {
  padding: var(--space-1) var(--space-3);
  min-height: 30px;
  border: 1px solid var(--secondary-border);
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  color: var(--secondary-text);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.dbot-knopf:hover:not([disabled]) {
  background: var(--secondary-hover-bg);
  border-color: var(--secondary-hover-border);
}

.dbot-knopf[disabled] { opacity: 0.45; cursor: default; }

.dbot-knopf:focus-visible,
.dbot-seite__knopf:focus-visible,
.dbot-reiter:focus-visible,
.dbot-chip:focus-visible,
.dbot-karte__frage:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Primary des Katalogs: monochrom, hebt sich über Kontrast und Glow ab. */
.dbot-knopf--haupt {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-text);
  font-weight: var(--fw-semibold);
}

.dbot-knopf--haupt:hover:not([disabled]) {
  background: var(--primary-bg);
  border-color: var(--primary-hover-border);
  box-shadow: var(--primary-glow);
}

/* Zweiter Schritt von „Bestätigen“: sichtbar anders, damit niemand aus Versehen sendet. */
.dbot-knopf--haupt.is-armiert {
  background: var(--gold-flaeche);
  border-color: var(--gold);
  color: var(--gold);
}

.dbot-knopf--gefahr {
  border-color: var(--danger);
  color: var(--text-danger);
}

.dbot-feld {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  resize: vertical;
}

.dbot-feld:focus { outline: none; box-shadow: var(--input-focus-ring); }
.dbot-feld::placeholder { color: var(--input-placeholder); }
.dbot-feld--zeile { flex: 1 1 220px; width: auto; min-width: 0; }

.dbot-etikett {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.dbot-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dbot-fuss {
  margin: var(--space-1) 0 0;
  color: var(--text-3);
  font-size: var(--fs-12);
}

/* ---------- FAQ ---------- */

.dbot-reiter-leiste { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.dbot-reiter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.dbot-reiter.is-aktiv {
  border-color: var(--gold-rand);
  background: var(--gold-hauch);
  color: var(--gold);
}

.dbot-suche {
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-13);
}

.dbot-suche:focus { outline: none; box-shadow: var(--input-focus-ring); }

.dbot-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: opacity var(--t-base);
}

/* Beim Nachladen bleibt der alte Stand stehen, nur abgedimmt. */
.dbot-liste.is-laedt { opacity: 0.55; pointer-events: none; }

.dbot-karte {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}

/* Vermutlich überholt: steht oben und ist sofort zu erkennen. */
.dbot-karte.is-veraltet { border-color: var(--danger); }
.dbot-karte.is-aussortiert .dbot-karte__frage { color: var(--text-2); }

.dbot-karte__kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.dbot-karte__frage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  text-align: left;
  cursor: pointer;
}

.dbot-karte__pfeil { color: var(--text-3); flex: 0 0 auto; }

.dbot-karte__abzeichen { display: flex; gap: var(--space-1); flex-wrap: wrap; flex: 0 0 auto; }

.dbot-abzeichen {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-11);
  white-space: nowrap;
}

.dbot-abzeichen[data-tip] { cursor: help; }
.dbot-abzeichen--ok { background: var(--success-soft); color: var(--text-success); }
.dbot-abzeichen--warn { background: var(--surface-3); color: var(--text-danger); }
.dbot-abzeichen--gold { background: var(--gold-flaeche); color: var(--gold); }

.dbot-warnung,
.dbot-grund {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}

.dbot-warnung { color: var(--text-danger); }
.dbot-grund { color: var(--text-2); }

.dbot-karte__koerper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.dbot-original {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}

.dbot-original summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--fs-12);
}

.dbot-original[open] summary { margin-bottom: var(--space-1); }

/* „So stand es im Chat“: dieselben Nachrichten wie im Chat (Name, Bild, Rolle, Zeit),
   ohne die Spalte für Bot-Karten; Frage und Antwort mit Goldstreifen. */
.dbot-ausschnitt .dbot-msg {
  grid-template-columns: 40px minmax(0, 1fr);
  padding: var(--space-3) var(--space-3) 2px;
  border-radius: var(--radius-sm);
}

.dbot-ausschnitt .dbot-msg.is-folge { padding-top: 2px; }
.dbot-ausschnitt .dbot-msg.is-marke { box-shadow: inset 2px 0 0 var(--gold); background: var(--surface-1); }
.dbot-ausschnitt .dbot-msg .dbot-abzeichen { margin-left: var(--space-1); }

.dbot-zitat {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-2);
  color: var(--text-1);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dbot-zitat--leise { color: var(--text-3); }

.dbot-link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--text-2);
  font-size: var(--fs-12);
}

.dbot-link:hover { color: var(--text-1); }

.dbot-aussortieren {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}

.dbot-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.dbot-chip {
  padding: 2px var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
}

.dbot-chip:hover { color: var(--text-1); border-color: var(--border-3); }

/* Trenner in „Prüfen“: Neu oben, Bisherige darunter. */
.dbot-trenner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
}

.dbot-trenner::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border-2);
}

.dbot-trenner--neu { margin-top: 0; color: var(--text-1); }

.dbot-blaettern {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
}

.dbot-blaettern .dbot-fuss { margin: 0; }

/* ---------- Chat ---------- */

.dbot-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 230px);
  overflow-y: auto;
  padding: var(--space-2) 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.dbot-aeltere { align-self: center; margin: var(--space-2) 0; }

.dbot-tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-4) var(--space-1);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.dbot-tag::before,
.dbot-tag::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-1);
}

/* Eine Nachricht: Avatar | Inhalt | Karte des Bots (schmal: Karte darunter). */
/* Rechts bleibt eine Spalte für die Karten des Bots frei (siehe unten). */
.dbot-msg {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 340px;
  column-gap: var(--space-3);
  align-items: start;
  /* Neuer Post: Abstand wie in Discord, damit die Posts auseinanderzuhalten sind. */
  padding: var(--space-4) var(--space-4) 2px;
}

.dbot-msg.is-folge { padding-top: 2px; }
.dbot-msg:hover { background: var(--surface-2); }

.dbot-msg__bezug {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  margin: 0 0 2px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-2);
  border-top-left-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dbot-msg__bezug > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dbot-msg__bezug-wer { color: var(--text-2); font-weight: var(--fw-semibold); flex: 0 0 auto; }

.dbot-msg > .dbot-avatar,
.dbot-msg > .dbot-msg__uhr { grid-column: 1; }
.dbot-msg > .dbot-msg__inhalt { grid-column: 2; min-width: 0; }
.dbot-msg.has-bezug > .dbot-avatar,
.dbot-msg.has-bezug > .dbot-msg__uhr,
.dbot-msg.has-bezug > .dbot-msg__inhalt { grid-row: 2; }

/* Breite Fenster: Die Karte steht in der rechten Spalte und gehört zur Zeile –
   der nächste Post beginnt erst unter ihr (Nutzerwunsch 11.10.2026). */
.dbot-msg > .dbot-msg__karte {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 340px;
  margin-bottom: var(--space-2);
}

.dbot-msg > .dbot-msg__karte:empty { display: none; }

.dbot-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.dbot-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Uhrzeit links neben Folgenachrichten – nur beim Überfahren, wie in Discord. */
.dbot-msg__uhr {
  padding-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-11);
  text-align: right;
  visibility: hidden;
}

.dbot-msg:hover .dbot-msg__uhr { visibility: visible; }

.dbot-msg__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 2px;
}

.dbot-msg__wer { font-weight: var(--fw-semibold); font-size: var(--fs-14); color: var(--text-1); }

.dbot-rolle {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-11);
}

.dbot-rolle.is-team { background: var(--gold-flaeche); color: var(--gold); }

.dbot-zeit { color: var(--text-3); font-size: var(--fs-11); }

.dbot-msg__discord {
  color: var(--text-3);
  font-size: var(--fs-12);
  text-decoration: none;
  visibility: hidden;
}

.dbot-msg:hover .dbot-msg__discord { visibility: visible; }
.dbot-msg__discord:hover,
.dbot-msg__discord:focus-visible { color: var(--text-1); visibility: visible; }

.dbot-msg__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--text-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dbot-msg__text a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--border-3); }
.dbot-msg__text a:hover { text-decoration-color: var(--text-1); }
.dbot-msg__text--leer { color: var(--text-3); font-size: var(--fs-12); }

.dbot-msg__medien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.dbot-bild { display: block; max-width: 100%; }

.dbot-bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 360px);
  max-height: 280px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.dbot-bild__weg,
.dbot-anhang {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-12);
}

/* ---------- Karte des Bots ---------- */

.dbot-antwort {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gold-rand);
  border-radius: var(--radius-md);
  background: var(--gold-hauch);
}

/* Keine bestätigte Antwort: da, aber leise und einzeilig – sonst schreit jede Frage. */
.dbot-antwort.is-leise {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-color: var(--border-1);
  background: var(--surface-1);
}

.dbot-antwort.is-leise .dbot-antwort__kopf { flex: 1 1 auto; }

.dbot-knopf--klein { min-height: 24px; padding: 0 var(--space-2); font-size: var(--fs-12); }

.dbot-antwort__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--gold);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dbot-antwort__wer {
  color: var(--text-3);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
}

/* Gehört die Karte zur Zeile unter dem Mauszeiger? Rahmen und Zeile leuchten gemeinsam. */
.dbot-msg:hover .dbot-antwort:not(.is-leise) { border-color: var(--gold); }
.dbot-msg:hover .dbot-antwort.is-leise { border-color: var(--border-3); }

.dbot-antwort.is-leise .dbot-antwort__kopf { color: var(--text-3); }

.dbot-antwort__passt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}

.dbot-antwort__passt[data-tip] { cursor: help; }
.dbot-antwort__frage { color: var(--text-2); }

/* Nach fünf Zeilen gekürzt; ein Klick zeigt alles. */
.dbot-antwort__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin: 0;
  color: var(--text-1);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.dbot-antwort__text.is-voll { display: block; -webkit-line-clamp: unset; }

.dbot-antwort__leer { margin: 0; color: var(--text-3); font-size: var(--fs-12); }

.dbot-antwort__hinweis {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-12);
}

.dbot-antwort__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.dbot-antwort__knoepfe .dbot-knopf { min-height: 28px; padding: var(--space-1) var(--space-2); font-size: var(--fs-12); }

/* ---------- Schmale Fenster ---------- */

/* Schmal: Die Karte steht unter der Frage im Fluss, nicht daneben. */
@media (max-width: 1200px) {
  .dbot-msg { grid-template-columns: 40px minmax(0, 1fr); }
  .dbot-msg > .dbot-msg__karte {
    position: static;
    grid-column: 2;
    grid-row: auto;
    width: auto;
    margin-top: var(--space-2);
  }
}

@media (max-width: 900px) {
  .dbot-layout { grid-template-columns: minmax(0, 1fr); }
  .dbot-seite { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .dbot-seite__titel { width: 100%; margin-bottom: 0; }
  .dbot-msg { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* Vorschlag aus „Prüfen“ (noch nicht bestätigt): gestrichelt und grau statt Gold –
   auf den ersten Blick keine freigegebene Antwort. */
.dbot-antwort.is-vorschlag {
  border: 1px dashed var(--border-3);
  background: var(--surface-1);
}

.dbot-antwort.is-vorschlag .dbot-antwort__kopf { color: var(--text-2); }
.dbot-antwort.is-vorschlag .dbot-antwort__text { color: var(--text-2); }

/* Doppelt → behaltener Eintrag */
.dbot-verweis {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.dbot-verweis__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-1);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--border-3);
  text-underline-offset: 2px;
  cursor: pointer;
}

.dbot-verweis__link:hover { text-decoration-color: var(--text-2); }

.dbot-verweis__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.dbot-zitat__nr { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Fachbegriffe */
.dbot-begriff__kurz {
  flex: 0 0 auto;
  min-width: 56px;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.dbot-begriff__bedeutung {
  min-width: 0;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dbot-begriff-felder {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr);
  gap: var(--space-3);
}

.dbot-karte__koerper label.dbot-etikett {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dbot-karte__koerper label.dbot-etikett > .dbot-feld {
  /* In der Spalte wäre `flex: 1 1 220px` von .dbot-feld--zeile eine Höhe, keine Breite. */
  flex: none;
  width: 100%;
  font-size: var(--fs-14);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-1);
}

.dbot-begriff-neu { border-color: var(--gold-rand); }

@media (max-width: 640px) {
  .dbot-begriff-felder { grid-template-columns: 1fr; }
}

/* How to – D-Bot: kurze bebilderte Anleitung */
.dbot-anleitung {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-8);
  color: var(--text-1);
  line-height: var(--lh-relaxed);
}

.dbot-anleitung h2 { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-semibold); }
.dbot-anleitung h3 { margin: var(--space-5) 0 0; font-size: var(--fs-17); font-weight: var(--fw-semibold); color: var(--gold); }
.dbot-anleitung p { margin: 0; color: var(--text-2); }
.dbot-anleitung__lead { font-size: var(--fs-15); }

.dbot-anleitung__liste {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-2);
}

.dbot-anleitung__liste strong { color: var(--text-1); font-weight: var(--fw-semibold); }

.dbot-anleitung__bild { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dbot-anleitung__bild.is-schmal { max-width: 360px; }

.dbot-anleitung__bild img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
}

.dbot-anleitung__bild figcaption { font-size: var(--fs-12); color: var(--text-3); }

.dbot-anleitung__zwei {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 800px) {
  .dbot-anleitung__zwei { grid-template-columns: 1fr; }
}

/* Zugeklappt entscheiden: Antwort (FAQ) bzw. Bedeutung (Fachbegriffe) und Knöpfe ohne Aufklappen */
.dbot-schnell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.dbot-karte__vorschau {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + 1.25em);
}

.dbot-karte__antwort {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
}

.dbot-karte__antwort:hover { color: var(--text-1); }

.dbot-begriff__gleich { flex: 0 0 auto; color: var(--text-3); }
/* „AFX = Bedeutung“ als ein Ausdruck lesen, nicht als zwei Spalten. */
.dbot-begriff__kurz { min-width: 0; }
.dbot-begriff__bedeutung.is-leer { color: var(--text-3); font-style: italic; }

@media (max-width: 760px) {
  .dbot-karte__vorschau { flex-direction: column; padding-left: var(--space-3); }
  .dbot-schnell { justify-content: flex-start; }
}

/* Kanäle unter „Chat“ (aufgeklappt, solange der Chat offen ist) */
.dbot-seite__kanaele {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--space-1) var(--space-3);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-2);
}

.dbot-seite__kanal {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dbot-seite__kanal:hover { background: var(--surface-2); color: var(--text-1); }
.dbot-seite__kanal.is-aktiv { color: var(--gold); background: var(--gold-hauch); }

.dbot-seite__kanal:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Handy (10.10.2026): ohne Überfahren bleiben Uhrzeit und Discord-Link
   sichtbar – sonst gäbe es sie dort gar nicht. */
@media (hover: none) {
  .dbot-msg__uhr,
  .dbot-msg__discord { visibility: visible; }
}

/* Mehrere Leute gleichzeitig (10.10.2026): wer bearbeitet, sperrt den Eintrag für die anderen. */
.dbot-sperre {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--border-1);
  color: var(--text-warning);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}

.dbot-sperre[hidden] { display: none; }
.dbot-sperre.is-eigen { color: var(--gold); }
.dbot-antwort .dbot-sperre { padding: 0; border-top: 0; }

.is-gesperrt { opacity: 0.7; }
.is-gesperrt .dbot-knopf,
.is-gesperrt .dbot-feld { cursor: not-allowed; }

/* Hinweise wie „Lea wollte … bearbeiten, Zeit abgelaufen“ – verschwinden nach 30 s. */
.dbot-hinweise {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dbot-hinweise[hidden] { display: none; }

.dbot-hinweise__zeile {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
}

/* Gerade von jemand anderem geändert: kurz hervorheben. */
.dbot-karte.is-frisch { animation: dbot-frisch 2.4s ease-out 1; }

@keyframes dbot-frisch {
  from { box-shadow: 0 0 0 1px var(--gold-rand), 0 0 12px var(--gold-hauch); }
  to { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dbot-karte.is-frisch { animation: none; border-color: var(--gold-rand); }
}

/* Großansicht eines Bildes aus dem Chat: Klick oder Esc schließt (statt neuem Tab, 11.10.2026). */
.dbot-gross {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--overlay-solid);
  cursor: zoom-out;
}

.dbot-gross img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.dbot-bild { cursor: zoom-in; }

/* FAQ ▸ Fragen | Fakten (14.10.2026) */
.dbot-sichten {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  width: max-content;
  max-width: 100%;
}

.dbot-sicht {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.dbot-sicht:hover { color: var(--text-1); }
.dbot-sicht.is-aktiv { background: var(--gold-hauch); border-color: var(--gold-rand); color: var(--gold); }
.dbot-sicht:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Fakten */
.dbot-fakt__nr { flex: 0 0 auto; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.dbot-fakt__text { min-width: 0; color: var(--text-1); white-space: normal; }
.dbot-abzeichen--thema { background: var(--surface-3); color: var(--text-2); }
.dbot-themen { margin-bottom: var(--space-3); }
.dbot-chip.is-aktiv { border-color: var(--gold-rand); background: var(--gold-hauch); color: var(--gold); }
.dbot-belege { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; }
.dbot-link--knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.dbot-grund--verweis { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: baseline; }
.dbot-grund--warn { color: var(--text-danger); }