(setzt der jeweilige Zeilen-Renderer); Zellen OHNE data-label stehen
linksbündig über die volle Breite (Titel-Zellen wie Name/Wohnung).
Auf >=768px ändert die Klasse nichts — die Tabelle bleibt eine Tabelle. */
@media (max-width: 767px) {
.tbl-cards thead { display: none; }
.tbl-cards, .tbl-cards tbody { display: block; width: 100%; }
.tbl-cards tbody tr {
display: block;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.4rem 0.75rem;
margin: 0 0 0.6rem;
}
.tbl-cards tbody td {
display: flex; align-items: baseline; justify-content: space-between;
gap: 0.75rem;
padding: 0.3rem 0;
border: none;
text-align: right;
}
.tbl-cards tbody td[data-label]::before {
content: attr(data-label);
flex: none;
font-size: 0.68rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-muted);
text-align: left;
}
/* Titel-/Aktions-Zellen (ohne data-label): volle Breite, linksbündig */
.tbl-cards tbody td:not([data-label]) {
justify-content: flex-start; text-align: left;
}
/* Leere Zellen (z. B. "—"-lose Optionalwerte) kosten keine Kartenzeile */
.tbl-cards tbody td:empty { display: none; }
}
/* Touch-Ziele am Handy: Reiter und Buttons mind. 44px hoch (WCAG AA).
Die Bottom-Nav hat ihre 44px schon über .nav-item weiter oben. */
@media (max-width: 767px) {
.sub-tab { display: inline-flex; align-items: center; min-height: 44px; }
.btn { min-height: 44px; }
}
/* Mieter-Tabelle */
.tenant-row { border-bottom: 1px solid var(--border); }
.tenant-row:last-child { border-bottom: none; }
.tenant-row:hover { background: var(--bg-hover) !important; }
/* iPhone: Eingabefelder mind. 16px, sonst zoomt Safari beim Fokus rein */
@media (max-width: 767px) {
input, select, textarea { font-size: 16px !important; }
}
/* =====================================================================
LESBARKEIT HELL / DUNKEL — 2026-08-20
---------------------------------------------------------------------
Problem
Auf jeder Seite steht fest , Text erbt damit Weiss
(--text). Viele Flaechen setzen aber nur eine helle Hintergrundfarbe
und keine Textfarbe — Tailwind-Utilities wie bg-white / bg-slate-50 /
bg-amber-100, Karten, Tabellen-Container. Ergebnis: weisse Schrift auf
weissem Grund (Zahlungen, Belegungsplan, Startseite ...). Umgekehrt
stehen einzelne Texte mit fest gesetzter Hell-Theme-Farbe frei auf dem
dunklen Seitenhintergrund. Zusaetzlich faerbt iOS Safari im
Geraete-Dunkelmodus Formularelemente selbst um, solange die Seite kein
color-scheme deklariert.
Fix
1) color-scheme deklarieren -> keine Browser-Automatik
2) helle Flaeche -> dunkle Schrift, dunkle Flaeche -> helle Schrift
3) Formularfelder auch im Hell-Theme gegen iOS-Umfaerbung sichern
4) die wenigen gedaempften Textfarben, die frei auf der dunklen Seite
stehen, auf eine Theme-Farbe zurueckholen
5) Navigationsbeschriftung im Hell-Theme lesbar machen
Kein neues Theme, keine Layout- und keine Logikaenderung.
Warum :where()
Die Flaechen-Selektoren stecken komplett in :where() und haben damit
Spezifitaet 0. Sie schlagen nur die Vererbung von und verlieren
gegen jede explizit gesetzte Textfarbe. Es wird also ausschliesslich
dort eingegriffen, wo bisher gar keine Textfarbe stand — und es ist
egal, ob diese Datei vor oder nach den Tailwind-Utilities laedt.
Voraussetzung
Punkt 2 geht davon aus, dass js/tailwind.js geladen ist und die
bg-*-Utilities tatsaechlich liefert. Faellt die Datei aus (sie liegt
nicht im Repo, siehe scripts/fetch_vendor.sh), fehlt der helle
Hintergrund, die dunkle Schrift aus 2a bleibt aber — dann ist die
Seite dunkel auf dunkel. Ohne Tailwind ist das Layout ohnehin kaputt;
bei einem 404 auf js/tailwind.js also zuerst dort suchen.
===================================================================== */
/* --- 1) Browser-Automatik abschalten -------------------------------- */
/* Die App bringt ihre Farben selbst mit und schaltet ueber body.dark /
body.light um, nicht ueber die Geraeteeinstellung. "light" haelt die
nativen Bedienelemente (Checkbox, Datumsauswahl, Scrollbalken) in genau
dem Zustand, den ein Geraet im Hell-Modus heute schon liefert. Dieselbe
Angabe steht zusaetzlich als in jeder Seite,
damit sie auch dann gilt, wenn diese Datei nicht geladen wird. */
:root { color-scheme: light; }
/* --- Werte der gedaempften Text-Utilities (Verwendung siehe 4) ------ */
/* Originalwerte von Tailwind ... */
:root {
--u-slate-500: #64748b;
--u-slate-600: #475569;
--u-slate-700: #334155;
--u-gray-500: #6b7280;
--u-gray-600: #4b5563;
--u-gray-700: #374151;
--u-indigo-600: #4f46e5;
--u-indigo-700: #4338ca;
}
/* ... und ihre aufgehellten Gegenstuecke fuer den dunklen Grund. */
body.dark {
--u-slate-500: #94a3b8;
--u-slate-600: #94a3b8;
--u-slate-700: #cbd5e1;
--u-gray-500: #94a3b8;
--u-gray-600: #94a3b8;
--u-gray-700: #cbd5e1;
--u-indigo-600: #a5b4fc;
--u-indigo-700: #a5b4fc;
}
/* --- 2a) Helle Flaeche -> dunkle Schrift ---------------------------- */
/* Themeunabhaengig; im Hell-Theme ist #0f172a ohnehin die geerbte Farbe,
dort aendert die Regel nichts. Derselbe Block setzt die --u-* wieder auf
die Originalwerte: Custom Properties vererben, deshalb sieht alles, was
auf einer hellen Flaeche liegt, exakt aus wie vor dem Patch — ohne dass
die Flaechenliste ein zweites Mal auftauchen muss. */
:where(
.bg-white, .hover\:bg-white:hover, .bg-white\/70,
.hover\:bg-white\/70:hover, .bg-white\/80, .hover\:bg-white\/80:hover,
.bg-slate-50, .hover\:bg-slate-50:hover, .bg-slate-100,
.hover\:bg-slate-100:hover, .bg-slate-200, .hover\:bg-slate-200:hover,
.bg-gray-50, .hover\:bg-gray-50:hover, .bg-gray-100,
.hover\:bg-gray-100:hover, .bg-gray-200, .hover\:bg-gray-200:hover,
.bg-red-50, .hover\:bg-red-50:hover, .bg-red-100,
.hover\:bg-red-100:hover, .bg-red-200, .hover\:bg-red-200:hover,
.bg-rose-50, .hover\:bg-rose-50:hover, .bg-rose-100,
.hover\:bg-rose-100:hover, .bg-amber-50, .hover\:bg-amber-50:hover,
.bg-amber-100, .hover\:bg-amber-100:hover, .bg-yellow-50,
.hover\:bg-yellow-50:hover, .bg-yellow-100, .hover\:bg-yellow-100:hover,
.bg-orange-50, .hover\:bg-orange-50:hover, .bg-orange-100,
.hover\:bg-orange-100:hover, .bg-emerald-50, .hover\:bg-emerald-50:hover,
.bg-emerald-100, .hover\:bg-emerald-100:hover, .bg-emerald-200,
.hover\:bg-emerald-200:hover, .bg-green-50, .hover\:bg-green-50:hover,
.bg-green-100, .hover\:bg-green-100:hover, .bg-blue-50,
.hover\:bg-blue-50:hover, .bg-blue-100, .hover\:bg-blue-100:hover,
.bg-blue-200, .hover\:bg-blue-200:hover, .bg-sky-50,
.hover\:bg-sky-50:hover, .bg-sky-100, .hover\:bg-sky-100:hover,
.bg-indigo-50, .hover\:bg-indigo-50:hover, .bg-indigo-100,
.hover\:bg-indigo-100:hover, .bg-violet-50, .hover\:bg-violet-50:hover,
.bg-violet-100, .hover\:bg-violet-100:hover, .bg-violet-200,
.hover\:bg-violet-200:hover, .bg-purple-50, .hover\:bg-purple-50:hover,
.bg-purple-100, .hover\:bg-purple-100:hover
) {
color: #0f172a;
/* Innerhalb einer hellen Flaeche gelten auch die Theme-Tokens in ihrer
Hell-Variante. Sonst setzt eine Regel wie
#tbody tr:hover { background: var(--bg-hover) }
mitten in eine weisse Karte einen dunklen Streifen, waehrend die
Schrift von hier oben dunkel bleibt — dunkel auf dunkel. Custom
Properties vererben, deshalb zieht das automatisch alles nach:
Hover-Zustaende, verschachtelte .card, Raender, gedaempfter Text. */
--bg: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--text: #0f172a;
--text-muted: #64748b;
--text-dim: #94a3b8;
--border: #e2e8f0;
--shadow: 0 1px 3px rgba(0,0,0,0.06);
--u-slate-500: #64748b;
--u-slate-600: #475569;
--u-slate-700: #334155;
--u-gray-500: #6b7280;
--u-gray-600: #4b5563;
--u-gray-700: #374151;
--u-indigo-600: #4f46e5;
--u-indigo-700: #4338ca;
}
/* --- 2b) Dunkle Flaeche -> helle Schrift ---------------------------- */
/* Greift im Hell-Theme und bei dunklen Elementen innerhalb heller Karten
(z. B. Garage-Code-Badge auf weisser Karte). */
:where(
.bg-slate-600, .hover\:bg-slate-600:hover, .bg-slate-700,
.hover\:bg-slate-700:hover, .bg-slate-800, .hover\:bg-slate-800:hover,
.bg-slate-900, .hover\:bg-slate-900:hover, .bg-gray-600,
.hover\:bg-gray-600:hover, .bg-gray-700, .hover\:bg-gray-700:hover,
.bg-gray-800, .hover\:bg-gray-800:hover, .bg-gray-900,
.hover\:bg-gray-900:hover, .bg-indigo-500, .hover\:bg-indigo-500:hover,
.bg-indigo-600, .hover\:bg-indigo-600:hover, .bg-indigo-700,
.hover\:bg-indigo-700:hover, .bg-blue-500, .hover\:bg-blue-500:hover,
.bg-blue-600, .hover\:bg-blue-600:hover, .bg-blue-700,
.hover\:bg-blue-700:hover, .bg-emerald-600, .hover\:bg-emerald-600:hover,
.bg-emerald-700, .hover\:bg-emerald-700:hover, .bg-green-600,
.hover\:bg-green-600:hover, .bg-green-700, .hover\:bg-green-700:hover,
.bg-red-600, .hover\:bg-red-600:hover, .bg-red-700,
.hover\:bg-red-700:hover, .bg-rose-600, .hover\:bg-rose-600:hover,
.bg-rose-700, .hover\:bg-rose-700:hover, .bg-amber-600,
.hover\:bg-amber-600:hover, .bg-amber-700, .hover\:bg-amber-700:hover,
.bg-orange-600, .hover\:bg-orange-600:hover, .bg-orange-700,
.hover\:bg-orange-700:hover, .bg-violet-600, .hover\:bg-violet-600:hover,
.bg-violet-700, .hover\:bg-violet-700:hover, .bg-purple-600,
.hover\:bg-purple-600:hover, .bg-purple-700, .hover\:bg-purple-700:hover
) {
color: #ffffff;
/* Gegenstueck zu 2a: eine dunkle Flaeche ist eine Dunkel-Insel, auch
wenn sie in einer hellen Karte liegt. */
--bg: #0f172a;
--bg-card: #1e293b;
--bg-hover: #334155;
--text: #ffffff;
--text-muted: #94a3b8;
--text-dim: #64748b;
--border: #334155;
--u-slate-500: #94a3b8;
--u-slate-600: #94a3b8;
--u-slate-700: #cbd5e1;
--u-gray-500: #94a3b8;
--u-gray-600: #94a3b8;
--u-gray-700: #cbd5e1;
--u-indigo-600: #a5b4fc;
--u-indigo-700: #a5b4fc;
}
/* --- 2c) Buttons ---------------------------------------------------- */
/* Tailwind-Preflight setzt button { color: inherit } — eine Element-Regel,
die die Spezifitaet 0 aus 2a/2b schlaegt. Buttons, welche die helle
Flaeche selbst tragen, brauchen deshalb eine eigene Regel. Bewusst nur
auf den neutralen Hintergruenden: dort gibt es im Markup keinen Button
mit eigener Textfarbe, die hier verloren ginge. */
body button:where(
.bg-white, .bg-slate-50, .bg-slate-100,
.bg-slate-200, .bg-gray-50, .bg-gray-100,
.bg-gray-200, .hover\:bg-white:hover, .hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover, .hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover
) { color: #0f172a; }
/* --- 3) Formularelemente im Hell-Theme ------------------------------ */
/* Das Dunkel-Theme setzt -webkit-text-fill-color weiter oben bereits.
Fuers Hell-Theme fehlte das Gegenstueck: ohne diese Zeilen faerbt iOS
Safari im Geraete-Dunkelmodus den eingetippten Text hell ein, waehrend
das Feld weiss bleibt — der Text ist dann unsichtbar. */
body.light input,
body.light textarea,
body.light select {
color: #0f172a;
-webkit-text-fill-color: #0f172a;
caret-color: #0f172a;
}
body.light input::placeholder,
body.light textarea::placeholder {
color: #64748b;
-webkit-text-fill-color: #64748b;
}
/* --- 4) Gedaempfte Textfarben auf dunklem Seitenhintergrund ---------- */
/* Gegenstueck zu 2a: hier steht die Textfarbe explizit im Markup (fuers
Hell-Theme gedacht) und die Flaeche ist die dunkle Seite — dunkelgrau
auf dunkelblau. Der Wert kommt aus --u-*: frei auf der Seite die
aufgehellte Variante, innerhalb einer hellen Flaeche automatisch wieder
der Originalwert. Bewusst nur die Utilities, die im Markup tatsaechlich
frei auf der Seite stehen — keine flaechendeckende Umfaerbung aller
Tailwind-Farben (das waere ein eigenes Dark-Theme). */
body.dark .text-slate-500 { color: var(--u-slate-500); }
body.dark .text-slate-600 { color: var(--u-slate-600); }
body.dark .text-slate-700 { color: var(--u-slate-700); }
body.dark .text-gray-500 { color: var(--u-gray-500); }
body.dark .text-gray-600 { color: var(--u-gray-600); }
body.dark .text-gray-700 { color: var(--u-gray-700); }
body.dark .text-indigo-600 { color: var(--u-indigo-600); }
body.dark .text-indigo-700 { color: var(--u-indigo-700); }
/* --- 5) Navigation im Hell-Theme ------------------------------------ */
/* .nav-item / .sub-tab benutzen --text-dim. Auf dunklem Grund passt das;
auf der weissen Sidebar bzw. Bottom-Nav des Hell-Themes ergibt #94a3b8
auf Weiss nur Kontrast 2.6 — die Beschriftungen sind kaum zu lesen.
:not(.active) laesst den blauen Aktiv-Zustand unberuehrt. */
body.light .nav-item:not(.active),
body.light .nav-group-label,
body.light .nav-collapse-btn,
body.light .sub-tab:not(.active) { color: var(--text-muted); }
/* .nav-group-label braucht kein :not() — die Aktiv-Regel weiter oben
(.nav-group-label.has-active:not(.open)) hat mit (0,3,0) die hoehere
Spezifitaet und bleibt damit ohnehin unberuehrt. Mit :not(.has-active)
blieb ausgerechnet die Gruppe der aktuellen Seite auf --text-dim. */
/* --- 6) Deaktivierte Buttons ---------------------------------------- */
/* text-white bleibt beim Wechsel auf den hellen disabled-Hintergrund
stehen. :disabled hebt die Spezifitaet ueber das Utility. */
button:disabled:where(
.disabled\:bg-slate-100, .disabled\:bg-slate-200, .disabled\:bg-slate-300,
.disabled\:bg-gray-100, .disabled\:bg-gray-200, .disabled\:bg-gray-300
) { color: #475569; }