/* Paket R Rückmeldung (Vertrag Chat § 5): Haken, Vorschlags-Chips, Hintergrund-Leiste. */
.haken { font: 600 10.5px var(--mono); }
.haken.grau { color: #6d757c; }
.haken.akzent { color: var(--grün); }
.haken.rot { color: var(--rot); }

.raum-vorschlaege { max-width: 528px; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschlag { max-width: 100%; font: 600 12px/1.3 system-ui, sans-serif; padding: 7px 12px; border-radius: 14px; background: transparent; color: var(--grün); border: 1px solid #22272b; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.vorschlag:focus-visible, .hg-kopf:focus-visible { outline: 2px solid var(--grün); outline-offset: 2px; }

.raum-hintergrund { margin: 0 0 8px; }
.hg-kopf { font: 600 12px system-ui, sans-serif; padding: 6px 12px; border-radius: 999px; background: #0c0e10; color: var(--hell); border: 1px solid #22272b; cursor: pointer; }
.hg-liste { margin-top: 6px; border: 1px solid #22272b; border-radius: 14px; background: #0c0e10; overflow: hidden; }
.hg-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 12px; border-bottom: 1px solid #12161a; }
.hg-zeile:last-child { border-bottom: 0; }
.hg-name { font: 700 13px var(--mono); color: var(--hell); overflow-wrap: anywhere; }
.hg-info { font: 500 11px var(--mono); color: #8a9299; }
.hg-befehl { flex-basis: 100%; font: 500 11px var(--mono); color: var(--grün); overflow-wrap: anywhere; cursor: pointer; }