/* Kurzbeschreibung: Gestaltung von „Kollegin erinnern“ und „Info ans Team“ (workspace-team-hinweise.js) — Dialog aus brand.css
   (a4h-overlay/a4h-modal), Felder a4h-field, Knöpfe a4h-btn; dazu die Erinnerungs-Karten unten rechts. Nur Farben aus marke.css,
   Maße aus der Leiter (Radien 6/9/12/999, Abstände 4/8/12/16/24, Schrift 11–15/20). */
.wth-modal { max-width: 560px; max-height: 88vh; }
.wth-modal .a4h-modal-head { align-items: flex-start; }
.wth-kopfzeile { flex: 1 1 auto; min-width: 0; }
.wth-unter { font-size: 12px; color: var(--marke-text-2); }
.wth-body { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.wth-form { display: flex; flex-direction: column; gap: 12px; }
.wth-form .a4h-field-label { display: flex; flex-direction: column; gap: 4px; }
.wth-form textarea { resize: vertical; font-family: var(--marke-schrift); }
.wth-h3 { margin: 4px 0 0; }
.wth-liste { display: flex; flex-direction: column; gap: 8px; }
.wth-leer { font-size: 13px; color: var(--marke-text-2); }
.wth-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--marke-linie); }
.wth-zeile.ist-aus, .wth-info.ist-aus { opacity: .6; }
.wth-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 13px; overflow-wrap: anywhere; }
.wth-text b { font-weight: 600; }
.wth-text small { font-size: 12px; color: var(--marke-text-2); }
.wth-meldung { margin: 0; padding: 4px 16px 0; }
.wth-wahl { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; padding: 8px 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--marke-linie); }
.wth-wahl-kopf { font-size: 12px; font-weight: 600; color: var(--marke-text-2); margin-top: 4px; }
.wth-haken { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wth-info { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--marke-linie); }
.wth-info-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wth-info-kopf small { font-size: 12px; color: var(--marke-text-2); white-space: nowrap; }
.wth-info-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wth-info a { font-size: 13px; overflow-wrap: anywhere; color: var(--marke-akzent); }

/* Karten bei der erinnerten Person */
.wth-pops { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.wth-pop { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--marke-flaeche); color: var(--marke-text);
  box-shadow: var(--marke-schatten), inset 0 0 0 1px var(--marke-warn); }
.wth-pop-kopf { display: flex; flex-direction: column; font-size: 13px; }
.wth-pop-kopf small { font-size: 12px; color: var(--marke-text-2); }
.wth-pop-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wth-pop-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.wth-komm textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--marke-schrift); }
@media (max-width: 600px) { .wth-modal { max-height: 92vh; } }