/* ═══════════════════════════════════════════════════════════════ Ausbilden24 LMS — Glassmorphismus-Modus Aktivierung: Kein Einfluss ohne dieses Attribut. ═══════════════════════════════════════════════════════════════ */ /* ── CSS-Variablen ──────────────────────────────────────────── */ [data-glass="1"] { --glass: rgba(255,255,255,0.62); --glass-border: rgba(255,255,255,0.82); --glass-blur: blur(22px) saturate(1.5); --glass-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 1px 0 0 rgba(255,255,255,0.40) inset, 0 8px 32px rgba(30,60,110,0.10), 0 2px 8px rgba(30,60,110,0.06); --glass-shadow-sm: 0 1px 0 rgba(255,255,255,0.90) inset, 0 2px 16px rgba(30,60,110,0.07); } [data-glass="1"][data-theme="dark"] { --glass: rgba(14,19,34,0.74); --glass-border: rgba(255,255,255,0.07); --glass-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.22); --glass-shadow-sm: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 16px rgba(0,0,0,0.32); } /* ── Hintergrund (fest, scrollt nicht mit) ──────────────────── */ [data-glass="1"] body { background: transparent !important; } [data-glass="1"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 8% -8%, rgba(126,179,255,0.32) 0%, transparent 60%), radial-gradient(ellipse 65% 50% at 92% 22%, rgba(255,176,133,0.30) 0%, transparent 58%), radial-gradient(ellipse 70% 65% at 45% 105%, rgba(168,216,255,0.22) 0%, transparent 60%), linear-gradient(158deg, #d9e8ff 0%, #eef2f8 45%, #f8ede4 100%); } [data-glass="1"][data-theme="dark"] body::before { background: radial-gradient(ellipse 70% 50% at 5% -5%, rgba( 20, 50,120,0.60) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 95% 18%, rgba( 80, 28, 0,0.55) 0%, transparent 55%), radial-gradient(ellipse 65% 60% at 45% 108%, rgba( 8, 18, 48,0.65) 0%, transparent 60%), linear-gradient(158deg, #04071a 0%, #090d1c 45%, #120608 100%); } /* ── Header ─────────────────────────────────────────────────── */ [data-glass="1"] .site-header, [data-glass="1"][data-theme="dark"] .site-header { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow-sm); } /* .main-nav hat im Dark-Mode einen eigenen Hintergrund → transparent setzen */ [data-glass="1"][data-theme="dark"] .main-nav { background: transparent !important; } /* Mobile: nav öffnet als eigenes Panel → soliden Hintergrund benötigt */ @media (max-width: 768px) { [data-glass="1"]:not([data-theme="dark"]) .main-nav { background: rgba(255,255,255,0.97) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-glass="1"][data-theme="dark"] .main-nav { background: #1a1f2e !important; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Sidebar ─────────────────────────────────────────────────── */ [data-glass="1"] .dash-sidebar, [data-glass="1"][data-theme="dark"] .dash-sidebar { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--glass-border) !important; } [data-glass="1"] .dash-sidebar-top { border-bottom-color: var(--glass-border) !important; } [data-glass="1"] .dash-tree-children { background: rgba(0,0,0,0.025) !important; } [data-glass="1"][data-theme="dark"] .dash-tree-children { background: rgba(0,0,0,0.15) !important; } /* ── Hauptbereich ────────────────────────────────────────────── */ [data-glass="1"] .dash-main, [data-glass="1"][data-theme="dark"] .dash-main { background: transparent !important; } /* ── Cards ───────────────────────────────────────────────────── */ [data-glass="1"] .card, [data-glass="1"] .dash-stat-card, [data-glass="1"] .q-card, [data-glass="1"] .res-card, [data-glass="1"] .fg-done-card, [data-glass="1"] .wiki-card, [data-glass="1"][data-theme="dark"] .card, [data-glass="1"][data-theme="dark"] .dash-stat-card, [data-glass="1"][data-theme="dark"] .q-card { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; position: relative; overflow: hidden; } /* Obere Glanzlinie auf Cards */ [data-glass="1"] .card::before, [data-glass="1"] .dash-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.90) 25%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.90) 75%, transparent 100%); pointer-events: none; z-index: 1; } [data-glass="1"][data-theme="dark"] .card::before, [data-glass="1"][data-theme="dark"] .dash-stat-card::before { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.10) 75%, transparent 100%); } /* ── Buttons ─────────────────────────────────────────────────── */ [data-glass="1"] .btn-primary { background: linear-gradient(165deg, #2a5099 0%, #1e3c6e 50%, #152d52 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 4px 14px rgba(30,60,110,0.35), 0 1px 3px rgba(0,0,0,0.20) !important; } [data-glass="1"] .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 7px 22px rgba(30,60,110,0.45), 0 2px 6px rgba(0,0,0,0.22) !important; } [data-glass="1"] .btn-accent { background: linear-gradient(165deg, #f07a36 0%, #e8601a 50%, #c44e12 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 4px 14px rgba(232,96,26,0.38), 0 1px 3px rgba(0,0,0,0.20) !important; } [data-glass="1"] .btn-accent:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 7px 22px rgba(232,96,26,0.48), 0 2px 6px rgba(0,0,0,0.20) !important; } [data-glass="1"] .btn-outline { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 2px 8px rgba(30,60,110,0.08), 0 1px 2px rgba(0,0,0,0.06) !important; } [data-glass="1"] .btn-outline:hover:not(:disabled) { color: var(--primary) !important; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 4px 14px rgba(30,60,110,0.14), 0 1px 3px rgba(0,0,0,0.08) !important; } [data-glass="1"] .btn-gray, [data-glass="1"][data-theme="dark"] .btn-gray { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 2px 6px rgba(30,60,110,0.06) !important; } [data-glass="1"] .lang-btn { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 2px 6px rgba(30,60,110,0.06) !important; } /* ── Webinar-Kachel: orange Tinting ─────────────────────────── */ [data-glass="1"] .dash-webinar-card, [data-glass="1"][data-theme="dark"] .dash-webinar-card { background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(255,160,60,0.55) 0%, transparent 55%), radial-gradient(ellipse 80% 80% at 0% 100%, rgba(220,70,10,0.40) 0%, transparent 55%), linear-gradient(135deg, #e8601a 0%, #f07a36 50%, #e05010 100%) !important; } [data-glass="1"] .dash-webinar-card, [data-glass="1"] .dash-webinar-card .dash-stat-val, [data-glass="1"] .dash-webinar-card .dash-stat-lbl { color: #fff !important; } [data-glass="1"] .dash-webinar-card .dash-webinar-topic-link { color: rgba(255,255,255,0.80) !important; } [data-glass="1"] .dash-webinar-card .dash-webinar-topic-link:hover { color: #fff !important; } /* Accent-Linie oben in orange */ [data-glass="1"] .dash-webinar-card::before { background: linear-gradient(90deg, transparent 0%, rgba(232,96,26,0.70) 25%, rgba(232,96,26,0.92) 50%, rgba(232,96,26,0.70) 75%, transparent 100%); } /* ── Fortschrittsbalken ──────────────────────────────────────── */ [data-glass="1"] .progress-fill, [data-glass="1"] .header-progress-fill { box-shadow: 0 0 6px rgba(232,96,26,0.45); } /* ── Dropdown ────────────────────────────────────────────────── */ [data-glass="1"] .user-dropdown, [data-glass="1"][data-theme="dark"] .user-dropdown { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border) !important; } /* Mobile: backdrop-filter unreliable → solid background */ @media (max-width: 768px) { [data-glass="1"]:not([data-theme="dark"]) .user-dropdown { background: rgba(255,255,255,0.97) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-glass="1"][data-theme="dark"] .user-dropdown { background: #1a1f2e !important; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Formularfelder ──────────────────────────────────────────── */ [data-glass="1"] .form-control { background: rgba(255,255,255,0.60) !important; border-color: rgba(30,60,110,0.18) !important; } [data-glass="1"][data-theme="dark"] .form-control { background: rgba(14,19,34,0.65) !important; border-color: var(--glass-border) !important; } /* ── Quiz-Antworten ──────────────────────────────────────────── */ [data-glass="1"] .ans { background: rgba(255,255,255,0.35) !important; border-color: var(--glass-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 2px 6px rgba(30,60,110,0.05) !important; } [data-glass="1"][data-theme="dark"] .ans { background: rgba(255,255,255,0.04) !important; border-color: var(--glass-border) !important; } [data-glass="1"] .ans:hover:not(.locked) { background: rgba(30,60,110,0.07) !important; border-color: rgba(30,60,110,0.22) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 4px 12px rgba(30,60,110,0.10) !important; } [data-glass="1"] .ans.sel { background: rgba(30,60,110,0.09) !important; border-color: var(--primary) !important; } [data-glass="1"] .ans.ok { background: var(--success-bg) !important; border-color: var(--success) !important; } [data-glass="1"] .ans.bad { background: var(--danger-bg) !important; border-color: var(--danger) !important; } [data-glass="1"] .ans.miss { background: rgba(39,174,96,0.05) !important; border-color: var(--success) !important; } /* ── Dashboard-Begrüßungsbereich ─────────────────────────────── */ [data-glass="1"] .dash-welcome { /* Radiales Innen-Glow aus zwei Ecken */ background: radial-gradient(ellipse 65% 70% at 0% 0%, rgba(30,60,110,0.07) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(232,96,26,0.05) 0%, transparent 60%), var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 1px 0 0 rgba(255,255,255,0.40) inset, 0 10px 36px rgba(30,60,110,0.12), 0 2px 8px rgba(30,60,110,0.07); position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; } [data-glass="1"][data-theme="dark"] .dash-welcome { background: radial-gradient(ellipse 65% 70% at 0% 0%, rgba(30,60,110,0.35) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(232,96,26,0.12) 0%, transparent 60%), var(--glass) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 1px 0 0 rgba(255,255,255,0.04) inset, 0 10px 36px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.22); } /* Motivationstext – nur im Glas-Modus sichtbar */ .dash-welcome-motivate { display: none; } [data-glass="1"] .dash-welcome-motivate { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 5px; line-height: 1.5; } /* Zugangs-Pill – nur im Glas-Modus sichtbar */ .dash-welcome-access-pill { display: none; } [data-glass="1"] .dash-welcome-access-pill { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; align-self: flex-start; flex-shrink: 0; background: rgba(39,174,96,0.13); color: var(--success); border: 1px solid rgba(39,174,96,0.28); } [data-glass="1"] .dash-welcome-access-pill.warn { background: rgba(243,156,18,0.13); color: var(--warn); border-color: rgba(243,156,18,0.30); } [data-glass="1"] .dash-welcome-access-pill.expired { background: rgba(231,76,60,0.12); color: var(--danger); border-color: rgba(231,76,60,0.28); } /* ── Login / Demo-Seiten ─────────────────────────────────────── */ [data-glass="1"] .login-body { background: transparent !important; } [data-glass="1"] #net-canvas { opacity: 0.35; } [data-glass="1"] .login-card { background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; position: relative; overflow: hidden; } [data-glass="1"] .login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.90) 25%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.90) 75%, transparent 100%); pointer-events: none; z-index: 1; } [data-glass="1"][data-theme="dark"] .login-card::before { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.10) 75%, transparent 100%); } /* Eingabefelder mit Icon */ [data-glass="1"] .input-icon-wrap { position: relative; } [data-glass="1"] .input-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; align-items: center; } [data-glass="1"] .input-icon-wrap .form-control { padding-left: 38px; } [data-glass="1"] .input-icon-wrap .form-control.input-has-toggle { padding-right: 38px; } /* Passwort-Sichtbarkeits-Toggle */ [data-glass="1"] .input-pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 2px; cursor: pointer; color: var(--muted); display: flex; align-items: center; line-height: 1; transition: color 0.15s; } [data-glass="1"] .input-pw-toggle:hover { color: var(--text); } /* ── Testimonial-Block ───────────────────────────────────── */ [data-glass="1"] #testi-wrap { background: radial-gradient(ellipse 65% 60% at 0% 0%, rgba(13,148,136,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 55% at 100% 100%, rgba(15,118,110,0.12) 0%, transparent 60%), var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; color: var(--text) !important; position: relative; overflow: hidden; } /* Teal-Akzentlinie oben */ [data-glass="1"] #testi-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(13,148,136,0.60) 25%, rgba(13,148,136,0.88) 50%, rgba(13,148,136,0.60) 75%, transparent 100%); pointer-events: none; z-index: 1; } /* CTA-Button "Foto einsenden →" */ [data-glass="1"] #testi-open { background: linear-gradient(165deg, #0d9488 0%, #0f766e 50%, #0d7a70 100%) !important; color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 4px 14px rgba(13,148,136,0.38) !important; } [data-glass="1"] #testi-open:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 7px 22px rgba(13,148,136,0.50) !important; transform: translateY(-1px); } /* Submit-Button */ [data-glass="1"] #testi-submit { background: linear-gradient(165deg, #0d9488 0%, #0f766e 50%, #0d7a70 100%) !important; color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 4px 14px rgba(13,148,136,0.38) !important; } /* Abbrechen-Button */ [data-glass="1"] #testi-cancel { background: var(--glass) !important; color: var(--text) !important; border-color: var(--glass-border) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* Trennlinie im Formular-Bereich */ [data-glass="1"] #testi-form-area { border-top-color: var(--border) !important; } /* Textarea */ [data-glass="1"] #testi-comment { background: rgba(255,255,255,0.60) !important; border-color: rgba(30,60,110,0.18) !important; color: var(--text) !important; } [data-glass="1"] #testi-comment::placeholder { color: var(--muted) !important; } /* File-Input */ [data-glass="1"] #testi-photo { background: rgba(255,255,255,0.50) !important; border-color: rgba(30,60,110,0.18) !important; color: var(--text) !important; } [data-glass="1"] #testi-photo::file-selector-button { background: rgba(30,60,110,0.10) !important; color: var(--text) !important; border-color: rgba(30,60,110,0.22) !important; } /* Dark-Mode-Anpassungen */ [data-glass="1"][data-theme="dark"] #testi-wrap { background: radial-gradient(ellipse 65% 60% at 0% 0%, rgba(13,148,136,0.28) 0%, transparent 60%), radial-gradient(ellipse 50% 55% at 100% 100%, rgba(13,148,136,0.14) 0%, transparent 60%), var(--glass) !important; } [data-glass="1"][data-theme="dark"] #testi-comment, [data-glass="1"][data-theme="dark"] #testi-photo { background: rgba(14,19,34,0.65) !important; border-color: var(--glass-border) !important; } [data-glass="1"][data-theme="dark"] #testi-photo::file-selector-button { background: rgba(255,255,255,0.08) !important; color: var(--text) !important; border-color: var(--glass-border) !important; }