klappt unter 768px in Card-Layout um.
Voraussetzung: jedes | hat data-label="Spaltenname".
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
table.hv-table-mobile thead {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
table.hv-table-mobile tbody tr {
display: block;
margin-bottom: 0.75rem;
border: 1px solid var(--hv-border, #e5e7eb);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
background: var(--hv-surface, #ffffff);
}
table.hv-table-mobile tbody td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 0.25rem 0;
border: 0;
}
table.hv-table-mobile tbody td::before {
content: attr(data-label);
font-size: var(--fs-xs);
color: var(--color-muted, #525252);
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
table.hv-table-mobile tbody td:not([data-label]):empty {
display: none;
}
}
/* ════════════════════════════════════════════════════════════════════════════
Inline-Hilfe — Tooltip-Popover (Phase 2.5)
────────────────────────────────────────────────────────────────────────────
Klick-getriggertes Popover fuer komplexe Felder (Kappungsgrenze,
Verteilerschluessel, AfA-Restwert, Mietspiegel). Kein Hover, weil Mobile
das nicht hat. Keine Wall-of-Text — max. 2-3 Saetze pro Tip.
════════════════════════════════════════════════════════════════════════════ */
.hv-tip {
cursor: pointer;
color: var(--color-muted, #525252);
margin-left: 0.25rem;
font-size: 0.95em;
vertical-align: middle;
transition: color 100ms ease;
}
.hv-tip:hover,
.hv-tip:focus-visible {
color: var(--brand-primary, #1E3A5F);
}
[data-theme="dark"] .hv-tip:hover,
[data-theme="dark"] .hv-tip:focus-visible {
color: var(--brand-accent-industrial, #5BB0D9);
}
/* Popover-Variante: schmaler + im Industrial-Look */
.popover.hv-tip-popover {
max-width: 300px;
font-size: var(--fs-sm);
border: 1px solid var(--hv-border, #e5e7eb);
box-shadow: var(--shadow-lg);
}
.popover.hv-tip-popover .popover-header {
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
background: var(--color-muted-bg, #f1f5f9);
border-bottom: 0;
}
.popover.hv-tip-popover .popover-body {
font-size: var(--fs-sm);
line-height: 1.5;
}
[data-theme="dark"] .popover.hv-tip-popover {
background: #1A1A1B;
border-color: rgba(255, 255, 255, 0.12);
color: #E5E5E5;
}
[data-theme="dark"] .popover.hv-tip-popover .popover-header {
background: #0F1418;
color: #fff;
}
[data-theme="dark"] .popover.hv-tip-popover .popover-arrow::after {
border-top-color: #1A1A1B;
border-bottom-color: #1A1A1B;
}
/* ════════════════════════════════════════════════════════════════════════════
Auto-Save-Indikator (Phase 2.1)
────────────────────────────────────────────────────────────────────────────
Wird in Wizard-Steps (Mieterhoehung, NK, Onboarding) eingesetzt.
════════════════════════════════════════════════════════════════════════════ */
.hv-autosave {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: var(--fs-xs);
color: var(--color-success);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.hv-autosave.hv-autosave-visible {
opacity: 1;
}
.hv-autosave::before {
content: '✓';
font-weight: var(--fw-bold);
}
[data-theme="dark"] .hv-autosave {
color: #6EE7A7;
}
/* ════════════════════════════════════════════════════════════════════════════
Step-Wizard (Phase 3.1)
────────────────────────────────────────────────────────────────────────────
Fortschrittsanzeige fuer Multi-Step-Forms. Status:
done = grün + Haken + klickbar; active = Brand + fett; todo = muted.
════════════════════════════════════════════════════════════════════════════ */
.hv-step-wizard-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: var(--fs-sm);
}
.hv-step-wizard-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-pill);
background: transparent;
}
.hv-step-wizard-item + .hv-step-wizard-item::before {
content: '›';
color: var(--color-muted);
margin-right: 0.25rem;
font-size: 1.1em;
}
.hv-step-wizard-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
background: var(--color-muted-bg);
color: var(--color-muted);
}
.hv-step-wizard-item.done .hv-step-wizard-num {
background: var(--color-success);
color: var(--color-success-on);
}
.hv-step-wizard-item.active .hv-step-wizard-num {
background: var(--brand-primary);
color: var(--brand-primary-on);
}
.hv-step-wizard-titel {
color: var(--color-muted);
text-decoration: none;
}
.hv-step-wizard-item.done .hv-step-wizard-titel { color: var(--color-success); }
.hv-step-wizard-item.done a.hv-step-wizard-titel:hover { text-decoration: underline; }
.hv-step-wizard-item.active .hv-step-wizard-titel {
color: var(--brand-primary);
font-weight: var(--fw-bold);
}
[data-theme="dark"] .hv-step-wizard-num {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .hv-step-wizard-item.done .hv-step-wizard-num {
background: rgba(34, 197, 94, 0.3);
color: #6EE7A7;
}
[data-theme="dark"] .hv-step-wizard-item.done .hv-step-wizard-titel { color: #6EE7A7; }
[data-theme="dark"] .hv-step-wizard-item.active .hv-step-wizard-num {
background: var(--brand-accent-industrial);
color: #0A0A0B;
}
[data-theme="dark"] .hv-step-wizard-item.active .hv-step-wizard-titel {
color: var(--brand-accent-industrial);
}
/* ════════════════════════════════════════════════════════════════════════════
Onboarding-Tour-Spotlight (Phase 3.6)
────────────────────────────────────────────────────────────────────────────
Dunkler Backdrop mit "ausgeschnittenem" Spotlight um das Tour-Ziel-Element.
Bubble (.hv-tour-bubble) zeigt Titel + Markdown-Body + Skip/Weiter.
════════════════════════════════════════════════════════════════════════════ */
.hv-tour-overlay {
position: fixed;
inset: 0;
z-index: 1090;
pointer-events: none;
}
.hv-tour-overlay::before {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 10, 11, 0.55);
backdrop-filter: blur(2px);
pointer-events: auto;
}
.hv-tour-spotlight {
position: absolute;
border-radius: var(--radius-md);
box-shadow: 0 0 0 9999px rgba(10, 10, 11, 0.55), 0 0 0 3px var(--brand-accent-industrial);
pointer-events: none;
transition: all 200ms ease;
}
.hv-tour-bubble {
position: absolute;
max-width: 360px;
background: #fff;
color: #1A1A1A;
border-radius: var(--radius-md);
padding: 1rem 1.15rem;
box-shadow: var(--shadow-lg);
pointer-events: auto;
font-size: var(--fs-sm);
line-height: 1.5;
}
.hv-tour-bubble h3 {
margin: 0 0 0.5rem 0;
font-size: var(--fs-base);
font-weight: var(--fw-bold);
}
.hv-tour-bubble p { margin: 0 0 0.5rem 0; }
.hv-tour-bubble p:last-child { margin-bottom: 0; }
.hv-tour-bubble ul { margin: 0 0 0.75rem 0; padding-left: 1.25rem; }
.hv-tour-bubble strong { color: var(--brand-primary); }
.hv-tour-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var(--hv-border, #e5e7eb);
}
.hv-tour-progress {
font-size: var(--fs-xs);
color: var(--color-muted);
margin-right: auto;
}
[data-theme="dark"] .hv-tour-bubble {
background: #1A1A1B;
color: #E5E5E5;
}
[data-theme="dark"] .hv-tour-bubble strong { color: var(--brand-accent-industrial); }
[data-theme="dark"] .hv-tour-actions { border-top-color: rgba(255, 255, 255, 0.1); }
/* ════════════════════════════════════════════════════════════════════════════
A11y: prefers-reduced-motion (Phase 3.5)
────────────────────────────────────────────────────────────────────────────
Wenn der User reduced-motion eingestellt hat, schalten wir Animationen
+ Transitions global ab. Greift auf alle hv-* Komponenten, Bootstrap
(.fade, .collapse) UND inline transition-Werte.
════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
S-NAV — Klick-Feedback bei klassischer Navigation (alle 4 Surfaces)
──────────────────────────────────────────────────────────────────────────── */
/* Top-Progress-Bar (gesteuert von public/js/nav-progress.js). */
.hv-nav-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: var(--brand-primary, #2D6B8E);
box-shadow: 0 0 8px rgba(45, 107, 142, 0.55);
opacity: 0;
z-index: 2000;
pointer-events: none;
transition: width 0.2s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
/* Balken bleibt als reines „läuft"-Signal, aber ohne laufende Animation. */
.hv-nav-progress { transition: none; }
}
/* View-Transitions: BEWUSST DEAKTIVIERT (Entscheidung 2026-06-10 nach 3
Guard-Iterationen). @view-transition { navigation: auto } erzeugt in Chromium
beim Browser-Teardown/Viewport-Resize einen in-page NICHT abfangbaren
"Transition was aborted"-pageerror (weder pagereveal/pageswap-Catch noch
früher unhandledrejection-Filter noch skipTransition halfen — die Seite ist
beim Abort bereits in Zerstörung). Das verschmutzt jeden automatisierten
Browser-Lauf und maskiert echte Fehler. Der Weiß-Blitz ist stattdessen über
den dunklen Erst-Paint (Inline-Style in main.handlebars) gelöst, das
Klick-Feedback über die Top-Progress-Bar (nav-progress.js). Die vt-guard-/
skipTransition-Mechanik bleibt harmlos bestehen, falls VT später (besserer
Browser-Support) reaktiviert wird. */
/* ════════════════════════════════════════════════════════════════════════════
S-CHART/S-LOAD — Skeleton-Platzhalter (alle Surfaces; .hv-skeleton liegt sonst
nur in app.css = Admin, fehlt aber im Portal/Public). Theme-neutral.
──────────────────────────────────────────────────────────────────────────── */
.hv-skeleton {
position: relative;
width: 100%;
border-radius: 6px;
background: linear-gradient(90deg,
rgba(128, 128, 128, 0.06) 0%,
rgba(128, 128, 128, 0.12) 50%,
rgba(128, 128, 128, 0.06) 100%);
background-size: 200% 100%;
animation: hv-skeleton-pulse 1.5s ease-in-out infinite;
}
.hv-skeleton-msg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.85rem;
color: var(--color-ink-soft, #6c757d);
white-space: nowrap;
}
@keyframes hv-skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.hv-skeleton { animation: none; }
}
/* Chart-Container: reserviert Platz (kein CLS/Leerblitz) + Skeleton liegt als
Overlay über dem Canvas, bis nav die [data-chart-skeleton]-Elemente entfernt. */
.hv-chart-wrap { position: relative; }
.hv-chart-skeleton {
position: absolute;
inset: 0;
height: auto !important;
border-radius: 8px;
}
/* ════════════════════════════════════════════════════════════════════════════
S-FILE — gestylter Datei-Upload (deutsch + Dateiname). Ersetzt das native,
teils englische . Label umschließt das visuell versteckte
Input; JS (app.js / portal-init.js) füllt [data-upload-name].
──────────────────────────────────────────────────────────────────────────── */
.hv-upload { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; max-width: 100%; }
.hv-upload__input {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); border: 0;
}
.hv-upload__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 0.45rem 0.9rem; border-radius: 8px;
border: 1px solid var(--color-line, #ced4da);
background: var(--color-paper-deep, #f1f3f5);
color: var(--color-ink, #15243C);
font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.hv-upload:hover .hv-upload__btn,
.hv-upload:focus-within .hv-upload__btn {
border-color: var(--brand-primary, #2D6B8E);
background: var(--color-brand-haze, #E5EFF5);
}
.hv-upload__name { font-size: 0.85rem; color: var(--color-ink-soft, #6c757d); word-break: break-word; }
/* ═══ app.css ═══ */
/* ════════════════════════════════════════════════════════════════════════════
Hausverwaltung — App Styles
════════════════════════════════════════════════════════════════════════════ */
/* ── CSS-Variablen ───────────────────────────────────────────────────────── */
/* Brand-Drift gefixt: --hv-primary etc. sind jetzt auf die zentralen
Brand-Tokens aus tokens.css gemappt. Indigo (#4f46e5) ist raus. */
:root {
/* Farben — Light Theme (uebernimmt Brand aus tokens.css) */
--hv-primary: var(--brand-primary); /* Tiefblau #1E3A5F */
--hv-primary-light: var(--brand-primary-hover); /* Etwas dunklerer Hover */
--hv-secondary: var(--brand-primary);
--hv-accent: var(--brand-accent-industrial); /* Helles See-Blau #5BB0D9 */
--hv-success: var(--color-success);
--hv-warning: var(--color-warning);
--hv-danger: var(--color-danger);
--hv-bg: #f8fafc;
--hv-surface: #ffffff;
--hv-sidebar-bg: #ffffff;
--hv-sidebar-border:#eef0f4;
--hv-sidebar-text: #475569;
--hv-sidebar-muted: #94a3b8;
--hv-sidebar-active-bg: #E8EEF5; /* Tiefblau, sehr hell */
--hv-sidebar-active-text: var(--brand-primary);
--hv-sidebar-hover: #f1f5f9;
--hv-text: #0f172a;
--hv-text-muted: #64748b;
--hv-border: #e5e7eb;
--hv-border-soft: #f1f5f9;
/* Schatten — subtil */
--hv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--hv-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--hv-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
--hv-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12);
/* Layout */
--hv-sidebar-w: 244px;
--hv-topbar-h: 56px;
/* Spacing-Skala */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
/* Typografie */
--hv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--hv-font-xs: 0.7rem;
--hv-font-sm: 0.8rem;
--hv-font-base: 0.9rem;
--hv-font-md: 0.95rem;
--hv-font-lg: 1.1rem;
/* Radien */
--hv-radius-sm: 6px;
--hv-radius-md: 10px;
--hv-radius-lg: 14px;
}
/* ── Dark Theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
--hv-primary: #818cf8;
--hv-primary-light: #a5b4fc;
--hv-secondary: #818cf8;
--hv-accent: #a5b4fc;
--hv-success: #34d399;
--hv-warning: #fbbf24;
--hv-danger: #f87171;
--hv-bg: #0b1120;
--hv-surface: #111827;
--hv-sidebar-bg: #0f172a;
--hv-sidebar-border:#1f2937;
--hv-sidebar-text: #cbd5e1;
--hv-sidebar-muted: #64748b;
--hv-sidebar-active-bg: rgba(129, 140, 248, 0.15);
--hv-sidebar-active-text: #a5b4fc;
--hv-sidebar-hover: rgba(255,255,255,0.05);
--hv-text: #e2e8f0;
--hv-text-muted: #94a3b8;
--hv-border: #1f2937;
--hv-border-soft: #1e293b;
--hv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--hv-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
--hv-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
--hv-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
}
/* ── Skip-Link (a11y) ─────────────────────────────────────────────────────
Fuer Tastatur-User: erstes fokussierbares Element auf der Seite, springt
in den Hauptinhalt und ueberspringt die Sidebar-Navigation.
────────────────────────────────────────────────────────────────────── */
.hv-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
background: var(--hv-primary, #5BB0D9);
color: #000;
padding: 0.6rem 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 6px 0;
}
.hv-skip-link:focus {
left: 0;
}
/* ── Basis ───────────────────────────────────────────────────────────────── */
html { font-family: var(--hv-font-sans); }
body {
background: var(--hv-bg);
color: var(--hv-text);
font-size: var(--hv-font-base);
font-family: var(--hv-font-sans);
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] body {
color-scheme: dark;
}
/* ── Layout-Wrapper ──────────────────────────────────────────────────────── */
.hv-wrapper {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.hv-sidebar {
width: var(--hv-sidebar-w);
background: var(--hv-sidebar-bg);
border-right: 1px solid var(--hv-sidebar-border);
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow: hidden; /* Scroll lebt jetzt im .hv-sidebar-nav, damit der */
z-index: 1040; /* Footer (Theme-Toggle, Einstellungen, Logout) */
display: flex; /* immer sichtbar bleibt — vorher scrollte der */
flex-direction: column; /* Footer mit weg sobald die Nav lang wurde. */
transition: background 0.2s ease, border-color 0.2s ease;
}
.hv-sidebar-brand {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-4) var(--sp-3);
color: var(--hv-text);
font-weight: 700;
font-size: 1rem;
border-bottom: 1px solid var(--hv-sidebar-border);
text-decoration: none;
flex-shrink: 0;
letter-spacing: -0.01em;
}
.hv-sidebar-brand i { font-size: 1.3rem; color: var(--hv-primary); }
.hv-sidebar-brand:hover { color: var(--hv-text); }
.hv-sidebar-nav {
flex: 1;
min-height: 0; /* fuer overflow-y in flex child */
overflow-y: auto;
overflow-x: hidden;
padding: var(--sp-2) var(--sp-2);
scrollbar-width: none;
}
.hv-sidebar-nav::-webkit-scrollbar { display: none; }
.hv-nav-section {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--hv-sidebar-muted);
text-transform: uppercase;
padding: 1.1rem var(--sp-3) 0.35rem;
user-select: none;
}
.hv-nav-label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--hv-sidebar-muted);
text-transform: uppercase;
padding: var(--sp-3) var(--sp-3) var(--sp-1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
transition: color 0.15s;
outline: none;
border-radius: var(--hv-radius-sm);
}
.hv-nav-label:hover { color: var(--hv-sidebar-text); }
.hv-nav-label:focus-visible { color: var(--hv-sidebar-active-text); }
.hv-nav-label .bi { font-size: 0.6rem; transition: transform 0.2s; }
.hv-nav-label.collapsed .bi { transform: rotate(-90deg); }
.hv-nav-group { overflow: hidden; }
.hv-nav-group.collapsed { display: none; }
.hv-nav-item {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 1px 0;
padding: 0.48rem 0.7rem;
color: var(--hv-sidebar-text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
border-radius: var(--hv-radius-sm);
transition: background 0.12s, color 0.12s;
white-space: nowrap;
}
.hv-nav-item i { font-size: 1rem; width: 1.1rem; flex-shrink: 0; color: var(--hv-sidebar-muted); transition: color 0.12s; }
.hv-nav-item:hover {
background: var(--hv-sidebar-hover);
color: var(--hv-text);
}
.hv-nav-item:hover i { color: var(--hv-sidebar-text); }
.hv-nav-item.active {
background: var(--hv-sidebar-active-bg);
color: var(--hv-sidebar-active-text);
font-weight: 600;
}
.hv-nav-item.active i { color: var(--hv-sidebar-active-text); }
.hv-nav-subitem {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 1px 0;
padding: 0.36rem 0.7rem 0.36rem 2.2rem;
color: var(--hv-sidebar-muted);
text-decoration: none;
font-size: var(--hv-font-sm);
border-radius: var(--hv-radius-sm);
transition: background 0.12s, color 0.12s;
}
.hv-nav-subitem i { font-size: 0.85rem; width: 1rem; flex-shrink: 0; }
.hv-nav-subitem:hover { background: var(--hv-sidebar-hover); color: var(--hv-sidebar-text); }
.hv-nav-subitem.active { color: var(--hv-sidebar-active-text); font-weight: 600; }
/* Sidebar-Badges */
.hv-nav-badge {
background: var(--hv-danger);
color: #fff;
font-size: 0.6rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 10px;
margin-left: auto;
line-height: 1.3;
min-width: 1.1rem;
text-align: center;
}
.hv-sidebar-footer {
padding: var(--sp-2);
border-top: 1px solid var(--hv-sidebar-border);
}
/* ── Topbar ──────────────────────────────────────────────────────────────── */
.hv-topbar {
height: var(--hv-topbar-h);
background: var(--hv-surface);
border-bottom: 1px solid var(--hv-border);
display: flex;
align-items: center;
padding: 0 var(--sp-5);
position: sticky;
top: 0;
z-index: 100;
gap: var(--sp-3);
}
.hv-hamburger {
background: none;
border: none;
padding: 0.3rem 0.5rem;
color: var(--hv-text);
cursor: pointer;
border-radius: var(--hv-radius-sm);
line-height: 1;
}
.hv-hamburger:hover { background: var(--hv-bg); }
/* Theme Toggle Button */
.hv-theme-toggle {
background: transparent;
border: 1px solid var(--hv-border);
color: var(--hv-text-muted);
width: 34px;
height: 34px;
border-radius: var(--hv-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
font-size: 1rem;
padding: 0;
flex-shrink: 0;
}
.hv-theme-toggle:hover {
background: var(--hv-bg);
color: var(--hv-text);
border-color: var(--hv-primary-light);
}
.hv-theme-toggle .bi-sun-fill { display: none; }
.hv-theme-toggle .bi-moon-stars-fill { display: inline-block; }
[data-theme="dark"] .hv-theme-toggle .bi-sun-fill { display: inline-block; }
[data-theme="dark"] .hv-theme-toggle .bi-moon-stars-fill { display: none; }
/* ── Haupt-Content ───────────────────────────────────────────────────────── */
.hv-content {
margin-left: var(--hv-sidebar-w);
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.hv-main {
flex: 1;
padding: var(--sp-5) var(--sp-6); /* 1.25rem 1.5rem — vorher 1.5/2rem, war zu breit auf schmalen Bildschirmen */
max-width: 100%;
min-width: 0; /* erlaubt flex-children zu shrinken */
}
/* Sidebar-Overlay (mobile) */
.hv-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1039;
}
.hv-overlay.show { display: block; }
/* ── Karten ──────────────────────────────────────────────────────────────── */
.card {
border-radius: var(--hv-radius-lg);
border: 1px solid var(--hv-border);
background: var(--hv-surface);
box-shadow: var(--hv-shadow-sm);
color: var(--hv-text);
transition: background 0.2s ease, border-color 0.2s ease;
}
.card-body { padding: var(--sp-6); }
.card-header {
border-radius: var(--hv-radius-lg) var(--hv-radius-lg) 0 0;
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px solid var(--hv-border-soft);
background: var(--hv-surface);
}
.card-header h6 { font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
/* ── Tabellen ────────────────────────────────────────────────────────────── */
.table {
color: var(--hv-text);
--bs-table-bg: transparent;
}
.table th {
font-size: var(--hv-font-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--hv-text-muted);
border-bottom-color: var(--hv-border);
}
.table td { border-bottom-color: var(--hv-border-soft); color: var(--hv-text); }
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr[data-href] { cursor: pointer; }
.table-hover tbody tr[data-href]:hover,
.table-hover > tbody > tr:hover > * { background: var(--hv-sidebar-hover); color: var(--hv-text); }
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
background: var(--hv-primary);
border-color: var(--hv-primary);
}
.btn-primary:hover,
.btn-primary:focus { background: #4338ca; border-color: #4338ca; }
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus { background: #6366f1; border-color: #6366f1; }
.btn-outline-secondary {
color: var(--hv-text-muted);
border-color: var(--hv-border);
}
.btn-outline-secondary:hover {
background: var(--hv-bg);
color: var(--hv-text);
border-color: var(--hv-border);
}
/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { font-weight: 500; }
/* ── Flash-Alerts ────────────────────────────────────────────────────────── */
.alert {
border-radius: var(--hv-radius-sm);
border-left: 4px solid;
font-size: 0.875rem;
}
.alert-success { border-left-color: var(--hv-success); }
.alert-danger { border-left-color: var(--hv-danger); }
.alert-warning { border-left-color: var(--hv-warning); }
.alert-info { border-left-color: var(--hv-accent); }
/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.hv-breadcrumb {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: var(--hv-font-sm);
color: var(--hv-text-muted);
margin-bottom: var(--sp-3);
}
.hv-breadcrumb a { color: var(--hv-text-muted); text-decoration: none; }
.hv-breadcrumb a:hover { color: var(--hv-secondary); }
.hv-breadcrumb .sep { opacity: 0.5; }
.hv-breadcrumb .current { color: var(--hv-text); font-weight: 500; }
/* ── KPI-Karten ──────────────────────────────────────────────────────────── */
.kpi-card { transition: transform 0.15s; }
.kpi-card:hover { transform: translateY(-2px); }
/* ── Heute-Kacheln (Dashboard) ───────────────────────────────────────────── */
.heute-tile { color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.heute-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); color: inherit; }
.kpi-primary { border-left: 4px solid var(--hv-primary); }
.kpi-primary i { color: var(--hv-primary); }
.kpi-success { border-left: 4px solid var(--hv-success); }
.kpi-success i { color: var(--hv-success); }
.kpi-warning { border-left: 4px solid var(--hv-warning); }
.kpi-warning i { color: var(--hv-warning); }
.kpi-danger { border-left: 4px solid var(--hv-danger); }
.kpi-danger i { color: var(--hv-danger); }
.kpi-neutral { border-left: 4px solid var(--hv-border); }
.kpi-neutral i { color: var(--hv-text-muted); }
/* ── Formulare ───────────────────────────────────────────────────────────── */
.form-label { font-size: var(--hv-font-sm); font-weight: 500; margin-bottom: 0.3rem; color: var(--hv-text); }
.form-control, .form-select {
font-size: 0.875rem;
border-color: var(--hv-border);
background: var(--hv-surface);
color: var(--hv-text);
}
.form-control:focus, .form-select:focus {
border-color: var(--hv-primary);
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
background: var(--hv-surface);
color: var(--hv-text);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background: var(--hv-bg);
border-color: var(--hv-border);
color: var(--hv-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--hv-text-muted); }
/* Validierungs-Marker: NUR nach Submit (Bootstrap-Konvention via .was-validated).
Vorher matcht :invalid sonst direkt nach Render — leere required-Felder
sehen dann aus wie Validierungsfehler, obwohl der User noch nichts getan hat. */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
border-color: var(--hv-danger);
background-image: none;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: var(--hv-success);
}
/* ── Leere Zustände ──────────────────────────────────────────────────────── */
.empty-state {
padding: var(--sp-8) var(--sp-4);
text-align: center;
color: var(--hv-text-muted);
}
.empty-state .bi {
font-size: 2.5rem;
opacity: 0.2;
display: block;
margin-bottom: var(--sp-2);
}
/* ── Fristen-Farben ──────────────────────────────────────────────────────── */
.frist-rot { color: var(--hv-danger); font-weight: 600; }
.frist-gelb { color: var(--hv-warning); }
.frist-gruen { color: var(--hv-success); }
/* ── btn-xs ──────────────────────────────────────────────────────────────── */
.btn-xs {
padding: 0.1rem 0.4rem;
font-size: var(--hv-font-xs);
border-radius: 0.2rem;
line-height: 1.4;
}
/* ── Jahresansicht Zahlungsgrid ──────────────────────────────────────────── */
.zahlungs-grid th, .zahlungs-grid td {
font-size: var(--hv-font-xs);
padding: 0.3rem 0.4rem;
white-space: nowrap;
}
.zelle-ok { background: rgba(22,163,74,0.13); color: #15803d; font-weight: 600; }
.zelle-teil { background: rgba(217,119,6,0.13); color: #b45309; }
.zelle-offen { background: rgba(220,53,69,0.1); color: #b91c1c; font-weight: 600; }
.zelle-leer { background: #f8f9fa; color: #adb5bd; }
/* ── Konfidenz-Import ────────────────────────────────────────────────────── */
tr.konfidenz-hoch { background: rgba(22,163,74,0.05); }
tr.konfidenz-mittel { background: rgba(217,119,6,0.07); }
tr.konfidenz-niedrig { background: rgba(220,53,69,0.05); }
/* ── Bulk Import ─────────────────────────────────────────────────────────── */
.import-progress-bar { transition: width 0.4s ease; }
.dropzone {
border: 2px dashed var(--hv-border);
border-radius: var(--hv-radius-sm);
padding: var(--sp-8);
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.dropzone:hover, .dropzone.drag-over {
border-color: var(--hv-secondary);
background: rgba(37,99,235,0.04);
}
/* ── Spinner Button ──────────────────────────────────────────────────────── */
.btn-loading .spinner-border { width: 0.85rem; height: 0.85rem; border-width: 0.15em; }
.btn-loading { cursor: wait !important; opacity: 0.85; }
/* ── KI-Agent-Live-Banner (agent-status.js) ──────────────────────────────── */
.hv-agent-banner {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem;
margin: 0 0 var(--sp-3, 12px) 0;
background: linear-gradient(90deg, #eff6ff, #f0f9ff);
border: 1px solid #bfdbfe;
border-radius: var(--hv-radius-sm, 6px);
color: #1e40af;
font-size: var(--hv-font-sm, 0.9rem);
}
.hv-agent-banner[hidden] { display: none; }
.hv-agent-banner .spinner-border {
width: 1rem;
height: 1rem;
border-width: 0.15em;
color: #2563eb;
}
.hv-agent-banner a {
color: #1e40af;
text-decoration: none;
font-weight: 600;
}
.hv-agent-banner a:hover { text-decoration: underline; }
[data-theme='dark'] .hv-agent-banner {
background: linear-gradient(90deg, #1e3a5f33, #0c4a6e33);
border-color: #1e40af55;
color: #93c5fd;
}
[data-theme='dark'] .hv-agent-banner a { color: #93c5fd; }
/* ── Toast-Container (window.feedback) ───────────────────────────────────── */
.hv-toast-container {
position: fixed;
top: var(--sp-3, 12px);
right: var(--sp-3, 12px);
z-index: 2050;
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(420px, calc(100vw - 24px));
pointer-events: none;
}
.hv-toast {
pointer-events: auto;
margin: 0;
padding: 0.6rem 0.85rem;
border-radius: var(--hv-radius-sm, 6px);
font-size: var(--hv-font-sm, 0.9rem);
opacity: 0;
transform: translateX(20px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.hv-toast .btn-close {
font-size: 0.7rem;
padding: 0.25rem;
margin-top: 0.05rem;
}
.hv-toast .spinner-border {
width: 1rem;
height: 1rem;
border-width: 0.15em;
margin-top: 0.15rem;
}
.hv-toast .bi {
font-size: 1.05rem;
line-height: 1.2;
}
@media (max-width: 575.98px) {
.hv-toast-container {
top: 8px;
right: 8px;
left: 8px;
max-width: none;
}
}
/* ── Responsive: Mobile ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.hv-sidebar {
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.hv-sidebar.open { transform: translateX(0); }
.hv-content { margin-left: 0; }
.hv-topbar { display: flex; }
.hv-main { padding: var(--sp-4); }
h1.h3 { font-size: var(--hv-font-lg); }
.table-responsive { font-size: var(--hv-font-sm); }
}
/* ── Responsive: Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
.hv-sidebar {
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.hv-sidebar.open { transform: translateX(0); }
.hv-content { margin-left: 0; }
.hv-topbar { display: flex; }
.hv-main { padding: var(--sp-4) var(--sp-5); }
.hv-overlay.show { display: block; }
}
/* ── Responsive: Desktop ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
.hv-topbar { display: none; }
}
/* ── Globale Suche ───────────────────────────────────────────────────────── */
.hv-search-trigger {
display: flex;
align-items: center;
gap: var(--sp-2);
width: calc(100% - var(--sp-3) * 2);
margin: var(--sp-2) var(--sp-3);
padding: 0.45rem 0.7rem;
background: var(--hv-bg);
border: 1px solid var(--hv-border);
border-radius: var(--hv-radius-sm);
color: var(--hv-text-muted);
font-size: var(--hv-font-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hv-search-trigger:hover {
background: var(--hv-surface);
color: var(--hv-text);
border-color: var(--hv-primary-light);
}
.hv-search-trigger .bi { font-size: 0.9rem; }
.hv-search-kbd {
margin-left: auto;
background: var(--hv-surface);
border: 1px solid var(--hv-border);
border-radius: 4px;
padding: 0.05rem 0.35rem;
font-size: 0.6rem;
letter-spacing: 0.05em;
color: var(--hv-text-muted);
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.hv-search-overlay {
position: fixed;
inset: 0;
background: rgba(15,23,42,0.55);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
backdrop-filter: blur(4px);
}
[data-theme="dark"] .hv-search-overlay { background: rgba(0,0,0,0.7); }
.hv-search-container {
background: var(--hv-surface);
border: 1px solid var(--hv-border);
border-radius: var(--hv-radius-lg);
box-shadow: var(--hv-shadow-xl);
width: min(600px, 92vw);
overflow: hidden;
}
.hv-search-input-wrap {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4);
border-bottom: 1px solid var(--hv-border);
}
.hv-search-icon {
font-size: 1.2rem;
color: var(--hv-text-muted);
flex-shrink: 0;
}
.hv-search-input {
flex: 1;
border: none;
outline: none;
font-size: 1rem;
color: var(--hv-text);
background: transparent;
}
.hv-search-input::placeholder { color: var(--hv-text-muted); }
.hv-search-esc-hint {
flex-shrink: 0;
border: 1px solid var(--hv-border);
border-radius: 4px;
padding: 0.1rem 0.4rem;
font-size: 0.65rem;
color: var(--hv-text-muted);
font-family: monospace;
}
.hv-search-results {
max-height: 360px;
overflow-y: auto;
}
.hv-search-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0.65rem var(--sp-4);
color: var(--hv-text);
text-decoration: none;
border-bottom: 1px solid var(--hv-border);
transition: background 0.1s;
}
.hv-search-item:last-child { border-bottom: none; }
.hv-search-item:hover, .hv-search-item.active {
background: var(--hv-bg);
color: var(--hv-text);
}
.hv-search-item i { font-size: 1rem; flex-shrink: 0; }
.hv-search-item-title { flex: 1; font-size: var(--hv-font-base); }
.hv-search-item-title mark {
background: #fef08a;
border-radius: 2px;
padding: 0 2px;
}
.hv-search-item-typ {
font-size: var(--hv-font-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.hv-search-empty {
padding: var(--sp-6) var(--sp-4);
text-align: center;
color: var(--hv-text-muted);
font-size: var(--hv-font-sm);
}
/* Recent-Items in der Sidebar (Polish-Hebel 5) */
.hv-nav-recent-titel {
display: inline-block;
max-width: 14rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
/* System-Status-Footer (Polish-Hebel 6) — fixed Bottom-Strip */
.hv-status-strip {
position: fixed;
bottom: 0;
left: var(--hv-sidebar-w, 240px);
right: 0;
height: 26px;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.85rem;
background: var(--hv-bg-elevated, var(--hv-surface, #f7f7f7));
border-top: 1px solid var(--hv-border);
font-family: var(--hv-font-mono, ui-monospace, monospace);
font-size: 0.72rem;
color: var(--hv-text-muted);
z-index: 90;
pointer-events: auto;
user-select: none;
}
.hv-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: #94a3b8;
box-shadow: 0 0 0 2px rgba(148, 163, 184, .15);
transition: background-color .2s, box-shadow .2s;
}
.hv-status-strip[data-ampel="gruen"] .hv-status-dot {
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,.18);
}
.hv-status-strip[data-ampel="gelb"] .hv-status-dot {
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245,158,11,.2);
}
.hv-status-strip[data-ampel="rot"] .hv-status-dot {
background: #ef4444;
box-shadow: 0 0 0 2px rgba(239,68,68,.22);
/* S-STRIP: nur kurz pulsen (Aufmerksamkeit), dann ruhig rot bleiben — kein
Dauer-Alarm/Banner-Blindness. Rot-Farbe bleibt; nur die Animation endet. */
animation: hv-status-pulse 1.6s ease-in-out 6;
}
@keyframes hv-status-pulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,.22); }
50% { box-shadow: 0 0 0 5px rgba(239,68,68,.10); }
}
.hv-status-label { font-weight: 700; color: var(--hv-text); }
.hv-status-detail { color: var(--hv-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 992px) {
.hv-status-strip { left: 0; }
}
/* Content-Bereich braucht etwas Luft, damit der Status-Strip nichts überdeckt */
.hv-main { padding-bottom: 36px; }
/* Command-Palette: Gruppen-Header (Tun / Springen / Suchen) und Sub-Hinweise */
.hv-search-group-label {
padding: 0.55rem var(--sp-4) 0.35rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hv-text-muted);
background: var(--hv-bg);
border-bottom: 1px solid var(--hv-border);
position: sticky;
top: 0;
z-index: 1;
}
.hv-search-item-title {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.hv-search-item-sub {
font-size: 0.72rem;
color: var(--hv-text-muted);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hv-search-footer {
display: flex;
gap: var(--sp-4);
padding: var(--sp-2) var(--sp-4);
border-top: 1px solid var(--hv-border);
background: var(--hv-bg);
font-size: var(--hv-font-xs);
color: var(--hv-text-muted);
}
.hv-search-footer kbd {
display: inline-block;
background: #fff;
border: 1px solid var(--hv-border);
border-radius: 3px;
padding: 0 4px;
font-size: 0.65rem;
font-family: monospace;
line-height: 1.6;
}
/* ── Sortierbare Tabellen ─────────────────────────────────────────────────── */
table[data-sortable] thead th,
table.table-sortable thead th {
user-select: none;
white-space: nowrap;
}
table[data-sortable] thead th::after,
table.table-sortable thead th::after {
content: ' ⇅';
font-size: 0.65rem;
opacity: 0.35;
}
table[data-sortable] thead th.sort-asc::after,
table.table-sortable thead th.sort-asc::after {
content: ' ↑';
opacity: 0.8;
color: var(--hv-secondary);
}
table[data-sortable] thead th.sort-desc::after,
table.table-sortable thead th.sort-desc::after {
content: ' ↓';
opacity: 0.8;
color: var(--hv-secondary);
}
/* ── Dark Mode: Bootstrap-Komponenten ────────────────────────────────────── */
[data-theme="dark"] .modal-content {
background: var(--hv-surface);
border: 1px solid var(--hv-border);
color: var(--hv-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
border-color: var(--hv-border);
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .dropdown-menu {
background: var(--hv-surface);
border-color: var(--hv-border);
color: var(--hv-text);
box-shadow: var(--hv-shadow-lg);
}
[data-theme="dark"] .dropdown-item { color: var(--hv-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
background: var(--hv-sidebar-hover);
color: var(--hv-text);
}
[data-theme="dark"] .list-group-item {
background: var(--hv-surface);
border-color: var(--hv-border);
color: var(--hv-text);
}
[data-theme="dark"] .nav-tabs {
border-bottom-color: var(--hv-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
color: var(--hv-text-muted);
border: none;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
background: transparent;
color: var(--hv-primary);
border-bottom: 2px solid var(--hv-primary);
}
[data-theme="dark"] .alert-success { background: rgba(16,185,129,0.12); color: #6ee7b7; border-left-color: var(--hv-success); }
[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border-left-color: var(--hv-danger); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.12); color: #fcd34d; border-left-color: var(--hv-warning); }
[data-theme="dark"] .alert-info { background: rgba(99,102,241,0.12); color: #c7d2fe; border-left-color: var(--hv-accent); }
[data-theme="dark"] .text-muted { color: var(--hv-text-muted) !important; }
[data-theme="dark"] .border { border-color: var(--hv-border) !important; }
[data-theme="dark"] .bg-light { background: var(--hv-bg) !important; color: var(--hv-text); }
[data-theme="dark"] .bg-white { background: var(--hv-surface) !important; color: var(--hv-text); }
[data-theme="dark"] a { color: var(--hv-primary); }
[data-theme="dark"] a:hover { color: var(--hv-primary-light); }
[data-theme="dark"] .hv-breadcrumb a { color: var(--hv-text-muted); }
[data-theme="dark"] .table-hover tbody tr[data-href]:hover { background: var(--hv-sidebar-hover); }
[data-theme="dark"] .kpi-neutral { border-left-color: var(--hv-border); }
[data-theme="dark"] .zelle-leer { background: rgba(255,255,255,0.03); color: var(--hv-text-muted); }
/* ── Print ─────────────────────────────────────────────────────────────────
Wir zwingen den Print-Output auf weisses Papier mit schwarzem Text,
unabhaengig vom aktiven Theme. Vorher hat das Industrial-Dark-Theme
die Print-Regeln dominiert (schwarzer Hintergrund -> Tinten-Verschwendung
und Lesbarkeitsproblem). Reihenfolge der Selektoren ist wichtig: erst
alles platt machen, dann gezielt Borders/Strukturen wieder zulassen.
────────────────────────────────────────────────────────────────────── */
@media print {
/* Off-Canvas-/Navigation-Komponenten verschwinden */
.hv-sidebar, .hv-topbar, .hv-overlay,
.hv-sidebar-footer, .btn, .hv-hamburger,
form, .hv-breadcrumb, .alert-dismissible,
.ind-head .actions, .hv-search-trigger,
.fab-whatsapp, .cookie-banner, .sticky-cta-mobile { display: none !important; }
/* Theme komplett uebersteuern: weiss + schwarz, egal ob data-theme=dark */
html, html[data-theme="dark"], html[data-theme="light"],
body, .hv-wrapper, .hv-content, .hv-main {
background: #FFFFFF !important;
color: #000000 !important;
}
/* Alle Karten / Surfaces auf Papier-Weiss, schwarzer Text */
.card, .ind-card, .karte, article, section,
.ind-grid, .ind-tasks, .ind-task, .ind-stream {
background: #FFFFFF !important;
color: #000000 !important;
box-shadow: none !important;
border: 1px solid #CCCCCC !important;
break-inside: avoid;
}
.hv-content { margin-left: 0 !important; }
.hv-main { padding: 0 !important; }
.table th, .table td { color: #000 !important; background: transparent !important; }
.table th { font-size: 0.7rem; }
.table td { font-size: 0.8rem; }
/* Tabellen-Header pro Seite wiederholen, Zeilen nicht mitten durchschneiden */
.table thead, thead { display: table-header-group; }
.table tr, table tr { page-break-inside: avoid; break-inside: avoid; }
body { font-size: 0.8rem; }
a, a * { color: #000 !important; text-decoration: underline; }
.badge { border: 1px solid #999 !important; background: none !important; color: #000 !important; }
/* Status-Farben dezent erhalten — Text-Farbe darf bleiben (semantisch),
aber kein Block-Background. */
.text-success, .saldo-positiv { color: #15803D !important; }
.text-danger, .saldo-negativ { color: #B91C1C !important; }
.text-warning { color: #B45309 !important; }
.text-muted { color: #555555 !important; }
/* Page-Setup: DIN A4 mit asymmetrischen Rändern (oben/unten 1.8cm, seitlich 2cm) */
@page { size: A4; margin: 1.8cm 2cm; }
}
/* ──────────────────────────────────────────────────────────────────
Pflichtfeld-Marker — global
Markiert Labels neben einem [required]-Input/Select/Textarea mit *.
Eingefuehrt 2026-04-30: war pro Form inkonsistent (manche hatten *,
manche nicht). Diese Regel macht es einheitlich, ohne 30+ Templates
anfassen zu muessen.
────────────────────────────────────────────────────────────────── */
/* Direkte Sibling-Selektoren: |