. Wie dort nur ohne Knopf in der Überschrift. Forderungen und
Kommunikation tragen einen Knopf: dort fällt nur der Titel weg (unten). */
html.hh:not([data-hh-wurzel]) :is(#tab-auftraege, #tab-maengel, #tab-einkauf, #tab-monatsabschluss, #tab-zugaenge, #tab-system, #tab-latecheckout) > .ck-bereich > h2.section-title:not(:has(button, a, input, select)) { display: none; }
/* „Bearbeiten am Mac“: graue Fußzeile wie in den iOS-Einstellungen, auf
Reitern, die am iPhone nur lesen. Vor „Alle Funktionen zeigen“ (das
Panel ist ein Flex-Spalte), ohne eigenes Element. */
html.hh :is(#tab-pricelabs, #tab-blog, #tab-selbstauskunft):not(.handy-alles)::after {
content: 'Bearbeiten am Mac'; order: 1;
margin-top: calc(-1 * var(--sp-4));
font-size: var(--fs-sm); color: var(--text-muted); text-align: center;
}
html.hh :is(#tab-pricelabs, #tab-blog, #tab-selbstauskunft) > .handy-alles-knopf { order: 2; }
/* „Alle Funktionen zeigen“ bleibt auf jeder Seite der Rückweg, als
schlichter Textknopf wie „Alle anzeigen“ statt gestrichelter Kapsel. */
html.hh .handy-alles-knopf {
border: 0; background: none;
color: var(--rail-active); font-size: var(--fs-md);
}
/* ── ⋯ in der Titelleiste: „Kacheln anordnen“ auf Unterseiten ──
Das Aktionen-Blatt hängt am Profil-Knopf, den es auf Unterseiten nicht
gibt; dort steht jetzt das ⋯ (erst ab zwei Kacheln, handy-reiter.js). */
html.hh .hh-mehr {
display: grid; place-items: center;
width: 44px; height: 44px;
background: none; border: 0;
color: var(--rail-active);
cursor: pointer;
}
html.hh .hh-mehr :is([data-lucide], svg) { width: 26px; height: 26px; stroke-width: 2; }
html.hh .hh-mehr:active { opacity: .4; }
html.hh[data-hh-wurzel] .hh-mehr, html.hh .hh-mehr[hidden] { display: none; }
html.hh:not([data-hh-wurzel]) .hh-rechts .hh-profil { display: none; }
html.hh .hh-menue {
display: block;
position: fixed; z-index: 230;
top: calc(var(--hh-leiste) + env(safe-area-inset-top) - 2px); right: var(--sp-2);
min-width: 240px; max-width: calc(100vw - 2 * var(--sp-4));
overflow: hidden;
background: var(--rail-bg);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
backdrop-filter: blur(24px) saturate(1.8);
border: 1px solid var(--rail-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
transform-origin: top right;
transform: scale(.86); opacity: 0; pointer-events: none;
transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease);
}
html.hh .hh-menue.offen { transform: none; opacity: 1; pointer-events: auto; }
html.hh .hh-menue:not(.offen) { visibility: hidden; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
html.hh .hh-menue-punkt {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
width: 100%; min-height: 44px; padding: 0 var(--sp-4);
background: none; border: 0;
color: var(--text); font-family: inherit; font-size: var(--fs-lg); text-align: left;
cursor: pointer;
}
html.hh .hh-menue-punkt + .hh-menue-punkt { border-top: 1px solid var(--border); }
html.hh .hh-menue-punkt :is([data-lucide], svg) { width: 20px; height: 20px; flex: none; }
html.hh .hh-menue-punkt:active { background: var(--bg-card3); }
@media (prefers-reduced-motion: reduce) { html.hh .hh-menue { transition: none; } }
/* Beim Anordnen ersetzt die Kachel-Leiste die Tab-Leiste (wie „Auswählen“
in Fotos); vorher lagen beide übereinander. */
html.hh body.kacheln-anordnen .hh-tabbar { display: none; }
html.hh body.kacheln-anordnen .kachel-leiste {
bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: var(--rail-bg);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
backdrop-filter: blur(24px) saturate(1.8);
}
/* ══ Team ═══════════════════════════════════════════════════════════════ */
/* Aufträge: ruhige Zeile, ein Tipp klappt die Bedienung auf. Sie
verschwindet nur an Zeilen, die handy-reiter.js als klappbar markiert
hat; ohne das Skript bleibt alles wie vorher. */
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-klappbar:not(.hh-auf) > .rechts { display: none; }
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-klappbar > .links {
position: relative; padding-right: var(--sp-6);
cursor: pointer; -webkit-touch-callout: none; user-select: none;
}
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-klappbar > .links::after {
content: ''; position: absolute; right: 4px; top: 50%;
width: 8px; height: 8px; margin-top: -6px;
border: solid var(--text-subtle); border-width: 0 2px 2px 0;
transform: rotate(-45deg);
transition: transform var(--dur-2) var(--ease);
}
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-auf > .links::after { transform: rotate(45deg); }
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-auf > .rechts { padding-top: var(--sp-1); }
html.hh #tab-auftraege:not(.handy-alles) .ck-posten.hh-auf > .rechts > select { order: -1; flex: 1 1 100%; }
/* Nur offene Fälle: „Entfällt“ (dort steht selbst „Hier ist nichts zu
tun“) und „Zuletzt erledigt“ stehen hinter „Alle Funktionen zeigen“. */
html.hh #tab-auftraege:not(.handy-alles) #team-auftraege-inhalt > .ck-karte.knapp:not(:has([data-holen])),
html.hh #tab-auftraege:not(.handy-alles) #team-auftraege-inhalt > .ck-karte:not(.rot, .knapp):has(> .ck-titel.ck-kartenkopf:first-child) { display: none; }
/* Mängel: der nächste Status als Knopf rechts in der Zeile (wie „Laden“ im
App Store), Erledigte erst über „Alle Funktionen zeigen“. */
html.hh #team-maengel-inhalt .ck-posten { flex-wrap: nowrap; align-items: center; }
html.hh #team-maengel-inhalt .ck-posten > .links { flex: 1 1 auto; min-width: 0; }
html.hh #team-maengel-inhalt .ck-posten > .rechts { width: auto; flex: none; }
html.hh #team-maengel-inhalt .ck-posten > .rechts > .btn[data-meldung]:not([data-status="neu"]) {
min-height: 36px; padding: 0 var(--sp-4);
border: 0; border-radius: var(--r-full);
background: var(--brand-soft); color: var(--brand);
font-weight: var(--fw-semi);
}
/* „neu“ sagt der Knopf schon („in Arbeit“ ist der nächste Schritt); die
Herkunftszeile in einer Zeile, der Rest per Auslassung. */
html.hh #tab-maengel:not(.handy-alles) #team-maengel-inhalt .ck-titel > .ck-marke.m-offen,
html.hh #tab-maengel:not(.handy-alles) #team-maengel-inhalt > .ck-karte + .ck-karte { display: none; }
html.hh #team-maengel-inhalt .ck-posten > .links > .ck-unter:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Einkauf: abhaken mit dem Kreis links wie in Erinnerungen. Ein Tipp füllt
ihn, nach 1,5 s klickt handy-reiter.js den vorhandenen Knopf; ein zweiter
Tipp davor nimmt es zurück. */
html.hh #team-einkauf-inhalt .ck-posten:has(> .rechts > [data-besorgt]) { flex-wrap: nowrap; gap: var(--sp-1); }
html.hh #team-einkauf-inhalt .ck-posten > .rechts:has(> [data-besorgt]) { order: -1; width: auto; flex: none; margin-left: calc(-1 * var(--sp-3)); }
html.hh #team-einkauf-inhalt .ck-posten > .links { flex: 1 1 auto; min-width: 0; }
html.hh #team-einkauf-inhalt .rechts > [data-besorgt] {
position: relative; display: block;
width: 44px; height: 44px; min-height: 44px; padding: 0;
border: 0; border-radius: 50%; background: none; box-shadow: none;
overflow: hidden; white-space: nowrap; text-indent: 200%; opacity: 1;
}
/* Der Text „besorgt“ bleibt als Name für VoiceOver, aus dem Bild geschoben
(text-indent statt einer Schriftgröße außerhalb der Skala); Kreis und
Haken liegen absolut darüber. */
html.hh #team-einkauf-inhalt .rechts > [data-besorgt]::before {
content: ''; position: absolute; inset: 0; margin: auto;
width: 24px; height: 24px; border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--border-strong);
transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
html.hh #team-einkauf-inhalt .rechts > [data-besorgt]:is(.hh-vorgemerkt, :disabled)::before { background: var(--brand); box-shadow: none; }
html.hh #team-einkauf-inhalt .rechts > [data-besorgt]:is(.hh-vorgemerkt, :disabled)::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 16px; height: 16px;
background: var(--brand-ink);
/* Lucide check; „black“ ist nur die Maske. */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.hh #team-einkauf-inhalt .ck-posten:has(> .rechts > :is(.hh-vorgemerkt, :disabled)) > .links { opacity: .5; }
/* Monatsabschluss: zuerst, ob der Minijob passt. Budget Zeitjahr vorn und
breit, daneben Pauschalen und Mindestlohn; von der Minijob-Betrachtung
nur Jahresprognose, Ampeltext und ein Monat über der Grenze; von den
Einsätzen nur unplausible Zeiten. Die Reihenfolge der Kacheln in
monatKachelnHTML (team.js) hält handy-reiter.test.js fest. */
html.hh #team-monat-inhalt > .ck-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
html.hh #team-monat-inhalt > .ck-kacheln > .ck-kachel:nth-child(4) { order: -1; grid-column: 1 / -1; }
html.hh #team-monat-inhalt > .ck-karte:has(.ck-punkt) > .ck-posten:has(.ck-punkt) { border-top: 0; }
html.hh #team-monat-inhalt > .ck-kacheln > .ck-kachel:nth-child(-n+3) .ck-wert { font-size: var(--fs-lg); overflow-wrap: anywhere; }
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-kacheln > .ck-kachel:first-child,
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(.ck-punkt) > .ck-unter.ck-kartenkopf,
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(.ck-punkt) > .ck-posten:not(:has(.ck-punkt, [data-ausnahme], [data-ausnahme-weg])),
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(> .ck-titel:first-child + .ck-unter.ck-kartenkopf):not(:has(.ck-punkt)),
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(> .ck-titel.ck-kartenkopf:first-child):not(:has(tr.ck-unplausibel, .ck-hinweis)),
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(> .ck-titel.ck-kartenkopf:first-child) tbody > tr:not(.ck-unplausibel),
html.hh #tab-monatsabschluss:not(.handy-alles) #team-monat-inhalt > .ck-karte:has(> .ck-titel.ck-kartenkopf:first-child) > .ck-tabelle-rahmen:not(:has(tr.ck-unplausibel)) { display: none; }
/* Zugänge: erst wer eingeladen ist und wer sich anmelden darf, das
Einladen als letzter Block (wie „Account hinzufügen“ in den Einstellungen). */
html.hh #tab-zugaenge .ck-inhalt > #team-einladungen { order: -2; }
html.hh #tab-zugaenge .ck-inhalt > #team-nutzer { order: -1; }
html.hh #tab-zugaenge .ck-inhalt > #team-einladungen:empty { display: none; }
/* System: der Backup-Status. Datenschutz-Angaben nur, solange etwas fehlt
(dann trägt die Karte .ck-hinweis) oder der Abruf scheiterte; API-Kosten
am Mac bzw. über „Alle Funktionen zeigen“. */
html.hh #tab-system:not(.handy-alles) #team-datenschutz:not(:has(.ck-hinweis, .ck-fehler)),
html.hh #tab-system:not(.handy-alles) #team-api-kosten { display: none; }
/* ══ Finanzen ═══════════════════════════════════════════════════════════
Ob ein Leerzustand erscheint, entscheidet nur, was die Module gezeichnet
haben, nie eine 0 aus einer Quelle, die nicht geantwortet hat. */
/* ── Rechnungen: zuerst, was hakt; sonst ein Leerzustand ── */
/* Engine nur bei Fehlern oder „Manuell prüfen“ über 0 (data-hh-ruhig) */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) > section[data-kachel='engine'][data-hh-ruhig]:not(:has(#rechnungen-fehler [style*='crit'])),
/* Erklärabsätze unter den Überschriften */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) :is(#zahlungen-section, #nachberechnungen-section) > h2 + div,
/* Zahlungen: nur „Offener Betrag“ und eine rote „Erinnerung nötig“, nur bei
Offenem; ohne Offenes (und ohne Hinweis) der ganze Abschnitt */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) #zahlungen-liste .komm-kpi:not(:nth-child(2)):not(.is-err),
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) #zahlungen-liste .komm-kpis:not(:has(> .komm-kpi.is-warn)),
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) #zahlungen-section:has(.z-liste > .blog-empty:only-child):not(:has(.komm-hint)),
/* Buchungsänderungen: nur Gruppen mit Offenem oder Beleg-Fehler; „Neue Buchungsänderung“ bleibt */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) #nachberechnungen-liste > div:not([style*='crit-ink']):not(:has(.ck-marke.m-laeuft, [style*='crit-ink'])),
/* Läufe nur, wenn einer gescheitert ist */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) > section[data-kachel='laeufe']:not(:has(#rechnungen-log [style*='crit-ink'])),
/* Erstellte Rechnungen: Kopfzeile weg, die zehn neuesten, Fehler stehen in der Engine */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles) #rechnungen-liste tr:is(:first-child, :nth-child(n+12), :has(> td:nth-child(5) [style*='crit-ink'])) { display: none !important; }
/* Was hakt, steht oben: Leerzustand, Engine (nur mit Fehlern), Zu erledigen. Nur optisch, DOM bleibt. */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen.active:not(.handy-alles):not(.kacheln-eigen) { display: flex; flex-direction: column; }
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles):not(.kacheln-eigen) > .hh-leer { order: -3; }
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles):not(.kacheln-eigen) > section[data-kachel='engine'] { order: -2; }
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles):not(.kacheln-eigen) > #rechnungen-todo-section { order: -1; }
/* Leerzustand nur, wenn alles gilt: Engine ruhig, „Zu erledigen“ leer,
Zahlungen geladen mit „Keine offenen“, kein Hinweis, keine offene
Buchungsänderung, kein Ladefehler der Buchungsänderungen, kein
gescheiterter oder fehlerhafter Lauf, und die Buchungsänderungen sind
überhaupt gezeichnet (jeder geladene Zustand ist ein ; „Lade …“ ist
nur Text – sonst stand das Häkchen, solange sie noch luden). */
html.hh body:not(.kacheln-anordnen) #tab-rechnungen:not(.handy-alles):has(> section[data-kachel='engine'][data-hh-ruhig]):has(#rechnungen-todo-section[style*='none']):has(#zahlungen-liste .z-liste > .blog-empty:only-child):not(:has(#zahlungen-liste .komm-hint)):not(:has(#nachberechnungen-liste .ck-marke.m-laeuft)):not(:has(#nachberechnungen-liste > [style*='crit-ink'])):not(:has(#rechnungen-log [style*='crit-ink'])):has(#nachberechnungen-liste > div) > .hh-leer { display: block; }
/* Erstellte Rechnungen als Liste: Empfänger und Betrag, darunter Nummer · Datum und PDF. */
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste table,
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste tbody { display: block; width: auto; min-width: 0; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste tr {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-2); row-gap: 2px;
padding: var(--sp-3) 0;
}
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste tr:nth-child(2) { border-top: 0 !important; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td { display: block; padding: 0; min-width: 0; white-space: nowrap; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:is(:nth-child(2), :nth-child(4), :nth-child(5)) { display: none; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(3) { grid-area: 1 / 1 / 2 / 3; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(6) { grid-area: 1 / 3; text-align: right; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(1) { grid-area: 2 / 1; color: var(--text-muted); }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(7) { grid-area: 2 / 2; color: var(--text-muted); }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(7)::before { content: '· '; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(8) { grid-area: 2 / 3; text-align: right; }
html.hh #tab-rechnungen:not(.handy-alles) #rechnungen-liste td:nth-child(8) a { color: var(--rail-active); text-decoration: none; }
/* ── Forderungen: offene Fälle als Liste, sonst ein Leerzustand ──
Die Kacheln bleiben (anders als Betrieb und Meldewesen): die Summen sind
hier die eine große Zahl. Es fallen nur die Nullkacheln weg. */
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) #fo-kacheln > .ck-kachel:not(.rot):not(.gelb):not(:has(> .ck-leer)),
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) #fo-kacheln:not(:has(> .ck-kachel.rot, > .ck-kachel.gelb, > .ck-kachel > .ck-leer)),
/* Leere Kartenköpfe weg: vor dem Laden leer, danach nur „Keine.“ */
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) .ck-karte:has(> [id^='fo-liste-']:empty),
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) .ck-karte:has(> [id^='fo-liste-'] > .ck-leer:only-child),
/* Titel steht in der Leiste; „Jetzt prüfen“ bleibt rechts. */
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) h2.section-title > span:first-child,
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles) #fo-quellen:empty { display: none !important; }
html.hh #tab-forderungen:not(.handy-alles) h2.section-title { justify-content: flex-end; margin-bottom: 0; }
/* Leerzustand nur, wenn alle drei Listen gezeichnet „Keine.“ sagen, kein
Fehler (Stripe, Girokonto, Lexware, gescheiterter Lauf) und nichts
Unzugeordnetes dasteht. „Noch kein Stand“ zeichnet keine Listen. */
html.hh body:not(.kacheln-anordnen) #tab-forderungen:not(.handy-alles):has(#fo-fehler[hidden]):has(#fo-rest-karte[hidden]):has(#fo-liste-offen > .ck-leer:only-child):has(#fo-liste-pruefen > .ck-leer:only-child):has(#fo-liste-unvollstaendig > .ck-leer:only-child) .hh-leer { display: block; }
/* Stand der Quellen als Fußnote unter allem, wie „Zuletzt aktualisiert“. */
html.hh #tab-forderungen:not(.handy-alles) #fo-quellen {
order: 99; margin: 0; padding: 0 var(--sp-2); border: 0;
text-align: center; font-size: var(--fs-xs); color: var(--text-subtle);
}
/* Zeilen wie in Erinnerungen: Gast und Betrag, darunter Einheit und Frist,
darunter der Grund, zuletzt der Knopf „Erledigt …“ (fragt wie bisher nach
dem Grund). Soll, Ist und Rechnung fallen weg; die Spalten hängen an der
Kopfzeile in forderungen.js (Kopplungstest). */
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle-rahmen { overflow: hidden; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle,
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle tbody { display: block; width: auto; min-width: 0; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle thead,
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:is(:nth-child(3), :nth-child(4), :nth-child(8)),
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(9):empty,
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(1) .ck-leise { display: none; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px;
padding: var(--sp-3) 0;
border-top: 1px solid var(--border);
}
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle tr:first-child { border-top: 0; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td { display: block; padding: 0; border: 0; min-width: 0; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(1) { grid-area: 1 / 1; font-size: var(--fs-md); }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(5) { grid-area: 1 / 2; text-align: right; font-size: var(--fs-md); }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(2) { grid-area: 2 / 1; font-size: var(--fs-sm); color: var(--text-muted); white-space: normal; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(2) .ck-leise { display: inline; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(2) .ck-leise::before { content: ' · '; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(7) { grid-area: 2 / 2; text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(7)::before { content: 'fällig '; }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(6) { grid-area: 3 / 1 / 4 / 3; font-size: var(--fs-sm); color: var(--text-muted); }
html.hh #tab-forderungen:not(.handy-alles) .ck-tabelle td:nth-child(9) { grid-area: 4 / 1 / 5 / 3; justify-self: start; }
/* ── Steuern: die Rücklage, ihre Annahmen und das Steuerkonto ──
Umsatzsteuer je Monat, Darlehen, AfA und Werbungskosten aus dem Konto sind
Grundlagen für den Schreibtisch; ihre Warnungen betreffen Stammdaten.
Bewusst anders als handy.css (dort blieben #st-kacheln sichtbar), außer
bei einem Lexware-Fehler (#st-fehler). Was die Prognose unsicher macht,
steht in deren Annahmen. Das Steuerkonto (#st-form-posten) bleibt: dort
stehen fällige Zahlungen. */
html.hh body:not(.kacheln-anordnen) #tab-steuern:not(.handy-alles) > section.ck-bereich:has(#st-kacheln):not(:has(#st-fehler:not([hidden]))),
html.hh body:not(.kacheln-anordnen) #tab-steuern:not(.handy-alles) :is(#st-bank-karte, .ck-karte:has(> #st-prognose-ruecklage)),
html.hh body:not(.kacheln-anordnen) #tab-steuern:not(.handy-alles) #st-prognose-kacheln > .ck-kachel:not(:first-child):not(.rot):not(.gelb),
html.hh body:not(.kacheln-anordnen) #tab-steuern:not(.handy-alles) #st-form-posten > .ck-unter,
html.hh body:not(.kacheln-anordnen) #tab-steuern:not(.handy-alles) #st-form-posten > .ck-tabelle-rahmen:has(tbody:empty) { display: none !important; }
/* Die Annahmen der Prognose ungekürzt als Fußnote unter der Zahl, nicht als Kasten. */
html.hh #tab-steuern:not(.handy-alles) #st-prognose-hinweise {
margin: 0; padding: 0 var(--sp-1); border: 0;
font-size: var(--fs-xs); color: var(--text-muted);
}
/* ── Selbstauskunft: lesend, Kennzahlen und was fehlt („Bearbeiten am Mac“ oben in der Grundlage) ── */
html.hh body:not(.kacheln-anordnen) #tab-selbstauskunft:not(.handy-alles) :is(.sa-bar, #selbstauskunft-doc .sa-finrd) { display: none !important; }
/* ── Investitionen: Liquidität nur als Warnung, Kredit-Zahlen einmal ── */
html.hh body:not(.kacheln-anordnen) #tab-investitionen:not(.handy-alles):not(.kacheln-eigen) #liquiditaet-section:not(:has(.liq-warning)),
html.hh body:not(.kacheln-anordnen) #tab-investitionen:not(.handy-alles) #liquiditaet-section :is(.section-title, .liq-kredit-grid) { display: none !important; }
html.hh:root #tab-investitionen:not(.handy-alles) > #liquiditaet-section {
padding: 0; background: none; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html.hh #tab-investitionen:not(.handy-alles) .inv-summe { font-family: inherit; font-variant-numeric: tabular-nums; }
/* ── Auswertung: Geldeingang als eine Zahl, Überfälliges als Zeile ── */
html.hh body:not(.kacheln-anordnen) #tab-finanzen:not(.handy-alles) #geldeingang-detail-body :is(.ge-kanaele, .ge-mehr),
html.hh body:not(.kacheln-anordnen) #tab-finanzen:not(.handy-alles) #geldeingang-detail-body .ge-card:not(:has(tr.ge-ueberfaellig)) .ge-tabelle,
html.hh body:not(.kacheln-anordnen) #tab-finanzen:not(.handy-alles) #geldeingang-detail-body .ge-tabelle tr:not(.ge-ueberfaellig) { display: none !important; }
/* Die Zeile passt in die Breite: Einheit und Gast kürzen sich (…), der Betrag
bleibt sichtbar. Vorher war die Tabelle 392 px in 312 px breit, der Betrag
lag rechts außerhalb der Karte (Prüfstand 31.10.2026). */
html.hh body:not(.kacheln-anordnen) #tab-finanzen:not(.handy-alles) #geldeingang-detail-body .ge-tabelle td.ge-wer { max-width: 0; width: 100%; }
/* ── Buchhaltung: unter dem Beleg-Scan eine Zeile, wenn der Zähler etwas meldet ──
Die Kachel „Beleg scannen“ bleibt vorn und unberührt. */
html.hh body:not(.kacheln-anordnen):has(#badge-buchhaltung:not([style*='none'])) #tab-buchhaltung:not(.handy-alles):not(.kacheln-eigen) > section[data-kachel='status'] { display: block !important; }
html.hh:root #tab-buchhaltung:not(.handy-alles) > section[data-kachel='status'] {
padding: 0; background: none; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html.hh #tab-buchhaltung:not(.handy-alles) #fin-ampel .ck-unter {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
/* ══ Häuser ═════════════════════════════════════════════════════════════ */
/* Zeilen ohne Handlungsbedarf (.hh-ruhig) und darunter „N ohne
Handlungsbedarf · Einblenden“ wie „Erledigte“ in Erinnerungen. */
html.hh .tab-panel:not(.handy-alles):not(.hh-alle-zeilen) .hh-ruhig { display: none !important; }
html.hh .hh-r-fuss:not([hidden]) {
display: block; width: 100%; min-height: 44px; margin: var(--sp-2) 0 0; padding: var(--sp-2) 0;
background: none; border: 0; cursor: pointer;
color: var(--rail-active); font-family: inherit; font-size: var(--fs-base); text-align: center;
}
/* Nullen-Kacheln (handy-reiter.js setzt .hh-null) */
html.hh .tab-panel:not(.handy-alles) .hh-null { display: none !important; }
/* Signalzeilen statt Kacheln, wie „Braucht dich“ in Heute: Name links, Zahl
rechts, eine Fläche, Trennlinie ab dem Text. */
html.hh #ops-cockpit .ops-cockpit-grid,
html.hh #mw-kacheln:not([hidden]) {
display: block; overflow: hidden; gap: 0;
background: var(--bg-card); border-radius: var(--r-md);
}
html.hh #ops-cockpit .ops-kpi,
html.hh #mw-kacheln .ck-kachel {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 50px; padding: 0 var(--sp-4);
background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left;
}
html.hh #ops-cockpit .ops-kpi { flex-direction: row-reverse; }
html.hh #ops-cockpit .ops-kpi-label,
html.hh #mw-kacheln .ck-bez { order: 1; flex: 1; margin: 0; font-size: var(--fs-lg); color: var(--text); }
html.hh #mw-kacheln .ck-wert { order: 2; }
html.hh #mw-kacheln .ck-fuss { display: none; }
html.hh #ops-cockpit .ops-kpi-val,
html.hh #mw-kacheln .ck-wert {
min-width: 24px; height: 24px; padding: 0 8px; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-full); background: var(--bg-card3); color: var(--text);
font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1; letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
html.hh #ops-cockpit .ops-kpi-kritisch .ops-kpi-val,
html.hh #mw-kacheln .ck-kachel.rot .ck-wert { background: var(--crit-soft); color: var(--crit-ink); }
html.hh #ops-cockpit .ops-kpi-warn .ops-kpi-val,
html.hh #mw-kacheln .ck-kachel.gelb .ck-wert { background: var(--warn-soft); color: var(--warn-ink); }
html.hh #tab-betrieb:not(.handy-alles) #ops-cockpit .ops-kpi:not(.ops-kpi-null) ~ .ops-kpi:not(.ops-kpi-null)::before,
html.hh #tab-betrieb.handy-alles #ops-cockpit .ops-kpi + .ops-kpi::before,
html.hh #tab-meldewesen:not(.handy-alles) #mw-kacheln :is(.gelb, .rot) ~ :is(.gelb, .rot)::before,
html.hh #tab-meldewesen.handy-alles #mw-kacheln .ck-kachel + .ck-kachel::before {
content: ''; position: absolute; top: 0; right: 0; left: var(--sp-4);
height: 1px; background: var(--border);
}
/* ── Betrieb ── */
/* Nur Signale über 0 (operations.js markiert Nullen selbst: ops-kpi-null);
alles 0: der Leerzustand aus handy-reiter.js */
html.hh #tab-betrieb:not(.handy-alles) #ops-cockpit .ops-kpi-null { display: none; }
html.hh #tab-betrieb:not(.handy-alles) #ops-cockpit:not(:has(.ops-kpi:not(.ops-kpi-null))) .ops-cockpit-grid { display: none; }
html.hh #tab-betrieb:not(.handy-alles) [data-kachel="ops-cockpit"] > h2.section-title { display: none; }
/* Verweis-Kacheln weg: Tab-Leiste und Häuser-Liste führen dorthin. Trägt
eine davon eine rote Zeile (Kalender nicht geblockt, Schein zu vernichten,
Reinigung ohne Zuweisung), bleibt sie stehen. */
html.hh body:not(.kacheln-anordnen) #tab-betrieb:not(.handy-alles):not(.kacheln-eigen) :is([data-kachel="team-portal"], [data-kachel="late-checkout"], [data-kachel="meldewesen"]):not(:has([style*="crit-ink"])) { display: none !important; }
/* Leeres Aufgaben-Board: kein Erklärblock, „Neue Aufgabe“ steht im Kopf */
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-empty-add { display: none; }
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-del-btn { display: none; }
/* Wartungsplan am iPhone offen: dort stehen die fälligen Wartungen */
html.hh body:not(.kacheln-anordnen) #tab-betrieb [data-kachel="wartungsplan"].m-coll-inline:not(.m-open) > #ops-wartung { display: block !important; }
html.hh body:not(.kacheln-anordnen) #tab-betrieb [data-kachel="wartungsplan"].m-coll-inline:not(.m-open) > .hh-leer:not([hidden]) { display: block !important; }
html.hh body:not(.kacheln-anordnen) #tab-betrieb [data-kachel="wartungsplan"].m-coll-inline:not(.m-open) > .hh-r-fuss:not([hidden]) { display: block !important; }
html.hh #tab-betrieb [data-kachel="wartungsplan"] > .section-title .m-coll-chev { display: none; }
/* Steht oben schon „nichts fällig“, kein zweites Häkchen darunter */
html.hh #tab-betrieb:has(#ops-cockpit + .hh-leer:not([hidden])) #ops-wartung + .hh-leer { display: none !important; }
/* Wartung als Liste wie Erinnerungen: Titel, darunter Einheit und Fälligkeit */
html.hh #ops-wartung .ops-wartung-table-wrap { overflow: hidden; }
html.hh #ops-wartung .ops-wartung-table,
html.hh #ops-wartung .ops-wartung-table tbody { display: block; }
html.hh #ops-wartung .ops-wartung-table thead { display: none; }
html.hh #ops-wartung .ops-wartung-table tbody tr {
position: relative; overflow: hidden;
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); row-gap: 2px;
padding: var(--sp-3) 0;
touch-action: pan-y;
}
html.hh #ops-wartung .ops-wartung-table tbody tr + tr { border-top: 1px solid var(--border); }
html.hh #ops-wartung .ops-wartung-table td { padding: 0; border: 0; font-size: var(--fs-sm); color: var(--text-muted); }
html.hh #ops-wartung .ops-wartung-table td:first-child { flex: 1 1 100%; color: var(--text); }
html.hh #ops-wartung .ops-wartung-titel { font-size: var(--fs-lg); font-weight: var(--fw-normal); }
html.hh #ops-wartung .ops-wartung-notiz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-muted); }
html.hh #ops-wartung .ops-wartung-table td:not(:last-child) { transition: transform var(--dur-2) var(--ease); }
/* Wischen nach links zeigt den vorhandenen Knopf „Erledigt“ (Mail-App);
getippt wird er selbst. Nur ohne „Alle Funktionen zeigen“: damit steht
der Knopf wieder normal in der Zeile. */
html.hh #tab-betrieb:not(.handy-alles) #ops-wartung .ops-wartung-table tr[data-hh-wisch] td:not(:last-child) { transform: translateX(-112px); }
html.hh #tab-betrieb:not(.handy-alles) #ops-wartung .ops-wartung-table td:last-child {
position: absolute; top: 0; right: 0; bottom: 0; width: 112px;
display: flex; transform: translateX(100%);
transition: transform var(--dur-2) var(--ease);
}
html.hh #tab-betrieb:not(.handy-alles) #ops-wartung .ops-wartung-table tr[data-hh-wisch] td:last-child { transform: none; }
html.hh #tab-betrieb:not(.handy-alles) #ops-wartung .ops-wartung-table td:last-child .btn {
flex: 1; height: 100%; justify-content: center;
border: 0; border-radius: var(--r-md); background: var(--brand); color: var(--brand-ink);
font-size: var(--fs-base);
}
/* Aufgaben-Karten: dieselbe Geste für die Status-Knöpfe */
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-aufgabe:not(.ops-aufgabe-done) { position: relative; overflow: hidden; touch-action: pan-y; }
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-aufgabe .ops-status-btns {
position: absolute; top: 0; right: 0; bottom: 0; margin: 0; gap: 0;
display: flex; transform: translateX(100%);
transition: transform var(--dur-2) var(--ease);
}
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-aufgabe[data-hh-wisch] .ops-status-btns { transform: none; }
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-status-btn.active { display: none; }
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-status-btn { width: 96px; height: 100%; border: 0; border-radius: 0; font-size: var(--fs-sm); }
html.hh #tab-betrieb:not(.handy-alles) #ops-board .ops-status-btn.ops-btn-done { background: var(--brand); color: var(--brand-ink); }
/* ── Meldewesen ── */
/* Nur Signale über 0 (gelb/rot); „Anreisen“ ist Information */
html.hh #tab-meldewesen:not(.handy-alles) #mw-kacheln .ck-kachel:not(.gelb):not(.rot) { display: none; }
html.hh #tab-meldewesen:not(.handy-alles) #mw-kacheln:not(:has(.gelb, .rot)) { display: none !important; }
/* Überschrift doppelt zur Titelleiste */
html.hh:not([data-hh-wurzel]) #tab-meldewesen:not(.handy-alles) #mw-meldescheine > h2.section-title { display: none; }
/* ── Preise: am iPhone nur lesen ──
Zuerst die Empfehlungen (der Zähler zählt deren rote), offen und ohne
„Anwenden“: ein Tipp änderte sonst sofort den Basispreis. „Auslastung &
Handlungsbedarf“ zeigt dieselben Balken wie Einheiten und eine zweite,
abweichende Empfehlung (−10 % statt −20 %). */
html.hh body:not(.kacheln-anordnen) #tab-pricelabs:not(.handy-alles):not(.kacheln-eigen) [data-kachel="auslastung-handlungsbedarf"] { display: none !important; }
html.hh body:not(.kacheln-anordnen) #tab-pricelabs:not(.handy-alles) [data-kachel="auto-empfehlungen"].m-coll-block:not(.kachel-versteckt) { display: block !important; }
html.hh body:not(.kacheln-anordnen) #tab-pricelabs:not(.handy-alles) .m-coll-head:has(+ [data-kachel="auto-empfehlungen"]) { display: none !important; }
html.hh #tab-pricelabs:not(.handy-alles) :is(.reco-item > .btn, .reco-herleitung, .reco-meta-row .src-badge, .pl-gap-hint, .pl-gap-info) { display: none !important; }
html.hh #tab-pricelabs #recommendations { gap: 0; overflow: hidden; background: var(--bg-card); border-radius: var(--r-md); }
html.hh #tab-pricelabs #recommendations .reco-item {
position: relative; flex-wrap: nowrap; margin: 0;
padding: var(--sp-3) var(--sp-4); border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html.hh #tab-pricelabs #recommendations .reco-item + .reco-item::before {
content: ''; position: absolute; top: 0; right: 0; left: calc(var(--sp-4) + 10px + var(--sp-3));
height: 1px; background: var(--border);
}
html.hh #tab-pricelabs .reco-einheit { font-size: var(--fs-md); }
html.hh #tab-pricelabs .reco-text { font-size: var(--fs-sm); }
/* ── Blog: Zeilen wie eine Liste, ohne „Freigeben“ (der Entwurf lässt sich
am iPhone nicht ansehen); ein Tipp auf einen veröffentlichten Beitrag
öffnet ihn über den vorhandenen Link „Ansehen“ (handy-reiter.js). ── */
html.hh #tab-blog:not(.handy-alles) #blog-posts-list :is(button[onclick^="freigebenPost"], a[href*="/blog/"]) { display: none !important; }
html.hh #tab-blog #blog-posts-list .blog-posts-table thead { display: none; }
html.hh #tab-blog #blog-posts-list .blog-posts-table td { padding: var(--sp-3) var(--sp-2); vertical-align: middle; }
html.hh #tab-blog #blog-posts-list .blog-post-title { font-size: var(--fs-md); font-weight: var(--fw-normal); }
html.hh #tab-blog #blog-posts-list .blog-posts-table td:nth-child(3),
html.hh #tab-blog #blog-posts-list .blog-posts-table td:nth-child(4) { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
/* ── Late Checkout: zuerst die roten Konflikte, dann die Buchungen ── */
/* Geladen und leer: die Karten „Noch keine …“ weg, der Leerzustand steht darunter */
html.hh #tab-latecheckout:not(.handy-alles) #lco-buchungen:has(> .ck-kacheln) > .ck-karte:has(> .ck-leer) { display: none; }
/* Buchungen als Liste wie Wallet: Einheit, Gast, Betrag; darunter Datum und
Status samt Portal-Update (stand vorher rechts außerhalb des Bilds). Die
Tabellen bleiben im DOM; die Spalten hängen an zeichneBuchungen
(Kopplungstest). */
html.hh #lco-buchungen .ck-tabelle-rahmen { overflow: visible; padding: 0; border: 0; background: none; box-shadow: none; }
html.hh #lco-buchungen .lco-tabelle,
html.hh #lco-buchungen .lco-tabelle tbody { display: block; }
html.hh #lco-buchungen .lco-tabelle thead { display: none; }
html.hh #lco-buchungen .lco-tabelle tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); padding: var(--sp-3) 0; }
html.hh #lco-buchungen .lco-tabelle tr + tr { border-top: 1px solid var(--border); }
html.hh #lco-buchungen .lco-tabelle tr::after { content: ''; order: 4; flex-basis: 100%; }
html.hh #lco-buchungen .lco-tabelle td { padding: 0; border: 0; font-size: var(--fs-sm); color: var(--text-muted); }
html.hh #lco-buchungen .lco-tabelle td:nth-child(2) { order: 1; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
html.hh #lco-buchungen .lco-tabelle td:nth-child(3) { order: 2; flex: 1 1 8em; min-width: 0; font-size: var(--fs-md); color: var(--text); }
html.hh #lco-buchungen .lco-tabelle td.r:not(:has(+ td.r)) { order: 3; font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; }
html.hh #lco-buchungen .lco-tabelle td.r:has(+ td.r) { display: none; }
html.hh #lco-buchungen .lco-tabelle td:nth-child(1) { order: 5; }
html.hh #lco-buchungen .lco-tabelle td:nth-child(4) { order: 6; }
html.hh #lco-buchungen .lco-tabelle tr:has(> td:nth-child(7):last-child) > td:nth-child(4)::before { content: 'bis '; }
html.hh #lco-buchungen .lco-tabelle td:has(> .ck-marke) { order: 7; flex-basis: 100%; }
html.hh #lco-buchungen .lco-tabelle td:last-child:not(:has(> .ck-marke)) { display: none; }
/* ── Gästekommunikation wie die Mail-App: Fehler zuerst ──
Nur der Titel fällt weg, „Aktualisieren“ bleibt rechts (Überschriften
mit Knopf bleiben); justify-content steht im Markup inline. */
html.hh #tab-kommunikation:not(.handy-alles) > section > h2.section-title > span:first-child,
html.hh #tab-kommunikation:not(.handy-alles) #komm-status,
html.hh #tab-kommunikation:not(.handy-alles) .komm-kpi:not(.is-err) { display: none !important; }
html.hh #tab-kommunikation:not(.handy-alles) > section > h2.section-title { justify-content: flex-end !important; }
html.hh #tab-kommunikation .komm-filter input { min-width: 0; }
html.hh #tab-kommunikation .komm-kpis { display: block; margin-bottom: var(--sp-3); }
html.hh #tab-kommunikation .komm-kpi.is-err {
display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;
min-height: 50px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-md); background: var(--bg-card);
}
html.hh #tab-kommunikation .komm-kpi.is-err .komm-kpi-lbl { margin: 0; font-size: var(--fs-lg); color: var(--text); }
html.hh #tab-kommunikation .komm-kpi.is-err .komm-kpi-num {
min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-full); background: var(--crit-soft); color: var(--crit-ink);
font-size: var(--fs-sm); line-height: 1;
}
html.hh #tab-kommunikation .komm-table-wrap { overflow: hidden; border: 0; background: var(--bg-card); border-radius: var(--r-md); }
html.hh #tab-kommunikation .komm-table,
html.hh #tab-kommunikation .komm-table tbody { display: flex; flex-direction: column; }
html.hh #tab-kommunikation .komm-table tbody { margin-top: -1px; }
html.hh #tab-kommunikation .komm-table thead { display: none; }
html.hh #tab-kommunikation .komm-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3);
padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border);
}
html.hh #tab-kommunikation .komm-row.is-err { order: -1; }
html.hh #tab-kommunikation .komm-row > td { padding: 0; border: 0; min-width: 0; max-width: none; }
html.hh #tab-kommunikation .komm-empf { grid-area: 1 / 1; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
html.hh #tab-kommunikation .komm-time { grid-area: 1 / 2; font-size: var(--fs-sm); }
html.hh #tab-kommunikation .komm-betreff { grid-area: 2 / 1; font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-muted); }
html.hh #tab-kommunikation .komm-row > td:nth-child(6) { grid-area: 2 / 2; justify-self: end; }
/* ── Einheiten: Festmiete knapp ──
Name, Miete; Mieterzeilen nur mit offenem Punkt (Kaution offen, Vertrag
endet oder ist abgelaufen). „nicht eingetragen“ ist Pflege am Mac. */
html.hh #tab-einheiten:not(.handy-alles) #units-grid .unit-card-fest :is(.fest-hinweis, .mieter-divider) { display: none; }
html.hh #tab-einheiten:not(.handy-alles) #units-grid .unit-card-fest .mk-zeile:not(:has(.mk-warn)) { display: none; }
html.hh #tab-einheiten:not(.handy-alles) #units-grid .unit-card-fest .mk-status:has(.laufzeit-ok) { display: none; }
html.hh #tab-einheiten #units-grid .unit-card-fest .fest-miete-betrag { font-size: var(--fs-xl); }