/** * ============================================================================ * DAABI APP STYLESHEET * ============================================================================ * * Haupt-Stylesheet fuer die Daabi Webanwendung. * Verwendet CSS Custom Properties fuer einfaches Theming (Dark/Light Mode). * * INHALTSVERZEICHNIS: * ---------------------------------------------------------------------------- * 1. CSS VARIABLEN (Custom Properties) * 1.1 Dark Theme (Standard) * 1.2 Light Theme Override * * 2. RESET * 2.1 Box-Sizing Reset * * 3. LAYOUT * 3.1 Body Grundeinstellungen * 3.2 App Wrapper (Grid-Layout) * 3.3 Auth Visual Section (Orbs, Grid, Vignette) * 3.4 Auth Sidebar (rechte Seite mit Formular) * 3.5 Brand Logo (animiert mit Gradient & Shimmer) * * 4. KOMPONENTEN * 4.1 Typografie (Ueberschriften, Untertitel) * 4.2 Formular-Inputs * 4.3 Buttons * 4.4 Links & Checkbox (moderne Custom-Checkbox) * 4.5 Theme Toggle Button * 4.6 Alerts (Fehlermeldungen) * * 5. UTILITIES * 5.1 Flexbox Helfer * 5.2 Text-Ausrichtung * 5.3 Abstands-Helfer * * 6. ANIMATIONEN * 6.1 Eintritts-Animation * 6.2 Verzoegerungs-Klassen * * ============================================================================ */ /* ============================================================================ 1. CSS VARIABLEN (Custom Properties) ============================================================================ */ /* ---------------------------------------------------------------------------- 1.1 Dark Theme (Standard) Deep Blue / Materialize inspiriertes Design. Hoher Kontrast fuer gute Lesbarkeit bei Nacht. ---------------------------------------------------------------------------- */ :root { /* Hintergruende */ --color-bg-body: #0f1221; --color-bg-card: #1a1f36; /* Text - WCAG AA konform */ --color-text: #e4e6eb; --color-text-muted: #a3b3cc; /* Primaerfarbe (Akzent) */ --color-primary: #696cff; --color-primary-hover: #5f62e6; --color-primary-glow: rgba(105, 108, 255, 0.4); /* Formular-Inputs */ --color-input-bg: #232740; --color-input-border: #323854; --color-input-focus: #696cff; /* Border Radius */ --radius-sm: 0.5rem; --radius-md: 0.75rem; /* Schriftart - System Font Stack fuer schnellstes Laden */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } /* ---------------------------------------------------------------------------- 1.2 Light Theme Override Helle Variante fuer Tageslicht-Nutzung. Aktiviert durch data-theme="light" auf dem Element. ---------------------------------------------------------------------------- */ [data-theme="light"] { --color-bg-body: #f5f5f9; --color-bg-card: #ffffff; /* Text - WCAG AA konform (min 4.5:1 auf weiss) */ --color-text: #2e3a4d; --color-text-muted: #5a6578; --color-input-bg: #f5f5f9; --color-input-border: #d9dee3; --color-primary: #696cff; } /* ============================================================================ 2. RESET ============================================================================ */ /* ---------------------------------------------------------------------------- 2.1 Box-Sizing Reset Border-Box fuer alle Elemente - Padding und Border werden in die Breite/Hoehe eingerechnet. Vereinfacht Layout-Berechnungen. ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================================ 3. LAYOUT ============================================================================ */ /* ---------------------------------------------------------------------------- 3.1 Body Grundeinstellungen Fullscreen-Layout ohne Scrolling. Sanfter Uebergang bei Theme-Wechsel. ---------------------------------------------------------------------------- */ body { background-color: var(--color-bg-body); color: var(--color-text); font-family: var(--font-family); font-size: 16px; line-height: 1.6; height: 100vh; overflow: hidden; transition: background-color 0.3s ease; } @media (min-width: 1024px) { body { font-size: 17px; } } /* ---------------------------------------------------------------------------- 3.2 App Wrapper (Grid-Layout) Mobile: Single Column Desktop (1024px+): Zwei Spalten (Visual links | Form rechts) ---------------------------------------------------------------------------- */ .app-wrapper { display: grid; grid-template-columns: 1fr; height: 100vh; width: 100vw; } @media (min-width: 1024px) { .app-wrapper { grid-template-columns: 1fr 500px; } } /* ---------------------------------------------------------------------------- 3.3 Auth Visual Section (linke Seite) Zeigt ein dekoratives Bild/Illustration mit animiertem Hintergrund. Features: Floating Orbs, Grid-Pattern, Vignette. Versteckt auf Mobile, sichtbar ab Desktop. ---------------------------------------------------------------------------- */ .auth-visual { position: relative; display: none; overflow: hidden; background: var(--color-bg-body); } @media (min-width: 1024px) { .auth-visual { display: flex; align-items: center; justify-content: center; } } /* Subtiles Grid-Pattern im Hintergrund */ .auth-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(105, 108, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 108, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; z-index: 1; } /* Vignette-Effekt (dunkle Ecken) */ .auth-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 0%, transparent 50%, rgba(15, 18, 33, 0.4) 100% ); z-index: 2; pointer-events: none; } [data-theme="light"] .auth-visual::after { background: radial-gradient( ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100% ); } /* Floating Orbs - Animierte Gradient-Kugeln */ .visual-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 1; animation: floatOrb 20s ease-in-out infinite; } .visual-orb--primary { width: 400px; height: 400px; background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); top: -10%; left: -10%; animation-delay: 0s; } .visual-orb--secondary { width: 300px; height: 300px; background: radial-gradient(circle, #8b8eff 0%, transparent 70%); bottom: -5%; right: -5%; animation-delay: -7s; animation-duration: 25s; } .visual-orb--accent { width: 200px; height: 200px; background: radial-gradient(circle, #a855f7 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -14s; animation-duration: 30s; opacity: 0.3; } @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 30px) scale(1.02); } } /* Light Theme: Hellere Orbs */ [data-theme="light"] .visual-orb { opacity: 0.25; filter: blur(80px); } /* Bild-Wrapper fuer Glow-Effekt */ .visual-image-wrapper { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; } /* Animierter Glow hinter dem Bild */ .visual-image-glow { position: absolute; width: 80%; height: 80%; background: radial-gradient( ellipse at center, var(--color-primary) 0%, #8b8eff 30%, #a855f7 60%, transparent 70% ); filter: blur(60px); opacity: 0.4; animation: pulseGlow 6s ease-in-out infinite; z-index: -1; } @keyframes pulseGlow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } [data-theme="light"] .visual-image-glow { opacity: 0.2; filter: blur(80px); } /* Das eigentliche Bild */ .visual-image-wrapper img { max-width: 85%; max-height: 85%; object-fit: contain; position: relative; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3)); } [data-theme="light"] .visual-image-wrapper img { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1)); } /* ---------------------------------------------------------------------------- 3.4 Auth Sidebar (rechte Seite mit Formular) Enthaelt das Login-/Registrierungsformular. Hebt sich visuell durch Schatten vom Hintergrund ab. ---------------------------------------------------------------------------- */ .auth-sidebar { background: var(--color-bg-card); padding: 2rem; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 20; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; } [data-theme="light"] .auth-sidebar { box-shadow: -10px 0 40px rgba(0, 0, 0, 0.05); } @media (min-width: 1024px) { .auth-sidebar { padding: 4.5rem; } } /* ---------------------------------------------------------------------------- 3.5 Brand Logo Positioniert oben links in der visuellen Sektion. Cloud-Icon + Text mit Gradient-Glow und Shimmer-Effekt. Farbschema: Primary Lila (#696cff) ---------------------------------------------------------------------------- */ .brand-logo-absolute { position: absolute; top: 2rem; left: 2rem; z-index: 50; display: flex; align-items: center; gap: 0.6rem; } /* Cloud Icon */ .logo-icon { filter: drop-shadow(0 0 8px var(--color-primary-glow)); transition: filter 0.3s ease, transform 0.3s ease; } .brand-logo-absolute:hover .logo-icon { filter: drop-shadow(0 0 12px var(--color-primary-glow)) drop-shadow(0 0 24px var(--color-primary-glow)); transform: translateY(-2px); } /* Logo Text */ .logo-text { position: relative; font-size: 1.75rem; font-weight: 800; letter-spacing: -1px; /* Animierter Gradient-Text: Primary Lila */ background: linear-gradient( 135deg, #696cff 0%, #8b8eff 25%, #696cff 50%, #8b8eff 75%, #696cff 100% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Sanfte Gradient-Animation */ animation: logoGradient 8s ease-in-out infinite; /* Glow-Effekt via Filter */ filter: drop-shadow(0 0 8px var(--color-primary-glow)); transition: filter 0.3s ease; } .brand-logo-absolute:hover .logo-text { filter: drop-shadow(0 0 16px var(--color-primary-glow)) drop-shadow(0 0 32px var(--color-primary-glow)); animation-duration: 3s; } /* Shimmer-Overlay Effekt */ .logo-text::after { content: attr(data-text); position: absolute; left: 0; top: 0; background: linear-gradient( 120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%, transparent 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: logoShimmer 4s ease-in-out infinite; animation-delay: 2s; } @keyframes logoGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes logoShimmer { 0%, 100% { background-position: 200% 0; } 50% { background-position: -200% 0; } } /* Light Theme: Angepasste Intensitaet */ [data-theme="light"] .logo-icon { filter: drop-shadow(0 0 6px rgba(105, 108, 255, 0.3)); } [data-theme="light"] .logo-text { filter: drop-shadow(0 0 6px rgba(105, 108, 255, 0.25)); } [data-theme="light"] .brand-logo-absolute:hover .logo-icon, [data-theme="light"] .brand-logo-absolute:hover .logo-text { filter: drop-shadow(0 0 10px rgba(105, 108, 255, 0.4)) drop-shadow(0 0 20px rgba(105, 108, 255, 0.2)); } /* ============================================================================ 4. KOMPONENTEN ============================================================================ */ /* ---------------------------------------------------------------------------- 4.1 Typografie ---------------------------------------------------------------------------- */ h1 { font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; } .subtitle { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 2.5rem; } /* ---------------------------------------------------------------------------- 4.2 Formular-Inputs Moderne Input-Felder mit Icon, Floating-Label-Effekt und Glow. ---------------------------------------------------------------------------- */ .input-group { margin-bottom: 1.5rem; position: relative; } .input-label-static { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; } .input-group:focus-within .input-label-static { color: var(--color-primary); } /* Input Wrapper fuer Icon-Positionierung */ .input-wrapper { position: relative; display: flex; align-items: center; } .input-wrapper .input-icon { position: absolute; left: 1rem; width: 20px; height: 20px; color: var(--color-text-muted); transition: color 0.2s ease; pointer-events: none; z-index: 1; } .input-wrapper:focus-within .input-icon { color: var(--color-primary); } /* Input Field */ .input-field { width: 100%; padding: 0.95rem 1rem; background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.95rem; transition: all 0.3s ease; } /* Input mit Icon (links) */ .input-wrapper .input-field { padding-left: 3rem; } /* Input mit Toggle-Button (rechts) */ .input-wrapper:has(.input-toggle) .input-field { padding-right: 3rem; } .input-field:hover { border-color: var(--color-text-muted); } .input-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow), 0 4px 12px rgba(105, 108, 255, 0.15); background: var(--color-bg-card); } .input-field::placeholder { color: var(--color-text-muted); opacity: 0.4; transition: opacity 0.2s ease; } .input-field:focus::placeholder { opacity: 0.6; } /* Filled State - wenn Input einen Wert hat */ .input-field:not(:placeholder-shown) { border-color: rgba(105, 108, 255, 0.3); } /* Password Toggle Button */ .input-toggle { position: absolute; right: 0.75rem; background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; z-index: 1; } .input-toggle:hover { color: var(--color-primary); } .input-toggle svg { width: 20px; height: 20px; } /* ---------------------------------------------------------------------------- 4.3 Buttons Primaerer Action-Button mit Gradient und Glow-Effekt. Farbschema: Primary Lila (#696cff) ---------------------------------------------------------------------------- */ .btn-primary { width: 100%; padding: 0.95rem 1.5rem; background: linear-gradient(135deg, #696cff 0%, #5f62e6 100%); background-size: 100% 100%; color: white; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 0.5rem; position: relative; overflow: hidden; box-shadow: 0 4px 15px var(--color-primary-glow); } /* Shimmer-Effekt */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100% ); transition: left 0.5s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--color-primary-glow); } .btn-primary:hover::before { left: 100%; } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px var(--color-primary-glow); } /* Focus State fuer Accessibility */ .btn-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ---------------------------------------------------------------------------- 4.4 Links & Checkbox Moderne Custom-Checkbox mit animiertem Checkmark. Form-Options Container mit mehr Abstand zum Button. ---------------------------------------------------------------------------- */ /* Container fuer Checkbox + Forgot Password Link */ .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding: 0.25rem 0; } /* Footer Link (Passwort vergessen) */ .form-footer-link { color: #818cf8; font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease; font-weight: 500; position: relative; } [data-theme="light"] .form-footer-link { color: #5b5fc7; } .form-footer-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-primary); transition: width 0.3s ease; } .form-footer-link:hover { color: var(--color-primary-hover); } .form-footer-link:hover::after { width: 100%; } /* Moderne Custom Checkbox */ .checkbox-modern { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; } .checkbox-modern input { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-box { width: 1.25rem; height: 1.25rem; border: 2px solid var(--color-input-border); border-radius: 0.35rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; background: var(--color-input-bg); flex-shrink: 0; } .checkbox-box svg { width: 0.75rem; height: 0.75rem; color: white; opacity: 0; transform: scale(0.5); transition: all 0.2s ease; } /* Hover State */ .checkbox-modern:hover .checkbox-box { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } /* Checked State */ .checkbox-modern input:checked + .checkbox-box { background: linear-gradient(135deg, #696cff 0%, #8b8eff 100%); border-color: transparent; box-shadow: 0 0 12px var(--color-primary-glow); } .checkbox-modern input:checked + .checkbox-box svg { opacity: 1; transform: scale(1); } /* Focus State */ .checkbox-modern input:focus-visible + .checkbox-box { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Label Text */ .checkbox-label { font-size: 0.9rem; color: var(--color-text-muted); transition: color 0.2s ease; } .checkbox-modern:hover .checkbox-label { color: var(--color-text); } .checkbox-modern input:checked ~ .checkbox-label { color: var(--color-text); } /* Form Links Container (z.B. "Zurueck zur Anmeldung") */ .form-links { margin-top: 2rem; text-align: center; } .form-links .form-footer-link { display: inline-flex; align-items: center; gap: 0.5rem; } /* ---------------------------------------------------------------------------- 4.5 Theme Toggle Button Runder Button oben rechts zum Wechseln zwischen Dark/Light Mode. ---------------------------------------------------------------------------- */ .theme-switch { position: absolute; top: 2rem; right: 2rem; background: var(--color-input-bg); border: 1px solid var(--color-input-border); color: var(--color-text); width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 100; } .theme-switch:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ---------------------------------------------------------------------------- 4.6 Alerts (Fehlermeldungen) Rote Error-Box fuer Validierungsfehler und Login-Probleme. ---------------------------------------------------------------------------- */ .alert-error { background: rgba(255, 62, 29, 0.1); border: 1px solid rgba(255, 62, 29, 0.2); color: #ff3e1d; padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; display: flex; gap: 0.5rem; font-size: 0.9rem; align-items: center; } /* ============================================================================ 5. UTILITIES ============================================================================ */ /* ---------------------------------------------------------------------------- 5.1 Flexbox Helfer ---------------------------------------------------------------------------- */ .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } /* ---------------------------------------------------------------------------- 5.2 Text-Ausrichtung ---------------------------------------------------------------------------- */ .text-center { text-align: center; } /* ---------------------------------------------------------------------------- 5.3 Abstands-Helfer ---------------------------------------------------------------------------- */ .mt-4 { margin-top: 1.5rem; } /* ============================================================================ 6. ANIMATIONEN ============================================================================ */ /* ---------------------------------------------------------------------------- 6.1 Eintritts-Animation Elemente erscheinen mit einem sanften Fade-In und Slide-Up Effekt. Fuer gestaffeltes Erscheinen .delay-1, .delay-2, .delay-3 hinzufuegen. ---------------------------------------------------------------------------- */ .animate-entry { animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; transform: translateY(10px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------------- 6.2 Verzoegerungs-Klassen Fuer gestaffelte Animationen bei mehreren Elementen. ---------------------------------------------------------------------------- */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; }