/* themes.css */

/* Deep Blue Theme (Standard) */
body.deep-blue {
    background-color: #122237;
    color: #c0c9d2;
}

body.deep-blue header {
    background-color: #094c6c;
    border-bottom: 1px solid #094867;
    transition: opacity 0.3s ease;
}

body.deep-blue .logo {
    color: #ebb722;
}

body.deep-blue #mode-btn {
    color: #c0c9d2;
    background-color: #094867;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: none;
}

body.deep-blue #mode-btn:hover {
    color: #fff;
    background-color: #0a5a7e;
}

body.deep-blue .mode-btn,
body.deep-blue #theme-toggle,
body.deep-blue #stats-btn,
body.deep-blue #back-btn,
body.deep-blue #focus-toggle,
body.deep-blue .mode-setting,
body.deep-blue .end-stats-buttons button {
    color: #c0c9d2;
    background-color: #094867;
    border: none;
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.deep-blue .mode-btn:hover,
body.deep-blue #theme-toggle:hover,
body.deep-blue #stats-btn:hover,
body.deep-blue #back-btn:hover,
body.deep-blue #focus-toggle:hover,
body.deep-blue .mode-setting:hover,
body.deep-blue .end-stats-buttons button:hover {
    color: #fff;
    background-color: #0a5a7e;
}

body.deep-blue .timer {
    color: #ebb722;
    margin-left: 20px;
    font-size: 1.3em;
}

body.deep-blue #language-select,
body.deep-blue #time-select,
body.deep-blue #words-select {
    background-color: #094867;
    color: #c0c9d2;
    margin-left: 5px;
    padding: 5px;
    border: none;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
}

body.deep-blue .user {
    color: #c0c9d2;
}

body.deep-blue #progress-bar-container {
    background-color: #094867;
}

body.deep-blue #progress-bar {
    background-color: #ebb722;
}

body.deep-blue #words {
    color: #e6f1ff;
}

body.deep-blue .letter.correct {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

body.deep-blue .letter.incorrect {
    color: #ff7a7a;
    text-shadow: 0 0 5px rgba(255, 122, 122, 0.5);
}

body.deep-blue .letter.pending {
    color: #666;
}

body.deep-blue .cursor {
    background-color: #ebb722;
}

body.deep-blue #stats,
body.deep-blue #end-stats {
    font-size: 0.9em;
    text-align: center;
    color: #c0c9d2;
    margin-top: 20px;
}

body.deep-blue .filter-section select {
    background-color: #094867;
    color: #c0c9d2;
}

body.deep-blue .filter-section select:hover {
    background-color: #0a5a7e;
}

body.deep-blue .filter-section label {
    color: #ebb722;
}

body.deep-blue #stats-container {
    background-color: #1b2a44;
}

body.deep-blue .chart-container {
    background-color: #0f1c30;
}

body.deep-blue .summary-stats {
    background-color: #0f1c30;
}

body.deep-blue .summary-stats p {
    color: #ebb722;
}

body.deep-blue .letter-stats {
    background-color: #0f1c30;
}

body.deep-blue .letter-stats h2 {
    color: #ebb722;
}

body.deep-blue .letter-stat {
    color: #000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body.deep-blue .letter-stat .tooltip {
    background-color: #1e2b3d;
    color: #dce5f2;
    border: 1px solid #3a4b65;
}

body.deep-blue footer {
    background-color: #094c6c;
    color: #c0c9d2;
    border-top: 1px solid #094867;
}

body.deep-blue footer a {
    color: #ebb722;
    text-decoration: none;
    border-bottom: 1px dotted #ebb722;
}

body.deep-blue footer a:hover {
    color: #fff;
    border-bottom: 1px solid #ebb722;
}

body.deep-blue .mode-dropdown-content {
    background-color: #094867;
    border: 1px solid #083d56;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 8px 0;
    display: none;
}

body.deep-blue .mode-dropdown-content.show {
    display: block !important;
}

body.deep-blue .mode-dropdown-content button {
    color: #e0e0e0;
    padding: 10px 15px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.deep-blue .mode-dropdown-content button:hover {
    background-color: #0a5a7e;
    color: #fff;
}

body.deep-blue #refresh-btn svg {
    stroke: #ebb722;
}

/* auth.html Stile für Deep Blue */
body.deep-blue .auth-form {
    background-color: #1b2a44;
}

body.deep-blue .auth-form h2 {
    color: #ebb722;
}

body.deep-blue .auth-form input {
    background-color: #094867;
    color: #c0c9d2;
}

body.deep-blue .auth-form input::placeholder {
    color: #c0c9d2;
    opacity: 0.7;
}

body.deep-blue .auth-form button {
    background-color: #094867;
    color: #c0c9d2;
}

body.deep-blue .auth-form button:hover {
    background-color: #0a5a7e;
    color: #fff;
}

/* Auth Button Styling für alle Themes - entfernt, damit diese wie normale Navbar-Buttons aussehen */
body.deep-blue #auth-btn,
body.deep-blue #back-btn {
    color: #c0c9d2;
    border: none;
}

body.deep-blue #auth-btn:hover,
body.deep-blue #back-btn:hover {
    color: #fff;
    background-color: #0a5a7e;
}

/* Dark Green Theme */
body.dark-green {
    background-color: #121b17;
    color: #e2f5e2;
}

body.dark-green header {
    background-color: #0a150e;
    border-bottom: 1px solid #1f3726;
}

body.dark-green .logo {
    color: #4cda65; /* Hellerer Grünton für besseren Kontrast */
    text-shadow: 0 0 10px rgba(76, 218, 101, 0.3); /* Subtiler Gloweffekt */
}

body.dark-green header.typing .logo {
    color: #4cda65;
}

body.dark-green #mode-btn {
    color: #4cda65;
    background-color: #1f2e23;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: none;
}

body.dark-green #mode-btn:hover {
    color: #fff;
    background-color: #2c4131;
}

body.dark-green .mode-btn,
body.dark-green #theme-toggle,
body.dark-green #stats-btn,
body.dark-green #back-btn,
body.dark-green #focus-toggle,
body.dark-green .mode-setting,
body.dark-green .end-stats-buttons button {
    color: #4cda65;
    background-color: #1f2e23;
    border: none;
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

body.dark-green .mode-btn:hover,
body.dark-green #theme-toggle:hover,
body.dark-green #stats-btn:hover,
body.dark-green #back-btn:hover,
body.dark-green #focus-toggle:hover,
body.dark-green .mode-setting:hover,
body.dark-green .end-stats-buttons button:hover {
    color: #fff;
    background-color: #2c4131;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

body.dark-green .timer {
    color: #4cda65;
    margin-left: 20px;
    font-size: 1.3em;
    font-weight: 500;
}

body.dark-green #language-select,
body.dark-green #time-select,
body.dark-green #words-select {
    background-color: #1f2e23;
    color: #4cda65;
    margin-left: 5px;
    padding: 5px;
    border: none;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

body.dark-green .user {
    color: #4cda65;
}

body.dark-green #progress-bar-container {
    background-color: #1f2e23;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-green #progress-bar {
    background-color: #4cda65;
    box-shadow: 0 0 10px rgba(76, 218, 101, 0.5);
    transition: width 0.3s ease;
}

body.dark-green #words {
    color: #ddffd6;
}

body.dark-green .letter.correct {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(76, 218, 101, 0.4);
}

body.dark-green .letter.incorrect {
    color: #ffd866;
    text-shadow: 0 0 5px rgba(255, 216, 102, 0.5);
}

body.dark-green .letter.pending {
    color: #8c9c91;
}

body.dark-green .cursor {
    background-color: #4cda65;
    box-shadow: 0 0 8px rgba(76, 218, 101, 0.7);
}

body.dark-green #stats,
body.dark-green #end-stats {
    font-size: 0.9em;
    text-align: center;
    color: #4cda65;
    margin-top: 20px;
    background-color: rgba(31, 46, 35, 0.7);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

body.dark-green .filter-section select {
    background-color: #1f2e23;
    color: #4cda65;
    border: 1px solid #2c4131;
}

body.dark-green .filter-section select:hover {
    background-color: #2c4131;
}

body.dark-green .filter-section label {
    color: #4cda65;
    font-weight: 500;
}

body.dark-green #stats-container {
    background-color: rgba(18, 27, 23, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid #1f3726;
}

body.dark-green .chart-container {
    background-color: #1f2e23;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #2c4131;
}

body.dark-green .summary-stats {
    background-color: #1f2e23;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #2c4131;
}

body.dark-green .summary-stats p {
    color: #4cda65;
}

body.dark-green .letter-stats {
    background-color: #1f2e23;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #2c4131;
}

body.dark-green .letter-stats h2 {
    color: #4cda65;
    border-bottom: 1px solid #2c4131;
    padding-bottom: 10px;
}

body.dark-green .letter-stat {
    color: #000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body.dark-green .letter-stat .tooltip {
    background-color: #0a150e;
    color: #e2f5e2;
    border: 1px solid #2c4131;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

body.dark-green footer {
    background-color: #0a150e;
    color: #4cda65;
    border-top: 1px solid #1f3726;
}

body.dark-green footer a {
    color: #4cda65;
    text-decoration: none;
    border-bottom: 1px dotted #4caf50;
    transition: all 0.2s ease;
}

body.dark-green footer a:hover {
    color: #fff;
    border-bottom: 1px solid #4caf50;
}

body.dark-green .mode-dropdown-content {
    background-color: #1f2e23;
    border: 1px solid #2c4131;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 8px 0;
    display: none;
}

body.dark-green .mode-dropdown-content.show {
    display: block !important;
}

body.dark-green .mode-dropdown-content button {
    color: #e2f5e2;
    padding: 10px 15px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-green .mode-dropdown-content button:hover {
    background-color: #2c4131;
    color: #4cda65;
}

body.dark-green #refresh-btn svg {
    stroke: #4cda65;
}

body.dark-green #refresh-btn:hover svg {
    stroke: #fff;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* auth.html Stile für Dark Green */
body.dark-green .auth-form {
    background-color: #1f2e23;
    border: 1px solid #2c4131;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

body.dark-green .auth-form h2 {
    color: #4cda65;
    border-bottom: 1px solid #2c4131;
    padding-bottom: 10px;
}

body.dark-green .auth-form input {
    background-color: #2c4131;
    color: #e2f5e2;
    border: 1px solid #3a5440;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-green .auth-form input::placeholder {
    color: #a7c2ac;
    opacity: 0.7;
}

body.dark-green .auth-form input:focus {
    border-color: #4cda65;
    box-shadow: 0 0 0 2px rgba(76, 218, 101, 0.3);
}

body.dark-green .auth-form button {
    background-color: #2c4131;
    color: #4cda65;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

body.dark-green .auth-form button:hover {
    background-color: #3a5440;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Auth Button Styling für alle Themes - entfernt, damit diese wie normale Navbar-Buttons aussehen */
body.dark-green #auth-btn,
body.dark-green #back-btn {
    color: #4cda65;
    border: none;
}

/* Cyberpunk Theme - dezenter und angenehmer gestaltet */
body.cyberpunk {
    background-color: #0d0b1e;
    color: #edf2ff;
    background-image: 
        linear-gradient(0deg, rgba(13, 11, 30, 0.9) 70%, rgba(38, 11, 61, 0.8) 100%),
        radial-gradient(circle at 50% 100%, rgba(197, 39, 197, 0.05) 0%, rgba(13, 11, 30, 0) 70%);
}

body.cyberpunk header {
    background-color: rgba(20, 18, 46, 0.8);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(197, 39, 197, 0.3);
    box-shadow: 0 0 10px rgba(197, 39, 197, 0.15);
}

body.cyberpunk .logo {
    color: #c527c5;
    text-shadow: 0 0 5px rgba(197, 39, 197, 0.2);
    font-weight: 600;
    letter-spacing: 1px;
}

body.cyberpunk #mode-btn {
    color: #edf2ff;
    background-color: rgba(38, 35, 80, 0.6);
    border: 1px solid rgba(197, 39, 197, 0.2);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.cyberpunk #mode-btn:hover {
    color: #9fe8ff;
    background-color: rgba(58, 53, 117, 0.8);
}

body.cyberpunk .mode-btn,
body.cyberpunk #theme-toggle,
body.cyberpunk #stats-btn,
body.cyberpunk #back-btn,
body.cyberpunk #focus-toggle,
body.cyberpunk .mode-setting,
body.cyberpunk .end-stats-buttons button {
    color: #edf2ff;
    background-color: rgba(38, 35, 80, 0.6);
    border: 1px solid rgba(197, 39, 197, 0.2);
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

body.cyberpunk .mode-btn:hover,
body.cyberpunk #theme-toggle:hover,
body.cyberpunk #stats-btn:hover,
body.cyberpunk #back-btn:hover,
body.cyberpunk #focus-toggle:hover,
body.cyberpunk .mode-setting:hover,
body.cyberpunk .end-stats-buttons button:hover {
    color: #9fe8ff;
    background-color: rgba(58, 53, 117, 0.8);
    box-shadow: 0 0 8px rgba(197, 39, 197, 0.2);
    border-color: rgba(197, 39, 197, 0.5);
    text-shadow: none;
    transform: translateY(-1px);
}

body.cyberpunk .timer {
    color: #c527c5;
    margin-left: 20px;
    font-size: 1.3em;
    text-shadow: 0 0 5px rgba(197, 39, 197, 0.3);
    font-weight: 600;
}

body.cyberpunk #language-select,
body.cyberpunk #time-select,
body.cyberpunk #words-select {
    background-color: rgba(38, 35, 80, 0.6);
    color: #edf2ff;
    margin-left: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(197, 39, 197, 0.2);
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

body.cyberpunk #language-select:hover,
body.cyberpunk #time-select:hover,
body.cyberpunk #words-select:hover {
    border-color: rgba(159, 232, 255, 0.5);
    box-shadow: 0 0 5px rgba(159, 232, 255, 0.2);
}

body.cyberpunk .user {
    color: #9fe8ff;
    text-shadow: 0 0 3px rgba(159, 232, 255, 0.3);
}

body.cyberpunk #progress-bar-container {
    background-color: rgba(38, 35, 80, 0.6);
    border-radius: 5px;
    overflow: hidden;
    height: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(197, 39, 197, 0.2);
}

body.cyberpunk #progress-bar {
    background: linear-gradient(90deg, #c527c5, #a424a4);
    box-shadow: 0 0 8px rgba(197, 39, 197, 0.3);
    height: 100%;
}

body.cyberpunk .letter.correct {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

body.cyberpunk .letter.incorrect {
    color: #00ffea;
    text-shadow: 0 0 3px rgba(0, 255, 234, 0.5);
}

body.cyberpunk .letter.pending {
    color: rgba(237, 242, 255, 0.5);
}

body.cyberpunk .cursor {
    background-color: #c527c5;
    box-shadow: 0 0 5px rgba(197, 39, 197, 0.5);
}

body.cyberpunk #stats,
body.cyberpunk #end-stats {
    font-size: 0.9em;
    text-align: center;
    color: #00ffea;
    margin-top: 20px;
    background-color: rgba(20, 18, 46, 0.7);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 234, 0.2);
    border: 1px solid rgba(0, 255, 234, 0.3);
}

body.cyberpunk .filter-section select {
    background-color: rgba(38, 35, 80, 0.6);
    color: #edf2ff;
    border: 1px solid rgba(197, 39, 197, 0.2);
    padding: 6px 10px;
    border-radius: 5px;
}

body.cyberpunk .filter-section select:hover {
    background-color: rgba(58, 53, 117, 0.8);
    border-color: rgba(159, 232, 255, 0.5);
    box-shadow: 0 0 8px rgba(159, 232, 255, 0.2);
}

body.cyberpunk .filter-section label {
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(197, 39, 197, 0.2);
    font-weight: 500;
}

body.cyberpunk #stats-container {
    background-color: rgba(13, 11, 30, 0.8);
    border: 1px solid rgba(197, 39, 197, 0.2);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 39, 197, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

body.cyberpunk .chart-container {
    background-color: rgba(20, 18, 46, 0.6);
    border: 1px solid rgba(197, 39, 197, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    transition: all 0.3s ease;
}

body.cyberpunk .chart-container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(197, 39, 197, 0.3);
    transform: translateY(-3px);
}

body.cyberpunk .summary-stats {
    background-color: rgba(20, 18, 46, 0.6);
    border: 1px solid rgba(0, 255, 234, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

body.cyberpunk .summary-stats p {
    color: #ff00ff;
    text-shadow: 0 0 3px rgba(197, 39, 197, 0.3);
}

body.cyberpunk .letter-stats {
    background-color: rgba(20, 18, 46, 0.6);
    border: 1px solid rgba(197, 39, 197, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

body.cyberpunk .letter-stats h2 {
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    border-bottom: 1px solid rgba(255, 0, 255, 0.3);
    padding-bottom: 10px;
}

body.cyberpunk .letter-stat {
    color: #000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body.cyberpunk .letter-stat:hover {
    background-color: rgba(60, 20, 80, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 255, 234, 0.2);
    border-color: rgba(0, 255, 234, 0.5);
    transform: translateY(-3px) scale(1.05);
}

body.cyberpunk .letter-stat .tooltip {
    background-color: rgba(13, 11, 30, 0.95);
    color: #00ffea;
    border: 1px solid rgba(0, 255, 234, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 255, 234, 0.3);
    text-shadow: 0 0 3px rgba(0, 255, 234, 0.5);
    border-radius: 5px;
    padding: 10px;
}

body.cyberpunk footer {
    background-color: rgba(20, 18, 46, 0.8);
    backdrop-filter: blur(5px);
    color: #00ffea;
    border-top: 1px solid rgba(255, 0, 255, 0.3);
    text-shadow: 0 0 3px rgba(0, 255, 234, 0.3);
}

body.cyberpunk footer a {
    color: #ff00ff;
    text-shadow: 0 0 3px rgba(255, 0, 255, 0.5);
    transition: all 0.2s ease;
}

body.cyberpunk footer a:hover {
    color: #00ffea;
    text-shadow: 0 0 5px rgba(0, 255, 234, 0.8);
}

body.cyberpunk .mode-dropdown-content {
    background-color: rgba(20, 18, 46, 0.95);
    border: 1px solid rgba(197, 39, 197, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    padding: 8px 0;
    display: none;
}

body.cyberpunk .mode-dropdown-content.show {
    display: block !important;
}

body.cyberpunk .mode-dropdown-content button {
    color: #edf2ff;
    padding: 10px 15px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.cyberpunk .mode-dropdown-content button:hover {
    background-color: rgba(58, 53, 117, 0.8);
    color: #00ffea;
}

body.cyberpunk #refresh-btn svg {
    stroke: #ff00ff;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.5));
    transition: all 0.3s ease;
}

body.cyberpunk #refresh-btn:hover svg {
    stroke: #00ffea;
    filter: drop-shadow(0 0 5px rgba(0, 255, 234, 0.8));
    transform: scale(1.1);
}

/* auth.html Stile für Cyberpunk */
body.cyberpunk .auth-form {
    background-color: rgba(20, 18, 46, 0.8);
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 0, 255, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

body.cyberpunk .auth-form h2 {
    color: #ff00ff;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
    border-bottom: 1px solid rgba(255, 0, 255, 0.3);
    padding-bottom: 10px;
    letter-spacing: 1px;
}

body.cyberpunk .auth-form input {
    background-color: rgba(38, 35, 80, 0.6);
    color: #edf2ff;
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 12px 15px;
    transition: all 0.2s ease;
}

body.cyberpunk .auth-form input:focus {
    border-color: rgba(0, 255, 234, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 234, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.cyberpunk .auth-form input::placeholder {
    color: rgba(237, 242, 255, 0.6);
    opacity: 0.7;
}

body.cyberpunk .auth-form button {
    background-color: rgba(38, 35, 80, 0.8);
    color: #ff00ff;
    border: 1px solid rgba(255, 0, 255, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 0, 255, 0.2);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    transition: all 0.3s ease;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

body.cyberpunk .auth-form button:hover {
    background-color: rgba(58, 53, 117, 0.9);
    color: #00ffea;
    border-color: rgba(0, 255, 234, 0.8);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 234, 0.3);
    text-shadow: 0 0 8px rgba(0, 255, 234, 0.7);
    transform: translateY(-3px);
}

body.cyberpunk .auth-form button:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 255, 234, 0.2);
}

/* Auth Button Styling für alle Themes - entfernt, damit diese wie normale Navbar-Buttons aussehen */
body.cyberpunk #auth-btn,
body.cyberpunk #back-btn {
    color: #00ffea;
    border: none;
    text-shadow: 0 0 5px rgba(0, 255, 234, 0.5);
}

body.cyberpunk #auth-btn:hover,
body.cyberpunk #back-btn:hover {
    color: #93a1a1;
    background-color: #094855;
}

/* Ocean Theme - mit den ursprünglichen Farben */
body.ocean {
    background-color: #0c2032;
    color: #e6f1ff;
    background-image: 
        linear-gradient(180deg, rgba(12, 32, 50, 1) 0%, rgba(16, 40, 61, 0.95) 100%),
        radial-gradient(circle at bottom, rgba(100, 255, 218, 0.05) 0%, rgba(12, 32, 50, 0) 70%);
}

body.ocean header {
    background-color: rgba(17, 34, 64, 0.8);
    border-bottom: 1px solid rgba(100, 255, 218, 0.3);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

body.ocean .logo {
    color: #64ffda;
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
    font-weight: 600;
    letter-spacing: 0.5px;
}

body.ocean #mode-btn {
    color: #64b5f6;
    background-color: rgba(35, 53, 84, 0.6);
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.ocean #mode-btn:hover {
    color: #64ffda;
    background-color: rgba(40, 61, 96, 0.8);
}

body.ocean .mode-btn,
body.ocean #theme-toggle,
body.ocean #stats-btn,
body.ocean #back-btn,
body.ocean #focus-toggle,
body.ocean .mode-setting,
body.ocean .end-stats-buttons button {
    color: #e6f1ff;
    background-color: rgba(35, 53, 84, 0.6);
    border: 1px solid rgba(100, 255, 218, 0.2);
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 6px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

body.ocean .mode-btn:hover,
body.ocean #theme-toggle:hover,
body.ocean #stats-btn:hover,
body.ocean #back-btn:hover,
body.ocean #focus-toggle:hover,
body.ocean .mode-setting:hover,
body.ocean .end-stats-buttons button:hover {
    color: #fff;
    background-color: rgba(42, 59, 90, 0.8);
    border-color: rgba(100, 255, 218, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(100, 255, 218, 0.2);
    transform: translateY(-2px);
}

body.ocean .timer {
    color: #64ffda;
    margin-left: 20px;
    font-size: 1.3em;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.3);
}

body.ocean #language-select,
body.ocean #time-select,
body.ocean #words-select {
    background-color: rgba(35, 53, 84, 0.6);
    color: #e6f1ff;
    border: 1px solid rgba(100, 255, 218, 0.2);
    margin-left: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

body.ocean #language-select:hover,
body.ocean #time-select:hover,
body.ocean #words-select:hover {
    background-color: rgba(42, 59, 90, 0.8);
    border-color: rgba(100, 255, 218, 0.5);
}

body.ocean .user {
    color: #8be9fd;
    text-shadow: 0 0 8px rgba(139, 233, 253, 0.3);
}

body.ocean #progress-bar-container {
    background-color: rgba(35, 53, 84, 0.6);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(100, 255, 218, 0.2);
}

body.ocean #progress-bar {
    background: linear-gradient(90deg, #64ffda, #4fd8c7);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

body.ocean .letter.correct {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

body.ocean .letter.incorrect {
    color: #8be9fd;
    text-shadow: 0 0 5px rgba(139, 233, 253, 0.6);
}

body.monkeytype {
    background-color: #0d0e14;
    color: #9599a1;
    --bg-color: #0d0e14;
    --text-color: #9599a1;
    --active-text-color: #e2e4ed;
    --accent-color: #58a6ff;
    --error-color: #ff5f5f;
    --font-family: 'Roboto Mono', monospace;
}

body.monkeytype header {
    background-color: #0b0c12;
    border-bottom: 1px solid #1b1d29;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.monkeytype .logo {
    color: #58a6ff;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.3);
}

body.monkeytype header.typing .logo {
    color: #58a6ff;
    opacity: 0.7;
}

body.monkeytype #mode-btn {
    color: #9599a1;
    background-color: #16181f;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.monkeytype #mode-btn:hover {
    color: #e2e4ed;
    background-color: #232323;
}

body.monkeytype .mode-btn,
body.monkeytype #theme-toggle,
body.monkeytype #stats-btn,
body.monkeytype #back-btn,
body.monkeytype #focus-toggle,
body.monkeytype .mode-setting,
body.monkeytype .end-stats-buttons button {
    color: #9599a1;
    background-color: #16181f;
    border: none;
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

body.monkeytype .mode-btn:hover,
body.monkeytype #theme-toggle:hover,
body.monkeytype #stats-btn:hover,
body.monkeytype #back-btn:hover,
body.monkeytype #focus-toggle:hover,
body.monkeytype .mode-setting:hover,
body.monkeytype .end-stats-buttons button:hover {
    color: #e2e4ed;
    background-color: #1e2029;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

body.monkeytype #language-select,
body.monkeytype #time-select,
body.monkeytype #words-select {
    background-color: #16181f;
    color: #9599a1;
    margin-left: 5px;
    padding: 5px;
    border: none;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.monkeytype #language-select:focus,
body.monkeytype #time-select:focus,
body.monkeytype #words-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
}

body.monkeytype .user {
    color: #9599a1;
}

body.monkeytype #progress-bar-container {
    background-color: #16181f;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.monkeytype #progress-bar {
    background-color: #58a6ff;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.3);
    transition: width 0.3s ease;
}

body.monkeytype #words {
    color: #9599a1;
}

body.monkeytype .letter.correct {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

body.monkeytype .letter.incorrect {
    color: #ff5252;
    text-shadow: 0 0 5px rgba(255, 82, 82, 0.5);
}

body.monkeytype .letter.pending {
    color: #626670;
}

body.monkeytype .cursor {
    background-color: #58a6ff;
    box-shadow: 0 0 5px rgba(88, 166, 255, 0.7);
}

body.monkeytype .navbar,
body.monkeytype nav {
    background-color: #0b0c12;
    border-bottom: 1px solid #1b1d29;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.monkeytype .navbar a,
body.monkeytype .dropdown-button,
body.monkeytype nav a,
body.monkeytype nav button,
body.monkeytype .navbar-brand,
body.monkeytype .navbar-menu a,
body.monkeytype .nav-group a,
body.monkeytype .dropdown a {
    color: #9599a1;
    background-color: transparent;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.monkeytype .navbar a:hover,
body.monkeytype .dropdown-button:hover,
body.monkeytype nav a:hover,
body.monkeytype nav button:hover,
body.monkeytype .navbar-brand:hover,
body.monkeytype .navbar-menu a:hover,
body.monkeytype .nav-group a:hover,
body.monkeytype .dropdown a:hover {
    color: #e2e4ed;
    background-color: transparent;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.monkeytype .dropdown-content {
    background-color: #16181f;
    border: 1px solid #1e2029;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.monkeytype .dropdown-content a,
body.monkeytype .dropdown-content button {
    color: #9599a1;
    background-color: transparent;
}

body.monkeytype .dropdown-content a:hover,
body.monkeytype .dropdown-content button:hover {
    color: #e2e4ed;
    background-color: #1e2029;
}

body.monkeytype .mode-dropdown-content {
    background-color: #16181f;
    border: 1px solid #1e2029;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.monkeytype .mode-dropdown-content button {
    color: #9599a1;
    background-color: transparent;
}

body.monkeytype .mode-dropdown-content button:hover {
    color: #e2e4ed;
    background-color: #1e2029;
}

body.monkeytype .main-timer {
    color: #58a6ff;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.4);
    font-family: 'Roboto Mono', monospace;
}

/* Textfarben für die Themes */
body.cyberpunk #words {
    color: #edf2ff;
}

body.ocean #words {
    color: #e1eff8;
}

/* Solarized Theme - vollständig wiederhergestellt */
body.solarized {
    background-color: #002b36;
    color: #93a1a1;
}

body.solarized header {
    background-color: #073642;
    border-bottom: 1px solid #586e75;
}

body.solarized .logo {
    color: #2aa198;
    text-shadow: 0 0 5px rgba(42, 161, 152, 0.3);
}

body.solarized header.typing .logo {
    color: #2aa198;
    opacity: 0.8;
}

body.solarized #mode-btn {
    color: #839496;
    background-color: #073642;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.solarized #mode-btn:hover {
    color: #eee8d5;
    background-color: #094352;
}

body.solarized .mode-btn,
body.solarized #theme-toggle,
body.solarized #stats-btn,
body.solarized #back-btn,
body.solarized #focus-toggle,
body.solarized .mode-setting,
body.solarized .end-stats-buttons button {
    color: #93a1a1;
    background-color: #073642;
    border: 1px solid rgba(88, 110, 117, 0.3);
    padding: 8px 15px;
    font-weight: 500;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    transition: all 0.2s ease;
}

body.solarized .mode-btn:hover,
body.solarized #theme-toggle:hover,
body.solarized #stats-btn:hover,
body.solarized #back-btn:hover,
body.solarized #focus-toggle:hover,
body.solarized .mode-setting:hover,
body.solarized .end-stats-buttons button:hover {
    color: #fdf6e3;
    background-color: #094352;
    border-color: rgba(42, 161, 152, 0.5);
}

body.solarized .timer {
    color: #2aa198;
    margin-left: 20px;
    font-size: 1.3em;
    font-weight: 500;
    text-shadow: 0 0 3px rgba(42, 161, 152, 0.2);
}

body.solarized #language-select,
body.solarized #time-select,
body.solarized #words-select {
    background-color: #073642;
    color: #93a1a1;
    border: 1px solid rgba(88, 110, 117, 0.3);
    margin-left: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    transition: all 0.2s ease;
}

body.solarized #language-select:hover,
body.solarized #time-select:hover,
body.solarized #words-select:hover {
    background-color: #094352;
    border-color: rgba(42, 161, 152, 0.5);
}

body.solarized .user {
    color: #93a1a1;
}

body.solarized #progress-bar-container {
    background-color: #073642;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized #progress-bar {
    background-color: #2aa198;
    box-shadow: 0 0 8px rgba(42, 161, 152, 0.4);
}

body.solarized #words {
    color: #93a1a1;
}

body.solarized .letter.correct {
    color: #859900;
    text-shadow: 0 0 3px rgba(133, 153, 0, 0.4);
}

body.solarized .letter.incorrect {
    color: #b58900;
    text-shadow: 0 0 3px rgba(181, 137, 0, 0.4);
}

body.solarized .letter.pending {
    color: #586e75;
}

body.solarized .cursor {
    background-color: #2aa198;
    box-shadow: 0 0 8px rgba(42, 161, 152, 0.7);
}

body.solarized #stats,
body.solarized #end-stats {
    font-size: 0.9em;
    text-align: center;
    color: #839496;
    margin-top: 20px;
    background-color: rgba(7, 54, 66, 0.7);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .filter-section select {
    background-color: #073642;
    color: #93a1a1;
    border: 1px solid rgba(88, 110, 117, 0.3);
    padding: 6px 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

body.solarized .filter-section select:hover {
    background-color: #0a3d48;
    border-color: rgba(42, 161, 152, 0.5);
}

body.solarized .filter-section label {
    color: #2aa198;
    font-weight: 500;
}

body.solarized #stats-container {
    background-color: rgba(0, 43, 54, 0.85);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .chart-container {
    background-color: rgba(7, 54, 66, 0.9);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(88, 110, 117, 0.3);
    transition: all 0.25s ease;
}

body.solarized .chart-container:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25), 0 0 5px rgba(42, 161, 152, 0.2);
    transform: translateY(-2px);
}

body.solarized .summary-stats {
    background-color: rgba(7, 54, 66, 0.9);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .summary-stats p {
    color: #2aa198;
}

body.solarized .letter-stats {
    background-color: rgba(7, 54, 66, 0.9);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .letter-stats h2 {
    color: #2aa198;
    border-bottom: 1px solid rgba(88, 110, 117, 0.3);
    padding-bottom: 10px;
}

body.solarized .letter-stat {
    color: #fdf6e3;
    background-color: #073642;
    border: 1px solid rgba(88, 110, 117, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

body.solarized .letter-stat:hover {
    background-color: #0a3d48;
    border-color: rgba(42, 161, 152, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 0 5px rgba(42, 161, 152, 0.2);
    transform: translateY(-2px) scale(1.05);
}

body.solarized .letter-stat .tooltip {
    background-color: #002b36;
    color: #93a1a1;
    border: 1px solid rgba(88, 110, 117, 0.5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

body.solarized footer {
    background-color: #073642;
    color: #839496;
    border-top: 1px solid #586e75;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

body.solarized footer a {
    color: #2aa198;
    transition: all 0.2s ease;
}

body.solarized footer a:hover {
    color: #6c71c4;
    text-shadow: 0 0 5px rgba(108, 113, 196, 0.4);
}

body.solarized .mode-dropdown-content {
    background-color: #073642;
    border: 1px solid rgba(88, 110, 117, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 8px 0;
    display: none;
}

body.solarized .mode-dropdown-content.show {
    display: block !important;
}

body.solarized .mode-dropdown-content button {
    color: #93a1a1;
    padding: 10px 15px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.solarized .mode-dropdown-content button:hover {
    background-color: #0a3d48;
    color: #2aa198;
}

body.solarized #refresh-btn svg {
    stroke: #2aa198;
    filter: drop-shadow(0 0 2px rgba(42, 161, 152, 0.3));
    transition: all 0.25s ease;
}

body.solarized #refresh-btn:hover svg {
    stroke: #6c71c4;
    filter: drop-shadow(0 0 5px rgba(108, 113, 196, 0.4));
    transform: scale(1.1);
}

body.solarized .main-timer {
    color: #2aa198;
    text-shadow: 0 0 10px rgba(42, 161, 152, 0.4);
}

/* Einheitliche Timer-Farben für alle Themes */
body.deep-blue .main-timer {
    color: #ebb722;
    text-shadow: 0 0 10px rgba(235, 183, 34, 0.4);
}

body.dark-green .main-timer {
    color: #4cda65;
    text-shadow: 0 0 10px rgba(76, 218, 101, 0.4);
}

body.cyberpunk .main-timer {
    color: #c527c5;
    text-shadow: 0 0 10px rgba(197, 39, 197, 0.4);
}

body.ocean .main-timer {
    color: #64ffda;
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

body.solarized .main-timer {
    color: #2aa198;
    text-shadow: 0 0 10px rgba(42, 161, 152, 0.4);
}

body.monkeytype .main-timer {
    color: #58a6ff;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.4);
}

/* Entferne überschreibende Positionierung und Layout-Eigenschaften und behalte nur visuelle Stile */
body.deep-blue #words-container,
body.dark-green #words-container,
body.cyberpunk #words-container,
body.ocean #words-container,
body.solarized #words-container,
body.monkeytype #words-container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
}

/* Allgemeiner Stil für Formular-Umschaltung auf der Auth-Seite - wird allen Themes hinzugefügt */
.form-toggle-text {
    margin-top: 15px;
    font-size: 0.9em;
    text-align: center;
}

.form-toggle-text a {
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Deep Blue Theme Link-Anpassungen */
body.deep-blue .form-toggle-text a {
    color: #ebb722;
    border-bottom: 1px solid transparent;
}

body.deep-blue .form-toggle-text a:hover {
    color: #fff;
    border-bottom: 1px solid #ebb722;
}

/* Dark Green Theme Link-Anpassungen */
body.dark-green .form-toggle-text a {
    color: #4caf50;
    border-bottom: 1px solid transparent;
}

body.dark-green .form-toggle-text a:hover {
    color: #fff;
    border-bottom: 1px solid #4caf50;
}

/* Cyberpunk Theme Link-Anpassungen */
body.cyberpunk .form-toggle-text a {
    color: #f0f;
    border-bottom: 1px solid transparent;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);
}

body.cyberpunk .form-toggle-text a:hover {
    color: #0ff;
    border-bottom: 1px solid #f0f;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

/* Ocean Theme Link-Anpassungen */
body.ocean .form-toggle-text a {
    color: #64b5f6;
    border-bottom: 1px solid transparent;
}

body.ocean .form-toggle-text a:hover {
    color: #fff;
    border-bottom: 1px solid #64b5f6;
}

/* Solarized Theme Link-Anpassungen */
body.solarized .form-toggle-text a {
    color: #268bd2;
    border-bottom: 1px solid transparent;
}

body.solarized .form-toggle-text a:hover {
    color: #eee8d5;
    border-bottom: 1px solid #268bd2;
}

/* Monkeytype Theme Link-Anpassungen */
body.monkeytype .form-toggle-text a {
    color: #e2b714;
    border-bottom: 1px solid transparent;
}

body.monkeytype .form-toggle-text a:hover {
    color: #fff;
    border-bottom: 1px solid #e2b714;
}

body.monkeytype footer a {
    color: #e2b714;
    text-decoration: none;
    border-bottom: 1px dotted #e2b714;
}

body.monkeytype footer a:hover {
    color: #fff;
    border-bottom: 1px solid #e2b714;
}

/* Gemeinsame Theme-Anpassungen für End-Stats */
body.deep-blue #end-stats {
    background-color: rgba(18, 34, 55, 0.95);
    border: 1px solid rgba(235, 183, 34, 0.2);
}

body.deep-blue .stat-item {
    background-color: rgba(9, 76, 108, 0.5);
    border: 1px solid rgba(235, 183, 34, 0.1);
}

body.deep-blue .end-stats-buttons button {
    background-color: #094867;
    color: #c0c9d2;
    border: 1px solid rgba(235, 183, 34, 0.2);
}

body.deep-blue .end-stats-buttons button:hover {
    background-color: #0a5a7e;
    color: #ffffff;
    border: 1px solid rgba(235, 183, 34, 0.5);
}

/* Dark Green Theme End-Stats */
body.dark-green #end-stats {
    background-color: rgba(18, 27, 23, 0.95);
    border: 1px solid rgba(76, 218, 101, 0.2);
}

body.dark-green .stat-item {
    background-color: rgba(31, 46, 35, 0.7);
    border: 1px solid rgba(76, 218, 101, 0.1);
}

body.dark-green .end-stats-buttons button {
    background-color: #1f2e23;
    color: #4cda65;
    border: 1px solid rgba(76, 218, 101, 0.2);
}

body.dark-green .end-stats-buttons button:hover {
    background-color: #2c4131;
    color: #ffffff;
    border: 1px solid rgba(76, 218, 101, 0.5);
}

/* Cyberpunk Theme End-Stats */
body.cyberpunk #end-stats {
    background-color: rgba(13, 11, 30, 0.95);
    border: 1px solid rgba(197, 39, 197, 0.3);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 39, 197, 0.2);
}

body.cyberpunk .stat-item {
    background-color: rgba(20, 18, 46, 0.7);
    border: 1px solid rgba(197, 39, 197, 0.2);
    box-shadow: 0 0 10px rgba(197, 39, 197, 0.1);
}

body.cyberpunk .stat-value {
    color: #c527c5;
    text-shadow: 0 0 5px rgba(197, 39, 197, 0.3);
}

body.cyberpunk .end-stats-buttons button {
    background-color: rgba(38, 35, 80, 0.8);
    color: #edf2ff;
    border: 1px solid rgba(197, 39, 197, 0.3);
    box-shadow: 0 0 10px rgba(197, 39, 197, 0.1);
}

body.cyberpunk .end-stats-buttons button:hover {
    background-color: rgba(58, 53, 117, 0.9);
    color: #00ffea;
    border: 1px solid rgba(0, 255, 234, 0.5);
    box-shadow: 0 0 15px rgba(197, 39, 197, 0.3);
    text-shadow: 0 0 5px rgba(0, 255, 234, 0.5);
}

/* Ocean Theme End-Stats */
body.ocean #end-stats {
    background-color: rgba(12, 32, 50, 0.95);
    border: 1px solid rgba(100, 255, 218, 0.2);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(100, 255, 218, 0.1);
}

body.ocean .stat-item {
    background-color: rgba(17, 34, 64, 0.7);
    border: 1px solid rgba(100, 255, 218, 0.1);
}

body.ocean .stat-value {
    color: #64ffda;
    text-shadow: 0 0 5px rgba(100, 255, 218, 0.3);
}

body.ocean .end-stats-buttons button {
    background-color: rgba(35, 53, 84, 0.6);
    color: #e1eff8;
    border: 1px solid rgba(100, 255, 218, 0.2);
}

body.ocean .end-stats-buttons button:hover {
    background-color: rgba(42, 59, 90, 0.8);
    color: #64ffda;
    border: 1px solid rgba(100, 255, 218, 0.5);
}

/* Monkeytype Theme End-Stats */
body.monkeytype #end-stats {
    background-color: rgba(13, 14, 20, 0.95);
    border: 1px solid #1e2029;
}

body.monkeytype .stat-item {
    background-color: #16181f;
    border: 1px solid #1e2029;
}

body.monkeytype .stat-value {
    color: #58a6ff;
}

body.monkeytype .end-stats-buttons button {
    background-color: #16181f;
    color: #9599a1;
    border: none;
}

body.monkeytype .end-stats-buttons button:hover {
    background-color: #1e2029;
    color: #e2e4ed;
}

/* Solarized Theme End-Stats */
body.solarized #end-stats {
    background-color: rgba(0, 43, 54, 0.95);
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .stat-item {
    background-color: rgba(7, 54, 66, 0.7);
    border: 1px solid rgba(88, 110, 117, 0.2);
}

body.solarized .stat-value {
    color: #2aa198;
    text-shadow: 0 0 3px rgba(42, 161, 152, 0.2);
}

body.solarized .end-stats-buttons button {
    background-color: #073642;
    color: #93a1a1;
    border: 1px solid rgba(88, 110, 117, 0.3);
}

body.solarized .end-stats-buttons button:hover {
    background-color: #094352;
    color: #fdf6e3;
    border: 1px solid rgba(42, 161, 152, 0.5);
}

/* Deep Blue Theme - Hervorhebungsfarbe */
body.deep-blue .highlight-value {
    color: #ebd56b !important;
}

/* Dark Green Theme - Hervorhebungsfarbe */
body.dark-green .highlight-value {
    color: #8aff9d !important;
}

/* Cyberpunk Theme - Hervorhebungsfarbe */
body.cyberpunk .highlight-value {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

/* Ocean Theme - Hervorhebungsfarbe */
body.ocean .highlight-value {
    color: #04d8bc !important;
    text-shadow: 0 0 8px rgba(4, 216, 188, 0.5);
}

/* Monkeytype Theme - Hervorhebungsfarbe */
body.monkeytype .highlight-value {
    color: #e2b714 !important;
}

/* Solarized Theme - Hervorhebungsfarbe */
body.solarized .highlight-value {
    color: #cb4b16 !important;
}

/* Light Theme - Hervorhebungsfarbe */
body.light .highlight-value {
    color: #2563eb !important;
}

/* Monkeytype Theme */
:root.monkeytype {
    --bg-color: #0d0e14;
    --text-color: #9599a1;
    --text-color-active: #e2e4ed;
    --accent-color: #e2b714;
    --timer-color: #e2e4ed;
    --correct-color: #d1d0c5;
    --incorrect-color: #ca4754;
    --navbar-bg: #0b0c12;
    --monkeytype-correct-letter-color: #d1d0c5;
    --monkeytype-incorrect-letter-color: #ca4754;
    --monkeytype-cursor-color: #e2b714;
    --monkeytype-navbar-text: #646669;
    --monkeytype-navbar-text-active: #e2e4ed;
}

.monkeytype .navbar {
    background-color: var(--navbar-bg);
}

.monkeytype .navbar a,
.monkeytype .navbar button,
.monkeytype .menu-item,
.monkeytype .menu-option {
    color: var(--monkeytype-navbar-text);
    text-decoration: none; /* Unterstreichung entfernen */
    border-bottom: none; /* Unterstreichung entfernen */
}

.monkeytype .navbar a:hover,
.monkeytype .navbar button:hover,
.monkeytype .menu-item:hover,
.monkeytype .menu-option:hover,
.monkeytype .menu-option.active {
    color: var(--monkeytype-navbar-text-active);
    text-decoration: none; /* Unterstreichung bei Hover entfernen */
    border-bottom: none; /* Unterstreichung bei Hover entfernen */
}

.monkeytype #timer {
    color: var(--timer-color);
    font-family: 'Roboto Mono', monospace;
}

.monkeytype .main-timer {
    color: var(--timer-color);
    font-family: 'Roboto Mono', monospace;
}

.monkeytype #words {
    color: var(--text-color);
}

.monkeytype .letter.correct {
    color: var(--monkeytype-correct-letter-color);
}

.monkeytype .letter.incorrect {
    color: var(--monkeytype-incorrect-letter-color);
    border-bottom: 2px solid var(--monkeytype-incorrect-letter-color);
}

.monkeytype .cursor {
    background-color: var(--monkeytype-cursor-color);
}