/* ════════════════════════════════════════════════════════════════════════════ CarePulz — Design-System / Theme (EINZIGE QUELLE DER WAHRHEIT) ──────────────────────────────────────────────────────────────────────────── Reine DESIGN-Schicht. Zusammen mit js/theme-config.js (Tailwind-Config + Glas-Filter) und den Assets assets/bg-glass.svg + assets/pulz-logo.svg ist dies das komplette UI-Theme. Drop-in auf bestehende Markups: NICHTS an Logik/ Funktion ändern — nur diese Datei + theme-config.js einbinden, Body-Klasse `app-bg` setzen und Karten/Buttons/Labels über die Klassen unten gestalten. Integration & Komponenten-Rezepte: siehe DESIGN-GUIDELINES.md. Markenfarben + Schrift werden HIER definiert; Utility-Klassen unten und die Tailwind-Klassen (bg-dental, text-dental, font-sans) referenzieren sie über js/theme-config.js → eine Änderung im :root-Block wirkt auf ALLE Seiten. Tenant.js kann die Farben zur Laufzeit fürs Kunden-Co-Branding überschreiben. */ :root { /* ── Markenfarben als RGB-Kanäle (QUELLE DER WAHRHEIT) ────────────────── Format "R G B" (Leerzeichen-getrennt) — ermöglicht Opazitäts-Modifier wie bg-dental/50, text-dental/70, bg-dental-50/40. Hier ändern = überall. */ --tn-primary-rgb: 51 129 246; /* #3381F6 — Haupt-Blau: Akzente, Icons, aktive Nav, Buttons, Links */ --tn-primary-light-rgb: 106 163 255; /* #6AA3FF — helles Blau: zarte Highlights */ --tn-primary-dark-rgb: 0 98 244; /* #0062F4 — Accent / tieferes Blau: Hover, Hervorhebung, 2. Serie */ --tn-primary-50-rgb: 234 242 254; /* #EAF2FE — heller Blau-Tint für Badges/Pills */ --tn-primary-100-rgb: 207 224 253; /* #CFE0FD */ --tn-primary-900-rgb: 11 18 32; /* #0B1220 — Secondary Navy: Überschriften / dunkler Text */ /* ── Solide Farbwerte (ABGELEITET — nicht separat pflegen) ────────────── */ --tn-primary: rgb(var(--tn-primary-rgb)); --tn-primary-light: rgb(var(--tn-primary-light-rgb)); --tn-primary-dark: rgb(var(--tn-primary-dark-rgb)); --tn-primary-50: rgb(var(--tn-primary-50-rgb)); /* ── Semantische Farben (Trends) ───────────────────────────────────────── */ --color-success-rgb: 51 129 246; /* #3381F6 — positiver Trend: BLAU (kein Grün!) */ --color-danger-rgb: 229 72 77; /* #E5484D — negativer Trend (rot) */ --color-success: rgb(var(--color-success-rgb)); --color-danger: rgb(var(--color-danger-rgb)); /* ── Liquid Glass (LENS A — echte Refraktion) ───────────────────────────── Das Glas-Material ist bewusst SEHR transparent: die eigentliche Optik entsteht aus backdrop-filter: url(#glassRefract) blur() saturate(), wobei #glassRefract den durchscheinenden Hintergrund per feDisplacementMap leicht verzerrt (Lensing). Tint nur als Hauch, damit Text lesbar bleibt. */ --glass-bg: rgba(255, 255, 255, 0.12); /* fast klar → Refraktion + Hintergrund liefern das Material */ --glass-bg-strong: rgba(255, 255, 255, 0.24); /* dichter (Sidebar, Suchleiste) */ --glass-border: rgba(255, 255, 255, 0.60); /* heller Glasrand */ --glass-blur: 14px; /* dezent: Refraktion soll sichtbar bleiben, nicht milchig */ --glass-sat: 170%; /* Weiche Mehrfach-Schatten in Navy-Blau → Tiefe ohne Grünstich */ --glass-shadow: 0 22px 60px rgba(11, 18, 32, 0.16), 0 8px 24px rgba(11, 18, 32, 0.10), 0 1px 2px rgba(11, 18, 32, 0.06); /* Innere Lichtkante: heller Specular oben/links, zarte Brechungskante unten */ --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(51, 129, 246, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.10); /* ── Radien ────────────────────────────────────────────────────────────── */ --radius-card: 24px; --radius-sm: 16px; --radius-pill: 9999px; /* ── App-Hintergrund: helles, fast weißes Blau-Farbfeld (Bild) ──────────── Viel Whitespace, nur ein Hauch Blau; definierte Flächen geben dem Card-Blur „Material" zum Brechen → Liquid Glass wird an den Card-Rändern sichtbar. */ --app-bg: url("../assets/bg-glass.svg") center center / cover no-repeat fixed, linear-gradient(155deg, #FCFEFF 0%, #F6FAFF 55%, #EEF4FF 100%); /* ── Schrift (Manrope = modern/skinny; system-ui Fallback) ───────────────── */ --tn-font-sans: 'Manrope', system-ui, -apple-system, sans-serif; } /* Globale Basis: Schrift zentral (vorher pro Seite dupliziert) */ body { font-family: var(--tn-font-sans); } body.tenant-loading > *, body.auth-loading > * { visibility: hidden; } /* ── CarePulz Loading-Screen ──────────────────────────────────────────────── Fullscreen-Overlay mit pulsierendem Logo + rotierenden Sprüchen. Sichtbar ab dem ersten Paint (Ausnahme von der auth/tenant-loading-Regel oben), ausgeblendet via JS (window.cpLoaderDone) sobald die Seitendaten da sind. */ #cp-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #FCFEFF 0%, #F6FAFF 55%, #EEF4FF 100%); transition: opacity .45s ease; } body.tenant-loading > #cp-loader, body.auth-loading > #cp-loader { visibility: visible; } #cp-loader.is-done { opacity: 0; pointer-events: none; } .cp-loader-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; } /* overflow: visible — der äußere Ring (r=45) ragt beim Pulsieren (scale 1.1) über die viewBox hinaus und wurde sonst an den Rändern abgeschnitten */ .cp-loader-logo { width: 76px; height: 76px; color: var(--tn-primary); overflow: visible; } .cp-loader-logo .cp-ring, .cp-loader-logo .cp-core { transform-origin: 50% 50%; transform-box: fill-box; } .cp-ring-1 { animation: cp-pulse 1.6s ease-in-out infinite; } .cp-ring-2 { animation: cp-pulse 1.6s ease-in-out .15s infinite; } .cp-ring-3 { animation: cp-pulse 1.6s ease-in-out .3s infinite; } .cp-core { animation: cp-beat 1.6s ease-in-out infinite; } @keyframes cp-pulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } } @keyframes cp-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } } .cp-loader-brand { margin-top: 16px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--tn-primary); } .cp-loader-msg { margin-top: 6px; font-size: 14px; color: #6b7280; min-height: 20px; transition: opacity .2s ease; } .cp-loader-msg.is-swapping { opacity: 0; } @media (prefers-reduced-motion: reduce) { .cp-ring-1, .cp-ring-2, .cp-ring-3, .cp-core { animation: none; } } /* Backgrounds */ .bg-dental { background-color: var(--tn-primary) !important; } .bg-dental-50 { background-color: var(--tn-primary-50) !important; } .bg-dental-light { background-color: var(--tn-primary-light) !important; } .bg-dental-dark { background-color: var(--tn-primary-dark) !important; } .hover\:bg-dental:hover { background-color: var(--tn-primary) !important; } .hover\:bg-dental-dark:hover { background-color: var(--tn-primary-dark) !important; } /* Text */ .text-dental { color: var(--tn-primary) !important; } .text-dental-dark { color: var(--tn-primary-dark) !important; } .hover\:text-dental:hover { color: var(--tn-primary) !important; } .hover\:text-dental-dark:hover { color: var(--tn-primary-dark) !important; } .group:hover .group-hover\:text-dental { color: var(--tn-primary) !important; } /* Borders */ .border-dental { border-color: var(--tn-primary) !important; } .border-dental-100 { border-color: var(--tn-primary-light) !important; } .hover\:border-dental:hover { border-color: var(--tn-primary) !important; } .hover\:border-dental-100:hover { border-color: var(--tn-primary-light) !important; } .group:hover .group-hover\:bg-dental { background-color: var(--tn-primary) !important; } .group:hover .group-hover\:text-white { color: white !important; } /* Focus rings */ .focus\:ring-dental:focus { --tw-ring-color: var(--tn-primary) !important; } .focus\:border-dental:focus { border-color: var(--tn-primary) !important; } /* Gradients */ .from-dental { --tw-gradient-from: var(--tn-primary) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; } .to-dental { --tw-gradient-to: var(--tn-primary) !important; } .to-dental-light { --tw-gradient-to: var(--tn-primary-light) !important; } .to-dental-dark { --tw-gradient-to: var(--tn-primary-dark) !important; } /* Form accents */ .accent-dental { accent-color: var(--tn-primary) !important; } /* Dot pattern overlay (login page) */ .dot-pattern { background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 24px 24px; } /* Scrollbar ausblenden (global, vorher in dashboard.html) */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ LIQUID GLASS — wiederverwendbare, token-basierte Komponenten-Klassen ═══════════════════════════════════════════════════════════════════════════ */ /* Seiten-Hintergrund (helles Blau-Feld, durch das die Cards durchscheinen) */ .app-bg { background: var(--app-bg); background-attachment: fixed; } /* ───────────────────────────────────────────────────────────────────────── LENS A — Apple "Liquid Glass" via echter Refraktion. Kerntechnik: backdrop-filter: url(#glassRefract) blur() saturate(). Der Filter (inline-SVG in jeder Seite, siehe HTML-Snippet) verzerrt den DURCHSCHEINENDEN Hintergrund via feTurbulence → feDisplacementMap und erzeugt so sichtbares, edles Lensing an/in der Card — kein milchiges Frosted. ───────────────────────────────────────────────────────────────────────── */ .glass-card, .glass-panel { position: relative; -webkit-backdrop-filter: url(#glassRefract) blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: url(#glassRefract) blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-glow); isolation: isolate; } .glass-card { background: var(--glass-bg); border-radius: var(--radius-card); } .glass-panel { background: var(--glass-bg-strong); } /* Fallback: Browser ohne url()-backdrop-filter (z. B. Safari) bekommen reinen Blur, damit Cards nie komplett undurchsichtig/kaputt wirken. */ @supports not ((backdrop-filter: url(#glassRefract)) or (-webkit-backdrop-filter: url(#glassRefract))) { .glass-card, .glass-panel { -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06); backdrop-filter: blur(22px) saturate(180%) brightness(1.06); background: rgba(255,255,255,0.30); } } /* ::before — REFRAKTIVER RIM: Die Glaskante bricht Licht am stärksten. Ein konischer Verlauf (heller Specular oben/links, blaue Brechung unten/rechts) liegt nur auf der ~1.6px Kontur (mask-exclude). Ein zweiter, leicht verschobener heller Innenrand verstärkt den „dicken Glasrand"-Eindruck. */ .glass-card::before, .glass-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; background: conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,0.98) 0deg, rgba(255,255,255,0.22) 60deg, rgba(51,129,246,0.45) 140deg, rgba(255,255,255,0.10) 210deg, rgba(160,196,255,0.55) 285deg, rgba(255,255,255,0.98) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* ::after — SPEKULARER GLANZ + TIEFENKANTE: diagonaler Highlight-Sweep oben-links (das „Lichtfenster" auf echtem Glas) plus zarte blaue Schattenkante unten → echte Glasdicke statt flacher Kachel. */ .glass-card::after, .glass-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 26%, rgba(255,255,255,0) 52%), linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 30%), linear-gradient(0deg, rgba(51,129,246,0.12) 0%, rgba(51,129,246,0) 26%); mix-blend-mode: screen; pointer-events: none; z-index: 0; } /* Inhalt über die Refraktions-/Glanz-Layer heben */ .glass-card > *, .glass-panel > * { position: relative; z-index: 2; } .glass-card.is-hoverable { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; } .glass-card.is-hoverable:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(11, 18, 32, 0.20), 0 10px 26px rgba(11, 18, 32, 0.12), var(--glass-glow); } /* UPPERCASE-Label — minimalistisch: klein, viel Laufweite, gedämpft */ .stat-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(120 132 156); } /* Große Zahl als Anker — Secondary Navy #0B1220, schlank & eng */ .stat-value { font-size: clamp(1.6rem, 2.1vw, 2.15rem); font-weight: 600; line-height: 1.05; color: rgb(var(--tn-primary-900-rgb)); letter-spacing: -0.03em; } /* ── Dunkle Signal-Kachel (GR-Navy) — Kontrastpunkt auf hellem Grund ───────── Behält Liquid-Glass-Refraktion + Rim; Text weiß, Trend/Spark in hellem Blau. */ .glass-card.is-dark { background: linear-gradient(155deg, #0C1019 0%, #06080E 100%); /* tiefes Fast-Schwarz (GR-Ton), kein Blau-Grau */ color: #fff; --color-success: var(--tn-primary-light); /* Trend & Sparkline in hellem Blau auf dunkel */ } .glass-card.is-dark .stat-label { color: rgba(255, 255, 255, 0.55); } .glass-card.is-dark .stat-value { color: #fff; } .glass-card.is-dark .text-gray-400, .glass-card.is-dark .text-gray-500 { color: rgba(255, 255, 255, 0.55) !important; } /* Pills (voll abgerundet, Outline-Stil) */ .pill { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; white-space: nowrap; } .pill-primary { color: var(--tn-primary); background: rgb(var(--tn-primary-50-rgb)); border-color: rgba(var(--tn-primary-rgb), .25); } .pill-success { color: var(--color-success); background: rgba(var(--color-success-rgb), .10); border-color: rgba(var(--color-success-rgb), .30); } .pill-danger { color: var(--color-danger); background: rgba(var(--color-danger-rgb), .10); border-color: rgba(var(--color-danger-rgb), .30); } .pill-neutral { color: rgb(86 98 122); background: rgba(255,255,255,.5); border-color: rgba(120,134,164,.30); } /* Trend-Indikatoren */ .trend-up { color: var(--color-success); } .trend-down { color: var(--color-danger); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .875rem; padding: .625rem 1.25rem; transition: all .2s ease; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--tn-primary); color: #fff; box-shadow: 0 6px 18px rgba(var(--tn-primary-rgb), .25); } .btn-primary:hover { background: var(--tn-primary-dark); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,.5); color: var(--tn-primary); border-color: var(--glass-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(255,255,255,.75); } /* Sidebar-Navigation: aktiver State als abgerundetes Highlight */ .nav-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: 14px; font-size: .9rem; font-weight: 500; color: rgb(74 86 110); transition: all .18s ease; } .nav-item:hover { background: rgba(255,255,255,.5); color: var(--tn-primary-dark); } .nav-item.is-active { background: rgba(var(--tn-primary-rgb), .12); color: var(--tn-primary); font-weight: 600; } .nav-item.is-active svg { color: var(--tn-primary); } /* ── Mobile-Navigation: schwebende Glass-Bottom-Bar (nur < lg) ───────────── Die Glass-Sidebar ist `hidden lg:flex`; auf dem Handy übernimmt diese Bar die Navigation. Markup als