@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Work+Sans:wght@400;500;600&display=swap'); :root { --font-sans: "Work Sans", "Segoe UI", sans-serif; --font-serif: "Fraunces", "Georgia", serif; --ink: #1f2a35; --muted: #5f6b7a; --accent: #19a7b8; --accent-2: #6b52d6; --accent-bg-pct: 0%; --surface: #ffffff; --surface-soft: rgba(255, 255, 255, 0.78); --border: rgba(15, 23, 42, 0.12); --shadow: 0 18px 40px rgba(15, 23, 42, 0.12); --radius-lg: 22px; --radius-md: 14px; --radius-pill: 10px; --bubble-radius: 6px; --bubble-width: 15rem; --bg-start: #e2f6ff; --bg-mid: #eef2ff; --bg-end: #f5f7ff; --glow-accent: rgba(25, 167, 184, 0.18); --glow-secondary: rgba(107, 82, 214, 0.18); --panel-soft: #f1f7ff; --row-hover: #f7f8fb; /* Alias-Namen: In etlichen Seiten (Einstellungen, Admin, Onboarding) wird --text / --text-muted / --surface-* verwendet. Diese Variablen gab es nie, dadurch griff dort immer der hell gedachte Fallback im Stylesheet - im Dark Mode also dunkle Schrift auf dunklem Grund. Die Aliase zeigen auf die echten Themenvariablen und kippen damit automatisch mit dem Theme mit. */ --text: var(--ink); --text-muted: var(--muted); --surface-hover: rgba(15, 23, 42, 0.045); --surface-alt: var(--panel-soft); --surface-2: var(--panel-soft); --surface-base: var(--surface); --surface-raised: var(--surface); --border-color: var(--border); --input-bg: var(--surface); --bg: var(--bg-end); } :root[data-db="test"] { --accent: #c81e1e; --accent-2: #f43f5e; --glow-accent: rgba(248, 113, 113, 0.2); --glow-secondary: rgba(244, 63, 94, 0.18); } :root[data-theme="dark"] { --ink: #eef4ff; --muted: #c3ccda; --surface: #111b2b; --surface-soft: rgba(17, 27, 43, 0.85); --border: rgba(148, 163, 184, 0.22); --shadow: 0 18px 40px rgba(5, 10, 20, 0.6); --bg-start: #0b1220; --bg-mid: #111827; --bg-end: #0f172a; --glow-accent: rgba(25, 167, 184, 0.25); --glow-secondary: rgba(107, 82, 214, 0.28); --panel-soft: rgba(17, 30, 50, 0.8); --row-hover: rgba(25, 32, 48, 0.9); /* --text/--text-muted folgen automatisch --ink/--muted, hier nur die Werte, die im Dunkeln eine eigene Mischung brauchen. */ --surface-hover: rgba(148, 163, 184, 0.14); --surface-raised: #182740; } * { box-sizing: border-box; } html { min-height: 100%; background-color: var(--bg-end); overscroll-behavior-y: none; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); color: var(--ink); /* Akzent-Verlauf aus der Tenant-Akzentfarbe; Stärke über --accent-bg-pct steuerbar (Header-Regler) */ background: radial-gradient(1500px 1050px at 100% 0%, color-mix(in srgb, var(--accent-2) var(--accent-bg-pct), transparent), transparent 75%), radial-gradient(1500px 1050px at 0% 100%, color-mix(in srgb, var(--accent) var(--accent-bg-pct), transparent), transparent 75%), radial-gradient(circle at top, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%); background-color: var(--bg-end); background-attachment: fixed; overscroll-behavior-y: none; } /* ── Mobil: Ansicht horizontal fixieren ───────────────────────────── Auf Touch-Geräten ließ sich die ganze App seitlich verschieben ("verwischen") – einerseits durch das Overscroll-Rubberband, andererseits durch einzelne Elemente, die breiter als der Viewport wurden. Aufteilung mit Absicht: - overscroll-behavior-x auf , weil nur der Wert des Root-Elements sicher auf den Viewport wirkt (analog zum bestehenden -y). - overflow-x auf , nicht auf : von dort propagiert es auf den Viewport, während selbst kein Scroll-Container wird. So bleiben position: sticky (z. B. .landing-nav) und die JS-Scrollsperren (document.body.style.overflow = "hidden") funktionsfähig. Breite Inhalte scrollen weiterhin in ihrem eigenen Container (.table-responsive). */ @media (max-width: 1024px) { html { overscroll-behavior-x: none; } body { overflow-x: hidden; max-width: 100%; } } .text-muted { color: var(--muted) !important; } body::before, body::after { content: ""; position: fixed; z-index: 0; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--glow-accent) 0%, rgba(0, 0, 0, 0) 70%); filter: blur(2px); } body::before { top: -120px; right: 10%; } body::after { bottom: -140px; left: 5%; background: radial-gradient(circle, var(--glow-secondary) 0%, rgba(0, 0, 0, 0) 70%); } .app-shell { position: relative; z-index: 1; max-width: 100%; margin: 0; padding: 32px 24px 48px; } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-soft); box-shadow: var(--shadow); backdrop-filter: blur(10px); /* backdrop-filter erzeugt einen Stacking-Context: ohne z-index überdeckt Seiteninhalt die Header-Dropdowns (z. B. Benachrichtigungs-Panel). Über Inhalt (<=1060), unter Modals (>=2000). */ position: relative; z-index: 1500; } .header-left { display: flex; align-items: flex-start; flex-shrink: 0; } .brand-column { display: flex; flex-direction: column; gap: 6px; } .brand-actions { display: flex; align-items: center; gap: 6px; } .header-center { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; } .header-center.is-hidden { display: none; } .module-toggle { border: 1px solid var(--border); background: var(--surface-soft); color: var(--ink); width: 32px; height: 32px; padding: 0; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, color 0.2s ease; } .module-toggle:hover { border-color: var(--accent); color: var(--accent); } .module-toggle[aria-pressed="false"] { opacity: 0.5; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand-mark { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .brand-mark--image { padding: 4px; background: var(--surface); border: 1px solid var(--border); } .brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; } .brand-subtitle { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .account-chip { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 8px; background: var(--surface-soft); border: 1px solid var(--border); text-align: right; position: relative; } .account-chip--clickable { text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .account-chip--clickable:hover { border-color: var(--accent); color: inherit; } .account-logout-hint { display: none; font-size: 0.72rem; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; } .account-chip--clickable:hover .account-logout-hint { display: block; } .account-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .account-name { font-weight: 600; } .account-db { font-size: 0.78rem; color: var(--muted); } .account-link { text-decoration: none; font-weight: 600; color: var(--accent); padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(11, 114, 133, 0.3); transition: all 0.2s ease; } .account-link:hover { color: #fff; background: var(--accent); } .theme-toggle { border: 1px solid var(--border); background: var(--surface-soft); color: var(--ink); width: 32px; height: 32px; padding: 0; border-radius: 6px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { border-color: rgba(25, 167, 184, 0.4); } .theme-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-icon--sun { display: inline-flex; } .theme-icon--moon { display: none; } html[data-theme="dark"] .theme-icon--sun { display: none; } html[data-theme="dark"] .theme-icon--moon { display: inline-flex; } .app-main { margin-top: 12px; } body.auth-page .app-shell { min-height: 100dvh; padding: 0; } body.auth-page .app-main { margin-top: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } body.auth-page .welcome-grid { width: 100%; max-width: 720px; margin: 0 auto; display: flex; justify-content: center; } body.auth-page .welcome-card { width: 100%; margin: 0; } body.auth-page .auth-card { position: relative; padding-top: 56px; } body.auth-page .auth-card-toolbar { position: absolute; top: 16px; right: 16px; } .welcome-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; } .welcome-card, .info-card, .module-panel { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); } .welcome-card { padding: 28px; } .eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .welcome-card h1 { font-family: var(--font-serif); font-size: clamp(2rem, 2.6vw, 2.8rem); margin-bottom: 12px; } .welcome-card p { color: var(--muted); font-size: 1.05rem; } .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 20px; } .status-item { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--panel-soft); } .db-switch { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .db-switch .form-select { min-width: 150px; } .status-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; } .status-value { font-weight: 600; } .info-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .info-card h2 { font-size: 1.1rem; margin: 0; } .info-card ul { padding-left: 18px; margin: 0; color: var(--muted); } /* Die Auswahlspalte ist immer sichtbar. Der Auswahlmodus wird nicht mehr ueber einen Button geschaltet, sondern ergibt sich daraus, ob etwas angehakt ist (siehe selection-mode in site.js). */ .selection-host .row-select { width: 1%; white-space: nowrap; text-align: center; } .selection-mode-only { display: none; } .selection-host.is-selection-mode .selection-mode-only { display: inline-flex; } /* .table-action-bar setzt selbst display:flex und steht weiter unten im Stylesheet - bei gleicher Spezifitaet gewinnt es und der Balken waere immer sichtbar. Diese beiden Regeln sind spezifischer und entscheiden es. */ .selection-host .table-action-bar.selection-mode-only { display: none; } .selection-host.is-selection-mode .table-action-bar.selection-mode-only { display: flex; } /* Sammelbearbeitung: Balken mit mehreren Feldern, die erst bei einer Auswahl erscheinen (Kunden, Aufgaben). */ .bulk-edit-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; width: 100%; } .bulk-count { align-self: center; color: var(--text-muted); font-size: .85rem; } .bulk-field { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; font-weight: 600; } .bulk-field .form-select, .bulk-field .form-control { min-width: 150px; font-weight: 400; } .selection-host.is-selection-mode .row-menu { display: none; } .selection-host.is-selection-mode .col-menu { display: none; } .selection-host { position: relative; z-index: 1; } .selection-host.menu-open { z-index: 3000; } .selection-toggle.is-active, .selection-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); } .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .quick-action { display: flex; align-items: center; justify-content: center; padding: 14px 16px; min-height: 68px; border-radius: var(--radius-md); border: 1px solid var(--border); background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), transparent); color: var(--text); font-weight: 600; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .quick-action:hover, .quick-action:focus { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: 0 8px 20px rgba(15, 17, 20, 0.12); color: var(--text); } .module-panel { margin-top: 24px; padding: 22px; } .module-panel h2 { font-family: var(--font-serif); font-size: 1.6rem; margin-bottom: 6px; } .module-panel p { color: var(--muted); } .module-tabs { margin-top: 8px; margin-bottom: 8px; border: none; gap: 6px; } .module-tabs .nav-item { margin-bottom: 4px; min-width: 0; } .module-tabs .nav-link { border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.75rem; font-weight: 600; color: var(--muted); background: var(--surface-soft); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .module-tab-icon { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .module-tabs .nav-link:hover { color: var(--ink); border-color: rgba(11, 114, 133, 0.4); } .module-tabs .nav-link.active { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 18px rgba(11, 114, 133, 0.25); } .module-content { margin-top: 20px; padding: 18px; border-radius: var(--radius-md); border: 1px dashed rgba(15, 23, 42, 0.2); background: var(--surface-soft); } .empty-state { display: flex; flex-direction: column; gap: 8px; color: var(--muted); } .app-footer { margin-top: 32px; padding: 14px 8px; display: flex; /* Ohne wrap kann die Zeile nicht unter die Summe ihrer min-content-Breiten (~460px) schrumpfen und zieht auf Handys die ganze Seite auf. */ flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: var(--muted); } @media (max-width: 900px) { .app-footer { justify-content: center; gap: 8px 14px; } } .app-footer a { color: inherit; text-decoration: none; } @media (max-width: 900px) { .app-shell { padding: 24px 18px 40px; } .app-header { flex-direction: column; align-items: flex-start; } .header-left { width: 100%; } .welcome-grid { grid-template-columns: 1fr; } .account { width: 100%; justify-content: space-between; } } .module-shell { display: flex; flex-direction: column; gap: 20px; } /* ── Mahnungen Modul ──────────────────────────────────────── */ .stats-row { display: flex; gap: 12px; flex-wrap: wrap; } .stat-chip { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 18px; min-width: 160px; } .stat-chip--accent { border-color: var(--accent); } .stat-chip__label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; } .stat-chip__value { font-size: 1.25rem; font-weight: 600; color: var(--ink); } .stat-chip--accent .stat-chip__value { color: var(--accent); } .mahnung-sort-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .mahnung-sort-bar__label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; } .mahnung-sort-bar__select { font-size: 0.85rem; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; outline: none; } .mahnung-sort-bar__select:focus { border-color: var(--accent); } .mahnung-sort-bar__dir { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; white-space: nowrap; } .mahnung-list { display: flex; flex-direction: column; gap: 8px; } .mahnung-kunde { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .mahnung-kunde__header { display: flex; align-items: center; gap: 16px; padding: 14px 18px; cursor: pointer; user-select: none; flex-wrap: wrap; outline: none; } .mahnung-kunde__header:hover { background: var(--surface-hover, rgba(0,0,0,.03)); } .mahnung-toggle-icon { font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; display: inline-block; width: 12px; text-align: center; } .mahnung-kunde__info { display: flex; flex-direction: column; flex: 1; min-width: 180px; } .mahnung-kunde__name { font-weight: 600; font-size: 0.95rem; color: var(--ink); } .mahnung-kunde__email { font-size: 0.8rem; color: var(--text-muted); } .mahnung-kunde__email--missing { color: var(--color-warning, #c97a00); font-style: italic; } .mahnung-kunde__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mahnung-badge { font-size: 0.75rem; padding: 3px 8px; border-radius: 20px; background: var(--surface-hover, rgba(0,0,0,.05)); color: var(--text-muted); white-space: nowrap; } .mahnung-badge--amount { font-weight: 600; color: var(--ink); background: rgba(var(--accent-rgb, 11,114,133), .08); } .mahnung-badge--days { color: var(--text-muted); } .mahnung-badge--reminder { color: var(--accent); background: rgba(var(--accent-rgb, 11,114,133), .08); font-weight: 500; } .mahnung-badge--never { color: var(--color-warning, #c97a00); background: rgba(201,122,0,.08); font-style: italic; } .mahnung-kunde__actions { display: flex; gap: 8px; align-items: center; } .mahnung-rechnungen { border-top: 1px solid var(--border); padding: 0 18px 12px; } .mahnung-rechnungen__table { width: 100%; margin-top: 8px; } .mahnung-rechnungen__total td { border-top: 2px solid var(--border); padding-top: 8px; } .mahnung-days { font-size: 0.82rem; padding: 2px 7px; border-radius: 20px; background: var(--surface-hover, rgba(0,0,0,.04)); } .mahnung-days--warnung { background: rgba(255, 160, 0, .12); color: #8a5a00; } .mahnung-days--kritisch { background: rgba(220, 38, 38, .1); color: #b91c1c; } .mahnung-row--warnung td { background: rgba(255, 160, 0, .04); } .mahnung-row--kritisch td { background: rgba(220, 38, 38, .04); } /* Sub-Navigation (z.B. Rechnungen / Zahlungen / Mahnungen) */ .sub-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: -8px; } .sub-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 4px 4px 0 0; transition: color 0.15s, border-color 0.15s; } .sub-nav-link:hover { color: var(--ink); background: var(--surface-hover, rgba(0,0,0,.04)); } .sub-nav-link.active { color: var(--accent); border-bottom-color: var(--accent); } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .page-header h1 { margin: 0; font-family: var(--font-serif); } .page-actions { display: flex; gap: 12px; flex-wrap: wrap; } .status-banner { padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(11, 114, 133, 0.2); background: rgba(11, 114, 133, 0.16); color: var(--ink); } .status-banner:empty { display: none; } .status-override-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 10px 16px; background: var(--surface-alt, #f5f5f5); border: 1px solid var(--border); border-radius: var(--radius); } .status-banner ul { margin: 0; padding-left: 18px; } .table-card, .form-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); } .table-card { padding: 20px; } .table-card--compact { padding: 12px; } .table-responsive--menu { overflow-x: auto; overflow-y: visible; position: relative; } @media (max-width: 1024px) { /* Lange, umbruchlose Werte (E-Mails, IBANs, URLs) zwingen Tabellen sonst über die Viewport-Breite hinaus. Nur td – bei th würden auch kurze Spaltentitel mitten im Wort umbrechen. Zellen mit white-space: nowrap bleiben unberührt. */ .table td { overflow-wrap: anywhere; } } .invoice-table-scroll.is-limited { overflow-y: auto; } .invoice-table-scroll.is-limited.menu-open { overflow-y: auto; } .invoice-table-scroll.menu-open { position: relative; z-index: 3100; } .table-responsive.menu-open { position: relative; z-index: 3100; } .invoice-table-scroll.is-limited thead th { position: sticky; top: 0; z-index: 5; background: var(--surface); } .table-responsive--menu .row-menu-list { z-index: 4000; } .table-card .table { --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--row-hover); --bs-table-hover-color: var(--ink); color: var(--ink); } .table-card .table { margin-top: 16px; margin-bottom: 0; } .table-card--compact .table { margin-top: 8px; } .table-card .table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--border); } .table thead th { color: var(--muted); } .table-card .table tbody tr:hover { background: var(--row-hover); } .table-card .table tbody tr.row-link { cursor: pointer; } .table-card .table tbody tr.row-muted { background: rgba(148, 163, 184, 0.2); } .table-card .table tbody tr.row-selected { background: rgba(25, 167, 184, 0.12); } .table-compact thead th, .table-compact tbody td { padding: 0.35rem 0.6rem; line-height: 1.2; } .table-compact .action-group { gap: 6px; } .table-compact .btn-sm { padding: 0.2rem 0.5rem; line-height: 1.2; } .order-positions-table th.col-artnr, .order-positions-table td.col-artnr { width: 90px; min-width: 80px; white-space: nowrap; } .order-positions-table th.col-drag, .order-positions-table td.col-drag { width: 42px; min-width: 42px; text-align: center; } .order-positions-table th.col-menge, .order-positions-table td.col-menge, .order-positions-table th.col-einheit, .order-positions-table td.col-einheit { width: 70px; min-width: 60px; white-space: nowrap; } .order-positions-table th.col-ek, .order-positions-table td.col-ek, .order-positions-table th.col-vk, .order-positions-table td.col-vk { width: 90px; min-width: 80px; white-space: nowrap; } .order-positions-table th.col-beschreibung, .order-positions-table td.col-beschreibung { min-width: 280px; width: 100%; } .order-positions-table .form-control-sm { padding: 0.25rem 0.5rem; } .position-drag-handle { cursor: grab; user-select: none; min-width: 2rem; padding-left: 0.35rem; padding-right: 0.35rem; line-height: 1; } .position-drag-handle span { font-size: 0.95rem; } .position-drag-handle:active { cursor: grabbing; } .position-remove-btn { min-width: 2rem; padding-left: 0.45rem; padding-right: 0.45rem; line-height: 1; color: #b42318; background: rgba(180, 35, 24, 0.08); border: 1px solid rgba(180, 35, 24, 0.28); } .position-remove-btn:hover, .position-remove-btn:focus-visible { color: #8f1f15; background: rgba(180, 35, 24, 0.14); border-color: rgba(180, 35, 24, 0.4); } .position-remove-btn:disabled { opacity: 0.65; } .position-row.is-dragging { opacity: 0.45; } .position-row.drop-target { box-shadow: inset 0 -2px 0 var(--accent); } .table-ultra-compact thead th, .table-ultra-compact tbody td { padding: 0.25rem 0.5rem; line-height: 1.2; font-size: 0.85rem; } .search-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .search-input { /* min() statt fixer 440px: auf schmalen Displays sonst breiter als der Viewport */ min-width: min(440px, 100%); flex: 0 1 520px; width: 100%; max-width: 520px; border-radius: 999px; border: 1px solid var(--border); padding: 0.45rem 1rem; } .search-filter { min-width: min(160px, 100%); max-width: 200px; flex: 0 0 180px; } .form-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .section-collapsible__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; margin: 0; } .section-collapsible__summary::marker, .section-collapsible__summary::-webkit-details-marker { display: none; } .section-collapsible__summary::after { content: "›"; font-size: 1.4rem; transform: rotate(90deg); transition: transform 0.2s ease; } .section-collapsible[open] .section-collapsible__summary::after { transform: rotate(180deg); } .section-collapsible__content { margin-top: 12px; } /* Document variable hint (Artikel Edit) */ .doc-var-hint { font-size: 0.85rem; } .doc-var-hint__toggle { cursor: pointer; color: var(--accent); font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 4px; user-select: none; } .doc-var-hint__toggle::before { content: "\276F"; font-size: 0.7rem; transition: transform 0.15s; } .doc-var-hint[open] > .doc-var-hint__toggle::before { transform: rotate(90deg); } .doc-var-hint__toggle::marker, .doc-var-hint__toggle::-webkit-details-marker { display: none; } .doc-var-hint__content { margin-top: 8px; padding: 12px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); } .doc-var-hint__info { margin: 0 0 10px; color: var(--muted); font-size: 0.8rem; } .doc-var-hint__group { margin-bottom: 8px; } .doc-var-hint__group:last-child { margin-bottom: 0; } .doc-var-hint__group strong { display: block; margin-bottom: 4px; font-size: 0.8rem; color: var(--muted); } .doc-var-hint__tags { display: flex; flex-wrap: wrap; gap: 4px; } .doc-var-tag { display: inline-block; padding: 2px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--bubble-radius); font-family: monospace; font-size: 0.78rem; color: var(--ink); cursor: pointer; transition: background 0.1s, border-color 0.1s; } .doc-var-tag:hover { background: var(--glow-accent); border-color: var(--accent); } .aufgabe-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 700px)); gap: 24px; align-items: start; justify-content: center; } .aufgabe-col { display: flex; flex-direction: column; gap: 24px; align-items: stretch; } .aufgabe-panel { width: 100%; max-width: 700px; } @media (max-width: 900px) { .aufgabe-grid { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 500px) { .aufgabe-grid { justify-items: stretch; } .aufgabe-col { width: 100%; } .aufgabe-panel { max-width: none; width: 100%; } .page-actions, .page-actions .action-group { width: 100%; } .page-actions .btn { width: 100%; justify-content: center; } } .form-row { display: flex; align-items: center; gap: 12px; } .form-row--compact { gap: 6px; } .form-row--compact .form-label { margin-bottom: 0; } .form-row--comment { align-items: flex-start; } .comment-input { flex: 1 1 auto; } .comment-submit { margin-top: 26px; } .document-upload { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .document-upload-actions { display: flex; align-items: center; } .document-upload-actions .btn { width: 100%; justify-content: center; } .document-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: center; transition: border-color 0.15s ease, background 0.15s ease; cursor: pointer; } .document-dropzone:hover, .document-dropzone.is-dragover { border-color: var(--accent, #4b8bff); background: var(--surface-alt, rgba(75, 139, 255, 0.08)); } .document-dropzone__icon { font-size: 1.6rem; line-height: 1; } .document-dropzone__text { font-weight: 600; } .document-dropzone__browse { color: var(--accent, #4b8bff); text-decoration: underline; cursor: pointer; margin: 0; } .document-dropzone__hint { font-size: 0.85rem; } .document-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .documents-table .document-name-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .documents-table .document-preview-cell { width: 60px; } .documents-table .doc-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .documents-table .doc-link { color: var(--ink); text-decoration: none; font-weight: 600; } .documents-table .doc-link:hover { text-decoration: underline; } .comments-table thead { display: none; } .comments-table tbody tr { display: block; padding: 10px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-soft); } .comments-table td { display: block; border: none; padding: 0; } .comments-table .comment-meta { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; } .comment-meta-text { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .comment-author { font-weight: 600; } .comment-time { color: var(--muted); font-size: 0.85rem; } .comment-actions-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .comment-body { margin-top: 8px; } .comment-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; color: var(--ink); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .calendar-entry-group { grid-column: 1 / -1; border: 1px solid var(--border); background: var(--surface); padding: 12px; border-radius: 10px; } .calendar-entry-group__title { margin-bottom: 10px; color: var(--ink); } .calendar-entry-group__toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .calendar-entry-group__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } fieldset.calendar-entry-group__fields { border: 0; padding: 0; margin: 0; min-inline-size: 0; } .form-grid--meta { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .form-grid--auftrag { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; } .form-grid--auftrag .form-control, .form-grid--auftrag .form-select, .form-grid--auftrag textarea.form-control { padding: 0.35rem 0.6rem; } .form-grid--auftrag .input-date { max-width: 160px; } .form-grid--auftrag textarea.form-control { min-height: 58px; } @media (max-width: 1100px) { .form-grid--auftrag { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .form-grid--auftrag { grid-template-columns: 1fr; } } /* Aufwand-Formular: Bubble-Breite begrenzen und Felder auf angenehme Breite (Optik) */ #aufwandForm { max-width: 800px; } #aufwandForm .form-control, #aufwandForm .form-select, #aufwandForm .typeahead { max-width: 22rem; } #aufwandForm input[type="date"] { max-width: 13rem; } #aufwandForm textarea.form-control { max-width: 100%; } /* Aufwände-Übersicht: Summenzeile linksbündig und kompakt */ .aufwaende-table__sum td { padding-top: 10px; border-top: 1px solid var(--border); text-align: left; } .aufwaende-table__sum-content { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; } .form-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 2px; } .form-value { font-weight: 600; padding: 2px 0; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] .search-input { background-color: #0f172a; color: #ffffff; border-color: var(--border); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] .search-input::placeholder, html[data-theme="dark"] textarea.form-control::placeholder { color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea.form-control:focus, html[data-theme="dark"] .search-input:focus { background-color: #0b1220; color: #ffffff; border-color: rgba(25, 167, 184, 0.6); box-shadow: 0 0 0 0.2rem rgba(25, 167, 184, 0.2); } .form-checks { display: flex; gap: 16px; flex-wrap: wrap; } .form-actions { display: flex; gap: 12px; flex-wrap: wrap; } .form-actions--status .form-check-label--inline { margin-left: auto; } .form-check-label--inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; } .customer-row { display: flex; gap: 6px; align-items: center; } .customer-row .typeahead { flex: 1 1 auto; } .collapsible { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); padding: 8px 12px; } .collapsible-summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; } .collapsible-summary::-webkit-details-marker { display: none; } .collapsible-summary::before { content: "+"; font-weight: 700; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; font-size: 0.8rem; } .collapsible[open] .collapsible-summary::before { content: "–"; } .collapsible-content { margin-top: 8px; } .filter-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-md); border: 1px dashed rgba(15, 23, 42, 0.2); background: var(--surface-soft); } .filter-collapsible { border: none; padding: 0; margin: 0; } .filter-collapsible__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 0.45rem 1rem; margin-bottom: 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); font-weight: 600; color: var(--ink); } .filter-collapsible__summary::marker, .filter-collapsible__summary::-webkit-details-marker { display: none; } .filter-collapsible[open] .filter-collapsible__summary { margin-bottom: 10px; } .aufwaende-toolbar { display: flex; align-items: flex-start; gap: 8px; } .aufwaende-toolbar .filter-collapsible { flex: 1 1 auto; min-width: 0; } .aufwaende-toolbar .filter-collapsible__summary, .aufwaende-toolbar .btn-soft { border-radius: 6px; } .aufwaende-toolbar__selection { flex: 0 0 auto; white-space: nowrap; } .filter-panel--compact { padding: 10px 12px; gap: 10px; } .filter-panel--compact .form-label { font-size: 0.75rem; margin-bottom: 4px; } .filter-panel--compact .form-control, .filter-panel--compact .form-select { padding: 0.2rem 0.5rem; font-size: 0.8rem; height: 32px; } .filter-panel--compact .search-input { min-width: 220px; width: clamp(240px, 32vw, 360px); max-width: 360px; padding: 0.2rem 0.6rem; height: 32px; } #offersFilterForm .search-input { height: 32px !important; min-height: 32px; max-height: 32px; line-height: 1.2; } #ordersFilterForm .search-input, #invoiceFilterForm .search-input, #contractsFilterForm .search-input, #ownContractsFilterForm .search-input, #aufwaendeFilterForm .search-input, #aufgabenFilterForm .search-input, #zahlungenFilterForm .search-input, #lieferscheineFilterForm .search-input, #druckFilterForm .search-input, #filterForm .search-input { height: 32px !important; min-height: 32px; max-height: 32px; line-height: 1.2; } .filter-panel--compact input[type="date"] { min-width: 140px; } #aufwaendeFilterForm .filter-grid { display: grid; align-items: end; gap: 10px 4px; grid-template-columns: max-content max-content max-content max-content auto; grid-template-areas: "search status period quick actions"; } #aufwaendeFilterForm .filter-block--search { grid-area: search; } #aufwaendeFilterForm .filter-block--search .search-input { width: clamp(220px, 26vw, 320px); } #aufwaendeFilterForm .filter-block--status { grid-area: status; } #aufwaendeFilterForm .filter-block--period { grid-area: period; } #aufwaendeFilterForm .filter-block--quick { grid-area: quick; } #aufwaendeFilterForm .filter-actions { grid-area: actions; align-self: end; } @media (max-width: 1100px) { #aufwaendeFilterForm .filter-grid { grid-template-columns: max-content max-content auto; grid-template-areas: "search status actions" "period quick actions"; } } @media (max-width: 700px) { .aufwaende-toolbar { flex-direction: column; } } .filter-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .filter-panel--compact .filter-row { gap: 10px; } .filter-block { display: flex; flex-direction: column; gap: 8px; } .filter-panel--compact .filter-block { gap: 6px; } @media (max-width: 1024px) { /* Filter-Blöcke tragen teilweise ein Inline-min-width (z. B. 320px); auf schmalen Displays würde das die Seite horizontal aufziehen. */ .filter-block { min-width: 0 !important; } } .filter-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .filter-radio { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.95rem; } .filter-panel--compact .filter-radio { gap: 8px; font-size: 0.85rem; } .filter-radio input { margin-right: 6px; } .filter-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .quick-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .filter-panel--compact .quick-buttons .btn, .filter-panel--compact .filter-actions .btn { padding: 0.25rem 0.6rem; font-size: 0.8rem; } .table-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } .table-action-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; position: relative; z-index: 2; } /* Balken fuer "Neu anlegen"-Buttons direkt ueber der Liste/Tabelle */ .table-create-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 12px; } .table-responsive { position: relative; z-index: 1; } .table-responsive--scroll-bubble { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; } .modal-backdrop { z-index: 2040; background-color: #0f172a; } .modal-backdrop.show { opacity: 0.35; } .modal { z-index: 2050; } .modal-content { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } html[data-theme="dark"] .modal-backdrop.show { opacity: 0.5; } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-body, html[data-theme="dark"] .modal-footer { background: var(--surface); color: var(--ink); border-color: var(--border); } html[data-theme="dark"] .table { --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--row-hover); --bs-table-hover-color: var(--ink); color: var(--ink); } html[data-theme="dark"] .modal .btn-close { filter: invert(1); } html[data-theme="dark"] .table-card .table tbody tr.row-selected { background: rgba(148, 163, 184, 0.40); } html[data-theme="dark"] .row-menu-item:hover { background: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .table .table-active, html[data-theme="dark"] .table-active > th, html[data-theme="dark"] .table-active > td { background-color: rgba(148, 163, 184, 0.22); color: var(--ink); } html[data-theme="dark"] .status-banner { background: rgba(11, 114, 133, 0.38); } html[data-theme="dark"] .sum-chip, html[data-theme="dark"] .status-pill, html[data-theme="dark"] .task-badge { background: rgba(25, 167, 184, 0.2); border-color: rgba(25, 167, 184, 0.6); color: #e6f9fb; } html[data-theme="dark"] .status-pill--yes { background: rgba(13, 148, 136, 0.22); color: #d7f5ef; border-color: rgba(13, 148, 136, 0.6); } html[data-theme="dark"] .status-pill--no { background: rgba(126, 34, 206, 0.22); color: #f1e4ff; border-color: rgba(126, 34, 206, 0.6); } html[data-theme="dark"] .status-pill--warn { background: rgba(245, 158, 11, 0.24); color: #fef3c7; border-color: rgba(245, 158, 11, 0.6); } html[data-theme="dark"] .status-pill--storno { background: rgba(239, 68, 68, 0.24); color: #fecaca; border-color: rgba(239, 68, 68, 0.6); text-decoration: line-through; } html[data-theme="dark"] .task-badge--ok { background: rgba(35, 139, 69, 0.24); border-color: rgba(35, 139, 69, 0.6); color: #dbf5e5; } html[data-theme="dark"] .task-badge--soon { background: rgba(245, 158, 11, 0.26); border-color: rgba(245, 158, 11, 0.62); color: #fff7db; } html[data-theme="dark"] .task-badge--overdue { background: rgba(240, 82, 82, 0.24); border-color: rgba(240, 82, 82, 0.6); color: #fee2e2; } html[data-theme="dark"] .task-badge--done { background: rgba(126, 34, 206, 0.24); border-color: rgba(126, 34, 206, 0.6); color: #ede9fe; } .table-action-bar--compact { gap: 8px; } .table-action-bar--compact .sum-chip { padding: 0.3rem 0.6rem; font-size: 0.8rem; } .action-group { display: flex; flex-wrap: wrap; gap: 10px; } .row-menu { position: relative; display: inline-flex; justify-content: flex-end; } .table#invoiceTable td.col-menu .row-menu, .table#offersTable td.col-menu .row-menu, .table#ordersTable td.col-menu .row-menu, .table#paymentsTable td.col-menu .row-menu, .table#contractsTable td.col-menu .row-menu { justify-content: flex-start; } .row-menu-trigger { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--ink); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .row-menu-trigger:hover { background: rgba(15, 23, 42, 0.08); } .row-menu.is-open .row-menu-trigger { background: var(--ink); color: var(--surface); border-color: var(--ink); } .row-menu-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15); display: none; z-index: 20; } .row-menu-list.is-floating { position: fixed; top: 0; left: 0; right: auto; z-index: 5000; } .table#invoiceTable td.col-menu .row-menu-list, .table#offersTable td.col-menu .row-menu-list, .table#ordersTable td.col-menu .row-menu-list, .table#paymentsTable td.col-menu .row-menu-list, .table#contractsTable td.col-menu .row-menu-list { left: 0; right: auto; } .row-menu.is-open .row-menu-list { display: block; } .row-menu-list form { margin: 0; } .row-menu-item { width: 100%; display: block; padding: 8px 12px; border-radius: 8px; border: none; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font-size: 0.9rem; line-height: 1.2; } .row-menu-item:link, .row-menu-item:visited { color: var(--ink); } .row-menu-item:hover { background: rgba(15, 23, 42, 0.08); color: var(--ink); } .row-menu-item:disabled { opacity: 0.5; cursor: not-allowed; } .row-menu-list.is-portal { position: fixed; z-index: 99999; } .sum-chip, .status-pill, .task-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--bubble-width); border-radius: var(--bubble-radius); text-align: center; } .sum-chip { padding: 8px 14px; border: 1px solid var(--border); background: var(--surface-soft); font-weight: 600; } .sum-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .subtask-panel { margin-top: 24px; padding-top: 12px; border-top: 1px dashed var(--border); } .subtask-section { margin-top: 32px; } .subtask-section .page-header { margin-top: 0; margin-bottom: 12px; } .subtask-table { font-size: 0.9rem; } .subtask-table td, .subtask-table th { padding: 0.2rem 0.4rem; line-height: 1; } .subtask-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .subtask-title { min-width: 0; } .subtask-title .form-control { width: 100%; } .subtask-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; } .subtask-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 0 1 180px; } .subtask-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .subtask-field .form-select { max-width: 180px; } .subtask-table .form-control, .subtask-table .form-select { padding: 0.15rem 0.4rem; font-size: 0.85rem; height: 28px; } .subtask-table .form-check-input { width: 0.9rem; height: 0.9rem; } .subtask-table .btn { padding: 0.2rem 0.5rem; font-size: 0.8rem; } .subtask-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; margin-left: auto; } .subtask-actions[hidden] { display: none !important; } .subtask-toggle { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .subtask-meta.is-open .subtask-toggle { transform: rotate(90deg); } .subtask-done { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-right: 4px; white-space: nowrap; } .btn-icon { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .article-row-actions { display: inline-flex; align-items: center; gap: 6px; } .btn-icon-danger { border: 1px solid rgba(220, 38, 38, 0.35); color: #b91c1c; background: rgba(220, 38, 38, 0.08); } .btn-icon-danger:hover { color: #991b1b; border-color: rgba(220, 38, 38, 0.6); background: rgba(220, 38, 38, 0.16); } .btn-icon-copy { border: 1px solid rgba(22, 163, 74, 0.4); color: #166534; background: rgba(22, 163, 74, 0.12); } .btn-icon-copy:hover { color: #14532d; border-color: rgba(22, 163, 74, 0.7); background: rgba(22, 163, 74, 0.2); } @media (max-width: 700px) { .subtask-item { grid-template-columns: 1fr; } .subtask-meta { gap: 8px; flex-wrap: wrap; } .subtask-field { flex: 1 1 140px; } .subtask-field .form-select { max-width: 140px; } .subtask-actions { margin-left: 0; } } .task-row--overdue { background: rgba(240, 82, 82, 0.12); color: #7d1c1c; font-weight: 600; } .task-row--done { background: rgba(35, 139, 69, 0.12); color: #0f5132; } .task-row--high { background: rgba(255, 193, 7, 0.16); color: #7a5b00; } .task-row--medium { background: rgba(13, 110, 253, 0.12); color: #0a2f66; } .task-badge { padding: 2px 10px; width: var(--bubble-width); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; } .task-badge--ok { background: rgba(35, 139, 69, 0.14); color: #0f5132; border-color: rgba(35, 139, 69, 0.3); } .task-badge--soon { background: rgba(245, 158, 11, 0.18); color: #7c2d12; border-color: rgba(245, 158, 11, 0.45); } .task-badge--overdue { background: rgba(240, 82, 82, 0.16); color: #7d1c1c; border-color: rgba(240, 82, 82, 0.35); } .task-badge--done { background: rgba(126, 34, 206, 0.14); color: #4c1d95; border-color: rgba(126, 34, 206, 0.35); } .tasks-table { font-size: 1.2em; } .tasks-table thead th, .tasks-table tbody td { line-height: 1.2; } .calendar-card { padding: 18px 20px 24px; } .calendar-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .calendar-header h2 { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; } .calendar-toggle { display: inline-flex; } .calendar-sync-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 0.85rem; } .calendar-sync-ok { color: var(--bs-success, #2e7d32); } .calendar-sync-status--error { color: var(--bs-danger, #c62828); } .calendar-sync-sep { color: var(--text-muted, #888); } .calendar-sync-form { display: inline; margin: 0; } .calendar-sync-link, .calendar-sync-link--button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent, #0d6efd); text-decoration: underline; } .calendar-sync-link:hover { text-decoration: none; } .calendar-card.is-collapsed .calendar-week { display: none; } @media (max-width: 767.98px) { .calendar-header { flex-wrap: wrap; align-items: flex-start; } .calendar-nav { width: 100%; justify-content: flex-start; } .calendar-toggle { display: inline-flex; } } .calendar-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .calendar-nav-arrow { width: 28px; min-width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 6px; } .calendar-weekend-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); margin-left: 2px; } .calendar-weekend-toggle .form-check-input { margin: 0; } .calendar-card.hide-weekends .calendar-day[data-weekend="1"] { display: none; } .calendar-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .calendar-day { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; } .calendar-day-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; } .calendar-day-name { text-transform: capitalize; } .calendar-day-date { font-size: 0.85rem; color: var(--muted); } .calendar-events { display: flex; flex-direction: column; gap: 10px; } .calendar-event { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; } .calendar-event--task { border-color: rgba(11, 114, 133, 0.35); box-shadow: 0 8px 18px rgba(11, 114, 133, 0.12); } .calendar-event-time { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .calendar-event-title { font-weight: 600; } .calendar-event-title-link { font-weight: 600; color: inherit; text-decoration: none; align-self: flex-start; } .calendar-event-title-link:hover { text-decoration: underline; } .calendar-event-location { font-size: 0.85rem; color: var(--muted); } .calendar-event-link { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; align-self: flex-start; } .calendar-event-link:hover { text-decoration: underline; } .calendar-empty { color: var(--muted); font-size: 0.85rem; } #beschreibungTextarea { overflow: hidden; resize: vertical; min-height: 80px; } .aufwaende-table { font-size: 1.2em; } .aufwaende-table thead th, .aufwaende-table tbody td { line-height: 1.2; } .aufwaende-table th.col-mitarbeiter, .aufwaende-table td.col-mitarbeiter { white-space: nowrap; min-width: 170px; width: 1%; } .aufwaende-table th.col-abgerechnet, .aufwaende-table td.col-abgerechnet { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; } .aufwaende-table td.col-abgerechnet .status-pill { width: 100%; } .table#ordersTable th.col-abgeschlossen, .table#ordersTable td.col-abgeschlossen { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; } .table#ordersTable td.col-abgeschlossen .status-pill { width: 100%; } .table#invoiceTable th.col-menu, .table#invoiceTable td.col-menu, .table#offersTable th.col-menu, .table#offersTable td.col-menu, .table#ordersTable th.col-menu, .table#ordersTable td.col-menu, .table#paymentsTable th.col-menu, .table#paymentsTable td.col-menu, .table#contractsTable th.col-menu, .table#contractsTable td.col-menu { width: 2.2rem; min-width: 2.2rem; max-width: 2.2rem; text-align: center; } .table#invoiceTable th.col-num, .table#invoiceTable td.col-num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0.3rem; padding-right: 0.3rem; } .table#invoiceTable .status-pill { width: 6rem; min-width: 0; } .table#ordersTable thead th, .table#ordersTable tbody td, .table#invoiceTable thead th, .table#invoiceTable tbody td, .table#contractsTable thead th, .table#contractsTable tbody td { padding-top: 0.2rem; padding-bottom: 0.2rem; } .table#ordersTable .row-menu-trigger, .table#invoiceTable .row-menu-trigger, .table#contractsTable .row-menu-trigger { width: 24px; height: 24px; font-size: 15px; } .table#customersTable thead th, .table#customersTable tbody td { padding: 0.35rem 0.6rem; line-height: 1.2; } @media (min-width: 901px) { .aufwaende-table th.col-kunde, .aufwaende-table td.col-kunde { white-space: nowrap; min-width: 180px; } } /* ── Aufwände Mobile Card-Ansicht ──────────────────── */ .aufwaende-mobile-list { display: none; } @media (max-width: 1024px) { .aufwaende-mobile-list { display: flex; flex-direction: column; gap: 8px; } .aufwaende-desktop-table { display: none; } /* Filter kompakter auf Mobile */ #aufwaendeFilterForm .filter-grid { display: flex !important; flex-wrap: wrap; gap: 8px; } #aufwaendeFilterForm .filter-block--search { width: 100%; flex-basis: 100%; } #aufwaendeFilterForm .filter-block--search .search-input, #aufwaendeFilterForm .filter-block--search .form-control { width: 100% !important; max-width: none !important; } #aufwaendeFilterForm .filter-block--status { flex: 1; min-width: 0; } #aufwaendeFilterForm .filter-block:not(.filter-block--search):not(.filter-block--status):not(.filter-block--quick):not(.filter-block--period) { flex: 1; min-width: 0; } #aufwaendeFilterForm .filter-block--quick .quick-buttons { flex-wrap: wrap; } #aufwaendeFilterForm .filter-block--quick .quick-buttons .btn { font-size: .78rem; padding: .25rem .5rem; } #aufwaendeFilterForm .filter-block--period, #aufwaendeFilterForm .filter-actions { width: 100%; flex-basis: 100%; } /* Weniger runde Ecken auf Mobile */ .form-control, .form-select, .btn { border-radius: 6px !important; } .table-card, .form-card { border-radius: 8px !important; } .aufwaende-mobile-card { border-radius: 6px; } /* Summe Netto: Akzentfarbe, volle Breite */ .table-action-bar--compact { flex-direction: column; } .table-action-bar--compact .sum-chip, .table-card .sum-chip { width: 100% !important; display: flex !important; text-align: center; justify-content: center; background: color-mix(in srgb, var(--accent, #19a7b8) 12%, transparent) !important; color: var(--accent, #19a7b8) !important; font-weight: 600; border-radius: 6px; padding: .5rem .75rem !important; font-size: .9rem !important; } /* Export-Buttons ausblenden */ .aufwaende-toolbar .table-actions { display: none; } /* Suchfilter-Summary + Auswahlmodus: volle Breite */ .filter-collapsible__summary, .aufwaende-toolbar .filter-collapsible { width: 100%; } .filter-collapsible__summary { display: block; text-align: center; } /* Toolbar + Summe */ .aufwaende-toolbar { flex-direction: column; gap: 8px; } .aufwaende-toolbar__selection { display: none; } /* Page header kompakter */ .module-shell > .page-header { flex-direction: column; align-items: flex-start; gap: 8px; } .module-shell > .page-header .page-actions { width: 100%; } .module-shell > .page-header .page-actions .btn { width: 100%; justify-content: center; } } .aufwaende-mobile-card { position: relative; padding: 12px 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); background: var(--surface, #fff); transition: border-color .15s; } .aufwaende-mobile-card:hover { border-color: var(--accent, #19a7b8); } .aufwaende-mobile-card-link { display: block; text-decoration: none; color: var(--ink, #1e293b); } .aufwaende-mobile-card-link:hover { text-decoration: none; color: var(--ink); } .aufwaende-mobile-card-menu { position: absolute; right: 8px; bottom: 8px; } .aufwaende-mobile-card-menu .row-menu-trigger { width: 28px; height: 28px; font-size: 16px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted, #64748b); cursor: pointer; } .aufwaende-mobile-card-menu .row-menu-trigger:hover { background: var(--surface-soft, #f1f5f9); color: var(--ink, #1e293b); } .aufwaende-mobile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .aufwaende-mobile-card-head .status-pill { width: auto; min-width: 0; } .aufwaende-mobile-card-date { font-weight: 600; font-size: .85rem; } .aufwaende-mobile-card-price { margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--accent, #19a7b8); } .aufwaende-mobile-card-kunde { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aufwaende-mobile-card-desc { font-size: .82rem; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .aufwaende-mobile-card-meta { display: flex; gap: 6px; font-size: .78rem; color: var(--text-muted, #64748b); margin-top: 4px; } /* ── Rechnungen / Aufträge / Angebote Mobile Card-Ansicht ──────── */ .rechnungen-mobile-list, .auftraege-mobile-list, .angebote-mobile-list, .lieferscheine-mobile-list { display: none; } @media (max-width: 1024px) { .rechnungen-mobile-list, .auftraege-mobile-list, .angebote-mobile-list, .lieferscheine-mobile-list { display: flex; flex-direction: column; gap: 8px; } .rechnungen-desktop-table, .auftraege-desktop-table, .angebote-desktop-table, .lieferscheine-desktop-table { display: none; } /* Positionen-Panel + Sammelrechnung auf Mobile ausblenden */ #positionsPanel, #sammelrechnungForm { display: none !important; } /* Auswahlmodus + Bulk-Aktionen auf Mobile ausblenden */ .page-actions .selection-toggle { display: none; } .selection-mode-only, #bulkActionButtons { display: none !important; } /* Filter kompakter auf Mobile */ #invoiceFilterForm .filter-row, #ordersFilterForm .filter-row, #offersFilterForm .filter-row, #lieferscheineFilterForm .filter-row { display: flex !important; flex-wrap: wrap; gap: 8px; } #invoiceFilterForm .filter-block, #ordersFilterForm .filter-block, #offersFilterForm .filter-block, #lieferscheineFilterForm .filter-block { flex: 1; min-width: 0 !important; } #invoiceFilterForm .filter-block:first-child, #ordersFilterForm .filter-block:first-child, #offersFilterForm .filter-block:first-child, #lieferscheineFilterForm .filter-block:first-child { width: 100%; flex-basis: 100%; min-width: 0 !important; } #invoiceFilterForm .filter-block:first-child .search-input, #invoiceFilterForm .filter-block:first-child .form-control, #ordersFilterForm .filter-block:first-child .search-input, #ordersFilterForm .filter-block:first-child .form-control, #offersFilterForm .filter-block:first-child .search-input, #offersFilterForm .filter-block:first-child .form-control, #lieferscheineFilterForm .filter-block:first-child .search-input, #lieferscheineFilterForm .filter-block:first-child .form-control { width: 100% !important; max-width: none !important; } #invoiceFilterForm .filter-actions, #ordersFilterForm .filter-actions, #offersFilterForm .filter-actions, #lieferscheineFilterForm .filter-actions { width: 100%; flex-basis: 100%; } /* Filter: weniger Abstand nach unten */ #invoiceFilterForm { padding-bottom: 4px; } /* Sum-Chips: Rohgewinn / Netto / Brutto je 1/3, mehr Abstand zu Cards */ .sum-group { display: flex !important; width: 100%; gap: 6px; } .sum-group .sum-chip { flex: 1 1 0; width: auto !important; text-align: center; justify-content: center; font-size: .78rem !important; padding: .4rem .25rem !important; } #bulkForm .table-action-bar--compact { margin-bottom: 12px; } /* Edit-Formular: Positionen-Tabelle als Card-Layout */ .order-positions-table, .order-positions-table thead, .order-positions-table tbody, .order-positions-table tr, .order-positions-table th, .order-positions-table td { display: block; width: 100% !important; min-width: 0 !important; } .order-positions-table thead { display: none; } .order-positions-table .position-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--surface, #fff); align-items: flex-end; } .order-positions-table .position-row td { display: block; width: auto !important; padding: 0; border: none; } /* Beschreibung: volle Breite, erste Zeile */ .order-positions-table td.col-beschreibung { flex: 0 0 100%; order: -1; margin-bottom: 2px; } .order-positions-table td.col-beschreibung textarea { width: 100%; min-height: 40px; } /* ArtNr, EK ausblenden */ .order-positions-table td.col-artnr, .order-positions-table td.col-ek { display: none !important; } /* Menge schmaler, Einheit + VK breiter */ .order-positions-table td.col-menge { flex: 0.6 1 0; } .order-positions-table td.col-einheit, .order-positions-table td.col-vk { flex: 1.2 1 0; } .order-positions-table td.col-menge::before, .order-positions-table td.col-einheit::before, .order-positions-table td.col-vk::before { display: block; font-size: .65rem; color: var(--text-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .order-positions-table td.col-menge::before { content: "Menge"; } .order-positions-table td.col-einheit::before { content: "Einheit"; } .order-positions-table td.col-vk::before { content: "VK"; } /* Rohgewinn + Gesamt ausblenden */ .order-positions-table td.col-rohgewinn, .order-positions-table td.col-gesamt { display: none !important; } /* Drag-Handle + Löschen: neben VK in der gleichen Zeile */ .order-positions-table td.col-drag, .order-positions-table .position-row td:last-child { flex: 0 0 auto; } .order-positions-table .position-remove-btn { font-size: 1rem; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } /* Artikel-Modal: Card-Layout auf Mobile */ #artikelModal .modal-dialog { margin: 0.5rem; max-width: none; } #artikelModal .table thead { display: none; } #artikelModal .table, #artikelModal .table tbody, #artikelModal .table tr, #artikelModal .table td { display: block; width: 100%; } #artikelModal .table tr { padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--surface, #fff); } #artikelModal .table tr:active { background: var(--surface-soft, #f1f5f9); } #artikelModal .table td { padding: 0; border: none; } /* ID ausblenden, Beschreibung prominent */ #artikelModal .table td:nth-child(1) { font-size: .7rem; color: var(--text-muted, #64748b); margin-bottom: 2px; } #artikelModal .table td:nth-child(1)::before { content: "Art. "; } #artikelModal .table td:nth-child(2) { font-weight: 600; font-size: .9rem; margin-bottom: 4px; white-space: pre-line; } /* Einheit, EK, VK in einer Zeile */ #artikelModal .table td:nth-child(3), #artikelModal .table td:nth-child(4), #artikelModal .table td:nth-child(5) { display: inline-block; width: auto; font-size: .78rem; color: var(--text-muted, #64748b); } #artikelModal .table td:nth-child(3)::before { content: "Einheit: "; font-weight: 600; } #artikelModal .table td:nth-child(4)::before { content: "EK: "; font-weight: 600; } #artikelModal .table td:nth-child(5)::before { content: "VK: "; font-weight: 600; color: var(--accent, #19a7b8); } #artikelModal .table td:nth-child(5) { color: var(--accent, #19a7b8); font-weight: 600; } #artikelModal .table td:nth-child(3)::after, #artikelModal .table td:nth-child(4)::after { content: " · "; margin: 0 4px; } /* Lieferschein Edit: Positionen-Tabelle als Card-Layout */ #posTable, #posTable thead, #posTable tbody, #posTable tr, #posTable th, #posTable td { display: block; width: 100% !important; min-width: 0 !important; } #posTable thead { display: none; } #posTable tbody tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--surface, #fff); align-items: flex-end; } #posTable tbody tr td { display: block; width: auto !important; padding: 0; border: none; } /* Nr. ausblenden */ #posTable tbody tr td:nth-child(1) { display: none !important; } /* Beschreibung volle Breite */ #posTable tbody tr td:nth-child(2) { flex: 0 0 100%; order: -1; margin-bottom: 2px; } #posTable tbody tr td:nth-child(2) textarea { width: 100%; min-height: 40px; } /* Menge */ #posTable tbody tr td:nth-child(3) { flex: 0.8 1 0; } #posTable tbody tr td:nth-child(3)::before { display: block; font-size: .65rem; color: var(--text-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; content: "Menge"; } /* Einheit */ #posTable tbody tr td:nth-child(4) { flex: 1 1 0; } #posTable tbody tr td:nth-child(4)::before { display: block; font-size: .65rem; color: var(--text-muted, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; content: "Einheit"; } /* Herkunft ausblenden */ #posTable tbody tr td:nth-child(5) { display: none !important; } /* Löschen-Button */ #posTable tbody tr td:nth-child(6) { flex: 0 0 auto; } #posTable tbody tr td:nth-child(6) .btn { font-size: 1rem; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } /* Auftragssuche-Modal (Lieferschein): Card-Layout auf Mobile */ #orderSearchModal .modal-dialog { margin: 0.5rem; max-width: none; } #orderSearchModal .table thead { display: none; } #orderSearchModal .table, #orderSearchModal .table tbody, #orderSearchModal .table tr, #orderSearchModal .table td { display: block; width: 100%; } #orderSearchModal .table tr { padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--surface, #fff); } #orderSearchModal .table tr:active { background: var(--surface-soft, #f1f5f9); } #orderSearchModal .table td { padding: 0; border: none; } /* Auftragsnummer prominent */ #orderSearchModal .table td:nth-child(1) { font-weight: 700; font-size: .85rem; color: var(--accent, #19a7b8); margin-bottom: 2px; } #orderSearchModal .table td:nth-child(1)::before { content: "AB "; } /* Kunde */ #orderSearchModal .table td:nth-child(2) { font-weight: 600; font-size: .9rem; margin-bottom: 4px; } /* Beschreibung */ #orderSearchModal .table td:nth-child(3) { font-size: .82rem; color: var(--text-muted, #64748b); white-space: pre-line; margin-bottom: 4px; } /* Bestellt, Geliefert, Offen in einer Zeile */ #orderSearchModal .table td:nth-child(4), #orderSearchModal .table td:nth-child(5), #orderSearchModal .table td:nth-child(6) { display: inline-block; width: auto; font-size: .78rem; color: var(--text-muted, #64748b); } #orderSearchModal .table td:nth-child(4)::before { content: "Bestellt: "; font-weight: 600; } #orderSearchModal .table td:nth-child(5)::before { content: "Geliefert: "; font-weight: 600; } #orderSearchModal .table td:nth-child(6)::before { content: "Offen: "; font-weight: 600; color: var(--accent, #19a7b8); } #orderSearchModal .table td:nth-child(6) { color: var(--accent, #19a7b8); font-weight: 600; } #orderSearchModal .table td:nth-child(4)::after, #orderSearchModal .table td:nth-child(5)::after { content: " · "; margin: 0 4px; } /* Übernehmen-Button volle Breite */ #orderSearchModal .table td:nth-child(7) { margin-top: 6px; } #orderSearchModal .table td:nth-child(7) .btn { width: 100%; } /* Unterschrift: Fullscreen-Button direkt im Canvas */ #signatureFullscreenBtn { top: 6px !important; right: 6px !important; padding: 4px 8px !important; font-size: 1.2rem !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(0,0,0,.15) !important; border-radius: 6px !important; box-shadow: 0 1px 4px rgba(0,0,0,.1); } /* Form-Actions auf Mobile: Buttons volle Breite */ .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; justify-content: center; } } .rechnungen-mobile-card { position: relative; padding: 12px 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); background: var(--surface, #fff); transition: border-color .15s; } .rechnungen-mobile-card:hover { border-color: var(--accent, #19a7b8); } .rechnungen-mobile-card-link { display: block; text-decoration: none; color: var(--ink, #1e293b); } .rechnungen-mobile-card-link:hover { text-decoration: none; color: var(--ink); } .rechnungen-mobile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .rechnungen-mobile-card-head .status-pill { width: auto; min-width: 0; } .rechnungen-mobile-card-nr { font-weight: 700; font-size: .85rem; color: var(--accent, #19a7b8); } .rechnungen-mobile-card-date { font-size: .8rem; color: var(--text-muted, #64748b); } .rechnungen-mobile-card-price { margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--accent, #19a7b8); } .rechnungen-mobile-card-kunde { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rechnungen-mobile-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .rechnungen-mobile-card-menu { position: absolute; right: 8px; bottom: 8px; } .rechnungen-mobile-card-menu .row-menu-trigger { width: 28px; height: 28px; font-size: 16px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted, #64748b); cursor: pointer; } .rechnungen-mobile-card-menu .row-menu-trigger:hover { background: var(--surface-soft, #f1f5f9); color: var(--ink, #1e293b); } /* ── Aufträge + Angebote Mobile Cards (gleiche Optik wie Rechnungen) ── */ .auftraege-mobile-card, .angebote-mobile-card { position: relative; padding: 12px 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); background: var(--surface, #fff); transition: border-color .15s; } .auftraege-mobile-card:hover, .angebote-mobile-card:hover { border-color: var(--accent, #19a7b8); } .auftraege-mobile-card-link, .angebote-mobile-card-link { display: block; text-decoration: none; color: var(--ink, #1e293b); } .auftraege-mobile-card-link:hover, .angebote-mobile-card-link:hover { text-decoration: none; color: var(--ink); } .auftraege-mobile-card-head, .angebote-mobile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .auftraege-mobile-card-head .status-pill, .angebote-mobile-card-head .status-pill { width: auto; min-width: 0; } .auftraege-mobile-card-nr, .angebote-mobile-card-nr { font-weight: 700; font-size: .85rem; color: var(--accent, #19a7b8); } .auftraege-mobile-card-date, .angebote-mobile-card-date { font-size: .8rem; color: var(--text-muted, #64748b); } .auftraege-mobile-card-price, .angebote-mobile-card-price { margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--accent, #19a7b8); } .auftraege-mobile-card-kunde, .angebote-mobile-card-kunde { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auftraege-mobile-card-meta, .angebote-mobile-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .auftraege-mobile-card-menu, .angebote-mobile-card-menu { position: absolute; right: 8px; bottom: 8px; } .auftraege-mobile-card-menu .row-menu-trigger, .angebote-mobile-card-menu .row-menu-trigger { width: 28px; height: 28px; font-size: 16px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted, #64748b); cursor: pointer; } .auftraege-mobile-card-menu .row-menu-trigger:hover, .angebote-mobile-card-menu .row-menu-trigger:hover { background: var(--surface-soft, #f1f5f9); color: var(--ink, #1e293b); } /* ── Lieferscheine Mobile Cards (gleiche Optik wie Rechnungen) ── */ .lieferscheine-mobile-card { position: relative; padding: 12px 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); background: var(--surface, #fff); transition: border-color .15s; } .lieferscheine-mobile-card:hover { border-color: var(--accent, #19a7b8); } .lieferscheine-mobile-card-link { display: block; text-decoration: none; color: var(--ink, #1e293b); } .lieferscheine-mobile-card-link:hover { text-decoration: none; color: var(--ink); } .lieferscheine-mobile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .lieferscheine-mobile-card-head .status-pill { width: auto; min-width: 0; } .lieferscheine-mobile-card-nr { font-weight: 700; font-size: .85rem; color: var(--accent, #19a7b8); } .lieferscheine-mobile-card-date { font-size: .8rem; color: var(--text-muted, #64748b); } .lieferscheine-mobile-card-positions { margin-left: auto; font-size: .8rem; color: var(--text-muted, #64748b); } .lieferscheine-mobile-card-kunde { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lieferscheine-mobile-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .lieferscheine-mobile-card-menu { position: absolute; right: 8px; bottom: 8px; } .lieferscheine-mobile-card-menu .row-menu-trigger { width: 28px; height: 28px; font-size: 16px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted, #64748b); cursor: pointer; } .lieferscheine-mobile-card-menu .row-menu-trigger:hover { background: var(--surface-soft, #f1f5f9); color: var(--ink, #1e293b); } .table-select { width: 34px; } .typeahead { position: relative; z-index: 5; } .typeahead-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2000; display: none; max-height: 220px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15); } .typeahead-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: transparent; color: var(--ink); cursor: pointer; } .typeahead-item:hover { background: var(--surface-soft); } .typeahead-item.is-active { background: var(--panel-soft); box-shadow: inset 0 0 0 2px var(--accent); } .typeahead-empty { padding: 8px 12px; color: var(--muted); } .form-card { overflow: visible; } .table thead .sort-link { color: var(--ink); text-decoration: none; font-weight: 600; } .table thead .sort-link:hover { text-decoration: underline; } .table thead .sort-asc::after { content: " ^"; font-size: 0.75em; } .table thead .sort-desc::after { content: " v"; font-size: 0.75em; } .table thead th.client-sortable { cursor: pointer; user-select: none; } .table thead th.client-sortable::after { content: ""; font-size: 0.75em; } .table thead th.client-sort-asc::after { content: " ^"; } .table thead th.client-sort-desc::after { content: " v"; } .status-pill { padding: 2px 10px; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; background: var(--surface-soft); } .status-pill--yes { color: #0b7285; background: rgba(13, 148, 136, 0.14); border-color: rgba(13, 148, 136, 0.35); } .status-pill--no { color: #6b21a8; background: rgba(126, 34, 206, 0.14); border-color: rgba(126, 34, 206, 0.35); } .status-pill--warn { color: #92400e; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); } .status-pill--storno { color: #991b1b; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.4); text-decoration: line-through; } .btn-accent { border: none; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 0.5rem 1.2rem; border-radius: var(--radius-pill); font-weight: 600; } .btn-accent:hover { color: #fff; filter: brightness(0.98); } .btn-soft { border: 1px solid var(--border); color: var(--ink); background: rgba(15, 23, 42, 0.04); padding: 0.45rem 1rem; border-radius: var(--radius-pill); font-weight: 600; } .btn-ghost { border: 1px solid var(--border); color: var(--muted); background: transparent; padding: 0.45rem 1rem; border-radius: var(--radius-pill); font-weight: 600; } .btn-ghost:hover, .btn-soft:hover { color: var(--ink); border-color: rgba(11, 114, 133, 0.3); } @media (max-width: 900px) { .page-header { flex-direction: column; align-items: flex-start; } .form-grid { grid-template-columns: 1fr; } .form-grid .aufwand-field-dauer, .form-grid .aufwand-field-mitarbeiter { grid-column: auto; } .form-grid:has(.aufwand-field-dauer) { grid-template-columns: 1fr 1fr; } .form-grid:has(.aufwand-field-dauer) > *:not(.aufwand-field-dauer):not(.aufwand-field-mitarbeiter) { grid-column: 1 / -1; } } @media (max-width: 500px) { .app-shell { padding: 18px 14px 32px; } .page-header h1 { font-size: 1.5rem; } .page-actions { width: 100%; } .page-actions .btn { width: 100%; justify-content: center; } .table-card--compact { padding: 10px; } .filter-panel--compact { padding: 8px; } .filter-panel--compact .filter-row { flex-direction: column; align-items: stretch; } .filter-panel--compact .filter-block, .filter-panel--compact .filter-actions { width: 100%; } .filter-panel--compact .filter-actions { justify-content: flex-start; } .filter-panel--compact .search-input { min-width: 0; width: 100%; } .filter-collapsible__summary { width: 100%; justify-content: center; } .table-action-bar--compact { flex-direction: column; align-items: flex-start; } .table-action-bar--compact .sum-chip { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .sum-group { gap: 6px; } .sum-group .sum-chip:nth-child(3), .sum-group .sum-chip:nth-child(5) { display: none; } .table-ultra-compact thead th, .table-ultra-compact tbody td { padding: 0.25rem 0.35rem; line-height: 1.2; } .tasks-table { font-size: 0.95rem; } .tasks-table thead th, .tasks-table tbody td { line-height: 1.3; } .task-badge { padding: 1px 8px; font-size: 0.7rem; } .sum-chip, .status-pill, .task-badge { width: 12rem; } .tasks-table th:nth-child(4), .tasks-table td:nth-child(4), .tasks-table th:nth-child(5), .tasks-table td:nth-child(5), .tasks-table th:nth-child(6), .tasks-table td:nth-child(6), .tasks-table th:nth-child(8), .tasks-table td:nth-child(8) { display: none; } .form-row--comment { flex-direction: column; align-items: stretch; } .comment-submit { margin-top: 8px; } .comment-submit .btn { width: 100%; justify-content: center; } .comment-actions-inline { margin-left: 0; justify-content: flex-end; } } .stat-card { padding: 0; overflow: hidden; } .stat-tabs { padding: 0 18px; border-bottom: 1px solid var(--border); } .stat-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; padding: 12px 16px; } .stat-tabs .nav-link.active { color: var(--ink); border-color: var(--accent); background: transparent; } .stat-content { padding: 18px 20px 24px; } .stat-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; } .stat-summary { display: flex; justify-content: flex-start; margin-bottom: 14px; } .stat-chart { position: relative; height: 380px; overflow: hidden; } .stat-chart canvas { width: 100% !important; height: 100% !important; } .stat-hide-popover { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%) translateY(6px); z-index: 1060; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 10px 16px; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; white-space: nowrap; } .stat-hide-popover.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .stat-hide-popover-text { font-size: 0.88rem; font-weight: 500; } .stat-tooltip { position: absolute; z-index: 1050; width: min(500px, calc(100% - 16px)); max-width: calc(100% - 16px); padding: 0.5rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); font-size: 0.85rem; line-height: 1.35rem; pointer-events: none; } .stat-tooltip-title { font-weight: 600; margin-bottom: 0.35rem; } .stat-tooltip-body { display: grid; gap: 0.2rem; } .stat-tooltip-line { white-space: normal; word-break: break-word; } .stat-tooltip-line-split { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .stat-tooltip-line-left { flex: 1 1 auto; min-width: 0; } .stat-tooltip-line-right { flex: 0 0 auto; color: var(--muted); white-space: nowrap; } .stat-tooltip.is-scroll .stat-tooltip-body { max-height: calc(10 * 1.35rem); overflow-y: auto; padding-right: 0.35rem; } @media (max-width: 900px) { .stat-chart { height: 280px; } .stat-tooltip { width: min(300px, calc(100% - 16px)); max-width: calc(100% - 16px); } } .settings-tabs { margin-top: 8px; margin-bottom: 18px; gap: 8px; border: none; } .settings-tabs .nav-link { border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.9rem; font-weight: 600; color: var(--muted); background: var(--surface-soft); } .settings-tabs .nav-link.active { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .settings-grid { display: grid; /* min(): sonst erzwingt die Spalte auch auf schmalen Displays 520px */ grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 16px; } .settings-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 20px; text-decoration: none; color: inherit; min-height: 160px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .settings-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); } .settings-employee-grid { display: grid; gap: 20px; } .settings-employee-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; background: var(--surface-soft); display: flex; flex-direction: column; gap: 14px; } .settings-employee-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .settings-employee-header h2 { font-size: 1.05rem; margin: 0; } .settings-permissions { display: flex; flex-direction: column; gap: 8px; } .settings-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .settings-permissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .settings-month-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; } .settings-month-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--surface-soft); } .settings-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .settings-section-header h2 { margin: 0; font-size: 1.2rem; } .settings-table { margin-top: 18px; } .settings-table-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .settings-table-wide { font-size: 0.9rem; } .settings-preview { background: var(--panel-soft); font-weight: 600; color: var(--ink); } .settings-logo-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: center; } .settings-logo-preview { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--surface-soft); min-height: 120px; display: flex; align-items: center; justify-content: center; } .settings-logo-preview img { max-width: 100%; max-height: 140px; object-fit: contain; } .settings-logo-placeholder { color: var(--muted); text-align: center; } .settings-logo-actions { display: flex; flex-direction: column; gap: 10px; } .settings-testmail { margin-top: 14px; } .ai-chat-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 20px; align-items: stretch; max-width: 1200px; margin: 0 auto; width: 100%; } .ai-chat-threads, .ai-chat-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 480px; min-width: 0; } .ai-chat-threads-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai-thread-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; } .ai-thread-item { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); text-decoration: none; color: var(--ink); background: var(--surface-soft); display: flex; flex-direction: column; gap: 4px; } .ai-thread-item:hover { background: rgba(15, 23, 42, 0.06); } .ai-thread-item.is-active { border-color: rgba(11, 114, 133, 0.4); background: rgba(11, 114, 133, 0.12); } .ai-thread-title { font-weight: 600; } .ai-thread-meta { font-size: 0.8rem; color: var(--muted); } .ai-chat-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ai-chat-header-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ai-chat-title-form { display: inline-flex; align-items: center; gap: 8px; } .ai-chat-title-form .form-control { min-width: 220px; } .ai-chat-model-form { display: inline-flex; align-items: center; gap: 8px; } .ai-chat-model-form .form-select { min-width: 160px; } .ai-chat-messages { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(15, 23, 42, 0.2); background: var(--surface-soft); overflow: auto; } .ai-chat-message { max-width: 80%; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .ai-chat-message--user { align-self: flex-end; border-color: rgba(11, 114, 133, 0.4); background: rgba(11, 114, 133, 0.08); } .ai-chat-message--assistant { align-self: flex-start; } .ai-chat-message--system { align-self: center; background: rgba(15, 23, 42, 0.06); } .ai-chat-message-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; } .ai-chat-message-body { white-space: pre-wrap; } .ai-chat-message-body code { padding: 0.1rem 0.35rem; border-radius: 6px; background: rgba(15, 23, 42, 0.08); border: 1px solid var(--border); font-family: "Consolas", "Courier New", monospace; font-size: 0.9em; } .ai-chat-input { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .ai-chat-input .form-control { flex: 1 1 auto; min-width: 0; } .ai-chat-scroll-anchor { height: 1px; } .ai-voice-button svg { width: 18px; height: 18px; } .ai-voice-button.is-recording { border-color: rgba(220, 38, 38, 0.4); color: #b91c1c; } .ai-voice-button { width: 40px; height: 40px; border-radius: 999px; padding: 0; } .ai-voice-button.is-transcribing { opacity: 0.65; cursor: wait; } .ai-voice-status { min-height: 1.2rem; font-size: 0.85rem; color: var(--muted); } .ai-voice-status.is-error { color: #b91c1c; } .ai-thread-empty, .ai-chat-empty { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; border: 1px dashed rgba(15, 23, 42, 0.2); color: var(--muted); background: rgba(15, 23, 42, 0.02); text-align: center; } .status-banner--error { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.18); color: #b91c1c; } .license-expiry-banner { display: flex; align-items: center; gap: 8px; padding: 9px 20px; background: #fef3c7; border-bottom: 1px solid #fcd34d; color: #92400e; font-size: 0.84rem; } html[data-theme="dark"] .license-expiry-banner { background: rgba(251, 191, 36, .15); border-color: rgba(251, 191, 36, .3); color: #fcd34d; } /* ── Overlimit-Modal ─────────────────────────────── */ .overlimit-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; } .overlimit-modal { background: var(--surface, #fff); border: 1px solid var(--border, #dee2e6); border-radius: 12px; padding: 2rem 2rem 1.75rem; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .overlimit-modal__icon { font-size: 2.5rem; color: #dc3545; margin-bottom: .5rem; line-height: 1; } .overlimit-modal__title { font-size: 1.2rem; font-weight: 700; color: #dc3545; margin: 0 0 .6rem; } .overlimit-modal__desc { font-size: .9rem; color: var(--text-muted, #6c757d); margin: 0 0 1.25rem; line-height: 1.5; } .overlimit-modal__list { display: flex; flex-direction: column; gap: .5rem; max-height: 280px; overflow-y: auto; } .overlimit-modal__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: var(--surface-raised, #f8f9fa); border: 1px solid var(--border, #dee2e6); border-radius: 6px; } .overlimit-modal__row-label { font-size: .875rem; font-weight: 500; word-break: break-all; flex: 1; } html[data-theme="dark"] .overlimit-modal { background: #1e1e2e; border-color: #3a3a5c; } html[data-theme="dark"] .overlimit-modal__row { background: #2a2a3e; border-color: #3a3a5c; } @media (max-width: 900px) { .settings-logo-row { grid-template-columns: 1fr; } .ai-chat-layout { grid-template-columns: 1fr; } .ai-chat-message { max-width: 100%; } } @media (max-width: 600px) { .ai-chat-threads, .ai-chat-panel { padding: 12px; min-height: 0; } .ai-chat-title-form .form-control { min-width: 160px; } .ai-chat-header { flex-direction: column; align-items: flex-start; } .ai-chat-input { gap: 8px; } } .pdf-preview-dialog { max-width: 50vw; width: 50vw; margin: 1rem auto; } .pdf-preview-frame { width: 100%; height: calc(100vh - 8rem); border: 0; background: #fff; } /* ── Landing Page ── */ body.landing-page .app-shell { padding: 0; min-height: 100dvh; } body.landing-page .app-main { margin-top: 0; padding: 0; } .landing { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; } /* Nav */ .landing-nav { position: sticky; top: 0; z-index: 100; background: var(--surface-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .landing-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--border); } .landing-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .landing-brand-logo { width: 36px; height: 36px; border-radius: 10px; } .landing-nav-links { display: flex; gap: 24px; margin-right: auto; } .landing-nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.95rem; transition: color 0.15s; } .landing-nav-links a:hover { color: var(--ink); } .landing-theme-toggle { margin-left: auto; } .landing-nav-actions { display: flex; align-items: center; gap: 12px; } .landing-menu-toggle { display: none; background: none; border: none; color: var(--ink); padding: 4px; cursor: pointer; } /* Buttons */ .landing-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .landing-btn--primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px var(--glow-accent); } .landing-btn--primary:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 6px 20px var(--glow-accent); transform: translateY(-1px); } .landing-btn--outline { color: var(--ink); background: transparent; border: 1.5px solid var(--border); } .landing-btn--outline:hover { color: var(--ink); border-color: var(--accent); background: rgba(25, 167, 184, 0.06); } .landing-btn--lg { padding: 0.75rem 1.8rem; font-size: 1.05rem; } .landing-btn--block { width: 100%; } /* Container */ .landing-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; } /* Hero */ .landing-hero { padding: 80px 0 60px; } .landing-hero .landing-container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .landing-hero-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); background: rgba(25, 167, 184, 0.1); border: 1px solid rgba(25, 167, 184, 0.2); margin-bottom: 16px; } .landing-hero-content h1 { font-family: var(--font-serif); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15; margin: 0 0 20px; color: var(--ink); } .landing-hero-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-hero-sub { font-size: 1.1rem; line-height: 1.65; color: var(--muted); margin: 0 0 28px; max-width: 520px; } .landing-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .landing-hero-note { font-size: 0.85rem; color: var(--muted); margin: 0; } /* Mockup visual */ .landing-hero-visual { display: flex; justify-content: center; } .landing-hero-mockup { width: 100%; max-width: 480px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12); overflow: hidden; } .mockup-header { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-soft); } .mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); } .mockup-dot:first-child { background: #f87171; } .mockup-dot:nth-child(2) { background: #fbbf24; } .mockup-dot:nth-child(3) { background: #34d399; } .mockup-body { display: grid; grid-template-columns: 60px 1fr; min-height: 260px; } .mockup-sidebar { padding: 14px 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .mockup-nav-item { height: 8px; border-radius: 4px; background: var(--border); } .mockup-nav-item.active { background: var(--accent); opacity: 0.7; } .mockup-content { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .mockup-line { height: 10px; border-radius: 5px; background: var(--border); } .mockup-line.w80 { width: 80%; } .mockup-line.w60 { width: 60%; } .mockup-table { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .mockup-row { height: 22px; border-radius: 6px; background: var(--surface-soft); border: 1px solid var(--border); } .mockup-row.head { background: rgba(25, 167, 184, 0.08); border-color: rgba(25, 167, 184, 0.2); } /* Features */ .landing-features { padding: 80px 0; background: var(--surface-soft); } .landing-section-header { text-align: center; margin-bottom: 48px; } .landing-section-header h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 8px 0 12px; color: var(--ink); } .landing-section-header > p { color: var(--muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; } .landing-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .landing-feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: transform 0.2s, box-shadow 0.2s; } .landing-feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1); } .landing-feature-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(25, 167, 184, 0.12), rgba(107, 82, 214, 0.12)); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 16px; } .landing-feature-card h3 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 8px; color: var(--ink); } .landing-feature-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.55; margin: 0; } /* Pricing */ .landing-pricing { padding: 80px 0 100px; } .landing-billing-toggle { display: inline-flex; border-radius: 999px; border: 1px solid var(--border); overflow: hidden; margin-top: 20px; background: var(--surface-soft); } .landing-billing-btn { padding: 8px 20px; border: none; background: transparent; font-weight: 600; font-size: 0.9rem; color: var(--muted); cursor: pointer; transition: all 0.2s; } .landing-billing-btn.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .landing-badge-save { font-size: 0.75rem; font-weight: 700; color: #16a34a; margin-left: 4px; } .landing-billing-btn.active .landing-badge-save { color: #bbf7d0; } .landing-pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 780px; margin: 0 auto; } .landing-price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; position: relative; transition: transform 0.2s, box-shadow 0.2s; } .landing-price-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1); } .landing-price-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 40px var(--glow-accent); } .landing-price-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); white-space: nowrap; } .landing-price-header h3 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 6px; color: var(--ink); } .landing-price-desc { font-size: 0.88rem; color: var(--muted); margin: 0 0 20px; line-height: 1.4; } .landing-price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 24px; } .landing-price-value { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; color: var(--ink); line-height: 1; } .landing-price-period { font-size: 1rem; color: var(--muted); font-weight: 500; } .landing-price-yearly-note { font-size: 0.85rem; color: var(--muted); margin-top: -16px; margin-bottom: 8px; } .landing-price-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .landing-price-features li { font-size: 0.93rem; color: var(--ink); padding-left: 24px; position: relative; } .landing-price-features li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(25, 167, 184, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2319a7b8'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } /* Footer */ /* Roadmap */ .landing-roadmap { padding: 80px 0 60px; } .roadmap-timeline { display: flex; flex-direction: column; gap: 2.5rem; max-width: 720px; margin: 0 auto; } .roadmap-group-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border, #e2e8f0); } .roadmap-group--done .roadmap-group-title, .roadmap-group-title.roadmap-group--done { color: #22c55e; border-color: #22c55e; } .roadmap-group--progress .roadmap-group-title, .roadmap-group-title.roadmap-group--progress { color: var(--accent, #19a7b8); border-color: var(--accent, #19a7b8); } .roadmap-group--planned .roadmap-group-title, .roadmap-group-title.roadmap-group--planned { color: var(--text-muted, #64748b); border-color: var(--border, #e2e8f0); } .roadmap-items { display: flex; flex-direction: column; gap: .75rem; } .roadmap-item { display: flex; gap: 12px; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border, #e2e8f0); background: var(--surface, #fff); } .roadmap-item strong { display: block; font-size: .95rem; } .roadmap-item p { margin: .2rem 0 0; font-size: .85rem; color: var(--text-muted, #64748b); line-height: 1.5; } .roadmap-item--done { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .04); } .roadmap-item--progress { border-color: color-mix(in srgb, var(--accent, #19a7b8) 40%, transparent); background: color-mix(in srgb, var(--accent, #19a7b8) 4%, transparent); } .roadmap-item--planned { opacity: .65; } .roadmap-check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: #22c55e; color: #fff; font-size: .75rem; font-weight: 700; margin-top: 2px; } .roadmap-dot { display: block; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; margin-top: 6px; } .roadmap-item--progress .roadmap-dot { background: var(--accent, #19a7b8); } .roadmap-item--planned .roadmap-dot { background: var(--border, #cbd5e1); } @media (max-width: 640px) { .landing-roadmap { padding: 48px 0; } .roadmap-item { padding: .6rem .75rem; } } .landing-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 24px 0; background: var(--surface-soft); } .landing-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .landing-footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); } .landing-footer-brand .landing-brand-logo { width: 28px; height: 28px; } .landing-footer-links { display: flex; /* Gleiches Problem wie beim .app-footer: vier nicht umbrechbare Links summieren sich auf mehr als eine Handy-Breite. */ flex-wrap: wrap; justify-content: center; gap: 12px 20px; } .landing-footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; } .landing-footer-links a:hover { color: var(--ink); } /* ── Landing Responsive ── */ @media (max-width: 900px) { .landing-hero .landing-container { grid-template-columns: 1fr; gap: 40px; text-align: center; } .landing-hero-sub { margin-left: auto; margin-right: auto; } .landing-hero-actions { justify-content: center; } .landing-features-grid { grid-template-columns: 1fr 1fr; } .landing-pricing-grid { grid-template-columns: 1fr; max-width: 400px; } } @media (max-width: 640px) { .landing-nav-inner { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 0; justify-content: space-between; } /* Zeile 1: Logo + Theme + Hamburger */ .landing-brand { order: 1; } .landing-theme-toggle { order: 2; margin-left: auto; } .landing-menu-toggle { display: block; order: 3; flex-shrink: 0; margin-left: 8px; } .landing-nav-links { order: 5; } /* Zeile 2: Login + Testen Buttons (volle Breite) */ .landing-nav-actions { order: 4; width: 100%; display: flex; justify-content: center; gap: 8px; padding-top: 8px; margin-left: 0; } .landing-nav-actions .landing-btn { flex: 1; justify-content: center; padding: 0.45rem 0.6rem; font-size: 0.85rem; } .landing-nav-actions .landing-btn--outline { display: inline-flex; } .landing-nav-links { display: none; } .landing-container { padding: 0 16px; } .landing-nav.open .landing-nav-links { display: flex; flex-direction: column; order: 5; width: 100%; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 0; gap: 10px; } .landing-features-grid { grid-template-columns: 1fr; } .landing-hero { padding: 48px 0 40px; } .landing-hero h1 { font-size: 1.6rem; } .landing-features, .landing-pricing { padding: 48px 0; } .landing-hero-mockup { max-width: 340px; } .landing-footer-inner { flex-direction: column; text-align: center; } } /* ── Dashboard Grid ─────────────────────────────────── */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; align-items: start; } .dashboard-grid > .status-banner { grid-column: 1 / -1; } @media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 1fr; } } /* ── Mitarbeiter Dashboard ──────────────────────────── */ .dashboard-widget { max-width: none; max-height: 500px; overflow-y: auto; margin-top: 0; } .dashboard-main-card { padding: 2rem; } .dashboard-month-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .dashboard-month-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; } .dashboard-stufe-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; font-size: .875rem; font-weight: 600; } .dashboard-stufe-active { background: var(--accent, #19a7b8); color: #fff; } .dashboard-next-goal { margin-bottom: 1rem; } .dashboard-next-goal-amount { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; color: var(--accent, #19a7b8); } .dashboard-reached { margin-top: .75rem; font-size: .95rem; color: var(--text-muted, #64748b); } .dashboard-umsatz-display { margin-bottom: 1.25rem; } .dashboard-umsatz-value { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent, #19a7b8); } .dashboard-progress-wrap { max-width: 600px; margin-bottom: 1rem; } .dashboard-progress-labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-muted, #64748b); margin-bottom: .25rem; } .dashboard-progress-bar { height: 14px; background: var(--surface-2, #e2e8f0); border-radius: 999px; overflow: hidden; } .dashboard-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #19a7b8), #14b8a6); border-radius: 999px; transition: width .6s ease; min-width: 2px; } .dashboard-hint { font-size: .95rem; color: var(--text-muted, #64748b); margin: 0; } .dashboard-hint-motivate { color: var(--accent, #19a7b8); font-weight: 500; } .dashboard-stufen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .dashboard-stufe-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem .75rem; border-radius: 12px; border: 1px solid var(--border, #e2e8f0); transition: opacity .2s, border-color .2s; } .dashboard-stufe-card.dashboard-stufe-active { border-color: var(--accent, #19a7b8); background: color-mix(in srgb, var(--accent, #19a7b8) 8%, transparent); } .dashboard-stufe-card.dashboard-stufe-passed { opacity: .55; border-color: var(--border, #e2e8f0); } .dashboard-stufe-card.dashboard-stufe-dimmed { opacity: .35; } .dashboard-stufe-icon { font-size: 1.75rem; line-height: 1; margin-bottom: .35rem; } .dashboard-stufe-name { font-weight: 600; font-size: .95rem; } .dashboard-stufe-threshold { font-size: .8rem; color: var(--text-muted, #64748b); } .dashboard-stufe-reward { font-size: .8rem; font-weight: 500; color: var(--accent, #19a7b8); margin-top: .25rem; } /* Sparkle / Feuerwerk */ .sparkle-particle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 99999; opacity: 1; animation: sparkle-fly ease-out forwards; } @keyframes sparkle-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } [data-theme="dark"] .dashboard-progress-bar { background: var(--surface-2, #334155); } [data-theme="dark"] .dashboard-stufe-card.dashboard-stufe-active { background: color-mix(in srgb, var(--accent, #19a7b8) 15%, transparent); } /* ── Wiki ──────────────────────────────────────────── */ .wiki-shell { max-width: 1200px; margin: 0 auto; } .wiki-layout { display: flex; gap: 2rem; align-items: flex-start; } .wiki-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100dvh - 100px); overflow-y: auto; } .wiki-sidebar-search { margin-bottom: 1rem; } .wiki-sidebar-nav { display: flex; flex-direction: column; gap: 1px; } .wiki-sidebar-link { display: block; padding: .45rem .75rem; border-radius: var(--radius, 8px); color: var(--ink, #1e293b); text-decoration: none; font-size: .9rem; transition: background .15s; } .wiki-sidebar-link:hover { background: var(--row-hover, rgba(15,23,42,.04)); text-decoration: none; color: var(--ink); } .wiki-sidebar-link.active { background: var(--accent, #19a7b8); color: #fff; font-weight: 600; } .wiki-sidebar-link--home { font-weight: 600; margin-bottom: .5rem; border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: .6rem; border-radius: 0; } .wiki-sidebar-children { padding-left: 1rem; display: flex; flex-direction: column; gap: 1px; } .wiki-sidebar-link--child { font-size: .85rem; padding: .3rem .75rem; } .wiki-content { flex: 1; min-width: 0; } .wiki-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-muted, #64748b); margin-bottom: 1rem; } .wiki-breadcrumb a { color: var(--accent, #19a7b8); text-decoration: none; } .wiki-breadcrumb a:hover { text-decoration: underline; } .wiki-breadcrumb-sep { opacity: .5; } .wiki-article-toc { background: var(--surface-2, #f1f5f9); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 12px); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .wiki-article-toc ul { margin: .5rem 0 0; padding-left: 1.25rem; } .wiki-article-toc li { margin-bottom: .25rem; } .wiki-article-toc a { color: var(--accent, #19a7b8); text-decoration: none; font-size: .9rem; } .wiki-article-toc a:hover { text-decoration: underline; } .wiki-section { margin-bottom: 2rem; } .wiki-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border, #e2e8f0); } .wiki-section p { margin-bottom: .75rem; line-height: 1.7; } .wiki-section ul, .wiki-section ol { margin-bottom: .75rem; padding-left: 1.5rem; } .wiki-section li { margin-bottom: .3rem; line-height: 1.6; } .wiki-section code { background: var(--surface-2, #f1f5f9); padding: .15em .4em; border-radius: 4px; font-size: .9em; } .wiki-section strong { font-weight: 600; } /* Wiki TOC Grid (landing page) */ .wiki-toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; max-width: 900px; margin: 2.5rem auto 0; } .wiki-toc-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; border-radius: var(--radius-lg, 12px); border: 1px solid var(--border, #e2e8f0); background: var(--surface, #fff); text-decoration: none; color: var(--ink, #1e293b); transition: border-color .2s, box-shadow .2s; } .wiki-toc-card:hover { border-color: var(--accent, #19a7b8); box-shadow: 0 2px 12px rgba(25,167,184,.12); text-decoration: none; color: var(--ink); } .wiki-toc-card-icon { font-size: 1.5rem; margin-bottom: .5rem; } .wiki-toc-card-title { font-weight: 600; font-size: 1rem; } .wiki-toc-card-subtitle { font-size: .8rem; color: var(--text-muted, #64748b); margin-top: .2rem; } .wiki-toc-card-children { font-size: .75rem; color: var(--accent, #19a7b8); margin-top: .4rem; } /* Wiki Search */ .wiki-search-form { display: flex; max-width: 350px; } .wiki-search-input { width: 100%; } .wiki-search-results { display: flex; flex-direction: column; gap: .75rem; } .wiki-search-result { display: block; padding: 1rem 1.25rem; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); text-decoration: none; color: var(--ink, #1e293b); transition: border-color .15s; } .wiki-search-result:hover { border-color: var(--accent, #19a7b8); text-decoration: none; color: var(--ink); } .wiki-search-result strong { color: var(--accent, #19a7b8); } .wiki-search-result p { margin: .35rem 0 0; font-size: .875rem; color: var(--text-muted, #64748b); line-height: 1.5; } /* Dark mode wiki */ [data-theme="dark"] .wiki-article-toc { background: var(--surface-2, #1e293b); } @media (max-width: 768px) { .wiki-layout { flex-direction: column; } .wiki-sidebar { width: 100%; position: static; max-height: none; border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: 1rem; margin-bottom: 1rem; } } /* ── Subscription Banner ──────────────────────────────── */ .subscription-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 10px 20px; font-size: .875rem; font-weight: 500; text-align: center; flex-wrap: wrap; } .subscription-banner--trial { background: #fef3c7; color: #92400e; border-bottom: 1px solid #fcd34d; } .subscription-banner--expired { background: #fee2e2; color: #991b1b; border-bottom: 1px solid #fca5a5; } .subscription-banner-link { display: inline-block; padding: 4px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: .8rem; } .subscription-banner--trial .subscription-banner-link { background: #f59e0b; color: #fff; } .subscription-banner--trial .subscription-banner-link:hover { background: #d97706; } .subscription-banner--expired .subscription-banner-link { background: #dc2626; color: #fff; } .subscription-banner--expired .subscription-banner-link:hover { background: #b91c1c; } html[data-theme="dark"] .subscription-banner--trial { background: rgba(245, 158, 11, .15); color: #fcd34d; border-color: rgba(245, 158, 11, .3); } html[data-theme="dark"] .subscription-banner--expired { background: rgba(220, 38, 38, .15); color: #fca5a5; border-color: rgba(220, 38, 38, .3); } /* In-App-Benachrichtigungen (Glocke) */ .notif-bell { position: relative; display: inline-flex; } .notif-bell-btn { position: relative; } .notif-bell.notif-open .notif-bell-btn { border-color: var(--accent); color: var(--accent); } .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .notif-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-width: 86vw; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 1200; overflow: hidden; } @media (max-width: 700px) { /* Das Panel öffnet mittig im Header und ragte damit rechts aus dem Viewport. Ohne position auf .notif-bell wird .app-header zum Bezugsrahmen. */ .notif-bell { position: static; } .notif-panel { left: 8px; right: 8px; width: auto; max-width: none; } } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--ink); } .notif-panel-actions { display: inline-flex; align-items: center; gap: 10px; } .notif-readall { border: none; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; } .notif-readall:hover { text-decoration: underline; } .notif-clearall { color: var(--text-muted); font-size: 13px; line-height: 1; } .notif-clearall:hover { color: #e11d48; text-decoration: none; } .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { display: flex; gap: 8px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: var(--ink); } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-soft); } .notif-item--unread { background: rgba(25, 167, 184, 0.07); } .notif-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: transparent; } .notif-item--unread .notif-dot { background: var(--accent); } .notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-titel { font-size: 13px; font-weight: 600; color: var(--ink); } .notif-text { font-size: 12px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-zeit { font-size: 11px; color: var(--muted); margin-top: 1px; } .notif-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--muted); }