/* GVS Gold und Braun. Bewusst ruhig, das Postfach soll den ganzen Tag angenehm sein. */
:root {
  --gold: #b8912f;
  --gold-hell: #e8d9a8;
  --braun: #3a2c1a;
  --braun-hell: #6b5638;
  --papier: #faf7f1;
  --weiss: #ffffff;
  --linie: #e4dccb;
  --text: #2a2318;
  --leise: #7d7364;
  --rot: #a8322a;
  --gruen: #2f6b46;
  --blau: #2c5d8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
  color: var(--text); background: var(--papier);
  display: flex; flex-direction: column;
}
.versteckt { display: none !important; }
.leise { color: var(--leise); font-size: 13px; }
.fehler { color: var(--rot); font-size: 13px; min-height: 18px; margin: 6px 0 0; }

/* ------------------------------------------------------------------ Anmeldung */
.anmeldung { flex: 1; display: grid; place-items: center; background: linear-gradient(160deg, #3a2c1a, #6b5638); }
.anmeldung .karte { width: min(360px, 92vw); }
.anmeldung h1 { margin: 0; color: var(--braun); }
.anmeldung label { display: block; margin: 14px 0 0; font-size: 13px; color: var(--braun-hell); }
.anmeldung input { width: 100%; margin-top: 4px; }
.anmeldung button { width: 100%; margin-top: 18px; }

/* ------------------------------------------------------------------ Rahmen
   Navigation links, Inhalt rechts. Die Seitenleiste bleibt stehen, der Inhalt scrollt. */
#app { flex: 1; display: grid; grid-template-columns: 236px 1fr; min-height: 0; }
#inhalt { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

#seite {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--braun); color: var(--gold-hell); padding: 14px 10px 10px;
}
#seite .marke { font-size: 17px; font-weight: 700; letter-spacing: .3px; color: var(--gold); padding: 4px 10px 14px; }
#seite .marke span { color: var(--gold-hell); font-weight: 400; }

nav#reiter { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
.nav-gruppe {
  margin: 14px 0 4px; padding: 0 10px; font-size: 11px; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(232,217,168,.45);
}
.nav-gruppe:first-child { margin-top: 0; }

nav#reiter button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  padding: 9px 10px; font-size: 14px; color: rgba(232,217,168,.85);
}
nav#reiter button svg {
  width: 18px; height: 18px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
nav#reiter button:hover { background: rgba(255,255,255,.07); color: #fff; }
nav#reiter button.aktiv { background: var(--gold); color: var(--braun); font-weight: 600; }
nav#reiter button.aktiv svg { stroke-width: 2; }

.seite-fuss { border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; margin-top: 8px; }
.wer-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; font-size: 13px; }
.wer-zeile #wer { flex: 1; color: rgba(232,217,168,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wer-zeile button {
  background: rgba(255,255,255,.1); color: var(--gold-hell); border-color: rgba(255,255,255,.2);
}
.wer-zeile button:hover { background: rgba(255,255,255,.2); }

.lampen { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 4px; }
.lampe {
  font-size: 11px; padding: 2px 8px; border-radius: 11px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.lampe.an { background: rgba(87,180,120,.22); border-color: rgba(87,180,120,.5); }
.lampe.aus { background: rgba(255,255,255,.06); opacity: .6; }

/* Schmaler Bildschirm: Navigation wandert nach oben und wird waagrecht. */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #seite { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; overflow-x: auto; }
  #seite .marke { padding: 0 8px 0 0; white-space: nowrap; }
  nav#reiter { flex-direction: row; overflow-x: auto; }
  .nav-gruppe { display: none; }
  nav#reiter button { width: auto; white-space: nowrap; }
  .seite-fuss { border: none; margin: 0; padding: 0; }
  .lampen, .wer-zeile #wer { display: none; }
}
/* Die rote Zahl neben Postfach. Sie sagt, wie viele Kunden auf einen Menschen warten, und muss
   deshalb auffallen. Ein Kreis, mindestens so breit wie hoch, damit eine einzelne Ziffer rund ist. */
.zaehler {
  display: none; background: var(--rot); color: #fff; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
  font-size: 11.5px; line-height: 19px; text-align: center; margin-left: auto;
  box-shadow: 0 0 0 2px rgba(168,50,42,.28);
}
.zaehler.da { display: inline-block; }

.blick { flex: 1; min-height: 0; overflow: auto; padding: 22px 24px 40px; }
.blick.zwei-spalten { display: grid; grid-template-columns: 340px 1fr; gap: 16px; overflow: hidden; padding: 14px; }
/* Karten in einem Blick brauchen Luft dazwischen, sonst wirkt die Seite gedraengt. */
.blick > .karte + .karte { margin-top: 16px; }

/* ------------------------------------------------------------------ Seitenkopf
   Jede Seite beginnt mit Titel und einem Satz dazu, ausserhalb der Karten. Vorher stand die
   Ueberschrift in derselben Karte wie die Formulare, dadurch war nicht zu sehen, wo ein Bereich
   anfaengt und der naechste aufhoert. Konstantin hat das am 12.08.2026 als "alles durcheinander"
   beschrieben, und genau daran lag es. */
.seitenkopf { max-width: 1000px; margin: 0 0 18px; }
.seitenkopf h2 { font-size: 22px; margin: 0 0 5px; }
.seitenkopf p { margin: 0; color: var(--leise); font-size: 13.5px; max-width: 78ch; }

/* Der Titel einer Karte, mit Platz fuer einen Knopf rechts. */
.karte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.karte-kopf > div { min-width: 0; }
.karte-kopf h3 { margin: 0 0 4px; font-size: 16px; }
.karte-kopf p { margin: 0; color: var(--leise); font-size: 13px; max-width: 72ch; }
.karte-kopf .knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Felder
   Jedes Feld hat eine Beschriftung darueber und bei Bedarf einen Hinweis darunter. Vorher stand
   die Erklaerung nur im Platzhalter und war beim Tippen weg. */
.feld { display: block; margin: 0 0 14px; }
.feld > .name { display: block; font-size: 12.5px; font-weight: 600; color: var(--braun-hell); margin-bottom: 5px; }
.feld > input, .feld > textarea, .feld > select { width: 100%; }
.feld > .hinweis { margin: 5px 0 0; font-size: 12.5px; color: var(--leise); max-width: 74ch; }
.feld:last-child { margin-bottom: 0; }

.feld-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
@media (max-width: 720px) { .feld-gitter { grid-template-columns: 1fr; } }

/* Zahl mit Einheit dahinter, etwa "45 Woerter". Vorher standen die Eingabefelder mitten im Satz. */
.zahl-feld { display: flex; align-items: center; gap: 7px; }
.zahl-feld input { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.zahl-feld .einheit { font-size: 13px; color: var(--leise); }

input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; vertical-align: -2px; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Ein Schalter mit Erklaerung, hervorgehoben, weil er etwas Wichtiges abschaltet. */
.schalter-kasten {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 10px; padding: 13px 15px;
}
.schalter-kasten input { grid-row: 1; margin: 3px 0 0; }
.schalter-kasten .titel { grid-row: 1; font-weight: 600; color: var(--braun); }
.schalter-kasten .hinweis { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--leise); max-width: 74ch; }

/* Fuss einer Karte oder eines Listeneintrags: Hauptknopf links, Loeschen ganz rechts. */
.fuss {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie);
}
.fuss .rechts { margin-left: auto; }
.fuss .leise { min-width: 0; }
button.still {
  background: none; border: 1px solid transparent; color: var(--leise); font-weight: 500;
}
button.still:hover { background: var(--papier); border-color: var(--linie); color: var(--braun); }
button.still.weg:hover { color: var(--rot); border-color: #e8c9c5; background: #fdf4f3; }

/* ------------------------------------------------------------------ Bausteine der Oberflaeche */
button {
  font: inherit; padding: 7px 13px; border-radius: 7px; cursor: pointer;
  background: var(--gold); color: #2a2318; border: 1px solid #a37f21; font-weight: 600;
}
button:hover { filter: brightness(1.05); }
button.zweit { background: var(--weiss); color: var(--braun-hell); border-color: var(--linie); font-weight: 500; }
button.klein { padding: 4px 9px; font-size: 12px; }
input, textarea, select {
  font: inherit; padding: 7px 9px; border: 1px solid var(--linie);
  border-radius: 7px; background: var(--weiss); color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold-hell); border-color: var(--gold); }
textarea { width: 100%; resize: vertical; }
.reihe { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.reihe input { flex: 1; min-width: 180px; }
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 20px;
  box-shadow: 0 1px 2px rgba(58,44,26,.04);
}
.karte.breit { max-width: 1000px; }
.karten { display: flex; flex-direction: column; gap: 10px; max-width: 1000px; }
h2 { margin: 0 0 6px; font-size: 19px; color: var(--braun); }
h3 { margin: 24px 0 8px; font-size: 15px; color: var(--braun); }
h4 { margin: 18px 0 6px; font-size: 14px; color: var(--braun-hell); }
/* Die Erklaerzeile direkt unter einer Ueberschrift soll ruhig und lesbar sein, nicht winzig. */
h2 + .leise, h3 + .leise { font-size: 13.5px; max-width: 76ch; margin: 0 0 14px; }
form label { display: block; margin: 12px 0 0; font-size: 13px; color: var(--braun-hell); }
form label input, form label textarea, form label select { width: 100%; margin-top: 4px; }

.filter { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.filter button { background: var(--weiss); border: 1px solid var(--linie); color: var(--braun-hell); font-weight: 500; font-size: 13px; padding: 5px 10px; }
.filter button.aktiv { background: var(--braun); color: var(--gold-hell); border-color: var(--braun); }

/* ------------------------------------------------------------------ Liste */
.spalte-liste { display: flex; flex-direction: column; min-height: 0; }
.suche { margin-bottom: 8px; }
.liste { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.eintrag {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.eintrag:hover { border-color: var(--gold); }
.eintrag.gewaehlt { border-color: var(--gold); background: #fffdf7; box-shadow: 0 0 0 1px var(--gold) inset; }

/* Erledigte Chats. Zugeklappt kosten sie keinen Platz, aufgeklappt hoechstens die halbe Spalte.
   Sie sollen erreichbar sein, aber das Postfach nicht zumuellen. */
.erledigt-box { flex: none; border-top: 1px solid var(--linie); margin-top: 10px; padding-top: 8px; }
.erledigt-box > summary {
  cursor: pointer; font-size: 13px; color: var(--leise); padding: 3px 2px; user-select: none;
}
.erledigt-box > summary:hover { color: var(--braun); }
.erledigt-box[open] { display: flex; flex-direction: column; min-height: 0; }
.erledigt-box #erledigtListe { flex: none; max-height: 42vh; margin-top: 6px; }
.erledigt-box .eintrag { opacity: .7; }
.erledigt-box .eintrag:hover, .erledigt-box .eintrag.gewaehlt { opacity: 1; }
.zahl-leise { color: var(--leise); font-size: 12px; margin-left: 3px; }

/* ---------------------------------------------------------------- Funktionen */
/* Ein Anlegeformular klappt oben in der Liste auf und hebt sich vom Rest ab. */
.anlegen {
  background: var(--papier); border: 1px solid var(--gold-hell); border-radius: 10px;
  padding: 14px 16px; margin: 0 0 16px;
}
.anlegen .reihe { margin-bottom: 0; }
.anlegen > .leise:last-of-type { margin-bottom: 0; }

/* Die Platzhalterhilfe unter dem Textfeld einer festen Antwort. */
.hilfe-variablen { margin-top: 4px; }
.hilfe-variablen button { margin: 0 4px 4px 0; font-family: ui-monospace, Consolas, monospace; }
.zeile textarea[data-prompt] { margin-top: 7px; background: #fffdf7; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 4px; padding: 1px 4px; }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; } }
.waage { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--leise); }
button.gefahr { background: var(--weiss); color: var(--rot); border-color: var(--rot); }
button.gefahr:hover { background: var(--rot); color: #fff; }
.fn-feld {
  display: grid; grid-template-columns: 150px 1fr 130px 80px 34px; gap: 8px; align-items: center;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px; margin-bottom: 8px;
}
@media (max-width: 1100px) { .fn-feld { grid-template-columns: 1fr; } }
.fn-feld .weg { color: var(--rot); background: none; border: none; cursor: pointer; font-size: 18px; padding: 0; }
.fn-karte {
  border: 1px solid var(--linie); border-left: 4px solid var(--gold); border-radius: 8px;
  background: var(--weiss); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.fn-karte:hover { border-color: var(--gold); }
.fn-karte.aus { border-left-color: var(--linie); opacity: .65; }
.fn-code { font-size: 12px; color: var(--leise); word-break: break-all; }
.ampel { display: inline-block; border-radius: 10px; padding: 1px 7px; font-size: 11px; color: #fff; }
.ampel.gut { background: var(--gruen); } .ampel.schlecht { background: var(--rot); }
.ampel.aus { background: var(--leise); } .ampel.laeuft { background: var(--blau); }
.eintrag.wartet { border-left-color: var(--rot); }
.eintrag.mensch { border-left-color: var(--blau); }
.eintrag.bot { border-left-color: var(--gruen); }
.eintrag.erledigt { border-left-color: var(--linie); opacity: .72; }
.eintrag .kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.eintrag .kopf strong { font-size: 14px; }
.eintrag .vorschau {
  color: var(--leise); font-size: 13px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.punkt { background: var(--rot); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }

/* ------------------------------------------------------------------ Chat */
.spalte-chat { display: flex; flex-direction: column; min-height: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 11px; }
.leer { flex: 1; display: grid; place-items: center; color: var(--leise); }
/* Das Chatfenster muss die Hoehe der Spalte ausfuellen, sonst waechst .verlauf mit dem Inhalt
   und laesst sich nicht scrollen. Die Regel hing bis 13.08.2026 an der Kennung #chat allein,
   deshalb konnte man unter "Gespraeche" (dort heisst das Fenster #vChat) nicht scrollen.
   Sie haengt jetzt an einer Klasse, damit ein weiteres Chatfenster nicht denselben Fehler erbt. */
.chat-fenster { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* Kopf, Rueckrufkasten und Fusszeile behalten ihre Hoehe, gescrollt wird nur der Verlauf. */
.chat-fenster > .chat-kopf, .chat-fenster > .antwort,
.chat-fenster > .nurlesen, .chat-fenster > .rueckruf-kasten { flex: none; }
.chat-kopf { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.chat-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.verlauf { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fdfbf6; }
.blase { max-width: 76%; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.blase.ein { align-self: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-bottom-left-radius: 3px; }
.blase.aus { align-self: flex-end; background: var(--gold-hell); border: 1px solid #d8c690; border-bottom-right-radius: 3px; }
.blase.mensch { background: #dbe8f4; border-color: #b6cde3; }
.blase .fuss { margin-top: 5px; font-size: 11px; color: var(--leise); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.marke-stufe { padding: 1px 6px; border-radius: 9px; background: #efe8d8; color: #6b5638; font-weight: 600; }
.marke-stufe.sperrthema { background: #f6dedb; color: #8d2a23; }
.marke-stufe.uebergabe, .marke-stufe.fehler { background: #fbeccf; color: #8a5a12; }
.marke-stufe.wissen { background: #dff0e5; color: #1f5537; }
.marke-stufe.baustein { background: #e3e9f3; color: #26456b; }
.marke-stufe.mensch { background: #dbe8f4; color: #26456b; }
.antwort { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linie); align-items: flex-end; }
.antwort textarea { flex: 1; }
.rueckruf-kasten { margin: 0 14px; padding: 10px 12px; background: #fdf6e6; border: 1px solid #ecdcb4; border-radius: 8px; font-size: 13px; }
.nurlesen { margin: 0; padding: 9px 14px; border-top: 1px solid var(--linie); text-align: center; }

/* ------------------------------------------------------------------ Chatfenster
   Der Testbereich nutzt die ganze Hoehe. Links das Gespraech, rechts das Denkprotokoll.
   Beide Spalten scrollen fuer sich, die Seite selbst scrollt nicht. */
.blick.testflaeche {
  display: grid; grid-template-columns: minmax(360px, 1fr) minmax(340px, 1fr);
  gap: 14px; overflow: hidden; padding: 14px;
}
@media (max-width: 1100px) {
  .blick.testflaeche { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; overflow: auto; }
}

.chatfenster {
  padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.chatfenster .verlauf { border-radius: 0; }
.chatfenster .pillen { padding: 10px 14px; border-top: 1px solid var(--linie); }
.chatfenster .fehler { padding: 0 14px; }

/* ------------------------------------------------------------------ Denkprotokoll */
.spurfenster { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.spur-liste { flex: 1; overflow: auto; padding: 12px 14px; background: #fdfbf6; font-size: 13px; }
.spur-fuss { border-top: 1px solid var(--linie); padding: 8px 14px; }

.spur-frage {
  margin: 14px 0 8px; padding: 5px 9px; border-radius: 7px;
  background: var(--gold-hell); border: 1px solid #d8c690; color: var(--braun);
  font-weight: 600; word-break: break-word;
}
.spur-frage:first-child { margin-top: 0; }
.spur-frage .leise { font-weight: 400; }

.spur-schritt { display: grid; grid-template-columns: 44px 92px 1fr; gap: 8px; padding: 3px 0; align-items: baseline; }
.spur-schritt .ms { color: var(--leise); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.spur-schritt .art {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 9px; padding: 1px 6px; text-align: center; color: #fff; white-space: nowrap;
}
.spur-schritt .art.stufe    { background: var(--braun-hell); }
.spur-schritt .art.absicht  { background: var(--blau); }
.spur-schritt .art.suche    { background: #6b7f5a; }
.spur-schritt .art.ki       { background: #7a4fa8; }
.spur-schritt .art.wissen   { background: var(--gruen); }
.spur-schritt .art.funktion { background: #b8702f; }
.spur-schritt .art.variable { background: #4f7f8a; }
.spur-schritt .art.regel    { background: var(--rot); }
.spur-schritt .art.ergebnis { background: var(--braun); }
.spur-schritt .was { word-break: break-word; }
.spur-daten {
  grid-column: 3; margin: 2px 0 0; font-size: 11.5px; color: var(--leise);
  font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}

/* ------------------------------------------------------------------ Tabellenartige Listen */
.zeile { background: var(--weiss); border: 1px solid var(--linie); border-radius: 9px; padding: 11px 13px; }
.zeile .kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.zeile textarea { margin-top: 7px; }
.zeile .werkzeuge { display: flex; gap: 8px; align-items: center; margin-top: 7px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Eintrag zum Bearbeiten
   Eine Absicht, ein Sperrthema oder eine feste Antwort. Kopfzeile mit dem Namen, darunter die
   beschrifteten Felder, unten die Knoepfe. Vorher standen drei Eingabefelder ohne Beschriftung
   untereinander und man musste raten, was welches ist. */
.satz-liste { display: flex; flex-direction: column; gap: 12px; }
.satz {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 11px;
  border-left: 4px solid var(--gold);
}
.satz.aus { border-left-color: var(--linie); background: #fcfbf8; }
.satz > .kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--linie); background: var(--papier);
  border-radius: 8px 8px 0 0;
}
.satz > .kopf .namen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.satz > .koerper { padding: 15px; }
.satz > .koerper > .fuss { margin-top: 14px; }
.satz .zusammen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.satz textarea { background: #fffdf7; }

/* ------------------------------------------------------------------ Wissensliste
   Vierzig Texte als vierzig einzelne Karten waren eine Wand. Jetzt eine ruhige Liste mit einem
   Rahmen um das Ganze und einer Trennlinie je Zeile. */
.dok-liste { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: var(--weiss); }
.dok-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px;
  padding: 11px 14px; border-top: 1px solid var(--linie); align-items: center;
}
.dok-zeile:first-child { border-top: none; }
.dok-zeile:hover { background: #fffdf7; }
.dok-zeile .titelzeile { grid-column: 1; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.dok-zeile .titelzeile strong { font-size: 14px; }
.dok-zeile .adresse { grid-column: 1; font-size: 12px; color: var(--leise); word-break: break-all; }
.dok-zeile .knoepfe { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; }
.dok-zeile.aus { background: #fbf9f4; }
.dok-zeile.aus strong { color: var(--leise); font-weight: 500; }
@media (max-width: 720px) {
  .dok-zeile { grid-template-columns: 1fr; }
  .dok-zeile .knoepfe { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* Marken in einer Kopfzeile: Land, Sprache, Herkunft, Zeichenzahl. */
.marke {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--papier); border: 1px solid var(--linie); color: var(--braun-hell);
}
.marke.aus { color: var(--leise); }
.leer-hinweis {
  margin: 0; padding: 22px; text-align: center; color: var(--leise); font-size: 13.5px;
  border: 1px dashed var(--linie); border-radius: 10px; background: var(--weiss);
}
.schluessel { font-family: Consolas, monospace; font-size: 13px; color: var(--braun); font-weight: 600; }
.gruppe { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #efe8d8; color: #6b5638; }
.gruppe.sperre { background: #f6dedb; color: #8d2a23; }
.gruppe.wissen { background: #dff0e5; color: #1f5537; }
.gruppe.schnell { background: #e3e9f3; color: #26456b; }
.gruppe.dialog { background: #f0e7f5; color: #5a3070; }
.pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.pillen button { background: var(--weiss); border: 1px solid var(--linie); color: var(--braun-hell); font-weight: 500; font-size: 13px; }

/* Wissen: vier Aufnahmewege nebeneinander, alle gleich hoch, der Knopf sitzt unten am Rand. */
.vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.vier .zeile {
  display: flex; flex-direction: column; gap: 7px; background: var(--papier);
  border-radius: 10px; padding: 13px 14px;
}
.vier .zeile strong { font-size: 14px; color: var(--braun); }
.vier .zeile p { margin: 0; }
.vier .zeile input[type="text"], .vier .zeile input:not([type]) { width: 100%; }
.vier .zeile input[type="file"] { font-size: 12px; }
.vier .zeile button { align-self: stretch; margin-top: auto; }
.zeile.schmal { padding: 9px 11px; }
.zeile.schmal input { width: 100%; margin-top: 5px; }
.klein-text { font-size: 12px; word-break: break-all; }
.schalter { display: flex; align-items: center; gap: 8px; }
.auchErledigt { display: block; margin: 0 0 8px 2px; }
#dokListe { display: flex; flex-direction: column; gap: 8px; }
#rStil { font-family: Consolas, monospace; font-size: 13px; }

/* Auswertung */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 13px; }
.kachel .zahl { font-size: 26px; font-weight: 700; color: var(--braun); }
.kachel .titel { font-size: 12px; color: var(--leise); }
.balken { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 13px; }
.balken .stab { height: 11px; background: var(--gold); border-radius: 6px; min-width: 2px; }
.balken .wort { width: 190px; color: var(--braun-hell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .blick.zwei-spalten { grid-template-columns: 1fr; overflow: auto; }
  .spalte-chat { min-height: 60vh; }
}

/* Datum und Uhrzeit im Postfach. Neben dem Namen und klein in jeder Zeile der Liste. */
.chat-zeit { margin-left: 8px; font-size: 12.5px; color: var(--leise); font-weight: 400; white-space: nowrap; }
.klein-zeit { font-size: 11.5px; margin-top: 1px; }

/* ---------------------------------------------------------------- Log-Fenster */
.spur-schritt { cursor: pointer; border-radius: 6px; }
.spur-schritt:hover { background: #f4eedd; }
.spur-frage { cursor: pointer; }
.spur-frage:hover { filter: brightness(1.03); }

.log-fenster {
  border: 1px solid var(--linie); border-radius: 12px; padding: 0;
  width: min(760px, 92vw); max-height: 82vh; background: var(--weiss); color: var(--text);
  box-shadow: 0 10px 40px rgba(58,44,26,.25);
}
.log-fenster::backdrop { background: rgba(42,35,24,.45); }
.log-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linie); background: var(--papier);
  border-radius: 12px 12px 0 0;
}
.log-kopf .reihe { margin: 0; }
.log-json {
  margin: 0; padding: 14px 16px; overflow: auto; max-height: calc(82vh - 60px);
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.55;
  white-space: pre; background: var(--weiss); border-radius: 0 0 12px 12px;
}

/* Postfach mit eingeblendeten Logs: eine dritte Spalte. Unter 1400 Pixel rutschen die Logs
   unter das Gespraech, damit die Antwortzeile nicht zerquetscht wird. */
.blick.zwei-spalten.mit-logs { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1400px) {
  .blick.zwei-spalten.mit-logs { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: 1fr; }
  .blick.zwei-spalten.mit-logs #pfLogs { grid-column: 2; grid-row: 2; max-height: 46vh; }
  .blick.zwei-spalten.mit-logs { grid-template-rows: 1fr auto; }
}
#btnLogs.an { background: var(--braun); color: var(--gold-hell); border-color: var(--braun); }