/* ============================================================
   Vorgänge: Bewohner und Bewohneraufnahme (js/vorgang.js).
   Baut auf den Bausteinen in app.css auf; Zahlen bleiben in
   der Sans (Cormorant setzt Mediävalziffern).
   ============================================================ */

/* ---------- Übersicht ---------- */

.vg-liste td b { display: block; font-weight: 600; }
.vg-unter { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.vg-stand { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.vg-stand .balken { width: 110px; flex: none; }
.vg-stand-zahl { font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vg-pfeil svg { width: 15px; height: 15px; color: var(--text-3); display: block; }
table.liste tr.klick:hover .vg-pfeil svg { color: var(--bordeaux); }

.vg-neu { border-color: #D9B7C4; box-shadow: 0 0 0 3px rgba(133,0,52,.06); margin-bottom: 18px; }
.vg-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 14px; }
.vg-felder .feld.breit { grid-column: 1 / -1; }
@media (max-width: 1100px) { .vg-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .vg-felder { grid-template-columns: 1fr; } }
.vg-fuss { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie-fein); }
.vg-fuss > span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; max-width: 70ch; }

.feld .pflicht { font-style: normal; color: var(--bordeaux); font-weight: 700; margin-left: 1px; }
.feld .feld-fehler { display: none; font-size: 12px; color: var(--alarm); font-weight: 500; }
.feld.fehler .feld-fehler { display: block; }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: var(--alarm); box-shadow: 0 0 0 3px rgba(163,35,43,.10); }
.feld > label .marke { margin-left: 7px; text-transform: none; letter-spacing: .01em; font-size: 10.5px; padding: 1px 7px; vertical-align: middle; }
.feld.geaendert input, .feld.geaendert select, .feld.geaendert textarea { border-color: #D9B7C4; background: #FFFCFD; }

/* Auswahlliste der laufenden Aufnahmen */
#au-leib .zeile > svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
#au-leib .zeile:hover > svg { color: var(--bordeaux); }

/* ---------- Aufnahme: Kopf, Fortschritt ---------- */

.au-grundlage { border: 1px solid #E3C5D0; padding: 5px 11px; font-size: 12px; cursor: pointer; transition: .13s; }
.au-grundlage:hover { background: var(--bordeaux); color: var(--text-auf-dunkel); border-color: var(--bordeaux); }
.au-grundlage svg { width: 13px; height: 13px; }

.au-fortschritt {
  display: flex; align-items: center; gap: 18px; margin: 14px 0 16px; padding: 14px 18px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: var(--schatten-1);
}
.au-ring { position: relative; width: 56px; height: 56px; flex: none; }
.au-ring svg { transform: rotate(-90deg); display: block; }
.au-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.au-ring b span { display: inline-flex; align-items: baseline; }
.au-ring b i { font-style: normal; font-size: 9px; font-weight: 600; margin-left: 1px; color: var(--text-3); }
.au-fortschritt-text { flex: 1; min-width: 0; }
.au-fortschritt-text > b { display: block; font-size: 14.5px; font-weight: 600; }
.au-fortschritt-text > span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.6; }
.au-fortschritt-text > span .marke { vertical-align: middle; }
.au-fortschritt-tun { display: flex; gap: 6px; flex: none; }
@media (max-width: 900px) { .au-fortschritt { flex-wrap: wrap; } }

/* ---------- Zeitschiene ---------- */

.au-phasen { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 4px; }
.au-phase { position: relative; padding: 14px 6px 4px; border-radius: var(--r-s); min-width: 0; }
.au-phase-linie { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: var(--flaeche-3); }
.au-phase.vorbei .au-phase-linie { background: var(--linie); }
.au-phase.jetzt .au-phase-linie { background: var(--bordeaux); }
.au-phase.jetzt { background: #FCF6F7; }
.au-heute {
  position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--bordeaux); border: 2px solid var(--flaeche); box-shadow: 0 0 0 2px var(--bordeaux);
}
.au-phase .name { font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.3; margin-top: 4px; }
.au-phase.jetzt .name { color: var(--bordeaux); }
.au-phase.vorbei .name { color: var(--text-3); }
.au-phase .wann { font-size: 11px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-phase .punkte { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; min-height: 26px; }
.au-zsp {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--flaeche); border: 2px solid var(--linie); color: var(--text-2); transition: .13s; font-variant-numeric: tabular-nums;
}
.au-zsp svg { width: 13px; height: 13px; }
.au-zsp:hover { transform: translateY(-1px); box-shadow: var(--schatten-2); border-color: var(--bordeaux); color: var(--bordeaux); }
.au-zsp.erledigt { background: var(--ok); border-color: var(--ok); color: #fff; }
.au-zsp.ueberfaellig, .au-zsp.heute { border-color: var(--alarm); color: var(--alarm); background: var(--alarm-grund); }
.au-zsp.bald { border-color: var(--warn); color: var(--warn); background: var(--warn-grund); }
.au-zsp-leer { font-size: 12px; color: var(--text-3); line-height: 26px; }
@media (max-width: 1180px) { .au-phasen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; } }

/* ---------- Schritte ---------- */

.au-schritte { display: flex; flex-direction: column; }
.au-schritt { border-bottom: 1px solid var(--linie-fein); position: relative; }
.au-schritt:last-child { border-bottom: none; }
.au-schritt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.au-schritt.erledigt::before { background: var(--ok); }
.au-schritt.ueberfaellig::before, .au-schritt.heute::before { background: var(--alarm); }
.au-schritt.bald::before { background: var(--warn); }

.au-s-kopf { display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 19px; cursor: pointer; transition: .1s; }
.au-s-kopf:hover { background: var(--flaeche-2); }
.au-schritt.auf .au-s-kopf { background: var(--flaeche-2); }
.au-nr {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--flaeche-3); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.au-nr svg { width: 15px; height: 15px; }
.au-schritt.erledigt .au-nr { background: var(--ok); color: #fff; }
.au-schritt.ueberfaellig .au-nr, .au-schritt.heute .au-nr { background: var(--alarm-grund); color: var(--alarm); }
.au-schritt.bald .au-nr { background: var(--warn-grund); color: var(--warn); }
.au-s-was { flex: 1; min-width: 0; }
.au-s-was > b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.au-schritt.erledigt .au-s-was > b { color: var(--text-2); }
.au-s-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; }
.au-hinweis { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); }
.au-hinweis svg { width: 12px; height: 12px; }
.au-anhang { font-size: 11.5px; color: var(--text-3); }
.au-s-frist { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; }
.au-s-frist .wann { font-size: 11.5px; color: var(--text-3); }
.au-s-frist .wann b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.au-s-erl { font-size: 11.5px; color: var(--ok); line-height: 1.4; display: inline-flex; align-items: flex-start; gap: 4px; text-align: right; }
.au-s-erl svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.au-s-tun { display: flex; align-items: center; gap: 6px; flex: none; }
.au-s-tun .knopf { min-width: 118px; justify-content: center; }
.au-klapp { width: 30px; height: 30px; border-radius: var(--r-s); display: grid; place-items: center; color: var(--text-3); transition: .15s; }
.au-klapp svg { width: 16px; height: 16px; transition: transform .2s; }
.au-klapp:hover { background: var(--flaeche-3); color: var(--text); }
.au-schritt.auf .au-klapp svg { transform: rotate(180deg); }

.au-s-leib { padding: 12px 16px 18px 63px; background: var(--grund); border-top: 1px solid var(--linie-fein); }
.au-notiz { margin-bottom: 12px; max-width: 760px; }
.au-notiz textarea { min-height: 54px; }
.au-notiz textarea[readonly] { background: var(--flaeche-2); color: var(--text-2); }
.au-notiz-hinweis { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); margin-left: 6px; }
.au-ohne { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 10px 0 2px; }
.au-ohne svg { width: 15px; height: 15px; color: var(--text-3); }

/* ---------- Checklisten und Formulare ---------- */

.au-doku { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); margin-top: 12px; overflow: hidden; }
.au-d-kopf { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--linie-fein); flex-wrap: wrap; row-gap: 7px; background: var(--flaeche); }
.au-d-kopf .kennung { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.au-d-kopf > b { font-size: 13.5px; font-weight: 600; }
.au-d-kopf .vers { font-size: 11.5px; color: var(--text-3); }
.au-d-kopf .rest { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.au-zaehler { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-d-balken { width: 90px; }
.au-d-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--linie-fein); background: var(--flaeche-2); font-size: 12px; color: var(--text-2); }
.au-d-fuss > span { display: inline-flex; align-items: center; gap: 6px; }
.au-d-fuss > span svg { width: 14px; height: 14px; color: var(--ok); }

.au-punkte { padding: 4px 0; }
.au-gruppe { padding: 12px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.au-punkt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--linie-fein); }
.au-punkt:last-child { border-bottom: none; }
.au-punkt:hover { background: var(--flaeche-2); }
.au-punkt.unter { padding-left: 40px; }
.au-punkt.erledigt .au-p-text { color: var(--text-2); }
.au-p-nr { flex: none; width: 30px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 3px; text-align: right; }
.au-p-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; padding-top: 1px; }
.au-p-frist { display: block; font-size: 11px; color: var(--warn); margin-top: 1px; }
.au-p-wer { display: block; font-size: 11px; color: var(--ok); margin-top: 1px; font-variant-numeric: tabular-nums; }
.au-p-rechts { flex: none; display: flex; align-items: center; gap: 6px; max-width: 46%; }
.au-p-eingabe { width: 190px; padding: 5px 9px; border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); font-size: 12.5px; }
.au-p-eingabe:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(133,0,52,.10); }

.au-kasten {
  width: 22px; height: 22px; flex: none; border-radius: 5px; border: 1.5px solid #B9AEA4; background: var(--flaeche);
  display: grid; place-items: center; color: transparent; transition: .12s; margin-top: 1px;
}
.au-kasten svg { width: 14px; height: 14px; }
.au-kasten:hover { border-color: var(--bordeaux); }
.au-kasten.an { background: var(--ok); border-color: var(--ok); color: #fff; }
span.au-kasten { cursor: default; }

.au-janein { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; background: var(--flaeche); }
.au-janein button { padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text-2); border-right: 1px solid var(--linie); transition: .12s; }
.au-janein button:last-child { border-right: none; }
.au-janein button:hover { background: var(--flaeche-2); color: var(--text); }
.au-janein button.an { background: var(--bordeaux); color: var(--text-auf-dunkel); }
.au-janein.gross button { padding: 7px 18px; font-size: 13px; }

.au-mehrfach { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chip { padding: 4px 11px; border-radius: 16px; border: 1px solid var(--linie); background: var(--flaeche); font-size: 12px; color: var(--text-2); transition: .12s; }
.au-chip:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.au-chip.an { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--text-auf-dunkel); }

.au-haken-feld { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.au-haken-feld.an { color: var(--text); font-weight: 500; }

.au-felder { padding: 14px 14px 0; }
/* Formularfragen sind oft ganze Sätze — Versalien wären hier schwer lesbar */
.au-felder .feld > label { text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.45; }
.au-gruppe-titel { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linie); }
.au-gruppe-titel:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.au-feld-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
.au-feld-gitter .feld.breit { grid-column: 1 / -1; }
.au-feld-gitter .feld textarea { min-height: 64px; }
@media (max-width: 900px) { .au-feld-gitter { grid-template-columns: 1fr; } }
.au-hilfe { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.au-papier { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px dashed var(--linie); border-radius: var(--r-s); font-size: 12.5px; color: var(--text-2); background: var(--flaeche-2); }
.au-papier svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.au-felder .feld.breit .au-papier { display: flex; }