/* ============================================================================ fima24 v2 — Design-System (Horizon-UI-Stil) Modernes CSS ohne Framework: Custom Properties, Grid/Flexbox, automatischer + manueller Dark Mode, mobile Bottom-Navigation. ========================================================================== */ /* DM Sans (selbst gehostet, variabler Font) — keine externen CDNs */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/assets/fonts/dmsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/assets/fonts/dmsans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* DM Sans / Inter werden genutzt, sobald als Webfont vorhanden; sonst System-Stack */ --font: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; /* Horizon-UI-Palette */ --bg: #f4f7fe; --surface: #ffffff; --surface-2: #f4f7fe; --border: #e0e5f2; --text: #1b2559; --text-muted: #a3aed0; --accent: #4318ff; --accent-2: #868cff; --accent-hover: #3311db; --accent-soft: #ece8ff; --gradient: linear-gradient(135deg, #868cff 0%, #4318ff 100%); --positive: #01b574; --negative: #ee5d50; --warning: #ffb547; --shadow: 0 18px 40px rgb(112 144 176 / .12); --shadow-lg: 0 24px 60px rgb(112 144 176 / .22); --radius: 20px; --radius-sm: 14px; --sidebar-w: 250px; } [data-theme="dark"] { --bg: #0a0b0d; --surface: #16181d; --surface-2: #1e2127; --border: #2b2f37; --text: #f2f3f5; --text-muted: #98a0ad; --accent: #8b7bff; --accent-2: #a98aff; --accent-hover: #a290ff; --accent-soft: #221f33; --gradient: linear-gradient(135deg, #8b7bff 0%, #6d5efc 100%); --positive: #1ed79b; --negative: #fb7185; --warning: #fbbf24; --shadow: 0 18px 40px rgb(0 0 0 / .55); --shadow-lg: 0 24px 60px rgb(0 0 0 / .7); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0b0d; --surface: #16181d; --surface-2: #1e2127; --border: #2b2f37; --text: #f2f3f5; --text-muted: #98a0ad; --accent: #8b7bff; --accent-2: #a98aff; --accent-hover: #a290ff; --accent-soft: #221f33; --gradient: linear-gradient(135deg, #8b7bff 0%, #6d5efc 100%); --positive: #1ed79b; --negative: #fb7185; --warning: #fbbf24; --shadow: 0 18px 40px rgb(0 0 0 / .55); --shadow-lg: 0 24px 60px rgb(0 0 0 / .7); } } /* Wählbare Akzentfarbe (data-accent auf ) */ [data-accent="teal"] { --accent: #0d9488; --accent-2: #14b8a6; --accent-hover: #0b7e74; --accent-soft: #d6f3ef; --gradient: linear-gradient(120deg, #0d9488, #2dd4bf); } [data-accent="violet"] { --accent: #7c5cff; --accent-2: #a78bfa; --accent-hover: #6a49f0; --accent-soft: #eae5ff; --gradient: linear-gradient(120deg, #7c5cff, #a78bfa); } [data-accent="green"] { --accent: #1e9e6a; --accent-2: #34d399; --accent-hover: #18865a; --accent-soft: #def0e7; --gradient: linear-gradient(120deg, #1e9e6a, #34d399); } [data-accent="orange"] { --accent: #e07b1a; --accent-2: #fb923c; --accent-hover: #c76a12; --accent-soft: #fdecd9; --gradient: linear-gradient(120deg, #e07b1a, #fb923c); } [data-accent="rose"] { --accent: #e0467e; --accent-2: #fb7185; --accent-hover: #cc386e; --accent-soft: #fce0eb; --gradient: linear-gradient(120deg, #e0467e, #fb7185); } [data-theme="dark"][data-accent="teal"] { --accent-soft: #0c3b37; } [data-theme="dark"][data-accent="violet"] { --accent-soft: #2a2350; } [data-theme="dark"][data-accent="green"] { --accent-soft: #123528; } [data-theme="dark"][data-accent="orange"] { --accent-soft: #3a2710; } [data-theme="dark"][data-accent="rose"] { --accent-soft: #3a1626; } * { box-sizing: border-box; } html { font-size: 16px; } /* Skeleton-Loading (Shimmer) */ .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); color: transparent !important; min-height: 1em; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .accent-swatches { display: flex; gap: .6rem; flex-wrap: wrap; } .accent-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .accent-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; } .accent-swatch.sw-blue { background: #4318ff; } .accent-swatch.sw-teal { background: #0d9488; } .accent-swatch.sw-violet { background: #7c5cff; } .accent-swatch.sw-green { background: #1e9e6a; } .accent-swatch.sw-orange { background: #e07b1a; } .accent-swatch.sw-rose { background: #e0467e; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* SVG-Icons (Logo/Sprite) */ svg.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Font-Awesome-Icons */ i.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; font-size: 1rem; line-height: 1; flex-shrink: 0; } .btn i.icon { width: auto; min-width: 1em; font-size: .92em; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } } @keyframes backdrop-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------------------------------------------------------------- Layout */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1rem .75rem; gap: 1rem; z-index: 20; } .brand { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; color: var(--text); padding: .25rem .5rem; } .brand:hover { text-decoration: none; } .brand .icon { width: 1.7rem; height: 1.7rem; color: var(--accent); } .brand span { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .sidebar-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; } .nav-link { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .95rem; font-weight: 500; width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; } .nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-link.active::before { content: ""; position: absolute; left: -.4rem; top: 18%; bottom: 18%; width: 4px; border-radius: 4px; background: var(--gradient); } .sidebar-footer { display: flex; flex-direction: column; gap: .15rem; } .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: .8rem .75rem .3rem; } .nav-link-sm { font-size: .85rem; padding: .45rem .75rem; } .nav-link-sm i.icon { font-size: .85rem; color: var(--warning); } .layout-main { margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100dvh; } .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .page-title { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing: -.02em; } /* Globale Suche (Topbar) */ .topbar-search { position: relative; flex: 1; max-width: 460px; margin: 0 1rem; } .topbar-search__icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .topbar-search__icon i.icon { width: auto; font-size: .95rem; } .topbar-search input { width: 100%; padding-left: 2.4rem; border-radius: 999px; background: var(--surface); } .topbar-search__results { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .4rem; z-index: 40; max-height: 70vh; overflow: auto; } .topbar-search__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: .5rem .6rem .2rem; } .topbar-search__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text); } .topbar-search__item:hover { background: var(--surface-2); text-decoration: none; } .topbar-search__item .muted { color: var(--text-muted); font-size: .8rem; white-space: nowrap; } .topbar-search__empty { padding: .8rem .6rem; color: var(--text-muted); font-size: .88rem; } @media (max-width: 700px) { .topbar-search { display: none; } } /* Benutzer-Menü (Dropdown oben rechts) */ .user-menu { position: relative; } .user-menu__trigger { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .8rem .3rem .35rem; cursor: pointer; color: var(--text); font: inherit; box-shadow: var(--shadow); transition: background-color .15s ease; } .user-menu__trigger:hover { background: var(--surface-2); } .user-menu__avatar { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient); color: #fff; } .user-menu__avatar i.icon { width: auto; font-size: 1rem; } .user-menu__name { font-size: .9rem; font-weight: 600; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu__caret { font-size: .7rem; color: var(--text-muted); transition: transform .15s ease; } .user-menu.open .user-menu__caret { transform: rotate(180deg); } .user-menu__dropdown { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .4rem; display: none; z-index: 30; } .user-menu.open .user-menu__dropdown { display: block; animation: pop-in .15s ease both; } .user-menu__item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .7rem; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; } .user-menu__item:hover { background: var(--surface-2); text-decoration: none; } .user-menu__item--danger:hover { color: var(--negative); } .user-menu__item i.icon { width: 1.2rem; color: var(--text-muted); } .user-menu__form { margin: 0; } .user-menu__section { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: .5rem .7rem .2rem; } .user-menu__sep { height: 1px; background: var(--border); margin: .4rem 0; } /* Banner beim Ansehen eines freigegebenen Kontos */ .acting-banner { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .25rem 2rem 0; padding: .6rem 1rem; background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; } .acting-banner span { flex: 1; } .acting-banner i.icon { color: var(--warning); } @media (max-width: 900px) { .acting-banner { margin: .25rem .9rem 0; } } /* Volle Bildschirmbreite */ .content { padding: .25rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; width: 100%; } .content > * { animation: fade-up .35s ease both; } .content > *:nth-child(2) { animation-delay: .04s; } .content > *:nth-child(3) { animation-delay: .08s; } .content > *:nth-child(4) { animation-delay: .12s; } .content > *:nth-child(5) { animation-delay: .16s; } .bottomnav { display: none; } @media (max-width: 900px) { .sidebar { display: none; } .layout-main { margin-left: 0; } .content { padding: .25rem .9rem 5.5rem; } .topbar { padding: .9rem; } .bottomnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0 0; background: var(--surface); border-top: 1px solid var(--border); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); z-index: 20; } .bottomnav-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .65rem; color: var(--text-muted); padding: .35rem 0 .25rem; border-radius: var(--radius-sm); transition: color .15s ease; } .bottomnav-link.active { color: var(--accent); } .bottomnav-link.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gradient); } .bottomnav-link:hover { text-decoration: none; } } /* ---------------------------------------------------------------- Karten */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; transition: box-shadow .2s ease, border-color .2s ease; } .card:hover { box-shadow: 0 4px 14px rgb(16 24 40 / .09), 0 1px 3px rgb(16 24 40 / .06); } .card-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); margin: 0 0 .75rem; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .card-header .card-title { margin: 0; } /* Dashboard-Hero (Begrüßung) */ .hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 1.9rem; border-radius: var(--radius); background: var(--gradient); color: #fff; box-shadow: var(--shadow-lg); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 200px at 90% -40%, rgb(255 255 255 / .25), transparent 70%); pointer-events: none; } .hero-text { position: relative; z-index: 1; } .hero-eyebrow { margin: 0; font-size: .85rem; font-weight: 500; opacity: .9; text-transform: capitalize; } .hero-title { margin: .25rem 0 .35rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; } .hero-sub { margin: 0; font-size: .95rem; opacity: .92; } .hero-illo { position: relative; z-index: 1; width: 160px; flex-shrink: 0; color: #fff; } .hero-illo svg { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .hero { padding: 1.3rem; } .hero-illo { display: none; } .hero-title { font-size: 1.4rem; } } .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-label { color: var(--text-muted); font-size: .85rem; } .stat-card { display: flex; align-items: center; gap: 1rem; } .stat-icon { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; } .stat-icon i.icon { width: auto; } .stat-icon.income { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); box-shadow: none; } .stat-icon.expense { background: color-mix(in srgb, var(--negative) 16%, transparent); color: var(--negative); box-shadow: none; } .amount { font-variant-numeric: tabular-nums; white-space: nowrap; } .amount.pos { color: var(--positive); } .amount.neg { color: var(--negative); } /* ---------------------------------------------------------------- Tabellen */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data th { text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: .55rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; } table.data tbody tr { transition: background .15s ease; } table.data tbody tr:hover { background: var(--surface-2); } table.data td.num, table.data th.num { text-align: right; } table.data .muted { color: var(--text-muted); font-size: .8rem; } /* ---------------------------------------------------------------- Formulare */ .form-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .field { display: flex; flex-direction: column; gap: .3rem; } .field > label { font-size: .8rem; font-weight: 600; color: var(--text-muted); } .field.span-2 { grid-column: span 2; } .field.field-end { align-self: end; } .form-note { margin: 0; padding: .55rem .7rem; border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: .85rem; } .form-note.span-2 { grid-column: 1 / -1; } input, select, textarea { font-family: inherit; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .7rem; width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } input[type="checkbox"] { width: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: inherit; font-size: .92rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; padding: .6rem 1.25rem; cursor: pointer; background: var(--accent); color: #fff; white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent); transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; } .btn:hover { background: var(--accent-hover); text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent); } .btn svg.icon { width: 1.05rem; height: 1.05rem; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; } .btn-secondary:hover { background: var(--surface-2); box-shadow: none; } .btn-danger { background: var(--negative); box-shadow: 0 6px 18px color-mix(in srgb, var(--negative) 22%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--negative) 88%, #000); box-shadow: 0 10px 24px color-mix(in srgb, var(--negative) 32%, transparent); } .btn-ghost { background: none; color: var(--text-muted); padding: .35rem .45rem; box-shadow: none; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: none; } .btn-sm { font-size: .8rem; padding: .35rem .7rem; } /* ---------------------------------------------------------------- Badges & Tabs */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; background: var(--accent-soft); color: var(--accent); } .badge.green { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); } .badge.red { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); } .badge.gray { background: var(--surface-2); color: var(--text-muted); } .badge.yellow { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); } .badge-invoice { margin-left: .4rem; background: var(--accent-soft); color: var(--accent); font-weight: 600; vertical-align: middle; } .badge-invoice i.icon { font-size: .7rem; width: auto; } .ocr-text { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; background: var(--surface-2); padding: .6rem; border-radius: var(--radius-sm); font-size: .8rem; margin: .4rem 0 0; } .flash-message { border-left: 4px solid var(--accent); font-weight: 500; } .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; } .tab { padding: .6rem 1rem; font-size: .9rem; font-weight: 600; color: var(--text-muted); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-up .25s ease both; } /* ---------------------------------------------------------------- Filterleiste */ .filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; } .filterbar .field { min-width: 150px; flex: 0 1 auto; } .filterbar .grow { flex: 1 1 220px; } /* ---------------------------------------------------------------- Toasts */ .toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; } .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .7rem 1rem; max-width: 340px; animation: toast-in .2s ease-out; } .toast.success { border-left-color: var(--positive); } .toast.error { border-left-color: var(--negative); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 900px) { .toasts { bottom: calc(4.5rem + env(safe-area-inset-bottom)); left: 1rem; } } /* ---------------------------------------------------------------- Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgb(8 12 20 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; animation: backdrop-in .15s ease both; } .modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; padding: 1.5rem; animation: pop-in .2s ease both; } .modal h2 { margin: 0 0 1rem; font-size: 1.15rem; } .modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; } /* ---------------------------------------------------------------- Auth (Login/Registrierung/…) */ .auth-page { min-height: 100dvh; background: radial-gradient(circle 460px at 12% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(circle 420px at 88% 82%, color-mix(in srgb, var(--positive) 11%, transparent), transparent 60%), var(--bg); background-attachment: fixed; } .auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; max-width: 1440px; margin: 0 auto; } /* Hero (links) */ .auth-hero { display: flex; flex-direction: column; justify-content: center; padding: 3rem 3.5rem; gap: 1rem; } .auth-hero .brand { font-size: 1.6rem; padding: 0; margin-bottom: 1.5rem; } .auth-hero h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; margin: 0; max-width: 30ch; letter-spacing: -.01em; } .auth-hero .lead { font-size: 1.1rem; color: var(--text-muted); margin: 0; max-width: 42ch; line-height: 1.6; } .auth-features { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .auth-features li { display: flex; align-items: center; gap: .75rem; color: var(--text); font-size: .95rem; } .auth-features .tick { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); font-size: .7rem; } /* Stage + Karte (rechts) */ .auth-stage { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .auth-card { width: min(440px, 100%); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; animation: pop-in .3s ease both; } .auth-card__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; } .auth-card__icon { width: 3.4rem; height: 3.4rem; border-radius: 16px; margin-bottom: .3rem; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient); color: #fff; font-size: 1.4rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); } .auth-card__icon i.icon { width: auto; } .auth-card h2 { margin: 0; font-size: 1.4rem; } .auth-card__sub { margin: 0; color: var(--text-muted); font-size: .9rem; } /* SSO-Buttons */ .auth-sso { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .6rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; transition: background .15s ease, border-color .15s ease; } .auth-sso:hover { background: var(--surface-2); border-color: var(--accent); text-decoration: none; } .auth-sso i { font-size: 1.1rem; width: 1.2rem; text-align: center; } .auth-sso--google i { color: #ea4335; } .auth-sso--microsoft i { color: #0078d4; } .auth-sso--apple i { color: var(--text); } .auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Input mit Icon-Präfix */ .input-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input-group .prefix { display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; color: var(--text-muted); background: var(--surface-2); } .input-group input { border: 0; border-radius: 0; } .input-group input:focus { outline: none; box-shadow: none; } .auth-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; } .auth-links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-muted); } .auth-links a:hover { color: var(--accent); } .auth-links form { display: inline; } .btn-link-plain { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; } .btn-link-plain:hover { color: var(--accent); } .btn-block { width: 100%; } .auth-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; font-weight: 700; justify-content: center; } .auth-brand .icon { width: 2rem; height: 2rem; color: var(--accent); } .auth-brand i.icon { width: auto; font-size: 1.7rem; } .auth-error { background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .9rem; } .auth-note { background: color-mix(in srgb, var(--positive) 12%, transparent); color: var(--positive); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .9rem; } /* Rechtslinks als Fußzeile innerhalb der Auth-Karte (rechts), nicht am Seitenende */ .auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .78rem; } .auth-legal a { color: var(--text-muted); } .auth-legal a:hover { color: var(--accent); } .legal-page { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; } .legal-page .brand { font-size: 1.4rem; } .legal-content { line-height: 1.6; } .legal-content h1 { font-size: 1.6rem; margin: 0 0 1rem; } .legal-content h2 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; } .legal-content ul { padding-left: 1.2rem; } .legal-links { text-align: center; font-size: .85rem; color: var(--text-muted); } .legal-links a { color: var(--text-muted); } .legal-links a:hover { color: var(--accent); } @media (max-width: 920px) { .auth-shell { grid-template-columns: 1fr; } .auth-hero { padding: 2.5rem 1.5rem 0; text-align: center; align-items: center; } .auth-features { display: none; } .auth-stage { padding: 1.5rem; } } /* ---------------------------------------------------------------- Diverses */ .empty { text-align: center; color: var(--text-muted); padding: 2.5rem 1rem; } .empty .icon { width: 2.2rem; height: 2.2rem; margin-bottom: .5rem; } .empty i.icon { width: auto; font-size: 2rem; opacity: .55; } .list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .list-plain li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); } .list-plain li:last-child { border-bottom: 0; } .row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .muted { color: var(--text-muted); } .text-center { text-align: center; margin: 0; } .small { font-size: .82rem; } .mt { margin-top: 1rem; } .hidden { display: none !important; } hr.sep { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; } .object-card { display: flex; flex-direction: column; gap: .4rem; transition: border-color .2s ease, box-shadow .2s ease; } .object-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow-lg); } .object-card .row { color: var(--text); } .object-card h3 { margin: 0; font-size: 1.02rem; } .object-card .type-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .object-card .type-icon i.icon { font-size: 1.05rem; width: auto; } .chart-box { width: 100%; overflow: hidden; } .chart-box svg { display: block; width: 100%; height: auto; } .pagination { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-top: 1rem; } .pagination .page-jump { width: 4.5rem; text-align: center; padding: .35rem .4rem; } /* FinTS */ .tan-image { max-width: 240px; border: 1px solid var(--border); border-radius: var(--radius-sm); } /* Rechnungs-Dialog */ .invoice-modal { width: min(960px, 100%); } .invoice-modal .num-input { max-width: 90px; text-align: right; } .invoice-modal table.data td { padding: .3rem .35rem; } /* Buchungs-Intelligenz: Vorschläge aus der Historie */ .suggest-box { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, transparent); } .suggest-box h3 { margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--accent); } .suggest-box .list-plain li { border-bottom-color: color-mix(in srgb, var(--accent) 20%, transparent); } /* Mieteingangs-Matrix */ td.rent-paid { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); font-weight: 600; } td.rent-due { background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); } td.rent-none { color: var(--text-muted); } td.rent-assignable { cursor: pointer; } td.rent-assignable:hover { outline: 2px solid var(--accent); outline-offset: -2px; } /* ============================================================================ UI-Politur — animierte Diagramme, Empty-States, Mikrointeraktionen (globale Einblendungen/Hover sind oben definiert; hier nur Ergänzungen) ========================================================================== */ @keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes draw-in { to { stroke-dashoffset: 0; } } @keyframes area-fade { from { opacity: 0; } to { opacity: .12; } } /* Karten: dezenter Schatten beim Hovern (kein Positionswechsel) */ .card:hover { box-shadow: var(--shadow-lg); } /* Chart-Animationen (Klassen werden in charts.js gesetzt) */ .chart-bar--pos, .chart-bar--neg { transform-box: fill-box; animation: bar-grow .55s cubic-bezier(.22,1,.36,1) both; } .chart-bar--pos { transform-origin: bottom; } .chart-bar--neg { transform-origin: top; } .chart-area { animation: area-fade .8s ease both; } .chart-line--animate { animation: draw-in .9s ease-out forwards; } .chart-arc { animation: draw-in .8s ease-out both; } /* Empty-State: freundlicher Platzhalter statt nackter „Keine Einträge"-Zeile */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.4rem 1rem; text-align: center; color: var(--text-muted); animation: pop-in .35s ease both; } .empty-state .empty-illo { width: 96px; height: 96px; color: var(--accent); } .empty-state .empty-illo svg { width: 100%; height: 100%; display: block; } .empty-state .empty-illo i.icon { font-size: 48px; width: auto; } .empty-state .empty-title { font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: -.01em; } .empty-state .empty-text { font-size: .88rem; max-width: 34ch; line-height: 1.5; } td > .empty-state { padding: 1.8rem 1rem; } /* 2FA-Einrichtung: QR-Code + Schritte */ .totp-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: .5rem 0 1rem; } .totp-qr { flex-shrink: 0; width: 168px; height: 168px; padding: 10px; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } .totp-qr img, .totp-qr canvas { display: block; width: 100%; height: 100%; } .totp-setup ol { margin: 0; flex: 1 1 240px; } .totp-setup code { font-family: var(--mono); font-size: .85rem; word-break: break-all; } /* Dokumentation (/docs) */ .docs { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; } .docs-nav { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: .15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); max-height: calc(100dvh - 7rem); overflow: auto; } .docs-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .9rem; } .docs-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .docs-nav a i.icon { width: 1.1rem; color: var(--accent); } .docs-body { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .docs-section { scroll-margin-top: 5rem; } .docs-section h1 { font-size: 1.6rem; } .docs-section h2 { font-size: 1.25rem; margin-top: 0; } .docs-section h3 { font-size: 1rem; margin: 1rem 0 .3rem; color: var(--accent); } .docs-section .lead { font-size: 1.05rem; color: var(--text-muted); } .docs-section code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .1rem .35rem; border-radius: 6px; } @media (max-width: 800px) { .docs { grid-template-columns: 1fr; } .docs-nav { position: static; max-height: none; flex-flow: row wrap; } } /* Cookie-Hinweis */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 600px; margin: 0 auto; z-index: 60; display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .cookie-notice p { margin: 0; flex: 1; font-size: .85rem; color: var(--text-muted); } .cookie-notice .btn { flex-shrink: 0; } /* Sortierbare Tabellen */ table.data thead th:not(:empty) { cursor: pointer; user-select: none; } table.data thead th.sort-asc::after { content: " \25B2"; font-size: .7em; color: var(--accent); } table.data thead th.sort-desc::after { content: " \25BC"; font-size: .7em; color: var(--accent); } /* Reduced-Motion: SVG-Zeichnung sofort fertig zeigen (der globale Block oben deaktiviert bereits alle Animationen/Transitions) */ @media (prefers-reduced-motion: reduce) { .chart-line--animate, .chart-arc { stroke-dashoffset: 0 !important; } }