/* ============================================= SCHULUNGSPORTAL – Stylesheet Design: Clean & Modern, Inter + DM Serif ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #111318; --ink-muted: #6b7280; --ink-light: #9ca3af; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #f1f3f6; --border: #e4e7ec; --accent: #5e7a33; --accent-2: #e7f0d0; --brand: #d4e3ac; --ok: #16a34a; --ok-bg: #dcfce7; --fail: #dc2626; --fail-bg: #fee2e2; --warn: #b45309; --warn-bg: #fef3c7; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04); color-scheme: light; } /* ===== DARK MODE ===================================================== Farben werden über CSS-Variablen umgeschaltet: • Manuelle Wahl: (per Umschalter + localStorage) • Ohne Wahl: folgt der System-Einstellung (prefers-color-scheme) ==================================================================== */ :root[data-theme="dark"] { --ink: #e6e8ec; --ink-muted: #9aa1ad; --ink-light: #6b7280; --surface: #1a1d24; --surface-2: #121419; --surface-3: #262b35; --border: #2c313d; --accent: #7fa53f; --accent-2: #26331a; --brand: #d4e3ac; --ok: #4ade80; --ok-bg: #10281b; --fail: #f87171; --fail-bg: #331717; --warn: #fbbf24; --warn-bg: #362a0e; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e6e8ec; --ink-muted: #9aa1ad; --ink-light: #6b7280; --surface: #1a1d24; --surface-2: #121419; --surface-3: #262b35; --border: #2c313d; --accent: #7fa53f; --accent-2: #26331a; --brand: #d4e3ac; --ok: #4ade80; --ok-bg: #10281b; --fail: #f87171; --fail-bg: #331717; --warn: #fbbf24; --warn-bg: #362a0e; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); color-scheme: dark; } } body { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink); background: var(--surface-2); min-height: 100vh; display: flex; flex-direction: column; } /* ---- HEADER ---- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .header-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; height: 60px; display: flex; align-items: center; gap: 2rem; } .logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; flex-shrink: 0; } .main-nav { display: flex; gap: .25rem; flex: 1; } .main-nav a { text-decoration: none; color: var(--ink-muted); font-size: 14px; padding: .35rem .75rem; border-radius: 6px; transition: background .15s, color .15s; } .main-nav a:hover { background: var(--surface-3); color: var(--ink); } .main-nav a.active { background: var(--accent-2); color: var(--accent); font-weight: 500; } .header-user { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .user-name { font-size: 14px; color: var(--ink-muted); } /* ---- NAV: DROPDOWN-GRUPPE ---- */ .nav-group { position: relative; } .nav-group-btn { display: inline-flex; align-items: center; gap: .3rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink-muted); padding: .35rem .75rem; border-radius: 6px; transition: background .15s, color .15s; } .nav-group-btn:hover { background: var(--surface-3); color: var(--ink); } .nav-group-btn svg { width: 14px; height: 14px; transition: transform .15s; } .nav-group.open .nav-group-btn { background: var(--surface-3); color: var(--ink); } .nav-group.open .nav-group-btn svg { transform: rotate(180deg); } .nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: .4rem; z-index: 100; } .nav-group:hover .nav-dropdown, .nav-group.open .nav-dropdown { display: block; } .nav-dropdown a { display: block; padding: .55rem .7rem; border-radius: 7px; font-size: 14px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; } .nav-dropdown a:hover { background: var(--surface-3); color: var(--ink); } .nav-dropdown a.active { background: var(--accent-2); color: var(--accent); font-weight: 500; } .nav-group-btn.active { color: var(--accent); font-weight: 500; } .nav-group.active .nav-group-btn { background: var(--accent-2); } /* ---- USER-MENÜ (Avatar) ---- */ .nav-toggle { display: none; margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink); padding: .3rem; border-radius: 8px; } .nav-toggle:hover { background: var(--surface-3); } .nav-toggle svg { width: 24px; height: 24px; display: block; } .user-menu { position: relative; } .user-btn { display: flex; align-items: center; gap: .5rem; background: none; border: none; cursor: pointer; font-family: inherit; padding: .25rem .4rem; border-radius: 999px; transition: background .15s; } .user-btn:hover { background: var(--surface-3); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; letter-spacing: .02em; } .user-btn .user-name { color: var(--ink); } .user-btn svg { width: 14px; height: 14px; color: var(--ink-muted); transition: transform .15s; } .user-menu.open .user-btn svg { transform: rotate(180deg); } .user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: .4rem; z-index: 100; } .user-menu.open .user-dropdown { display: block; } .user-dropdown a { display: block; padding: .55rem .7rem; border-radius: 7px; font-size: 14px; color: var(--ink-muted); text-decoration: none; transition: background .12s, color .12s; } .user-dropdown a:hover { background: var(--surface-3); color: var(--ink); } /* ---- MAIN ---- */ .page-main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; } /* ---- FOOTER ---- */ .site-footer { text-align: center; padding: 1.25rem; font-size: 13px; color: var(--ink-light); border-top: 1px solid var(--border); background: var(--surface); } .foot-links { margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 12px; } .foot-links a { color: var(--ink-muted); text-decoration: none; transition: color .12s; } .foot-links a:hover { color: var(--accent); } .foot-sep { color: var(--border); } /* ---- DEZENTE INFO-EINSTIEGE (Changelog / Lizenz) ---- */ .info-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .info-link { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--ink-muted); text-decoration: none; padding: .5rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); transition: border-color .15s, color .15s, background .15s; } .info-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-2); } .info-link svg { width: 16px; height: 16px; } /* ---- PAGE TITLES ---- */ .page-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; font-weight: 400; line-height: 1.2; color: var(--ink); margin-bottom: .5rem; } .page-subtitle { color: var(--ink-muted); font-size: 15px; margin-bottom: 2rem; } /* ---- CARDS ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem; } .card + .card { margin-top: 1rem; } .card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .card-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-2); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon svg { width: 20px; height: 20px; } .card-title { font-size: 16px; font-weight: 600; } .card-desc { font-size: 13px; color: var(--ink-muted); margin-top: .15rem; } /* ---- TRAINING GRID ---- */ .training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .training-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; transition: box-shadow .15s, transform .15s; } .training-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .training-card-top { display: flex; align-items: flex-start; gap: 1rem; } .training-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .training-icon.blue { background: var(--accent-2); color: var(--accent); } .training-icon.green { background: var(--ok-bg); color: var(--ok); } .training-icon.amber { background: var(--warn-bg); color: var(--warn); } .training-icon svg { width: 24px; height: 24px; } .training-name { font-weight: 600; font-size: 15px; } .training-duration { font-size: 13px; color: var(--ink-muted); } /* ---- BADGES ---- */ .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; font-weight: 500; padding: .25rem .65rem; border-radius: 20px; } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-fail { background: var(--fail-bg); color: var(--fail); } .badge-expired { background: var(--warn-bg); color: var(--warn); } .badge-pending { background: var(--surface-3); color: var(--ink-muted); } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .15s, opacity .15s; line-height: 1; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { opacity: .88; } .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--ink); } .btn-secondary:hover { background: var(--surface-3); } .btn-danger { background: var(--fail); color: #fff; } .btn-danger:hover { opacity: .88; } .btn-ghost { background: none; border: none; color: var(--ink-muted); font-size: 14px; cursor: pointer; padding: .35rem .6rem; border-radius: 6px; text-decoration: none; } .btn-ghost:hover { background: var(--surface-3); color: var(--ink); } .btn-sm { padding: .4rem .85rem; font-size: 13px; } /* ---- FORMS ---- */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: .4rem; } .form-hint { font-size: 12px; color: var(--ink-muted); margin-top: .25rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: .6rem .85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,122,51,.18); } .form-textarea { resize: vertical; min-height: 120px; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; } /* ---- TABLE ---- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface-2); } /* ---- ALERTS ---- */ .alert { padding: .85rem 1.1rem; border-radius: 8px; font-size: 14px; margin-bottom: 1.25rem; border: 1px solid transparent; } .alert-error { background: var(--fail-bg); color: var(--fail); border-color: #fca5a5; } .alert-success { background: var(--ok-bg); color: var(--ok); border-color: #86efac; } .alert-info { background: var(--accent-2); color: var(--accent); border-color: #93c5fd; } /* ---- LOGIN PAGE ---- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-2); padding: 2rem; } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2.5rem; width: 100%; max-width: 400px; } .login-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 17px; margin-bottom: 1.75rem; color: var(--ink); } /* ---- QUIZ ---- */ .quiz-question { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; } .quiz-q-text { font-weight: 500; margin-bottom: 1rem; } .quiz-options { display: flex; flex-direction: column; gap: .5rem; } .quiz-option { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; transition: background .12s, border-color .12s; } .quiz-option:hover { background: var(--surface-3); border-color: var(--accent); } .quiz-option input[type=radio] { accent-color: var(--accent); } /* ---- TRAINING CONTENT ---- */ .training-content { max-width: 720px; } .training-content h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.4rem; font-weight: 400; margin: 1.75rem 0 .6rem; } .training-content h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; } .training-content p { margin-bottom: .85rem; color: #374151; } .training-content ul, .training-content ol { padding-left: 1.5rem; margin-bottom: .85rem; } .training-content li { margin-bottom: .35rem; } .training-content .highlight-box { background: var(--accent-2); border-left: 3px solid var(--accent); padding: .85rem 1.1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: 14px; } /* ---- PROGRESS ---- */ .progress-bar-wrap { background: var(--surface-3); border-radius: 20px; height: 6px; overflow: hidden; margin-bottom: 1.5rem; } .progress-bar-fill { background: var(--accent); height: 100%; border-radius: 20px; transition: width .4s ease; } /* ---- ADMIN STATS ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); } .stat-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; line-height: 1; margin-bottom: .25rem; } .stat-label { font-size: 13px; color: var(--ink-muted); } .stat-ok .stat-num { color: var(--ok); } .stat-fail .stat-num { color: var(--fail); } .stat-warn .stat-num { color: var(--warn); } /* ---- TABS ---- */ .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .tab-btn { background: none; border: none; padding: .65rem 1rem; font-size: 14px; font-family: inherit; cursor: pointer; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ---- MODAL ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.18); width: 100%; max-width: 480px; padding: 2rem; } .modal-title { font-size: 17px; font-weight: 600; margin-bottom: 1.25rem; } .modal-footer { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; } /* ---- UTILS ---- */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mt-4 { margin-top: 1rem; } .text-muted { color: var(--ink-muted); font-size: 13px; } .text-sm { font-size: 13px; } .font-500 { font-weight: 500; } .hidden { display: none !important; } /* ---- RESPONSIVE ---- */ @media (max-width: 860px) { .header-inner { gap: 1rem; } .nav-toggle { display: block; } .main-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .1rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: .6rem 1rem 1rem; } .main-nav.open { display: flex; } .main-nav > a { padding: .6rem .75rem; border-radius: 8px; } .main-nav > a:hover { background: var(--surface-3); } .nav-group { width: 100%; } .nav-group-btn { width: 100%; justify-content: space-between; } .nav-group:hover .nav-dropdown { display: none; } /* kein Hover-Öffnen auf Touch */ .nav-group.open .nav-dropdown { display: block; } .nav-dropdown { position: static; box-shadow: none; border: none; padding: .1rem 0 .3rem .75rem; min-width: 0; border-left: 2px solid var(--border); margin: .1rem 0 .2rem .75rem; } .user-btn .user-name { display: none; } /* nur Avatar auf Mobil */ .user-btn > svg { display: none; } } @media (max-width: 640px) { .page-title { font-size: 1.5rem; } .stats-grid { grid-template-columns: 1fr 1fr; } } /* ---- LOGO ---- */ .logo-img { height: 50px; width: auto; display: block; object-fit: cover; object-position: center; clip-path: inset(8% 4% 8% 4%); margin: -14px 0; } .login-logo-img { height: 90px; width: auto; max-width: 260px; margin-bottom: 1rem; display: block; object-fit: cover; clip-path: inset(8% 4% 8% 4%); } /* ---- LOCKED TRAINING ---- */ .training-card.locked { opacity: .6; pointer-events: none; } .training-card.locked .lock-hint { font-size: 12px; color: var(--warn); display: flex; align-items: center; gap: .35rem; } /* ---- ORDER QUESTION ---- */ .order-list { list-style: none; padding: 0; margin: .5rem 0; } .order-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: .4rem; cursor: grab; font-size: 14px; user-select: none; transition: box-shadow .12s, border-color .12s; } .order-item:active { cursor: grabbing; } .order-item.dragging { opacity: .4; } .order-item.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-2); } .drag-handle { color: var(--ink-light); flex-shrink: 0; } /* ---- FILLBLANK ---- */ .fillblank-input { border: none; border-bottom: 2px solid var(--accent); background: transparent; font-size: 15px; font-family: inherit; padding: .1rem .4rem; width: 160px; color: var(--ink); outline: none; } .fillblank-input:focus { border-bottom-color: var(--ok); } /* ---- QUESTION TYPE TABS ---- */ .qtype-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .qtype-tab { padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s; font-family: inherit; } .qtype-tab.active { background: var(--accent); color: white; border-color: var(--accent); } /* ---- ASSIGNMENT CHECKBOXES ---- */ .assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .75rem; } .assign-item { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; cursor: pointer; transition: background .12s, border-color .12s; } .assign-item:hover { background: var(--surface-3); } .assign-item input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; } .assign-item.assigned { border-color: var(--accent); background: var(--accent-2); } /* ---- v10: TICKETS & INVENTAR ---- */ .module-icon.amber { background: var(--warn-bg); color: var(--warn); } .module-icon.green { background: var(--ok-bg); color: var(--ok); } .priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.4rem } .priority-p1 { background:#dc2626 } .priority-p2 { background:#f97316 } .priority-p3 { background:#eab308 } .priority-standard { background:#9ca3af } .field-row { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--border); font-size:13px } .field-row:last-child { border-bottom:none } .field-label { color:var(--ink-muted) } .field-value { font-weight:500; text-align:right } .comment-item { padding:1rem; border-radius:10px; margin-bottom:.75rem; background:var(--surface-2) } .comment-item.internal { background:#fef9e7; border-left:3px solid var(--warn) } .comment-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-muted); margin-bottom:.4rem } .attachment-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--border); border-radius:8px; margin-bottom:.4rem; font-size:13px } .timeline-item { display:flex; gap:.6rem; font-size:12px; padding:.4rem 0; color:var(--ink-muted) } .detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap:1.5rem; align-items:start } @media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr } } .qr-box { text-align:center; padding:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg) } .history-item { display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border); font-size:13px } .history-item:last-child { border-bottom:none } .history-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:.4rem; flex-shrink:0 } /* ===================================================================== THEME-UMSCHALTER (Sonne / Mond) ==================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: none; border: 1px solid var(--border); color: var(--ink-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .theme-toggle:hover { background: var(--surface-3); color: var(--ink); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* Weiche Übergänge beim Umschalten */ body, .site-header, .site-footer, .card, .module-card, .training-card, .form-input, .form-select, .form-textarea, .btn, .nav-dropdown, .user-dropdown, .theme-toggle, .stat-card, .modal, .badge, .tl-card { transition: background-color .22s ease, border-color .22s ease, color .22s ease; } /* ---- Dark-Feinschliff für einige helle Fixwerte ---- */ :root[data-theme="dark"] .alert-error { border-color: #5b2626; } :root[data-theme="dark"] .alert-success { border-color: #1f5133; } :root[data-theme="dark"] .alert-info { border-color: #294167; } :root[data-theme="dark"] .comment-item.internal { background: #2b2410; } :root[data-theme="dark"] .foot-sep { color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alert-error { border-color: #5b2626; } :root:not([data-theme="light"]) .alert-success { border-color: #1f5133; } :root:not([data-theme="light"]) .alert-info { border-color: #294167; } :root:not([data-theme="light"]) .comment-item.internal { background: #2b2410; } } /* ===================================================================== LOGIN – modernisiert (überschreibt frühere .login-* Regeln) ==================================================================== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; background: radial-gradient(1100px 620px at 12% 8%, rgba(212,227,172,.40), transparent 60%), radial-gradient(900px 520px at 88% 92%, rgba(125,155,78,.50), transparent 55%), linear-gradient(135deg, #1b2a10 0%, #3c5322 46%, #6f8f3e 130%); } /* dezente, langsam schwebende Lichtpunkte */ .login-wrap::before, .login-wrap::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; } .login-wrap::before { width: 420px; height: 420px; top: -120px; left: -90px; background: #aecb6f; animation: floatA 14s ease-in-out infinite; } .login-wrap::after { width: 380px; height: 380px; bottom: -130px; right: -80px; background: #4b6b2f; animation: floatB 17s ease-in-out infinite; } @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,25px); } } @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-25px,-30px); } } @media (prefers-reduced-motion: reduce) { .login-wrap::before, .login-wrap::after { animation: none; } } .login-box { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.25); padding: 2.75rem 2.5rem 2.5rem; width: 100%; max-width: 420px; overflow: hidden; } /* Akzentleiste oben */ .login-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #7d9b4e, #5e7a33, #d4e3ac); } .login-theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 5; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; } .login-theme-toggle:hover { background: rgba(255,255,255,.18); color: #fff; } .login-tagline { font-size: 13px; color: var(--ink-light); margin-top: 1.5rem; text-align: center; }