ui: WBS dropdown, decimal-room filters, segmented toggle, 'Final absenden'

* Einstellungen → Profil: WBS-Typ jetzt <select> mit WBS 100/140/160/180/220
* Einstellungen → Filter: Zimmer min/max als number-Feld mit step=0.5
  (2.5-Zimmer-Wohnungen sauber eingebbar)
* Wohnungen-Top-Leiste: Segmented-Toggle (ein zusammenhängender Kippschalter)
  für die beiden Schalter, keine einzelnen Radio-Pills mehr
* Trockenmodus umbenannt in 'Final absenden' (positive Polarität: An=echt
  senden). Bestätigungsdialog beim Einschalten.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Moritz 2026-04-21 11:50:50 +02:00
parent 120d14e918
commit d9468f6814
4 changed files with 73 additions and 42 deletions

View file

@ -47,12 +47,17 @@
.chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
.chip-bad { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
.chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }
.radio-opt { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.35rem 0.65rem;
border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
transition: border-color .15s, background .15s; user-select: none; }
.radio-opt:has(input:checked) { border-color: var(--primary); background: #ecf4fc; box-shadow: 0 0 0 1px var(--primary) inset; }
.radio-opt:hover { background: var(--ghost); }
.radio-opt input[type="radio"] { accent-color: var(--primary); }
/* Segmented toggle (An/Aus Kippschalter) */
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
overflow: hidden; background: var(--surface); font-size: 0.85rem; font-weight: 500; }
.toggle label { padding: 0.45rem 1.1rem; cursor: pointer; user-select: none;
color: var(--muted); transition: background .15s, color .15s; }
.toggle label + label { border-left: 1px solid var(--border); }
.toggle label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none;
width: 0; height: 0; }
.toggle label:hover { color: var(--text); background: var(--ghost); }
.toggle label:has(input:checked) { background: var(--primary); color: #fff; }
.toggle.warn label:has(input[value="on"]:checked) { background: var(--danger); }
.brand-dot {
width: 2rem; height: 2rem; border-radius: 10px;
background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);