/* Typemaster - Main CSS */
:root {
    --primary: #6C63FF;
    --secondary: #FF6B9D;
    --accent: #00D9A5;
    --warning: #FFB84D;
    --error: #FF6B6B;
    --bg-dark: #1a1a2e;
    --bg-medium: #16213e;
    --bg-light: #0f3460;
    --text-color: #fff;
    --text-muted: #aaa;
    --card-bg: rgba(255,255,255,0.05);
}

/* Hell-Modus */
body.light-mode {
    --bg-dark: #f5f5f5;
    --bg-medium: #e8e8e8;
    --bg-light: #ffffff;
    --text-color: #1a1a2e;
    --text-muted: #666;
    --card-bg: rgba(0,0,0,0.05);
}

body.light-mode { color: var(--text-color); }
body.light-mode .card { background: var(--card-bg); border-color: rgba(0,0,0,0.1); }
body.light-mode .dashboard-header { background: rgba(255,255,255,0.8); }
body.light-mode .nav-links a,
body.light-mode .nav-pill { color: #555; }
body.light-mode .nav-links a:hover,
body.light-mode .nav-pill:hover { color: var(--primary); }
body.light-mode .welcome-text p { color: var(--text-muted); }
body.light-mode .stat-label { color: var(--text-muted); }
body.light-mode .stat-badge { background: rgba(0,0,0,0.1); color: #1a1a2e; }
body.light-mode .stat-badge.xp { color: #6C63FF; }
body.light-mode .stat-badge.coins { color: #b36b00; }
body.light-mode .level-item.locked { background: rgba(0,0,0,0.1); color: #999; }
body.light-mode .level-item-name { color: rgba(0,0,0,0.8); }
body.light-mode input, body.light-mode select, body.light-mode textarea {
    background: rgba(0,0,0,0.05); color: var(--text-color); border-color: rgba(0,0,0,0.2);
}

/* Light mode - Pro Banner */
body.light-mode .pro-upgrade-banner {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25), rgba(255, 107, 0, 0.25));
}
body.light-mode .pro-banner-title {
    color: #b36b00 !important;
}
body.light-mode .pro-banner-description {
    color: #555 !important;
}
body.light-mode .pro-banner-icon {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
}
body.light-mode .pro-banner-close {
    color: #666;
}
body.light-mode .pro-banner-close:hover {
    color: #333;
}

/* Theme Hintergründe mit Icons */
.theme-icons-container {
    position: fixed;
    top: 100px; left: 0; right: 0; bottom: 60px;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    opacity: 0.5;
}

.theme-icon {
    position: absolute;
    font-size: 2rem;
    animation: floatIcon 20s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(20px) rotate(-5deg); }
}

/* Theme-Farben - Dunkel-Modus (auf html und body anwenden) */
html.theme-safari, body.theme-safari { background: linear-gradient(135deg, #2d5016 0%, #1a3a0a 50%, #0d2605 100%) !important; }
html.theme-zoo, body.theme-zoo { background: linear-gradient(135deg, #4a3728 0%, #2d2118 50%, #1a130e 100%) !important; }
html.theme-ocean, body.theme-ocean { background: linear-gradient(135deg, #006994 0%, #004466 50%, #002233 100%) !important; }
html.theme-space, body.theme-space { background: linear-gradient(135deg, #1a1a3e 0%, #0d0d2e 50%, #05051e 100%) !important; }
html.theme-princess, body.theme-princess { background: linear-gradient(135deg, #5c2346 0%, #3d1830 50%, #2a1020 100%) !important; }
html.theme-rainbow, body.theme-rainbow { background: linear-gradient(135deg, #4a2020 0%, #3d3a15 25%, #1d3d22 50%, #1a2d4d 75%, #2d1f3d 100%) !important; }
html.theme-candy, body.theme-candy { background: linear-gradient(135deg, #4a2525 0%, #3d2535 50%, #352a25 100%) !important; }
html.theme-forest, body.theme-forest { background: linear-gradient(135deg, #134e5e 0%, #1a3c34 50%, #0d261f 100%) !important; }
html.theme-dinosaur, body.theme-dinosaur { background: linear-gradient(135deg, #4a6741 0%, #2d402a 50%, #1a2618 100%) !important; }
html.theme-arctic, body.theme-arctic { background: linear-gradient(135deg, #1a3a5c 0%, #15304a 50%, #0d2035 100%) !important; }
html.theme-farm, body.theme-farm { background: linear-gradient(135deg, #8b7355 0%, #6b5344 50%, #4a3a30 100%) !important; }
html.theme-garden, body.theme-garden { background: linear-gradient(135deg, #56ab2f 0%, #3d7a22 50%, #255015 100%) !important; }
html.theme-jungle, body.theme-jungle { background: linear-gradient(135deg, #11998e 0%, #0d7d74 50%, #065a54 100%) !important; }
html.theme-superhero, body.theme-superhero { background: linear-gradient(135deg, #c0392b 0%, #8e2420 50%, #5c1815 100%) !important; }
html.theme-volcano, body.theme-volcano { background: linear-gradient(135deg, #8B0000 0%, #4a0e0e 50%, #2a0505 100%) !important; }
html.theme-pirate, body.theme-pirate { background: linear-gradient(135deg, #2c3e50 0%, #1a2530 50%, #0d1318 100%) !important; }
html.theme-underwater, body.theme-underwater { background: linear-gradient(135deg, #003366 0%, #001a33 50%, #000d1a 100%) !important; }
html.theme-cherry, body.theme-cherry { background: linear-gradient(135deg, #6b2736 0%, #451a24 50%, #2d1018 100%) !important; }
html.theme-steampunk, body.theme-steampunk { background: linear-gradient(135deg, #5c4033 0%, #3d2a22 50%, #2a1a14 100%) !important; }
html.theme-neon, body.theme-neon { background: linear-gradient(135deg, #0a0a2a 0%, #0a1230 50%, #0a1a2a 100%) !important; }

/* Hell-Modus Theme Anpassungen (auf html und body) */
html.light-mode.theme-safari, body.light-mode.theme-safari { background: linear-gradient(135deg, #90EE90 0%, #7CCD7C 50%, #68B868 100%) !important; }
html.light-mode.theme-zoo, body.light-mode.theme-zoo { background: linear-gradient(135deg, #DEB887 0%, #D2B48C 50%, #C4A67D 100%) !important; }
html.light-mode.theme-ocean, body.light-mode.theme-ocean { background: linear-gradient(135deg, #87CEEB 0%, #6BB3D9 50%, #4FA3CF 100%) !important; }
html.light-mode.theme-space, body.light-mode.theme-space { background: linear-gradient(135deg, #E6E6FA 0%, #D8BFD8 50%, #DDA0DD 100%) !important; }
html.light-mode.theme-princess, body.light-mode.theme-princess { background: linear-gradient(135deg, #FFB6C1 0%, #FFA0B0 50%, #FF8A9F 100%) !important; }
html.light-mode.theme-forest, body.light-mode.theme-forest { background: linear-gradient(135deg, #90EE90 0%, #7CCD7C 50%, #68B868 100%) !important; }
html.light-mode.theme-rainbow, body.light-mode.theme-rainbow { background: linear-gradient(135deg, #ffb3b3 0%, #ffeda0 25%, #b3e6b3 50%, #a0cfff 75%, #d9b3ff 100%) !important; }
html.light-mode.theme-candy, body.light-mode.theme-candy { background: linear-gradient(135deg, #ffcccc 0%, #ffe6f0 50%, #fff5e6 100%) !important; }
html.light-mode.theme-dinosaur, body.light-mode.theme-dinosaur { background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 50%, #81c784 100%) !important; }
html.light-mode.theme-arctic, body.light-mode.theme-arctic { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%) !important; }
html.light-mode.theme-farm, body.light-mode.theme-farm { background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 50%, #ffcc80 100%) !important; }
html.light-mode.theme-garden, body.light-mode.theme-garden { background: linear-gradient(135deg, #f1f8e9 0%, #c8e6c9 50%, #a5d6a7 100%) !important; }
html.light-mode.theme-jungle, body.light-mode.theme-jungle { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%) !important; }
html.light-mode.theme-superhero, body.light-mode.theme-superhero { background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 50%, #e57373 100%) !important; }
html.light-mode.theme-volcano, body.light-mode.theme-volcano { background: linear-gradient(135deg, #ffccbc 0%, #ff8a65 50%, #ff7043 100%) !important; }
html.light-mode.theme-pirate, body.light-mode.theme-pirate { background: linear-gradient(135deg, #e0e8f0 0%, #b0c4de 50%, #87ACCD 100%) !important; }
html.light-mode.theme-underwater, body.light-mode.theme-underwater { background: linear-gradient(135deg, #b3d9ff 0%, #80bfff 50%, #4da6ff 100%) !important; }
html.light-mode.theme-cherry, body.light-mode.theme-cherry { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 50%, #f48fb1 100%) !important; }
html.light-mode.theme-steampunk, body.light-mode.theme-steampunk { background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 50%, #bcaaa4 100%) !important; }
html.light-mode.theme-neon, body.light-mode.theme-neon { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 50%, #ce93d8 100%) !important; }

/* ===========================================
   DUNKEL-MODUS TEXT-KONTRAST
   Themes mit dunklem Hintergrund -> helle Schrift
   =========================================== */

/* Standard Dunkel-Modus: Weiße Schrift */
body { color: #ffffff; }
.nav-links a,
.nav-pill { color: rgba(255,255,255,0.65); }
.stat-label { color: rgba(255,255,255,0.6); }
.activity-stats { color: rgba(255,255,255,0.6); }
.empty-state { color: rgba(255,255,255,0.65); }
.welcome-text p { color: rgba(255,255,255,0.7); }
.form-group label { color: rgba(255,255,255,0.9); }
.leaderboard-pos .label { color: rgba(255,255,255,0.6); }

/* Hinweis: Die Themes princess, rainbow, candy, arctic haben jetzt dunkle
   Hintergründe im Dunkel-Modus und benötigen keine speziellen Overrides mehr */

/* ===========================================
   HELL-MODUS TEXT-KONTRAST
   Alle Themes haben hellen Hintergrund -> dunkle Schrift
   =========================================== */

html.light-mode, body.light-mode {
    color: #1a1a2e !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: #1a1a2e !important;
}

body.light-mode .card {
    background: rgba(255,255,255,0.8) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

body.light-mode .header,
body.light-mode .dashboard-header {
    background: rgba(255,255,255,0.9) !important;
}

body.light-mode .nav-links a,
body.light-mode .nav-pill {
    color: rgba(0,0,0,0.6) !important;
}

body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active,
body.light-mode .nav-pill:hover,
body.light-mode .nav-pill.active {
    color: #6C63FF !important;
}

body.light-mode .nav-pill.active {
    background: rgba(108,99,255,0.12) !important;
}

body.light-mode .nav-pill:hover {
    background: rgba(108,99,255,0.08) !important;
}

body.light-mode .header-nav {
    border-top-color: rgba(0,0,0,0.06);
}

body.light-mode .stat-label,
body.light-mode .activity-stats {
    color: rgba(0,0,0,0.6) !important;
}

body.light-mode .empty-state {
    color: rgba(0,0,0,0.5) !important;
}

body.light-mode .welcome-text p {
    color: rgba(0,0,0,0.7) !important;
}

body.light-mode .form-group label {
    color: rgba(0,0,0,0.8) !important;
}

body.light-mode .leaderboard-pos .label {
    color: rgba(0,0,0,0.6) !important;
}

body.light-mode .legal-footer {
    background: rgba(255,255,255,0.9) !important;
}

body.light-mode .legal-footer a {
    color: rgba(0,0,0,0.75) !important;
}

body.light-mode .legal-footer a:hover {
    color: rgba(0,0,0,0.9) !important;
}

body.light-mode .level-item.locked {
    background: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.4) !important;
}

body.light-mode .level-item-name {
    color: rgba(255,255,255,0.95) !important;
}

body.light-mode .level-item.locked .level-item-name {
    color: rgba(0,0,0,0.5) !important;
}

body.light-mode .stat-card,
body.light-mode .activity-item {
    background: rgba(0,0,0,0.05) !important;
}

body.light-mode .welcome-section {
    background: linear-gradient(135deg, #ffffff, #f5f5ff) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background: rgba(255,255,255,0.8) !important;
    color: #1a1a2e !important;
    border-color: rgba(0,0,0,0.2) !important;
}

body.light-mode input::placeholder {
    color: rgba(0,0,0,0.4) !important;
}

/* Logo im Light-Mode - dunkle Farbe für besseren Kontrast */
body.light-mode .logo,
html.light-mode .logo {
    color: #6C63FF !important;
}

/* ===========================================
   UMFASSENDE LIGHT-MODE KONTRAST-FIXES
   Alle weißen/hellen Farben → dunkle Farben
   =========================================== */

/* Globale Inline-Farbüberschreibungen per Attribut-Selektor */
body.light-mode [style*="color: #fff"],
body.light-mode [style*="color:#fff"],
body.light-mode [style*="color: white"],
body.light-mode [style*="color:white"] {
    color: #1a1a2e !important;
}
/* Ausnahme: Elemente mit farbigem Gradient-Hintergrund behalten weiße Schrift */
body.light-mode [style*="color: white"][style*="background: linear-gradient"],
body.light-mode [style*="color:white"][style*="background: linear-gradient"],
body.light-mode [style*="color: #fff"][style*="background: linear-gradient"],
body.light-mode [style*="color:#fff"][style*="background: linear-gradient"],
body.light-mode [style*="color: white"][style*="background:linear-gradient"],
body.light-mode [style*="color:white"][style*="background:linear-gradient"],
body.light-mode [style*="color: #fff"][style*="background:linear-gradient"],
body.light-mode [style*="color:#fff"][style*="background:linear-gradient"] {
    color: white !important;
}
body.light-mode [style*="color: rgba(255,255,255,0.9"],
body.light-mode [style*="color:rgba(255,255,255,0.9"],
body.light-mode [style*="color: rgba(255,255,255,0.8"],
body.light-mode [style*="color:rgba(255,255,255,0.8"],
body.light-mode [style*="color: rgba(255,255,255,0.7"],
body.light-mode [style*="color:rgba(255,255,255,0.7"] {
    color: #333 !important;
}
body.light-mode [style*="color: rgba(255,255,255,0.6"],
body.light-mode [style*="color:rgba(255,255,255,0.6"],
body.light-mode [style*="color: rgba(255,255,255,0.5"],
body.light-mode [style*="color:rgba(255,255,255,0.5"],
body.light-mode [style*="color: rgba(255,255,255,0.4"],
body.light-mode [style*="color:rgba(255,255,255,0.4"] {
    color: #666 !important;
}
body.light-mode [style*="color: #aaa"],
body.light-mode [style*="color:#aaa"],
body.light-mode [style*="color: #bbb"],
body.light-mode [style*="color:#bbb"] {
    color: #555 !important;
}
body.light-mode [style*="color: #ccc"],
body.light-mode [style*="color:#ccc"],
body.light-mode [style*="color: #ddd"],
body.light-mode [style*="color:#ddd"] {
    color: #444 !important;
}
/* Orange/gelbe Linkfarben die auf hellem Hintergrund schwer lesbar sind */
body.light-mode a[style*="color: #FFB84D"],
body.light-mode a[style*="color:#FFB84D"] {
    color: #b36b00 !important;
}
body.light-mode [style*="color: #FFD93D"],
body.light-mode [style*="color:#FFD93D"] {
    color: #b8860b !important;
}

/* Semi-transparente weiße Hintergründe → für Light Mode anpassen */
body.light-mode [style*="background: rgba(255,255,255,0.0"],
body.light-mode [style*="background:rgba(255,255,255,0.0"],
body.light-mode [style*="background: rgba(255,255,255,0.1"],
body.light-mode [style*="background:rgba(255,255,255,0.1"] {
    background: rgba(0,0,0,0.04) !important;
}

/* Semi-transparente schwarze Hintergründe → heller in Light Mode */
body.light-mode [style*="background: rgba(0,0,0,0.3"],
body.light-mode [style*="background:rgba(0,0,0,0.3"],
body.light-mode [style*="background: rgba(0,0,0,0.2"],
body.light-mode [style*="background:rgba(0,0,0,0.2"] {
    background: rgba(0,0,0,0.05) !important;
}

/* Weiße Borders → dunkle Borders */
body.light-mode [style*="border: 2px solid rgba(255,255,255"],
body.light-mode [style*="border:2px solid rgba(255,255,255"],
body.light-mode [style*="border: 1px solid rgba(255,255,255"],
body.light-mode [style*="border:1px solid rgba(255,255,255"] {
    border-color: rgba(0,0,0,0.12) !important;
}

/* Settings-Seite */
body.light-mode .setting-desc {
    color: rgba(0,0,0,0.55) !important;
}
body.light-mode .setting-row {
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .setting-label {
    color: #1a1a2e !important;
}
body.light-mode .stat-item {
    background: rgba(0,0,0,0.05) !important;
}
body.light-mode .stat-item-label {
    color: rgba(0,0,0,0.6) !important;
}
body.light-mode .account-info {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-mode .account-info p {
    color: rgba(0,0,0,0.6) !important;
}
body.light-mode .account-info strong {
    color: #1a1a2e !important;
}
body.light-mode .avatar-option {
    border-color: rgba(0,0,0,0.12) !important;
    background: rgba(0,0,0,0.03) !important;
}
body.light-mode .avatar-option:hover {
    background: rgba(0,0,0,0.06) !important;
}
body.light-mode .btn-secondary {
    background: rgba(0,0,0,0.06) !important;
    color: #333 !important;
}
body.light-mode .btn-danger {
    background: rgba(255,107,107,0.1) !important;
}
body.light-mode .pro-modal {
    background: linear-gradient(135deg, #fff, #f8f8ff) !important;
    border-color: rgba(108,99,255,0.2) !important;
}
body.light-mode .pro-modal h3 {
    color: #6C63FF !important;
}
body.light-mode .pro-modal p {
    color: #555 !important;
}
body.light-mode .pro-modal .btn-close-modal {
    color: #888 !important;
}
body.light-mode .setting-slider {
    background: rgba(0,0,0,0.12) !important;
}

/* Subscription-Seite */
body.light-mode .page-header p {
    color: #555 !important;
}
body.light-mode .checkbox-group label {
    color: #555 !important;
}
body.light-mode .tab {
    color: #555 !important;
}
body.light-mode .tab:hover:not(.active) {
    color: #1a1a2e !important;
    background: rgba(0,0,0,0.04) !important;
}
body.light-mode .tabs {
    background: rgba(0,0,0,0.06) !important;
}

/* Login/Register */
body.light-mode .logo p {
    color: #666 !important;
}

/* Allgemeine Karten & Sections */
body.light-mode .card h2 {
    color: #5a3a00 !important;
}
body.light-mode .section h2 {
    color: #1a1a2e !important;
}
body.light-mode .section-count {
    color: #666 !important;
}

/* Theme-Hintergrund-Symbole im Light Mode */
body.light-mode .theme-icons-container {
    opacity: 0.35 !important;
}
body.light-mode .theme-icon {
    filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3)) contrast(1.1) !important;
}

/* Modale Bestätigungsdialoge in Light Mode */
body.light-mode .confirm-modal-box {
    background: #fff !important;
    border-color: rgba(0,0,0,0.15) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
}
body.light-mode .confirm-modal-box h2 {
    color: #c88800 !important;
}
body.light-mode .confirm-modal-box p {
    color: #333 !important;
}
body.light-mode .confirm-modal-box ul {
    color: #555 !important;
}

/* Lehrer-Seiten Light Mode */
body.light-mode .teacher-stat-value {
    color: #1a1a2e !important;
}
body.light-mode .teacher-stat-label {
    color: #666 !important;
}

/* Friends Light Mode */
body.light-mode .friend-item {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* Rewards Light Mode - Rarity Badges */
body.light-mode .rarity-badge.common {
    color: #666 !important;
}

/* Subscription Plans Light Mode */
body.light-mode .plan-card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-mode .plan-price {
    color: #1a1a2e !important;
}
body.light-mode .plan-feature {
    color: #555 !important;
}
body.light-mode .family-step p {
    color: #555 !important;
}

/* Hinweis: princess, rainbow, candy, arctic haben jetzt dunkle Hintergründe */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);
    min-height: 100vh;
    color: #fff;
}

/* Typography */
h1, h2, h3 {
    font-family: 'Fredoka One', cursive;
}

a { color: var(--warning); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header - Two-Row Layout */
.header,
.dashboard-header {
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: visible;
}

/* Zeile 1: Brand + User Stats + Avatar */
.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    gap: 10px;
    margin-bottom: 6px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Zeile 2: Navigation Bar */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px 2px;
    flex-wrap: wrap;
    border-top: none;
}

/* Nav Pill Links */
.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.nav-pill:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}

.nav-pill.active {
    background: rgba(108,99,255,0.15);
    color: #fff;
}

/* Legacy compat: keep .nav-links for formell theme selectors */
.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.logo {
    font-family: 'Fredoka One', cursive;
    font-size: 1.5rem;
    color: var(--warning);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
}

.logo-img {
    height: 100px;
    width: 100px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.hero-logo-img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    vertical-align: middle;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--warning), #ff9500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.user-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 1;
    min-width: 0;
}

.stat-badge {
    background: rgba(255,255,255,0.1);
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stat-badge.xp { color: var(--warning); }
.stat-badge.coins { color: var(--accent); }
.stat-badge.pro-badge {
    background: linear-gradient(135deg, #FFD93D, #ff9500);
    color: #1a1a2e;
    font-weight: bold;
    animation: pro-glow 2s ease-in-out infinite;
}

@keyframes pro-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 217, 61, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 217, 61, 0.8); }
}

/* Pro Upgrade Button im Header */
.pro-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #FFD93D, #ff9500);
    color: #5c3a00 !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none !important;
    animation: pro-pulse 2s ease-in-out infinite;
    transition: transform 0.2s ease;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

.pro-upgrade-btn:hover {
    transform: scale(1.05);
    color: #5c3a00 !important;
    text-decoration: none !important;
}

@keyframes pro-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 217, 61, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 217, 61, 0.9); }
}

/* Theme Selector Buttons (Hell/Dunkel, Design) */
.theme-selector-btn {
    background: linear-gradient(135deg, #6C63FF, #FF6B9D);
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.theme-selector-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(108,99,255,0.3);
}

/* Pro Upgrade Banner */
.pro-upgrade-banner {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.15), rgba(255, 149, 0, 0.15));
    border-bottom: 2px solid #FFD93D;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pro-banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.pro-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pro-banner-icon {
    font-size: 1.5rem;
    animation: pro-star-spin 3s ease-in-out infinite;
}

@keyframes pro-star-spin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.2); }
}

.pro-banner-title {
    font-family: 'Fredoka One', cursive;
    font-size: 1.2rem;
    color: #FFD93D;
}

.pro-banner-description {
    color: #ccc;
    font-size: 0.95rem;
}

.pro-banner-btn {
    background: linear-gradient(135deg, #FFD93D, #ff9500);
    color: #1a1a2e;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.pro-banner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(255, 217, 61, 0.4);
}

.pro-banner-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.pro-banner-close:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .pro-upgrade-banner {
        padding: 10px 40px 10px 15px;
    }

    .pro-banner-content {
        gap: 10px;
    }

    .pro-banner-text {
        gap: 8px;
    }

    .pro-banner-title {
        font-size: 1rem;
    }

    .pro-banner-description {
        display: none;
    }

    .pro-banner-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

.nav-links a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-links a:hover { color: #fff; }

.nav-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.nav-text {
    font-size: 0.85rem;
}

/* Hamburger Button (hidden by default) */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 9999;
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

body.light-mode .hamburger-btn span {
    background: #333;
}

.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile Nav Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 17, 26, 0.97);
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.mobile-nav-overlay.active {
    display: flex;
}

.mobile-nav-overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 14px 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    width: 260px;
}

.mobile-nav-overlay a:hover,
.mobile-nav-overlay a.active {
    background: rgba(255, 217, 61, 0.15);
    color: #FFD93D;
}

.mobile-nav-overlay a .nav-icon {
    font-size: 1.4rem;
}

body.light-mode .mobile-nav-overlay {
    background: rgba(255, 255, 255, 0.97);
}

body.light-mode .mobile-nav-overlay a {
    color: #333;
}

body.light-mode .mobile-nav-overlay a:hover,
body.light-mode .mobile-nav-overlay a.active {
    background: rgba(108, 99, 255, 0.1);
    color: #6C63FF;
}

/* Responsive Navigation - Two-Row Layout */

/* Nav compacts slightly */
@media (max-width: 1000px) {
    .nav-pill {
        padding: 5px 10px;
    }

    .nav-text {
        font-size: 0.8rem;
    }

    .stat-badge {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

    .pro-upgrade-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .header-top {
        padding: 0 4px;
    }

    .header-nav {
        padding: 0 4px 2px;
    }
}

/* Below 768px: hide nav bar, show hamburger */
@media (max-width: 768px) {
    .header-nav {
        display: none !important;
    }

    .hamburger-btn {
        display: flex;
        padding: 4px;
    }

    .header-top {
        padding: 4px 8px;
        gap: 6px;
    }

    .header-right {
        gap: 6px;
    }

    .logo {
        padding: 0;
        margin: 0;
    }

    .logo-img {
        height: 100px;
        width: 100px;
        margin: 0;
        padding: 0;
    }

    .stat-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .pro-upgrade-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .user-stats {
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .user-stats {
        display: none;
    }
}

@media (max-width: 420px) {
    .logo {
        font-size: 1rem;
    }
}

/* Container */
.container {
    max-width: 1900px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* Cards */
.card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
}

.card h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

/* Buttons */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--warning), #ff9500);
    color: var(--bg-dark);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--accent), #00b389);
    color: white;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255,217,61,0.3);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ddd;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--warning);
    outline-offset: 1px;
    border-color: var(--warning);
}

/* Barrierefreiheit: Sichtbare Focus-Indikatoren für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--warning);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-to-Content Link (Barrierefreiheit) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning);
    color: #1a1a2e;
    padding: 10px 24px;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    font-size: 0.95rem;
    z-index: 99999;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Screen-Reader only (Barrierefreiheit) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input::placeholder { color: #666; }

/* Alerts */
.alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-success {
    background: rgba(0,217,165,0.2);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.alert-error {
    background: rgba(255,107,107,0.2);
    border: 1px solid var(--error);
    color: var(--error);
}

.alert-info {
    background: rgba(108,99,255,0.2);
    border: 1px solid var(--primary);
    color: #a5a0ff;
}

/* Progress Bar */
.progress-bar {
    background: rgba(0,0,0,0.3);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--warning));
    border-radius: 5px;
    transition: width 0.5s;
}

/* Level Grid */
.level-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.level-item {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
    color: white;
}

.level-item:hover { transform: scale(1.1); }

.level-item.completed {
    background: linear-gradient(135deg, var(--accent), #00b389);
}

.level-item.current {
    background: linear-gradient(135deg, var(--warning), #ff9500);
    animation: pulse 2s infinite;
}

.level-item.locked {
    background: rgba(255,255,255,0.1);
    color: #555;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,217,61,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(255,217,61,0); }
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.stat-item {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--warning);
}

.stat-label {
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    background: rgba(0,0,0,0.2);
    padding: 12px 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-level {
    font-weight: 700;
    color: var(--warning);
}

.activity-stats {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #888;
}

/* Achievement List */
.achievement-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.achievement-item {
    background: rgba(255,217,61,0.25);
    border: 2px solid rgba(255,217,61,0.5);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.achievement-item:hover {
    background: rgba(255,217,61,0.35);
    border-color: rgba(255,217,61,0.7);
    transform: scale(1.02);
}

/* Leaderboard Link */
.leaderboard-link {
    display: inline-block;
    color: #1a1a2e !important;
    background: linear-gradient(135deg, #FFD93D, #ff9500);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none !important;
    margin-top: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.leaderboard-link:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(255, 217, 61, 0.4);
    text-decoration: none !important;
    color: #1a1a2e !important;
}

.leaderboard-link:visited,
.leaderboard-link:active,
.leaderboard-link:link,
a.leaderboard-link,
body:not(.light-mode) .leaderboard-link,
body.design-formell:not(.light-mode) .leaderboard-link {
    color: #1a1a2e !important;
    background: linear-gradient(135deg, #FFD93D, #ff9500) !important;
}

/* Side-Column Rangliste Link - immer schwarze Schrift */
.side-column > div:nth-child(1) > a,
.side-column > div:nth-child(1) > a:link,
.side-column > div:nth-child(1) > a:visited,
.side-column > div:nth-child(1) > a:hover,
.side-column > div:nth-child(1) > a:active {
    color: #000 !important;
}

.achievement-icon {
    font-size: 1.3rem;
}

.friends-manage-link {
    color: #FFB84D;
}
body.light-mode .friends-manage-link {
    color: #1a1a2e !important;
}

/* Statistics links on dashboard */
.stats-link-main {
    color: #a78bfa;
    background: rgba(108,99,255,0.15);
    border: 1px solid rgba(108,99,255,0.4);
}
.stats-link-main:hover {
    background: rgba(108,99,255,0.25);
}
body.light-mode .stats-link-main,
body.light-mode .stats-link-main:link,
body.light-mode .stats-link-main:visited {
    color: #4338ca !important;
    background: rgba(108,99,255,0.1) !important;
    border-color: rgba(108,99,255,0.3) !important;
}
.stats-link-sidebar {
    color: #a78bfa;
}
body.light-mode .stats-link-sidebar,
body.light-mode .stats-link-sidebar:link,
body.light-mode .stats-link-sidebar:visited {
    color: #4338ca !important;
}

/* Welcome Section */
.welcome-section {
    background: linear-gradient(135deg, rgba(255,217,61,0.2), rgba(255,107,107,0.1));
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-text h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.welcome-text p {
    color: #aaa;
}

.start-btn {
    background: linear-gradient(135deg, var(--warning), #ff9500);
    color: var(--bg-dark);
    padding: 15px 40px;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255,217,61,0.3);
    text-decoration: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 30px;
    color: #666;
}

/* Legal Footer */
.legal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    z-index: 50;
}

.legal-footer a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.85rem;
}

.legal-footer a:hover { color: white; }

/* Responsive */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .welcome-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .level-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ FORMELLER MODUS - GLOBAL ============ */
/* Standard Formell Theme: Elegant Light - Premium Design mit lebhaften Glaseffekten */
html.design-formell,
body.design-formell {
    background:
        /* Große leuchtende Orbs - Premium Glaseffekt */
        radial-gradient(circle 1000px at 5% 0%, rgba(124,58,237,0.35) 0%, transparent 50%),
        radial-gradient(circle 800px at 95% 95%, rgba(219,39,119,0.30) 0%, transparent 45%),
        radial-gradient(circle 600px at 80% 10%, rgba(59,130,246,0.28) 0%, transparent 40%),
        radial-gradient(circle 700px at 0% 80%, rgba(168,85,247,0.25) 0%, transparent 45%),
        radial-gradient(circle 500px at 45% 45%, rgba(14,165,233,0.18) 0%, transparent 40%),
        radial-gradient(circle 400px at 65% 70%, rgba(236,72,153,0.15) 0%, transparent 35%),
        /* Schimmernde Lichtreflexe */
        radial-gradient(circle 300px at 30% 20%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle 250px at 70% 80%, rgba(255,255,255,0.5) 0%, transparent 40%),
        /* Elegante diagonale Glasstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 80px, rgba(124,58,237,0.05) 80px, rgba(124,58,237,0.05) 82px),
        repeating-linear-gradient(45deg, transparent 0px, transparent 120px, rgba(219,39,119,0.04) 120px, rgba(219,39,119,0.04) 122px),
        /* Premium Basis-Gradient mit mehr Tiefe */
        linear-gradient(135deg, #faf5ff 0%, #ede9fe 15%, #e0e7ff 30%, #fce7f3 50%, #ddd6fe 70%, #e0e7ff 85%, #faf5ff 100%) !important;
    background-attachment: fixed !important;
}

/* Formell Theme: Corporate Blue - Elegant Deep Blue mit Glaseffekt */
html.design-formell.formal-theme-blue,
body.design-formell.formal-theme-blue {
    background:
        /* Große leuchtende Orbs */
        radial-gradient(circle 700px at 10% 20%, rgba(59,130,246,0.25) 0%, transparent 50%),
        radial-gradient(circle 500px at 90% 70%, rgba(37,99,235,0.2) 0%, transparent 45%),
        radial-gradient(circle 600px at 50% 90%, rgba(96,165,250,0.15) 0%, transparent 50%),
        radial-gradient(circle 400px at 70% 10%, rgba(147,197,253,0.12) 0%, transparent 45%),
        /* Diagonale Glasstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 100px, rgba(59,130,246,0.08) 100px, rgba(59,130,246,0.08) 102px),
        repeating-linear-gradient(45deg, transparent 0px, transparent 150px, rgba(96,165,250,0.05) 150px, rgba(96,165,250,0.05) 152px),
        /* Basis */
        linear-gradient(145deg, #0c1929 0%, #172554 30%, #1e3a8a 60%, #1e40af 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-blue .dashboard-header,
body.design-formell.formal-theme-blue .header {
    background: linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(30,58,95,0.95) 100%) !important;
    border-bottom: 1px solid rgba(59,130,246,0.3) !important;
}
body.design-formell.formal-theme-blue .card,
body.design-formell.formal-theme-blue .typing-area,
body.design-formell.formal-theme-blue .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(59,130,246,0.1) !important;
}

/* Formell Theme: Dark Slate - Eleganter Anthrazit mit Glaseffekt */
html.design-formell.formal-theme-slate,
body.design-formell.formal-theme-slate {
    background:
        /* Schimmernde Metallkugeln */
        radial-gradient(circle 600px at 15% 15%, rgba(148,163,184,0.18) 0%, transparent 50%),
        radial-gradient(circle 500px at 85% 85%, rgba(100,116,139,0.15) 0%, transparent 45%),
        radial-gradient(circle 450px at 75% 25%, rgba(71,85,105,0.12) 0%, transparent 50%),
        radial-gradient(circle 550px at 25% 75%, rgba(148,163,184,0.1) 0%, transparent 45%),
        /* Horizontale Glasstreifen */
        repeating-linear-gradient(90deg, transparent 0px, transparent 200px, rgba(148,163,184,0.04) 200px, rgba(148,163,184,0.04) 202px),
        repeating-linear-gradient(0deg, transparent 0px, transparent 250px, rgba(100,116,139,0.03) 250px, rgba(100,116,139,0.03) 252px),
        /* Basis */
        linear-gradient(145deg, #0f172a 0%, #1e293b 40%, #334155 70%, #1e293b 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-slate .dashboard-header,
body.design-formell.formal-theme-slate .header {
    background: linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(30,41,59,0.95) 100%) !important;
    border-bottom: 1px solid rgba(100,116,139,0.3) !important;
}
body.design-formell.formal-theme-slate .card,
body.design-formell.formal-theme-slate .typing-area,
body.design-formell.formal-theme-slate .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(100,116,139,0.1) !important;
}
body.design-formell.formal-theme-slate .nav-links a {
    color: rgba(255,255,255,0.85) !important;
}

/* Formell Theme: Forest Green - Elegantes Smaragdgrün mit Glaseffekt */
html.design-formell.formal-theme-forest,
body.design-formell.formal-theme-forest {
    background:
        /* Leuchtende Smaragd-Orbs */
        radial-gradient(circle 650px at 20% 30%, rgba(34,197,94,0.2) 0%, transparent 50%),
        radial-gradient(circle 500px at 80% 60%, rgba(22,163,74,0.18) 0%, transparent 45%),
        radial-gradient(circle 400px at 60% 10%, rgba(74,222,128,0.12) 0%, transparent 50%),
        radial-gradient(circle 550px at 10% 90%, rgba(34,197,94,0.1) 0%, transparent 45%),
        /* Organische Wellenstreifen */
        repeating-linear-gradient(160deg, transparent 0px, transparent 120px, rgba(34,197,94,0.06) 120px, rgba(34,197,94,0.06) 122px),
        repeating-linear-gradient(70deg, transparent 0px, transparent 180px, rgba(74,222,128,0.04) 180px, rgba(74,222,128,0.04) 182px),
        /* Basis */
        linear-gradient(145deg, #022c22 0%, #14532d 35%, #166534 65%, #15803d 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-forest .dashboard-header,
body.design-formell.formal-theme-forest .header {
    background: linear-gradient(180deg, rgba(5,46,22,0.98) 0%, rgba(20,83,45,0.95) 100%) !important;
    border-bottom: 1px solid rgba(34,197,94,0.3) !important;
}
body.design-formell.formal-theme-forest .stat-value,
body.design-formell.formal-theme-forest .logo {
    color: #4ade80 !important;
}

/* Formell Theme: Royal Purple - Elegantes Violett mit Glaseffekt */
html.design-formell.formal-theme-purple,
body.design-formell.formal-theme-purple {
    background:
        /* Majestätische Violett-Orbs */
        radial-gradient(circle 700px at 25% 20%, rgba(167,139,250,0.25) 0%, transparent 50%),
        radial-gradient(circle 550px at 75% 75%, rgba(139,92,246,0.2) 0%, transparent 45%),
        radial-gradient(circle 450px at 85% 15%, rgba(192,132,252,0.15) 0%, transparent 50%),
        radial-gradient(circle 500px at 15% 85%, rgba(167,139,250,0.12) 0%, transparent 45%),
        /* Elegante Diagonalstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 140px, rgba(167,139,250,0.06) 140px, rgba(167,139,250,0.06) 142px),
        repeating-linear-gradient(45deg, transparent 0px, transparent 200px, rgba(192,132,252,0.04) 200px, rgba(192,132,252,0.04) 202px),
        /* Basis */
        linear-gradient(145deg, #1e1b4b 0%, #3b0764 35%, #581c87 65%, #7c3aed 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-purple .dashboard-header,
body.design-formell.formal-theme-purple .header {
    background: linear-gradient(180deg, rgba(30,27,75,0.98) 0%, rgba(59,7,100,0.95) 100%) !important;
    border-bottom: 1px solid rgba(167,139,250,0.3) !important;
}
body.design-formell.formal-theme-purple .stat-value,
body.design-formell.formal-theme-purple .logo {
    color: #c4b5fd !important;
}

/* Formell Theme: Midnight - Elegante Nacht mit Sternenstaub und Glaseffekt */
html.design-formell.formal-theme-midnight,
body.design-formell.formal-theme-midnight {
    background:
        /* Sanfte Nacht-Orbs wie ferne Nebel */
        radial-gradient(circle 800px at 10% 20%, rgba(59,130,246,0.12) 0%, transparent 50%),
        radial-gradient(circle 600px at 90% 80%, rgba(99,102,241,0.1) 0%, transparent 45%),
        radial-gradient(circle 500px at 50% 50%, rgba(71,85,105,0.15) 0%, transparent 50%),
        radial-gradient(circle 450px at 80% 20%, rgba(147,197,253,0.08) 0%, transparent 45%),
        radial-gradient(circle 550px at 20% 80%, rgba(129,140,248,0.06) 0%, transparent 50%),
        /* Subtile Sternenpunkte */
        radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 65%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 15%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 75% 45%, rgba(255,255,255,0.25) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 25% 85%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(2px 2px at 65% 35%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 45% 95%, rgba(255,255,255,0.25) 0%, transparent 100%),
        /* Basis */
        linear-gradient(145deg, #020617 0%, #0f172a 40%, #1e293b 70%, #0f172a 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-midnight .dashboard-header,
body.design-formell.formal-theme-midnight .header {
    background: linear-gradient(180deg, rgba(2,6,23,0.98) 0%, rgba(15,23,42,0.95) 100%) !important;
    border-bottom: 1px solid rgba(71,85,105,0.4) !important;
}
body.design-formell.formal-theme-midnight .card,
body.design-formell.formal-theme-midnight .typing-area {
    background: rgba(30,41,59,0.95) !important;
    border-color: #475569 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(148,163,184,0.1) !important;
}
body.design-formell.formal-theme-midnight .card h2,
body.design-formell.formal-theme-midnight .card p,
body.design-formell.formal-theme-midnight .text-display,
body.design-formell.formal-theme-midnight .text-line,
body.design-formell.formal-theme-midnight .char.waiting {
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .char.done {
    color: rgba(226, 232, 240, 0.85) !important;
}

/* Formell Theme: Warm Gray - Elegantes Sandstein mit Glaseffekt */
html.design-formell.formal-theme-warm,
body.design-formell.formal-theme-warm {
    background:
        /* Warme Sandstein-Orbs */
        radial-gradient(circle 650px at 20% 25%, rgba(214,211,209,0.35) 0%, transparent 50%),
        radial-gradient(circle 500px at 80% 70%, rgba(168,162,158,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 70% 15%, rgba(231,229,228,0.2) 0%, transparent 50%),
        radial-gradient(circle 550px at 15% 80%, rgba(214,211,209,0.18) 0%, transparent 45%),
        /* Steinstruktur-Streifen */
        repeating-linear-gradient(175deg, transparent 0px, transparent 160px, rgba(214,211,209,0.08) 160px, rgba(214,211,209,0.08) 162px),
        repeating-linear-gradient(85deg, transparent 0px, transparent 220px, rgba(168,162,158,0.05) 220px, rgba(168,162,158,0.05) 222px),
        /* Basis */
        linear-gradient(145deg, #44403c 0%, #57534e 35%, #78716c 65%, #a8a29e 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-warm .dashboard-header,
body.design-formell.formal-theme-warm .header {
    background: linear-gradient(180deg, rgba(68,64,60,0.98) 0%, rgba(87,83,78,0.95) 100%) !important;
    border-bottom: 1px solid rgba(168,162,158,0.4) !important;
}

/* Formell Theme: Steel - Modernes Silber/Grau mit metallischem Glanz */
html.design-formell.formal-theme-steel,
body.design-formell.formal-theme-steel {
    background:
        radial-gradient(circle 700px at 15% 20%, rgba(148,163,184,0.35) 0%, transparent 50%),
        radial-gradient(circle 550px at 85% 75%, rgba(100,116,139,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 75% 10%, rgba(203,213,225,0.25) 0%, transparent 50%),
        radial-gradient(circle 600px at 10% 85%, rgba(148,163,184,0.2) 0%, transparent 45%),
        repeating-linear-gradient(160deg, transparent 0px, transparent 150px, rgba(203,213,225,0.1) 150px, rgba(203,213,225,0.1) 152px),
        linear-gradient(145deg, #334155 0%, #475569 35%, #64748b 65%, #94a3b8 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-steel .dashboard-header,
body.design-formell.formal-theme-steel .header {
    background: linear-gradient(180deg, rgba(51,65,85,0.98) 0%, rgba(71,85,105,0.95) 100%) !important;
    border-bottom: 1px solid rgba(148,163,184,0.4) !important;
}
body.design-formell.formal-theme-steel .stat-value,
body.design-formell.formal-theme-steel .logo {
    color: #94a3b8 !important;
}

/* Formell Theme: Copper - Warme Kupfer/Bronze-Töne */
html.design-formell.formal-theme-copper,
body.design-formell.formal-theme-copper {
    background:
        radial-gradient(circle 700px at 20% 25%, rgba(194,65,12,0.3) 0%, transparent 50%),
        radial-gradient(circle 550px at 80% 70%, rgba(124,45,18,0.35) 0%, transparent 45%),
        radial-gradient(circle 450px at 70% 15%, rgba(251,146,60,0.2) 0%, transparent 50%),
        radial-gradient(circle 600px at 15% 80%, rgba(194,65,12,0.18) 0%, transparent 45%),
        repeating-linear-gradient(170deg, transparent 0px, transparent 180px, rgba(251,146,60,0.08) 180px, rgba(251,146,60,0.08) 182px),
        linear-gradient(145deg, #431407 0%, #7c2d12 35%, #9a3412 65%, #c2410c 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-copper .dashboard-header,
body.design-formell.formal-theme-copper .header {
    background: linear-gradient(180deg, rgba(67,20,7,0.98) 0%, rgba(124,45,18,0.95) 100%) !important;
    border-bottom: 1px solid rgba(251,146,60,0.4) !important;
}
body.design-formell.formal-theme-copper .stat-value,
body.design-formell.formal-theme-copper .logo {
    color: #fb923c !important;
}
body.design-formell.formal-theme-copper .card,
body.design-formell.formal-theme-copper .typing-area {
    background: rgba(67,20,7,0.6) !important;
    border: 1px solid rgba(251,146,60,0.3) !important;
}

/* Formell Theme: Gold - Luxuriöse goldene Töne */
html.design-formell.formal-theme-gold,
body.design-formell.formal-theme-gold {
    background:
        radial-gradient(circle 700px at 25% 20%, rgba(202,138,4,0.35) 0%, transparent 50%),
        radial-gradient(circle 550px at 75% 75%, rgba(133,77,14,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 80% 10%, rgba(234,179,8,0.25) 0%, transparent 50%),
        radial-gradient(circle 600px at 10% 85%, rgba(161,98,7,0.2) 0%, transparent 45%),
        repeating-linear-gradient(155deg, transparent 0px, transparent 160px, rgba(234,179,8,0.1) 160px, rgba(234,179,8,0.1) 162px),
        linear-gradient(145deg, #422006 0%, #713f12 35%, #854d0e 65%, #a16207 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-gold .dashboard-header,
body.design-formell.formal-theme-gold .header {
    background: linear-gradient(180deg, rgba(66,32,6,0.98) 0%, rgba(113,63,18,0.95) 100%) !important;
    border-bottom: 1px solid rgba(234,179,8,0.4) !important;
}
body.design-formell.formal-theme-gold .stat-value,
body.design-formell.formal-theme-gold .logo {
    color: #eab308 !important;
}
body.design-formell.formal-theme-gold .card,
body.design-formell.formal-theme-gold .typing-area {
    background: rgba(66,32,6,0.6) !important;
    border: 1px solid rgba(234,179,8,0.3) !important;
}

/* Formell Theme: Ivory - Elegantes helles Creme */
html.design-formell.formal-theme-ivory,
body.design-formell.formal-theme-ivory {
    background:
        radial-gradient(circle 800px at 15% 15%, rgba(250,240,230,0.6) 0%, transparent 50%),
        radial-gradient(circle 600px at 85% 80%, rgba(245,235,220,0.5) 0%, transparent 45%),
        radial-gradient(circle 500px at 80% 15%, rgba(255,250,245,0.4) 0%, transparent 50%),
        radial-gradient(circle 700px at 20% 85%, rgba(240,230,215,0.35) 0%, transparent 45%),
        repeating-linear-gradient(165deg, transparent 0px, transparent 200px, rgba(200,190,170,0.08) 200px, rgba(200,190,170,0.08) 202px),
        linear-gradient(145deg, #faf5eb 0%, #f5f0e0 35%, #ebe5d5 65%, #e0d8c5 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-ivory .dashboard-header,
body.design-formell.formal-theme-ivory .header {
    background: linear-gradient(180deg, rgba(250,245,235,0.98) 0%, rgba(245,240,224,0.95) 100%) !important;
    border-bottom: 1px solid rgba(180,170,150,0.3) !important;
}
body.design-formell.formal-theme-ivory .stat-value,
body.design-formell.formal-theme-ivory .logo {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .card,
body.design-formell.formal-theme-ivory .typing-area {
    background: rgba(255,252,248,0.9) !important;
    border: 1px solid rgba(180,170,150,0.3) !important;
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .card h2,
body.design-formell.formal-theme-ivory .card h3,
body.design-formell.formal-theme-ivory .card p,
body.design-formell.formal-theme-ivory .text-line,
body.design-formell.formal-theme-ivory .nav-links a,
body.design-formell.formal-theme-ivory .stat-label {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory h1,
body.design-formell.formal-theme-ivory h2,
body.design-formell.formal-theme-ivory h3,
body.design-formell.formal-theme-ivory .welcome-text h1,
body.design-formell.formal-theme-ivory .page-title {
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory .welcome-text p,
body.design-formell.formal-theme-ivory .subtitle {
    color: #57534e !important;
}

/* Formell Theme: Sapphire - Tiefes elegantes Blau */
html.design-formell.formal-theme-sapphire,
body.design-formell.formal-theme-sapphire {
    background:
        radial-gradient(circle 700px at 20% 20%, rgba(59,130,246,0.35) 0%, transparent 50%),
        radial-gradient(circle 550px at 80% 75%, rgba(30,58,138,0.4) 0%, transparent 45%),
        radial-gradient(circle 450px at 75% 10%, rgba(96,165,250,0.25) 0%, transparent 50%),
        radial-gradient(circle 600px at 15% 85%, rgba(37,99,235,0.2) 0%, transparent 45%),
        repeating-linear-gradient(155deg, transparent 0px, transparent 170px, rgba(96,165,250,0.08) 170px, rgba(96,165,250,0.08) 172px),
        linear-gradient(145deg, #172554 0%, #1e3a8a 35%, #1d4ed8 65%, #2563eb 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-sapphire .dashboard-header,
body.design-formell.formal-theme-sapphire .header {
    background: linear-gradient(180deg, rgba(23,37,84,0.98) 0%, rgba(30,58,138,0.95) 100%) !important;
    border-bottom: 1px solid rgba(96,165,250,0.4) !important;
}
body.design-formell.formal-theme-sapphire .stat-value,
body.design-formell.formal-theme-sapphire .logo {
    color: #60a5fa !important;
}
body.design-formell.formal-theme-sapphire .card,
body.design-formell.formal-theme-sapphire .typing-area {
    background: rgba(23,37,84,0.6) !important;
    border: 1px solid rgba(96,165,250,0.3) !important;
}

body.design-formell .theme-icons,
body.design-formell .theme-icons-container,
body.design-formell .mascot,
body.design-formell .mascot-hint,
body.design-formell .fun-badge,
body.design-formell .achievement-animation {
    display: none !important;
}

body.design-formell .dashboard-header,
body.design-formell .header {
    background: rgba(50,50,60,0.95) !important;
}

body.design-formell .logo {
    color: #3498db !important;
}

/* Elegant Theme (Default) - Dunkler Header mit hellem Text */
body.design-formell.formal-theme-default .dashboard-header,
body.design-formell.formal-theme-default .header {
    background: linear-gradient(135deg, rgba(30,27,75,0.97), rgba(49,46,100,0.95)) !important;
    border-bottom: 1px solid rgba(124,58,237,0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
body.design-formell.formal-theme-default .dashboard-header *,
body.design-formell.formal-theme-default .header *,
body.design-formell.formal-theme-default .dashboard-header a,
body.design-formell.formal-theme-default .header a,
body.design-formell.formal-theme-default .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-default .logo {
    color: #c4b5fd !important;
}
body.design-formell.formal-theme-default .nav-links a:hover {
    color: #c4b5fd !important;
}

/* Elegant Theme - Dropdown Menü Fix (dunkler Text auf hellem Hintergrund) */
body.design-formell.formal-theme-default .avatar-dropdown-menu,
body.design-formell.formal-theme-default .avatar-dropdown-menu * {
    color: #333 !important;
}
body.design-formell.formal-theme-default .dropdown-item {
    color: #333 !important;
}
body.design-formell.formal-theme-default .dropdown-item:hover {
    color: #7c3aed !important;
    background: linear-gradient(90deg, rgba(124,58,237,0.15), rgba(124,58,237,0.08)) !important;
}
body.design-formell.formal-theme-default .dropdown-logout:hover {
    color: #dc2626 !important;
    background: linear-gradient(90deg, rgba(220,38,38,0.15), rgba(220,38,38,0.08)) !important;
}

/* Formell Elegant Theme - Dark Mode - Premium Nacht-Design */
html.design-formell.formal-theme-default:not(.light-mode),
body.design-formell.formal-theme-default:not(.light-mode) {
    background:
        /* Leuchtende Orbs im Dunklen - Aurora-Effekt */
        radial-gradient(circle 900px at 5% 5%, rgba(124,58,237,0.30) 0%, transparent 45%),
        radial-gradient(circle 700px at 95% 90%, rgba(219,39,119,0.25) 0%, transparent 40%),
        radial-gradient(circle 600px at 85% 15%, rgba(59,130,246,0.22) 0%, transparent 35%),
        radial-gradient(circle 800px at 10% 85%, rgba(168,85,247,0.20) 0%, transparent 45%),
        radial-gradient(circle 500px at 50% 50%, rgba(14,165,233,0.15) 0%, transparent 40%),
        radial-gradient(circle 400px at 70% 60%, rgba(236,72,153,0.12) 0%, transparent 35%),
        /* Subtile Sternenstaub-Effekte */
        radial-gradient(circle 2px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 60% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(circle 2px at 80% 70%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(circle 2px at 40% 80%, rgba(255,255,255,0.25) 0%, transparent 100%),
        /* Elegante diagonale Glasstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 100px, rgba(124,58,237,0.06) 100px, rgba(124,58,237,0.06) 102px),
        repeating-linear-gradient(45deg, transparent 0px, transparent 150px, rgba(219,39,119,0.04) 150px, rgba(219,39,119,0.04) 152px),
        /* Premium dunkler Basis-Gradient mit Tiefe */
        linear-gradient(135deg, #0c0a1d 0%, #1e1b4b 20%, #1a1a3e 40%, #2e1a47 60%, #1e1b4b 80%, #0c0a1d 100%) !important;
    background-attachment: fixed !important;
}

/* Formell Elegant Theme - Light Mode - Premium Hell-Design */
html.design-formell.formal-theme-default.light-mode,
body.design-formell.formal-theme-default.light-mode {
    background:
        /* Große leuchtende Orbs - Premium Glaseffekt */
        radial-gradient(circle 1000px at 5% 0%, rgba(124,58,237,0.35) 0%, transparent 50%),
        radial-gradient(circle 800px at 95% 95%, rgba(219,39,119,0.30) 0%, transparent 45%),
        radial-gradient(circle 600px at 80% 10%, rgba(59,130,246,0.28) 0%, transparent 40%),
        radial-gradient(circle 700px at 0% 80%, rgba(168,85,247,0.25) 0%, transparent 45%),
        radial-gradient(circle 500px at 45% 45%, rgba(14,165,233,0.18) 0%, transparent 40%),
        radial-gradient(circle 400px at 65% 70%, rgba(236,72,153,0.15) 0%, transparent 35%),
        /* Schimmernde Lichtreflexe */
        radial-gradient(circle 300px at 30% 20%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle 250px at 70% 80%, rgba(255,255,255,0.5) 0%, transparent 40%),
        /* Elegante diagonale Glasstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 80px, rgba(124,58,237,0.05) 80px, rgba(124,58,237,0.05) 82px),
        repeating-linear-gradient(45deg, transparent 0px, transparent 120px, rgba(219,39,119,0.04) 120px, rgba(219,39,119,0.04) 122px),
        /* Premium Basis-Gradient mit mehr Tiefe */
        linear-gradient(135deg, #faf5ff 0%, #ede9fe 15%, #e0e7ff 30%, #fce7f3 50%, #ddd6fe 70%, #e0e7ff 85%, #faf5ff 100%) !important;
    background-attachment: fixed !important;
}

/* Formell Light Mode (default) */
body.design-formell.light-mode .card,
body.design-formell.light-mode .dashboard-card,
body.design-formell.light-mode .settings-card {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

body.design-formell.light-mode .card h2,
body.design-formell.light-mode .card h3,
body.design-formell.light-mode .card-header h2,
body.design-formell.light-mode .settings-card h2 {
    color: #333 !important;
}

body.design-formell.light-mode .card p,
body.design-formell.light-mode .card-content p,
body.design-formell.light-mode .stat-label {
    color: #666 !important;
}

body.design-formell.light-mode .stat-value {
    color: #3498db !important;
}

/* Formell Dark Mode */
html.design-formell:not(.light-mode),
body.design-formell:not(.light-mode) {
    background: linear-gradient(180deg, rgba(15,23,42,0.98) 0%, rgba(30,58,95,0.95) 100%) !important;
    color: #e2e8f0 !important;
}

body.design-formell:not(.light-mode) .card,
body.design-formell:not(.light-mode) .dashboard-card,
body.design-formell:not(.light-mode) .settings-card {
    background: rgba(30, 35, 45, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3) !important;
}

body.design-formell:not(.light-mode) .card h2,
body.design-formell:not(.light-mode) .card h3,
body.design-formell:not(.light-mode) .card-header h2,
body.design-formell:not(.light-mode) .settings-card h2 {
    color: #e2e8f0 !important;
}

body.design-formell:not(.light-mode) .card p,
body.design-formell:not(.light-mode) .card-content p,
body.design-formell:not(.light-mode) .stat-label,
body.design-formell:not(.light-mode) .setting-desc {
    color: rgba(255,255,255,0.7) !important;
}

body.design-formell:not(.light-mode) .stat-value {
    color: #3498db !important;
}

body.design-formell:not(.light-mode) .stat-box {
    background: rgba(0,0,0,0.05) !important;
}

body.design-formell:not(.light-mode) .setting-group,
body.design-formell:not(.light-mode) .setting-item {
    border-color: rgba(0,0,0,0.1) !important;
}

body.design-formell:not(.light-mode) .design-mode-option {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

body.design-formell:not(.light-mode) .design-mode-option.selected {
    background: rgba(52,152,219,0.15) !important;
    border-color: #FFD93D !important;
}

body.design-formell:not(.light-mode) .design-mode-name,
body.design-formell:not(.light-mode) .design-mode-desc {
    color: rgba(255,255,255,0.9) !important;
}

/* Formell Dark Mode - Labels, Inputs & Forms */
body.design-formell:not(.light-mode) .setting-label,
body.design-formell:not(.light-mode) .form-group label,
body.design-formell:not(.light-mode) label {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .setting-desc,
body.design-formell:not(.light-mode) .form-group small,
body.design-formell:not(.light-mode) .hint {
    color: rgba(255,255,255,0.6) !important;
}

body.design-formell:not(.light-mode) .range-value,
body.design-formell:not(.light-mode) .slider-value,
body.design-formell:not(.light-mode) output {
    color: #5dade2 !important;
}

body.design-formell:not(.light-mode) input[type="text"],
body.design-formell:not(.light-mode) input[type="email"],
body.design-formell:not(.light-mode) input[type="password"],
body.design-formell:not(.light-mode) input[type="number"],
body.design-formell:not(.light-mode) select,
body.design-formell:not(.light-mode) textarea {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

body.design-formell:not(.light-mode) input::placeholder,
body.design-formell:not(.light-mode) textarea::placeholder {
    color: rgba(255,255,255,0.65) !important;
}

body.design-formell:not(.light-mode) .avatar-option,
body.design-formell:not(.light-mode) .theme-option {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

body.design-formell:not(.light-mode) .avatar-option.selected,
body.design-formell:not(.light-mode) .theme-option.selected {
    border-color: #5dade2 !important;
    background: rgba(93, 173, 226, 0.15) !important;
}

/* Formell Dark Mode - General text colors in cards */
body.design-formell:not(.light-mode) .card span,
body.design-formell:not(.light-mode) .card div,
body.design-formell:not(.light-mode) .settings-card span,
body.design-formell:not(.light-mode) .settings-card div {
    color: rgba(255,255,255,0.9);
}

body.design-formell:not(.light-mode) .setting-row span[id],
body.design-formell:not(.light-mode) #visible-lines-value,
body.design-formell:not(.light-mode) #level-length-value {
    color: #5dade2 !important;
}

body.design-formell:not(.light-mode) .danger-zone .setting-label {
    color: #ff6b6b !important;
}

body.design-formell:not(.light-mode) .btn-danger {
    background: #c0392b !important;
    border-color: #a93226 !important;
}

body.design-formell .btn-primary {
    background: #3498db !important;
    border-color: #2980b9 !important;
    color: #fff !important;
}

body.design-formell .btn-primary:hover {
    background: #2980b9 !important;
}

body.design-formell .level-item {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #ddd !important;
}

body.design-formell .level-item:hover {
    background: rgba(240,240,240,1) !important;
    color: #1a1a2e !important;
}

body.design-formell .level-item:hover .level-item-name,
body.design-formell .level-item:hover .level-number,
body.design-formell .level-item:hover span {
    color: #1a1a2e !important;
}

body.design-formell .level-item-name,
body.design-formell .level-number {
    color: #333 !important;
}

body.design-formell .progress-fill {
    background: linear-gradient(90deg, #3498db, #2980b9) !important;
}

body.design-formell .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}

body.design-formell .nav-links a:hover {
    color: #3498db !important;
}


/* Formell Light Mode - Welcome Text mit dunkler Schrift */
html.design-formell.light-mode .welcome-text h1,
html.design-formell.light-mode .welcome-section h1,
html.design-formell.light-mode .page-title,
body.design-formell.light-mode .welcome-text h1,
body.design-formell.light-mode .page-title,
body.design-formell.light-mode .welcome-section h1 {
    color: #1a1a2e !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
    -webkit-text-stroke: 0 !important;
}

html.design-formell.light-mode .welcome-text p,
html.design-formell.light-mode .welcome-section p,
html.design-formell.light-mode .subtitle,
body.design-formell.light-mode .welcome-text p,
body.design-formell.light-mode .subtitle,
body.design-formell.light-mode .welcome-section p {
    color: #374151 !important;
    text-shadow: none !important;
}

/* Footer im formellen Modus */
body.design-formell .legal-footer {
    background: rgba(50,50,60,0.95) !important;
}

body.design-formell .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}

/* ============ FORMELLER MODUS - DASHBOARD ============ */
/* Light Mode: heller Hintergrund */
body.design-formell.light-mode .welcome-section {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(99,102,241,0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Dark Mode: dunkler Hintergrund */
body.design-formell:not(.light-mode) .welcome-section {
    background: rgba(30, 35, 45, 0.9) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(10px) !important;
}

/* Level-Unterscheidung im formellen Modus */
body.design-formell .level-item.completed,
body.design-formell .level-grid .level-item.completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
    color: white !important;
}

body.design-formell .level-item.completed .level-item-name,
body.design-formell .level-item.completed .level-number {
    color: white !important;
}

body.design-formell .level-item.current,
body.design-formell .level-grid .level-item.current {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #d97706 !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(245,158,11,0.4) !important;
}

body.design-formell .level-item.locked,
body.design-formell .level-grid .level-item.locked {
    background: rgba(148,163,184,0.3) !important;
    border-color: rgba(148,163,184,0.4) !important;
    color: #94a3b8 !important;
}

body.design-formell .start-btn {
    background: #3498db !important;
    color: white !important;
}

body.design-formell .start-btn:hover {
    background: #2980b9 !important;
}

body.design-formell .stats-grid .stat-card {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
}

body.design-formell .stat-card .stat-value {
    color: #3498db !important;
}

body.design-formell .stat-card .stat-label {
    color: #666 !important;
}

body.design-formell .activity-item {
    background: rgba(245,245,245,0.95) !important;
    border: 1px solid #e0e0e0 !important;
}

body.design-formell .activity-level {
    color: #333 !important;
}

body.design-formell .activity-stats span {
    color: #666 !important;
}

body.design-formell .level-grid .level-item,
body.design-formell .level-option {
    background: #fff !important;
    border: 2px solid #3498db !important;
    color: #333 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

body.design-formell .level-grid .level-item:hover,
body.design-formell .level-option:hover {
    background: #f0f7ff !important;
    border-color: #2980b9 !important;
    transform: translateY(-2px);
    color: #1a1a2e !important;
}

body.design-formell .level-grid .level-item:hover .level-item-name,
body.design-formell .level-grid .level-item:hover .level-number,
body.design-formell .level-grid .level-item:hover span,
body.design-formell .level-option:hover .level-option-name,
body.design-formell .level-option:hover .level-option-number {
    color: #1a1a2e !important;
}

body.design-formell .level-option .level-option-number {
    color: #3498db !important;
    font-weight: bold;
}

body.design-formell .level-option .level-option-name {
    color: #333 !important;
}

body.design-formell .level-option.completed {
    background: #e8f5e9 !important;
    border-color: #27ae60 !important;
}

body.design-formell .level-option.current-suggestion {
    background: #fff3e0 !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 15px rgba(243,156,18,0.3) !important;
}

body.design-formell .level-option.locked {
    background: #f5f5f5 !important;
    border-color: #bbb !important;
    opacity: 0.7;
}

body.design-formell .level-option .level-option-desc {
    color: #666 !important;
}
body.design-formell .level-option.completed .level-option-desc {
    color: #27ae60 !important;
}
body.design-formell .level-option.locked .level-option-desc {
    color: #999 !important;
}
body.design-formell .level-category-header {
    color: #3498db !important;
    border-bottom-color: rgba(52,152,219,0.2) !important;
}
body.design-formell .level-category-header.pro-category {
    color: #e67e22 !important;
    border-bottom-color: rgba(230,126,34,0.2) !important;
}

/* ============ FORMELLER MODUS - REWARDS ============ */
body.design-formell .shop-grid .shop-item {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
}

body.design-formell .shop-item .item-name {
    color: #333 !important;
}

body.design-formell .shop-item .item-price {
    color: #3498db !important;
}

body.design-formell .achievements-grid .achievement-card {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
}

body.design-formell .achievement-info h3 {
    color: #333 !important;
}
/* Higher specificity for formal themes */
body.design-formell[class*="formal-theme-"] .achievement-info h3 {
    color: #333 !important;
}

body.design-formell .achievement-info p {
    color: #666 !important;
}

body.design-formell.light-mode .coins-info {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
}
body.design-formell:not(.light-mode) .coins-info {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

body.design-formell.light-mode .coins-text h3 {
    color: #3498db !important;
}
body.design-formell:not(.light-mode) .coins-text h3 {
    color: #fde68a !important;
}
/* Higher specificity for formal themes */
body.design-formell.light-mode[class*="formal-theme-"] .coins-text h3 {
    color: #3498db !important;
}
body.design-formell:not(.light-mode)[class*="formal-theme-"] .coins-text h3 {
    color: #fde68a !important;
}

body.design-formell.light-mode .coins-text p {
    color: #666 !important;
}
body.design-formell:not(.light-mode) .coins-text p {
    color: rgba(255,255,255,0.7) !important;
}

body.design-formell.light-mode .section h2 {
    color: #333 !important;
}
body.design-formell:not(.light-mode) .section h2 {
    color: #e2e8f0 !important;
}
body.design-formell.light-mode[class*="formal-theme-"] .section h2 {
    color: #333 !important;
}
body.design-formell:not(.light-mode)[class*="formal-theme-"] .section h2 {
    color: #e2e8f0 !important;
}

/* ============ FORMELLER MODUS - SETTINGS ============ */
body.design-formell.light-mode .settings-section,
body.design-formell.light-mode .section {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid #ddd !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
body.design-formell:not(.light-mode) .settings-section,
body.design-formell:not(.light-mode) .section {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

body.design-formell.light-mode input[type="text"],
body.design-formell.light-mode input[type="email"],
body.design-formell.light-mode input[type="password"],
body.design-formell.light-mode select {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}
body.design-formell:not(.light-mode) input[type="text"],
body.design-formell:not(.light-mode) input[type="email"],
body.design-formell:not(.light-mode) input[type="password"],
body.design-formell:not(.light-mode) select {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
}

body.design-formell.light-mode .avatar-grid .avatar-option {
    background: rgba(245,245,245,0.95) !important;
    border: 2px solid #ddd !important;
}
body.design-formell:not(.light-mode) .avatar-grid .avatar-option {
    background: rgba(255,255,255,0.06) !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
}

body.design-formell .avatar-option.selected {
    border-color: #3498db !important;
    background: rgba(52,152,219,0.1) !important;
}

body.design-formell.light-mode .btn-secondary {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}
body.design-formell:not(.light-mode) .btn-secondary {
    background: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

body.design-formell .btn-danger {
    background: rgba(231,76,60,0.1) !important;
    color: #e74c3c !important;
    border: 1px solid #e74c3c !important;
}

body.design-formell.light-mode .account-info {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

body.design-formell.light-mode .account-info p {
    color: #666 !important;
}

body.design-formell:not(.light-mode) .account-info {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

body.design-formell:not(.light-mode) .account-info p {
    color: rgba(255,255,255,0.8) !important;
}

body.design-formell:not(.light-mode) .account-info strong {
    color: #fff !important;
}

body.design-formell.light-mode label {
    color: #333 !important;
}

body.design-formell:not(.light-mode) label {
    color: rgba(255,255,255,0.9) !important;
}

/* ============ FORMELLER MODUS - ALLGEMEIN ============ */
body.design-formell .container {
    color: #333;
}

body.design-formell .page-subtitle,
body.design-formell .section-count {
    color: #666 !important;
}

body.design-formell .category-tab {
    background: #f0f0f0 !important;
    color: #333 !important;
}

body.design-formell .category-tab.active {
    background: #3498db !important;
    color: white !important;
}

body.design-formell .theme-selector-btn {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
}

body.design-formell.light-mode .theme-selector-btn {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
}

/* Verspielter Modus - Light Mode Button Fix */
body.design-verspielt.light-mode .theme-selector-btn,
body.light-mode:not(.design-formell) .theme-selector-btn {
    background: linear-gradient(135deg, #6C63FF, #FF6B9D) !important;
    color: white !important;
}

/* ============================================
   FORMELLER MODUS - HIGH CONTRAST REGELN
   Sicherstellen dass alle Texte gut lesbar sind
   ============================================ */

/* === STANDARD FORMELL (Heller Hintergrund) === */
body.design-formell {
    color: #333 !important;
}

/* Standard Formell mit hellem Hintergrund - dunkle Überschriften */
body.design-formell:not([class*="formal-theme-"]) h1,
body.design-formell:not([class*="formal-theme-"]) h2,
body.design-formell:not([class*="formal-theme-"]) h3,
body.design-formell:not([class*="formal-theme-"]) h4 {
    color: #222 !important;
}

/* Formell mit dunklen formal-themes - helle Überschriften */
body.design-formell[class*="formal-theme-"]:not(.light-mode) h1,
body.design-formell[class*="formal-theme-"]:not(.light-mode) h2,
body.design-formell[class*="formal-theme-"]:not(.light-mode) h3,
body.design-formell[class*="formal-theme-"]:not(.light-mode) h4 {
    color: #fff !important;
}

body.design-formell .text-line,
body.design-formell .text-display,
body.design-formell .char.waiting {
    color: #5b6e82 !important;
}

body.design-formell .char.done {
    color: rgba(91, 110, 130, 0.85) !important;
}

body.design-formell .char.error {
    color: #e74c3c !important;
    background: rgba(231,76,60,0.1) !important;
}

body.design-formell .char.current {
    background: rgba(52,152,219,0.3) !important;
    border-bottom: 2px solid #3498db !important;
}

/* === DARK FORMAL THEMES - Komplette Kontrast-Regeln === */

/* Corporate Blue - Dark Theme */
body.design-formell.formal-theme-blue {
    color: #ffffff !important;
}
body.design-formell.formal-theme-blue h1,
body.design-formell.formal-theme-blue h2,
body.design-formell.formal-theme-blue h3,
body.design-formell.formal-theme-blue .welcome-text h1,
body.design-formell.formal-theme-blue .page-title {
    color: #ffffff !important;
}
body.design-formell.formal-theme-blue .welcome-text p,
body.design-formell.formal-theme-blue .subtitle,
body.design-formell.formal-theme-blue .page-subtitle {
    color: rgba(255,255,255,0.8) !important;
}
body.design-formell.formal-theme-blue .card h2,
body.design-formell.formal-theme-blue .card h3,
body.design-formell.formal-theme-blue .card-header h2 {
    color: #1a365d !important;
}
body.design-formell.formal-theme-blue .card p,
body.design-formell.formal-theme-blue .stat-label,
body.design-formell.formal-theme-blue .activity-stats {
    color: #4a5568 !important;
}
body.design-formell.formal-theme-blue .stat-value {
    color: #2c5282 !important;
}
body.design-formell.formal-theme-blue .text-line,
body.design-formell.formal-theme-blue .text-display,
body.design-formell.formal-theme-blue .char.waiting {
    color: #1a365d !important;
}
body.design-formell.formal-theme-blue .char.done {
    color: rgba(26, 54, 93, 0.85) !important;
}
body.design-formell.formal-theme-blue .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-blue .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-blue .welcome-section {
    background: linear-gradient(135deg, rgba(26,54,93,0.95), rgba(44,82,130,0.9)) !important;
    border: 1px solid rgba(66,153,225,0.3) !important;
}

/* Dark Slate Theme */
body.design-formell.formal-theme-slate {
    color: #ffffff !important;
}
body.design-formell.formal-theme-slate h1,
body.design-formell.formal-theme-slate h2,
body.design-formell.formal-theme-slate h3,
body.design-formell.formal-theme-slate .welcome-text h1,
body.design-formell.formal-theme-slate .page-title {
    color: #ffffff !important;
}
body.design-formell.formal-theme-slate .welcome-text p,
body.design-formell.formal-theme-slate .subtitle,
body.design-formell.formal-theme-slate .page-subtitle {
    color: rgba(255,255,255,0.8) !important;
}
body.design-formell.formal-theme-slate .card h2,
body.design-formell.formal-theme-slate .card h3 {
    color: #1e293b !important;
}
body.design-formell.formal-theme-slate .card p,
body.design-formell.formal-theme-slate .stat-label {
    color: #475569 !important;
}
body.design-formell.formal-theme-slate .stat-value {
    color: #334155 !important;
}
body.design-formell.formal-theme-slate .text-line,
body.design-formell.formal-theme-slate .text-display,
body.design-formell.formal-theme-slate .char.waiting {
    color: #1e293b !important;
}
body.design-formell.formal-theme-slate .char.done {
    color: rgba(30, 41, 59, 0.85) !important;
}
body.design-formell.formal-theme-slate .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-slate .welcome-section {
    background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(51,65,85,0.9)) !important;
    border: 1px solid rgba(71,85,105,0.3) !important;
}

/* Forest Green Theme */
body.design-formell.formal-theme-forest {
    color: #ffffff !important;
}
body.design-formell.formal-theme-forest h1,
body.design-formell.formal-theme-forest h2,
body.design-formell.formal-theme-forest h3,
body.design-formell.formal-theme-forest .welcome-text h1,
body.design-formell.formal-theme-forest .page-title {
    color: #ffffff !important;
}
body.design-formell.formal-theme-forest .welcome-text p,
body.design-formell.formal-theme-forest .subtitle,
body.design-formell.formal-theme-forest .page-subtitle {
    color: rgba(255,255,255,0.8) !important;
}
body.design-formell.formal-theme-forest .card,
body.design-formell.formal-theme-forest .typing-area,
body.design-formell.formal-theme-forest .formal-stats-header {
    background: rgba(255,255,255,0.95) !important;
}
body.design-formell.formal-theme-forest .card h2,
body.design-formell.formal-theme-forest .card h3 {
    color: #14532d !important;
}
body.design-formell.formal-theme-forest .card p,
body.design-formell.formal-theme-forest .stat-label {
    color: #166534 !important;
}
body.design-formell.formal-theme-forest .text-line,
body.design-formell.formal-theme-forest .text-display,
body.design-formell.formal-theme-forest .char.waiting {
    color: #14532d !important;
}
body.design-formell.formal-theme-forest .char.done {
    color: rgba(20, 83, 45, 0.85) !important;
}
body.design-formell.formal-theme-forest .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-forest .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-forest .welcome-section {
    background: linear-gradient(135deg, rgba(20,83,45,0.95), rgba(22,101,52,0.9)) !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
}

/* Royal Purple Theme */
body.design-formell.formal-theme-purple {
    color: #ffffff !important;
}
body.design-formell.formal-theme-purple h1,
body.design-formell.formal-theme-purple h2,
body.design-formell.formal-theme-purple h3,
body.design-formell.formal-theme-purple .welcome-text h1,
body.design-formell.formal-theme-purple .page-title {
    color: #ffffff !important;
}
body.design-formell.formal-theme-purple .welcome-text p,
body.design-formell.formal-theme-purple .subtitle,
body.design-formell.formal-theme-purple .page-subtitle {
    color: rgba(255,255,255,0.8) !important;
}
body.design-formell.formal-theme-purple .card,
body.design-formell.formal-theme-purple .typing-area,
body.design-formell.formal-theme-purple .formal-stats-header {
    background: rgba(255,255,255,0.95) !important;
}
body.design-formell.formal-theme-purple .card h2,
body.design-formell.formal-theme-purple .card h3 {
    color: #3b0764 !important;
}
body.design-formell.formal-theme-purple .card p,
body.design-formell.formal-theme-purple .stat-label {
    color: #581c87 !important;
}
body.design-formell.formal-theme-purple .text-line,
body.design-formell.formal-theme-purple .text-display,
body.design-formell.formal-theme-purple .char.waiting {
    color: #3b0764 !important;
}
body.design-formell.formal-theme-purple .char.done {
    color: rgba(59, 7, 100, 0.85) !important;
}
body.design-formell.formal-theme-purple .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-purple .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-purple .welcome-section {
    background: linear-gradient(135deg, rgba(59,7,100,0.95), rgba(88,28,135,0.9)) !important;
    border: 1px solid rgba(168,85,247,0.3) !important;
}

/* Midnight Theme - KOMPLETT DUNKLES DESIGN */
body.design-formell.formal-theme-midnight {
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight h1,
body.design-formell.formal-theme-midnight h2,
body.design-formell.formal-theme-midnight h3,
body.design-formell.formal-theme-midnight .welcome-text h1,
body.design-formell.formal-theme-midnight .page-title {
    color: #f1f5f9 !important;
}
body.design-formell.formal-theme-midnight .welcome-text p,
body.design-formell.formal-theme-midnight .subtitle,
body.design-formell.formal-theme-midnight .page-subtitle {
    color: rgba(226,232,240,0.8) !important;
}
body.design-formell.formal-theme-midnight .card,
body.design-formell.formal-theme-midnight .stats-grid .stat-card,
body.design-formell.formal-theme-midnight .activity-item,
body.design-formell.formal-theme-midnight .settings-section,
body.design-formell.formal-theme-midnight .section,
body.design-formell.formal-theme-midnight .welcome-section {
    background: rgba(30,41,59,0.95) !important;
    border-color: #475569 !important;
}
body.design-formell.formal-theme-midnight .card h2,
body.design-formell.formal-theme-midnight .card h3,
body.design-formell.formal-theme-midnight .section h2 {
    color: #f1f5f9 !important;
}
body.design-formell.formal-theme-midnight .card p,
body.design-formell.formal-theme-midnight .stat-label,
body.design-formell.formal-theme-midnight .activity-stats,
body.design-formell.formal-theme-midnight .achievement-info p,
body.design-formell.formal-theme-midnight .coins-text p {
    color: #94a3b8 !important;
}
body.design-formell.formal-theme-midnight .stat-value,
body.design-formell.formal-theme-midnight .coins-text h3 {
    color: #60a5fa !important;
}
body.design-formell.formal-theme-midnight .typing-area,
body.design-formell.formal-theme-midnight .formal-stats-header {
    background: rgba(30,41,59,0.95) !important;
    border-color: #475569 !important;
}
body.design-formell.formal-theme-midnight .text-line,
body.design-formell.formal-theme-midnight .text-display,
body.design-formell.formal-theme-midnight .char.waiting {
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .char.done {
    color: rgba(226, 232, 240, 0.85) !important;
}
body.design-formell.formal-theme-midnight .char.error {
    color: #f87171 !important;
    background: rgba(248,113,113,0.2) !important;
}
body.design-formell.formal-theme-midnight .char.current {
    background: rgba(96,165,250,0.3) !important;
    border-bottom: 2px solid #60a5fa !important;
}
body.design-formell.formal-theme-midnight .level-item,
body.design-formell.formal-theme-midnight .level-option,
body.design-formell.formal-theme-midnight .level-grid .level-item {
    background: rgba(51,65,85,0.95) !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .level-item-name,
body.design-formell.formal-theme-midnight .level-number,
body.design-formell.formal-theme-midnight .level-option-name,
body.design-formell.formal-theme-midnight .level-option-number {
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .level-item:hover,
body.design-formell.formal-theme-midnight .level-option:hover {
    background: rgba(71,85,105,0.95) !important;
    color: #f1f5f9 !important;
}
body.design-formell.formal-theme-midnight .level-item:hover .level-item-name,
body.design-formell.formal-theme-midnight .level-item:hover .level-number,
body.design-formell.formal-theme-midnight .level-item:hover span,
body.design-formell.formal-theme-midnight .level-option:hover .level-option-name,
body.design-formell.formal-theme-midnight .level-option:hover .level-option-number {
    color: #f1f5f9 !important;
}
body.design-formell.formal-theme-midnight .level-option.completed {
    background: rgba(34,197,94,0.2) !important;
    border-color: #22c55e !important;
}
body.design-formell.formal-theme-midnight .level-option.current-suggestion {
    background: rgba(251,191,36,0.2) !important;
    border-color: #fbbf24 !important;
}
body.design-formell.formal-theme-midnight .level-option.locked {
    background: rgba(51,65,85,0.6) !important;
    opacity: 0.6;
}
body.design-formell.formal-theme-midnight input,
body.design-formell.formal-theme-midnight select,
body.design-formell.formal-theme-midnight textarea {
    background: rgba(51,65,85,0.95) !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight label {
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .btn-primary {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
body.design-formell.formal-theme-midnight .btn-secondary {
    background: rgba(51,65,85,0.95) !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
body.design-formell.formal-theme-midnight .category-tab {
    background: rgba(51,65,85,0.95) !important;
    color: #e2e8f0 !important;
}
body.design-formell.formal-theme-midnight .category-tab.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
body.design-formell.formal-theme-midnight .nav-links a {
    color: rgba(226,232,240,0.9) !important;
}
body.design-formell.formal-theme-midnight .legal-footer {
    background: rgba(15,23,42,0.95) !important;
}
body.design-formell.formal-theme-midnight .legal-footer a {
    color: rgba(226,232,240,0.75) !important;
}
body.design-formell.formal-theme-midnight .shop-item,
body.design-formell.formal-theme-midnight .achievement-card,
body.design-formell.formal-theme-midnight .coins-info {
    background: rgba(30,41,59,0.95) !important;
    border-color: #475569 !important;
}
body.design-formell.formal-theme-midnight .item-name,
body.design-formell.formal-theme-midnight .achievement-info h3 {
    color: #f1f5f9 !important;
}
body.design-formell.formal-theme-midnight .item-price {
    color: #60a5fa !important;
}
body.design-formell.formal-theme-midnight .avatar-option {
    background: rgba(51,65,85,0.95) !important;
    border-color: #475569 !important;
}
body.design-formell.formal-theme-midnight .avatar-option.selected {
    border-color: #3b82f6 !important;
    background: rgba(59,130,246,0.2) !important;
}

/* Warm Gray Theme */
body.design-formell.formal-theme-warm {
    color: #ffffff !important;
}
body.design-formell.formal-theme-warm h1,
body.design-formell.formal-theme-warm h2,
body.design-formell.formal-theme-warm h3,
body.design-formell.formal-theme-warm .welcome-text h1,
body.design-formell.formal-theme-warm .page-title {
    color: #ffffff !important;
}
body.design-formell.formal-theme-warm .welcome-text p,
body.design-formell.formal-theme-warm .subtitle {
    color: rgba(255,255,255,0.8) !important;
}
body.design-formell.formal-theme-warm .card,
body.design-formell.formal-theme-warm .typing-area,
body.design-formell.formal-theme-warm .formal-stats-header {
    background: rgba(255,255,255,0.95) !important;
}
body.design-formell.formal-theme-warm .card h2,
body.design-formell.formal-theme-warm .card h3 {
    color: #44403c !important;
}
body.design-formell.formal-theme-warm .card p,
body.design-formell.formal-theme-warm .stat-label {
    color: #57534e !important;
}
body.design-formell.formal-theme-warm .stat-value {
    color: #44403c !important;
}
body.design-formell.formal-theme-warm .text-line,
body.design-formell.formal-theme-warm .text-display,
body.design-formell.formal-theme-warm .char.waiting {
    color: #44403c !important;
}
body.design-formell.formal-theme-warm .char.done {
    color: rgba(68, 64, 60, 0.85) !important;
}
body.design-formell.formal-theme-warm .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-warm .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-warm .welcome-section {
    background: linear-gradient(135deg, rgba(180,83,9,0.95), rgba(217,119,6,0.9)) !important;
    border: 1px solid rgba(251,191,36,0.3) !important;
}

/* ============ NEUE ELEGANTE THEMES ============ */

/* Formell Theme: Carbon - Elegantes Kohlefaser mit Glaseffekt */
html.design-formell.formal-theme-carbon,
body.design-formell.formal-theme-carbon {
    background:
        /* Tech-Orbs mit Schimmer */
        radial-gradient(circle 600px at 15% 20%, rgba(75,85,99,0.25) 0%, transparent 50%),
        radial-gradient(circle 500px at 85% 75%, rgba(55,65,81,0.2) 0%, transparent 45%),
        radial-gradient(circle 450px at 70% 10%, rgba(107,114,128,0.15) 0%, transparent 50%),
        radial-gradient(circle 400px at 25% 85%, rgba(75,85,99,0.12) 0%, transparent 45%),
        /* Kohlefaser-Muster */
        repeating-linear-gradient(45deg, transparent 0px, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px),
        /* Diagonale Glasstreifen */
        repeating-linear-gradient(135deg, transparent 0px, transparent 100px, rgba(107,114,128,0.06) 100px, rgba(107,114,128,0.06) 102px),
        /* Basis */
        linear-gradient(145deg, #0d1117 0%, #1f2937 35%, #374151 65%, #1f2937 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-carbon .dashboard-header,
body.design-formell.formal-theme-carbon .header {
    background: linear-gradient(180deg, rgba(17,24,39,0.98) 0%, rgba(31,41,55,0.95) 100%) !important;
    border-bottom: 1px solid rgba(75,85,99,0.5) !important;
}
body.design-formell.formal-theme-carbon .card,
body.design-formell.formal-theme-carbon .typing-area,
body.design-formell.formal-theme-carbon .formal-stats-header,
body.design-formell.formal-theme-carbon .stats-grid .stat-card,
body.design-formell.formal-theme-carbon .activity-item,
body.design-formell.formal-theme-carbon .welcome-section {
    background: rgba(31,41,55,0.95) !important;
    border: 1px solid rgba(75,85,99,0.4) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.design-formell.formal-theme-carbon,
body.design-formell.formal-theme-carbon h1,
body.design-formell.formal-theme-carbon h2,
body.design-formell.formal-theme-carbon h3,
body.design-formell.formal-theme-carbon .welcome-text h1 {
    color: #f3f4f6 !important;
}
body.design-formell.formal-theme-carbon .welcome-text p,
body.design-formell.formal-theme-carbon .stat-label {
    color: #9ca3af !important;
}
body.design-formell.formal-theme-carbon .stat-value,
body.design-formell.formal-theme-carbon .logo {
    color: #60a5fa !important;
}
body.design-formell.formal-theme-carbon .card h2,
body.design-formell.formal-theme-carbon .card h3,
body.design-formell.formal-theme-carbon .section h2,
body.design-formell.formal-theme-carbon .settings-section h2 {
    color: #f3f4f6 !important;
}
body.design-formell.formal-theme-carbon .card p {
    color: #9ca3af !important;
}
body.design-formell.formal-theme-carbon .text-line,
body.design-formell.formal-theme-carbon .text-display,
body.design-formell.formal-theme-carbon .char.waiting {
    color: #e5e7eb !important;
}
body.design-formell.formal-theme-carbon .char.done {
    color: rgba(229, 231, 235, 0.85) !important;
}
body.design-formell.formal-theme-carbon .char.current {
    background: #3b82f6 !important;
    color: #fff !important;
}
body.design-formell.formal-theme-carbon .nav-links a {
    color: rgba(243,244,246,0.85) !important;
}
body.design-formell.formal-theme-carbon .legal-footer {
    background: rgba(17,24,39,0.95) !important;
}
body.design-formell.formal-theme-carbon .legal-footer a {
    color: rgba(243,244,246,0.75) !important;
}
body.design-formell.formal-theme-carbon .level-item,
body.design-formell.formal-theme-carbon .level-option {
    background: rgba(55,65,81,0.95) !important;
    border-color: rgba(75,85,99,0.5) !important;
    color: #e5e7eb !important;
}
body.design-formell.formal-theme-carbon .level-item:hover,
body.design-formell.formal-theme-carbon .level-option:hover {
    background: rgba(75,85,99,0.95) !important;
    border-color: rgba(107,114,128,0.6) !important;
    color: #f3f4f6 !important;
}
body.design-formell.formal-theme-carbon .level-item:hover .level-item-name,
body.design-formell.formal-theme-carbon .level-item:hover .level-number,
body.design-formell.formal-theme-carbon .level-item:hover span {
    color: #f3f4f6 !important;
}
body.design-formell.formal-theme-carbon input,
body.design-formell.formal-theme-carbon select {
    background: rgba(55,65,81,0.95) !important;
    border-color: rgba(75,85,99,0.5) !important;
    color: #e5e7eb !important;
}
body.design-formell.formal-theme-carbon label {
    color: #e5e7eb !important;
}

/* Formell Theme: Rose Gold - Elegantes Rosa-Gold mit Glaseffekt */
html.design-formell.formal-theme-rose,
body.design-formell.formal-theme-rose {
    background:
        /* Elegante Rosé-Orbs */
        radial-gradient(circle 700px at 25% 15%, rgba(251,207,232,0.3) 0%, transparent 50%),
        radial-gradient(circle 550px at 75% 80%, rgba(244,114,182,0.22) 0%, transparent 45%),
        radial-gradient(circle 450px at 85% 25%, rgba(253,242,248,0.18) 0%, transparent 50%),
        radial-gradient(circle 500px at 15% 75%, rgba(251,207,232,0.15) 0%, transparent 45%),
        /* Sanfte Wellenstreifen */
        repeating-linear-gradient(150deg, transparent 0px, transparent 130px, rgba(251,207,232,0.08) 130px, rgba(251,207,232,0.08) 132px),
        repeating-linear-gradient(30deg, transparent 0px, transparent 180px, rgba(244,114,182,0.05) 180px, rgba(244,114,182,0.05) 182px),
        /* Basis */
        linear-gradient(145deg, #831843 0%, #9d174d 35%, #be185d 65%, #ec4899 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-rose .dashboard-header,
body.design-formell.formal-theme-rose .header {
    background: linear-gradient(180deg, rgba(131,24,67,0.98) 0%, rgba(157,23,77,0.95) 100%) !important;
    border-bottom: 1px solid rgba(244,114,182,0.4) !important;
}
body.design-formell.formal-theme-rose .card,
body.design-formell.formal-theme-rose .typing-area,
body.design-formell.formal-theme-rose .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(244,114,182,0.1) !important;
}
body.design-formell.formal-theme-rose,
body.design-formell.formal-theme-rose h1,
body.design-formell.formal-theme-rose h2,
body.design-formell.formal-theme-rose h3,
body.design-formell.formal-theme-rose .welcome-text h1 {
    color: #ffffff !important;
}
body.design-formell.formal-theme-rose .welcome-text p {
    color: rgba(255,255,255,0.85) !important;
}
body.design-formell.formal-theme-rose .stat-value,
body.design-formell.formal-theme-rose .logo {
    color: #f9a8d4 !important;
}
body.design-formell.formal-theme-rose .card h2,
body.design-formell.formal-theme-rose .card h3,
body.design-formell.formal-theme-rose .section h2,
body.design-formell.formal-theme-rose .settings-section h2 {
    color: #831843 !important;
}
body.design-formell.formal-theme-rose .card p,
body.design-formell.formal-theme-rose .stat-label {
    color: #9d174d !important;
}
body.design-formell.formal-theme-rose .text-line,
body.design-formell.formal-theme-rose .text-display,
body.design-formell.formal-theme-rose .char.waiting {
    color: #831843 !important;
}
body.design-formell.formal-theme-rose .char.done {
    color: rgba(131, 24, 67, 0.85) !important;
}
body.design-formell.formal-theme-rose .char.current {
    background: #db2777 !important;
    color: #fff !important;
}
body.design-formell.formal-theme-rose .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-rose .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-rose .welcome-section {
    background: linear-gradient(135deg, rgba(131,24,67,0.95), rgba(157,23,77,0.9)) !important;
    border: 1px solid rgba(236,72,153,0.3) !important;
}

/* Formell Theme: Ocean - Tiefes elegantes Meeresblau mit Glaseffekt */
html.design-formell.formal-theme-ocean,
body.design-formell.formal-theme-ocean {
    background:
        /* Tiefe Ozean-Orbs wie Unterwasserlicht */
        radial-gradient(circle 750px at 20% 80%, rgba(34,211,238,0.22) 0%, transparent 50%),
        radial-gradient(circle 550px at 80% 20%, rgba(6,182,212,0.18) 0%, transparent 45%),
        radial-gradient(circle 500px at 50% 50%, rgba(94,234,212,0.12) 0%, transparent 50%),
        radial-gradient(circle 450px at 10% 30%, rgba(34,211,238,0.1) 0%, transparent 45%),
        radial-gradient(circle 400px at 90% 70%, rgba(45,212,191,0.08) 0%, transparent 50%),
        /* Wellenförmige Streifen */
        repeating-linear-gradient(170deg, transparent 0px, transparent 150px, rgba(34,211,238,0.06) 150px, rgba(34,211,238,0.06) 152px),
        repeating-linear-gradient(10deg, transparent 0px, transparent 200px, rgba(94,234,212,0.04) 200px, rgba(94,234,212,0.04) 202px),
        /* Basis */
        linear-gradient(145deg, #042f2e 0%, #134e4a 35%, #0f766e 65%, #14b8a6 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-ocean .dashboard-header,
body.design-formell.formal-theme-ocean .header {
    background: linear-gradient(180deg, rgba(4,47,46,0.98) 0%, rgba(19,78,74,0.95) 100%) !important;
    border-bottom: 1px solid rgba(34,211,238,0.3) !important;
}
body.design-formell.formal-theme-ocean .card,
body.design-formell.formal-theme-ocean .typing-area,
body.design-formell.formal-theme-ocean .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(20,184,166,0.1) !important;
}
body.design-formell.formal-theme-ocean,
body.design-formell.formal-theme-ocean h1,
body.design-formell.formal-theme-ocean h2,
body.design-formell.formal-theme-ocean h3,
body.design-formell.formal-theme-ocean .welcome-text h1 {
    color: #ffffff !important;
}
body.design-formell.formal-theme-ocean .welcome-text p {
    color: rgba(255,255,255,0.85) !important;
}
body.design-formell.formal-theme-ocean .stat-value,
body.design-formell.formal-theme-ocean .logo {
    color: #5eead4 !important;
}
body.design-formell.formal-theme-ocean .card h2,
body.design-formell.formal-theme-ocean .card h3,
body.design-formell.formal-theme-ocean .section h2,
body.design-formell.formal-theme-ocean .settings-section h2 {
    color: #134e4a !important;
}
body.design-formell.formal-theme-ocean .card p,
body.design-formell.formal-theme-ocean .stat-label {
    color: #0f766e !important;
}
body.design-formell.formal-theme-ocean .text-line,
body.design-formell.formal-theme-ocean .text-display,
body.design-formell.formal-theme-ocean .char.waiting {
    color: #134e4a !important;
}
body.design-formell.formal-theme-ocean .char.done {
    color: rgba(19, 78, 74, 0.85) !important;
}
body.design-formell.formal-theme-ocean .char.current {
    background: #0d9488 !important;
    color: #fff !important;
}
body.design-formell.formal-theme-ocean .nav-links a {
    color: rgba(255,255,255,0.9) !important;
}
body.design-formell.formal-theme-ocean .legal-footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-ocean .welcome-section {
    background: linear-gradient(135deg, rgba(19,78,74,0.95), rgba(15,118,110,0.9)) !important;
    border: 1px solid rgba(20,184,166,0.3) !important;
}

/* Formell Theme: Emerald - Tiefes Smaragdgrün */
html.design-formell.formal-theme-emerald,
body.design-formell.formal-theme-emerald {
    background:
        radial-gradient(circle 700px at 15% 25%, rgba(52,211,153,0.25) 0%, transparent 50%),
        radial-gradient(circle 550px at 85% 70%, rgba(4,120,87,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 70% 10%, rgba(110,231,183,0.15) 0%, transparent 50%),
        radial-gradient(circle 600px at 10% 85%, rgba(52,211,153,0.12) 0%, transparent 45%),
        repeating-linear-gradient(155deg, transparent 0px, transparent 140px, rgba(52,211,153,0.07) 140px, rgba(52,211,153,0.07) 142px),
        linear-gradient(145deg, #064e3b 0%, #065f46 35%, #047857 65%, #059669 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-emerald .dashboard-header,
body.design-formell.formal-theme-emerald .header {
    background: linear-gradient(180deg, rgba(6,78,59,0.98) 0%, rgba(6,95,70,0.95) 100%) !important;
    border-bottom: 1px solid rgba(52,211,153,0.35) !important;
}
body.design-formell.formal-theme-emerald .card,
body.design-formell.formal-theme-emerald .typing-area,
body.design-formell.formal-theme-emerald .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(52,211,153,0.1) !important;
}
body.design-formell.formal-theme-emerald .stat-value,
body.design-formell.formal-theme-emerald .logo {
    color: #34d399 !important;
}

/* Formell Theme: Burgundy - Edles Weinrot */
html.design-formell.formal-theme-burgundy,
body.design-formell.formal-theme-burgundy {
    background:
        radial-gradient(circle 700px at 20% 20%, rgba(252,165,165,0.2) 0%, transparent 50%),
        radial-gradient(circle 550px at 80% 75%, rgba(153,27,27,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 75% 10%, rgba(248,113,113,0.15) 0%, transparent 50%),
        radial-gradient(circle 600px at 15% 85%, rgba(185,28,28,0.12) 0%, transparent 45%),
        repeating-linear-gradient(160deg, transparent 0px, transparent 160px, rgba(252,165,165,0.06) 160px, rgba(252,165,165,0.06) 162px),
        linear-gradient(145deg, #450a0a 0%, #7f1d1d 35%, #991b1b 65%, #b91c1c 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-burgundy .dashboard-header,
body.design-formell.formal-theme-burgundy .header {
    background: linear-gradient(180deg, rgba(69,10,10,0.98) 0%, rgba(127,29,29,0.95) 100%) !important;
    border-bottom: 1px solid rgba(252,165,165,0.35) !important;
}
body.design-formell.formal-theme-burgundy .card,
body.design-formell.formal-theme-burgundy .typing-area,
body.design-formell.formal-theme-burgundy .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(252,165,165,0.1) !important;
}
body.design-formell.formal-theme-burgundy .stat-value,
body.design-formell.formal-theme-burgundy .logo {
    color: #fca5a5 !important;
}

/* Formell Theme: Navy - Tiefes Marineblau */
html.design-formell.formal-theme-navy,
body.design-formell.formal-theme-navy {
    background:
        radial-gradient(circle 700px at 10% 30%, rgba(147,197,253,0.2) 0%, transparent 50%),
        radial-gradient(circle 550px at 90% 65%, rgba(30,58,95,0.35) 0%, transparent 45%),
        radial-gradient(circle 450px at 60% 10%, rgba(96,165,250,0.15) 0%, transparent 50%),
        radial-gradient(circle 600px at 20% 85%, rgba(59,130,246,0.1) 0%, transparent 45%),
        repeating-linear-gradient(145deg, transparent 0px, transparent 170px, rgba(147,197,253,0.06) 170px, rgba(147,197,253,0.06) 172px),
        linear-gradient(145deg, #0c1445 0%, #152357 35%, #1e3a5f 65%, #2563eb 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-navy .dashboard-header,
body.design-formell.formal-theme-navy .header {
    background: linear-gradient(180deg, rgba(12,20,69,0.98) 0%, rgba(21,35,87,0.95) 100%) !important;
    border-bottom: 1px solid rgba(147,197,253,0.3) !important;
}
body.design-formell.formal-theme-navy .card,
body.design-formell.formal-theme-navy .typing-area,
body.design-formell.formal-theme-navy .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(147,197,253,0.1) !important;
}
body.design-formell.formal-theme-navy .stat-value,
body.design-formell.formal-theme-navy .logo {
    color: #93c5fd !important;
}

/* Formell Theme: Charcoal - Elegantes dunkles Anthrazit */
html.design-formell.formal-theme-charcoal,
body.design-formell.formal-theme-charcoal {
    background:
        radial-gradient(circle 700px at 15% 25%, rgba(163,163,163,0.2) 0%, transparent 50%),
        radial-gradient(circle 550px at 85% 70%, rgba(64,64,64,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 70% 15%, rgba(115,115,115,0.15) 0%, transparent 50%),
        radial-gradient(circle 600px at 10% 80%, rgba(82,82,82,0.12) 0%, transparent 45%),
        repeating-linear-gradient(150deg, transparent 0px, transparent 130px, rgba(163,163,163,0.05) 130px, rgba(163,163,163,0.05) 132px),
        linear-gradient(145deg, #171717 0%, #262626 35%, #404040 65%, #525252 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-charcoal .dashboard-header,
body.design-formell.formal-theme-charcoal .header {
    background: linear-gradient(180deg, rgba(23,23,23,0.98) 0%, rgba(38,38,38,0.95) 100%) !important;
    border-bottom: 1px solid rgba(163,163,163,0.3) !important;
}
body.design-formell.formal-theme-charcoal .card,
body.design-formell.formal-theme-charcoal .typing-area,
body.design-formell.formal-theme-charcoal .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(163,163,163,0.1) !important;
}
body.design-formell.formal-theme-charcoal .stat-value,
body.design-formell.formal-theme-charcoal .logo {
    color: #a3a3a3 !important;
}

/* Formell Theme: Lavender - Elegantes Lavendel/Violett */
html.design-formell.formal-theme-lavender,
body.design-formell.formal-theme-lavender {
    background:
        radial-gradient(circle 700px at 20% 20%, rgba(196,181,253,0.25) 0%, transparent 50%),
        radial-gradient(circle 550px at 80% 75%, rgba(88,28,135,0.3) 0%, transparent 45%),
        radial-gradient(circle 450px at 65% 10%, rgba(167,139,250,0.18) 0%, transparent 50%),
        radial-gradient(circle 600px at 15% 85%, rgba(139,92,246,0.12) 0%, transparent 45%),
        repeating-linear-gradient(165deg, transparent 0px, transparent 155px, rgba(196,181,253,0.07) 155px, rgba(196,181,253,0.07) 157px),
        linear-gradient(145deg, #2e1065 0%, #3b0764 35%, #581c87 65%, #7c3aed 100%) !important;
    background-attachment: fixed !important;
}
body.design-formell.formal-theme-lavender .dashboard-header,
body.design-formell.formal-theme-lavender .header {
    background: linear-gradient(180deg, rgba(46,16,101,0.98) 0%, rgba(59,7,100,0.95) 100%) !important;
    border-bottom: 1px solid rgba(196,181,253,0.35) !important;
}
body.design-formell.formal-theme-lavender .card,
body.design-formell.formal-theme-lavender .typing-area,
body.design-formell.formal-theme-lavender .formal-stats-header {
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(196,181,253,0.1) !important;
}
body.design-formell.formal-theme-lavender .stat-value,
body.design-formell.formal-theme-lavender .logo {
    color: #c4b5fd !important;
}

/* ============================================== */
/* FORMELL DARK MODE - Comprehensive Text Fixes  */
/* All formal themes with dark backgrounds       */
/* ============================================== */

/* --- FORMAL THEME BLUE - Dark Mode --- */
body.design-formell.formal-theme-blue:not(.light-mode) .card,
body.design-formell.formal-theme-blue:not(.light-mode) .typing-area,
body.design-formell.formal-theme-blue:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-blue:not(.light-mode) .settings-card,
body.design-formell.formal-theme-blue:not(.light-mode) .dashboard-card {
    background: rgba(15, 30, 60, 0.95) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
body.design-formell.formal-theme-blue:not(.light-mode) .card h2,
body.design-formell.formal-theme-blue:not(.light-mode) .card h3,
body.design-formell.formal-theme-blue:not(.light-mode) .card-header h2 {
    color: #93c5fd !important;
}
body.design-formell.formal-theme-blue:not(.light-mode) .card p,
body.design-formell.formal-theme-blue:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-blue:not(.light-mode) .stat-value {
    color: #60a5fa !important;
}

/* --- FORMAL THEME SLATE - Dark Mode --- */
body.design-formell.formal-theme-slate:not(.light-mode) .card,
body.design-formell.formal-theme-slate:not(.light-mode) .typing-area,
body.design-formell.formal-theme-slate:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-slate:not(.light-mode) .settings-card,
body.design-formell.formal-theme-slate:not(.light-mode) .dashboard-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}
body.design-formell.formal-theme-slate:not(.light-mode) .card h2,
body.design-formell.formal-theme-slate:not(.light-mode) .card h3,
body.design-formell.formal-theme-slate:not(.light-mode) .card-header h2 {
    color: #cbd5e1 !important;
}
body.design-formell.formal-theme-slate:not(.light-mode) .card p,
body.design-formell.formal-theme-slate:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-slate:not(.light-mode) .stat-value {
    color: #94a3b8 !important;
}

/* --- FORMAL THEME FOREST - Dark Mode --- */
body.design-formell.formal-theme-forest:not(.light-mode) .card,
body.design-formell.formal-theme-forest:not(.light-mode) .typing-area,
body.design-formell.formal-theme-forest:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-forest:not(.light-mode) .settings-card,
body.design-formell.formal-theme-forest:not(.light-mode) .dashboard-card {
    background: rgba(5, 46, 22, 0.95) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
body.design-formell.formal-theme-forest:not(.light-mode) .card h2,
body.design-formell.formal-theme-forest:not(.light-mode) .card h3,
body.design-formell.formal-theme-forest:not(.light-mode) .card-header h2 {
    color: #86efac !important;
}
body.design-formell.formal-theme-forest:not(.light-mode) .card p,
body.design-formell.formal-theme-forest:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-forest:not(.light-mode) .stat-value {
    color: #4ade80 !important;
}

/* --- FORMAL THEME PURPLE - Dark Mode --- */
body.design-formell.formal-theme-purple:not(.light-mode) .card,
body.design-formell.formal-theme-purple:not(.light-mode) .typing-area,
body.design-formell.formal-theme-purple:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-purple:not(.light-mode) .settings-card,
body.design-formell.formal-theme-purple:not(.light-mode) .dashboard-card {
    background: rgba(30, 27, 75, 0.95) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}
body.design-formell.formal-theme-purple:not(.light-mode) .card h2,
body.design-formell.formal-theme-purple:not(.light-mode) .card h3,
body.design-formell.formal-theme-purple:not(.light-mode) .card-header h2 {
    color: #c4b5fd !important;
}
body.design-formell.formal-theme-purple:not(.light-mode) .card p,
body.design-formell.formal-theme-purple:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-purple:not(.light-mode) .stat-value {
    color: #a78bfa !important;
}

/* --- FORMAL THEME WARM - Dark Mode --- */
body.design-formell.formal-theme-warm:not(.light-mode) .card,
body.design-formell.formal-theme-warm:not(.light-mode) .typing-area,
body.design-formell.formal-theme-warm:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-warm:not(.light-mode) .settings-card,
body.design-formell.formal-theme-warm:not(.light-mode) .dashboard-card {
    background: rgba(68, 64, 60, 0.95) !important;
    border: 1px solid rgba(168, 162, 158, 0.3) !important;
}
body.design-formell.formal-theme-warm:not(.light-mode) .card h2,
body.design-formell.formal-theme-warm:not(.light-mode) .card h3,
body.design-formell.formal-theme-warm:not(.light-mode) .card-header h2 {
    color: #fcd34d !important;
}
body.design-formell.formal-theme-warm:not(.light-mode) .card p,
body.design-formell.formal-theme-warm:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-warm:not(.light-mode) .stat-value {
    color: #fbbf24 !important;
}

/* --- FORMAL THEME ROSE - Dark Mode --- */
body.design-formell.formal-theme-rose:not(.light-mode) .card,
body.design-formell.formal-theme-rose:not(.light-mode) .typing-area,
body.design-formell.formal-theme-rose:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-rose:not(.light-mode) .settings-card,
body.design-formell.formal-theme-rose:not(.light-mode) .dashboard-card {
    background: rgba(131, 24, 67, 0.95) !important;
    border: 1px solid rgba(244, 114, 182, 0.3) !important;
}
body.design-formell.formal-theme-rose:not(.light-mode) .card h2,
body.design-formell.formal-theme-rose:not(.light-mode) .card h3,
body.design-formell.formal-theme-rose:not(.light-mode) .card-header h2 {
    color: #fbcfe8 !important;
}
body.design-formell.formal-theme-rose:not(.light-mode) .card p,
body.design-formell.formal-theme-rose:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-rose:not(.light-mode) .stat-value {
    color: #f9a8d4 !important;
}

/* --- FORMAL THEME OCEAN - Dark Mode --- */
body.design-formell.formal-theme-ocean:not(.light-mode) .card,
body.design-formell.formal-theme-ocean:not(.light-mode) .typing-area,
body.design-formell.formal-theme-ocean:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-ocean:not(.light-mode) .settings-card,
body.design-formell.formal-theme-ocean:not(.light-mode) .dashboard-card {
    background: rgba(4, 47, 46, 0.95) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
}
body.design-formell.formal-theme-ocean:not(.light-mode) .card h2,
body.design-formell.formal-theme-ocean:not(.light-mode) .card h3,
body.design-formell.formal-theme-ocean:not(.light-mode) .card-header h2 {
    color: #67e8f9 !important;
}
body.design-formell.formal-theme-ocean:not(.light-mode) .card p,
body.design-formell.formal-theme-ocean:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-ocean:not(.light-mode) .stat-value {
    color: #22d3ee !important;
}

/* --- FORMAL THEME STEEL - Dark Mode --- */
body.design-formell.formal-theme-steel:not(.light-mode) .card,
body.design-formell.formal-theme-steel:not(.light-mode) .typing-area,
body.design-formell.formal-theme-steel:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-steel:not(.light-mode) .settings-card,
body.design-formell.formal-theme-steel:not(.light-mode) .dashboard-card {
    background: rgba(51, 65, 85, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
body.design-formell.formal-theme-steel:not(.light-mode) .card h2,
body.design-formell.formal-theme-steel:not(.light-mode) .card h3,
body.design-formell.formal-theme-steel:not(.light-mode) .card-header h2 {
    color: #cbd5e1 !important;
}
body.design-formell.formal-theme-steel:not(.light-mode) .card p,
body.design-formell.formal-theme-steel:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-steel:not(.light-mode) .stat-value {
    color: #94a3b8 !important;
}

/* --- FORMAL THEME COPPER - Dark Mode --- */
body.design-formell.formal-theme-copper:not(.light-mode) .card,
body.design-formell.formal-theme-copper:not(.light-mode) .typing-area,
body.design-formell.formal-theme-copper:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-copper:not(.light-mode) .settings-card,
body.design-formell.formal-theme-copper:not(.light-mode) .dashboard-card {
    background: rgba(67, 20, 7, 0.95) !important;
    border: 1px solid rgba(251, 146, 60, 0.3) !important;
}
body.design-formell.formal-theme-copper:not(.light-mode) .card h2,
body.design-formell.formal-theme-copper:not(.light-mode) .card h3,
body.design-formell.formal-theme-copper:not(.light-mode) .card-header h2 {
    color: #fed7aa !important;
}
body.design-formell.formal-theme-copper:not(.light-mode) .card p,
body.design-formell.formal-theme-copper:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-copper:not(.light-mode) .stat-value {
    color: #fb923c !important;
}

/* --- FORMAL THEME GOLD - Dark Mode --- */
body.design-formell.formal-theme-gold:not(.light-mode) .card,
body.design-formell.formal-theme-gold:not(.light-mode) .typing-area,
body.design-formell.formal-theme-gold:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-gold:not(.light-mode) .settings-card,
body.design-formell.formal-theme-gold:not(.light-mode) .dashboard-card {
    background: rgba(66, 32, 6, 0.95) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}
body.design-formell.formal-theme-gold:not(.light-mode) .card h2,
body.design-formell.formal-theme-gold:not(.light-mode) .card h3,
body.design-formell.formal-theme-gold:not(.light-mode) .card-header h2 {
    color: #fef08a !important;
}
body.design-formell.formal-theme-gold:not(.light-mode) .card p,
body.design-formell.formal-theme-gold:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-gold:not(.light-mode) .stat-value {
    color: #eab308 !important;
}

/* --- FORMAL THEME IVORY - Light Theme (special, no dark mode variant) --- */
body.design-formell.formal-theme-ivory .card,
body.design-formell.formal-theme-ivory .typing-area,
body.design-formell.formal-theme-ivory .formal-stats-header,
body.design-formell.formal-theme-ivory .settings-card,
body.design-formell.formal-theme-ivory .dashboard-card {
    background: rgba(255, 252, 248, 0.95) !important;
    border: 1px solid rgba(180, 170, 150, 0.3) !important;
}
body.design-formell.formal-theme-ivory .card h2,
body.design-formell.formal-theme-ivory .card h3,
body.design-formell.formal-theme-ivory .card-header h2 {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .card p,
body.design-formell.formal-theme-ivory .stat-label {
    color: #57534e !important;
}
body.design-formell.formal-theme-ivory .stat-value {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .text-line,
body.design-formell.formal-theme-ivory .text-display,
body.design-formell.formal-theme-ivory .typing-text {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .char.waiting {
    color: rgba(41, 37, 36, 0.85) !important;
}
body.design-formell.formal-theme-ivory .char.done {
    color: rgba(41, 37, 36, 0.7) !important;
}
body.design-formell.formal-theme-ivory .char.wrong {
    color: #dc2626 !important;
}
body.design-formell.formal-theme-ivory .nav-links a {
    color: #57534e !important;
}
body.design-formell.formal-theme-ivory .welcome-text h1,
body.design-formell.formal-theme-ivory .welcome-section h1,
body.design-formell.formal-theme-ivory .page-title {
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory .welcome-text p,
body.design-formell.formal-theme-ivory .welcome-section p {
    color: #44403c !important;
}
/* Ivory: Level Items */
body.design-formell.formal-theme-ivory .level-item,
body.design-formell.formal-theme-ivory .level-option {
    background: rgba(245, 240, 224, 0.9) !important;
    border: 1px solid rgba(120, 113, 108, 0.3) !important;
}
body.design-formell.formal-theme-ivory .level-item:hover,
body.design-formell.formal-theme-ivory .level-option:hover {
    background: rgba(235, 229, 213, 1) !important;
    border-color: rgba(68, 64, 60, 0.5) !important;
}
body.design-formell.formal-theme-ivory .level-item-name,
body.design-formell.formal-theme-ivory .level-number,
body.design-formell.formal-theme-ivory .level-option-name,
body.design-formell.formal-theme-ivory .level-option-number,
body.design-formell.formal-theme-ivory .level-item span {
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory .level-option.completed {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
}
body.design-formell.formal-theme-ivory .level-option.current-suggestion {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
}
body.design-formell.formal-theme-ivory .level-option.locked {
    background: rgba(200, 190, 170, 0.5) !important;
    opacity: 0.6 !important;
}
/* Ivory: Inputs/Selects */
body.design-formell.formal-theme-ivory input,
body.design-formell.formal-theme-ivory select,
body.design-formell.formal-theme-ivory textarea {
    background: rgba(255, 252, 248, 0.95) !important;
    border: 1px solid rgba(120, 113, 108, 0.4) !important;
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory label {
    color: #44403c !important;
}
/* Ivory: Buttons */
body.design-formell.formal-theme-ivory .btn-primary {
    background: linear-gradient(135deg, #78716c, #57534e) !important;
    color: #fff !important;
}
body.design-formell.formal-theme-ivory .btn-secondary {
    background: rgba(180, 170, 150, 0.3) !important;
    color: #44403c !important;
    border: 1px solid rgba(120, 113, 108, 0.4) !important;
}
/* Ivory: Links */
body.design-formell.formal-theme-ivory a {
    color: #57534e !important;
}
body.design-formell.formal-theme-ivory a:hover {
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory .legal-footer {
    background: rgba(245, 240, 224, 0.8) !important;
}
body.design-formell.formal-theme-ivory .legal-footer a {
    color: #57534e !important;
}
/* Ivory: Category Tabs */
body.design-formell.formal-theme-ivory .category-tab {
    background: rgba(235, 229, 213, 0.8) !important;
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .category-tab.active {
    background: rgba(120, 113, 108, 0.3) !important;
    color: #292524 !important;
}
/* Ivory: Shop Items and Cards */
body.design-formell.formal-theme-ivory .shop-item,
body.design-formell.formal-theme-ivory .achievement-card,
body.design-formell.formal-theme-ivory .coins-info {
    background: rgba(255, 252, 248, 0.95) !important;
    border: 1px solid rgba(180, 170, 150, 0.3) !important;
}
body.design-formell.formal-theme-ivory .item-name,
body.design-formell.formal-theme-ivory .achievement-info h3 {
    color: #292524 !important;
}
body.design-formell.formal-theme-ivory .item-price {
    color: #57534e !important;
}
/* Ivory: Avatar Options */
body.design-formell.formal-theme-ivory .avatar-option {
    background: rgba(245, 240, 224, 0.9) !important;
    border: 2px solid rgba(120, 113, 108, 0.3) !important;
}
body.design-formell.formal-theme-ivory .avatar-option.selected {
    border-color: #78716c !important;
    background: rgba(235, 229, 213, 1) !important;
}
/* Ivory: Activity Stats */
body.design-formell.formal-theme-ivory .activity-stats,
body.design-formell.formal-theme-ivory .achievement-info p,
body.design-formell.formal-theme-ivory .coins-text p {
    color: #57534e !important;
}
body.design-formell.formal-theme-ivory .coins-text h3 {
    color: #44403c !important;
}
/* Ivory: Stat Badge in Header */
body.design-formell.formal-theme-ivory .stat-badge {
    background: rgba(180, 170, 150, 0.3) !important;
    color: #44403c !important;
}

/* Ivory: Dropdown Menü (dunkler Text auf hellem Hintergrund) */
body.design-formell.formal-theme-ivory .avatar-dropdown-menu,
body.design-formell.formal-theme-ivory .avatar-dropdown-menu * {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .dropdown-item {
    color: #44403c !important;
}
body.design-formell.formal-theme-ivory .dropdown-item:hover {
    color: #292524 !important;
    background: linear-gradient(90deg, rgba(120,113,108,0.15), rgba(120,113,108,0.08)) !important;
}
body.design-formell.formal-theme-ivory .dropdown-logout:hover {
    color: #dc2626 !important;
    background: linear-gradient(90deg, rgba(220,38,38,0.15), rgba(220,38,38,0.08)) !important;
}

/* --- FORMAL THEME SAPPHIRE - Dark Mode --- */
body.design-formell.formal-theme-sapphire:not(.light-mode) .card,
body.design-formell.formal-theme-sapphire:not(.light-mode) .typing-area,
body.design-formell.formal-theme-sapphire:not(.light-mode) .formal-stats-header,
body.design-formell.formal-theme-sapphire:not(.light-mode) .settings-card,
body.design-formell.formal-theme-sapphire:not(.light-mode) .dashboard-card {
    background: rgba(23, 37, 84, 0.95) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}
body.design-formell.formal-theme-sapphire:not(.light-mode) .card h2,
body.design-formell.formal-theme-sapphire:not(.light-mode) .card h3,
body.design-formell.formal-theme-sapphire:not(.light-mode) .card-header h2 {
    color: #bfdbfe !important;
}
body.design-formell.formal-theme-sapphire:not(.light-mode) .card p,
body.design-formell.formal-theme-sapphire:not(.light-mode) .stat-label {
    color: rgba(255,255,255,0.7) !important;
}
body.design-formell.formal-theme-sapphire:not(.light-mode) .stat-value {
    color: #60a5fa !important;
}

/* ============================================== */
/* FORMAL THEMES - LIGHT MODE BACKGROUNDS        */
/* ============================================== */

/* Blue (Corporate) - Light Mode */
html.design-formell.formal-theme-blue.light-mode,
body.design-formell.formal-theme-blue.light-mode {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 35%, #93c5fd 65%, #60a5fa 100%) !important;
    background-attachment: fixed !important;
}

/* Slate - Light Mode */
html.design-formell.formal-theme-slate.light-mode,
body.design-formell.formal-theme-slate.light-mode {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 35%, #cbd5e1 65%, #94a3b8 100%) !important;
    background-attachment: fixed !important;
}

/* Forest (Emerald) - Light Mode */
html.design-formell.formal-theme-forest.light-mode,
body.design-formell.formal-theme-forest.light-mode {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 35%, #86efac 65%, #4ade80 100%) !important;
    background-attachment: fixed !important;
}

/* Purple - Light Mode */
html.design-formell.formal-theme-purple.light-mode,
body.design-formell.formal-theme-purple.light-mode {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 35%, #d8b4fe 65%, #c084fc 100%) !important;
    background-attachment: fixed !important;
}

/* Midnight - Light Mode */
html.design-formell.formal-theme-midnight.light-mode,
body.design-formell.formal-theme-midnight.light-mode {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 35%, #a5b4fc 65%, #818cf8 100%) !important;
    background-attachment: fixed !important;
}

/* Warm (Sand) - Light Mode */
html.design-formell.formal-theme-warm.light-mode,
body.design-formell.formal-theme-warm.light-mode {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 35%, #fcd34d 65%, #fbbf24 100%) !important;
    background-attachment: fixed !important;
}

/* Steel - Light Mode */
html.design-formell.formal-theme-steel.light-mode,
body.design-formell.formal-theme-steel.light-mode {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 35%, #cbd5e1 65%, #94a3b8 100%) !important;
    background-attachment: fixed !important;
}

/* Copper - Light Mode */
html.design-formell.formal-theme-copper.light-mode,
body.design-formell.formal-theme-copper.light-mode {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 35%, #fdba74 65%, #fb923c 100%) !important;
    background-attachment: fixed !important;
}

/* Ocean - Light Mode */
html.design-formell.formal-theme-ocean.light-mode,
body.design-formell.formal-theme-ocean.light-mode {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 35%, #5eead4 65%, #2dd4bf 100%) !important;
    background-attachment: fixed !important;
}

/* Rose - Light Mode */
html.design-formell.formal-theme-rose.light-mode,
body.design-formell.formal-theme-rose.light-mode {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 35%, #f9a8d4 65%, #f472b6 100%) !important;
    background-attachment: fixed !important;
}

/* Gold - Light Mode */
html.design-formell.formal-theme-gold.light-mode,
body.design-formell.formal-theme-gold.light-mode {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 35%, #fde047 65%, #facc15 100%) !important;
    background-attachment: fixed !important;
}

/* Sapphire - Light Mode */
html.design-formell.formal-theme-sapphire.light-mode,
body.design-formell.formal-theme-sapphire.light-mode {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 35%, #93c5fd 65%, #3b82f6 100%) !important;
    background-attachment: fixed !important;
}

/* Carbon - Light Mode */
html.design-formell.formal-theme-carbon.light-mode,
body.design-formell.formal-theme-carbon.light-mode {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 35%, #d1d5db 65%, #9ca3af 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================== */
/* FORMAL THEMES - LIGHT MODE TEXT & CARDS       */
/* ============================================== */

/* Light Mode für alle Themes: Karten mit weißem Hintergrund */
body.design-formell[class*="formal-theme-"].light-mode .card,
body.design-formell[class*="formal-theme-"].light-mode .typing-area,
body.design-formell[class*="formal-theme-"].light-mode .formal-stats-header,
body.design-formell[class*="formal-theme-"].light-mode .settings-card,
body.design-formell[class*="formal-theme-"].light-mode .dashboard-card {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Light Mode: Dunkle Textfarben */
body.design-formell[class*="formal-theme-"].light-mode .card h2,
body.design-formell[class*="formal-theme-"].light-mode .card h3,
body.design-formell[class*="formal-theme-"].light-mode .card-header h2 {
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .card p,
body.design-formell[class*="formal-theme-"].light-mode .stat-label {
    color: #4b5563 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .stat-value {
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .text-line,
body.design-formell[class*="formal-theme-"].light-mode .text-display,
body.design-formell[class*="formal-theme-"].light-mode .typing-text {
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .char.waiting {
    color: #5b6e82 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .char.done {
    color: rgba(91, 110, 130, 0.85) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .char.current {
    color: #1f2937 !important;
    background: rgba(59, 130, 246, 0.3) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .char.error {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.2) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .nav-links a {
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .welcome-text h1,
body.design-formell[class*="formal-theme-"].light-mode .welcome-section h1,
body.design-formell[class*="formal-theme-"].light-mode .page-title {
    color: #111827 !important;
    text-shadow: none !important;
}

body.design-formell[class*="formal-theme-"].light-mode .welcome-text p,
body.design-formell[class*="formal-theme-"].light-mode .welcome-section p {
    color: #374151 !important;
}

/* Light Mode: Level Items */
body.design-formell[class*="formal-theme-"].light-mode .level-item,
body.design-formell[class*="formal-theme-"].light-mode .level-option {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .level-item:hover,
body.design-formell[class*="formal-theme-"].light-mode .level-option:hover {
    background: rgba(255,255,255,1) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .level-item-name,
body.design-formell[class*="formal-theme-"].light-mode .level-number,
body.design-formell[class*="formal-theme-"].light-mode .level-option-name,
body.design-formell[class*="formal-theme-"].light-mode .level-item span {
    color: #1f2937 !important;
}

/* Light Mode: Inputs */
body.design-formell[class*="formal-theme-"].light-mode input,
body.design-formell[class*="formal-theme-"].light-mode select,
body.design-formell[class*="formal-theme-"].light-mode textarea {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode label {
    color: #374151 !important;
}

/* Light Mode: Footer */
body.design-formell[class*="formal-theme-"].light-mode .legal-footer {
    background: rgba(255,255,255,0.8) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .legal-footer a {
    color: #4b5563 !important;
}

/* Light Mode: Header (alle Themes) */
body.design-formell[class*="formal-theme-"].light-mode .dashboard-header,
body.design-formell[class*="formal-theme-"].light-mode .header {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

body.design-formell[class*="formal-theme-"].light-mode .dashboard-header *,
body.design-formell[class*="formal-theme-"].light-mode .header * {
    color: #1f2937 !important;
}

body.design-formell[class*="formal-theme-"].light-mode .logo {
    color: #3b82f6 !important;
}

/* Light Mode: Stat Badges */
body.design-formell[class*="formal-theme-"].light-mode .stat-badge {
    background: rgba(0,0,0,0.08) !important;
    color: #1f2937 !important;
}

/* ============================================== */
/* GLOBAL DARK MODE TEXT - All Formal Themes     */
/* ============================================== */

/* Welcome text and page titles */
body.design-formell:not(.light-mode) .welcome-text h1,
body.design-formell:not(.light-mode) .welcome-section h1,
body.design-formell:not(.light-mode) .page-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

body.design-formell:not(.light-mode) .welcome-text p,
body.design-formell:not(.light-mode) .welcome-section p {
    color: rgba(255,255,255,0.8) !important;
}

/* Training/Typing display text */
body.design-formell:not(.light-mode) .text-line,
body.design-formell:not(.light-mode) .text-display,
body.design-formell:not(.light-mode) .typing-text {
    color: rgba(255,255,255,0.9) !important;
}

body.design-formell:not(.light-mode) .char.waiting {
    color: rgba(255,255,255,0.85) !important;
}

body.design-formell:not(.light-mode) .char.done {
    color: rgba(255,255,255,0.7) !important;
}

body.design-formell:not(.light-mode) .char.current {
    color: #fff !important;
    background: rgba(59, 130, 246, 0.5) !important;
}

body.design-formell:not(.light-mode) .char.error {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.3) !important;
}

/* Level info and descriptions */
body.design-formell:not(.light-mode) .level-info,
body.design-formell:not(.light-mode) .level-name,
body.design-formell:not(.light-mode) .level-description,
body.design-formell:not(.light-mode) .current-level-info {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .level-keys,
body.design-formell:not(.light-mode) .level-subtitle {
    color: rgba(255,255,255,0.7) !important;
}

/* Stat boxes */
body.design-formell:not(.light-mode) .stat-box,
body.design-formell:not(.light-mode) .stat-item {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

body.design-formell:not(.light-mode) .stat-box .stat-value,
body.design-formell:not(.light-mode) .stat-item .stat-value,
body.design-formell:not(.light-mode) .stat-item-value {
    color: #5dade2 !important;
}

body.design-formell:not(.light-mode) .stat-box .stat-label,
body.design-formell:not(.light-mode) .stat-item .stat-label,
body.design-formell:not(.light-mode) .stat-item-label {
    color: rgba(255,255,255,0.7) !important;
}

/* Form elements */
body.design-formell:not(.light-mode) .form-group label,
body.design-formell:not(.light-mode) .setting-label,
body.design-formell:not(.light-mode) label {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .setting-desc,
body.design-formell:not(.light-mode) .hint,
body.design-formell:not(.light-mode) small {
    color: rgba(255,255,255,0.6) !important;
}

body.design-formell:not(.light-mode) input[type="text"],
body.design-formell:not(.light-mode) input[type="email"],
body.design-formell:not(.light-mode) input[type="password"],
body.design-formell:not(.light-mode) input[type="number"],
body.design-formell:not(.light-mode) select,
body.design-formell:not(.light-mode) textarea {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

body.design-formell:not(.light-mode) input::placeholder,
body.design-formell:not(.light-mode) textarea::placeholder {
    color: rgba(255,255,255,0.65) !important;
}

/* Range slider values */
body.design-formell:not(.light-mode) #visible-lines-value,
body.design-formell:not(.light-mode) #level-length-value,
body.design-formell:not(.light-mode) .range-value,
body.design-formell:not(.light-mode) output {
    color: #5dade2 !important;
}

/* Design mode options */
body.design-formell:not(.light-mode) .design-mode-option {
    background: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
}

body.design-formell:not(.light-mode) .design-mode-option.selected {
    background: rgba(255,217,61,0.15) !important;
    border-color: #FFD93D !important;
}

body.design-formell:not(.light-mode) .design-mode-name {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .design-mode-desc {
    color: rgba(255,255,255,0.7) !important;
}

/* Avatar and theme selectors */
body.design-formell:not(.light-mode) .avatar-option,
body.design-formell:not(.light-mode) .theme-option,
body.design-formell:not(.light-mode) .color-option {
    background: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
}

body.design-formell:not(.light-mode) .avatar-option.selected,
body.design-formell:not(.light-mode) .theme-option.selected,
body.design-formell:not(.light-mode) .color-option.selected {
    border-color: #5dade2 !important;
    background: rgba(93, 173, 226, 0.2) !important;
}

/* General card content */
body.design-formell:not(.light-mode) .card span,
body.design-formell:not(.light-mode) .card div:not(.stat-box):not(.design-mode-option) {
    color: rgba(255,255,255,0.9);
}

/* Danger zone */
body.design-formell:not(.light-mode) .danger-zone {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

body.design-formell:not(.light-mode) .danger-zone .setting-label {
    color: #fca5a5 !important;
}

body.design-formell:not(.light-mode) .btn-danger {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

/* Leaderboard and achievements */
body.design-formell:not(.light-mode) .leaderboard-item,
body.design-formell:not(.light-mode) .achievement-item {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

body.design-formell:not(.light-mode) .leaderboard-item span,
body.design-formell:not(.light-mode) .achievement-item span {
    color: #fff !important;
}

/* Activity items */
body.design-formell:not(.light-mode) .activity-item {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

body.design-formell:not(.light-mode) .activity-level,
body.design-formell:not(.light-mode) .activity-title {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .activity-stats,
body.design-formell:not(.light-mode) .activity-time {
    color: rgba(255,255,255,0.6) !important;
}

/* Level items/grid */
body.design-formell:not(.light-mode) .level-item {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

body.design-formell:not(.light-mode) .level-item-name,
body.design-formell:not(.light-mode) .level-item span {
    color: #fff !important;
}

body.design-formell:not(.light-mode) .level-item.locked {
    background: rgba(255,255,255,0.05) !important;
    opacity: 0.6;
}

body.design-formell:not(.light-mode) .level-item.completed {
    background: rgba(74, 222, 128, 0.2) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
}

/* Empty states */
body.design-formell:not(.light-mode) .empty-state {
    color: rgba(255,255,255,0.65) !important;
}

/* Tables */
body.design-formell:not(.light-mode) table th {
    color: rgba(255,255,255,0.7) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

body.design-formell:not(.light-mode) table td {
    color: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Links in cards */
body.design-formell:not(.light-mode) .card a:not(.btn) {
    color: #000000 !important;
}

body.design-formell:not(.light-mode) .card a:not(.btn):hover {
    color: #333333 !important;
}

/* ====================================================================
   LIGHT-MODE FIXES - Diese Styles haben höchste Priorität
   ==================================================================== */

/* Activity Items im Light-Mode - heller Hintergrund */
body.light-mode .activity-item,
html.light-mode .activity-item {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .activity-level,
html.light-mode .activity-level {
    color: #d97706 !important;
}

body.light-mode .activity-stats,
html.light-mode .activity-stats {
    color: rgba(0, 0, 0, 0.6) !important;
}

body.light-mode .activity-stats span,
html.light-mode .activity-stats span {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Cards im Light-Mode */
body.light-mode .card,
html.light-mode .card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .card h2,
html.light-mode .card h2 {
    color: #1a1a2e !important;
}

/* Stat Cards im Light-Mode */
body.light-mode .stat-card,
html.light-mode .stat-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .stat-value,
html.light-mode .stat-value {
    color: #6C63FF !important;
}

body.light-mode .stat-label,
html.light-mode .stat-label {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Progress Tracking Card im Light-Mode */
body.light-mode .progress-tracking-card,
html.light-mode .progress-tracking-card {
    background: rgba(255, 255, 255, 0.85) !important;
}

body.light-mode .progress-loading,
html.light-mode .progress-loading {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Level Items im Light-Mode */
body.light-mode .level-item,
html.light-mode .level-item {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .level-item.completed,
html.light-mode .level-item.completed {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

body.light-mode .level-item.completed .level-item-name,
html.light-mode .level-item.completed .level-item-name {
    color: white !important;
}

body.light-mode .level-item.current,
html.light-mode .level-item.current {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #b45309 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5) !important;
}

body.light-mode .level-item.current .level-item-name,
html.light-mode .level-item.current .level-item-name {
    color: white !important;
}

body.light-mode .level-item.locked,
html.light-mode .level-item.locked {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.4) !important;
}

body.light-mode .level-item.locked .level-item-name,
html.light-mode .level-item.locked .level-item-name {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* Leaderboard im Light-Mode */
body.light-mode .leaderboard-pos,
html.light-mode .leaderboard-pos {
    background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
}

body.light-mode .leaderboard-pos .rank,
html.light-mode .leaderboard-pos .rank {
    color: white !important;
}

body.light-mode .leaderboard-pos .label,
html.light-mode .leaderboard-pos .label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Achievement Items im Light-Mode */
body.light-mode .achievement-item,
html.light-mode .achievement-item {
    background: rgba(255, 217, 61, 0.15) !important;
    border-color: rgba(255, 217, 61, 0.4) !important;
    color: #1a1a2e !important;
}

/* Stats Filter Buttons im Light-Mode */
body.light-mode .stats-filter-btn,
html.light-mode .stats-filter-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .stats-filter-btn.active,
html.light-mode .stats-filter-btn.active {
    background: #6C63FF !important;
    color: white !important;
    border-color: #6C63FF !important;
}

body.light-mode .stats-filter-btn:hover:not(.active),
html.light-mode .stats-filter-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.12) !important;
}

/* Empty State im Light-Mode */
body.light-mode .empty-state,
html.light-mode .empty-state {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Welcome Section im Light-Mode */
body.light-mode .welcome-section,
html.light-mode .welcome-section {
    background: linear-gradient(135deg, #ffffff, #f5f5ff) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

body.light-mode .welcome-text h1,
html.light-mode .welcome-text h1 {
    color: #1a1a2e !important;
}

body.light-mode .welcome-text p,
html.light-mode .welcome-text p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Start Button im Light-Mode */
body.light-mode .start-btn,
html.light-mode .start-btn {
    background: linear-gradient(135deg, #6C63FF, #5a52e0) !important;
    color: white !important;
}

/* Links im Light-Mode */
body.light-mode .leaderboard-link,
html.light-mode .leaderboard-link,
body.light-mode a.leaderboard-link,
body.light-mode .leaderboard-link:link,
body.light-mode .leaderboard-link:visited,
body.light-mode .leaderboard-link:active,
body.light-mode a.leaderboard-link:link,
body.light-mode a.leaderboard-link:visited,
body.design-formell.light-mode .leaderboard-link,
body.design-formell.light-mode .leaderboard-link:link,
body.design-formell.light-mode .leaderboard-link:visited {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
    color: #3730a3 !important;
    box-shadow: 0 2px 8px rgba(108,99,255,0.15) !important;
}

/* Light-Mode: Progress Section Titles */
body.light-mode .progress-section-title,
html.light-mode .progress-section-title {
    color: #1a1a2e !important;
}

/* Light-Mode: Legal Footer */
body.light-mode .legal-footer a:hover,
html.light-mode .legal-footer a:hover {
    color: #6C63FF !important;
}

/* ====================================================================
   LIGHT-MODE: Zusätzliche Catch-All Overrides
   Deckt alle verbleibenden Elemente ab die weiße/helle Textfarben haben
   ==================================================================== */

/* Allgemeine Text-Elemente im Light-Mode */
body.light-mode p,
html.light-mode p {
    color: #333 !important;
}

body.light-mode .card p,
html.light-mode .card p {
    color: #555 !important;
}

body.light-mode .card h3,
html.light-mode .card h3 {
    color: #1a1a2e !important;
}

/* Pro Banner */
body.light-mode .pro-banner-description {
    color: #555 !important;
}

/* Theme Item Names (Dashboard + Rewards) */
body.light-mode .theme-item-name {
    color: #1a1a2e !important;
}

/* Avatar Dropdown */
body.light-mode .avatar-dropdown-menu {
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}

body.light-mode .dropdown-item {
    color: #333 !important;
}

body.light-mode .dropdown-item:hover {
    background: rgba(108,99,255,0.08) !important;
    color: #6C63FF !important;
}

/* Tooltips und Badges */
body.light-mode .rarity-badge.common {
    color: #888 !important;
}

/* Scrollbar in Light-Mode */
body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
}

body.light-mode ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.03) !important;
}

/* Formell Light-Mode: Zusätzliche Overrides */
body.light-mode.design-formell .card p,
body.light-mode.design-formell .stat-label {
    color: #4b5563 !important;
}

body.light-mode.design-formell h1,
body.light-mode.design-formell h2,
body.light-mode.design-formell h3 {
    color: #1f2937 !important;
}

body.light-mode.design-formell .welcome-text p {
    color: #374151 !important;
}

body.light-mode.design-formell .legal-footer {
    background: rgba(255,255,255,0.85) !important;
}

body.light-mode.design-formell .legal-footer a {
    color: #4b5563 !important;
}

/* ====================================================================
   LIGHT-MODE: Globale Inline-Style-Overrides für Kontrast
   Überschreibt inline style="color: rgba(255,255,255,...)" Attribute
   ==================================================================== */

/* Alle div/span mit weißen rgba-Farben innerhalb von .card */
body.light-mode .card div[style*="color: rgba(255,255,255"],
html.light-mode .card div[style*="color: rgba(255,255,255"] {
    color: #444 !important;
}
body.light-mode .card span[style*="color: rgba(255,255,255"],
html.light-mode .card span[style*="color: rgba(255,255,255"] {
    color: #555 !important;
}

/* Event-Banner (außerhalb von .card) */
body.light-mode .event-banner div[style*="color: rgba(255,255,255"],
html.light-mode .event-banner div[style*="color: rgba(255,255,255"] {
    color: #555 !important;
}

/* Streak Widget (innerhalb von .welcome-section) */
body.light-mode .streak-widget div[style*="color: rgba(255,255,255"],
html.light-mode .streak-widget div[style*="color: rgba(255,255,255"] {
    color: #555 !important;
}
body.light-mode .welcome-section div[style*="color: rgba(255,255,255"],
html.light-mode .welcome-section div[style*="color: rgba(255,255,255"] {
    color: #666 !important;
}

/* Hintergrund-Overrides für dunkle Backgrounds in Cards */
body.light-mode .card div[style*="background: rgba(0,0,0,0.2)"],
html.light-mode .card div[style*="background: rgba(0,0,0,0.2)"] {
    background: rgba(0,0,0,0.06) !important;
}

/* Border-Overrides für weiße Borders */
body.light-mode div[style*="border-top: 1px solid rgba(255,255,255"],
body.light-mode div[style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-color: rgba(0,0,0,0.1) !important;
}

/* Progress-Tracking: Comparison Cards text */
body.light-mode .comparison-card span,
html.light-mode .comparison-card span {
    color: #333 !important;
}
body.light-mode .comparison-card.previous span,
html.light-mode .comparison-card.previous span {
    color: #555 !important;
}
body.light-mode .comparison-stat-label,
html.light-mode .comparison-stat-label {
    color: #555 !important;
}

/* Progress-Tracking: Streak labels, personal bests, milestones */
body.light-mode .streak-label,
body.light-mode .personal-best-detail,
body.light-mode .milestone-progress {
    color: #555 !important;
}
body.light-mode .streak-value {
    color: #1a1a2e !important;
}

/* Pro-Statistiken */
body.light-mode .pro-stat-label {
    color: #555 !important;
}
body.light-mode .pro-error-chars {
    color: #cc3333 !important;
}
body.light-mode .pro-error-count {
    color: #555 !important;
}
body.light-mode .pro-finger-name {
    color: #555 !important;
}
body.light-mode .pro-percentile-label {
    color: #333 !important;
}
body.light-mode .pro-loading {
    color: #666 !important;
}

/* Golden titles (FFD93D) → Dunkleres Gold im Light Mode */
body.light-mode .progress-section-title {
    color: #b36b00 !important;
}
body.light-mode .pro-stats-card h2 {
    color: #b36b00 !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   Light/Formell: Duelle-Überschriften Kontrast
   ============================================ */
.duel-heading-green { color: #00D9A5; }
.duel-heading-gold { color: #FFD93D; }
.duel-subtitle { color: rgba(255,255,255,0.8); }
body.light-mode .duel-heading-green, body.design-formell .duel-heading-green { color: #059669 !important; }
body.light-mode .duel-heading-gold, body.design-formell .duel-heading-gold { color: #b8860b !important; }
body.light-mode .duel-subtitle, body.design-formell .duel-subtitle { color: #666 !important; }

/* ============================================
   Light/Formell: Grüne Akzentfarben abdunkeln
   #00D9A5 → #1a8a6e für besseren Kontrast
   ============================================ */
body.light-mode .stat-box-value,
body.light-mode .progress-stat-val,
body.light-mode .assignment-progress,
body.light-mode .comparison-stat-value,
body.light-mode .streak-item.current .streak-value,
body.light-mode .improvement-badge.positive,
body.light-mode .pro-stat-value {
    color: #1a8a6e !important;
}
body.design-formell .stat-box-value,
body.design-formell .progress-stat-val,
body.design-formell .assignment-progress,
body.design-formell .comparison-stat-value,
body.design-formell .streak-item.current .streak-value,
body.design-formell .pro-stat-value {
    color: #1a8a6e !important;
}

/* BaFG: Barrierefreiheit - Hoher Kontrast */
@media (prefers-contrast: more) {
    .card, .stat-card, .welcome-section, .activity-item, .challenge-card {
        border: 2px solid currentColor !important;
    }
    a { text-decoration: underline !important; }
    .btn { border: 2px solid currentColor !important; }
    input, select, textarea { border: 2px solid currentColor !important; }
}