/* Simulation = Mechanik-/Vorbereitungsmaterial, KEIN Nutzer-/Marktbeleg. */
/*
 * public/verwaltung.rueckmeldungen.css — Welle H, Paket „Feedback-Weg“ (FW-3, Bericht 741): Gestalt der Tafel „Rückmeldungen“.
 * Karten statt Tabelle (bei 375 px bricht eine Tabelle, eine Karte nicht), Zustand als WORT (nicht nur Farbe), Bild im Popup.
 * Nur Tokens aus `basis.css`; keine Adresse, kein `@import`.
 */

#rm-v-platz { display: grid; gap: var(--space-5); }

.rm-v-woche, .rm-v-kontakt {
  padding: var(--space-4); border: var(--haarlinie); border-radius: var(--r-2); background: var(--marke-flaeche);
}
.rm-v-woche h2 { margin: 0 0 var(--space-3); font-size: var(--text-section); }
.rm-v-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0; }
.rm-v-kennzahl { display: flex; flex-direction: column-reverse; gap: .1rem; margin: 0; }
.rm-v-kennzahl dd { margin: 0; font-size: var(--text-kennzahl, 1.5rem); font-weight: 750; }
.rm-v-kennzahl dt { font-size: var(--text-caption); color: var(--marke-etikett); }

.rm-v-kontakt .feld { margin-bottom: var(--space-2); }
.rm-v-adresszeile { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.rm-v-adresszeile input[type="text"] { flex: 1 1 16rem; min-width: 0; }
.rm-v-warnung { margin: 0; }

.rm-v-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rm-v-filterknopf[aria-pressed="true"] { background: var(--marke-aktion); border-color: var(--marke-aktion); color: var(--marke-knopf-schrift, var(--marke-grund)); }

.rm-v-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rm-v-karte {
  display: grid; gap: var(--space-1); width: 100%; text-align: start; cursor: pointer;
  padding: var(--space-3) var(--space-4); border: var(--haarlinie); border-radius: var(--r-1);
  background: var(--marke-grund); color: var(--marke-tinte); min-height: var(--klickziel);
}
.rm-v-karte:hover { background: var(--marke-flaeche-stark); }
.rm-v-kopf { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--text-caption); color: var(--marke-etikett); }
.rm-v-vorschau { overflow-wrap: anywhere; }
.rm-v-stand { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-caption); font-weight: 700; }
.rm-v-stand::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--marke-etikett); }
.rm-v-stand[data-stand="NEU"]::before { background: var(--marke-aktion); }
.rm-v-stand[data-stand="IN_ARBEIT"]::before { background: var(--marke-warnung); }
.rm-v-stand[data-stand="ERLEDIGT"]::before { background: var(--marke-erfolg); }

dialog.popup#rm-v-popup { width: min(44rem, calc(100vw - 2 * var(--space-4))); }
.rm-v-detail-kopf { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; color: var(--marke-etikett); font-size: var(--text-caption); margin: 0 0 var(--space-3); }
.rm-v-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--space-2); font-size: var(--text-prose); }
.rm-v-bildblock { margin: var(--space-3) 0; display: grid; gap: var(--space-2); justify-items: start; }
.rm-v-bild { display: block; max-width: 100%; max-height: 22rem; border: var(--haarlinie); border-radius: var(--r-1); background: var(--marke-flaeche); }
.rm-v-mailblock { margin: var(--space-3) 0; display: grid; gap: var(--space-2); justify-items: start; }
.rm-v-mail-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; margin: 0; padding: var(--space-3); background: var(--marke-flaeche); border-radius: var(--r-1); }
#rm-v-antwort { display: block; width: 100%; padding: var(--space-3); border: 1px solid var(--marke-steuerung); border-radius: var(--r-2); background: var(--marke-grund); color: var(--marke-tinte); resize: vertical; }
.rm-v-detail-meldung { margin: var(--space-2) 0 0; font-size: var(--text-control); font-weight: 600; }
.rm-v-detail-meldung[data-ton="fehler"] { color: var(--marke-fehler); }
.rm-v-detail-meldung[data-ton="ok"] { color: var(--marke-erfolg); }

.hilfe-kontakt-kopf { font-size: var(--text-caption); color: var(--marke-etikett); }
.hilfe-kontakt-kopf a { color: var(--marke-aktion); }