/* ============================================= Laktea Design System – v2 "Warm Light" Redesign 2026-04 by Claude Design ============================================= Alle Klassen bleiben identisch zur v1 – nur Werte werden aktualisiert. ============================================= */ /* Kein @import von fonts.googleapis.com mehr: Figtree liegt lokal in wwwroot/fonts/ und wird über fonts/fonts.css eingebunden (Variable Font, Gewichte 300–800 – deckt den früheren Google-Import vollständig ab). Der Import war ein Überbleibsel und übertrug bei jedem Seitenaufruf die IP-Adresse der Besucherin an Google. */ :root { /* ── Semantische Farben – Light Default ── */ --color-bg: #f7f3ef; --color-surface: #ede8e0; --color-card: #ffffff; --color-sidebar: #1c1812; --color-sidebar-text: #b8a898; --color-topbar: #ffffff; --color-hover: #f0ebe3; --color-active: #e8e0d4; --color-text: #1a1510; --color-text-secondary: #6b5c4e; --color-text-muted: #9e8e7e; --color-accent: #c47a35; --color-accent-dark: #a66228; --color-accent-light: #da9a5a; --color-accent-subtle: rgba(196, 122, 53, 0.10); --color-border: #ddd5c8; --color-border-subtle: #ede8e0; --color-btn-text: #ffffff; --color-danger: #c94040; --color-danger-subtle: rgba(201, 64, 64, 0.10); --color-success: #3a8a52; --color-success-subtle: rgba(58, 138, 82, 0.10); --color-warning: #c4832a; --color-warning-subtle: rgba(196, 131, 42, 0.10); /* ── Layout ── */ --sidebar-width: 240px; --topbar-height: 52px; /* ── Abstände ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ── Radien ── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* ── Schatten ── */ --shadow: 0 4px 24px rgba(26, 21, 16, 0.10), 0 1px 4px rgba(26, 21, 16, 0.06); --shadow-sm: 0 2px 8px rgba(26, 21, 16, 0.07), 0 1px 2px rgba(26, 21, 16, 0.04); --shadow-inset: inset 0 1px 3px rgba(26,21,16,0.06); /* ── Schrift ── */ --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: 1.875rem; --font-4xl: 2.25rem; --transition: 0.18s ease; } /* ── Dark Teal Theme (override via JS) ─────────── */ [data-theme="dark-teal"] { --color-bg: #0d1117; --color-surface: #161b22; --color-card: #1c2128; --color-sidebar: #161b22; --color-sidebar-text: #8b949e; --color-topbar: #161b22; --color-hover: #21262d; --color-active: #262c36; --color-text: #e6edf3; --color-text-secondary: #8b949e; --color-text-muted: #6e7681; --color-accent: #c47a35; --color-accent-dark: #a66228; --color-accent-light: #da9a5a; --color-accent-subtle: rgba(196, 122, 53, 0.15); --color-border: #30363d; --color-border-subtle: #21262d; --color-btn-text: #ffffff; --shadow: 0 4px 24px rgba(0,0,0,0.45); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); } /* ============================================= Reset & Basis ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); font-size: var(--font-base); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================= Scrollbalken ============================================= Radzens Standardgestaltung ist über class="rz-default-scrollbars" am abgeschaltet (siehe App.razor) – hier steht die eigene. Die Farben sind bewusst aus vorhandenen Theme-Variablen abgeleitet statt als neue --color-scrollbar-* definiert: So folgt der Scrollbalken automatisch jedem Theme, auch einem selbst zusammengestellten, ohne dass dort zusätzliche Werte gepflegt werden müssten. Dezent statt farbig – ein Scrollbalken soll die Aufmerksamkeit nicht auf sich ziehen. ============================================= */ /* Firefox kennt die ::-webkit-Pseudoelemente nicht und braucht eigene Eigenschaften. */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; background-color: transparent; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-border); /* Transparenter Rand + background-clip: Der Daumen wirkt schlanker als die Spur und bekommt Luft zum Rand, ohne dass die Trefferfläche schrumpft. */ border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-text-muted); } ::-webkit-scrollbar-corner { background-color: transparent; } /* Die Sidebar ist in jedem Theme dunkel (--color-sidebar), ein Daumen in --color-border wäre dort ein heller Balken. Deshalb dieselbe zurückhaltende Weiß-Transparenz, die in der Sidebar auch für Trennlinien verwendet wird. */ .sidebar, .sidebar * { scrollbar-color: rgba(255,255,255,0.18) transparent; } .sidebar ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.18); } .sidebar ::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.35); } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-dark); text-decoration: underline; } h1, h2, h3, h4 { color: var(--color-text); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; } /* ============================================= App Shell ============================================= */ .app-shell { display: flex; height: 100vh; overflow: hidden; } .content-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ============================================= Topbar ============================================= */ .topbar { height: var(--topbar-height); min-height: var(--topbar-height); background-color: var(--color-topbar); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 5; flex-shrink: 0; box-shadow: var(--shadow-sm); } .topbar-brand { font-size: var(--font-lg); font-weight: 800; color: var(--color-accent); letter-spacing: -0.04em; } /* ============================================= Sidebar ============================================= */ .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100vh; background-color: var(--color-sidebar); border-right: none; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 10; box-shadow: 2px 0 12px rgba(0,0,0,0.08); } /* ─── Logo-Bereich ──────────────────────────── */ .sidebar-logo-area { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: center; align-items: center; min-height: 72px; } .logo-container { position: relative; display: inline-flex; width: 90px; min-width: 40px; max-width: 190px; } .logo-img { width: 100%; height: auto; border-radius: var(--radius); display: block; cursor: pointer; } .logo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-sm) var(--space-md); border: 2px dashed rgba(255,255,255,0.15); border-radius: var(--radius); cursor: pointer; color: rgba(255,255,255,0.3); font-size: var(--font-sm); text-align: center; width: 100%; min-height: 52px; transition: border-color var(--transition), color var(--transition); } .logo-placeholder:hover { border-color: var(--color-accent); color: var(--color-accent); } .logo-clear-btn { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; background: var(--color-danger); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); z-index: 2; } .logo-container:hover .logo-clear-btn { opacity: 1; } .resize-handle { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; cursor: se-resize; background: var(--color-accent); border-radius: 3px; opacity: 0; transition: opacity var(--transition); z-index: 2; } .logo-container:hover .resize-handle { opacity: 0.75; } /* ─── Navigation ────────────────────────────── */ .sidebar-nav { flex: 1; padding: var(--space-md) var(--space-sm); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav-link { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-md); border-radius: var(--radius); color: var(--color-sidebar-text); font-size: var(--font-sm); font-weight: 500; transition: background-color var(--transition), color var(--transition); min-height: 44px; cursor: pointer; text-decoration: none; letter-spacing: 0.01em; } .nav-link:hover { background-color: rgba(255,255,255,0.07); color: #f0e8de; text-decoration: none; } .nav-link.active { background-color: var(--color-accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(196, 122, 53, 0.35); } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .nav-link.active .nav-icon, .nav-link:hover .nav-icon { opacity: 1; } /* ─── Sidebar-Fußzeile ──────────────────────── */ .sidebar-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: var(--space-sm); /* overflow-y: auto hat hier zwei Wirkungen. Sichtbar: Der Bereich scrollt, wenn er nicht ganz ins Fenster passt. Unsichtbar, aber entscheidend: Ein Flex-Element mit overflow != visible darf unter seine Inhaltshöhe schrumpfen. Ohne das blieb der Fußbereich auf voller Höhe stehen, ragte unten aus der Sidebar heraus und wurde von deren overflow: hidden abgeschnitten – bei 450 px Fensterhöhe waren "Abmelden" und die Rechtslinks nicht mehr erreichbar. */ overflow-y: auto; } /* Pflichtlinks (Impressum, Datenschutz, AGB) – bewusst zurückhaltend, aber aus jeder Seite der Anwendung heraus erreichbar. */ .sidebar-legal { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 6px var(--space-md); } .sidebar-legal a { font-size: 0.75rem; color: rgba(255,255,255,0.28); text-decoration: none; transition: color var(--transition); } .sidebar-legal a:hover { color: rgba(255,255,255,0.6); text-decoration: none; } .sidebar-version { padding: 6px var(--space-md); font-size: 0.75rem; color: rgba(255,255,255,0.2); } .sidebar-logout-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: var(--space-sm) 0; } .nav-link-sub { padding-left: calc(var(--space-md) + 1.125rem); font-size: 0.8125rem; opacity: 0.85; } .sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background-color: var(--color-danger) !important; color: #ffffff !important; font-size: 0.68rem; font-weight: 700; line-height: 1; margin-left: 0.5rem; } .msg-delete-btn { flex-shrink: 0; align-self: center; background: none; border: none; cursor: pointer; color: var(--color-danger); font-size: 1.4rem; padding: 0.5rem 0.75rem; line-height: 1; border-radius: var(--radius); transition: opacity 0.15s; } .msg-delete-btn:hover { opacity: 0.7; } .nav-link-logout { width: 100%; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.35); font-size: var(--font-sm); font-family: var(--font); text-align: left; transition: color var(--transition); } .nav-link-logout:hover { background-color: rgba(201, 64, 64, 0.15); color: #e87272; } .nav-icon-bootstrap { width: 18px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ============================================= Haupt-Inhaltsbereich ============================================= */ .main-content { flex: 1; overflow-y: auto; background-color: var(--color-bg); display: flex; flex-direction: column; } /* Direkte Kinder des Inhaltsbereichs dürfen NICHT schrumpfen. Ohne diese Regel gilt für sie der Flexbox-Standard flex-shrink: 1 – sie werden also auf die Fensterhöhe zusammengedrückt, statt überzulaufen. Und ohne Überlauf gibt es keinen Scrollbalken: Der Inhalt unterhalb des Fensterrands war schlicht nicht mehr erreichbar. Besonders heimtückisch bei .card, das overflow: hidden setzt – dadurch fällt dessen automatische Mindesthöhe auf 0, die Karte lässt sich beliebig weit stauchen und schneidet ihren Inhalt sauber ab. Aufgefallen war das in der Benutzerverwaltung, die ihre Karten direkt hier einhängt statt in .page-body. Die Regel greift für jede Seite und verhindert, dass der Fehler bei der nächsten neuen Seite wieder auftritt. */ .main-content > * { flex-shrink: 0; } /* ============================================= Seitenkopf ============================================= */ .page-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xl) var(--space-xl) var(--space-lg); border-bottom: 1px solid var(--color-border); background-color: var(--color-card); flex-wrap: wrap; gap: var(--space-md); } .page-title { font-size: var(--font-2xl); font-weight: 800; color: var(--color-text); letter-spacing: -0.03em; } .page-subtitle { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: 3px; font-weight: 400; } .page-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .page-body { padding: var(--space-xl); /* 1 0 auto statt 1: wachsen ja (füllt kurze Seiten aus), schrumpfen nein – sonst würde die Kurzschreibweise flex-shrink wieder auf 1 setzen und die Regel .main-content > * aushebeln. */ flex: 1 0 auto; } /* ============================================= Karten ============================================= */ .card { background-color: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: var(--font-base); color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); letter-spacing: -0.01em; } .card-body { padding: var(--space-lg); } /* Statistik-Karten */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); } .stat-card { background-color: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .stat-card.accent { border-color: rgba(196, 122, 53, 0.3); background: linear-gradient(135deg, var(--color-card), var(--color-accent-subtle)); } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background-color: var(--color-accent-subtle); color: var(--color-accent); } .stat-value { font-size: var(--font-4xl); font-weight: 800; color: var(--color-text); line-height: 1; letter-spacing: -0.04em; } .stat-label { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: 500; } /* ============================================= Buttons ============================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 10px var(--space-lg); min-height: 44px; font-family: var(--font); font-size: var(--font-sm); font-weight: 600; border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); white-space: nowrap; text-decoration: none; line-height: 1; letter-spacing: 0.01em; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background-color: var(--color-accent); color: #fff; border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(196, 122, 53, 0.28); } .btn-primary:hover:not(:disabled) { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; box-shadow: 0 4px 14px rgba(196, 122, 53, 0.38); text-decoration: none; } .btn-secondary { background-color: var(--color-card); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-sm); } .btn-secondary:hover:not(:disabled) { background-color: var(--color-hover); border-color: var(--color-text-muted); text-decoration: none; } .btn-danger { background-color: var(--color-danger-subtle); color: var(--color-danger); border-color: rgba(201, 64, 64, 0.3); } .btn-danger:hover:not(:disabled) { background-color: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn-success { background-color: var(--color-success); color: #fff; border-color: var(--color-success); } .btn-success:hover:not(:disabled) { filter: brightness(1.08); } .btn-ghost { background-color: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background-color: var(--color-hover); color: var(--color-text); text-decoration: none; } .btn-lg { padding: 13px var(--space-xl); font-size: var(--font-base); min-height: 52px; border-radius: var(--radius-lg); } .btn-sm { padding: 6px var(--space-md); font-size: 0.8125rem; min-height: 34px; border-radius: var(--radius-sm); } .btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius); } /* ============================================= Formulare ============================================= */ .form-group { display: flex; flex-direction: column; gap: var(--space-xs); } .form-label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.02em; } .form-control { width: 100%; padding: 11px var(--space-md); min-height: 46px; font-family: var(--font); font-size: var(--font-base); color: var(--color-text); background-color: var(--color-card); border: 1.5px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); outline: none; box-shadow: var(--shadow-inset); } .form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle), var(--shadow-inset); } .form-control::placeholder { color: var(--color-text-muted); font-weight: 400; } textarea.form-control { min-height: 120px; resize: vertical; line-height: 1.6; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .form-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; padding-top: var(--space-md); border-top: 1px solid var(--color-border); margin-top: var(--space-lg); } .search-wrapper { position: relative; } .search-icon { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } .form-control.has-icon { padding-left: 44px; } /* ============================================= Tabellen ============================================= */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .table { width: 100%; border-collapse: collapse; font-size: var(--font-base); } .table th { padding: var(--space-sm) var(--space-lg); text-align: left; font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); white-space: nowrap; } .table td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background-color var(--transition); } .table tbody tr:hover { background-color: var(--color-hover); } .table-actions { display: flex; gap: var(--space-xs); } /* ============================================= Badges ============================================= */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; } .badge-success { background-color: var(--color-success-subtle); color: var(--color-success); } .badge-warning { background-color: var(--color-warning-subtle); color: var(--color-warning); } .badge-danger { background-color: var(--color-danger-subtle); color: var(--color-danger); } .badge-accent { background-color: var(--color-accent-subtle); color: var(--color-accent); } .badge-muted { background-color: var(--color-hover); color: var(--color-text-muted); } /* ============================================= Aktivitätsliste ============================================= */ .activity-list { display: flex; flex-direction: column; } .activity-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border-subtle); transition: background-color var(--transition); } .activity-item:last-child { border-bottom: none; } .activity-item:hover { background-color: var(--color-hover); } .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .activity-dot.accent { background-color: var(--color-accent); } .activity-dot.success { background-color: var(--color-success); } .activity-dot.warning { background-color: var(--color-warning); } .activity-info { flex: 1; } .activity-title { font-weight: 600; color: var(--color-text); } .activity-meta { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: 2px; } /* ============================================= Timer ============================================= */ .timer-card { background-color: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); } .timer-display { font-size: 4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-accent); letter-spacing: 0.04em; line-height: 1; margin-bottom: var(--space-lg); } .timer-display.running { animation: pulse-accent 2.5s ease-in-out infinite; } @keyframes pulse-accent { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .timer-controls { display: flex; gap: var(--space-md); justify-content: center; } /* ============================================= Textbausteine ============================================= */ .textblock-list { display: flex; flex-direction: column; gap: var(--space-sm); } .textblock-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background-color: var(--color-card); border: 1.5px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); min-height: 56px; box-shadow: var(--shadow-sm); } .textblock-item:hover { background-color: var(--color-hover); border-color: var(--color-accent-light); box-shadow: var(--shadow); } .textblock-item.checked { background-color: var(--color-accent-subtle); border-color: var(--color-accent); } .textblock-checkbox { width: 22px; height: 22px; min-width: 22px; border: 2px solid var(--color-border); border-radius: 6px; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition), border-color var(--transition); flex-shrink: 0; color: #fff; } .textblock-item.checked .textblock-checkbox { background-color: var(--color-accent); border-color: var(--color-accent); } .textblock-content { flex: 1; } .textblock-title { font-weight: 600; color: var(--color-text); } .textblock-text { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: 4px; line-height: 1.5; } .textblock-category { font-size: var(--font-sm); color: var(--color-accent); font-weight: 600; } /* ============================================= Session-Abschluss-Leiste ============================================= */ .finish-section { padding: var(--space-xl); border-top: 1px solid var(--color-border); background-color: var(--color-card); } /* ============================================= Empty State ============================================= */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl); text-align: center; gap: var(--space-md); } .empty-state-icon { width: 56px; height: 56px; color: var(--color-text-muted); opacity: 0.35; } .empty-state-title { font-size: var(--font-xl); font-weight: 700; color: var(--color-text-secondary); letter-spacing: -0.02em; } .empty-state-text { color: var(--color-text-muted); max-width: 300px; font-size: var(--font-sm); line-height: 1.6; } /* ============================================= Modal ============================================= */ /* Vollbild-Overlay für Dialoge. Zentriert den Dialog, solange er ins Fenster passt – und bleibt bedienbar, wenn nicht. Der naheliegende Weg (align-items: center) tut Letzteres NICHT: Ein zu hoher Dialog ragt dann oben UND unten heraus, und der obere Teil ist auch mit Scrollen nicht erreichbar, weil scrollTop nicht negativ werden kann. Auf einem 720-px-Fenster stand ein 1100-px-Dialog 190 px über dem oberen Rand, und der Speichern-Button darunter war nicht erreichbar. Stattdessen: overflow-y: auto auf dem Overlay und margin: auto auf dem Dialog. Automatische Margins schlucken freien Platz (zentriert bei kurzem Inhalt), treten bei Überlänge aber zurück – oben bleibt alles erreichbar. Wird von .modal-backdrop und von .overlay-center geteilt; Letztere ist für die Dialoge gedacht, die Farbe und z-index selbst mitbringen. */ .modal-backdrop, .overlay-center { position: fixed; inset: 0; display: flex; justify-content: center; overflow-y: auto; z-index: 100; padding: var(--space-lg); } .modal-backdrop > *, .overlay-center > * { margin: auto; } .modal-backdrop { background-color: rgba(26, 21, 16, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal { background-color: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; box-shadow: var(--shadow); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--color-border); } .modal-title { font-size: var(--font-xl); font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; } .modal-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background-color: var(--color-surface); } /* ============================================= Theme-Karten ============================================= */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); } .theme-card { border: 2px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .theme-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow); } .theme-card.active { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); } .theme-preview { height: 72px; display: flex; } .theme-preview-col { flex: 1; } .theme-name { padding: var(--space-sm) var(--space-md); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); background: var(--color-card); text-align: center; } .theme-card.active .theme-name { color: var(--color-accent); } /* ============================================= Farbpaletten-Editor ============================================= */ .color-pickers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-lg); } .color-picker-row { display: flex; flex-direction: column; gap: var(--space-xs); } .color-swatch { display: flex; align-items: center; gap: var(--space-sm); } .color-swatch input[type="color"] { width: 48px; height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; padding: 3px; background: var(--color-surface); } .color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .color-swatch input[type="color"]::-webkit-color-swatch { border-radius: var(--radius-sm); border: none; } .color-hex { font-size: var(--font-sm); color: var(--color-text-muted); font-family: 'Courier New', monospace; } /* ============================================= Auth-Seiten ============================================= */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); padding: var(--space-lg); } .auth-card { width: 100%; max-width: 420px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .auth-brand { padding: var(--space-xl) var(--space-xl) var(--space-lg); text-align: center; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, var(--color-surface), var(--color-card)); } .auth-brand-name { display: block; font-size: var(--font-2xl); font-weight: 800; color: var(--color-accent); letter-spacing: -0.04em; } .auth-brand-sub { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: var(--space-xs); } .auth-title { font-size: var(--font-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-lg); letter-spacing: -0.02em; } .auth-form { display: flex; flex-direction: column; gap: var(--space-md); } .auth-error { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-danger-subtle); color: var(--color-danger); border: 1px solid rgba(201, 64, 64, 0.25); border-radius: var(--radius); font-size: var(--font-sm); margin-bottom: var(--space-sm); font-weight: 500; } .auth-success { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-success-subtle); color: var(--color-success); border: 1px solid rgba(58, 138, 82, 0.25); border-radius: var(--radius); font-size: var(--font-sm); font-weight: 500; } .auth-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); justify-content: center; align-items: center; margin-top: var(--space-lg); font-size: var(--font-sm); } .auth-links-divider { color: var(--color-text-muted); } .auth-field-error { font-size: var(--font-sm); color: var(--color-danger); font-weight: 500; } .auth-radio-group { display: flex; flex-direction: column; gap: var(--space-sm); } .auth-radio-option { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border: 1.5px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background-color var(--transition); } .auth-radio-option:has(input:checked) { border-color: var(--color-accent); background-color: var(--color-accent-subtle); } .auth-radio-option input[type="radio"] { margin-top: 3px; accent-color: var(--color-accent); flex-shrink: 0; width: 18px; height: 18px; } .auth-radio-label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; } .auth-radio-title { font-weight: 600; color: var(--color-text); font-size: var(--font-base); } .auth-radio-sub { font-size: var(--font-sm); color: var(--color-text-muted); } @keyframes auth-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .auth-spinner { display: inline-block; animation: auth-spin 0.75s linear infinite; } /* ============================================= Abo-Warnbanner ============================================= */ .abo-warnbanner { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-xl); font-size: var(--font-sm); font-weight: 600; flex-shrink: 0; } .abo-warnbanner--warnung { background-color: var(--color-warning-subtle); color: var(--color-warning); border-bottom: 1px solid rgba(196, 131, 42, 0.3); } .abo-warnbanner--abgelaufen { background-color: var(--color-danger-subtle); color: var(--color-danger); border-bottom: 1px solid rgba(201, 64, 64, 0.3); } .abo-warnbanner-text { flex: 1; } .abo-warnbanner-link { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; flex-shrink: 0; transition: opacity var(--transition); } .abo-warnbanner-link:hover { color: inherit; opacity: 0.75; } /* ============================================= Blazor Error UI ============================================= */ #blazor-error-ui { background-color: var(--color-card); border-top: 2px solid var(--color-danger); bottom: 0; color: var(--color-text); display: none; left: 0; padding: var(--space-md) var(--space-lg); position: fixed; width: 100%; z-index: 1000; font-size: var(--font-sm); box-shadow: 0 -4px 20px rgba(0,0,0,0.15); } #blazor-error-ui .reload { color: var(--color-accent); margin-left: var(--space-sm); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-lg); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } /* ============================================= Hilfsklassen ============================================= */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .flex-1 { flex: 1; } .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-accent); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .text-sm { font-size: var(--font-sm); } .text-lg { font-size: var(--font-lg); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-lg { margin-bottom: var(--space-lg); } .w-full { width: 100%; } .p-md { padding: var(--space-md); } /* ============================================= Responsive ============================================= */ @media (max-width: 768px) { :root { --sidebar-width: 200px; } .form-row { grid-template-columns: 1fr; } .page-header { padding: var(--space-lg) var(--space-md); } .page-body { padding: var(--space-lg) var(--space-md); } .timer-display { font-size: 3rem; } .color-pickers-grid { grid-template-columns: 1fr 1fr; } } /* ── Gewichtskurve ───────────────────────────────────────────────────────── */ .weight-chart-container { width: 100%; margin-top: var(--space-md); } .who-data-notice { font-size: var(--font-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); } /* ── Timer-Eingabe ───────────────────────────────────────────────────────── */ .timer-km-input::-webkit-outer-spin-button, .timer-km-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .timer-km-input[type=number] { -moz-appearance: textfield; } /* ═══════════════════════════════════════════════════════════════════════════ Zustimmung zu AGB und Datenschutzerklärung Verwendet von TermsConsentBox – auf der Einladungsseite und im Zugangsanfrage-Formular der Startseite. ═══════════════════════════════════════════════════════════════════════════ */ .terms-consent { padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .terms-consent-check { display: flex; align-items: flex-start; gap: var(--space-sm); cursor: pointer; font-size: var(--font-sm); color: var(--color-text-secondary); line-height: 1.5; } .terms-consent-check input[type=checkbox] { /* Nicht schrumpfen lassen, wenn der Text umbricht */ flex: 0 0 auto; margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); cursor: pointer; } /* Unternehmerbestätigung nach § 1 Abs. 2 der Nutzungsbedingungen – kein Ankreuzfeld, sondern ein Hinweis unmittelbar vor dem Absenden. Optisch deshalb bewusst zurückgenommen und durch eine Trennlinie von den drei Pflichthäkchen abgesetzt. */ .terms-consent-note { margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: var(--font-sm); color: var(--color-text-muted); line-height: 1.5; } /* Öffnet das jeweilige Dokument im Modal. Technisch ein